29일차) Callback(콜백함수)

또 마음이 조급해지려고 한다. 페이스유지

✍Callback 함수

💡
함수의 인자로 들어가는 함수
함수 안에서 실행하는 또 다른 함수

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}
 
introduce("홍", "길동", function(name) {
    console.log(name);
});

📌지금까지 콜백함수를 보면서 가장 이해하기 쉬운 예시라고 생각하였다.

introduce 함수를 실행할 때, 첫번째와 두번재 인풋으로 "홍"과 "길동이 들어가고
세번째 인풋으로 새로운 함수가 지정되어있다.

여기서 지정되는 함수가 introduce 함수 안에서 callback(fullName)으로 실행되는 함수가 된다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}
 
function say_hello (name) {
    console.log("안녕하세요 제 이름은 " + name + "입니다");
}
 
function say_bye (name) {
    console.log("지금까지 " + name + "이었습니다. 안녕히계세요");
}
 
introduce("홍", "길동", say_hello);
// 결과 -> 안녕하세요 제 이름은 홍길동입니다
 
introduce("홍", "길동", say_bye);
// 결과 -> 지금까지 홍길동이었습니다. 안녕히계세요

콜백을 쓰는 이유라고 생각하면 될 것 같다.
다른 동작을 수행하는 함수 say_hello, say_bye를 정의하고 introduce함수 안에 인풋으로 사용하면 다른 동작을 수행하기 용이해진다.

✍콜백함수 원칙

1. 익명의 함수 사용

함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

let number = [1, 2, 3, 4, 5];
 
number.forEach(function(x) {
    console.log(x * 2);
});

// 2,4,6,8,10

2. 함수 이름만 넘기기

자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수또는 다른 함수의 변수처럼 사용 가능
함수 형태가 아닌, 함수 이름 그대로 사용하면 된다.

3. 지역변수, 전역변수를 콜백함수의 파라미터로 전달

let fruit = 'apple';	// Global Variable
 
function callbackFunc(callback) {
    let vegetable = 'tomato';	// Local Variable
    callback(vegetable);
}
 
function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}
 
callbackFunc(eat);
 
// fruit: apple / vegetable: tomato

콜백함수 주의할점❗❗

this

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 식별자
함수가 호출되는 방식에 따라 동적으로 결정된다.

const user = {
  name: null,
  setName : function(name){
    this.name = name
  }
}

function setUserName(name,callback){
  callback(name)
}

setUserName('IU',user.setName)

console.log(user.name) // null
console.log(window.name)  // 'IU'

💡 user.name이 null값이 뜨는 이유는
1) 매서드가 함수로 호출되면서 객체와의 연결성이 사라져 this가 달라지고
2) this가 user가 아닌, 전역객체를 바라보기 때문이다.

이를 해결하기 위해 콜백함수를 호출할 시에 this를 바인딩 해줘야한다.
여기에는 call, apply, bind 등을 통해 가능하다.

var kim = { name:"kim", first:10, second:20 }
var lee = { name:"lee", first:100, second:200 } 
function sum(num) {    return num + this.first + this.second;} 
sum.call(kim, 500); //sum을 call하는데 this값을 kim객체로 한다

.call(this, 파라미터1, 파라미터2 ...)
.apply(this, [배열]);
.bind(this)(파라미터1,파라미터2...)

📖
출처
https://me2.kr/vuqfj
https://me2.kr/x5504
https://im-designloper.tistory.com/26