05-3 자바스크립트 함수 고오급 콜백함수

콜백 함수

매개변수로 전달하는 함수

const 테스트 = function(a) {
  a()
}

const 하찌 = function () {
  console.log("안녕하세요")
}

테스트(하찌)

//테스트 함수는 하찌 함수를 매개변수로 받아 출력

실행결과
안녕하세요

→ 테스트()에 숫자나 문자열을 넣으면 오류남 (a가 함수가 아닌데 왜 호출하려하냐?)

---

const 테스트 = function (배열, 콜백함수) {
  for (const 값 of 배열) {
    콜백함수(값)
  }
}

const 함수 = function (콜백함수의_매개변수) {
  console.log(`${콜백함수의_매개변수}번째 안녕`)
}
// 콜백함수의_매개변수 = 값

테스트([1, 5, 9, 18], 함수)

/* 이것도 가능 
테스트([1, 5, 9, 18], function (콜백함수의_매개변수) {
  console.log(`${콜백함수의_매개변수}번째 안녕`)
}) */

실행결과
1번째 안녕
5번째 안녕
9번째 안녕
18번째 안녕

콜백함수를 활용하는 함수

굉장히 엄청나게 많이 쓰이기 때문에 꼭 알아두기

forEach() 함수

콜백함수를 활용하는 가장 기본적인 함수
배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해 콜백 함수를 호출해 줌

const 배열 = [522, 610, 103, 54, 47]

배열.forEach(function (value, index, array) {
console.log(`${index}번째의 값은 ${value}입니다.`)
})

// array 현재 반복을 돌고있는 배열을 의미. 자주 사용하지 않음

실행결과
0번째의 값은 522입니다.
1번째의 값은 610입니다.
2번째의 값은 103입니다.
3번째의 값은 54입니다.
4번째의 값은 47입니다.

map() 함수

콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

let 배열 = [522, 610, 103, 54, 47]
배열 = 배열.map(function(value, index) {
  return value + "!!"
})
console.log(배열)

실행결과
(5) ['522!!', '610!!', '103!!', '54!!', '47!!']

filter() 함수

콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

// 홀수 찾기
let 배열 = [522, 610, 103, 54, 47]
배열 = 배열.filter(function(value, index) {
  return value % 2 === 1
})
console.log(배열)

실행결과
(2) [103, 47]

화살표 함수

콜백 함수를 간단하고 쉽게 입력하기 위한 방법
내부에 있는 코드에 리턴을하는 키워드가 하나라면 중괄호와 리턴까지 생략 가능

let 배열1 = [522, 610, 103, 54, 47]
let 배열2 = [522, 610, 103, 54, 47]

//map 함수 줄여보기
배열1 = 배열1.map((value, index) => value + "!!")

// filter 함수 줄여보기
배열2 = 배열2.filter((value, index) => value % 2 === 1)

console.log(배열1)
console.log(배열2)

실행결과
(5) ['522!!', '610!!', '103!!', '54!!', '47!!']

(2) [103, 47]

메소드 체이닝

어떤 메소드가 리턴하는 값을 기반으로해서 함수를 줄줄이 사용하는 것

// 배열 선언
let numbers = [0, 1, 2, 3, 4, 5]

// 배열의 메소드를 연속적으로 사용 (메소드 체이닝)
numbers
  .filter((value) => value % 2 === 0) 		// 짝수
  .map((value) => value * value) 	  	// 제곱
  .forEach((value) => {console.log(value)})	// 호출

실행결과
0
4
16