피드로 돌아가기
Dev.toBackend
원문 읽기
Understanding "this" in JS
JavaScript의 this 키워드가 실행 컨텍스트와 함수 호출 방식에 따라 다르게 동작하는 ECMA 규칙 4가지를 체계화해 개발자의 혼동 제거
AI 요약
Context
JavaScript의 this 키워드는 C++, Java 등 다른 언어와 다르게 동작하며, 실행 컨텍스트와 함수 호출 방식에 따라 값이 변하기 때문에 개발자들이 혼동하기 쉽다. 이에 따라 프로젝트에서 this를 자신감 있게 사용하기 어려운 상황이 발생한다.
Technical Solution
- Global Execution Context(GEC)에서 this의 동작: 호스트(브라우저, Node.js, Bun)가 제공하는 전역 객체를 참조하도록 표준화
- Functional Execution Context(FEC)에서 this의 4가지 호출 방식 분류: Function invocation(일반 호출) → 비엄격 모드에서 전역 객체, 엄격 모드에서 undefined / Method invocation(객체 참조) → 메서드를 소유한 객체 / Explicit Binding(call/apply/bind) → 명시적으로 지정된 객체 / Constructor invocation(new 키워드) → new로 생성된 객체
- Node.js 파일 실행 메커니즘 명확화: Node.js가 파일을 함수로 감싸서 변수의 var 선언을 파일 스코프로 격리해 전역 네임스페이스 오염 방지
- Module scope(ES6 도입) 규칙: 모듈은 기본값으로 엄격 모드에서 실행되므로 this가 undefined가 되는 동작 정의
- .mjs 확장자 또는 package.json의 type 속성 "module" 설정으로 모듈 스코프 활성화
Key Takeaway
this의 동작은 ECMA에서 정의한 명확한 규칙에 따르며, 실행 컨텍스트(Global vs Functional vs Module)와 함수 호출 방식(4가지)을 이해하면 JavaScript의 this 키워드 95% 이상의 동작을 예측할 수 있다.
실천 포인트
JavaScript 개발 시 함수나 메서드 호출 전에 호출 방식(일반 호출/메서드 호출/명시적 바인딩/생성자 호출)을 먼저 파악하고, 엄격 모드 여부를 확인하면 this가 참조할 객체를 정확히 예측할 수 있으며, Node.js 파일 스코프의 격리 메커니즘을 이해하면 var 변수로 인한 예기치 않은 전역 오염을 방지할 수 있다.