210810 CodeStates 17일차

오늘은 자바스크립트의 배열에 관한 고차함수에 대해 공부했다.
여태까지 문제를 풀면서 여러줄로 작성했던 코드들을 고차함수를 이용하면 굉장히 획기적으로 줄일 수 있을 것같다.
블로그의 내용은 코드스테이츠의 자료들과 PiemaWeb의 내용들을 참고해 정리한 내용들이다.

고차함수

고차함수란 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다.
다시말해, 고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.
이는 자바스크립트의 함수가 일급객체이기 때문에 가능하다.

일급객체는 다음과 같은 특징을 갖는다.

• 변수에 할당할 수 있다.
• 다른 함수의 인자로 전달될 수 있다.
• 다른 함수의 결과로서 리턴될 수 있다.

그전에 배웠던 클로저도 외부함수가 반환하는 반환값이 내부함수이므로 외부함수가 고차함수라고 볼 수 있다.

배열 고차함수

Array.prototype.sort(compareFunction)
sort는 배열의 요소들을 정렬한다.
원본배열을 변경하는 함수이며 정렬된 배열을 반환한다.
인자로 전달되는 compareFunction은 요소를 정렬할 때, 비교의 기준이 되는 함수이다.
compareFunction을 전달하지 않는다면 기본값으로 문자열로 변환하여 정렬한다.(문자열을 사전식정렬)

let arr=[1,2,3,10,100];
arr.sort();
console.log(arr);
// [1,10,100,2,3]  사전식으로 배열하기 때문에
// 1로 시작하는 10과 100이 2,3보다 앞에 위치한다.

arr.sort((a,b)=>a-b); //오름차순 정렬
console.log(arr);
// [1,2,3,10,100]

arr.sort((a,b)=>b-a); //내림차순 정렬
console.log(arr);
// [100,10,3,2,1]

// 객체를 요소로 갖는 배열도 각 객체의 속성을 이용해 정렬할 수 있다.
let arr2=[{name:"A",score:60,age:24},
          {name:"B",score:70,age:20},
          {name:"C",score:30,age:23}];
arr2.sort((a,b)=>a.score-b.score); 
//객체의 score값을 기준으로 오름차순 정렬
console.log(arr2);
/*[{name: "C", score: 30, age: 23},
   {name: "A", score: 60, age: 24},
   {name: "B", score: 70, age: 20}]*/

Array.protoype.forEach(callbackFunction)
forEach는 배열의 요소들을 순회하면 각 요소에 대해 인자로 주어진 callbackFunction을 실행한다.
반환값은 undefined이며 for문 대신 사용할 수 있다.
for문과의 차이점은 break을 사용할 수 없다.
원본배열을 변경하지는 않는다.

let arr=[{name:'A',phoneNumber:'010-1234-5678'},
         {name:'B',phoneNumber:'010-1111-1111'},
         {name:'C',phoneNumber:'010-8765-4321'}];
arr.forEach(function(el){
	console.log(`${el.name}의 전화번호는 ${el.phoneNumber}입니다.`)
});
//A의 전화번호는 010-1234-5678입니다.
//B의 전화번호는 010-1111-1111입니다.
//C의 전화번호는 010-8765-4321입니다.

Array.prototype.map(callbackFunction)
map은 배열의 요소들을 순회하며 각 요소에 대해 주어진 callbackFunction의 반환값들로 새로운 배열을 만들어 반환한다.
이때 원본배열은 변경되지 않는다.

let arr=[1,2,3,4];
let arrSquare=arr.map(el=>el*el);
console.log(arrSquare);
// [1,4,9,16]

Array.prototype.filter(callbackFunction)
filter는 배열의 요소들을 순회하며 각 요소에 대해 주어진 callbackFunction의 반환값이 true인 요소들만으로 새로운 배열을 만들어 반환한다.
if문을 대신할 수 있으며 원본배열은 변경되지 않는다.

let arr=[1,2,3,4,5];
let overTwo=arr.filter(el => el>2);
// 각 요소 el이 2보다 큰지의 여부를 true/false로 반환하는 콜백함수
console.log(overTwo);
// [3,4,5]

Array.prototype.reduce(callbackFunction,firstState)
reduce는 배열의 요소들을 순회하며 이전요소에 대한 callbackFunction의 반환값을 계속해서 전달하고 마지막 요소의 callbackFunction의 반환값을 반환한다.
firstState인자로 초기값을 설정할 수 있다.
원본배열은 변경되지 않는다.

let arr=[2,54,40,16,24];
let arrMax=arr.reduce(function(acc,cur){
	return acc<cur ? cur : acc
},0);
//acc는 이전요소에 대한 콜백함수의 반환값,curr은 현재 요소를 의미한다.
console.log(arrMax);
//arr에서 가장 큰값 54가 출력된다.

let arr2=['a','bb','ccc','dddd','eeeee'];
let longestWord=arr2.reduce(function(acc,cur){
	if(acc.length>cur.length){
    	  	return acc;
    	}
  	return cur;
});
console.log(longestWord);
//가장 긴 문자열인 eeeee가 출력된다.