arrow function

함수 선언문은 자바스크립트에서 가장 간단하게 함수를 만드는 방법 중에 하나이다

function func(a,b,c) {
    return a+b+c;
}
console.log(func(1,2,3)); // 6

더 간단하게 만드는 방법이 있다

const func = (arg1,arg2,arg3) => arg1+arg2+arg3;

console.log(func(1,2,3)); //6

화살표 함수(arrow function)라고 불리는떼 가운데 있는 화살표에서 따온 이름이다

앞에 괄호 안에는 인자를 받고 뒤에는 표현식이 온다

const func = arg => console.log(arg);

func('123'); //123

인자가 하나라면 괄호도 생략 가능

const func = () => console.log('인자가 없다면 괄호는 생략 불가능');

func(); // 인자가 없다면 괄호는 생략 불가능

인자가 없다면 괄호는 생략 불가능

 const func = (arg1,arg2) => {
    const sum = arg1 +arg2;
    return sum;
}
console.log(func(1,2));

함수가 두줄이 넘어간따면 중괄호를 써서 사용해아하며 리턴값도 명시해야한다

---

화살표 함수에는 일반 함수에 암묵적으로 존재하는 this가 존재하지 않는다

아래를 살펴보자

const obj ={
    category : 'fruit',
    list : ['apple', 'banana', 'orange'],

    printFruit(){
        this.list.forEach(function (v){
            console.log(this.category +':'+v);
        });
    }
}

obj.printFruit();

객체 obj에는 과일 카테고리에 사과 바나나 오렌지를 가지고 있다

printFruist 메소드에 카테고리와 과일 이름들을 출력하기를 바라고 작성한 함수이다

하지만 this.cattegory가 정상적으로 작동하지 않는 것을 볼 수 있는데

첫번째 this는 obj를 바라보고 있지만 console.log안에 있는 this는 forEach의 콜백함수로 작성된 익명함수 안의 this이기 때문에 window를 가르킨다

    printFruit(){
        this.list.forEach(function (v){
            console.log(this);
        });

this.category가 아닌 this만 출력해 보면

말한 것 처럼 전역 객체가 출력되는 것을 볼 수 있다

이를 해결하기 위해서는

    printFruit(){
        const that = this;
        this.list.forEach(function (v){
            console.log(that.category+':'+v);
        });
    }

이처럼 콜백 함수에서 닿는 스코프에 곳에 변수를 만들어 this를 저장해두고

변수를 this처럼 활용하면 된다

이게 자주 쓰이는 기법이지만 화살표 함수를 사용한다면?

    printFruit(){
        this.list.forEach(
            (v)=> console.log(this.category +': '+ v)
        );
    }

똑같이 콜백 함수 안에서 this를 사용했지만 다른 결과가 나온 것을 볼 수 있다

이는 화살표 함수는 내부에서 this를 만들어 윈도우 객체를 가르키지 않기 때문에 외부의 this를 가져다와서 사용하기 때문