자바스크립트 반복문의 다양한 유형과 활용법
자바스크립트는 가장 널리 사용되는 프로그래밍 언어 중 하나이며, 자바스크립트 개발자가 되기 위해서는 반복문의 기본 원리, 유형 및 작동 방식을 숙지하는 것이 필수적입니다.
반복문(루프)은 특정 조건에 따라 반복적인 작업을 자동화하는 데 사용되는 강력한 도구입니다. ‘반복’이라는 용어는 루프 맥락에서 작업의 반복적인 실행을 의미합니다. 루프는 설정된 중단 조건이 충족될 때까지 계속해서 실행됩니다.
이해를 돕기 위해, 컴퓨터 게임에서 북쪽으로 X칸 이동한 다음 왼쪽으로 Y칸 이동하라는 지시를 받는 상황을 가정해 봅시다.
예를 들어, 다음과 같이 북쪽으로 7칸 이동하는 동작을 코드로 표현할 수 있습니다.
for (let step = 0; step < 7; step++) { // 총 7번 실행되며, step 값은 0부터 6까지 증가합니다. console.log("북쪽으로 한 칸 이동"); }
위의 코드 블록이 실행되면 “북쪽으로 한 칸 이동”이라는 메시지가 7번 콘솔에 출력됩니다.
반복문은 왜 사용할까요?
- 반복적인 작업 수행: 특정 조건이 만족될 때까지 명령을 반복적으로 실행할 수 있습니다.
- 객체 또는 배열 순회: 객체의 속성이나 배열의 요소를 순회하며 각 항목에 대해 특정 작업을 수행할 수 있습니다.
- 데이터 필터링: 특정 조건을 만족하는 데이터를 선별하는 데 루프를 활용할 수 있습니다.
자바스크립트에서는 다양한 형태의 반복문을 제공합니다. for
, while
, do...while
, for...of
및 for...in
루프가 있습니다. 각각의 동작 방식을 자세히 살펴보겠습니다.
for 루프
for
루프는 지정된 조건이 참(true)으로 평가될 때까지 코드 블록을 반복 실행합니다. for
루프는 세 가지 선택적 표현식과 코드 블록으로 구성됩니다.
for (초기화; 조건; 최종 표현식) { // 코드 }
- 초기화 표현식: 루프가 처음 실행되기 전에 한 번 실행됩니다. 주로 카운터 변수를 초기화하는 데 사용됩니다.
- 조건 표현식: 루프가 실행되기 전에 매번 평가됩니다. 조건이 참이면 루프 내의 코드가 실행되고, 거짓이면 루프가 종료됩니다. 조건식을 생략하면 기본적으로 참으로 간주됩니다.
- 최종 표현식: 각 루프 반복 후 실행됩니다. 주로 카운터 변수를 증가시키는 데 사용됩니다.
블록 문 {}
을 사용하여 여러 문을 그룹화하고 실행할 수 있습니다. 루프를 중간에 종료하려면 break
문을 사용할 수 있습니다.
for 루프 예시 코드
- 반복문을 사용한 기본 for 루프
for (let i = 0; i < 7; i++) { console.log(i); }
이 코드 블록에서:
- 변수
i
는 0으로 초기화됩니다. (let i = 0
) - 루프 조건은
i
가 7보다 작을 때까지입니다. (i < 7
) - 루프는
i
값이 7보다 작으면 반복됩니다. - 매 반복마다
i
값은 1씩 증가합니다. (i++
)
break
문을 사용하여 루프 중간에 빠져나오기for (let i = 1; i < 11; i += 2) { if (i === 9) { break; } console.log('개발자 수: ' + i); }
- 코드 블록은 1에서 10까지 반복됩니다. (
i < 11
) - 변수
i
는 값 1로 초기화됩니다. (let i = 1
) - 루프는
i
값이 11보다 작으면 계속 실행됩니다. (i < 11
) - 반복할 때마다
i
값은 2씩 증가합니다. (i += 2
)
if
문은 i
값이 9인지 확인합니다. 조건이 참이면 break
문이 실행되고 루프가 종료됩니다.
(영상)
for…of 루프
for...of
루프는 Map
, Array
, Arguments
및 Set
과 같은 반복 가능한 객체를 순회하는 데 사용됩니다. 이 루프는 각 속성 값에 대해 지정된 문을 실행하며, 사용자 정의 반복 후크를 호출합니다.
for...of
루프의 기본 구조는 다음과 같습니다.
for (변수 of 객체) 문장
for…of 루프 예시
- 배열을 순회하는
for...of
루프
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , "React"]; for (let i of frontendLanguages) { console.log(i); }
이 코드에서:
frontendLanguages
라는 이름의 배열을 정의합니다.- 배열에는 “HTML”, “CSS”, “JavaScript” 및 “React”의 네 가지 요소가 있습니다.
for...of
루프는frontendLanguages
의 각 요소를 순회합니다.- 루프의
i
는 각 반복에서 각 요소의 값을 가지며 콘솔에 출력됩니다.
Set
객체를 순회하는 for...of
루프const s = new Set(); s.add(2); s.add("회색"); for (let n of s) { console.log(n); }
이 코드 블록에서:
Set()
생성자를 사용하여 새Set
객체를 변수s
에 할당합니다.add()
메서드를 사용하여 두 개의 요소가 추가됩니다.for...of
루프는Set
객체의 요소를 순회합니다.- 루프는
console.log(n)
문을 실행하기 전에 현재 요소를n
에 할당합니다.
Map
객체를 순회하는 for...of
루프const m = new Map(); m.set(4, "토끼"); m.set(6, "원숭이"); m.set(8, "코끼리"); m.set(10, "사자"); m.set(12, "표범"); for (let n of m) { console.log(n); }
이 코드 블록에서:
Map()
생성자를 사용하여 새로운Map
객체를 생성합니다.- 변수
m
을 선언합니다. .set()
메서드를 사용하여 5개의 키-값 쌍을 추가합니다.for...of
루프는Map
객체m
의 요소를 순회합니다.
for…in 루프
for...in
루프는 객체의 속성을 순회하는 데 사용됩니다. for...in
루프의 기본 구조는 다음과 같습니다.
for (속성 in 객체) { // 코드 }
for...in
루프는 배열과 유사한 객체를 순회하는 데 사용할 수 있습니다.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 }; for (const vegetable in shoppingList) { console.log(vegetable); }
이 코드 블록에서:
- 자바스크립트 객체를 생성하고
shoppingList
라고 이름을 지정합니다. in
연산자를 사용하여shoppingList
의 각 속성을 순회합니다.- 각 반복에서 루프는
shoppingList
의 현재 속성 이름을 가져옵니다.
while 루프
while
루프는 주어진 조건을 평가하여 참이면 코드 블록을 실행합니다. 조건이 거짓이면 루프는 종료되고 코드 블록은 실행되지 않습니다.
다음은 while
루프의 기본 구조입니다.
while (조건) 문장
조건은 루프 내부의 문을 실행하기 전에 평가되어야 합니다. {}
블록 문을 사용하여 여러 문을 실행할 수 있습니다.
while 루프 예시
let n = 0; while (n < 9) { console.log(n); n++; }
이 코드에서:
- 변수
n
은 0으로 초기화됩니다. (n = 0
) - 루프는
n
값이 9보다 작은 동안 실행됩니다. (n < 9
) n
값은 콘솔에 출력되고 매 반복마다 1씩 증가합니다. (n++
)- 코드는
n
값이 8일 때 실행을 멈춥니다.
do…while 루프
do...while
루프는 특정 조건이 거짓으로 평가될 때까지 반복적으로 실행됩니다.
do...while
문의 일반적인 구조는 다음과 같습니다.
do 문장 while (조건);
문장은 조건을 확인하기 전에 한 번 실행됩니다. 조건이 참이면 문장이 실행됩니다. 그러나 조건 평가 결과가 거짓이면 실행이 중단되고 제어는 do...while
루프 다음에 오는 문장으로 넘어갑니다. do...while
루프의 코드는 조건이 참으로 평가되더라도 최소한 한 번은 실행되는 것을 보장합니다.
do…while 루프 예시
let n = 0; do { n += 1; console.log(n); } while (n < 7);
이 코드에서:
- 변수
n
을 선언하고 초기값을 0으로 설정합니다. (n = 0
) - 변수
n
은 매 반복마다 1씩 증가하는do...while
루프에 들어갑니다. (n += 1
) n
값이 기록됩니다.- 루프는
n
값이 7보다 작은 동안 계속 실행됩니다. (n < 7
)
이 코드를 실행하면 루프가 7번 실행되는 동안 콘솔에 1부터 7까지의 n
값이 출력됩니다.
중첩 루프
중첩 루프는 루프 안에 또 다른 루프가 있는 상황을 의미합니다. 예를 들어, 다른 for
루프 내에 중첩된 for
루프가 있을 수 있습니다.
for (let outer = 0; outer < 5; outer += 2) { for (let inner = 0; inner < 6; inner += 2) { console.log(`${outer}-${inner}`); } }
outer
및inner
두 개의 변수가 있으며, 둘 다 값 0으로 초기화됩니다.- 두 변수는 매 반복마다 2씩 증가합니다.
- 외부 및 내부 루프는 각각 세 번 반복됩니다.
루프 제어문
“점프 문”이라고도 하는 루프 제어문은 프로그램의 정상적인 흐름을 방해하는 데 사용됩니다. break
및 continue
는 루프 제어문의 예시입니다.
break 문
break
문은 특정 조건이 충족되지 않은 경우에도 루프를 즉시 종료합니다.
for (let n = 1; n <= 26; n++) { if (n === 13) { console.log("여기서 루프가 중단됩니다. break 문에 도달했습니다."); break; } console.log(n); }
렌더링된 코드는 다음과 같이 나타납니다.
continue 문
continue
문은 특정 코드 블록을 건너뛰고 새 루프 반복을 시작하는 데 사용됩니다.
for (let n = 0; n <= 10; n++) { if (n === 5) { continue; } console.log(n); }
렌더링된 코드는 다음과 같이 나타납니다.
결론
위에서 설명한 내용은 일반적인 바닐라 자바스크립트 및 자바스크립트 프레임워크/라이브러리에서 볼 수 있는 루프들의 예시입니다. 강조 표시된 바와 같이, 각 루프 유형에는 서로 다른 사용 사례와 동작이 있습니다. 잘못된 루프 유형을 선택하면 버그가 발생하고 코드에서 예기치 않은 동작이 나타날 수 있습니다.
자바스크립트 프레임워크 또는 라이브러리를 사용하는 경우 항상 해당 문서를 확인하고 내장 루프를 활용하십시오.