[89일차]Javascript bind, call, apply 10분만에 이해하기

javascript bind call apply 10분만에 이해하기

필자는 call 과 apply 그리고 bind를 이해하는데 꽤나 애먹었다.
왜냐면 세개를 각기 달리 하고 따로따로 이해하려고 했기때문이다.
하지만 셋의 개념을 동시에 비교하며 사용해본다면 무척이나 쉬울것이다.
이 지구에서 셋을 가장 쉽게 설명했다고 자신할 수 있다.

---

bind는 함수를 리턴하고 call과 apply는 함수를 실행한다.

세 친구의 첫번째 인자인 this는 일단 무시하고
얘네가 뭘하는 친구인지 정도는 알자
bind는 함수를 실행못하게 묶는다. 그저 함수를 퉤뱉는다
call과 apply는 함수를 실행한다

왜 반복해서 말하냐면,
사실 이게 절반이기 때문이다. 나머지 절반은 안에들어가는 this에대해 이해하면 끝

사용해보자!

function Hello (name){
  console.log('Hello from');
  console.log(this);
  if(name){
  console.log(`My name is ${name}`)
  }
}

당장 구글 개발자창을 열어라,
그리고 위 함수를 만들고 실행시키자.

그냥 실행시켰을 때

bind로 묶었을때

함수를 퉤 뱉는다

call과 apply로 실행시켰을 때

그냥 함수를 실행시킨것과 다름없다.

---

셋 다 함수안의 this값을 3형제의 첫번 째 인자가 정한다.

전혀 어려운 소리가 아니다.
bind call apply 3형제를 쓸땐,
함수안의 this를 그저 함수안의 매개변수로 생각해라

사용해보자!

예제는 똑같지롱

function Hello (name){
  console.log('Hello from');
  console.log(this);
  if(name){
  console.log(`My name is ${name}`)
  }
}

예제는 똑같다 사용해보아라!

bind의 첫번째 인자로 this를 정해줬을 때

사실얘는 함수만 퉤 뱉기 때문에 별다른 차이를 모른다.

그런데 bind도 실행시킴으로써 속박을 풀수있다 뒤에()를입력하자.

포인트는 함수 안 this에 bind의 인자가 들어간것!

mdn에 첫번 째 인자로 this가 들어간다고 해서 객체만 들어갈 줄 알았는데

아니다!

보다시피 문자열 , number 다 된다!

그래서 이 셋(콜,어플라이,바인드)을 만난다면 this를 그저 매개변수로 생각해라!

call과 apply의 첫번 째 인자로 this를 정해주고 각각 실행

Hello.bind('우리집')() 과 똑같다

---

3형제의의 두번째 인자부터 함수의 인자가 들어간다.

여기서 주의점이 있다.
apply만 인자를 배열에 집합시켜서 넣는다!

사용해보자!

예제는 똑같지롱

function Hello (name){
  console.log('Hello from');
  console.log(this);
  if(name){
  console.log(`My name is ${name}`)
  }
}

예제는 똑같다 사용해보아라!

call과 bind의 두번째 인자부터 함수의 인자가 들어감!

주의! bind를 실행시켜 속박을 푼것이다!

인자를 넣어주지만 속박을 안풀면 뱉는건 인자를 미리 넣은함수

call은 그런거 걱정말고 쓰자.

여기서 깜짝 퀴즈!

적용할 함수의 두번째 인자는 call과 bind의 몇번째 인자일까용~?

정답은 각각의 세번째 인자다!

function add (a, b){
  return this + (a + b);
}
 
//각각 따로 엔터해보자
//엔터 1
add.bind('정답은', 1, 5)()
//엔터 2
add.call('정답은', 1, 5)
//엔터 3
add.bind(5, 3, 2)()
//엔터 4
add.call(5, 3, 2)

각각 시도해보자

apply는 두번째 인자부터 인자를 집합시킨 배열을 함수에 적용한다.

인자가 단 하나라도 말이다!
무조건 배열에 집합시킨 인자를 받는다!

배열에 집합안시키니까 싫어하는것좀 봐라.
인자가 한개라도 배열에 집합시켜서 던져주자

예제 2

function add (a, b){
  return this + (a + b);
}
 
//실행 1
add.apply('정답은', 1, 5);
//실행 2
add.apply('정답은', [1, 5]);

---

총정리

function Hello (name){
  console.log('Hello from');
  console.log(this);
  if(name){
  console.log(`My name is ${name}`)
  }
}
 
function add (a, b){
  return this + (a + b);
}

위 예제코드를 참고하자

Hello.bind()() === Hello.call() === Hello.apply()

Hello.bind('디스')() === Hello.call('디스') === Hello.apply('디스')

add.bind('디스', 1, 5)() === add.call('디스', 1, 5) === add.apply('디스', [1, 5])

---

마무리

누군가는 왜 더 효율적인 예제를 안내놓고,
실용적인 예제를 안내놓냐고 할 수 있다.
일단은 써먹기전에 기능을 조금이라도 쉽게 알아야 다른 레퍼런스 문서를 보더라도
좀 더 빨리 이해가 가기 때문이다.
이 글을 보고 레퍼런스를 찾아보려는 이들에게 도움이 됐길 바란다.