[한경xToss] 🍌추가공부) Javascript 화살표 함수 장점 / arrow function 사용 이유

 

ES6 문법 이후부터 화살표 함수가 등장했다

 

궁금한 것 :

왜 JS에서 화살표 함수 사용을 권장하는걸까? 왜 ? WHY/ ??

 

---

1. 함수형 변수

 

const apple = 1000; // 변수
const add = (a, b) => a + b; // 화살표 함수
console.log(add(2, 3)); // 5

 

사용이 직관적이다.

변수와 동일하게 선언 후, 변수 이름을 호출하면 함수를 실행시킬 수 있다!

 

2. 간단한 양식

 

짧은 수식일 경우 괄호가 필요없다

 

let func = x => x * 2 ;

 

3. this를 사용하지 않는다. 🌟🌟🌟‼️

 

일반 함수 내에서는 this를 사용할 수 있으나, 화살표 함수에는 해당 문법이 적용되지 않음.

근데 이게 장점이 된다.

화살표 함수 내에서 this를 사용할 경우, 상위에 있는 그것을 불러온다.

 

(1) 일반 함수의 경우 : this가 동적으로 바뀌어 문제가 생김

        이를 해결하려면 .bind(this) 또는 self = this 같은 별도 처리가 필요함

function Person() {
  this.age = 0;

  setInterval(function () {
    this.age++; // 여기서 this는 전역 객체를 가리킴 (Node.js에서는 global, 브라우저에서는 window)
    console.log(this.age);
  }, 1000);
}
new Person(); // NaN

 

bind를 사용하여 this를 고정시키면 :

setTimeout(function () {
  this.count++;
  console.log(this.count);
}.bind(this), 1000); // this를 Counter로 고정

 

 

(2) 화살표 함수의 경우 : this의 예측 가능성 Up

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // 화살표 함수는 상위 스코프의 this를 사용
    console.log(this.age);
  }, 1000);
}
new Person(); // 1, 2, 3, ...

 

또한, 콜백 함수에서 bind 없이 잘 동작함

상위 스코프에서 this를 자동으로 가져오므로, 

복잡한 컨텍스트 전환 문제를 방지하고 코드를 간결하고 직관적으로 작성할 수 있게 해줌

---

느낀 점 :

 

다들 권장하는 것에는 그 이유가 있다~

막연하게 이렇게 생각했었는데, 실제로 그 이유를 자세히 파헤쳐보니

장점을 명확히 알 수 있어서 좋았다 ㅎ.ㅎ