화살표 함수와 함수의 차이

화살표함수는 단순히 함수를 간결하게 쓰기 위해 사용되지 않는다.

지금까지 화살표함수에 대해 자세히 모르고 사용했었는데 이번 기회에 조금 더 알아보자.

 

화살표 함수와 함수의 가장 큰 차이는 this바인딩의 차이

일반 함수의 경우 함수의 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다. 

이 말을 이해하려면 this에 대해 먼저 배우고 돌아와야 한다.

 

this

클로저에 대해 공부할때 실행컨텍스트 내부를 보면서 실행컨텍스트가 생성되면 this를 바인딩하는 것도 배웠었다. 

this바인딩이란 this가 어떤 특정 객체에 연결되는 것을 말한다. 

근데 이 this가 일반함수, 메소드, 생성자 함수, call, apply 등을 통한 호출 방식에 따라 동적으로 결정된다.(매번 다르다)

this는 기본적으로 그 함수가 소속된 객체를 가리킨다.

이 점을 기본으로 생각하면 외울 필요가 없다.

 

1. 전역의 일반 함수의 this는 window객체를 가리킨다. (함수가 소속된 객체를 가리킨다.)

왜냐하면  함수가 전역에 소속되어 있는 것과 마찬가지.

console.log(this === window); // true;

a = 30;
console.log(window.a); // 30

function x() {
  return this;
}

x() === window; // true

 

2. 메서드 내부의 this는 메서드를 호출한 객체를 가리킨다(함수가 소속된 객체를 가리킨다.)

let ryan = {
  firstName: "Ryan",
  lastName: "Kim",
  driveCar() {
    console.log(`${this.firstName} drives a car.`)
  }
}

ryan.driveCar(); // 'Ryan drives a car.'

driveCar라는 메소드 내부의 this는 ryan객체와 바인딩되었다.

 

3. 생성자 함수 내부의 this는 생성자 함수로 생성한 객체(인스턴스)와 바인딩된다. 

function person() {
  this.firstName = "Ryan",
  this.lastName = "Kim",
    this.start = function() {
console.log(`${this.firstName} drives a car.`)};
};

let person1 = new person();
console.log(person1); 
// person { firstName: 'Ryan', lastName: 'Kim', start: ƒ (), __proto__: person { constructor: ƒ person() } }

 

4. call, apply, bind 메소드를 사용하여 호출 시 첫 번째 인수로 전달하는 객체와 바인딩된다.

자바스크립트 함수도 객체이므로 메소드를 가진다.

function logName(a, b, c) {
  console.log(this.name);
  console.log(this.nationality);
  console.log(a + b + c);
}

const person = {
  name: 'Ryan',
  nationality: 'South Korea'
}

logName.call(person, 1, 2, 3 );
// 'Ryan'
// 'South Korea'
// 6

 

this가 기본적으로 그 함수가 소속된 객체를 가리킨다는 것을 이해하면 위 경우를 이해하는데 그다지 어렵지 않다.

위 예제들 처럼 함수 호출 방식에 따라 this가 결정되므로 동적으로 결정된다고 한다. 

 

근데 문제가 발생.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

객체 내부에서 메소드를 만들고 그 메소드 안에 콜백 함수에서 this를 사용했다.

this는 함수가 소속된 객체를 가리킨다고 하였으니 group을 가리켜야 할 것 같지만 에러가 뜬다.

함수 안의 함수의 this는 일반함수든, 메서드든, 콜백이든 상관없이 항상 전역 객체와 바인딩된다.

그래서 메소드가 자신의 내부 함수를 이용해서 자신의 작업을 도울 수 없게 한다.

위 예제에서 내부 함수의 this가 window객체를 가리키는데 지금 전역스코프에는 title이라는 변수가 없으므로

title을 찾을 수 없다는 에러가 뜬다.

이것은 자바스크립트 설계상의 오류라고 한다.

 

만약 내부함수의 this가 외부 함수의 객체를 가리킬 수 있다면 더 유용하게 사용할 수 있다.

그 역할을 화살표 함수가 한다.

화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 

내부 함수를 화살표 함수로 만들어주면 내부의 this가 외부 함수 스코프의 this를 가리킨다.

아래 예를 보면 showList메서드의 this를 가리킨다는 뜻이니까, 메서드가 소속된 group객체가 된다.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

정리

화살표 함수와 함수는 this를 바인딩의 차이가 있다. 

왜냐하면 화살표 함수의 this는 언제나 상위 스코프의 this를 가리키기 때문이다.

그래서 new와 함께 생성자 함수로 사용될 수 없다. 메서드로 사용될 수도 없다.

addEventListener의 콜백 함수로 사용되면 this가 그 window객체를 가리킨다. 

addEventListener의 콜백함수로 일반 함수를 사용하면

리스너에 바인딩된 요소(currentTarget)를 가리키므로 더 유용하게 사용할 수 있다.

 

단, 내부 함수로 사용되는 경우 외부 함수가 호출되는 객체에 접근할 수 있는 특징이 있다.

 

 

 

참고자료

https://ko.javascript.info/arrow-functions#ref-848

화살표 함수 다시 살펴보기

https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9

[JavaScript] 화살표 함수와 this 바인딩

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

https://opentutorials.org/course/743/6571

this - 생활코딩