함수 선언 방식과 화살표 함수의 차이

요즘은 함수 선언 방식보다는 화살표 함수를 사용하는 방식이 많이 보인다.

화살표 함수는 함수 선언 방식을 완전히 대체할 수 있는 것인지 둘은 완전 같은 역할을 한다고 볼 수 있을지 알아보자

화살표 함수

• ES6 문법에서 함수를 표현하는 새로운 방식
• 주로 함수를 파라미터로 전달할 때 유용
• 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있음
• 기존 function을 대체할 수 없는데, 그 이유는 용도가 다르기 때문
  👉 서로 가리키고 있는 this 값이 다름

먼저 함수 선언 방식을 사용했을 때 예시를 살펴보자

function BlackDog() {
	this.name = '흰둥이';
    return {
    	name: '검둥이',
        bark: function() {
        	console.log(this.name + ': 멍멍!');
        }
    }
}

const blackDog = new BlackDog();
blackDog.bark();

위 예시는 어떻게 출력될까?
👉 검둥이: 멍멍! 으로 출력된다.

화살표 함수를 사용했을 때 예시를 살펴보자

function WhiteDog() {
	this.name = '흰둥이';
    return {
    	name: '검둥이',
        bark: () => {
        	console.log(this.name + ': 멍멍!');
        }
    }
}

const whiteDog = new WhiteDog();
whiteDog.bark();

그렇다면 이 예시에서도 검둥이: 멍멍!으로 출력될까?
👉 흰둥이: 멍멍! 으로 출력된다.

함수 선언 방식을 사용했을 때와 화살표 함수를 사용했을 때 다른 결과값이 나타나는 이유는 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리키기 때문이다.