[JS] 반복문(2)

for of 반복문

배열에 대한 반복

let fruits = ['apple', 'banana', 'orange']
for (let i = 0;, i < fruits.length; i++){
  console.log(fruits[i]);
}
// apple
// banana
// orange

배열의 각 원소에 대해 반복하려면 보통 이렇게 구현했다. 이것을 for of 루프를 사용해 동일한 결과를 얻을 수 있다.

let fruits = ['apple', 'banana', 'orange']
for (let fruit of fruits){
  console.log(fruit);
}
// apple
// banana
// orange

객체에 대한 반복

객체의 키/값 쌍에 대한 반복은 Object.keys()를 사용해 객체의 모든 키를 가져온 후, 키에 대한 반복을 수행하면서 값에 접근하는 것이 가능하다.

const car = {
	maker: "BMW",
  color: "red",
  year: "2020",
};

for (let prop of Object.keys(car)) {
  const value = car[prop];
  console.log(prop, value);
}
// maker BMW
// color red
// year 2020

추가로 Object.entries()를 사용해 객체의 모든 키/값 쌍을 가져온 후 각 키/값 쌍에 대해 반복을 수행하는 방법도 있다.

for in 반복문

For in 반복문은 순서 없이 객체의 모든 열거 가능한 속성을 반복하기 때문에 for of와는 다르다.

const car = {
	maker: "BMW",
  color: "red",
  year: "2020",
};

for (let prop in car) {
  console.log(prop, car[prop]);
}
// maker BMW
// color red
// year 2020

아직은 for of는 배열 요소를 반환할 때에, for in은 객체의 키/값을 반환할 때에 사용한다고 이해해도 무방하다.

break & continue

앞서 이전 반복문 포스팅에서도 언급했듯이 break문은 반복문은 탈출한다.

// 문자열에서 특정 문자의 인덱스를 검색하는 예
var string = 'Hello World.';
var search = 'l';
var index;

for (var i = 0; i < string.length; i++) {
  if (string[i] === search) {
    index = i;
    break; // 반복문을 탈출한다.
  }
}
console.log(index); // 2

이렇게 break문을 사용하면 더이상 반복문을 진행하지 않아도 될 때, 불필요한 반복을 회피할 수 있어서 유용하다.

추후 서술할 레이블 문에서도 break문은 유효하다. (참고로 레이블 문이란 식별자가 붙은 문을 말한다.)

foo: {
  console.log('face');
  break foo;
  console.log('this will not be executed');
}
console.log('swap');

// 로그는 이렇게 출력된다:

// "face"
// "swap 

지금은 이런게 있다는 것만 알아두자.

continue문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break문처럼 반복문을 탈출하진 않는다.

var string = 'Hello World.';
var search = 'l';
var index;

// 문자열은 유사배열이므로 for 문으로 순회할 수 있다.
for (var i = 0; i < string.length; i++) {
  // 문자열의 개별 문자가 'l'이면
  if (string[i] === search) {
    index = i;
    break; // 반복문을 탈출한다.
  }
}

console.log(index); // 2

// 참고로 String.prototype.indexOf 메서드를 사용해도 같은 동작을 한다.
console.log(string.indexOf(search)); // 2

위 예제 for문은 아래 코드와 동일하게 동작한다

for (var i = 0; i < string.length; i++) {
  // 'l'이면 카운트를 증가시킨다.
  if (string[i] === search) count++;
}

이렇게 ifANㄴ 내에서 실행해야 할 코드가 한 줄이면 continue문을 사용했을 때보다 간편하고 가독성이 좋다. 하지만 if문 내에서 실행해야 할 코드가 길다면 들여쓰기가 한 단계 더 깊어지므로 continue문을 사용하는 편이 가독성이 더 좋다.

// continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다.
for (var i = 0; i < string.length; i++) {
  // 'l'이면 카운트를 증가시킨다.
  if (string[i] === search) {
    count++;
    // code
    // code
    // code
  }
}

// continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다.
for (var i = 0; i < string.length; i++) {
  // 'l'이 아니면 카운트를 증가시키지 않는다.
  if (string[i] !== search) continue;

  count++;
  // code
  // code
  // code
}

참고할 사이트 or 링크

mdn 루프와 반복 문서