[JS] 화살표 함수 쓰는 방법과 사용 이유

화살표 함수는 ES6에서 도입된 간단한 함수 표현식이다.

함수 작성

function sum() {}             // 함수 선언식
const sum = function () {}    // 함수 표현식
const sum = () => {}          // 화살표 함수(함수 표현식)

 

화살표 함수

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

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

const sum = (a, b) => a + b;

 

 

화살표 함수의 특징

1. 매개변수가 하나인 경우:  소괄호 생략 가능

const a = x => {}

 

2. 매개변수가 없거나 두 개 이상인 경우: 소괄호 생략 불가

const b = () => {};
const c = (x, y) => {};

 

3. 단일 표현식 반환 시 중괄호와 리턴 키워드 생략 가능

const d = x => { return x * x }
const e = x => x * x

 

4. 객체 리터럴 반환 시 소괄호로 묶어야 함

const g = () => { return { a: 1 } }
const h = () => ({ a: 1 })
const i = () => { return [1, 2, 3] }
const j = () => [1, 2, 3]

 

화살표 함수를 쓰는 이유

화살표 함수는 함수 표현식의 일종이며, 주로 짧은 구문과 this 바인딩의 특성을 활용하기 위해 사용

메소드 내부에서 화살표 함수를 사용하면, 화살표 함수는 자신만의this를 가지지 않고, 상위 스코프의 this를 상속받기 때문에 this 관련 문제를 피하고 코드를 간결하게 작성할 수 있다

const person = {
    name: "홍길동",
    func: function() {
        console.log(this.name); // 출력: "홍길동"
        
        /* 일반 함수를 사용 */
        setTimeout(function() {
            console.log(this); // 출력: window 객체
            console.log(this.name); // error 출력되지 않음
        }, 1000);
        
        /* 일반 함수를 사용 */
        setTimeout(function() {
            console.log(this); // 출력: person 객체
            console.log(this.name); // 출력: "홍길동"
        }.bind(this), 1000); // bind() 함수로 this를 person 객체로 설정해야 하는 번거로움이 있음
    },
    arrow_func: function() {
        console.log(this.name); // 출력: "홍길동"
        
         /* 화살표 함수를 사용 */
        setTimeout(() => {
            console.log(this); // 출력: person 객체
            console.log(this.name); // 출력: "홍길동"
        }, 1000);
    } 
}

person.func();
person.arrow_func();

 

• 일반 함수: setTimeout 내에서 일반 함수를 사용하면 this는 전역 객체를 가리키며, bind를 사용해 수동으로 this를 설정해야 한다.
• 화살표 함수: setTimeout 내에서 화살표 함수를 사용하면 this는 상위 스코프의 this를 그대로 사용하므로, 간편하게 person 객체의 this를 참조할 수 있ek