3.14 오배이안
유닛1은 정말 쉬어가는 단계인가!
유닛2 시작부터 배우는 학습의 속도가 다르다!! 시간이 촉박해!
오늘은 고차함수에 대해 배우고 배열의 내장고차함수인 filter(),map(),reduce() 를 학습했다. 이해하기 쉽게 시각적인 자료가 많은 도움이 되었다.
오늘 배운 것이 몰랐던 것
- 일급객체
- 다른 변수에 할당할 수 있고
- 함수의 전달인자로 들어갈 수 있고
- 함수의 리턴값으로 지정될 수 있는 객체
대표적인 일급객체는
함수(function)이다
- 고차함수
일급객체와 비슷한 개념이다.
- 다른 함수를 전달인자로 받을 수 있고
- 다른 함수를 리턴 할 수 있는 함수
1,2 번 중 하나만 충족하거나 둘다 충족하면 이를 고차함수라고 부른다
- 고차함수를 사용하는 이유
추상화때문에 고차함수를 사용함.
추상화란 "복잡한 것을 압축해 핵심만 추출한 상태로 만드는 것"
즉, 복잡한 로직들을 추상화 하여 핵심만 추출해 쉽고 편리한 사고를 위해 사용한다고 생각하면 될거같다.
자바스크립트는 기본적으로 내장되어 있는 고차함수들이 있음
- 배열 메서드 - 내장 고차함수
- 1. Array.prototype.filter(callback(element,index,array), thisArg)
배열의 각 요소에 콜백 함수를 적용시켰을 때, true를 리턴하는 요소들만 모은 새로운 배열을 리턴
콜백함수(callback)
어떠한 조건을 가지고 있는 함수로 해당 배열의 요소들이 조건에 부합하면 true 부합하지 않으면 false를 반환element - 현재 처리할 요소
index - 현재 인덱스 번호
array - filter를 호출한 배열
thisArg - 콜백함수 조건에 부합하는 요소들을 담는 새로운 배열주로 사용하는 방법
3보다 큰 요소만을 담는 새로운 배열 리턴
- 2. Array.prototype.map(callback(element,index,array), thisArg)
배열의 각 요소에 콜백함수를 적용시킨 요소를 가진 새로운 배열을 리턴!
콜백함수(callback) 각 배열의 요소에 적용시킬 식을 가지고 있는 함수
element - 현재 처리할 요소
index - 현재 인덱스 번호
array - filter를 호출한 배열
thisArg - 콜백함수 조건에 부합하는 요소들을 담는 새로운 배열주로사 용하는 방법
모든 요소에 2를 곱한 새로운 배열을 리턴
- 3. Array.prototype.reduce(callback, initialvalue)
배열의 각 요소를 콜백 함수에 맞게 하나로 응축시킨 값을 리턴(새로운 배열이 아닌 값임!)
callback(accumulator, currentValue, currentIndex, array)
- accumulator : 누적되는 값으로 콜백 함수의 반환 값들을 누적함 initialvalue 를 적지 않으면 배열의 첫 요소가 첫번째로 누적 됨
- currentValue : 현재 처리할 요소
- currentIndex : 현재 요소의 인덱스 initialvalue를 제공한 경우 0, 아닐 시에는 1 부터 시작.(0번째 인덱스가 누적 값으로 호출되어)
- array : reduce() 를 호출한 배열
initialvalue
콜백 함수의 최초 호출에서 첫 번째 인수에 제공하는 값.
초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용함
빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생주 사용 예시
배열의 모든 요소의 합을 구할 수 있는 식이 들어가 있고 initialvalue 이 제공되지 않았기 때문에 누적 값의 자리에는 해당 배열의 인덱스[0] 인 요소가 들어간다 (위에선 1이 누적 값)
사진 속 el ==> accumulator (누적값) || ol ==> currentValue (현재 처리할 요소)
filter()와map()은 얕은 복사를 수행 함
