솔미는 성장중

[JS] 콜백 (callback) 함수 (예시 포함) 본문

JavaScript/함수

[JS] 콜백 (callback) 함수 (예시 포함)

solming 2023. 7. 18. 15:53
728x90
  • 함수가 실행될 때 인수로 들어가는 함수
  • 콜백함수는 하나의 데이터로써 사용됨
  • 콜백은 실행위치를 보장하는 용도로 많이 사용된다!

예시 1 : b는 콜백(함수)

 

const a = callback => {
  callback()
  console.log('A')
}
const b = () => {
  console.log('B')
}
a(b)
//B
//A

예시2 : 실행 지연 함수 & 콜백 함수 사용해보기

const sum = (a,b,c) => {
  setTimeout(()=> {
    c(a+b)
  }, 1000)
}

console.log(sum(1,2, value=>{
  console.log(value)
}))

 

해석 (흐름)

setTimeout() 함수 내에서 return을 쓰더라도 그것은 setTimeout함수의 return값이지 sum의 return 값이 아니다.

따라서 콜백함수를 사용해주어야한다! (빨간 네모)

이렇게 하면 정상적으로 1초 후에 3이 출력되는 것을 확인할 수 있다.

예시3 : 콜백함수를 활용해서 이미지 로드하고 출력하기

 

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="module" defer src="./main.js"></script>
</head>
<body>
  <div class="container">
    <h1>Loading...</h1>
  </div>
</body>
</html>

[main.js]

/*1*/  const loadImage = (url, cb) =>  {
/*2*/    const imgEl = document.createElement('img')
/*3*/    imgEl.src = url
/*4*/    imgEl.addEventListener('load',() => {
/*5*/      setTimeout(() => {
/*6*/        cb(imgEl)
/*7*/      },1000)
/*8*/    })
/*9*/  }
/*10*/ 
/*11*/ const containerEl = document.querySelector('.container')
/*12*/ loadImage('https://i.pinimg.com/564x/08/03/cc/0803ccd42365f97691b6824cc2eee742.jpg', (value) => {
/*13*/   containerEl.innerHTML = ''
/*14*/   containerEl.append(value)
/*15*/ })

 

흐름

 

11번줄에서 document.querySelector를 통해 html구조에 .container라는 클래스를 가진 요소를 찾아 containerEl에 담는다.

 

12번줄에서 loadImage함수를 실행한다.

1번줄에서 12번줄에서제공한 인수를 url과 cb라는 매개변수로 받는다. 

2번줄에서  document.createElement 란 메소드를 통해 JS 메모리 상의 img태그를 만들고 imgEl에 담는다.

3번줄에서 만들어진 img태그에 src속성을 통해 인수로 받은 url 정보를 할당한다.

4번줄에서 해당 img태그에서 addEventListener를 통해 'load' 이벤트를 추가한다.

    * load 이벤트 : src속성에 부여되어있는 url주소를 load하는 이벤트

4번줄에서 load가 끝나면 콜백(함수)이 실행된다.

5~8번줄에서 시간 지연 함수인 setTimeout을 이용해서 1초 후에 콜백함수 cb에 imgEl를 전달해준다.

12번줄에서 imgEl(이미지 주소 load가 끝난 상태의 이미지 요소)을 value란 매개변수에 받는다. => 콜백 내로 들어가서 =>

containerEl 요소가 이걸 활용해 이미지를 띄운다.

 

결과

 

좌측 화면이 떴다가 1초 후에 우측 이미지가 띄워진다.

 

728x90

'JavaScript > 함수' 카테고리의 다른 글

[JS] 호출 스케줄링 ( 타이밍 함수 )  (0) 2023.07.18
[JS] 함수 : 재귀  (0) 2023.07.18
[JS] 즉시 실행 함수 (IIFE)  (0) 2023.07.18
[JS] 함수 선언 : 화살표 함수  (0) 2023.07.18
[JS] 함수 : 구조 분해 할당  (0) 2023.07.18
'JavaScript/함수' Related Articles more