모든 JavaScript 루프 유형 설명: [With Codeblocks and Examples]

JavaScript는 가장 많이 사용되는 프로그래밍 언어 중 하나입니다. JavaScript 엔지니어가 되려는 개발자는 루프의 기본, 유형 및 작동 방식을 배워야 합니다.

JavaScript 루프는 특정 조건에 따라 반복되는 작업을 수행하는 데 사용되는 도구입니다. 반면에 ‘반복’은 루프 컨텍스트에서 반복을 의미하는 일반적인 용어입니다. 루프는 중지 조건이 충족될 때까지 계속 반복됩니다.

더 잘 이해하기 위해 북쪽으로 X보를 이동한 다음 왼쪽으로 Y보를 이동하라는 지시를 받는 컴퓨터 게임으로 생각할 수 있습니다.

다음과 같이 북쪽으로 7걸음을 내딛을 수 있습니다.

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

위의 코드 블록이 실행되면 다음을 갖게 됩니다.

일반적으로 루프가 사용되는 이유는 무엇입니까?

반복 작업 수행: 특정 조건이 충족될 때까지 루프를 사용하여 명령을 실행할 수 있습니다.
개체 또는 배열 반복: 루프를 사용하면 개체의 속성 또는 배열 요소를 반복하여 각 속성 또는 요소에 대해 특정 작업을 수행할 수 있습니다.
데이터 필터링: 루프를 사용하여 특정 조건에 따라 데이터를 필터링할 수 있습니다.

JavaScript 루프는 다양한 형태로 제공됩니다. For, While, Do…While, For…of 및 For…in. 자세히 살펴보고 각각의 작동 방식을 보여 드리겠습니다.

for 루프

for 루프는 지정된 조건이 true로 평가될 때까지 반복됩니다. for 루프에는 세 가지 선택적 표현식과 코드 블록이 있습니다.

for (initialization; condition; finalExpression) {

  // code

}

초기화 표현식은 첫 번째 루프가 실행되기 전에 옵니다. 이 표현식은 일반적으로 하나 이상의 카운터를 초기화합니다.
for 루프가 실행되기 전에 매번 조건식을 확인합니다. 루프 또는 명령문의 코드는 표현식이 true로 평가될 때마다 실행됩니다. 반면에 표현식이 false로 평가되면 루프가 중지됩니다. 그러나 표현식이 생략되면 표현식은 자동으로 true로 평가됩니다.
finalExpression은 각 루프 반복 후에 실행됩니다. 이 표현식은 주로 카운터를 증가시키는 데 사용됩니다.

휴대전화를 분실하지 않도록 매시간 전화를 걸도록 합니다.

블록 문인 {}를 사용하여 여러 문을 그룹화하고 실행할 수 있습니다. 조건식이 false로 평가되기 전에 루프를 일찍 종료하려면 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<7>.
반복은 모든 반복(++1) 후에 i 값에 1을 추가합니다.

조건이 false로 평가되기 전에 break 문을 사용하여 루프를 종료합니다.

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + 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…loop의 기본 구조는 다음과 같습니다.

for (variable of object)

  statement

실행 중인 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는 각 반복 동안 각 요소의 값과 콘솔에 인쇄된 값을 차지합니다.

집합을 반복하는 For…of 루프

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

이 코드 블록에서;

Set() 생성자를 사용하여 새 Set에 할당하는 변수 s를 선언합니다.
add() 메서드를 사용하여 두 개의 요소가 코드에 추가됩니다.
for….of는 elements 객체를 반복합니다.
루프는 console.log(n) 문을 실행하기 전에 현재 요소를 n에 할당합니다.

For…of 루프가 맵을 반복합니다.

const m = new Map();

m.set(4, "rabbit");

m.set(6, "monkey");

m.set(8, "elephant");

m.set(10, "lion");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

이 코드 블록에서;

우리는 Map() 생성자를 사용하여 새로운 Map 객체를 생성합니다.
변수 m이 선언됩니다.
.set() 메서드를 사용하여 5개의 키-값 쌍을 추가합니다.
for…of 루프는 Map 개체 m의 요소를 반복합니다.

For…인 루프

for…in 루프는 객체의 속성을 반복하는 데 사용됩니다. for…in 루프의 기본 구조는 다음과 같습니다.

for (property in object) {

  // code

}

for…in 루프를 사용하여 배열 및 배열과 유사한 객체를 반복할 수 있습니다.

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

이 코드 블록에서;

JavaScript 개체를 도입하고 이름을 shoppingList로 지정합니다.
in 연산자를 사용하여 shoppingList의 각 속성을 반복하기 위해 for 루프를 사용합니다.
각 반복에서 루프는 shoppingList에 현재 속성 이름을 할당합니다.

하는 동안

while 루프는 조건을 평가하여 참이면 코드 블록을 실행합니다. 그러나 조건이 거짓이면 루프가 종료되고 코드 블록이 실행되지 않습니다.

이것은 while 루프의 기본 구조입니다.

while (condition)

    Statement

테스트 조건은 루프에서 명령문을 실행하기 전에 발생해야 합니다. {} 또는 블록 문을 사용하여 여러 문을 실행할 수 있습니다.

작동 중인 while 루프의 예

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

이 코드에서;

변수 n은 0 값으로 초기화됩니다(n=0).
루프는 n의 값이 9보다 작은 동안 실행됩니다(n<9).
n의 값은 콘솔에 표시되고 반복할 때마다 1씩 증가합니다(n++).
코드는 8에서 실행을 중지합니다.

Do … While 루프

do…while 루프는 특정 조건이 거짓으로 평가될 때까지 반복됩니다.

do…while 문의 일반적인 구조는 다음과 같습니다.

do

  statement

while (condition);

명령문은 조건을 확인하기 전에 한 번 실행됩니다. 조건이 참이면 명령문이 실행됩니다. 그러나 평가된 조건이 거짓이면 실행이 중지되고 제어는 do..while 이후의 문으로 넘어갑니다. do…while 루프의 코드는 조건이 true로 평가되더라도 적어도 한 번은 실행되도록 보장됩니다.

do…while의 예

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

이 코드에서;

변수 n을 도입하고 초기값을 0으로 설정합니다(n=0).
우리의 변수 n은 매 반복(n+=1) 후에 값이 1씩 증가하는 do…while 루프에 들어갑니다.
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}`);

  }

}

두 가지 변수가 있습니다. 외부 및 내부와 둘 다 값 0으로 초기화됩니다.
두 변수는 반복할 때마다 2씩 증가합니다.
외부 및 내부 루프는 각각 세 번 반복됩니다.

루프 제어문

“점프 문”이라고도 하는 루프 제어 문은 프로그램의 정상적인 흐름을 방해합니다. 중단 및 계속은 루프 제어 문의 예입니다.

Break 문

Break 문은 조건이 충족되지 않은 경우에도 루프를 즉시 종료합니다.

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

렌더링된 코드는 다음과 같이 나타납니다.

계속 진술

Continue 문은 특정 코드 블록을 건너뛰고 새 루프에 대한 반복을 수행하는 데 사용됩니다.

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

렌더링된 코드는 다음과 같이 나타납니다.

결론

위는 바닐라 자바스크립트와 그 프레임워크/라이브러리에서 보게 될 일반적인 루프입니다. 강조 표시된 대로 각 루프 유형에는 사용 사례와 동작이 다릅니다. 잘못된 루프 유형을 선택하면 버그가 생기고 코드에 예기치 않은 동작이 나타날 수 있습니다.

JavaScript 프레임워크 또는 라이브러리를 다루는 경우 항상 문서를 확인하고 내장 루프를 사용하십시오.