눈, 그 깊은 심연

오늘은 얼마 전 심심해서 열어본 jquery 소스를 보고 메모해야지 했던 call과 apply에 대한 내용을 적어봐야지... 귀찮아서 계속 미루게 된다;

발단은 이러하다. 아주 아주 예~전에 사두어서 읽다가 책장으로 쳐박아둔 javascript patterns 책을
어쩌다 다시 보게 되면서 call과 apply 및 curring 부분에서 큰 재미를 얻을 수 있었는데

마침 어쩌다 열어 본 jqeury 3.1.1 소스에서 call, apply에 대한 예시를 적기에 딱! 좋은 부분이 발견되어 메모겸 적어놔야지 생각하게 되었다.

위에 소스를 보면 머 아시는 분들이야 다 아시겠지만 주목해야 할 부분이 있다.

위에 코드를 콘솔로 날리면 대략 저런 결과가 나온다.
참고로 __proto__는 private 변수 선언 정도로 생각하면 된다.
별도 검색해 보면 내용이 많이 나올 것이다. 일단 여기선 생략

slice function () { {native code} } 보이시는 가

slice 변수에 javascript Array 객체의 slice function이 대입되었다.

이말인 즉 javascript에서 기본으로 제공하는 api들을
내 임의로 변수에 할당하여 사용할 수 있다는 말이다.
위에 slice를 예를 들면 동일한 기능을 하는데 구지 내가 function을 하나하나 만들어가면서 삽질하지 않아도 된다는 것이다.

테스트는 안해 봤지만 성능도 native code로 동작하니 더 빠르겠지 ; (솔직히 이건 좀  100% 자신은 없다만;;)

slice 사용을 예로 들어보자 사용법은 저렇다.
근데 잘보면 저건 fruits가 Array니까 저렇게 사용 가능한 것이다.

근데 var slice = Array.slice ;;; ?? 헐 어찌 사용하노 this가 뭣인지 알고

이럴 때 적절히 사용 할 수 있는 것이 call, apply다
가장 핵심은 function 실행 시 this로 사용될 값을 파라미터로 넘길 수 있다는 것이다.
음 사람들이 간혹 이걸 보고 상속라 말하기도 한다. (내 생각은 약간 다르다.)

우선 위에 코드만 보면

add(10, 20) 의 경우 실행 시 console.log('this', this); 부분의 this는 window
반면 add.apply(me, [100, 200]); 에서는 'lks' 가 찍히는데

위와 같은 구조이기 때문에 그렇다.
보면 첫번째 인자로 function 내의 this 넘긴다.
그렇기 때문에 add 실행 시에는 그냥 window가 찍히고
apply를 통해 me를 변수로 넘겼을 때는 me의 name = 'lks' 가 찍힌 것이다.

그럼 위 slice를 사용해 보자

별거 아닌 내용인 것 같기도 한다.
일반적으로 사용하는 경우도 드물 것이다.
그러나 this를 넘길 수 있다는 건 매우 매력적인 기능이 아닌가 싶다.