반복문 (Loops)
반복문이란 특정 조건이 참인 동안 코드 블록을 여러 번 실행할 수 있도록 도와주는 구문이다. 반복적인 작업을 자동화하거나, 배열이나 객체처럼 여러 데이터를 순회할 때 유용하게 사용된다.
less
반복문 (Loops)
├── for
├── while
├── for of
└── for infor문
가장 기본적인 반복문으로 조건에 따라 일정 횟수만큼 같은 코드를 반복 실행해야할 때 사용한다.
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
// 5for문은 특정 변수의 초기값과 조건문을 설정한 후, 조건문을 비교하여 참이면 변수의 값을 증감시키며 코드를 반복 수행한다.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: 180nowKey: 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: 180Object.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: 180newArray는 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