for문 삼대장 - for ...of , for ...in, forEach

자 오늘은 헷갈리는 for문들을 정리해봅시다.

 

요약

일단 간단하게 먼저 정리하자면 

 

for ... of, for ... in 은 반복문임다.

forEach 는 반복을 해주지만 메서드임.

 

for ... of 는 배열에 사용 (정확히는 array, string, arguments, nodeList, map, set 등의 iterable속성이 있는 애들)

for ... in 은 주로 객체에 사용 (정확히는 enumerable 한 애들)

forEach 메서드는 배열에 사용

	객체	배열	대상
for ... of	error	쌉파서블	컬렉션
for ... in	쌉파서블	파서블	객체의 모든 열거가능한 속성
forEach	error	쌉파서블	컬렉션

---

왜 이렇게 되는지 자세히 알아봅시다.

 

1. for ... of 반복문

 

• for of + 객체

      const object = { a: 1, b: 2, c: 3 };
      for (const collection of object) {
        console.log(collection); // Uncaught TypeError: object is not iterable
      }

삐빅 에러

 

• for of + 배열

      const array = [1, 2, 3];
      for (const collection of array) {
        console.log(collection); // 1, 2, 3
      }

정상입니다 ^^

 

for ... of 반복문은 배열뿐만 아니라 string, arguments, nodeList, map, set 등의 iterable속성이 있는 애들에 대해서 사용가능합니다.

 

 

2. for ... in 반복문

 

• for ... in + 객체

      const object = { a: 1, b: 2, c: 3 };
      for (const collection in object) {
        console.log(collection); // a, b, c
      }

정상입니다 ^^

 

• for ... in + 배열

      const array = [1, 2, 3];
      for (const collection in array) {
        console.log(collection); // '0', '1', '2'
      }

 

 에러 없이 값이 출력 되긴 했는데 조금 이상하네요 ...

우리는 array로 1,2,3 을 넣었는데 왜 0,1,2 가 나오죠 ??

그리고 타입도 왜 string 으로 바꼈죠 ??

 

그 이유는 ....

for ... of 구문은 iterable 전용 이구요, for ... in 구문은 객체의 모든 열거 가능한 속성(enumerable)에 대해 반복하기 때문입니댜....

무슨 말인지 잘 모르겟쬬?

그럼 이거를 한번 봅시다.

 

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); //  0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); //  3, 5, 7
}

 

사실 자바스크립트에서 배열도 객체이기 때문에 for ... in 문에서 배열도 나열이 되긴 하지만 배열의 값이 아니라 사실은 객체 취급으로 객체의 키 값이 나열되는 것입니다.

 

그리고 참고로 for ... in 반복문은 부모의 값도 출력이 됩니다.

      class Parent {}
      Parent.prototype.name = 'kim';

      const obj = new Parent();

      for (const key in obj) {
        console.log(obj[key]);  // kim
      }

obj 의 부모한테 있는 'kim' 이란 값도 출력해 줍니다. 그래서 

 

      class Parent {}
      Parent.prototype.name = 'kim';

      const obj = new Parent();

      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          console.log(obj[key]);
        }
      }

 

자신이 가진 프로퍼티인지 확인해서 맞으면 출력해주는 이런 거를 써주는게 좋습니당.

 

 

3. forEach 메서드

forEach 메서드도 마찬가지로 컬렉션 전용이기 때문에 for ... of 문과 비슷하지만 얘는 반복문이 아니라 메서드에요

그래서 콜백함수를 하나 넣어주고 메서드를 실행해줍니다.

 

• forEach + 객체

      const object = { a: 1, b: 2, c: 3 };
      object.forEach((element) => {
        console.log(element);  //Uncaught TypeError: object.forEach is not a function
      });

삐빅 역시나 에러 

 

• forEach + 배열

      const array = [1, 2, 3];
      array.forEach((element) => {
        console.log(element); // 1, 2, 3
      });

정상입니다 ^^