[JavaScript] this

   목차 

1. this란?
2. 런타임에 결정되는 this
3. this를 사용하는 이유
4. this가 없는 화살표 함수 

 

 

this에 대해서 알아보자!

 

 

---

 

 

 1. "this"란? 

 

* this:  메서드를 호출할 때 사용된 객체 (즉, 현재 객체) 

 

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(this.name);  // 여기서는 this가 user임
  }

};

user.sayHi(); // John   // user.sayHi()가 실행되는 동안에 this는 user를 나타냄

 

 

* 참고) 메서드 단축 구문

// 아래 두 객체는 동일하게 동작한다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문
user = {
  sayHi() {   // "sayHi: function()"과 동일함
    alert("Hello");
  }
};

 

 

---

 

 

 2. 런타임에 결정되는 this 

 

obj.f()를 호출했다면,  this는 f를 호출하는 동안의 obj이다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수(sayHi)를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에 this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

 

 

---

 

 

 3. this를 사용하는 이유 

 

어차피 this가 user를 의미하는데, 굳이 this를 사용하지 않고 외부 변수(user)를 직접 참조해 객체에 접근하면 안될까?

 

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // 'this' 대신 'user'를 이용함
  }

};

그런데 이렇게 외부 변수를 사용해 객체를 참조하면 예상치 못한 에러가 발생할 수 있다. 

 user를 복사해 다른 변수에 할당(admin = user)하고, user는 전혀 다른 값으로 덮어썼다고 가정하면, 
sayHi()는 원치 않는 값(null)을 참조하게 된다. 

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; // user를 null로 덮어쓴다.

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생함.

 

 

---

 

 

 4. this가 없는 화살표 함수 

 

화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않는다.
화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져온다.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName); 
    arrow();  // arrow()의 this는 외부 함수 sayHi()의 this (즉, user)
  }
};

user.sayHi(); // 보라

 

별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.