4. Arrow Function

Arrow Function

• 출처: https://www.youtube.com/watch?v=e_lU39U-5bQ [드림코딩 by 엘리]
• 함수 표현식을 간격하게 표기하는 방법
• 보다 짧아진 함수 및 바인딩하지 않은 this.
• always anonymous 항상 익명함수를 이용함

// 매개변수가 없을 경우
() => { ... }

// 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.  
x => { ... }

// 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.  
(x, y) => { ... }

// 한 줄인 경우  
x => { return x * x }  
x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호 및 return 생략 가능  
() => { return a; }

// 여러 줄인 경우  
() => {  
const x = 10;  
return x * x;  
};

예제

기본

const simplePrint = function () {
    console.log('simplePrint!');
}

 //한줄일경우 block을 생략가능하고 return 도 생략가능
const simplePrint = () => console.log('simplePrint!');

argument가 있을경우

const add = function (a, b) {
    return a + b;
}

const add = (a, b) => a + b; //한줄일경우 block을 생략가능하고 return 도 생략가능

block 내의 코드가 여러줄인경우

const simpleMultiply = (a, b) => {
    //do something more
    return a * b;
}

일반함수와 Arrow function의 this 차이

• Arrow function 의 this 는 바인딩 되지 않고 상위 함수의 this를 가져온다.

일반함수 기본

function Person() {
    this.name = 'kang';
    console.log(this); // 결과값 Person { name: 'kang' }

    // 함수의 내부함수,콜백함수에서 사용되는 this 는 window임
    setTimeout(function() {
        console.log(this); // 결과값 window 객체반환
        console.log(this.name); // 결과값 undefiend 
        //window에는 name 이라는 key 가 없기 때문
    },1000);
}

const g = new Person();

화살표 함수

• 화살표 함수의 this는 코드 바깥의 함수의 this를 사용함
• 즉 settimeout의 내의 this 가 아닌 화살표 함수를 감싸고 있는 person함수의 this를 받게 된다.

function Person() {
    this.name = 'kang';
    console.log(this); //Person { name: 'kang' }

    setTimeout(() => {
        console.log(this); // 결과값 Person { name: 'kang' }
        console.log(this.name); // 결과값 kang
    },1000);
}
const g = new Person();

일반함수에 this값을 전달하는 방법 1

function Person() {
    this.name = 'kang';
    console.log(this); //Person { name: 'kang' }

    const that = this;
    setTimeout(function() {
        console.log(that); // 결과값 Person { name: 'kang' }
        console.log(that.name); // 결과값 kang
    },1000);
}
const g = new Person();

일반함수에 this값을 전달하는 방법 2

function Person() {
    this.name = 'kang';
    console.log(this); //Person { name: 'kang' }

    setTimeout(function() {
        console.log(this); // 결과값 Person { name: 'kang' }
        console.log(this.name); // 결과값 kang
    }.bind(this),1000);
}
const g = new Person();