24. 반복문 - for Loop

안녕하세요. 박기린입니다.

지금부터 for 반복문에 대해 알아보겠습니다.

---

 

 

 

 

for문

for 반복문은 (괄호)안의 조건이 true인 경우에 계속 {중괄호} 안의 코드가 작동하는 Loop문입니다.

 

for (counter; logical condition; update the counter)

(괄호) 안의 조건은 이런 형태로 구성되어 있습니다.

counter : 카운터로 사용할 식 또는 변수를 선언합니다. 주로 let 키워드를 이용해서 새로운 카운터 변수를 선언합니다.

 

logical condition : 반복문이 실행될 때마다, logical condition 식도 같이 평가가 됩니다. 평가 결과가 참이라면 반복문이 계속 실행됩니다. 거짓이라면 반복문이 종료 됩니다.

 

update the counter : counter 변수가 어떤 방식으로 변화할 지 나타냅니다.

 

for문 예시 :

for (let rep = 1; rep <= 10; rep++) {
    console.log(`Lifting weights reptition ${rep} 🏋️‍♀️`);
}

---

 

 

 

 

 

 

for 문을 이용해서 Array의 모든 요소에 쉽게 접근하기

const giraffe = ['giraffe', 'park', 2022 - 2000, 'teacher', ['kim', 'lee', 'chae']];
const types1 = [];
const types2 = [];
for (let i = 0; i < giraffe.length; i++) {
    // Reading from giraffe array
    console.log(giraffe[i], typeof giraffe[i]);

    // Filling types array
    types1[i] = typeof giraffe[i]; 
    // or push 
    types2.push(typeof giraffe[i]);

}

Array의 length property를 이용해서 쉽게 Array의 요소에 접근할 수 있습니다.

'i (index의 첫글자에서 따옴)'를 카운터 변수로 선언한 후, arrayName[i]를 for 문 안에 넣어줌으로써 쉽게 Array 반복문을 만듭니다.

 

---

 

 

 

 

 

for 문을 이용해서 Array의 모든 요소에 함수를 적용한 후, 새 Array에 담기

const years = [1991, 2000, 2002, 2010];
const ages = [];

function calcAge(birthYear) {
    return 2022 - birthYear;
}

for (let i = 0; i < years.length; i++) {
    ages.push(calcAge(years[i]));
}

console.log(ages);

1. 새로운 요소들을 담아줄 [빈 Array]를 만들어 줍니다.

2. 함수를 선언한 후, Array 반복문에 함수를 적용시킵니다.

3. 적용시킨 값을 1번에서 만든 Array에 push() 해줍니다.

 

---

 

 

 

 

 

 

continue & break

for 반복문에는 continue와 break라는 키워드를 사용할 수 있습니다.

 

continue

continue는 스킵의 기능을 지녔습니다.

let text = '';

for (let i = 0; i < 10; i++) {
  if (i === 3) { 
    continue;
  }
  text = text + i;
}

console.log(text);
// expected output: "012456789"

위의 예제 코드를 보시면, if문을 이용해서 i가 3일 경우에는 continue 키워드가 작동하도록 되어있습니다.

따라서, 3일 경우 해당 {반복문}을 스킵하고 다시 for 반복문의 처음으로 돌아가 그 다음 i(4)를 실행하게 됩니다.

 

break

break는 반복문의 종료를 의미합니다. for 반복문이 순회를 계속하다가, break 키워드를 만나면 그 즉시 반복문을 전체 종료합니다.

무의미한 반복을 막기 위해서 사용합니다.

for (var i = 0; i < 10; i++) {
    if (i == 5) { // i 가 5 와 같을 경우
        break; // for 문 종료
    }

    console.log(i); // 0,1,2,3,4
}

위의 예제 코드를 보시면, if문을 이용해서 i가 5일 경우 break 키워드가 작동하도록 되어 있습니다.

break 키워드가 없었다면 i가 10이 될 때까지 반복문을 실행했겠지만, i가 5일 때 break문을 만났기 때문에 더 이상 반복문이 진행되지 않습니다. 그 즉시 반복문이 종료됩니다.

 

---

 

 

 

 

 

Array를 역순으로 반복

const giraffe = ['giraffe', 'park', 2022 - 2000, 'teacher', ['kim', 'lee', 'chae']];

for (let i = giraffe.length - 1; i >= 0; i--) {
    console.log(i, giraffe[i]);
}

1. i를 0이 아닌, 'ArrayName.length - 1'로 지정합니다. Array의 인덱스는 zero-based에 따라 0부터 시작하기 때문에, -1을 해주어야 맨 끝 요소에 접근할 수 있습니다.

2. 'update the counter' 부분에서 counter가 감소하는 expression을 넣어줍니다.

 

---

 

 

 

 

 

 

중첩 반복문

for 반복문 안에 for 반복문을 넣어서, 중첩된 반복문을 사용할 수 있습니다.

for (let exercise = 1; exercise < 4; exercise++) {
    console.log(`---------------- Starting exercise ${exercise}`);

    for (let rep = 1; rep < 6; rep++) {
        console.log(`Exercise ${exercise} : Lifting weight repetition ${rep} 🏋️‍♀️`);
    }
}

 

결과값 : 

 

다만, 중첩 반복문을 남발하게 되면 그만큼 작동 시행 수가 많아짐에 따라 성능에 안 좋은 영향을 미칠 수 있습니다.

알고리즘의 시간복잡도를 고려할 때도, 반복문 중첩은 좋지 못한 결과를 보여주기 때문에.. 사용에 주의를 기울이도록 합시다.