ES6 - Arrow Function

Arrow Function 🔜

Arrow Function, 화살표 함수는 ES6에서 발표된 형태의 함수입니다. 이름 그대로 화살표 => 모양을 사용한 함수로, 우리가 평소에 function을 이용해 함수를 사용했던 것에 비해 짧고 깔끔한 코드를 작성할 수 있는 것이 특징입니다. 그럼 ES5에서 썼던 함수 형태와 ES6의 화살표 함수 형태를 비교해볼까요?

---

// ES5
function helpMe() {
  console.log('Call the Umbrella Academy!');
}

// ES6+
const helpMe = () => console.log('Call the Umbrella Academy!');

---

😉 함수 helpMe를 만드는데 한 줄로 끝내버렸어요! 이렇게 화살표 함수는 => 연산자를 활용하면 됩니다. 이제 화살표 함수의 자세한 문법에 대해 이야기해보죠.

문법

function을 이용한 함수를 화살표 함수 형태로 만들기는 어렵지 않습니다.

// ES5
function villianHere(name, from) {
  console.log(name + ' from ' + from + ' is here!'); 
}

이렇게 인자 name과 from을 받아오는 함수 villianHere를 화살표 함수로 바꿔볼까요?

1. function 키워드를 없앱니다
villianHere(name, from) {
  console.log(name + ' from ' + from + ' is here!'); 
}

2. 함수 이름으로 변수를 선언하고 = 의 우변에 인자들을 넣어줍니다
const villianHere = (name, from) {
  console.log(name + ' from ' + from + ' is here!'); 
}

3. 인자들과 함수의 몸통 사이에 => 연산자를 넣어줍니다
const villianHere = (name, from) => {
  console.log(name + ' from ' + from + ' is here!'); 
}

4. 이렇게 호출하면 되죠!
villianHere('cha-cha', 'commission');

짠! 화살표 함수로 바꿨습니다! 이때 주의할 점이 있는데요.

1. 인자가 한 개밖에 없다면 괄호를 사용하지 않아도 되지만 인자가 없거나 2개 이상일 때는 반드시 괄호를 사용해야한다.
2. 함수의 몸통 부분에서 어떤 연산을 하지 않고 return만 수행한다면 {}를 생략할 수 있다. (implicit return)

// ex.
const whoIsBen = () => "Number 6"; // 함수를 호출하면 Number 6를 리턴합니다

만약 함수의 몸통에 {}를 사용한다면 리턴해야할 값에 반드시 return 예약어를 적어줘야합니다.

const whoIsBen = () => { "Number 6" }; // 오류 발생! 
const whoIsBen = () = { return "Number 6" }; // 👍

this와 화살표 함수

함수를 사용할 때 this는 참 유용하게 쓰입니다. 예를 들어 addEventListner 함수 안에서 this는 그 이벤트가 걸려있는 요소를 가리키게 되죠. 하지만 슬프게도 화살표 함수에서는 this를 사용할 수 없습니다. 화살표 함수에서 this를 호출하면 상위 스코프를 가리킵니다.

❓왜요?
❗️일반적으로 function을 사용한 함수는 함수를 선언할 때 this가 가리킬 객체가 동적으로 결정되지만 화살표 함수는 정적으로 결정됩니다. 그래서 언제나 상위 스코프의 this를 가리키게 되죠. 몇 가지 예시와 함께 봅시다!

1. 전역에서 선언한 함수
const callThis = () => { console.log(this) } // window

2. Object 안의 함수
const umbrella  = {
  one: 'Luther',
  two: 'Diego',
  callThis: () => {
    console.log(this);
  }
} // Umberella 객체가 나오길 바랬지만... window

3. addEventListner callback
button.addEventListner('click', () => {
  console.log(this); // button이 나오길 바랬지만... window
});

3. prototype에 할당
const umbrella  = {
  one: 'Luther',
  two: 'Diego'
};

Object.prototype.callThis = () => { console.log(this); }

Umbrella.callThis(); // umbrella가 나오길 바랬지만... window

이런 경우들에는 화살표 함수가 아닌 일반 함수를 사용해야합니다. 😞

+) 화살표 함수의 즉시실행함수

((one, two) => console.log(one + ' and ' + two))('Luther', 'Diego');

깔끔하고 아름다운 함수를 작성할 수 있는 화살표 함수는 처음에는 적응하기 조금 힘들지만 사용하면 할수록 편해질 거예요!

👋

---

참고 :
노마드 코더 ES6의 정석
https://poiemaweb.com/es6-arrow-function