[자바스크립트] 고차함수

📌 고차함수란? 

---

 ●  하나 이상의 함수를 매개변수로 이용하거나 함수를 결과로 반환

 ●  매개변수로 전달되는 함수는 콜백함수(Callback function)

 

  ..

📌 대표배열 조작 메서드 (6 가지)

---

 ●   임의 정렬: Array.sort(callback function)
 ●   반복작업: Array.forEach()

 ●   콜백함수 결과 배열반환: Array.map()

 ●   조건 만족하는 하나의 값 반환: Array.find()

 ●   조건 만족하는 배열로 반환: Array.filter()

 ●   누적 결과 값 반환: Array.reduce()         

 

 

📌 1. 고차함수 메서드:  Sort

---

 ●   한계점 1

      - sort 메서드로 정렬될 때 배열의 요소가 일시적으로 문자열로 변경되어 발생

 

예시

let nums = [1, -1, 4, 0, 2,3,10,20,12];


console.log(nums.sort());
//output [-1,1,10,12,2,20,3,4]

 

 ●   한계점 2

      -  대소문자 구분없이 정렬하고 싶지만, 대소문자 구분되어 정렬

 

예시

let fruits = ["apple", "Orange", "orange", "melon"];


console.log(fruits.sort());
//output: ['Orange', 'apple', 'melon', 'orange']

 

  ●   해결방법: 문자와 숫자 모두 받는 내림차순 오름 차순 해결책

//오름차순
let ascending_order = function(x, y) {
    if(typeof x ==="string") x = x.toUpperCase();
    if(typeof y ==="string") y = y.toUpperCase();
     
 	return x > y ? 1 : -1;
 };
 
 
 //내림차순
 let descending_order = function(x, y) {
    if(typeof x ==="string") x = x.toUpperCase();
    if(typeof y ==="string") y = y.toUpperCase();
     
 	return x < y ? 1 : -1;
 };
 
let nums = [1, -1, 4, 0, 2,3,10,20,12];
console.log(nums.sort(ascending_order));
console.log(nums.sort(descending_order));

let fruits = ["apple", "Orange", "orange", "melon"];
console.log(fruits.sort(ascending_order));
console.log(fruits.sort(descending_order));

 

 

📌 2. 고차함수메서드:  forEach()

---

//for - loop
let nums = [1,2,3];
for(let i=0; i < nums.length; i++) {
	console.log(nums[i]);
}

//forEach
nums.forEach(function(i) {
	console.log(i);
});

 

 

 

📌 3. 고차함수 메서드:  map()  →  Array.map(function(item,index,array){})

---

 ● 매개변수: item: 배열요소, index: 배열위치, array: 배열

 

예시

let nums = [1,2,3,4];
let use_for_loop = [];

//for loop
for(let i=0; i < nums.length; i++) {
	use_for_loop.push(nums[i]*2);
}

//map
let use_map = nums.map(function(item) {
	return item * 2;
});
console.log(use_map);

 

📌 4. 고차함수 메서드:  find() : →  Array.find(function(item,index,array){})

---

 ● 매개변수: item: 배열요소, index: 배열위치, array: 배열 

 ● 특징:  콜백 함수의 조건을 만족하는 값을 단 한개의 결과값만 출력

 

예시

let user =  [
	{name:"paul", age: 15, job:false},
    {name:"john", age: 17, job:false},
    {name:"jamy", age: 18, job:true},
];


let find_job = users.find(function (user) {
	return user.job == false;
});

//결과값(하나만 결과값 출력)
console.log(find_job);  //{name:"paul", age: 15, job:false},

 

 

📌 5. 고차함수 메서드:  filter() : →  Array.find(function(item,index,array){})

---

 ● 매개변수: item: 배열요수, index: 배열위치, array: 배열

 ● 특징:  콜백 함수의 조건을 만족하는 값을 배열로 반환

 

예시

let user =  [
	{name:"paul", age: 15, job:false},
    {name:"john", age: 17, job:false},
    {name:"jamy", age: 18, job:true},
];


let find_job = users.filter(function (user) {
	return user.job == false;
});

//결과값(하나만 결과값 출력)
console.log(find_job); 
//[{name:"paul", age: 15, job:false},  {name:"john", age: 17, job:false}]

 

📌 6. 고차함수 메서드:  reduce() : →  Array.reduce(function(accumulator,item,index,array){})

---

 ● 매개변수: accumulator: 이전 함수 결과(initial로 초기값 설정 가능), item: 배열요소, index: 배열위치, array: 배열

 ● 특징:  요소 별 함수 수행 누적 결과값 반환 

 

예시

let nums = [1, 2, 3, 4, 5];
let call_count = 0;

let sum = nums.reduce(function(acc, curr, idx, arr) {
	console.log(acc, "\t\t", cur, "\t\t", idx);
    call_count++;
    return acc + curr;
}, 0); //initial 없다면 index 1부터 시작


console.log("result \t value \t index");
/*
 result   value	  index
	0		1		0
	1		2		1
	3		3		2
	6		4		3
	10		5		4
*/

console.log(call_count); // output: 5
console.log(sum); // output: 15