화살표 함수 (Arrow function)와 this

 

// 기존의 함수 정의 방식
function add(x, y) {
  return x + y;
}

// 화살표 함수 정의 방식
const add = (x, y) => x + y;

화살표함수는 함수 표현에 의해 선언이 된다.

 

 

함수 선언식과 함수 표현식 중에 무엇을 써야 할까요? 사실 무엇을 쓰던지 상관 없습니다. 자유성이 필요하면 함수 선언식을, 코드의 엄격함이 필요하면 함수 표현식을 사용하시면 됩니다.

 

 

일반함수와 화살표 함수 this 차이점

화살표 함수는 간단하게 함수를 작성할 수 있고, 코드량을 줄일 수 있다. 또한 this 키워드가 함수를 정의할 때의

스코프를 가리키기 때문에, this 키워드가 가리키는 객체를 명확하게 알 수 있다.

              

 ex) 일반 함수에서의 this

const person = {
  name: 'John',
  sayName: function() {
    console.log(this.name);
  }
}

person.sayName(); // John

위의 예시에서 sayName() 메소드 내부에서 this 키워드는 person 객체를 가리킵니다.

 

하지만 bind, call, apply 메소드 사용하면 this의 값을 수동으로 바꿀수 있다.

 

 

 

 

ex) 화살표 함수에서의 this

const person = {
  name: 'John',
  sayName: () => {
    console.log(this.name);
  }
}

person.sayName(); // undefined

화살표 함수는 함수를 정의할 때의 스코프를 가리키기 때문에, sayName 함수 내부에서 this 키워드는 person 객체를 가리키지 않습니다.

화살표 함수 스코프 내에서의 this.name은 undefined 이다.

 

 

 

 

 

화살표 함수의 장단점

 

---

장점

 

• 간결한 코드 작성

화살표 함수는 함수를 정의하는 데 있어서 간결하게 작성할 수 있다. 특히, 함수의 인자가 하나인 경우에는 인자의 괄호를 생략할 수 있어서 코드를 더욱 간결하게 만들 수 있다. return에도 한줄이 들어간다면 생략이 가능하다.

 

• 명시적인 this 바인딩

일반 함수에서는 함수를 호출하는 방법에 따라 this가 동적으로 바인딩된다. 하지만 화살표 함수에서는 this가 상위 스코프에서 물려받아 명시적으로 바인딩되기 때문에, 함수 호출 시 this가 원하는 객체를 가리키게 된다.

 

• 블록 스코프 변수 사용

화살표 함수는 함수 내부에서 블록 스코프 변수를 사용할 수 있다. 이는 일반 함수에서는 var 키워드를 사용해야 하는 변수 선언 방식과는 달리 let과 const 키워드를 사용할 수 있기 때문에, 변수 관리가 더욱 편리해진다.

 

• 메서드 바인딩

화살표 함수는 일반 함수와 달리 this 바인딩이 유연하지 않기 때문에, 객체의 메서드로 사용할 때 this를 일관되게 바인딩할 수 있다. 이로 인해 객체의 메서드로 사용할 때 this 관련 문제를 예방할 수 있다.

 

 

---

단점

 

• 생성자로 사용할수가 없다

화살표 함수는 생성자로 사용될 수 없다. 따라서, new 키워드와 함께 사용되면 에러가 발생하거나 예상치 못한 동작을 하게 된다.

 

• 가독성이 떨어질 수 있다.

화살표 함수는 간결하게 작성할 수 있는 장점이 있지만, 코드가 복잡해지면 가독성이 떨어질 수 있다. 따라서, 코드가 복잡한 경우에는 일반 함수를 사용하는 것이 좋다.