210112_TIL (this응용 - call, apply, bind 메서드 사용해보기)

🍎 오늘 한 일

---

✔️ call, apply, bind 메서드 사용해보기
this 값을 지정하고 싶을 때 사용하는 메서드들인 call, apply, bind 메서드가 무엇이고 어떻게 사용하는 지 예시를 통해 배웠다. 단지 this를 지정하는 것 뿐만 아니라 Spread Opeator을 대신해서도 쓸 수 있고, 배열이 아닌 데이터타입에 배열메서드를 적용하는 놀라운 일까지 가능했다. 특히 bind를 사용하면 이벤트 핸들러를 생성할 때 이벤트 객체 대신 다른 값도 넘겨줄 수 있다고 해서 전에 만든 트위틀러에 적용해보려 한다. 잘 알아둔다면 굉장히 유용하게 쓰일 것 같아서 또 어디에 쓰일 수 있는지도 더 알아보고, 꼭 내일 블로깅을 해둬야겠다..

✔️ 예제를 통해 this의 변화 알아보기
this는 실행 컨텍스트에 따라 다르게 결정되는데, 이 실행 컨텍스트가 너무 다양해서 말로 배우는 것만으로는 와닿지 않았다. 예를 들어 전역이나 함수로 불렸을 때 this는 전역객체가 되지만, 메서드나 콜백함수로 호출 되었을 때는 호출 주체가 this가 된다. 또 생성자 함수로 호출되면 새 인스턴스 객체가 this가 되기도 한다. 헷갈릴 수 있는 개념이었는데 koans 문제를 풀면서 다양한 상황에서의 this값들을 비교해볼 수 있었다.

✔️  실행 컨텍스트 개념 정리
this에 대해 공부하다가 언급되어서 알아보게 되었는데, 실행 컨텍스트는 클로저, 스코프, 호이스팅, this 등 지금까지 배웠던 Javascript의 필수적인 개념들을 이해하는 기반이 되는 개념이라는 생각이 들었다. 덕분에 호이스팅의 '끌어올리는' 동작이 정확히 어떤 원리로 작동하는 것이었는 지도 알게 되었다.

 

🍎기억할 것

---

✔️ 상황에 따라 달라지는 this값
전역 변수 : 전역 객체
함수 호출 : 전역 객체
메서드 호출 : 호출 주체 (메서드명 앞 객체)
콜백 함수 : 호출 주체 (제어권 가진 함수, 정의X시 전역 객체)
생성자 함수 : 새 인스턴스 객체
call, apply 호출 : 첫 인자

✔️ setTimeout과 this
setTimeout은 항상 this로 window객체를 바인딩한다!

✔️ 화살표함수(=>)와 this
화살표 함수는 호출 시 this 바인딩을 하지 않는다. 대신 접근 시 스코프 체인상에서 자신과 가장 가까운 this에 접근한다.

✔️ NVM 버전 이동 쉽게하기
nvm run (버전) (파일명) 명령어를 사용하면 nvm use 없이 바로 다른 버전을 이용할 수 있다! 버전을 아예 변경하는건 아니고 프롬프트만 다른 버전으로 띄우는 방법이다.

✔️ 문자열에 call, apply 적용 시 주의사항
 문자열도 반복 가능한 객체이기 때문에 call, apply메서드로 배열 메서드들을 적용할 수 있다. 하지만 length 속성이 읽기전용이라 원본에 영향을 주는 push, pop, shift, unshift, splice같은 메서드를 쓰면 에러가 난다. 그리고 concat처럼 배열만 대상으로 하는 메서드를 적용하면 에러는 안나지만 예상과 다른 이상한 결과가 나왔다.

 

🍎 더 공부할 것

---

✔️ 트위틀러에 bind 메서드 적용
bind 메서드를 이용하면 이벤트 객체 말고 다른 값을 전달할 수 있다고 해서, 전에 만들었던 트위틀러에 적용할 수 있지 않을까 하는 생각이 들었다. 동적으로 생성되는 버튼을 구현하는 부분에서 원래는 반복문을 사용해 다른 값들을 전달했었는데, 반복문 대신에 bind를 써서 고쳐보도록 해야겠다.

✔️ module.exports와 global의 차이
✔️ this 블로깅 마무리