화살표함수 사용법에 관하여 알아보도록 하겠습니다.

🤔 화살표 함수란?

function 키워드 대신 화살표(=>)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의하는 방식을 의미한다.

const multiply = (x,y) => x*y;
multiply(2,3);

✅ 매개변수 선언

✨ 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언한다.

const arrow = (x,y) => {...};

✨ 매개변수가 한 개인 경우 소괄호 ()를 생략할 수 있다.

const arrow = x => {...};

✨ 매개변수가 없는 경우 소괄호 ()를 생략할 수 없다.

const arrow = () => {...};

✅ 함수 몸체 정의

✨ concise body
함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다. 함수 몸체의 내부 문이 표현식이라면 암묵적으로 반환된다.

const power = x => x ** 2;
power(2);

✨ block body

const power = x => { return x ** 2; };

⚠️ 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ()로 감싸 주어야 한다.

const create = (id, content) => ({ id, content });
create(1, 'JavaScript');

// 위 표현은 다음과 동일하다.
const create = (id, content) => { return { id, content }; };

함수 몸체가 여러 개의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {} 는 생략할 수 없다.

const sum = (a, b) => {
	const result = a + b;
    return result;
};

✏️ 화살표 함수 VS 일반 함수

1️⃣ 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다.이에 , prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

2️⃣ 중복된 매개변수 이름을 선언할 수 없다.

3️⃣ 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

3번을 부연설명 해보자

This

먼저 This 가 무엇인지 알아볼 필요가 있다.
this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

이해가 안될 수 있다.

✨생성자 함수를 정의하는 new 연산자와 함께 생성자 함수를 호출하는 과정을 먼저 살펴 보자.

function Circle(radius){
  ????.radius = radius;
}
Circle.prototype.getDiameter = function () {
  return 2 * ????.radius;
};

const circle = new Circle(5);

생성자 함수 내부에서 프로퍼티 또는 메서드를 추가하기 위해선 자신이 생성한 인스턴스를 참조 할 수 있어야한다.
하지만 생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재해야 한다.
즉 , 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이여서 인스턴스를 가리키는 식별자를 알 수 없다.
이에, 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 this 인 거다.

✨객체 리터럴의 메서드 내부에서 this를 사용하는 방식을 살펴보자.

const circle = {
  radius: 5,
  getDiameter(){
    //this는 메서드를 호출한 객체를 가리킨다.
    return 2 * this.radius;
  }
};

이를 통해 this 바인딩은 함수 호출 방식에 의해 동적으로 결정되는 것을 알 수 있다.

일반 함수로서 호출되는 모든 함수 내부의 this는 전역 객체를 가리킨다.

이쯤 에서 this 정의를 마치고 화살표함수의 this가 일반 함수의 this와 어떻게 다르게 동작하는지 알아보자.

❗️일반 함수로서 호출되는 콜백 함수 내부의 this 문제

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }
  
  add (arr) {
    return arr.map(function (item) {
      return this.prefix + item;
    });
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

우리는 이 코드가 [-wevkit-trasition' , '-webkit-user-select']를 반환 할 것이라 예상하지만 TypeError가 발생된다. 그 이유는 일반 함수로서 호출되는 Array.prototype.map메서드의 콜백 함수의 this는 undefined이 부여된다. 이에, 콜백 함수의 this 와 외부 함수의 this 가 서로 다른 값을 가리키고 있어 TypeError가 발생된다.

❗️ 이는 우리가 화살표 함수를 사용하면 해결 할 수 있다.

class Prefixer{
  constructor(prefix) {
    this.prefix = prefix;
  }
  add(arr{
       return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this 를 참조하면 상위 스코프의 this를 그대로 참조한다. 이는 lexical this 라 한다.