[JS] for ...of, for ...in

for 반복문

const onea = "onea";

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

// 결과

// "o"
// "n"
// "e"
// "a"

foreach 반복문

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item, item2, item3

for ... of

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

const 오브의반복 = "forof";

for (let i of 오브의반복) {
  console.log(i);
}

// 결과

// "f"
// "o"
// "r"
// "o"
// "f"

const 오브는배열 = ["오브", "는", "배열"];

for (let i of 오브는배열) {
  console.log(i);
}

// 결과

// "오브"
// "는"
// "배열"

for ... in

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다. for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있습니다. 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.

const 인의반복 = "forin";

for (let i in 인의반복) {
  console.log(i);
}

// 결과

// "0"
// "1"
// "2"
// "3"
// "4"

const 인은객체 = {
  원: "인",
  투: "은",
  쓰리: "객체",
};

for (let i in 인은객체) {
  console.log(i);
}

// 결과

// "원"
// "투"
// "쓰리"

const 인은객체 = {
  원: "인",
  투: "은",
  쓰리: "객체",
};

for (let i in 인은객체) {
  console.log(인은객체[i]);
}

// 결과

// "인"
// "은"
// "객체"

for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

// MDN <for...of와 for...in의 차이>의 내용을 참고하여 작성했다.

Object.prototype.obj = function () {};
Array.prototype.arr = function () {};

const 배열모음 = ["배열", "모음", "변수입니당"];
배열모음.foo = "안녕";

for (let i in 배열모음) {
  console.log(i); // 결과: 0, 1, 2, "foo", "arr", "obj"
}

for (let i of 배열모음) {
  console.log(i); // 결과: "배열", "모음", "변수입니당"
}

for...of의 경우 배열에 들어 있는 요소만 뽑을 수 있지만 for...in의 경우 원치 않은 것들을 모조리 뽑을 수 있다.