화살표 함수

옛날 함수표현의 간편한 표현식이다. 아래처럼 계속 생략해서 사용이 가능하다.

function add1(x,y) {
    return x+y;
}

const add2 = (x,y) => {
    return x + y;
}

const add3 = (x,y) => x + y;

const add4 = (x,y) => (x + y);     // 헷갈리지않게 리턴값을 괄호로 묶어주기

 

주의할 점

const obj = (x,y) => {
    {x, y}    // {x:x , y:y} 인 경우 생략할 수 있음 (객체 리터럴)
}

const obj = (x,y) => {x,y}    // 화살표함수에 따라 생략할 수 있지만 자바스크립트는 이게 뭔지 모름!

객체를 반환하는 경우에는 소괄호를 필수로 적어줘야한다.

자바스크립트가 객체인지 함수의 바디를 의미하는건지 인식을 못하기 때문이다.

const obj = (x,y) => {
    return {x,y};    
}

const obj = (x,y) => ({x, y})    // 바로 객체를 리턴하는 경우에는 소괄호를 필수로 적기

• 옛날함수는 자기만의 this를 갖기 때문에 함수 내부에서 함수 호출시 두 함수의 this는 서로 다르다.
• 화살표 함수는 자신을 포함하는 함수(부모함수)의 this를 물려받기 때문에 같은 this를 가진다.

 

 

this를 써야하면 "꼭" 기본 함수로 선언하고, 그게 아니라면 화살표함수를 써도 된다.