[Javascript] for, for-of, for-in, forEach 차이점 알아보기

 

코딩테스트 문제를 풀다가 기본적인 건 알고 있지만 자세한 동작방식이나, 성능상에서 서로 다른 점에 대해 깊게 알고있는 것 같지 않아서 정리해보려고합니다 🤩🤩🤩

 

 

1. for문

for (let i = 0; i < array.length; i++) {
    // 배열의 각 요소에 접근
}

 

인덱스를 명시적으로 제어할 수 있어서 시작, 종료, 증감값을 컨트롤 해야할 때 사용하면 좋습니다.

continue와 break 같은 제어문을 사용할 수 있습니다. (forEach는 사용불가!)

forEach에 비해 조금 더 성능상에 이점이 있고
(조금더 빠름,  `for (let i = 0; i < array.length; i++)`  이 부분에서 배열의 길이를 캐시해놓기때문에 반복마다 배열의 길이를 계산하지 않기 때문이라고 합니다! )

보다 유연하기 때문에 복잡한 로직의 경우 적합합니다(상태복원, 재귀호출)

 

2. for...of 문

for (let el of array) {
    // 배열의 각 요소에 접근
}

배열의 각 !! 요소 !! 에 접근할 수 있습니다.

인덱스가 필요없고 전체를 순회해야하는 경우 문법이 간결해지기때문에 사용하면 좋습니다!

 

3. for...in 문

for (let i in array) {
    // 배열의 인덱스에 접근
}

----------------------------------------------

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

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

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

배열의 각 !! 인덱스 !! 에 접근할 수 있습니다. (즉 key-value에서 key부분)

배열에서 사용할 경우 인덱스에 접근하기때문에, 

보통 예상하는 결과와 달라 일반적으로 배열에는 권장되지않고 객체에서 사용한다고 합니다!

 

4. forEach 메서드

array.forEach((el, idx, array) => {
    // 배열의 각 요소에 접근
});

첫 번째 인자로 요소 값, 두 번째 인자로 인덱스, 세 번째 인자로 배열 자체를 받습니다.
continue와 break 같은 제어문을 사용할 수 없지만 콜백함수 내부에서 this를 지정할 수 있습니다. 
인덱스와 요소값 모두가 필요한데, 전체를 순회해야하는 경우 좋을 수 있습니다! + 내부 로직이 비교적 간단할 경우

// thisArg 사용하기

function Counter() {
  this.sum = 0;
  this.count = 0;
}

Counter.prototype.add = function(array) {
  array.forEach(function(entry){
    this.sum += entry
    ++this.count
  }, this); //this 를 작성해 주어야 됩니다.
}

const obj = new Counter();
obj.add([24,87,1]);

console.log('count : ' + obj.count);    // count : 3
console.log('sum : ' + obj.sum);        // sum : 112

//[출처] 자바스크립트 배열(JavaScript forEach, map)|작성자 TSBrain

 

 

 저는 forEach와 for...of문의 차이가 궁금했는데요, 

정리하자면 
 내부로직이 복잡해지는 경우(상태에 따라서 값을 조작하거나, 중간을 건너뛰어야하는경우)는 
 조금더 빠르고, continue, break 등을 활용할 수 있으면서, 인덱스값을 명확하게 받아서 제어할 수 있는 
**`for 루프`**(for...of x) 를 사용하는게 좋을 것 같네요!