개요

이 글은 객체 또는 배열을 순회하며 데이터를 조회할 때, 어떠한 조건에 의하여 continue 를 실행하여 loop 의 실행은 멈추지 않고 해당 조건만 건너뛰는 것을 알아보기 위해 작성한다.

객체 또는 배열을 순회하는 메소드는 일반적인 for loop 외에도 다양하다.
일부 메소드느 continue 를 구현하는 것이 다르기에 그 것에 대한 정보일지이며 동시에 각 메소드의 역할에 대해 간략히 소개한다.

---

1. for 루프

기본적인 for loop 구문이다.

✅ continue 를 써서 해당 조건을 for 루프에서 제외 시킨다.
✅ break 는 동작한다.
❌ return 은 동작하지 않는다.

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

for (let i = 0;  i < array.length; i++) {
  if (array[i] === 'a') {
    continue;
  } else {
    console.log(array[i]);
  };
}

// 결과: b, c

---

2. for in 루프

객체의 열거 가능한 속성들을 순회할 때 사용한다.
여기서 열거 가능하다 라는 뜻은, string, number 와 같이 직접 정의 된 속성을 뜻하고, 반대로 function 또는 다른 메소드 는 열거 불가능하다고 정의한다.

일반적으로 아래와 같이 Object 의 key 값을 반환할 때 많이 사용한다.

✅ continue 를 써서 해당 조건을 for in 루프에서 제외 시킨다.
✅ break 는 동작한다.
❌ return 은 동작하지 않는다.

const obj = {
  a: 'a',
  b: 'b',
  c: 'c',
};

for (let x in obj) {
  if (x === 'a') {
    continue;
  } else {
    console.log(x);
  }
}

// 결과: b, c

---

3. for of 루프

순회 가능한(iterable) 객체의 각 항목에 대해 루프를 실행한다.

순회 가능한(iterable) 객체란, array, string, Set, Map 등 Symbol.iterator 메소드를 가지고 있는 객체를 뜻한다.
Symbol.iterator 는 iterator 를 반환하는 역할을 한다.
iterator 는 next 메소드를 통해 순회하면서 값을 반환하는 객체이다.

✅ continue 를 써서 해당 조건을 for of 루프에서 제외 시킨다.
✅ break 는 동작한다.
❌ return 은 동작하지 않는다.

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

for (let x of array) {
  if (x === 'a') {
    continue;
  } else {
    console.log(x);
  }
}

// 결과: b, c

---

4. forEach 메소드

array 의 index 를 순회하며 index 에 저장된 데이터를 반환한다.
(for of 루프와 기능은 동일하다.)

❌ continue 는 동작하지 않는다.
❌ break 는 동작하지 않는다.
✅ return 은 동작한다.

즉, forEach 메소드에선 continue 를 구현하기 위해서 return 을 사용해야 한다.

Why?

forEach 는 내부적으로 반복을 관리하고 콜백 함수의 실행을 제어하기 때문에 continue, break 와 같이 흐름을 수동으로 제어하는 것을 허용하지 않는다.
반대로 상기에 적은 for in, for of 루프는 개발자가 직접 반복을 제어하기 때문에 continue, break 를 사용할 수 있다.

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

array.forEach(x => {
  if (x === 'a') {
    return;
  } else {
    console.log(x);
  }
});

// 결과: b, c