반복문 (Loops)
반복문이란 특정 조건이 참인 동안 코드 블록을 여러 번 실행할 수 있도록 도와주는 구문이다. 반복적인 작업을 자동화하거나, 배열이나 객체처럼 여러 데이터를 순회할 때 유용하게 사용된다.
반복문 (Loops)
├── for
├── while
├── for of
└── for in
for문
가장 기본적인 반복문으로 조건에 따라 일정 횟수만큼 같은 코드를 반복 실행해야할 때 사용한다.
for (초기식; 조건식; 증감식) {
// 반복 실행할 코드
}
- 초기식: 반복을 시작할 때 사용하는 변수 선언 또는 초기값 설정
- 조건식: 반복을 계속할지 결정하는 조건. 조건이 true일 동안 반복
- 증감식: 반복이 한 번 실행된 후, 변수 값을 조정
예시: 1부터 5까지 출력
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까지 출력
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문은 조건이 참인 동안 코드 블록을 반복 실행한다. 반복 횟수가 정해져 있지 않을 때나 조건에 따라 반복을 제어해야 할 때 사용한다.
// 초기식
let i = 0;
while (조건식) {
// 반복 실행할 코드
// 증감식
}
- 조건식이
true
인 동안{}
안의 코드가 반복 실행된다. - 조건식이
false
가 되면 반복은 종료된다. - while문은 조건식이 참인지 계속 확인하며 반복하기 때문에, 조건식의 결과를 변화시켜 줄 로직이 반드시 필요하다. 예를 들어, 증감식이 누락되거나 조건을 변화시키지 않으면 무한 루프에 빠질 수 있다.
예시: 조건이 항상 참이면 무한 반복됨
let i = 1;
while (i > 0) {
console.log(i); // 무한히 출력
// i++ 없음 → i의 값이 반복문 안에서 바뀌지 않기 때문에 while문의 조건이 계속 true로 유지됨
}
- while문은 괄호 안의 조건이 참인 동안 코드 블록이 계속 실행된다. 따라서 반복 횟수를 제어하는 변수를 직접 증가 또는 변경해줘야 한다.
- 조건이 항상 참이면 무한 반복이 되어 무한 루프에 빠질 수 있으므로, 조건이 언젠가는 거짓이 되어 정상적으로 종료될 수 있도록 주의해야 한다.
예시: 숫자 1부터 5까지 순서대로 출력
let i = 1;
while (i < 6) {
console.log(i);
i++;
}
// 1
// 2
// 3
// 4
// 5
for문
은 특정 변수의 초기값과 조건문을 설정한 후, 조건문을 비교하여 참이면 변수의 값을 증감시키며 코드를 반복 수행한다.white문
은 단순히 괄호 안의 조건문을 확인하여 코드를 반복 수행한다.
반복문을 사용한 배열의 모든 요소 순회
for문
, while문
은 자바스크립트에서 배열의 모든 요소들에 접근해야 할 때 유용하게 사용된다.
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가지 방법이 있다.
반복문을 사용한 객체의 모든 요소 순회
└── 객체를 배열로 변환하는 방법
├── Object.keys()
├── Object.values()
└── Object.entries()
1. Object.keys
1-1. 객체를 배열로 변경
let person = {
name: "홍길동",
age: 30,
height: 180,
};
console.log(object.keys(person));
// ["name", "age", "height"]
Object.keys
는 자바스크립트의 Object라는 객체 메서드로 매개 변수로 받은 객체의 키들을 모두 찾아 배열의 형태로 반환하는 객체 메서드이다.- 객체를 키값들로만 이루어진 배열로 변환한다.
1-2. for문으로 객체의 프로퍼티들 모두 순회
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. 객체를 배열로 변경
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 값 모두 순회
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. 객체를 배열로 변환
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문을 이용한 순회
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() 등을 사용해야 한다.
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는 이터러블만 순회할 수 있다.
const str = "hello";
for (let char of str) {
console.log(char);
}
// h
// e
// l
// l
// o
- 문자열 내부도 이터러블이기 때문에 for-of로 순회할 수 있다.
예시: 일반 객체는 이터러블이 아니다.
const obj = { a: 1, b: 2 };
for (let item of obj) {
console.log(item); // TypeError: obj is not iterable
}
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문과는 달리, 객체를 배열로 변환하지 않고도 바로 순회할 수 있다.
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