JS - "=>" 화살표 함수(Arrow Function) 표현식

 

화살표 함수(Arrow Function)는 ES6에서 도입된 새로운 함수 정의 방식으로, 기존의 함수 표현식을 간결하게 작성할 수 있는 문법이다.
 
화살표 함수 표현식에 대해서 알아보자 
 
 

1. 간결함

 

화살표 함수 표현식

const sum = (a, b) => a + b;
console.log(sum(1, 5))

위 코드를 보면 sum은 두 매개변수를 받아 그 합을 반환하는 함수이다.
 
=> (화살표) 를 사용하여 함수를 정의하고, {} (중괄호)와 return 키워드를 생략할 수 있으며, 표현식이 한 줄인 경우 결과가 자동으로 반환된다.
 
기존 함수 표현식

const sum = function(a, b) {
    return a + b;
};

console.log(sum(1, 5))

확실히 화살표 함수를 사용하게 되면 간결해지고 가독성이 좋아진다.
 
 
 

2. this 바인딩

 

화살표 함수 표현식

function PersonArrow(name) {
    this.name = name;
    setTimeout(() => {
        console.log(this.name);
    }, 1000);
}
const name = new PersonArrow("hanker");

화살표 함수는 자신의 상위 스코프에서 this를 가져온다. 즉, 화살표 함수는 this를 내부적으로 바인딩하지 않기 때문에 콜백 함수나 클래스 메서드 등에서 this문제를 해결하는데 유리하다.
 
 
기존 함수 표현식

function Person(name) {
    this.name = name;
    setTimeout(function() {
        console.log(this.name);
    }, 1000);
}

const person1 = new Person('hanker');

기존의 함수 표현식은 실행되는 문맥에 따라 this가 동적으로 바인딩된다. 이 말은 메서드로 호출되거나, 일반 함수로 호출 될 경우에 this의 값이 다를 수 있다.
 
 
 
 

3. arguments 객체

 
화살표 함수 표현식

const arrowFunc = (...args) => {
    console.log(args);
};

arrowFunc(1, 2, 3);

화살표 함수에는 arguments 객체가 존재하지 않으며, 필요한 경우 스프레드 연산자 (...args)를 사용해야 한다.
 
 
기존 함수 표현식

function traditionalFunc() {
    console.log(arguments);
}

traditionalFunc(1, 2, 3);

기존 함수 표현식은 함수 호출 시 전달된 인수를 담은 arguments 객체를 사용할 수 있다.
 
 
 
 
 

4. 주의사항

 
1. 객체 리터럴 반환: 객체를 반환할 때는 객체 리터럴을 괄호로 감싸야 한다.

const createObject = () => ({ key: 'value' });

중괄호를 그대로 사용하면 코드 블록으로 해석되기 때문에 에러가 발생할 수 있다
 
2. 생성자 함수로 사용할 수 없음: 화살표 함수는 생성자 함수로 사용할 수 없다.
 
 
 
 

끝으로..

 
화살표 함수는 코드의 간결성을 높이고, 특히 콜백 함수에서 this 문제를 해결하는 데 유용하다.
하지만, arguments 객체가 필요하거나 생성자 함수로 사용해야 할 때는 전통적인 함수 표현식을 사용하는 것이 더 적합하다