Skip to content

반복문 (Loops)

반복문이란 특정 조건이 참인 동안 코드 블록을 여러 번 실행할 수 있도록 도와주는 구문이다. 반복적인 작업을 자동화하거나, 배열이나 객체처럼 여러 데이터를 순회할 때 유용하게 사용된다.

less
반복문 (Loops)
├── for
├── while
├── for of
└── for in

for문

가장 기본적인 반복문으로 조건에 따라 일정 횟수만큼 같은 코드를 반복 실행해야할 때 사용한다.

js
for (초기식; 조건식; 증감식) {
  // 반복 실행할 코드
}
  • 초기식: 반복을 시작할 때 사용하는 변수 선언 또는 초기값 설정
  • 조건식: 반복을 계속할지 결정하는 조건. 조건이 true일 동안 반복
  • 증감식: 반복이 한 번 실행된 후, 변수 값을 조정

예시: 1부터 5까지 출력

js
for (let i = 1; i < 6; i++) {
  console.log(i);
}

// 1
// 2
// 3
// 4
// 5
  • i의 초기값은 1이며, i < 6 조건이 참일 동안 console.log(i) 실행한다. 매 반복마다 i++로 1씩 증가하고, i가 6이 되면 조건을 만족하지 않으므로 반복 종료한다.

예시: 5부터 1까지 출력

js
for (let i = 5; i > 0; i--) {
  console.log(i);
}

// 5
// 4
// 3
// 2
// 1
  • i의 초기값은 5이며, 조건은 i > 0이다. 반복할 때마다 i--로 1씩 감소하며, 조건을 만족하는 동안 console.log(i)가 실행되고 반복문은 계속된다.

while문

while문은 조건이 참인 동안 코드 블록을 반복 실행한다. 반복 횟수가 정해져 있지 않을 때나 조건에 따라 반복을 제어해야 할 때 사용한다.

js
// 초기식
let i = 0;

while (조건식) {
  // 반복 실행할 코드
  // 증감식
}
  • 조건식이 true인 동안 {}안의 코드가 반복 실행된다.
  • 조건식이 false가 되면 반복은 종료된다.
  • while문은 조건식이 참인지 계속 확인하며 반복하기 때문에, 조건식의 결과를 변화시켜 줄 로직이 반드시 필요하다. 예를 들어, 증감식이 누락되거나 조건을 변화시키지 않으면 무한 루프에 빠질 수 있다.

예시: 조건이 항상 참이면 무한 반복됨

js
let i = 1;
while (i > 0) {
  console.log(i); // 무한히 출력
  // i++ 없음 → i의 값이 반복문 안에서 바뀌지 않기 때문에 while문의 조건이 계속 true로 유지됨
}
  • while문은 괄호 안의 조건이 참인 동안 코드 블록이 계속 실행된다. 따라서 반복 횟수를 제어하는 변수를 직접 증가 또는 변경해줘야 한다.
  • 조건이 항상 참이면 무한 반복이 되어 무한 루프에 빠질 수 있으므로, 조건이 언젠가는 거짓이 되어 정상적으로 종료될 수 있도록 주의해야 한다.

예시: 숫자 1부터 5까지 순서대로 출력

js
let i = 1;

while (i < 6) {
  console.log(i);
  i++;
}

// 1
// 2
// 3
// 4
// 5
  • for문은 특정 변수의 초기값과 조건문을 설정한 후, 조건문을 비교하여 참이면 변수의 값을 증감시키며 코드를 반복 수행한다.
  • white문은 단순히 괄호 안의 조건문을 확인하여 코드를 반복 수행한다.

반복문을 사용한 배열의 모든 요소 순회

for문, while문은 자바스크립트에서 배열의 모든 요소들에 접근해야 할 때 유용하게 사용된다.

js
let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// 1
// 2
// 3
// 4
// 5
  • 배열의 첫 번째 요소부터 차례로 접근하기 위해 변수 i는 0으로 초기화한다.
  • length 프로퍼티는 배열의 길이를 나타내므로, 조건식은 유효한 인덱스 범위 내에서 반복하도록 설정한 것이다.

반복문을 사용한 객체의 모든 요소 순회

객체의 프로퍼티도 반복문을 사용해 순회할 수 있다. 객체의 프로퍼티를 순회하기 위해서는 객체를 배열의 형태로 변경해주어야한다. 객체를 배열로 변경하는 방법엔 3가지 방법이 있다.

less
반복문을 사용한 객체의 모든 요소 순회
└── 객체를 배열로 변환하는 방법
    ├── Object.keys()
    ├── Object.values()
    └── Object.entries()

1. Object.keys

1-1. 객체를 배열로 변경

js
let person = {
  name: "홍길동",
  age: 30,
  height: 180,
};

console.log(object.keys(person));
// ["name", "age", "height"]
  • Object.keys는 자바스크립트의 Object라는 객체 메서드로 매개 변수로 받은 객체의 키들을 모두 찾아 배열의 형태로 반환하는 객체 메서드이다.
  • 객체를 키값들로만 이루어진 배열로 변환한다.

1-2. for문으로 객체의 프로퍼티들 모두 순회

js
let person = {
  name: "홍길동",
  age: 30,
  height: 180,
};

let newArray = Object.keys(person);

for (let i = 0; i < newArray.length; i++) {
  let nowKey = newArray[i];
  console.log(`key: ${nowKey}, value: ${person[nowKey]}`);
}

// key: name, value: 홍길동
// key: age, value: 30
// key: height, value: 180
  • nowKey: Object.keys(person)를 통해 얻은 키 중 하나. "name", "age", "height"가 된다.
  • person[nowKey]: nowKey에 해당하는 값(value), "홍길동", 30, 180이 출력된다.

2. Object.values

2-1. 객체를 배열로 변경

js
let person = {
  name: "홍길동",
  age: 30,
  height: 180,
};

let newArray = Object.values(person);

console.log(Object.values(person));
// ["홍길동", 30, 180]
  • Object.values 메서드는 매개변수로 객체를 넘기면 해당 객체의 values들을 모두 찾아 배열로 반환한다.

2-2. for문으로 객체의 value 값 모두 순회

js
let person = {
  name: "홍길동",
  age: 30,
  height: 180,
};

let newArray = Object.values(person);

for (let i = 0; i < newArray.length; i++) {
  console.log(`value: ${newArray[i]}`);
}

// value: 홍길동
// value: 30
// value: 180
  • Object.values 메서드는 newArray라는 변수에 person 객체의 프로퍼티 값들이 저장되기 때문에, 키를 알 필요 없이 바로 밸류 값을 출력할 수 있다.

3. Object.entries

3-1. 객체를 배열로 변환

js
let person = {
  name: "홍길동",
  age: 30,
  height: 180,
};

// 객체를 배열로 변환
let newArray = Object.entries(person);

console.log(newArray);

// [
//   ["name", "홍길동"],
//   ["age", 30],
//   ["height", 180]
// ]
  • Object.entries 메서드는 객체의 키-값 쌍을 [key, value] 형태의 2차원 배열로 변환해준다.

3-2. for문을 이용한 순회

js
let person = {
  name: "홍길동",
  age: 30,
  height: 180,
};

let newArray = Object.entries(person);

for (let i = 0; i < newArray.length; i++) {
  console.log(`key: ${newArray[i][0]}, value: ${newArray[i][1]}`);
}

// key: name, value: 홍길동
// key: age, value: 30
// key: height, value: 180
  • newArray는 2차원 배열이며, 각 요소는 [key, value] 형태다.

  • newArray[i][0] newArray의 i번째 요소의 첫 번째 값은 객체의 key에 해당한다.

  • newArray[i][1] newArray의 i번째 요소의 두 번째 값은 객체의 value에 해당한다.


for of

for-of 문은 배열의 모든 요소에 간편하게 접근할 때 유용한 반복문이다. 배열뿐 아니라 문자열, Set, Map 등 이터러블 객체의 요소들을 하나씩 순회할 수 있다. 단, 객체(Object)는 이터러블이 아니기 때문에 사용할 수 없으며, 객체를 순회하려면 for-in이나 Object.keys() 등을 사용해야 한다.

js
let arr = [1, 2, 3, 4, 5];

for (let i of arr) {
  console.log(i);
}

// 1
// 2
// 3
// 4
// 5
  • i는 arr 배열의 각 요소를 순서대로 참조한다.
  • 기존의 for 문처럼 인덱스를 직접 사용하지 않아도 되므로 가독성이 높고 코드가 간결하다.
이터러블 객체란?

이터러블(Iterable)은 Symbol.iterator라는 특별한 메서드를 가지고 있는 객체를 말한다. 이 메서드를 통해 이터레이터(Iterator)를 생성할 수 있고, 이터레이터는 값을 하나씩 꺼내는 next() 메서드를 제공한다.
대표적인 이터러블 객체로는 배열, 문자열, Set, Map 등이 있다.


예시: for-of는 이터러블만 순회할 수 있다.
js
const str = "hello";

for (let char of str) {
  console.log(char);
}
// h
// e
// l
// l
// o
  • 문자열 내부도 이터러블이기 때문에 for-of로 순회할 수 있다.

예시: 일반 객체는 이터러블이 아니다.
js
const obj = { a: 1, b: 2 };

for (let item of obj) {
  console.log(item); // TypeError: obj is not iterable
}

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

console.log(typeof obj[Symbol.iterator]); // undefined
  • 일반 객체는 Symbol.iterator 메서드를 갖지 않기 때문에 이터러블이 아니다. 즉, for-of문으로 순회할 수 없다.
  • for-of 반복문은 내부적으로 Symbol.iterator를 호출해서 이터레이터 객체를 얻고, 그 객체의 next() 메서드를 반복적으로 호출하면서 값을 순회한다. 그러나 객체는 Symbol.iterator가 정의되어 있지 않기 때문에 for-of는 사용 불가능하다.
  • 대신, 객체의 key나 value를 순회하고 싶다면 Object.keys(), Object.entries() 등을 사용해서 배열로 변환 후 순회해야 한다.

Symbol.iterator란?

이터러블 객체는 obj[Symbol.iterator]() 를 통해 이터레이터 객체를 반환한다. 이터레이터는 { value: 어떤값, done: true/false } 형태의 값을 반환하며, for-of는 이 과정을 자동으로 처리한다.


for in

for-in 반복문은 객체를 순회할 때 사용하는 문법으로, 객체의 key를 하나씩 꺼내 반복할 수 있게 해준다. for문이나 for-of문과는 달리, 객체를 배열로 변환하지 않고도 바로 순회할 수 있다.

js
let person = {
  name: "바켸빈",
  age: 7,
  height: 180,
};

for (let key in person) {
  console.log(`key ${key}, value: ${person[key]}`);
}

// key name, value: 바켸빈
// key age, value: 7
// key height, value: 180