패스트캠퍼스 환급챌린지 35일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250804(월) 35일차

문법 - 컨텍스트

 

실행 컨텍스트 (Execution Context)

const person = {
  name: "Kim",
  age: 40,
  getAge() {
    return this.age;
  }
};

const age = person.getAge;
age(); // undefined

- this는 함수가 어떻게 호출되느냐에 따라 결정됨

- age() 처럼 단독 호출될 경우, 소유 객체를 잃어버려 this.age는 undefined

- 이를 보정하기 위해 call, apply, bind 등의 컨텍스트 고정 메서드를 사용

 

바인딩을 통한 컨텍스트 고정

person.getAge = person.getAge.bind(person);

bind를 통해 this를 고정시켜 두면 어디서 호출하든지 person을 가리킴

특히 콜백 전달, 이벤트 핸들러 등에서 매우 유용하게 사용됨

 

렉시컬 컨텍스트

class Person {
  constructor(name) {
    this.name = name;
    this.getName = () => this.name;
  }
}

const p = new Person("Min");
const fn = p.getName;
fn(); // "Min"

화살표 함수는 선언된 위치의 this를 기억

call / apply / bind가 무시되므로 혼란없이 this를 유지하고 싶을 땐 화살표 함수로 정의하는 것이 안정적

 

컨텍스트 패턴

매 호출마다 다른 this를 주입해 유연하게 쓰고 싶다면 call / apply

한 번 고정시켜 여러 곳에서 쓸 계획이라면 bind

this가 절대 바뀌면 안되는 상황이라면 화살표 함수

 

이번 강의를 통해 this가 단순히 객체 자신이라는 개념이 아니라 컨텍스트에 따라 변화하는 지시자임을 명확히 인식할 수 있었고

call / bind / 화살표 함수 / 클래스 내 메서드 / 렉시컬 실행 컨텍스트 간 차이를 실습하며 this의 의미를 알아갔던 시간