Javascript의 루프(For, For in, For of, For each 및 while)

Dec 10 2022

Javascript의 루프에 대한 기본 문서입니다. 개념, 주기 유형, 동작 및 예.

루프

루프는 특히 코드 명령을 반복적으로 실행하거나 데이터 구조를 통과하는 데 도움이 되는 프로그래밍 기능입니다.

대부분의 루프는 변수와 조건에 의해 제어됩니다. 이러한 조건은 루프를 더 잘 제어하고 가능한 무한 루프(고려해야 할 요소)를 방지하는 데 도움이 됩니다.

루프 이해

주기를 더 잘 이해하기 위해 다음 순서도에서 확인할 수 있습니다. 여기에서 식은 정해진 기준에 따라 평가되고 여러 번 반복됩니다.

이 예에서는 숫자가 화면에 인쇄되고 각 반복마다 단위가 추가되어 숫자 100에 도달합니다.

대부분의 루프는 명령을 실행하기 위해 충족되어야 하는 조건을 평가합니다. 이러한 평가는 부울에 의해 트리거되며 조건이 참이면 명령을 실행하고 거짓이면 루프가 닫힙니다.

루프 선언

Javascript에는 루프를 정의하는 여러 가지 방법이 있으며, 수년에 걸쳐 루프 주변에 점점 더 많은 기능이 추가되었습니다.

Javascript에서 루프를 사용하는 다양한 방법은 다음과 같습니다.

을 위한.
안으로.
~을 위해.
각각.
동안

을 위한

"for" 루프는 선언 당시 정의된 3개의 표현식에 따라 코드 블록을 반복하는 루프입니다.

for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

표현식 2 : 코드 블록을 실행하기 위한 조건을 정의합니다. 조건이 충족되면 블록이 실행되고 그렇지 않으면 주기가 중지됩니다.
표현식 3 : 코드 블록이 실행된 후 매번 실행됩니다. 이 표현식은 일반적으로 표현식 1에 정의된 변수를 업데이트하는 데 사용됩니다.

for (let i = 1; i <= 5; i++) {
  console.log("the number is " + i);
}

// -- Result --
// the number is 1
// the number is 2
// the number is 3
// the number is 4
// the number is 5

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// -- Result --
// a: 1
// b: 2
// c: 3

"for of" 루프는 객체, 배열 또는 집합과 같은 iterable 범주에 속하는 데이터 유형을 반복하여 해당 값을 얻는 루프입니다.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// -- Result --
// 10
// 20
// 30

"for each" 루프는 선언적이고 기능적으로 표현되는 단순화된 루프입니다. 콜백을 통해 작동하며 어레이 도구 세트에 속합니다.

const array1 = ['a', 'b', 'c'];

array1.forEach(function(element){
  console.log(element);
});
// -- Result --
// "a"
// "b"
// "c"

"while" 루프는 조건이 참인 동안 반복되는 루프입니다.

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}
// -- Result --
// 1
// 2
// 3
// 4
// 5

"break" 및 "continue" 문은 루프 실행을 중단하거나 계속하기 위해 언어에서 제공하는 도구입니다. 이 문장은 실행 주기에 개입해야 하는 특정 경우에 대한 지원 역할을 수행합니다.

부서지다

"break" 문은 루프를 중단하고 실행을 종료합니다.

let fruits = ["apple", "orange", "lemon"];
let fruitToSearch = "orange";

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  if (fruit === fruitToSearch) {
    console.log(`has been found the ${fruit}`);
    break;
  }
  console.log(`The fruit ${fruit} don't match with ${fruitToSearch}`)
}
// -- Result --
// The fruit apple don't match with orange
// has been found the orange

"계속" 문은 루프 내의 후속 코드를 무시하고 다음 반복으로 이동합니다.

let fruits = ["apple", "orange", "lemon"];

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  console.log(`The fruit is ${fruit}`);
  continue;
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
}
// -- Result --
// The fruit is apple
// The fruit is orange
// The fruit is lemon

해결해야 할 원인에 따라 다른 유형의 주기를 사용하는 몇 가지 권장 사항이 있습니다. 그러나 일반적인 권장 사항은 다음과 같습니다.

Javascript의 루프(For, For in, For of, For each 및 while)

루프

루프 이해

루프 선언

을 위한

부서지다

javascript의 루프 리소스