this 키워드와 Lexical Scope 이해하기

오늘은 this 키워드를 알아보려 한다. this를 사용해본적이 없어 이것을 도대체 어떻게 사용하는 건지 건지 알쏭달쏭했다. 오늘 그것을 깔끔하게 정리해 보려한다. 추가로 "Lexical Scope"까지 같이 알아보자.

this ?

호출 하는 관점에서 간단하게 설명하자면, this는 누가 호출했는지에 따라 달라진다. 예를 들어, 객체 안에서 함수를 호출하면 그 객체를 가리키고, 전역에서 호출하면 전역 객체(window나 global)를 가리킨다.

하지만 여기서 주의할 점이 있는데, 화살표 함수에서는 다른 룰이 적용된다! 여기서는 this가 정적으로 바인딩돼서, 그 함수를 어디서 호출하든 바깥 스코프의 this를 그대로 사용한다.

const obj = {
  name: '길동',
  sayHello: function() {
    console.log(`안녕, 난 ${this.name}이야`);
  },
  sayHelloArrow: () => {
    console.log(`안녕, 난 ${this.name}이야`);
  }
};

obj.sayHello(); // 안녕, 난 길동이야
obj.sayHelloArrow(); // 안녕, 난 undefined이야

왜 두 번째는 undefined일까? sayHelloArrow는 화살표 함수라서, this가 함수가 정의된 시점의 this를 가리킨다. 이 경우 전역 객체를 참조하는데, 전역엔 name이라는 변수가 없으니 undefined가 나오는 것.

만약 전역에 name을 추가해 준다면?

const name = '전역 길동';

const obj = {
  name: '길동',
  sayHelloArrow: () => {
    console.log(`안녕, 난 ${this.name}이야`);
  }
};

obj.sayHelloArrow(); // 안녕, 난 전역 길동이야

이 경우에는 this가 전역 객체를 가리키고, 전역에 name 변수가 정의되어 있으니까 '전역 길동'이 출력된다.

Lexical Scope?

Lexical Scope(렉시컬 스코프)란 쉽게 말해 코드가 작성된 위치에 따라 스코프(변수 접근 범위)가 결정된다는 것을 의미한다. 이걸 "정적 스코프"라고도 부르는데 자바스크립트는 런타임이 아닌 작성된 시점에 스코프를 결정한다. 함수가 정의된 곳에 따라 어디까지 변수를 쓸 수 있는지 결정되는 것을 뜻한다.

function outer() {
  const outerVar = '난 바깥이야';

  function inner() {
    console.log(outerVar); // 난 바깥이야
  }

  inner();
}

outer();

위 코드에서 inner 함수는 outer 함수 안에서 정의되었다. 그래서 inner는 outerVar에 접근할 수 있음. 이게 바로 렉시컬 스코프인데 함수가 어디서 실행되느냐가 아니라 어디서 정의됐느냐가 중요하다!

this와 Lexical Scope의 차이점

this는 누가 호출했는지에 따라 변하고, 렉시컬 스코프는 코드가 작성된 위치에 따라 결정된다. 그래서 화살표 함수는 렉시컬 스코프처럼 작동하는 것. 한 번 정의되면 그 위치의 this를 계속 참조한다.

이제 this와 렉시컬 스코프가 좀 더 명확해진 것 같다. 자바스크립트에서 자주 헷갈릴 수도 있는 부분인데, 개념을 잘 잡으면 훨씬 편해질 거 같다! 😎

(쿠키) 바인딩이란...?
무언가를 '연결'하거나 '묶는' 것을 의미한다.

const person = {
  name: '길동',
  introduce: function() {
    console.log(`안녕! 나는 ${this.name}이야.`);
  }
};

const otherPerson = { name: '재석' };

person.introduce(); // 안녕! 나는 길동이야.
person.introduce.call(otherPerson); // 안녕! 나는 재석이야.

여기에서 this가 otherPerson으로 바인딩 된 것.