[스터디] this에 관하여..

choiuhana·2021년 9월 11일
0

스터디

목록 보기
1/2

취업스터디 도서로 선정된 '코어 자바스크립트 -정재남-을 각자 할당된 챕터를 읽고 정리하는 시간을 갖기로 했고, 처음 담당하게된 챕터인 this를 정리 하고자 한다.

this?

this란 무엇일까? 우선 쉽게 정의를 하고 들어가보면

클래스로 생성한 인스턴스 객체를 의미

우선 이부분은 잠시 머리속 한켠에 치워두고 this를 어렵게 만드는 요소는 (내기준으로) 3가지가 있다.

  1. 용어의 의미
    • this 라고 하니까 당연히 지금 그 때 그거 같잖아..

  2. 실행 컨텍스트 과정이 헷갈리니까 인스턴스가 헷갈림
    • this 공부하려고 컨텍스트를 더 공부한게 반전

  3. 화살표함수가 더 편한 코린이는 this를 볼일도 쓸일도 없었...
    • 화살표 함수를 사용하면 this는 그 함수를 그대로 가리킨다. ES5 부터 안해서 다행이다..

정리하면 아직까지 잘 쓰거나 보질 못했는데 다른 개념도 정확히 이해해야만 이해가 되는 거니까 어렵?게 느껴지는 듯...
그래서 이렇게 스터디를 통해 공부를 하는거라 생각하고 너무 깊진 않아도 확실하게 정리를 해봅시다!

this는 함수를 호출할 때 정해진다

앞서 말한대로 이를 이해하기 위해선 앞 챕터인 02. 실행 컨텍스트를 이해해야할 필요가 있다. (앞서 열심히 설명해 주셨을거라 생각하고)
그래도 일반화 하기는 어려워도 대부분의 경우 통용되는 개념으로 정리를 해보면

  1. 함수가 선언 함수로 사용될 때는 this는 전역을 의미할 경우가 많다.
  2. 함수가 매서드로 사용될 때는 this는 사용된 매서드의 객체를 의미한다.

call, apply매서드로 함수를 호출할 경우

  • this는 호출된 함수를 가리킨다 (매우 깔끔)
  • 그러나 아마 callapply는 뭐지? 싶을 수 있다.(적어도 나는 그랬다..)

간단히 설명하면
callapply는 호출 주체인 함수를 즉시 실행하도록 하는 명령이며, call은 인자로 호출한 함수의 매개변수로 줄 수 있고 apply는 인자로 배열을 전달한다는 차이가 있다.

bind

callapply가 즉시호출하는 반면 bind는 새로운 함수를 반환하고 반환된 함수를 실행할때 함께 전달된 this를 사용한다고 볼 수 있다.

  • TIP
    - 함수에 name 프로퍼티를 사용하면 일반 함수인지 binding된 함수인지 나오는데 뭔가 나중에 레거시 코드를 볼 때 유용하지 싶은...?

this를 인자로 받는 콜백함수들..

forEach, map, filter, some, every, find, findIndex, flatMap, from 등은 this를 인자로 받기 때문에 this를 지정할 수 있다.
(콜백함수 챕터에서 자세히 다룬다고 함..)

정리

사실 내 경우에는 this의 가치? 라고 할까 현재단계에서 와닿을 정도의 문제를 겪거나 효용을 본적이 없고 오히려 이번에 this를 공부하면서 실행 컨텍스트(JS의 실행과정?)이 더 와닿았던 것 같다.
아마 지금단계에선 레거시코드를 관리할 경우 발목을 잡을것 같은 느낌이라 이정도만 이해하고 있으면 되지 않을까? 싶고 자유 자재로 코드를 짤 수 있을 땐 다뤄보지 않을까? 싶다..

profile
만드는 사람도 사용하는 사람도 편하고 만족하는 '것'을 추구하는 프론트엔드 개발자

0개의 댓글