[Javascript] 콜백함수(Callback function) #1

1. 콜백함수란? Callback function

코딩애플 영상 참고

• 정의 : 함수에 파라미터로 들어가는 함수
• 용도 : 순차적으로 실행하기 위해 사용 (주로 이벤트리스너)

<script>
	document.querySelector('.button').addEventListener('click', function(){
  	// 여기에 버튼을 클릭했을때, 실행될 동작을 입력
    }); //이벤트 리스너도 함수, function도 함수!

	setTimeout(function(){
    // 시간 경과에 따라 실행될 동작을 입력
    }, 1000)
</script>

*함수의 파라미터값에 첨부된 function() 이 콜백함수가 된다.

1) 다른 함수의 argument, parameter 로 활용되는 함수
2) 특정 이벤트(혹은 약속된 '시간' 등의 조건)에 의해 호출되어지는 함수

2. 콜백함수의 활용

배열메소드와 콜백함수

• 배열 메소드 중에서 콜백함수를 활용하는 메소드는 다음과 같은 형태로 콜백함수를 사용한다.

funciton (value, index, array) {}

ForEach()

const numbers = [273, 52, 103, 32, 57]

numbers.forEach(function (value, index, array) {
  console.log(`${index}번째 요소 : ${value}`)
})

• forEach() 메소드는 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.
• 예시는 forEach에서 콜백을 받는 구조만 첨부하였으나, map의 매개변수로 forEach를 넣는 구문도 가능하다.

let map = new Map();
map.set('name', 'Tom');
map.set('age', '24');

map.forEach ((value, key) => console.log("key: " + key + ", value: " + value));

map()

let numbers = [273, 52, 103, 32, 57]

numbers = numbers.map(funciton (value, index, array) {
   return value*value
 })

numbers.forEach(console.log)
// 매개변수로 콘솔로그 메소드 자체를 넘기는것도 가능!

• 위 forEach에서 설명했다시피, map도 콜백함수를 받는 대표적인 배열함수다.
• map은 콜백 함수에서 리턴한 값을 기반으로 새로운 배열을 만들어낸다.

filter()

const numbers = [0, 1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function (value) {
  return value % 2 === 0
})

console.log(`원래 배열: ${numbers}`)
console.log(`새로운 짝수 배열: ${evenNumbers}`)

• map과 비슷한 배열함수로 filter가 많이 언급되는데, filter는 콜백함수에서 리턴하는 값이 "True"인 것들만 모아서 새로운 배열을 만들어낸다.
• map은 for문, filter는 if문을 대체하는 방식으로 많이 사용되므로 check✅

⚠️배열 메소드

• 배열 메소드는 배열의 값을 순회하여 리턴값을 도출하기 때문에,
  위 3가지 외에도 find(), reduce(), some(), every() 등의 함수에서 콜백함수를 이용한다.

드림코딩을 보며 개인적으로 정리했던 게시글이 있습니다💬

이벤트리스너 eventListener , 이벤트 핸들러 evnetHandler

• Javascript는 이벤트(event)를 기반으로 동작하므로, 사용자의 액션에 따라 데이터를 주고 받거나, 다음 동작을 실행시키기 위해서 특정 이벤트가 발생할 때 이런 동작을 실행하겠다는 약속을 미리 등록해두어야 한다. 즉 이벤트 리스너(event listener)에 콜백(callback)을 등록해야 한다.
• 이벤트 리스너에 등록된 콜백함수를 이벤트 핸들러(event handler)라고 부른다.

<button onClick={handleEvent}>Event</button>

타이머 함수 setTimeout() && setInterval()

setTimeout(() => {
  console.log('1초 뒤 실행됩니다.')
}, 1 * 1000)

let count = 0
setInterval(() => {
  console.log(`1초마다 실행됩니다. ${count}번째)`)
  count++
}, 1 * 1000)

• 타이머 함수는 특정 시간 이후 실행되는setTimeout(함수, 시간) 과
  특정 시간 마다 실행되는 setInterval(함수, 시간) 이 있다.
• 타이머 함수 또한 파라미터값으로 함수를 받아 실행하므로, 콜백함수를 받는 대표적인 함수로 기억해둘 것 😤

➕➕ 콜백함수에 대해 찾다보니, 비동기 / 동기 처리에 대한 개념을 빼놓을 수가 없는데,
비동기처리와 동기처리에 대한 개념은 다시 한번 정리해보도록 하자.

참조문서