02-5 화살표 함수

화살표 함수(arrow function)는 ES6에 추가된 표현식을 사용하는 함수로, 화살표 기호 =>로 함수를 선언한다.

 

 

 

기존 자바스크립트 함수 정의 방법

 

우선, 다음은 2가지의 기존 자바스크립트 함수 정의 방법이다.

function add(first, second) {
	return first + second;
}

var add = function(first, second) {
	return first + second;
};

 

첫 번째 방식은 함수 자체에 이름이 있는 반면에,

두 번째 방식은 함수에 이름이 없이 변수에 함수를 담았다.

 

 

 

add를 그대로 입력하여 Enter를 눌러보면, 두번째 방식으로 정의된 함수 자체에는 이름이 없는 것을 확인할 수 있다. 이렇게 두 번째 방식으로 함수를 정의하면 이 함수는 이름이 없는 익명함수가 된다. 익명함수는 주로 한 번만 사용되는 기능에 사용된다. 

 

 

일반 함수는 함수가 쓰여진 위치와 관계없이 사용 가능하다. 함수의 선언부가 호이스팅되기 때문이다.

반면 익명함수는 함수의 호출 위치가 선언부보다 위에 있을 시 에러가 발생한다. 익명함수 자체의 선언부는 호이스팅되지 않고, 함수가 담긴 변수의 선언부만이 호이스팅되기 때문이다. 즉 익명함수를 사용하는 것은 한 번만 사용할 기능에 불필요한 시간동안의 호이스팅을 줄여 메모리를 아끼기 위함이다.

 

호이스팅에 대해서는 다음 글 참고. https://jm3789.tistory.com/22

 

 

 

---

 

ES6의 화살표 함수 사용 방법

화살표 함수는 방금 보았던 익명 함수와 유사하다. 다른 점은 function 키워드를 생략하고 인자 블록(())과 본문 블록({}) 사이에 =>를 표기한다는 점이다.

 

var add = (first, second) => {
    return first + second;
}

 

화살표 함수는 함수 표현식을 간결히 할 수 있다. 특히 다음과 같이 ‘계단형 함수 선언’과 같은 구조가 만들어지지 않게 해준다.

 

function addNumber(num) {
    return function (value) {
    	return num + value;
    };
}
// 화살표 함수를 사용하여 간결해진 코드
var addNumber = num => value => num + value;

 

 

 

---

 

일반 함수와 화살표 함수의 this 동작 차이

 

class MyClass {
    value = 10;
    
    constructor() {
        // addThis2: 일반 함수
        var addThis2 = function(first, second) {
            return this.value + first + second;
        }  

        // addThis3: 화살표 함수
        var addThis3 = (first, second) => this.value + first + second;

        // 결과 출력
        console.log(addThis2(1, 2));  // Uncaught TypeError: Cannot read properties of undefined (reading 'value') at addThis2
        console.log(addThis3(1, 2));  // 13
    }
}

// MyClass의 인스턴스 생성
const myInstance = new MyClass();

 

 

addThis2는 일반 함수로 선언되었다. 일반 함수에서의 this의 범위는 호출 시점의 컨텍스트에 따라 동적으로 변경된다. 위의 코드에서 addThis2는 별도의 컨텍스트 없이 호출되었고, this가 undefined로 설정되어 문제가 발생했다.

 

반면 addThis3는 화살표 함수로 선언되었다. 화살표 함수는 함수가 정의된 스코프에서 this를 가져오기 때문에, 어떤 방식으로 호출되든 상관없이 항상 클래스의 인스턴스인 myInstance를 가리키는 this를 유지한다. 그래서 올바른 결과인 myInstance.value + first + second가 되어 13을 리턴한다.

 

이를 통해 화살표 함수와 일반 함수의 this 동작 차이를 확인할 수 있다.

 

 

 

이러한 오류를 피하기 위해 일반 함수에서는 bind()함수로 this를 고정하는 방법을 사용한다.

class MyClass {
    value = 10;
    constructor() {
    	// addThis2: 일반 함수.
        var addThis2 = function(first, second) {
        	return this.value + first + second;
        }.bind(this);  // bind()로 this 범위 고정!
        
        // addThis3: 화살표 함수
        var addThis3 = (first, second) => this.value + first + second;
        
        // 결과 출력
        console.log(addThis2(1, 2));  // 13
        console.log(addThis3(1, 2));  // 13
    }
}

// MyClass의 인스턴스 생성
const myInstance = new MyClass();

 

이렇게 하면 addThis2 함수와 addThis3 함수가 똑같이 13을 리턴한다.