자바스크립트 배열 고차함수 forEach / map

📍  Array.prototype.forEach ( immutable  △ )

 

 

함수형 프로그래밍 은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여

복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

 

forEach 메서드는 for문을 대체할 수 있는 고차함수다.

반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서

수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.

 

const number = [1, 2, 3];
const pows = [];

numbers.forEach(item => pows.push(item ** 2));
console.log(pows);  // [1, 4, 9];

 

🔔  forEach 메서드는  최대  2개의 인수를 받을 수 있다.

 

01  콜백 함수

02  'this'로 사용할 객체 ( 일단 class 한정 )

 

 

🔔  forEach 메서드의 콜백함수는 최대 3개의 인수를 받을 수 있다.

 

01  forEach 메서드를 호출한 배열의 요소값

02  forEach 메서드를 호출한 배열의 인덱스

03  forEach 메서드를 호출한 배열 자체 ( this )

 

 

 

🏁  속성

 

[1, 2, 3].forEach((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
  return item;  // 맹목적 return
});

/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

 

◾ JSON.stringify 메서드 ?

 

이 메서드는 객체를 JSON 포맷의 문자열로 변환한다. 위 예제에서는 객체인 arr 배열을 ( 배열 ⊂ 객체 ) 문자열로 출력하기 위해 씀

 

 

const numbers = [1, 2, 3];

// forEach 메서드는 원본 배열을 변경하지는 않지만 !!
// 콜백 함수를 통해 원본 배열을 변경할 수는 있다. 할 수 는 있 다 하 하

numbers.forEach((item, index, arr) => { arr[index] = item ** 2 });
console.log(numbers);  // [1, 4, 9]

 

 

❗ forEach 메서드의 반환값은 언제나 undefined이다 ❗

 

let arr = [];

const result = [1, 2, 3].forEach(item => arr.push(item + 2));
console.log(result);  // undefined

 

class Numbers {
  numberArray = [];
  
  multiply(arr) {
    arr.forEach(function(item){
      this.numberArray.push(item * item);
    }, this);  
    // 이렇게 2번째 인자로 this 전달 안해주면 this.numberArray의 this는 undefined 뜹니다
    // 이유1: 클래스 내부의 모든 코드에는 암묵적으로 strict mode가 적용된다.
    // 이유2: forEach에 화살표 함수가 아닌 일반 함수가 들어와있다.
  }
}

const numbers = new numbers();
numbers.multiply([1, 2, 3]);
console.log(numbers.numberArray);  // [1, 4, 9]

 

class Numbers {
  numberArray = [];
  
  multiply(arr) {
    arr.forEach(item => this.numberArray.push(item * item));
  }
}

const numbers = new numbers();
numbers.multiply([1, 2, 3]);
console.log(numbers.numberArray);  // [1, 4, 9]

 

 

 

 

📍  Array.prototype.map ( immutable )

 

 

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다.

 

const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item));

// 위 코드는 다음과 같다.
// const roots = numbers.map(Math.sqrt);

console.log(roots);  // [1, 2, 3]
console.log(numbers);  // [1, 4, 9]

 

🔔  map 메서드는  최대  2개의 인수를 받을 수 있다.

 

01  콜백 함수

02  'this'로 사용할 객체 ( 일단 class 한정 )

 

 

🔔  map 메서드의 콜백함수는 최대 3개의 인수를 받을 수 있다.

 

01  map 메서드를 호출한 배열의 요소값

02  map 메서드를 호출한 배열의 인덱스

03  map 메서드를 호출한 배열 자체 ( this )

 

 

 

🏁  속성

 

[1, 2, 3].map((item, index, arr) => {
  console.log(`요소값: ${item}, 인덱스: ${index}, this: ${JSON.stringify(arr)}`);
  return item;  // 맹목적 return
});

/*
요소값: 1, 인덱스: 0, this: [1,2,3]
요소값: 2, 인덱스: 1, this: [1,2,3]
요소값: 3, 인덱스: 2, this: [1,2,3]
*/

 

// map 메서드의 두 번째 인수로 map 메서드의 콜백 함수 내부에서 this로 사용할 객체를 전달할 수 있다.

class Prefixer {
  constructor(prefix){
    this.prefix = prefix;
  }
  
  add(arr){
    return arr.map(function(item){
      return this.prefix + item;
      // 외부에서 this를 전달하지 않으면 this는 undefined를 가리킨다.
    }, this);  // map 메서드의 콜백 함수 내부에서 this로 사용할 객체를 전달한다.
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

// ['-webkit-transition', '-webkit-user-select']

 

// 두 번째 인수를 통해 this 전달하는 방법말고 !! 더 나은 방법 -> 화살표 함수 이용하기

class Prefixer {
  constructor(prefix){
    this.prefix = prefix;
  }
  
  add(arr){
    return arr.map(item => this.prefix + item);
    // 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다 ㄷㄷ👍
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

// ['-webkit-transition', '-webkit-user-select']

 

 

 

◾ forEach 메서드 vs map 메서드

 

00  공통점

 

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.

 

00  차이점

 

forEach 메서드는 언제나 undefined를 반환한다.

map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

 

즉, forEach 메서드는 단순히 반복문을 대체하는 고차 함수이고

map 메서드는 요소값을 가른 값으로 매핑한 새로운 배열을 생성하는 고차 함수이다.