TIL) 고차함수, 내장고차함수, map, filter, reduce

일급객체

1. 변수에 할당 가능 // (함수 표현식 & 함수 선언식 모두 가능)
2. 다른 함수의 전달인자로 전달 가능 // 콜백함수 = 함수에 인자로 전달되는 함수.
3. 다른 함수의 결과로서 리턴 가능 (함수가 일급객체이기 때문에 클로져도 사용가능한거였다. )

=> 문자열, 숫자 같은 다른 데이터처럼 사용 가능!
==> js에서 함수는 일급객체!!

커링함수 = 함수를 리턴하는 함수.

고차함수
함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다.
함수가 일급객체라서 고차함수로 활용 가능한거다!

• 함수를 전달인자로 받는 함수
• 함수를 리턴하는 함수

콜백함수
비동기에서 콜백함수가 매우 중요하다.

커링함수
커링함수때문에 클로저가 나온거다.
거의 같다고 말할 수 있다.

---

배열 내장 매서드

1. map
2. filter
3. reduce
4. 기타 등등

=========
**떡밥**
메서드란 무엇인가요?
(객체 안의 함수다.)

함수와 메서드는 거의 같은데,
ex) arr.map 이나 arr.filter 를 메서드라고 한다.
이걸 객체지향 프로그래밍이라고 한다.
이때 그 비밀을 알게 될거다.

mdn 에서 array.prototype.map 처럼 prototype이 있을거다.
이건 객체지향에서 배울거다.

prototype는 원형객체라고 한다.

---

map
= 배열의 각 요소에 콜백함수를 적용시켰을때 새로운 배열을 리턴한다.  (slice 처럼 immutable)

let arr = [1,2,3,4,5]
function multiply2(num) {
	return num * 2
}

arr.map(multiply2);

// 출력값
[2,4,6,8,10]

 

* 콜백함수에 두 번째 전달인자를 줄 경우, 인덱스를 가져온다. 

let arr = [1,2,3,4,5]
function multiply2(num) {
	return num * 2
}

arr.map((el,idx) => `${idx} : ${el * 2}`);

// 출력값
['0 : 2', '1 : 4', '2 : 6', '3 : 8', '4 : 10']

 

* map은 리턴이 없으면 undefined가 들어간 배열이 생긴다.

---

filter
배열의 각 요소에 콜백함수를 적용시켰을때, true 를 리턴하는 요소들만 모은 새로운 배열을 리턴

let arr = [1,2,3,4,5]

arr.filter((el) => el % 2 === 0);

//출력값
[2, 4]

 

let arr= [1,2,3,4,5]

arr.filter((el) => el % 2);

// 출력값
[1,3,5]

filter는 조건식이 true인 경우 값만 출력하므로, el % 2를 해서 0이 나오는 값은 출력되지 않는다. 
왜냐면 0은 falsy한 값이기 때문이다.

 

---

reduce
배열의 각 요소를 콜백 함수에 맞게 하나로 응축시킨 값을 리턴 // 누적, 현재, 초기값이 중요하다!

acc: accumulation 응축된 값

cur: current 현재 배열 요소

 

1. 초기값이 없을때

acc는 배열의 첫번째 요소
cur는 배열의 두번째 요소
마지막에는 최종적인 acc값이 리턴된다.

 

let arr = [1,2,3,4,5]
arr.reduce((acc,cur) => {return acc + cur});

// 출력값
15


let arr = [1,2,3,4,5]
arr.reduce((acc,cur) =>  acc + cur);

// 출력값
15

 

   2. 초기값이 있을때

초기값은 초기값이 되는거고,
cur은 배열의 첫번째 요소가 되는거다.

마지막에는 최종적인 acc값이 리턴된다.
초기값 있으면 반복횟수가 없을때보다 한번 더 많다.

let arr = [1,2,3,4,5]
arr.reduce((acc,cur) => {return acc + cur},10);

// 출력값
25


let arr = [1,2,3,4,5]
arr.reduce((acc,cur) =>  acc + cur, 10);

// 출력값
25

 

let arr = [1,2,3,4,5]
arr.reduce((acc,cur) => {
	if(cur % 2 === 0) {
		return acc + cur
	} else {
		return acc
	}
},0)

// 출력값
6

 

 

1. 쭉 갔다가 응축하면 되니까 reduce 쓰면된다.

reduce를 쓸때 의도치않게 오류를 유발하기 쉬워서 되도록이면 프로그램의 취지에 맞추어서 취지값을 주는게 더 좋다!!!


내장함수로 추출한 값을 변수에 할당할 때, 이후에 변하지 않을 값이라고 생각해서 const로 선언하는게 좋다.

const 로 써야.. 나중에 페칭 할때 이게 한번읽고 끝이아니라 검사 > 실행 단계에서 const 로 선언하면 메모리 쪽에서도 더빠르다고 하더라고요 바로바로 저장이되어서 어차피 변하는 값이 아니라

 

---

foreach 공부하기

[1,2,3,4,5].foreach(el => {
console.log(el)
})

foreach 추가공부👇

2022.05.27 - [JavaScript] - TIL) forEach, for of, filter, reduce