2024.01.03 TIL #명시적 This binding #apply #bind

[예제 1]

for문을 사용하지 않고 numbers라는 배열의 요소 중 최댓값과 최솟값을 찾아라.

var numbers = [10, 20, 3, 16, 45];

var max = Math.max.apply(null, numbers);

var min = Math.min.apply(null, numbers);

. apply ( { this로 명시하고자 하는 것 }, [ 배열 ] )

1) apply를 사용해서 for문을 사용하지 않고 바로 함수가 실행될 수 있도록

2) 지금은 this를 굳이 바인딩할 필요가 없으니까 null 값 넣어주기

console.log(max,min); // 45 3

 

근데 그냥 이렇게 하면 되는 거 아닌가?

var max1 = Math.max(numbers);

console.log(max1);     // NaN

 

안 되지.. 왜냐면!

1) 일단 Math.max( )는 괄호 안에 배열 말고 숫자가 바로 들어감

2) 근데 numbers는 배열

3) 그래서 numbers라는 배열 자체를 바로 넣으려고 apply를 사용한 것!

. apply ( { this로 명시하고자 하는 것 }, [ 배열 ] )

 

근데 그래도 만약 난 apply를 쓰기 죽어도 싫다!! 한다면...

spread operator (...) 

=> numbers라는 배열을 풀어주기!

var max2 = Math.max(...numbers)

var min2 = Math.min(...numbers);

console.log(max2, min2);        // 45 3

 

 

---

[예제 2]

이 코드의 결과는?

var func = function(a, b, c, d) {

    console.log(this, a, b, c, d);

}; 

func(1, 2, 3, 4);                           // global, a b c d

 

어우 근데 node 상에서 global 값이 너무 길잖아. 그냥 미리 this를 고정해버려야겠다!

미리 this 고정할 거니까 명시적 바인딩 중 call, apply 말고 bind 써야지~

. bind ({ this로 명시하고자 하는 것 }, 부분 적용하고 싶은 요소)

- 명시적 this binding 도구

- call, apply와 다르게 "바로 실행" 기능은 없음

- 목적

  (1) 함수에 this를 "미리" 적용가능

       ( call, apply는 함수가 호출될 때, 실행컨텍스트가 생성될 때 this 결정됨)

  (2) 부분적용함수

- this를 binding 하고 "새로운 함수를 return" 하기 때문에 

  => 새로운 함수를 받을 변수가 필요

 

(1) 함수에 this를 미리 고정하기

var func = function(a, b, c, d) {

    console.log(this, a, b, c, d);

}; 

var bindFunc1 = func.bind({x:1});        //  { x: 1 }  이라는 this 미리 고정

bindFunc1(5, 6, 7, 8);                             // { x: 1 } 5 6 7 8

 

(2) 부분적용 함수로 만들기

var bindFunc2 = func.bind({x:1}, 4, 5);

bindFunc2(6,7);          // { x: 1 } 4 5 6 7

bindFunc2(10, 11);       // { x: 1 } 4 5 10 11

 

얘도 똑같이 this는 { x : 1 }로 할 건데, 결과 값 중 일부분을 미리 4,5로 선정하고 싶은거지!

그럼 출력할 때 원래 4개 요소로 출력해야 되는데 2개는 정해졌으니까 2개만 호출하면 되겠지?

 

---

bind의 추가 기능

- name 프로퍼티

- bind 의 과거형 : bound

console.log(func.name);               // func

console.log(bindFunc1.name);     // bound func // bindFunc1이라는 함수의 이름은 func에서 bind 되었다~

console.log(bindFunc2.name);    // bound func

 

---

오늘의 느낀 점

후우.. Javascript 넘 어렵다..ㅠㅠ 특히 this... 나쁜 자식...

알다가도 모르겠고 몇 시간만 지나면 같은 내용을 또 까먹는 나다ㅎㅎ

알고리즘도 해봤는데 진짜 첩첩산중이로구나 ^^

할 건 많고 진도가 너무 느려서 걱정되지만.. 

모르겠다~ 어케든 되겠지 :)