Arrow Function

🔜 Arrow Function

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

// ES5
function helpMe() {
    console.log('Obi-Wan Kenobi');
}
// or
var helpMe = function() {
    console.log('Obi-Wan Kenobi');
}

// ES6
const helpMe = () => {
    console.log('Obi-Wan Kenobi');
}

화살표함수는 이렇게 변수에 ()와 =>를 이용해 함수를 저장한다.

문법

function 키워드를 이용해 생성한 함수를 화살표 함수로 바꾸어보면

// ES5
function helpMe(from) {
    console.log('Obi-Wan Kenobi');
    console.log(`message from ${from}`);
}

// 화살표 함수로 바꾸기

1. function 키워드를 없앤다
helpMe(from) {
    console.log('Obi-Wan Kenobi');
    console.log(`message from ${from}`);
}

2. 함수 이름으로 변수를 선언하고 = 의 우변에 함수의 매개변수들을 괄호로 묶는 것과 함수 몸통을 적는다
const helpMe = (from) {
    console.log('Obi-Wan Kenobi');
    console.log(`message from ${from}`);
}

3. 매개변수들과 함수 몸통 사이에 => 연산자를 넣어준다
const helpMe = (from) => {
    console.log('Obi-Wan Kenobi');
    console.log(`message from ${from}`);
}

4. 호출!
helpMe('Princess Leia');

이떄 주의할 점은

1. 인자가 한 개밖에 없다면 괄호를 생략해도 된다. 하지만 인자가 없거나 2개 이상일 때는 반드시 괄호를 사용한다.
2. 함수의 몸통 부분에서 연산 처리를 하는 문장 없이 return만 수행 한다면 감싸는 {} 를 생략할 수 있다. (implicit return)

// ex.
const whoAreU = () => "I'm your father."; // 함수를 호출하면 I'm your father.를 리턴합니다

만약 {}를 생략하지 않고 사용한다면 리턴할 값에 반드시 return 명령어를 적어줘야한다.

const whoAreU = () => { "I'm your father." }; // 🚨 ERROR 
const whoAreU = () => { return "I'm your father." }; // 👌

🌟 this와 화살표 함수

함수를 사용할 때 this는 참 유용하게 쓰인다. 예를 들어 addEventListner 함수 안에서 this는 그 이벤트가 걸려있는 요소를 가리키게 된다. 하지만 슬프게도 화살표 함수에서는 this를 사용할 수 없다. 만약 화살표 함수에서 this를 호출하면 해당 객체가 아닌 그 객체의 상위 스코프를 가리킨다.

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

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

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

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

3. prototype에 할당
function jedi(name) {
    this.name = name;
}
jedi.prototype.callThis = () => { console.log(this); }

let rey = new jedi('Rey');
rey.callThis(); // jedi가 나오길 바랬지만... window

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

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

((from) => console.log(`message from ${from}`))('Princess Leia');