[Javascript] 화살표 함수 사용법

기존에 자바스크립트로 작성한 코드에서 ES6표준을 따르는 코드로 바꾸고 싶어서 ES6에 대해서 찾아보다가 화살표 함수가 뭔지 알게됐다.  이번 글에서는 화살표 함수에 대해서 정리해보려고 한다. 

JavaScript의 화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 간결한 문법의 함수 표현식이다. 화살표 함수는 기존 함수 선언보다 코드가 짧아지고, this 키워드의 동작이 달라지는 등의 특징이 있다. 다음은 화살표 함수에 대한 설명과 예제이다.

 

 

문법

 

화살표 함수는 다음과 같은 문법으로 작성된다.

(param1, param2, ..., paramN) => { statements }

 

 

매개변수가 하나뿐이라면 괄호를 생략할 수 있다. 

  

param => { statements }

 

 

반환 값이 있는 단일 표현식의 경우 중괄호와 return 키워드를 생략할 수 있다.

 

(param1, param2) => expression

 

 

예제

1. 기본 사용법

// 전통적인 함수 표현식 
let add = function(x, y) {
	return x + y; 
}; 
    
// 화살표 함수 표현식 
let add = (x, y) => {
	return x + y; 
}; 
    
// 표현식으로 반환하는 경우 중괄호와 return 생략 
let add = (x, y) => x + y; 

console.log(add(2, 3)); // 5

 

2. 매개변수가 하나일 때 괄호 생략

let square = x => x * x;
console.log(square(4)); // 16

 

3. 매개변수가 없을 때

var greet = () => 'Hello';
console.log(greet()); // 'Hello'

 

특징

1. this 바인딩

화살표 함수는 자신만의 this 바인딩을 가지지 않는다. 대신, 화살표 함수는 상위 스코프의 this를 캡처한다. 이는 특히 콜백 함수 내부에서 유용하다.

 

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++; // this는 Person 객체를 참조합니다
        console.log(this.age);
    }, 1000);
}

var person = new Person();

 

위 예제에서 setInterval 내부의 화살표 함수는 Person 객체의 this를 캡처하여 사용한다.
전통적인 함수 표현식을 사용했다면 this가 window 객체를 참조하게 된다.

 

2. arguments 객체 없음

화살표 함수는 arguments 객체를 가지지 않는다.

대신 나머지 매개변수(rest parameters)를 사용해야 한다.

var sum = (...args) => args.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // 10

 

3. 생성자 함수로 사용 불가

 

화살표 함수는 생성자 함수로 사용할 수 없다. new 키워드와 함께 사용할 수 없다.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

 

 

화살표 함수는 간결한 문법과 this 바인딩의 특수성 덕분에 특히 콜백 함수나 간단한 함수 표현식에 유용하게 사용된다. 그러나 생성자 함수나 arguments 객체가 필요한 경우 전통적인 함수 표현식을 사용해야 한다.