Section 3. 자바스크립트 for 루프

for문: 괄호 안의 3개의 식에 따른 반복수행을 하는 루프문이다.

• 변수의 선언 및 할당
• 종료조건 부재 시 항상 참
• 참일 시 블록 안의 코드 이후 실행문

문법은 예시를 보면 이해된다. 

// 💡 변수이므로 let이 사용됨
for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (let i = 0; i < 5;) {
  console.log(i++); // ++i로 바꿔볼 것
}

for (let i = 10; i >= 0; i-= 2) {
  console.log(i);
}

첫번째 for문은 0부터 시작하고 5보다 작을 때까지 (즉, 1부터 4까지) 1씩 증가하면서 console.log(i)를 실행한다. 

 

중첩해서 사용하는 경우는 다음과 같다.

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(`${i} * ${j} = ${i * j}`);
  }
}

이 경우는 안의 i = 1일때 안의 for 문이 루프를 다 마치면 i 가 1증가해서 2가 되고 다시 안의 for문의 루프가 시작되는 식이다. 

 

둘 이상의 변수를 사용할 경우는 다음과 같다.

for (let x = 0, y = 10; x <= y; x++, y--) {
  console.log(x, y);
}
//0 10
//1 9
//2 8
//3 7 등등

이런식으로 출력이 되고 x값이 y의 값이 반전이 될 때까지 반복한다.

 

for문을 사용할때 종료값이나 초깃값을 잘 정해놓지 않으면 무한루프에 빠질 수 있으니 조심하자!

let x = 0;

for (;;) {
  console.log(x);
}

console.log('출력 안됨');

for (let i = 0; i < 10; i++) {
  console.log(i--);
}

console.log('출력 안됨');

 

객체와 배열의 for문을 살펴보자.

우선 객체: for(키 이름 in 객체명) 을 사용하는 경우이다. 객체의 키들을 순서대로 반환한다.

const lunch = {
  name: '라면',
  taste: '매운맛',
  kilocalories: 500,
  cold: false
}

for (const key in lunch) { // 💡 변할 것이 아니므로 const 사용
  console.log(key, ':', lunch[key])
}

// 키의 이름은 자유롭게 사용 가능
for (const k in lunch) {
  console.log(k, ':', lunch[k])
}

두개의 for문 모두 이렇게 출력된다.

name : 라면

taste : 매운맛

kilocalories : 500

cold : false 

 

다음은 배열이다.

for (항목 of 배열명) 을 사용하는 경우이다. 배열의 항목들을 순서대로 반환한다.

// 문자열 역시 이터러블이므로 사용 가능
for (const letter of '안녕하세요~') {
  console.log(letter);
}

안

녕

하

세

요

~ 

이런식으로 출력이 된다. 

continue란?

실행중에 continue를 만나면 한 루프를 건너뛰게 된다. 

for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) continue;
  console.log(i);
}

console.log('for 루프 종료');

3의 배수만 생략되어 출력이 된다.

 

break란?

블록을 종료하고 빠져나온다.

for (let i = 1; i <= 10; i++) {
  if (i === 5) break;
  console.log(i);
}

console.log('for 루프 종료');

i가 5가 되면 루프를 종료한다.