[JS] 고차함수

forEach

forEach는 가장 쉬운 배열 내장함수이다. 기존에 배웠던 for 문을 대체 시킬 수 있다.

 

const fruit = ['apple', 'plum', 'mandarin', 'tomato'];

 

for (let i=0; i < fruit.length; i++) {

  console.log(fruit[i]);

}

 

배열의 forEach 함수를 사용하면 다음과 같이 구현이 가능합니다

fruit.forEach( function(el) {

  console.log(el);

});

 

이걸 화살표 함수로 표현하면

fruit.forEach( el => {

  console.log(el);

});

forEach 함수의 파라미터로는, 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 파라미터 el은 각 원소를 가르키게 된다.
이렇게 함수형태의 파라미터를 전달하는 것을 콜백함수라고 부른다. 함수를 등록해주면, forEach가 실행해준다.

 

forEach는 return 값을 가지지 않는다

여기서

 

el => el*el;

 

이 함수는 콜백함수이다

 

 

map

 

map은 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어진다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8]

 

 

만약 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만들어야 한다면 for문으로 다음과 같이 구현할 수 있다

const newArr = [];



for (let i=0; i< arr.length; i++) {

  newArr.push(arr[i]*arr[i]

}

 

 

또는 방금 배운 forEach를 쓰면 다음과 같이 구현가능하다.

const newArr = [];



arr.forEach(el => {

  newArr.push(el*el);

});

 

결과는 다음과 같다

[1, 4, 9, 16, 25, 36, 49, 64]

 

만약 map을 사용한다면 다음과 같이 구현가능하다

const newArr = [];



arr.map(el => {

  newArr.push(el*el);

});

 

 

이를 더 짧은 코드로 구현 할 수 있다

const newArr = arr.map(el => el*el)

 

map과 forEach는 비슷하지만 아래와 같은 차이점이 있다

 

forEach() 메소드는 아무것도 리턴하지 않습니다(undefined). 단지 제공된 함수로 Array 요소를 호출합니다. 이 콜백은 호출하는 Array를 변경할 수 있습니다.

한편, map() 메소드는 Array안에 요소들을 호출합니다. forEach()와 다른점은 값을 사용하고 Array와 동일한 사이즈의 새로운 Array을 반환합니다.

 

 

 

filter

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드입니다.
값이 없는 배열 요소에 대해 함수를 실행하지 않고, 원래 배열을 변경하지 않습니다.

 

 

fruit 배열에서 done 값이 false 인 항목들만 따로 추출해서 새로운 배열을 만들어 줍니다.

const newFruit = fruit.filter( function(el) {

  return el.done===false;

});

 

화살표 함수로 표현하면 아래와 같다

const newFruit = fruit.filter(el => el.done === false);

 

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주며, 이 함수의 파라미터로 각 원소의 값을 받아오게 된다.

 

이렇게 코드를 입력할 수도 있다.

 

const newFruit = fruit.filter(el => !el.done);

 

filter 에 넣어준 함수에서 true를 반환하면 새로운 배열에 따로 추출을 해주는데, 만약 !el.done 값이 false라면, !false 가 되고 이 값은 true 이기 때문에, 이전의 el.done === false와 똑같이 작동하게 된다.

 

 

 

reduce

reduce 함수는 잘 사용 할 줄 알면 정말 유용한 함수입니다.

주어진 배열에 대하여 총합을 구해야 하는 상황이 있다고 가정해봅시다.

 

const numbers = [1, 2, 3, 4, 5];

 

let sum = 0;

numbers.forEach(n => {

  sum += n;

});

 

위의 예제는 sum을 계산하기 위해서 sum 을 선언하고 forEach 를 통하여 덧셈을 해주었습니다.

 

reduce 라는 함수를 사용하면 다음과 같이 구현 할 수 있습니다.

 

let sum = array.reduce((accumulator, current) => accumulator + current, 0);

 

reduce 함수는 두 개의 파라미터를 전달합니다. 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수고 두 번째 파라미터는 reduce 함수에서 사용 할 초깃값입니다.

 

accumulator 는 누적된 값을 의미합니다

let sum = numbers.reduce ((accumulator, current) => {

  return accumulator + current;

}, 0);

 

 

 

위와 같은 순서로 두번째 파라미터인 초기값 0을 기준으로 numbers 의 배열 요소들을 더해줍니다.

그 결과가 누적되어 결과물 15가 나타나게 됩니다.

 

reduce 를 사용해서 평균도 계산할 수 있습니다. 평균을 계산하려면 가장 마지막 숫자를 더하고 나서 배열의 length로 나누어주어야 합니다.

let sum = numbers.reduce ((accumulator, current, index, array) => {

  if (index === array.length -1 ) {

    return (accumulator + current ) / array.length;

  }

  return accumulator + current;

}, 0);

 

결과는 3이 출력됩니다

 

위 코드의 reduce 에서 사용한 콜백함수에서는 추가 파라미터로 index 와 array 를 받아왔습니다. index는 현재 처리하고 있는 항목이 몇번째인지 가르키고, array 는 현재 처리하고 있는 배열 자신을 의미합니다.

 

 

 

find

find 함수는 findIndex 와 비슷한데, 찾아낸 값이 몇번째인지 알아내는 것이 아닌 찾아낸 값 자체를 반환합니다.

 

 

화살표 함수로 표현하면 아래와 같습니다

const newFruit = fruit.find ( el => el.id === 3);

 

결과 화면은 이렇습니다.

{id : 3, text: "토마토", done: true}