[J.S] 7. 반복문 다루기

 

7.0 반복문이란?

지정한 조건이 참으로 평가 되는 동안 지정한 블록문을 반복해서 실행 

동일한 코드를 여러 번 실행 시 사용 되는 구문

코드 중복을 줄이고 작업을 효율적으로 처리 할 수 있게 도와줌

루프(loop)
반복문을 영어로 loop라고 한다. 
while, do ... while, for 문을 while 루프, do ... while 루프, for 루프 라고도  

7.1. while 문

설명

• 조건이 참인 동안 코드 블록을 반복 실행
• 블록문을 수행 하기 전 조건식 평가
• 반복 횟수를 미리 알기 어렵거나 조건에 따라 달라질 때 유용
• 조건식이 처음부터 거짓이면 한 번도 실행 안 될수 있음

형식

while (조건식) {

  // 반복 실행할 코드

}

 

예문

let i = 0;

while (i < 5) {

  console.log(i);

  i++;  // 증감식으로 조건 변화 필수

}

// 0 1 2 3 4 출력

7.2 무한 반복문

설명 

 

• 조건이 항상 참이 되어 반복이 끝나지 않는 반복문
• 실제로는 종료 조건(break 등)을 넣어 무한 반복을 방지
• 서버나 이벤트 대기 등 특정 상황에서 주로 사용

 

형식

while (true) {

  // 무한 반복 코드

  if (종료조건) break;  // 종료 조건 반드시 필요

}

 

예문

let count = 0;

while (true) {

  console.log("무한 반복");

  count++;

  if (count === 3) break;  // 3번 반복 후 종료

}

// "무한 반복" 3회 출력 후 종료

5.3 do...while 문

설명 

 

• 특정 조건이 참으로 평가 되는 동안 do 다음에 오는 블록문을 반복 실행
• 먼저 코드 블록을 실행한 후 조건식을 평가
• 따라서 조건과 관계없이 최소 한 번은 실행
• 반복 횟수를 최소 한 번 보장해야 할 때 유용

 

형식

do {

  // 반복 실행할 코드

} while (조건식);

 

예문

let i = 0;

do {

  console.log(i);

  i++;

} while (i < 5);

// 0 1 2 3 4 출력

5.4 for 문

설명 

• 반복 횟수를 미리 알고 있을 때 많이 사용
• 지정된 횟수가 끝날 때 까지 블록문은 반복 실행
• 초기값, 조건식, 증감식을 한 줄에 작성해 간결합니다.
• 반복 변수를 쉽게 관리할 수 있습니다.
• 초깃값 → 조건식 → 블록문(참일경우) → 증감식 → 조건식 순서로 실행

 

형식

for (초기식; 조건식; 증감식) {

  // 반복 실행할 코드

}

 

예문

for (let i = 0; i < 5; i++) {

  console.log(i);

}

// 0 1 2 3 4 출력

 

5.4.1 중첩하기

설명 

• 반복문 안에 또 다른 반복문을 넣는 것을 의미
• 다차원 배열 처리나 표 형태 데이터 반복에 사용
• 내부에 중접된 for 문은 외부 for문의 실행이 종료시 같이 종료

형식

for (초기식1; 조건식1; 증감식1) {

  for (초기식2; 조건식2; 증감식2) {

    // 반복 실행할 코드

  }

}

 

예문

for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 2; j++) {

    console.log(`i=${i}, j=${j}`);

  }

}

/* 출력:

i=0, j=0

i=0, j=1

i=1, j=0

i=1, j=1

i=2, j=0

i=2, j=1

*/

5.5 for 문과 배열

설명 

 

• 배열 요소에 인덱스로 접근하여 반복 처리
• 배열 길이(length) 만큼 반복해야 배열 요소 전체를 다룰 수 있음
• 배열의 길이를 확인 하는 방법은 변수(상수).length로 확인이 가능함

 

형식

for (let i = 0; i < 배열.length; i++) {

  // 배열[i] 사용 가능

}

 

예문

const arr = [10, 20, 30];

for (let i = 0; i < arr.length; i++) {

  console.log(arr[i]);

}

// 10 20 30 출력

 

5.6 for ... in 

설명 

• ES6에서 객체 리터럴이나 배령에 반복 접근 할 수 있는 반복문이 추가
• 객체의 모든 열거 가능한 속성(키)을 반복
• 배열의 경우 인덱스(문자열 형태)를 반복하지만 배열 인덱스를 문자열로 반환 하고 상속된 속성까지 포함 될 수 있어 일반적으로 권장 안함
• 배열은 for, for ... of 사용을 권

5.6.1 객체 리터럴을 반복할 경우

설명 

• 객체 리터럴을 반복 탐색 시, 탐색 결과로 가변수에 객체 리터럴의 키가 할당 되어 키와 값이 출

형식

for (let key in 객체) {

  // key와 객체[key] 사용 가능

}

 

예문

const obj = {a: 1, b: 2, c: 3};

for (let key in obj) {

  console.log(key, obj[key]);

}

// a 1

// b 2

// c 3 출력

5.6.2 배열을 반복할 경우

예문

const arr = [10, 20, 30];

for (let index in arr) {

  console.log(index, arr[index]);

}

// 0 10

// 1 20

// 2 30 출력

5.7 for ... of 문

설명 

 

• for...of는 값(value) 을 직접 꺼내 반복
• 배열, 문자열, Map, Set 등 이터러블 객체에서 사용 가능
• 인덱스가 아니라 요소 값에 바로 접근할 수 있어 가독성이 좋

 

형식

for (let 변수 of 이터러블) {

  // 변수에는 각 요소 값이 순서대로 대입됨

}

 

예문

1) 배열 순회

const arr = [10, 20, 30];

for (let value of arr) {

  console.log(value);

}

// 10

// 20

// 30 출력

2) 문자열 순회

const str = "ABC";

for (let char of str) {

  console.log(char);

}

// A

// B

// C 출력

3) set 순회

const mySet = new Set([1, 2, 3]);

for (let value of mySet) {

  console.log(value);

}

// 1

// 2

// 3 출력

 

💡 왜 for...in 대신 for...of를 권장할까?

for...in은 인덱스(문자열) 를 반환하고, 상속된 속성까지 포함될 수 있어 예기치 않은 동작이 발생할 수 있음.
for...of는 요소 값만 반환하며, 배열 순회에 최적화 되어 있음

📌 for...in vs for...of 비교 표

구분	for ... in	for ... of
반복 대상	객체의 속성(키) 또는 배열의 인덱스(문자열)	이터러블 객체의 값 (배열, 문자열, Map, Set 등)
반환 값	키(문자열 형태 인덱스 포함)	요소 값
사용 대상	주로 객체	주로 배열, 문자열, 이터러블
배열 사용 시 권장 여부	❌ (순서가 보장되지 않을 수 있음)	✅ (순서대로 값 반환)
상속된 속성 포함 여부	포함 가능 (예기치 않은 키 포함 위험)	포함 안 함
예시	for (let key in obj) {...}	for (let value of arr) {...}

 

5.7 break 문

설명

• break 문은 현재 실행 중인 반복문이나 switch 문을 즉시 종료
• 보통 특정 조건을 만족하거나, 더 이상 반복이 필요 없을 시 사용
• 중첩 반복문에서 사용 시, 가장 가까운 반복문만 종료

 

형식

 

   break;

 

 

예문

1) 기본 사용

i가 5가 되면 break가 실행 되어 반복이 즉시 종료 

for (let i = 0; i < 10; i++) {

  if (i === 5) {

    break; // i가 5이면 반복문 종료

  }

  console.log(i);

}

// 출력: 0, 1, 2, 3, 4

 

2) while문에서 사용

break를 사용하여 무한 반복문을 안전하게 빠져 나옴

let count = 0;

while (true) {

  if (count === 3) {

    break; // count가 3이면 무한 반복 종료

  }

  console.log(count);

  count++;

}

// 출력: 0, 1, 2

 

3) 중첩 반복문에서 사용 

안쪽 for 문은 종료 되지만 바깥 for문은 계속 실행

for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    if (j === 1) {

      break; // 가장 안쪽 for문만 종료

    }

    console.log(`i=${i}, j=${j}`);

  }

}

 

4) for .. in 문에서 사용 

const user = { name: "홍길동", age: 30, city: "서울" };

for (let key in user) {

  console.log(`${key}: ${user[key]}`);

  if (key === "age") {

    break; // age 속성에서 반복 종료

  }

}

 

// name: 홍길동

// age: 30

💡 참고
for...in 순회 순서는 속성 추가 순서를 따르지만, 숫자 형태의 키는 오름차순으로 먼저 순회된다.
따라서 break를 사용할 때도 실제 순회 순서를 염두하자

5.8 continue 문

설명 

 

• 현재 반복문의 나머지 코드를 건너뛰고 다음 반복을 바로 실행
• break와 달리 반복문 자체를 종료하지 않고 조건에 해당하는 반복만 건너뜀
• 반복 중 특정 조건을 제외하고 처리할 때 사용

 

형식

   

   continue;

 

 

예문 1) for 문에서 사용 

for (let i = 1; i <= 5; i++) {

  if (i === 3) {

    continue; // i가 3이면 아래 코드 건너뛰고 다음 반복으로

  }

  console.log(i);

}

// 출력: 1, 2, 4, 5

 

예문2) while 문에서 사용 

let num = 0;

while (num < 5) {

  num++;

  if (num % 2 === 0) {

    continue; // 짝수일 경우 건너뜀

  }

  console.log(num);

}

// 출력: 1, 3, 5

 

예문 3) for ... in 문에서 사용 

const user = { name: "홍길동", age: 30, city: "서울" };

for (let key in user) {

  if (key === "age") {

    continue; // age 속성은 건너뜀

  }

  console.log(`${key}: ${user[key]}`);

}

// 출력:

// name: 홍길동

// city: 서울

 

 

 

*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한 대로 자바스크립트를 요약한 정리입니다. 

본 문서는 상업적인 목적으로 사용이 불가능 함을 고지합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지합니다.)