본문 바로가기
Co-Study/JS 스터디 2021 ✔️

[JS 스터디 1기] - 다섯 번째 미팅

by Aaron-Kim 2022. 1. 8.

2022.01.08.토

 

JS 스터디 1기 다섯 번째 미팅을 가졌습니다.

 

오늘 자바스크립트에서 아주 중요한 개념을 공유했습니다.

 

첫 번째로 함수 호출 방식에 따라 동적으로 달라지는 this 바인딩에 대한 내용을 진행했습니다.

 

this 바인딩은 this 라는 키워드가 마치 식별자처럼 사용되서 this가 가리키는 값을 의미하는데,

 

Java나 다른 프로그래밍 언어와는 다르게 자바스크립트에서는 다양한 방식이 있습니다.

 

우선 간단히 말씀드리면, 일반 함수로서 호출되면 일반 함수 내에서의 this는 전역 객체를 가리키게 되고,

 

new 연산자를 붙여서 생성자 함수로 호출하면 생성자 함수 내부의 this는 생성자 함수가 미래에 생성할

 

인스턴스를 가리키게 됩니다. 메서드는 당연히 메서드를 호출한 객체를 가리키게 됩니다.

 

여기서 중요한 것은 바로 화살표 함수입니다.

 

화살표 함수 내부에서 this는 상위 스코프의 this를 가리키므로 바인딩을 할 때 유의해야 합니다.

 

this 바인딩 이후에는 자바스크립트에서 정말 중요한 실행 컨텍스트를 다뤘습니다.

 

실행 컨텍스트를 제대로 이해해야 자바스크립트 엔진의 평가/실행 과정을 통해

 

스코프 체인을 통한 식별자 검색, 변수/함수 호이스팅, 클로저 등에 대한 개념이 잘 받아들여집니다.

 

화이트보드에 조금 긴 예제 코드를 써놓고 그 코드를 JS 엔진이 실행 컨텍스트 스택을 통해

 

어떻게 코드의 실행 흐름을 관리하고, 스코프 체인을 통해 식별자 검색을 하면서 평가/실행

 

과정이 이루어지는지 그림을 그리면서 함께 공유했습니다.

 

설명을 하다보니 생각보다 제 빈틈도 조금씩 보이고 제가 완벽히 이해하지 못한 개념도 있어서

 

저도 스스로 다시 되돌아보는 좋은 시간이었습니다.

 

마지막으로는 시간이 조금 남아서 기존에 자바스크립트로 하는 알고리즘 기본 문제 풀이에 대한

 

코드를 공유하면서 마쳤습니다.

 

원래 스터디원이 총 4명이었는데 한분이 나가셔서 저 포함 세명으로 앞으로 2월말까지 진행하게 됩니다.

 

오늘도 다른 두분이 아직 많이 부족한 제 설명을 잘 들어주시고 스터디에 참여해주셔서 감사했습니다.

 

내일은 오늘 실행 컨텍스트를 기반으로 잘 이해할 수 있는 '클로저'라는 개념에 대해 함께

 

공유할 예정입니다. 이제 자바스크립트 기본의 절반을 한 만큼 다들 자부심을 가지시고

 

앞으로 끝까지 함께 열심히 스터디를 잘 마쳤으면 좋겠습니다.

반응형

댓글