“반복문“은 프로그램에서 동일한 작업을 여러 번 수행하기 위한 구조로, 특정 조건이 참인 동안 코드 블록을 반복 실행합니다. 이를 통해 중복된 작업을 효율적으로 처리할 수 있습니다. 자바스크립트 반복문은 C나 Java에서 보이던 for문의 형태도 있고 파이썬에서 보던 for문의 형태도 있습니다.
그리고 다른 언어와 다르게 label 문을 활용하여 명시적이면서 간단하게 반복문을 종료시킬수도 있습니다.
이번 포스트에서는 자바스크립트 반복문에는 무엇이 있는지 어떻게 사용하는지 정리해보았습니다.
for 반복문
for 문은 초기화, 조건식, 증감식을 한 번에 표현하는 구조로 사용됩니다.
(자바나 C에서 보이던 반복문의 형태입니다.)
특정 횟수 동안 반복할 때 주로 사용됩니다.
for (let i = 0; i < 5; i++) {
console.log(i);
}output
0
1
2
3
4
for … in 문
for…in 문은 객체의 열거 가능한 속성에 대해 반복합니다.
주로 객체의 속성을 순회할 때 사용됩니다.
const person = { name: 'John', age: 30 };
for (const key in person) {
console.log(key, person[key]);
}output
name John
age 30for … of 문
for…of문은 iterable 객체(배열, 문자열 등)의 값을 직접 순회합니다.
배열의 원소, 문자열의 각 문자 등을 순회할 때 사용됩니다.
const numbers = [1, 2, 3, 4];
for (const num of numbers) {
console.log(num);
}output
1
2
3
4forEach 메소드
forEach 메소드는 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 메서드입니다.
위에서 보았던 for…in, for…of, for문과 다르게 배열 인스턴스에 직접 적용됩니다.
forEach는 간편하게 배열을 반복하고 각 요소에 대해 특정 동작을 수행할 때 사용됩니다.
메소드의 매개변수는 다음을 의미합니다.
element: 현재 요소의 값.index: 현재 요소의 인덱스.array: 원본 배열.
const numbers = ['apple','pear' , 'peach', 'pineapple', 'melon'];
numbers.forEach(function(element, index, array) {
console.log(`Index: ${index}, element: ${element}`);
console.log('Original array:', array);
});output
Index: 0, element: apple
Original array: [ 'apple', 'pear', 'peach', 'pineapple', 'melon' ]
Index: 1, element: pear
Original array: [ 'apple', 'pear', 'peach', 'pineapple', 'melon' ]
Index: 2, element: peach
Original array: [ 'apple', 'pear', 'peach', 'pineapple', 'melon' ]
Index: 3, element: pineapple
Original array: [ 'apple', 'pear', 'peach', 'pineapple', 'melon' ]
Index: 4, element: melon
Original array: [ 'apple', 'pear', 'peach', 'pineapple', 'melon' ]forEach 메소드 사용시, 유의점
forEach는 반복 중간에 루프를 중단할 수 없습니다. return 문을 사용하여도 전체 반복은 계속됩니다.
forEach는 주어진 콜백 함수를 통해 배열의 각 요소를 차례로 실행하면서 원본 배열을 변경할 수 있습니다.
성능 측면에서는 for...of가 일반적으로 더 효율적일 수 있습니다. 배열을 변경하지 않고 단순히 순회만 하는 경우에는 for...of를 고려하는 것이 좋습니다.
while 반복문
while 문은 조건식이 참인 동안 반복됩니다.
반복 횟수가 명확하지 않을 때나 특정 조건을 만족할 때까지 반복해야 할 때 사용됩니다.
let i = 0;
while (i < 5) {
console.log(i);
i++;
}output
0
1
2
3
4
do-while 반복문
do-while 문은 while문과 유사하지만, 코드 블록을 먼저 실행하고 나서 조건을 검사합니다. 따라서 코드 블록이 최소 한 번은 실행됩니다.
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);output
0
1
2
3
4반복 건너뛰기 : Continue
continue 문은 반복문에서 현재 반복을 중지하고 다음 반복을 시작합니다.
특정 조건에서 현재 반복을 건너뛰고자 할 때 사용됩니다.
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // 현재 반복을 건너뜀
}
console.log(i);
}위의 예제코드에서 i가 2일 때 continue 문으로 인해 해당 반복이 건너뛰어서 0 1 3 4 만 출력합니다.
output
0
1
3
4반복 종료 : Break
break 문은 특정 조건에서 반복문을 완전히 종료하고자 할 때 사용됩니다.
for (let i = 0; i < 5; i++) {
if (i === 3) {
break; // 반복문 종료
}
console.log(i);
}위의 예제코드는 0 1 2 만 찍고 반복을 종료합니다.
output
0
1
2반복 루프의 구분 : Label
label 문은 제가 다른 언어에서는 아직 못 본 신선한 문법이였습니다.
label 문은 반복문이나 조건문에 이름을 붙일 때 사용된다고 합니다.
주로 중첩된 반복문에서 특정 루프를 식별하는 데 유용하다고 합니다.
파이썬에서는 최대한 중첩 반복문을 피하려고 했지만 중첩 반복문과 조건문이 쓰이는 경우, 이를 식별하는 게 살짝 어려운 일 이였는데 자바스크립트에서는 레이블문으로 쉽게 구분 할 수 있는 것 같아 좋은 것 같습니다.
outerLoop: for (let i = 0; i < 5; i++) {
innerLoop: for (let j = 0; j < 5; j++) {
if (i === 2 && j === 2) {
break outerLoop; // outerLoop을 종료
}
console.log(i, j);
}
}이 예제에서 outerLoop과 innerLoop은 각각 외부와 내부의 반복문을 나타내고, break outerLoop은 외부 반복문을 종료합니다.
break 는 중첩 반복문에서 break가 명시된 해당 반복문만 중단할 수 있었는데, break 뒤에 반복문 이름을 입력함으로써 해당 반복문을 손쉽게 종료할 수 있습니다.
동일한 코드인데 break만 사용한 경우와 특정 loop를 명시하여 break를 사용한 경우를 비교해 보겠습니다.
외부 반복문을 명시하여 종료 시키는 경우
outerLoop: for (let i = 0; i < 3; i++) {
innerLoop: for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
break outerLoop; // outerLoop을 종료하도록 명시
}
console.log(i, j);
}
}output :
0 0
0 1
0 2
1 0break 문만으로 반복문을 종료시키는 경우
outerLoop: for (let i = 0; i < 3; i++) {
innerLoop: for (let j = 0; j < 3; j++) {
if (i === 1 && j ===1) {
break; // break 단독 사용
}
console.log(i, j);
}
}output
0 0
0 1
0 2
1 0
2 0
2 1
2 2참고할만한 글
