[Javascript] Javascript 의 this 란?

 

 

❗ 주의: Node 에서의 this 는 조금 다릅니다. 이 글에서 다루는 내용은 브라우저에서 작동하는 JS 에서의 this 입니다. 

 

Javascript 의 this 는 자주 등장하지만, 정확히 알기 힘든 개념이다. 이번 글에서는 this 의 기초 작동 방식과 바인딩에 대해 설명하고자 한다. this 의 개념에 접근하기 전, 먼저 알아두어야 하는 실행 컨텍스트와 프로퍼티 & 메서드부터 살펴보자.

 

✨  Javascript 에서의 실행 컨텍스트

이전 글에서 잠깐 언급했지만, Javascript 는 컴파일 언어가 아닌 인터프리터 언어이다.

인터프리터 언어로 작성된 코드는 실행 즉시 인터프리터가 코드를 한줄씩 읽어내려가며 실행한다. 

이 때 인터프리터는 코드 해석을 조금이라도 편하게 하기 위해 코드를 작은 조각으로 나누는데, 이 때 나뉜 조각들이 "실행 컨텍스트" (Execution Context) 이다. 

 

📌 실행 컨텍스트는 그래서 무엇인가? 

자바스크립트의 scope, hoisting, closure 등을 담고 있는 핵심 원리이며,

"실행 가능한 코드가 실행되기 위해 필요한 환경" 으로 정의할 수 있다.

 

✨  프로퍼티와 메서드 

자바스크립트는 명령형, 함수형, 프로토타입 기반, 개체비향 프로그래밍 (OOP) 을 지원하는 멀티 패러다임 프로그래밍 언어이다. 중요한 것은, 자바스크립트는 객체를 기반으로 한 프로그래밍 언어이며, 원시 타입을 제외한 나머지 값들은 모두 객체이다. 

 

원시 타입을 제외한 나머지 값

- 함수

- 배열

- 정규 표현식 

- Etc... 

 

객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드로 구성되어 있다. 

다음과 같은 기본적인 코드를 살펴보자. 

 

const student = {
    age: 10,
    addTen: () => {
    	return student.age + 10;
    }
};

student.addTen() // 20

 

📌 여기서 student 객체의 프로퍼티는 무엇인가?

프로퍼티는 객체의 상태를 나타내는 데이터이니, age 이다. 

 

📌 그렇다면 student 객체의 메서드는 무엇인가?

메서드는 프로퍼티와 같은 데이터를 참조하고 조작하는 동작이니, addTen() 이다. 

 

이렇듯 메서드가 자신이 속한 객체의 프로퍼티를 참조하고, 값을 변경하기 위해서는 자신이 속한 객체를 가리키는 식별자 (우선은 변수명이라고 이해하면 쉽다) 를 참조해야 한다. 

 

그렇다면 모든 경우에 이렇게 메서드가 자신이 참조해야 하는 식별자를 바로 알 수 있을까?

답은 "No" 이다. 여기서, this 의 필요성이 드러나기 시작한다. 

 

 

✨  this 가 필요한 이유

📌 위의 예시가 인터프리터에서 해석되는 단계를 우선 알아보자.

1. 인터프리터가 코드를 읽어 내려가는 순간, 객체가 먼저 평가된다.

2. 객체 리터럴의 평가가 완료되면 객체가 생성되어, student 에 할당된다. 

3. 그 이후에 student.addTen() 메서드가 실행되므로, 이미 생성된 student.age 프로퍼티 값을 참조할 수 있게 된다. 

 

그렇다면 this 는 왜 필요할까? 경우에 따라 프로퍼티 생성이 먼저 이루어지지 않기 때문이다.

가령, 생성자 함수 (Constructor Function) 은 일반 객체와는 조금 다른 방식으로 평가된다. 

 

생성자 함수는 기본적으로 : 

- 유사한 객체를 여러 개 만들기 위해 만들기 위해 사용되는 클래스이며,

- new 연산자를 사용해야 비로소 인스턴스가 '생성'이 된다. 

(생성자 함수에 더 알아보려면 해당 링크를 참조하면 된다)

 

그러나 여기서 문제가 발생한다. 생성자 함수를 정의하는 시점에서는, 아직 new 연산자를 통해 인스턴스 식별자에 할당하기 전이므로, 생성자 함수 내의 값이 참조할 식별자가 무엇인지 알 수 없게 된다. 

 

function User(name) {
  ?.name = name;
  ?.isAdmin = false;
}

 

User 라는 생성자 함수를 만들어 name 과 isAdmin 이라는 프로퍼티를 지정하고자 하는데, 해당 프로퍼티는 User 의 프로퍼티가 아니라 향후 생성될 인스턴스의 프로퍼티이기 때문에 User.name 으로 지정할 수는 없다. 이러한 상황을 위해, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 (그리고 값을 참조하는) 식별자가 필요하다. 

 

그리고 이 특수한 Javascript 식별자가 바로 this 이며, 앞서 언급한 역할 때문에 this 를 자기 참조 (self-referencing) 변수라고 부른다. 

 

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let vodka = new User(haeun);
console.log(vodka.name) // haeun

let beer = new User(kang);
console.log(beer.name) // kang

 

📌 위의 코드가 해석되는 단계를 살펴보면,

1. User 생성자 함수가 먼저 정의된다. (this 를 통해 향후 추가될 인스턴스 참조)

2. new 연산자와 함께 생성자 함수로 인스턴스 생성, vodka 식별자에 할당된다.

3. vodka 에는 name, isAdmin 프로퍼티가 담긴 객체가 할당되었다. 

4. beer 에 객체가 할당되는 과정도 1~3과 유사하다. 

 

중요한 점은, this 식별자 덕분에 생성자 함수가 생성되는 순간 바로 참조할 식별자를 확인하지 않아도 된다는 것이다. 

 

 

✨  This 의 주요 특징

📌this 는 독특한 특징 몇 가지를 가지고 있다.

1. 자바스크립트 엔진에 의해 암묵적으로 생성된다.

2. 함수 호출 시 arguments 가 암묵적으로 함수 내부에 전달되듯, this 도 암묵적으로 전달된다. (지역 변수처럼 사용 가능)

3. 코드 어디서든 참조할 수 있다. 

4. this 바인딩은 함수 호출 방식 & 시점에 의해 결정된다. 

 

1 & 2 번 특징은 그 자체로 설명이 되기 때문에 부연을 할 필요가 없으나, 

3 & 4 번 특징은 혼란의 여지가 있어 조금 더 깊이 들어가보고자 한다. 

 

📌 this 바인딩 & this 의 참조값

 

바인딩이란 식별자와 값을 연결하는 과정이다.

변수가 선언될 떄, 변수 이름(식별자)와 메모리 주소가 연결되는데, 이 과정 역시 바인딩이다.

this 바인딩은 this 식별자와 this 가 가리킬 값을 연결하는 과정이며, 함수 호출 방식 뿐만 아니라 strict mode 에도 영향을 받는다. 

 

 this 바인딩이 다르게 이루어지는 몇 가지 상황을 살펴보자.

 

1. 전역 scope 에서의 this 는 window 객체를 가리킨다. window 는 전역 객체이기 때문이다.

 

console.log(this) // window

 

2. 일반 함수 내부에서도 마찬가지로, this 는 window 를 가리킨다. 

2-1. strict mode 가 적용된 일반 함수 내부의 this 에서는 undefined 가 바인딩된다. (객체를 생성하지 않는 일반 함수에서 this 의 역할은 무용하기 때문이다) 

2-2. 어떤 함수라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩된다. (중첩, 콜백 함수 포함)

 

function hello() {
    console.log(this)
}

hello() // window

 

 

 

3. 객체의 메서드 내의 this 는 메서드를 호출한 객체 자체를 가리킨다. 

3-1. 메서드 내에서 정의한 중첩 함수의 경우일지라도, 일반 함수로 호출된다면 전역 객체를 가리킨다. 

 

const hello = {
    name: 'Haeun',
    getName() {
    	console.log(this)
    }
}

hello.getName() // {name: 'Haeun, getName: f}

const hello = {
    name: 'Haeun',
    getName() {
    	console.log(this); // {name: 'Haeun, getName: f}
        function world () {
        	console.log(this) // window
        }
    }
}

 

4. 생성자 함수 내부에서 this 는 생성자 함수가 생성할 인스턴스를 가리킨다. 

 

function Hello (name) {
    this.name = name;
    console.log(this) // Hello {name: 'kang'}
}

const me = new Hello ('Kang')

 

 

📌 (약간의 심화) 함수 호출 방식과 this 호출 시점에 따른 this 바인딩 

 

메서드 내부의 this 는 (그리고 생성자 함수 내부의 this 는) 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 된다. 

또한, this 에 바인딩될 객체는 호출 시점에 결정된다. 

 

하나의 예제를 살펴보자.

 

const person = {
    name: 'Kang',
    getName() {
    	console.log(this.name);
    }
};

person.getName(); // Kang

 

일반적인 객체 메서드와 this binding 이다.

그렇다면 해당 메서드를 다른 객체에 복사하여 실행한다면 어떻게 될까? 

그리고 일반 함수로 실행한다면 어떻게 될까? 

 

const person = {
    name: 'Kang',
    getName() {
    	console.log(this.name);
    }
};

person.getName(); // Kang 

const anotherPerson = {
    name: 'Kim',
};

anotherPerson.getName = person.getName;
const getName = person.getName;

anotherPerson.getName(); // Kim
getName(); // ''

 

anotherPerson 이라는 새로운 객체에 getName 이라는 함수를 옮겨서 실행했을 때, this 는 person 객체가 아닌 anotherPerson 이 되었다. 함수 호출 시점에 this 가 결정된 사례이다. 

 

또한, getName 을 일반 함수로 옮겨서 실행했을 때의 this 는 전역 객체인 'window' 가 된다. 현재 window 에 name 이라는 값은 존재하지 않기 떄문에, 어떠한 값도 출력하지 않게 되는 것이다. 

 

 

✨  일반 함수의 this 바인딩 이슈를 해결하는 방법

앞서 언급했듯, 무엇이든 일반 함수로 실행할 경우 this 에는 전역 객체가 바인딩되어, 원하는 값을 얻지 못할 수도 있다. 

이를 위한 몇 가지 해결책 역시 존재한다. 

 

 

1. 메서드 내부에 새로운 변수를 선언하여 this 할당 

 

// Original Case

var name = 'Global'

const hello = {
    name: 'Local',
    getName() {
        function world () {
        	console.log(this.name) // Global
        }
    }
}

// 중첩 함수 내 새롭게 변수를 선언한 Case 

var name = 'Global'

const hello = {
    name: 'Local',
    getName() {
        const that = this
        function world () {
        	console.log(that.name) // Local
        }
    }
}

 

2. this 를 명시적으로 바인딩할 수 있는 Javascript method 활용 

- Function.apply

- Function.call

- Function.bind

apply, call, bind 의 자세한 인수는 MDN 문서에서 확인할 수 있다.

 

아래는 같은 함수를 apply 와 call 메서드를 활용하여 this 바인딩한 사례이다. 

apply 와 call 은 전달하는 인수의 방식만 다를 뿐, 기본적으로 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this 에 바인딩한다. 

 

// Original Case

function bindingFunc() {
	console.log(this) // window
}

// apply, call

const temp = {a:1}

bindingFunc.apply(temp) // {a:1}
bindingFunc.call(temp) // {a:1}

 

bind 메서드는 함수를 호출하지 않고 this 로 사용할 객체만 전달한다. 

 

// Original Case

function bindingFunc() {
	console.log(this) // window
}

// bind

const temp = {a:1}

bindingFunc.bind(temp) // 함수가 호출되지 않음 
bindingFunc.bind(temp)() // temp 가 바인딩 되어 함수가 호출됨, {a:1}

 

✨ 정리

이번 글에서 다룬 내용이 정말 많은데, 몇 가지만 기억하면 this 를 훨씬 잘 활용할 수 있을 것이다. 

 

📌 this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 (그리고 값을 참조하는) 식별자이다. 

📌 this 는 자바스크립트 엔진에 의해 암묵적으로 생성된다.

📌 this 바인딩은 함수 호출 방식 & 시점에 의해 결정된다. 

📌 어떠한 함수든 일반 함수의 형태로 호출 시 this 는 전역 객체인 window 이다. 

📌 위의 문제를 해결하기 위한 Javascript 내장 함수 메서드들이 존재한다. 

 

 

✨ 배운 점

• this... 정말 만만하게 봤다가 큰 코 다칠 뻔했다. 생각보다 scope 나 context 에 영향을 많이 받는 식별자라는 사실을 깨달았고, 많은 연습을 통해 this 를 잘 활용하는 방법을 터득해야 할 것이다.
• Javascript 의 코드를 읽어내리는 인터프리터의 작동 과정에 대한 명확한 이해가 없이는 "Javascript 를 쓸 줄 안다" 고 표현하면 안된다. 인터프리터가 코드를 읽고 실행하는 과정이 곧 Javscript 의 근본이라는 생각이 든다. 

 

 

✨  참고자료

• The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript
• 모던 자바스크립트 Deep Dive (위키북스) 
• 실행 컨텍스트와 자바스크립트의 동작 원리
• new 연산자와 생성자 함수