[💻 코드스테이츠 FE 44기] 부트캠프 - 고차 함수

✔️ 시작

고차함수와 관련된 일급객체,콜백함수 그리고 배열 메서드 중 filter, map, reduce 등에 대해 배웠다.

오후엔 페어 활동을 하면서 문제를 풀었다.

📍 일급 객체(first-class citizen)

Javascript 함수를 일급 객체라고 부른다.
객체에 적용가능한 연산을 모두 지원하는 객체를 말한다.

특징

• 변수에 할당할 수 있다.
• 다른 함수의 전달인자로 전달 될 수 있다.
• 다른 함수의 결과로서 리턴 될 수 있다.
• 함수를 데이터(string, number, boolean 등) 처럼 사용할 수 있다.

📍 고차 함수(Higher-oder Function)

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

콜백 함수(callback function)

전달인자로 전달되는 함수

콜백 함수를 전달 받은 고차함수는 함수 내부에서 콜백 함수를 호출할 수 있다.

1. 다른 함수를 인자로 받는 경우

function sum(num){
	return num + 2;
}

function sumNum(func, num){
	return func(num);
}

let output = sumNum(sum, 4);
console.log(output) // 6

• sumNum = 다른 함수를 인자로 받는 고차 함수
• sumNum의 첫번째 인자 func에 함수가 들어올 경우 func(함수)는, sumNum의 콜백함수 이다.

  sum함수 === sumNum의 콜백함수

2. 함수를 리턴하는 경우

function sum(num1){
	return function(num2){
    	return num1 + num2;
    }
}
const num = sum(3);
output = num(2);
console.log(output); // 5

• sum은 다른 함수를 리턴하는 고차 함수
• sum은 인자 하나를 입력 받아 함수(익명함수)를 리턴
• 리턴된 익명함수는 인자 하나를 받아 sum과 더한 값을 리턴 한다.

  num이 리턴하는 함수를 변수에 저장할 수 있다.
  (Javascript에서 함수는 일급 객체)

📍 배열 메서드

map, filter는 새로운 배열을 반환한다.(얕은 복사)

filter(함수)

• 배열의 요소 중 조건을 만족(true)하는 요소를 반환(원하는 값을 필터링해 반환)
• 배열의 각 요소에 콜백 함수를 적용시켰을 때 true를 리턴하는 요소들만 모은 새로운 배열 반환

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

arr.filter(function(el){
	return el % 2 === 0
}) // [2, 4]

arr.filter(function(el){
	return el % 2 === 1
})// [1, 3]

map(함수(el, index))

• 모든 요소에 동일한 행동을 준 값에 대해 모두 반환
• 각 요소에 콜백 함수를 적용시킨 요소를 가진 새로운 배열 반환
• for문과 비슷한 기능을 한다.

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

function sum(num){
	return num + 2;
}

arr.map(sum)// [3,4,5,6]

• 콜백함수에 두 번째 전달인자를 줄 경우 index를 가져온다.

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

arr.map(function(el, idx){
	return `${idx} : ${el}` 
})
// (4) ['0 : 1', '1 : 2', '2 : 3', '3 : 4']

reduce(함수(acc, cur, 초기값))

• 배열을 하나의 값으로 만들어 준다.
• 각 요소를 콜백 함수에 맞게 하나로 응축 시킨 값을 반환

✔️ 초기값을 설정하지 않을 경우

• 배열의 첫 번째 요소가 acc,
• cur은 두번째 요소부터 시작된다.

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

arr.reduce(function(acc, cur){
	return acc + cur
}) //10

• 초기값을 설정하지 않아 acc에 1이 들어간다.
• cur은 2가 들어간다. arr 배열의 값을 모두 합친 10이 반환 된다.
  acc = 1, cur = 2 ➤ 1 + 2 = acc(3)
  acc = 3, cur = 3 ➤ 3 + 3 = acc(6)
  acc = 6, cur = 4 ➤ 6 + 4 = acc(10)최종값

✔️ 초기값을 설정할 경우

• 설정한 값이 acc,
• cur은 첫번째 요소부터 시작된다.

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

• 초기값을 설정해 acc에 5이 들어간다.
• cur은 1가 들어간다. arr 배열의 값을 모두 합친 15이 반환 된다.
  acc = 5, cur = 1 ➤ 5 + 1 = acc(6)
  acc = 6, cur = 2 ➤ 6 + 2 = acc(8)
  acc = 8, cur = 3 ➤ 8 + 3 = acc(11)
  acc = 11, cur = 4 ➤ 11 + 4 = acc(15)최종값

✔️ 조건문을 이용해 원하는 값만 반환할 수도 있다.

✏️ 마치며

아직 Javascript의 길은 멀었다...
여러 종류의 메서드들이 중요하고 그 중 자주 사용하는 메서드는 기억하되
나머지 메서드는 메모해서 필요할 때 마다 확인해도 괜찮을 거 같다.

이번 페어활동은 페어분과의 수준 차이가 많이 나지 않아서
해당 문제를 고민하고 풀어보는 시간이 넉넉히 주어져 좋았다.

아쉽게 전부 풀진 못했지만 생각 보다 많이 풀었다.
이렇게 시너지 효과를 내 어제 보다 오늘 더 성장한 기분이였다.