this

---

📚 Reference

---

javascript.info, https://ko.javascript.info/object-methods
PoiemaWeb, https://poiemaweb.com/es6-arrow-function

참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.

---

자바스크립트의 자유로운 this

---

자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다릅니다. 모든 함수에서 this를 선언할 수 있습니다. 다만, 함수가 호출되기 전까지 this에는 값이 할당되지 않습니다. this의 값은 런타임 중에 결정되고, 함수가 어디서 정의되었는지에 상관없이 this는 . 앞의 객체가 무엇인가에 따라 자유롭게 결정됩니다.

const person1 = {
  name: 'Tomas',
  age: 27
};
const person2 = {
  name: 'James',
  age: 30
};

function sayHi() {
  console.log(this.name, this.age);
}

// 별개의 객체에서 동일한 함수를 사용합니다.
person1.f = sayHi;
person2.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에 this 값이 달라집니다.
person1.f(); // Tomas
person2.f(); // James

객체 없이 this 호출하기

function sayHi() {
  'use strict'
  console.log(this);
}

function sayBye() {
  console.log(this);
}

sayHi(); // undefined
sayBye(); // window

자바스크립트의 엄격 모드 기준으로 위 코드는 참조할 객체가 없기 때문에 this는 undefined를 의미합니다. 하지만 엄격 모드가 아니라면 전역 객체 window를 참조하여 this는 window를 의미합니다.

이런 식의 코드는 대개 실수로 작성된 경우가 많습니다. 함수 본문에 this가 사용되었다면, 객체 내에서 함수를 호출할 것이라고 예상하시면 됩니다.

자유로운 this의 문제점

다른 언어를 사용하다 자바스크립트로 넘어온 개발자는 this를 혼동하기 쉽습니다. this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각합니다.

자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 . 앞의 객체가 무엇인가에 따라 자유롭게 결정됩니다.

이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있습니다. 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함이 실수로 이어질 수 있다는 것은 단점입니다.

자바스크립트가 this를 다루는 방식이 좋은지, 나쁜지는 우리가 판단할 문제가 아닙니다. 개발자는 this의 동작 방식을 충분히 이해하고 장점을 취하면서 실수를 피하는 데만 집중하면 됩니다.

---

this가 없는 화살표 함수

---

화살표 함수는 일반 함수와는 달리 this를 가지지 않습니다. 화살표 함수 내부에서 this에 접근한다면, 외부 실행 컨텍스트에서 this 값을 가져옵니다. 아래는 sayHi() 함수의 실행 콘텍스트 안의 this를 참조하게 됩니다.

const user = {
  name: "Tomas",
  sayHi() {
    const arrow = () => console.log(this.name);
    arrow();
  }
};

user.sayHi(); // Tomas

별개의 this가 만들어지는 것을 원하지 않고, 외부 함수에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용합니다.

이런 특징은 아래 예시처럼 사용할 수 있습니다.

const group = {
  title: 'crew',
  students: ['Tomas', 'James', 'Sam'],
  showList() {
    this.students.forEach(
      student => console.log(`${this.title}: ${student}`)
    );
  }
};

group.showList();

forEach() 메서드의 콜백 함수로 화살표 함수를 사용했기 때문에, 화살표 함수 내부에 this는 외부 함수 showList() 함수의 실행 컨텍스트 안의 this 값과 동일해집니다.

만약에, 위 코드에서 화살표 함수 대신에 일반 함수를 사용했다면 에러가 발생합니다.

const group = {
  title: 'crew',
  students: ['Tomas', 'James', 'Sam'],
  showList() {
    'use strict'
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
       console.log(`${this.title}: ${student}`);
    });
  }
};

group.showList();

이 부분에서 알아야할 점은 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역 객체를 바인딩하고 엄격 모드에서는 undefined가 됩니다. 자바스크립트 전문가 더글라스 크락포드는 “이것은 설계 단계의 결함으로 메소드가 내부 함수를 사용하여 자신의 작업을 돕게 할 수 없다는 것을 의미한다.”라고 말합니다.

위 코드에 경우 forEach() 메서드의 콜백 함수로 일반 함수가 사용되어 엄격 모드 기준으로 this는 undefined를 가리키고 undefined.title이 되어 에러가 발생합니다.

new 연산자와 화살표 함수

화살표 함수는 this가 없기 때문에 화살표 함수는 생성자 함수로 사용할 수 없습니다. 화살표 함수는 new와 함게 호출할 수 없습니다.

---

addEventListener의 콜백 함수의 this

---

addEventListener()의 콜백 함수의 this는 addEventListenr() 함수에 바인딩된 요소를 가리킵니다. 여기서 콜백 함수를 화살표 함수로 정의할 경우 this는 window를 가리키고 엄격 모드에서는 undefined를 가리킵니다.

const button = document.getElementById('myButton');
// 콜백 함수로 일반 함수
button.addEventListener('click', function() {
  console.log(this === button); // true
  this.innerHTML = 'Clicked button';
});

const button = document.getElementById('myButton');
// 콜백 함수로 화살표 함수
button.addEventListener('click', () => {
  console.log(this === window); // true
  this.innerHTML = 'Clicked button';
});

---

apply, call, bind

---

apply(), call(), bind()는 함수 객체의 프로토타입 객체가 가지는 기본 메서드입니다.

func.apply(thisArg, [argsArray]);
func.call(thisArg, arg1, arg2, ...);
func.bind(thisArg, arg1, arg2, ...);

thisArg 인자는 함수 내부의 this에 바인딩할 객체를 의미합니다. argsArray, arg1, arg2 등의 인자는 함수에서 사용할 인자를 의미하며 전달할 인자가 없을 경우 생략 가능하고, 메서드 별로 인자를 넘기는 방식이 조금씩 다릅니다.

이 메서드들을 호출하는 주체는 함수이며 본질적인 기능은 함수를 호출하는 것입니다. 다만 bind() 메서드의 경우 함수를 호출하지 않고 반환만 합니다.

const person = {
  name: "name",
  speak: function (age, gender) {
    console.log(this.name, age, gender);
  }
};

const person1 = {
  name: "Tomas"
};
const person2 = {
  name: "James"
};
const person3 = {
  name: "Sam"
};

person.speak.apply(person1, [30, "male"]);
person.speak.call(person2, 25, "female");
const info = person.speak.bind(person3, 15, 'male');
info();
// person.speak.bind(person3, 15, 'male')();

bind() 함수의 경우 함수를 호출하지 않고 반환하기 때문에 변수에 담아 호출하게 됩니다. 이러한 경우 코드가 길어지므로 반환된 함수를 변수에 담지않고 바로 실행하는 방법 또한 있습니다.

화살표 함수는 this가 없어서 어떤 것도 바인딩시키지 않습니다. 그래서 apply(), call(), bind() 메서드를 사용하여 this를 변경시킬 수 없습니다.