고차 함수
- 고차 함수란?
- Array.Map(callback (element, index, array), thisArg)
- Array.filter(callback (element, index, array), thisArg)
- Array.reduce( callback( accumulator, currentValue, index, array ), initialValue )
고차 함수란?
함수를 인자로 전달 받거나 결과로 반환하는 함수를 말합니다. 쉽게 말해 함수를 인자로 받아 대신 실행하는 함수를 말하는 것 입니다. 자바스크립트 함수는 일급 객체 이므로 값으로 다룰 수가 있고 값으로 취급되기 때문에 인자로 전달 시킬 수도 있습니다. 인자로 전달 되는 함수를 콜백 함수라 부릅니다.
Array.Map(callback (element, index, array), thisArg)
배열의 길이만큼 한번씩 callback 함수를 불러 새로운 배열에 담아주고 반환해 줍니다. 만약 요소의 값이 할당이나 정의가 되지 않으면 무시하고 넘어가는 것이 아니라 undefined를 반환하고 배열에 담아 줍니다.
- callback : 새로운 배열을 생성하는 함수이며 이 함수 안에는 세 가지의 인수를 넣을 수 있습니다.
- element : 배열을 순회하여 얻은 각각의 요소를 담아주는 인수 입니다.
- index : 배열을 순회하여 얻은 각각의 요소에 인덱스를 담아 줍니다.
- array : 대상이 된 배열을 담아줍니다.
- thisArg : callback을 실행 할 때 this로 사용되는 값 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let arr = ['a','b','c','d']
let newArr = arr.map(function(ele, index, array){
console.log(`ele = ${ele} ||| index = ${index}`)
<-- 'ele = a ||| index = 0'
'ele = b ||| index = 1'
'ele = c ||| index = 2'
'ele = d ||| index = 3'
console.log(`arr = ${array}`)
<-- 'arr = a,b,c,d'
return ele
})
console.log(newArr)
<-- [ 'a', 'b', 'b', 'd' ]
Array.filter(callback (element, index, array), thisArg)
대상이 되는 배열의 길이만큼 한번씩 callback 함수를 불러 조건에 true 값으로 반환되는 대상을 새로운 배열에 담아줍니다.
- callback : 새로운 배열을 생성하는 함수이며 함수내에 조건을 걸어 각 요소를 평가해 true, false로 나눕니다. -element : filter 함수가 배열을 순회하여 얻은 각각의 요소를 담아주는 인수입니다.
- index : 배열을 순회하여 얻은 각각의 요소에 인덱스를 담아 줍니다.
- array : 대상이 된 배열을 담아줍니다.
- thisArg : callback을 실행 할 때 this로 사용되는 값 입니다.
1
2
3
4
5
6
7
let arr = [1,2,3,4,5]
let newArr = arr.filter(function(ele,index,array){
return ele >= 3
})
console.log(newArr) <-- [ 3, 4, 5 ]
Array.reduce( callback( accumulator, currentValue, index, array ), initialValue )
대상이 된 배열의 길이만큼 순회하여 callback 함수를 불러옵니다. callback 함수 내에서 원하는 처리를 하고 반환하면 accumulator라는 인자에 전달되고 다음 callback 함수에서 사용됩니다. 배열의 길이만큼 순회를 마치면 최종 반환값이 반환됩니다.
- callback : 새로운 값을 반환하는 함수이며 함수 내에 accumulator, currentValue를 이용해 원하는 기능을 구성 할 수 있습니다.
- accumulator : callback 함수의 반환값이 담겨집니다. 만약 callback 함수가 처음으로 불러져 반환값을 담고있지 않으면 대상의 배열 첫 요소를 담아줍니다. 또는 initialValue가 지정되어 있으면 해당 값을 accumulator로 지정해줍니다.
- currentValue : 처음엔 배열의 두번째 요소를 담아주며 순회할때 마다 그 다음 요소를 담아줍니다. 만약 initialValue가 지정되어 있으면 배열에 첫번째 요소를 담아줍니다.
- initialValue : 초기값을 지정을 해주며 빈 배열일 경우 초기값을 지정해주지 않으면 에러를 발생시킵니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 초기값이 없는 경우
let arr = [1,2,3,4,5]
let newArr = arr.reduce(function(acc, cur){
return acc + cur
})
console.log(newArr) <-- 15
// 초기값을 10으로 지정했을 경우
let newArr2 = arr.reduce(function(acc, cur){
return acc + cur
},10)
console.log(newArr2) <-- 25