Frontend/JavaScript

JavaScript control(2)

개발자의 첫 걸음 2025. 11. 12. 10:00

안녕하세요. 오늘은 자바스크립트 제어문의 두 번째 시간으로 반복문(Loop)에 대해 알아볼게요.

 

 

 

자바스크립트의 반복문 (Loop)

 

자바스크립트의 반복문은 같은 코드 블록을 여러 번 반복 실행할 때 사용하는 제어문이에요.

 

예를 들어, 숫자를 1부터 10까지를 출력하거나, 배열의 모든 요소를 하나씩 확인할 때 등 사용해요.

 

 

반복문 종류

 

1. for 반복문

 

for 문은 정해진 횟수만큼 반복할 때 사용해요.

for (초기화식; 조건식; 증감식) {
  // 반복해서 실행할 코드
}

// 초기화식: 반복을 시작하기 전에 한 번 실행 (반복 변수 선언)
// 조건식: 반복을 계속할지 결정 (true일 동안 실행)
// 증감식: 반복이 한 번 끝날 때마다 실행 (변수 값 변경)



// 예제 1
/*
    i = 0부터 시작
    i < 5일 때까지 반복
    i++로 1씩 증가
*/

console.log('=== for 반복문 ===');
for (let i = 0; i < 5; i++) {
  console.log(i);
}

 

 

2. while 반복문

 

while 문은 조건을 먼저 검사하고, 조건이 참이면 코드 블록을 실행해요.

 

조건이 처음부터 false라면 한 번도 실행되지 않을 수 있어요.

 

while (조건식) {
  // 조건이 true인 동안 반복 실행
}


// 예제

console.log('while 반복문');
let b = 0;

while (b < 5) {
  console.log(b);
  b++; // 증감식은 반드시 내부에 작성해야 함!
}

// 출력 결과

0
1
2
3
4

 

 

3. do-while 반복문

 

do-while 문은 조건을 나중에 검사해요. while문과 다르게 최소 한 번은 무조건 실행해요.

do {
  // 실행할 코드
} while (조건식);


// 예제

console.log('do while 반복문');
let c = 0;

do {
  console.log(c);
  c++;
} while (c < 5);

// 출력 결과

0
1
2
3
4

 

 

4. for...in 반복문 (객체용)

 

for...in 은 객체의 속성(key)을 반복할 때 사용해요.

 

const user = { name: 'Tom', age: 25, city: 'Seoul' };

for (let key in user) {
  console.log(key, user[key]);
}

// 출력 결과

name Tom
age 25
city Seoul

key 값이 자동으로 순회되고, user[key]를 통해 해당 값에 접근할 수 있어요.

 

 

5. for...of 반복문 (배열 / 문자열용)

 

for... of는 반복 가능한(iterable) 객체를 순회하고, 

 

배열, 문자열, Map, Set 등에 사용돼요.

 

let fruits = ['apple', 'banana', 'mango'];

for (let fruit of fruits) {
  console.log(fruit);
}


// 출력 결과

apple
banana
mango

for... of는 객체({})에는 사용할 수 없어요.

 

객체는 key-value 형태라 for...in으로 순회해야 해요.

 

다음은 위의 내용을 정리한 표예요.

 

반복문 종류 실행 순서 / 특징 주 사용처
for 초기화 → 조건 검사 → 실행 → 증감 반복 반복 횟수가 정해진 경우
while 조건 검사 → 실행 반복 조건이 만족될 때까지 반복
do...while 한 번 실행 후 조건 검사 조건과 상관없이 최소 1회 실행
for...in 객체의 key 반복 객체 속성 순회
for...of 배열, 문자열 등 요소 반복 리스트 형태 데이터 순회

 

 

여기까지 자바스크립트의 반복문에 대해 알아봤는데요.

 

자바스크립트의 반복문은 코드를 여러 번 실행해 효율적이고 간결한 프로그램을 만들 수 있게 해 줘요.

 

조건문과 반복문을 잘 활용한다면 효율성이 높아질 것 같아요.

'Frontend > JavaScript' 카테고리의 다른 글

JavaScript Function  (0) 2025.11.14
JavaScript Array  (0) 2025.11.13
JavaScript control(1)  (0) 2025.11.11
JavaScript Data Type (2)  (0) 2025.11.10
JavaScript Data Type (1)  (0) 2025.11.09