TIL 17일차 - Javascript this, 콜백 함수, 클로저

박찬웅·2023년 2월 22일
0

항해99

목록 보기
22/105

23년 2월 22일

  • 제가 오늘 TIL에서 적는 것은 간략하게 글로만 쓴 내용이다.

배운 것

오늘은 심화 이론의 두번째 시간으로 this, 콜백 함수, 클로저의 개념을 이해하고, 팀원들이랑 이해 한것을 공유하였다.
제가 오늘 TIL에서 적는 것은 아주 간략하게 글만 쓴 내용임을 알립니다.
오늘 배운 강의 자료는 아래의 링크를 참고하면 된다.
this, 콜백 함수, 클로저 강의 자료

1. this

this는 상당히 정의 하기가 어렵다. 그래도 굳이 말하자면 기본적으로 함추를 호출 할 때 이미 결정 된 것을 말한다.

아래 규칙은 명시적 this 바인딩이 없는 한 늘 성립한다. 원리를 바탕으로 꾸준히 다양한 상황에서 this가 무엇일지 예측해보는 연습을 해볼 필요 가 있다.

  • 전역공간에서의 this는 전역객체(브라우저에서는 window, Node.js에서는 grobal)를 참조합니다.
  • 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체에(메서드명 앞의 객체)를 참조합니다.
  • 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조하며, 메서드 내부함수에서도 같습니다.
  • 콜백 함수 내부에서의 this는 해당 콜백 함수 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조합니다.
  • 생성자 함수에서의 this는 생성될 인스턴스를 참조합니다.

다음 아래 규칙은 명시적 this 바인딩인데, 위 규칙에 부합하지 않은 경우에는 다음 바탕으로 this를 예측 할수 있다.

  • call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출합니다.
  • bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듭니다.
  • 요소를 순회하면서 콜백 함수를 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.

2. 콜백 함수

콜백 함수는 다른 코드에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수를 말한다.

제어권을 넘겨 받은 코드는 다음과 같은 제어권을 가진다.
1) 콜백 함수를 호출하는 시점을 스스로 판단해서 실행합니다.
2) 콜백 함수를 호출할 때 인자로 넘겨줄 값들 및 그 순서가 정해져 있습니다. 이 순서를 따르지 않고 코드를 작성하면 엉뚱한 결과를 얻게 됩니다.
3) 콜백 함수의 this가 무엇을 바라보도록 할지가 정해져 있는 경우도 있습니다. 정하지 않은 경우에는 전역객체를 바라봅니다. 사용자 임의로 this를 바꾸고 싶은 경우 bind 메서드를 활용하면 됩니다.

또한 콜백 함수는 어떤 함수에 인자로 메서드를 전달하더라도 이는 결국 함수로서 실행된다. 마지막으로 비동기 제어를 위해 콜백 함수를 사용하다보면 콜백 지옥에 빠지기 쉽다. 그래서 최근에는 ESMAScript에는 Promise, Generator, async/await 등 콜백 지옥에서 벗어날 수 있는 휼륭한 방법들이 속속 등장 하고 있다.

3. 클로저

클로저란 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않은 현상을 말한다. 내부함수를 외부로 전달하는 방법에는 함수를 return하는 경우뿐 아니라 콜백으로 전달하는 경우도 포함된다.
클로저는 그 본질이 메모리를 계속 차지하는 개념이므로 더는 사용하지 않게 된 클로저에 대해서는 메모리를 차지하지 않도록 관리해줄 필요가 있고, 강의에서 소개해준 예시로는 숫자를 더하고 빼는 것도 있었는데, 그 외에서는 접근 권한 제어를 하는 정보 은닉에서도 사용되기도 한다.

알게 된 점

오늘도 상당히 어려운 개념들만 모여 있었다. 그나마 다행인건 어제 기술매니져님의 추가적인 내용들로 인해서 그런지 콜백 함수나 클로저는 약간 이해 하였지만, this는 여전히 이해하기는 어려웠었다. 오늘 TIL는 어제랑은 다르게 코어 자바스크립트 책의 내용을 위주로 공부를 하였고, 특히 스파르타에서 준 강의 영상에서 책의 내용을 읽으면서 보니까 확실히 이해하는데 도움이 많이 되었다. 어제랑 다른 점이라면 강의 자료만 보면서 해서 그런지 이해 안됬지만, 영상의 효과는 컸다는 것을 알게 되었다. 그래서 추가적으로 어제 배웠던 실행 컨텍스트 이 부분도 다시 영상으로 보니까 이해 한 것들이 좀 더 생기게 되었다. 다만 여전히 어려운 개념이라서 그런지 아직까지는 완벽하게 이해하지는 못했지만, 지금은 당장 개념을 몰라도 나중에는 취업할때 이러한 용어들은 면접 질문으로 나올 수도 있다고 하니, 그때마다 다시 한번 개념을 정리 해볼 필요가 있겠다.

앞으로 할 일

내일이 마지막으로 자바스크립트의 심화적인 이론이 끝난다. 동기랑 비동기에 대해서 배우는데 차이점이라면 코어 자바스크립트 책에서 없는 내용이라 별도의 강의 자료로 이해 하게 될텐데, 이것도 만만치 않을 내용이 담아 있겠지만 최대한 이해 헤보려고 노력 할 계획이다.

profile
향해 13기 node.js 백앤드

0개의 댓글