자바스크립트 - 일반 함수와 화살표 함수의 차이점

일반함수의 형태

const normal = function () {
    console.log('hello world');
}

화살표함수의 형태

const arrow = () => console.log('hello world');

일반 함수와 화살표 함수의 차이

1.형태가 다르다.

보이는 것과 같이 화살표 함수는 =>와 같은 화살표가 붙어 함수를 시작한다.
또한 화살표 함수는 return 값이 한줄로 표현이 되는 경우에는 중괄호 {} 를 제외하고 작성이 가능하다.

const returnArr = () => [1, 2, 3];
const returnObj = () => ({name: 'som'}); // 객체를 리턴할 경우에는 소괄호로 감싼다.

2.this 의 정의가 다르다.

일반(normal)함수의 경우에는 this가 함수 호출 위치에서 정의되고,
화살표(arrow) 함수의 경우에는 this가 자신이 선언된 함수 범위에서 정의된다.

const test = {
    name: 'som',
    normal: function () {
        console.log(this.name);
    },
    arrow: () => {
        console.log(this.name);
    }
};
test.normal(); // som
test.arrow(); // undefined

반대의 경우도 확인해보자

const timer = {
    name: 'som',
    timeout: function () { // 1번
        setTimeout(function () { // 2번
            console.log(this.name);
        }, 2000)
    }
}
timer.timeout(); // undefined

이 경우에는 this 가 호출된 위치가 2번의 setTimeout 에서 콜백으로 호출이 된다.
그래서 여기서 this.name 을 setTimeout 내에서 찾을 것이고,
찾지 못했기 때문에 undefined 가 출력되게 된다.

 

따라서 timer 내에서 this.name 을 호출하고 싶다면
2번 처럼 일반 함수가 아닌 화살표 함수를 사용해야 정상적으로 출력이 된다.

const timer = {
    name: 'som',
    timeout: function () { // 1번
        setTimeout(() => { // 2번
            console.log(this.name);
        }, 2000)
    }
}
timer.timeout(); // som

이부분에서는 2번이 화살표 함수로 작성되었고, 위에 나온거처럼 자신이 선언된 함수의 범위 내에서 this 가 정의되는데,
2번의 setTimeout 은 1번의 timeout 이란 일반함수가 정의된 timer 에서 this.name을 찾게 되는 것이다.