유용한 JavaScript 배열 메소드 중 고차 함수

• forEach, map
• find, filter
• reduce
• sort
• some, every

forEach, map

forEach

배열 내의 모든 요소에 주어진 callback 함수를 각각에 대하여 실행합니다.

arr.forEach(callback(currentvalue,index,array))

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

arr.forEach((element,index)=> console.log(element,index));

// "a" 0
// "b" 1
// "c" 2

map

배열 내의 요소에 주어진 callback 함수를 각각에 대하여 실행한 결과를 모아 새로운 배열을 리턴합니다.
forEach와 비슷하지만,
forEach는 undefined를 반환하지만 map은 새로운 배열을 반환한다는 차이가 있습니다.

arr.map(callback(currentvalue,index,array))

const arr = [1,2,3,4];

console.log(arr.map((element) => element*2));

// [2,4,6,8];

find, filter

find

주어진 callback 함수를 만족하는 첫번째 요소의 값을 반환합니다. 만약 인덱스의 값을 확인하고 싶으시다면 findIndex를 사용해도 괜찮습니다.

arr.find(callback(element,index,array))

const arr = [6,3,11,24];

const found = arr.find((element)=> element>10);

console.log(found);
// 11

filter

find와 비슷하지만, filter는 주어진 callback 함수를 만족하는 모든 요소를 모아 새로운 배열을 반환합니다.
callback 함수 내부에서 조건에 따라 true 또는 false의 값을 리턴하도록 구현하길 권장하고 있습니다.

arr.filter(callback(element,index,array))

const arr = [32,64,88,82];

const highScore = arr.filter((element) => element > 80);

console.log(highScore);
// [88, 82]

reduce

배열 내의 각각의 요소에 대해 callback 함수를 실행하고, 실행할 때의 리턴 값은 순회 중 누적되어 결국 최종 결과를 반환합니다.

arr.reduce(callback(accumulator,currentValue,currentIndex),initialValue)
// accumulator 누산기로 리턴 값을 누적합니다.
// currentValue 처리할 현재 Element입니다.
// currentIndex 처리할 현재 Index입니다.
// initialValue 초깃값으로, 제공하지 않으면 배열의 첫번째 요소가 초깃값이 됩니다. 빈 배열에서 초깃값 없이 사용한다면 오류가 발생합니다.

const arr = [5,2,3,4];

const total = arr.reduce((acc,cur)=> acc+cur);
console.log(total);
// 14

const avg = arr.reduce((acc,cur)=> acc+cur)/arr.length;
console.log(avg);
// 3.5

const max = arr.reduce((max,cur) => max<cur ? cur : max)
console.log(max);
// 5

sort

배열의 요소를 기본 정렬 순서에 따라 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드를 따르며 매개변수를 주면 정렬 순서를 원하는 대로 변경할 수 있습니다.

arr.sort(compareFunction);

const arr = [1,12,24,27,4,62];
arr.sort();
console.log(arr);
// [1, 12, 24, 27, 4, 62]
// 기본 순서는 문자열의 유니코드를에 따르기 때문에 낮은 순서로 정렬되지 않는다.

arr.sort((a,b) => a-b)
console.log(arr);
// [1, 4, 12, 24, 27, 62]

compareFunction의 형식

function compareFunction(a,b){
      if(a>b)
       return 1;
      if(a<b)
      return -1;
      // if(a===b)
      return 0;
}
// compareFunction return 값이 0보다 작을 경우 a를 b보다 낮다고 판단합니다.
// return 값이 0일 경우 같다고 판단하고, 0보다 큰 경우 b를 a보다 낮다고 판단합니다.

some, every

some

배열 내의 어떤 요소라도 주어진 callback 함수에 만족하는지 확인하고, 하나라도 만족한다면 true, 그렇지 않다면 false를 반환합니다.
빈 배열에서는 항상 false를 반환합니다.

arr.some(callback(currentValue,index,array));

const arr = [1,2,3,4];

const result = arr.some((element) => element > 3);
console.log(result);
// true

every

배열 내의 모든 요소가 주어진 callback 함수에 만족하는지 확인합니다. 하나라도 만족하지 않는다면 false 값을 반환합니다.

arr.every(callback(currentValue,index,array));

const arr = [1,2,3,4];

const result = arr.every((element) => element > 3);
console.log(result);
// false