[JS] for in / for of 그리고 map / reduce

객체를 순환하면서 가져올 때 사용하는 for in과 for of의 차이점이 궁금하여 찾아봤다.

 

for( let item in obj ) / for ( let item of arr )

 

for in은 객체를 순환 : 객체의 key 값 또는 inde가 필요할 때

for of 는 배열을 순환 : 배열의 값을 가져올 때

 

for in

let obj = {
  a: 1,
  b: 2,
  c: 3
};

for ( let item in obj ) {
  console.log(item);
} // a b c

 

for of

let arr = ['a', 'b', 'c'];

for ( let item of arr ) {
  console.log(item);
} // a b c

 

사실 이 외 다른 차이가 있지만, 아직 나의 실력으로는 이해하기가 어려워 차차 공부해 나가야 겠다.

 

---

 

공부하다 발견한 사실

for in & for of 보다 강력한 map, reduce를 실제로는 많이 사용한다고 한다.

 

map

array.map({요소, 인덱스, 배열) => { return 요소 })

맵핑한다 하며, 반목문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 메소드이다. 어떻게 짝 지을 것인가 정의한 함수를 메소드의 인자로 넣어주면 된다.

 

const arr = ['apple', 'banana', 'grape'];

let result = arr.map((v) => {
  console.log(v);
  return v;
}); 
// apple, banana, grape

주의사항! map을 실행하는 배열과 결과로 나오는 배열은 다른 객체!

const arr = ['apple', 'banana', 'grape'];

let result = arr.map((v) => {
  return v + 's';
}); 
result;
// apples, bananas, grapes

규칙적인 배열만 반환할 수 있는게 아니라, 함수 안에 적어준대로 반환할 수 있기 때문에 자유도가 높다.

 

reduce, reduceRight

array.reduce((누적값, 현재값, 인덱스, 요소) => {return 결과}, 초기값);

이전 값이 아닌, 누적값. 

  const numbers = [1, 2, 3];
  
  let result = numbers.reduce((acc, cur, i) => {
    console.log(acc, cur, i);
    return acc + cur;
  }, 0);
  // 0 1 0
  // 1 2 1
  // 3 3 2
  // result = 6

reduceRight는 reduce에서 오른쪽으로 시작한다는 차이가 있다.

 

 

reduce의 장점은 map, filter 같은 함수형 메소드를 reduce로 구현할 수 있다는 점이다.

 

  const numbers = [1, 2, 3];
  
  let result = numbers.map((v) => {
    if ( v % 2) {
      return '홀수';
    }
    return '짝수';
  })

  // result = ["홀수", "짝수", "홀수"]

  const numbers = [1, 2, 3];
  
  let result = numbers.reduce((acc, cur) => {
    acc.push( cur % 2 ? '홀수' : '짝수');
    return acc;
  }, []);
  
  // result = ["홀수", "짝수", "홀수"]

 

map과 reduce를 자유롭게 쓸 수 있도록 연습해야 겠다.