유용한 JS 고차함수

유용한 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 함수를 만족하는 모든 요소를 모아 새로운 배열을 반환합니다.
이때 filter의 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 0보다 작을 경우 a를 b보다 낮다고 판단합니다.
// 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