ES6에서의 화살표 함수

ES6에서 화살표 함수를 언제, 왜 쓸까?

• 화살표 함수(Arrow Function)를 언제, 왜 쓰는지를 알아보자.

---

함수를 만드는 다양한 방법

• 함수 선언식

  function func() {...}
  

• 함수 표현식

  let func = function() {...}          // 익명 함수
  let func2 = function result() {...}  // 선언적 함수
  

• 화살표 함수

  const func = () => {...}
  

이런 방식 중, 화살표 함수를 사용하는 이유가 뭘까?

---

1. 함수 본연의 기능을 아주 잘 표현해서

• 우리가 함수를 사용하는 이유는 보통 다음과 같다.
  1. 여러가지 기능을 하는 코드를 묶고 싶을 때
  2. 입출력 기능을 만들 때

=> 이러한 기능을 아주 직관적으로 잘 표현하는 것이 화살표 함수.

let 세배로 = (x) => {
    return x * 3;
};

console.log(세배로(3));

---

2. 소괄호 생략 가능

• 파라미터가 하나면 소괄호 생략이 가능.

let 세배로 = x => {     // (x) => x
    return x * 3;
};

console.log(세배로(3));

---

3. 중괄호 생략 가능

• return이 한 줄만 있으면, 중괄호와 return을 생략 가능.

let 세배로 = (x) => x * 3; // {return} 제거

console.log(세배로(3));

---

4. 외부에 있던 this를 그대로 사용

• 화살표 함수는 어디에서나 this값을 변화시키지 않는다.

• 일반적인 함수 실행

    let 객체 = {
        함수: function () {
            console.log(this);
        },
    };
  
    객체.함수();
  

  해당 함수를 가지고 있는 객체가 출력됨

• 화살표 함수 실행

    let 객체 = {
        함수: () => {
            console.log(this);
        },
    };
  
    객체.함수();
  

  외부에 있던 this인 window를 출력.

• 화살표 함수의 특징은 일반 function와 용도가 다르므로, 염두에 두고 사용할 것!

---

✨ 출처

코딩애플, Arrow function은 function을 대체하는 신문법이 아님

---