[JS] for, for of, for in을 정리해보아요.

안녕하세요. 아아덕후입니다.

for, for of, for in 이름은 비슷하지만 역할이 다른 for 삼둥이들을 정리해보기 위해 글을 작성했습니다.

 

---

목차

1. for
2. for of
3. for in
4. forEach

• 참고 자료

 

---

 

1. for

for(초기값; 조건; 증감) { ... 실행문  }  : 가장 기본적인 for loop 문법

1. 초기값 : for 문이 시작될 때, 단 한번만 실행된다. 주로 카운터 변수를 초기화한다.
2. 조건 : 매 루프마다 조건이 검사된다. 조건이 true 이면 루프가 계속되고, false 이면 루프가 종료된다.
3. 증감 : 매 루프가 끝날 때마다 실행된다. 주로 카운터 변수를 증가 또는 감소시킨다.

 

function forTest() {
  const arr = ["a", "b", "c", "d", "e"];
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}
forTest();

// output
a
b
c
d
e

 

 

---

 

2. for of

for of 는 ES6 에서 추가된 문법이며 반복가능한 객체의 요소를 반복한다.

반복가능한 객체는 Array, Map, Set, String, TypedArray, arguments 등이 있다.

 

function forOfTest() {
  const objArray = [
    { color: "red", size: "large" },
    { color: "blue", size: "medium" },
    { color: "green", size: "large" },
  ];

  for (const element of objArray) {
    console.log(`element : ${JSON.stringify(element)}`);
    if (element.color === "blue") {
      console.log("this element is blue. break!");
      break;
    }
  }
}
forOfTest();

// output
element : {"color":"red","size":"large"}
element : {"color":"blue","size":"medium"}
this element is blue. break!

테스트로는 배열 객체를 사용하였습니다.

또한 for of는 break 로 종료 가능하기 때문에 불필요한 반복을 통해 리소스를 줄일 수 있습니다.

 

 

 

---

 

3. for in

 for in이 객체의 반복을 위해 만들어졌으며, 배열의 반복을 위해서는 추천되지 않는다.

(배열의 반복을 위해서는 for...of를 사용하는 것이 좋다.)

 

그러면 for...in은 어떻게 사용하는 것이 좋을까?

for in 문은  "객체의 속성(프로퍼티)"을 확인 하는데 사용할 수 있다.
다시 말해서, 특정 값을 가진 프로퍼티가 있는지 확인하기 위한 경우에 for...in을 사용할 수 있습니다.
 
  for of 와 for in 의 차이를 명확히 알 수 있는 MDN 문서의 예시는 아래와 같다.

function forInTest() {
  const arr = ["a", "b", "c"];
  arr.foo = "hello, for in";

  for (const ele in arr) {
    console.log(ele);
  }

  for (const ele of arr) {
    console.log(ele);
  }
}
forInTest();

// output
<for in>
0
1
2
foo

<for of>
a
b
c

 

해당 함수를 통해 알 수 있는 것은 for in은 arr 배열 [ 'a', 'b', 'c'] 의 객체 key값인  0, 1, 2 foo를 출력한다.

 

해당 forInTest() 함수내의 arr를 console로 찍어보면, 

arr 배열 객체

javascript에서는 배열도 객체의 subSet이기 때문에

arr 배열 객체는 0,1,2,foo 라는 key 이자 index를 가지며 'a', 'b', 'c' 라는 value를 가진다. 

 

이러한 arr 배열 객체에서 for in은 arr의 key값을 추출하고 반면에 for of는 배열 객체의 value를 순회한다.

 

다시 말해서,
for in 문은객체의 key를 반복한다.

for of 문은 객체의 value을 반복한다.

 

---

 

4. forEach 

forEach는 주어진 함수를 배열 요소 각각에 대해 실행한다.
array를 돌면서, 요소, index 꺼내오기가 가능하며,  "종료 불가능"하다.

function forEachTest() {
  const objArray = [
    { color: "red", size: "large" },
    { color: "blue", size: "medium" },
    { color: "green", size: "large" },
  ];
  objArray.forEach((e, i) => {
    console.log(`element : ${e.color} , index : ${i}`);
    if (e.color === "blue") {
      console.log("멈춰라 ! ");
      return;
    }
  });
}
forEachTest();


// output
element : red , index : 0
element : blue , index : 1
멈춰라 ! 
element : green , index : 2

forEach는 for 문은 아니지만 배열 메서드로서 비슷한 기능을한다.

 

[for of와 for Each 사용에 있어 차이점]

하지만, forEach와 for of의 가장 큰 차이점은 forEach는 break, continue를 사용할 수 없다는 것이다. (return은 가능)
또한 for of는 인덱스를 따로 지정해주어야 사용 가능하지만 for Each는 기본적으로 index를 제공해준다.

 

 

 

---

참고

- MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for

- YouTube : https://www.youtube.com/@dream-coding