[javascript] 반복문 루프 (while, for, for...of, for...in, loop)

참고: https://www.codecademy.com/resources/docs/javascript/loops

루프는 연속적으로 명령을 반복하게 하는 프로그래밍 툴입니다. iterate라는 용어는 일반적으로 "반복하다"를 의미합니다. 일반적으로 stop condition이라고 하는 지정된 조건이 충족될 때까지 루프는 계속 반복됩니다.

while loop

while 루프는 지정된 조건이 true면 실행되는 루프를 만듭니다. 루프는 조건이 거짓이 될 때까지 계속 실행됩니다. 조건은 루프 전에 지정되며 일반적으로 루프를 중지해야할 타이밍을 결정하기 위해 while 루프 본문에서 변수를 증가시키거나 변경합니다.

while (condition) {
  // Code block to be executed
}

예제 코드:

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

do...while loop

do...while 문은 코드 블록을 먼저 한 번 실행하고 그 다음 조건이 참인지 확인하여 루프를 반복합니다. 이는 루프 본문을 한 번 이상 실행해야 할 때 사용합니다. 조건이 false면 루프가 종료됩니다.

let x = 0;
let i = 0;

do {
  x = x + i;
  console.log(x);
  i++;
} while (i < 5);

for loop

for 루프는 세미콜론(;)으로 구분된 세 개의 중요한 정보를 바탕으로 루프 명령을 실행합니다.

• 초기화: 반복자 변수를 선언(또는 참조)하여 루프를 시작할 위치를 정의합니다.
• 조건: 중지 조건은 루프를 중지할 시기를 결정합니다. (식이 false가 될 때)
• 반복문: 루프가 반복될 때마다 반복자를 업데이트 합니다.

for (let i = 0; i < 4; i += 1) {
  console.log(i);
}

for...of loop

for...of 루프는 객체의 키가 아닌 객체의 값을 반복합니다. 이렇게 하면 인덱스 참조와 달리 항목에 직접 액세스할 수 있습니다. 반복 가능한 객체의 예는 다음과 같습니다.

• 배열의 요소
• 문자열의 각 문자
• key/value 쌍의 Map

const items = ['apple', 'banana', 'cherry'];

for (const item of items) {
  console.log(item);
}

for...in loop

for..in 루프는 문자열 타입의 키가 있는 모든 객체를 반복하며 인덱스 참조를 통해 값에 접근할 수 있습니다. 다음의 예제는 객체의 키에 접근하는 방법입니다:

const shoppingCart = { banana: 2, apple: 5, cherry: 0 };

for (const fruit in shoppingCart) {
  console.log(fruit);
}

객체의 값에 접근하려면:

const shoppingCart = { banana: 2, apple: 5, cherry: 0 };

for (const fruit in shoppingCart) {
  console.log(shoppingCart[fruit]);
}

reverse loop

for 루프로 루프 변수를 시작 값으로 초기화 하고, 변수가 종료 값에 도달하는 시기를 확인하고, 각 반복에서 루프 변수를 감소시켜 "역방향"으로 반복할 수 있습니다.

const items = ['apricot', 'banana', 'cherry'];

for (let i = items.length - 1; i >= 0; i -= 1) {
  console.log(`${i}. ${items[i]}`);
}

배열 루프

배열의 길이는 .length 속성으로 알아낼 수 있습니다. 이는 배열의 .length가 루프에서 중지 조건으로 사용될 수 있으므로 배열을 통해 루프할 때 사용합니다.

const fish = ['salmon', 'clown', 'whiting'];

for (let i = 0; i < fish.length; i++) {
  console.log(fish[i]);
}

객체 루프

Object.entries() 메소드는 객체의 key/value 쌍을 iterator 배열로 반환합니다. 다음 예제에서 Object.entries()는 myEntries라는 변수를 정의하는 데 사용합니다.

const objectK = {
  name: 'Codecademy',
  age: 10,
};

const myEntries = Object.entries(objectK);

console.log(myEntries);

다음으로 for...of 루프를 사용해 myEntries의 키와 값을 찍습니다:

for (const [key, value] of myEntries) {
  console.log(`${key}: ${value}`);
}

break keyword

루프 안에서 break 키워드를 사용하면 현재 루프 구문을 즉시 종료하고 다음번 루프를 실행합니다. 다음 예제에서 break 키워드는 i가 5 보다 크면 루프를 종료합니다:

for (let i = 0; i < 99; i += 1) {
  if (i > 5) {
    break;
  }
  console.log(i);
}

루프 중첩

중첩된 for 루프란, for 루프 내에서 다른 for 루프를 실행하는 것 입니다.

for (let outer = 0; outer < 2; outer += 1) {
  for (let inner = 0; inner < 3; inner += 1) {
    console.log(`${outer}-${inner}`);
  }
}

관련 글

자바스크립트 forEach 사용 방법