ES2015 - 화살표 함수 (Arrow Function)

화살표 함수 (Arrow Function)

함수 정의를 위한 새로운 표기법인 화살표 함수 (Arrow Function)은 ES2015에서 도입이 되었습니다.

// 여기에서 x + y 는 ** 바로 반환됩니다. **
const add = (x, y) => x + y;

// 바로 반환시키지 않고 function 키워드를 통한 함수 정의처럼 여러 구문을 사용하려면 curly barces({...}) 로 둘러싸주어야 합니다,
// ‘=>’ 다음 부분을 중괄호로 둘러싸면, 명시적으로 ‘return’ 하지 않는 한 아무것도 반환되지 않습니다.
const add = (x, y) => {
    const result = x + y;
    return result;
}

// 매개변수가 하나밖에 없다면, 매개변수 부분의 괄호를 쓰지 않아도 무방합니다.
const negate = x => !x;

화살표 함수는 표기법이 간단하기 때문에 익명 함수를 다른 함수의 인수로 넘길 때 주로 사용됩니다.

[1, 2, 3, 4, 5].filter(x => x % 2 === 0);

일반적인 함수와 화살표 함수는 표기법에서만 다른 것이 아니고, 몇 가지 미묘한 차이점이 있습니다.

이에 대해서는 아래에서 자세히 다룹니다.

 

 

함수 · JavaScript로 만나는 세상

 

---

 

 

화살표 함수(Arrow Function) 자세히 알아보기

화살표 함수(Arrow function)는 ES2015에서 도입된 새로운 유형의 함수입니다.

화살표 함수는 (매개변수 목록) => {함수 내용}과 같은 문법을 통해 정의할 수 있습니다.

const add = (x, y) => {
    return x + y;
}

const negate = (x) => {
    return !x;
}

다만, 특정 조건을 만족하는 화살표 함수는 조금 더 간결한 문법으로 정의할 수도 있습니다.

• 만약 화살표 함수의 매개변수가 하나라면, 괄호를 생략할 수 있습니다.
• 만약 화살표 함수의 내부가 하나의 구문으로 이루어졌다면, 중괄호를 생략할 수 있습니다. 이 때, 이 구문의 결과값이 곧 함수의 반환값이 됩니다.

이 성질을 이용해 위 코드를 더 짧게 작성할 수 있습니다.

const add = (x, y) => x + y;
const negate = x => !x;

function 구문으로 정의되는 함수와 비교했을 때, 화살표 함수는 문법 측면에서만 다른 것이 아니라 특별한 성질을 갖고 있습니다.

• 화살표 함수는 생성자로 사용될 수 없습니다. 따라서 prototype 속성을 갖고 있지 않습니다. 그리고 스스로의 new.target을 가지지 않습니다.
• 화살표 함수는 스스로의 this, arguments, super를 가지지 않습니다.
• 화살표 함수 내부에서 yield 키워드를 사용할 수 없습니다. 즉, 제너레이터로 사용될 수 없습니다.

여기서 스스로의 this를 가지지 않는다는 말은 함수 내부에서 this를 사용할 수 없다는 말이 아닙니다. 화살표 함수 내부에서 this를 사용하면, 그 this는 함수가 정의된 스코프에 존재하는 this를 가리킵니다. 이는 new.target, arguments, super 모두 마찬가지 입니다.

 

function Person(name) {
    this.name = name;
    this.getName = () => {
        // 여기에서 사용된 `this`는 '함수가 정의된 스코프', 즉 'Person 함수 스코프'에 존재하는 `this`를 가리키게 됩니다.
        return this.name;
    }
}

const mary = new Person('mary');
mary.getName(); // 'mary'

이런 성질 떄문에, 화살표 함수 내부에 있는 this는 엄격 모드의 영향을 받지 않습니다.

 

// 주의!
// 화살표 함수는 생성자로 사용될 수 없지만,
// 함수의 이름을 대문자로 시작하도록 했습니다.
const Person = (name) => {
    this.name = name;
}

Person('mary');
console.log(window.name); // mary

화살표 함수를 통해 this를 다룰 때 주의해야 할 점에 대해서 조금 더 알아보겠습니다.

화살표 함수는 스스로의 this를 갖지 않는다고 했습니다. 이 때문에,
화살표 함수에 대해 bind, call, apply 메소드를 호출해도 아무런 효과가 없습니다.

 

function Person(name) {
    this.name = name;
    this.getName = () => {
        // 여기에서 사용된 `this`는 `함수가 정의된 스코프`,
        // 즉 'Person 함수 스코프'에 존재하는 `this`를 가리키게 됩니다.
        return this.name;
    }
}

const mary = new Person('mary');

// `this`를 바꿔보려고 해도, 아무런 효과가 없습니다.
mary.getName.call({name: 'john'}); // 'mary'

그리고, 화살표 함수 내부에서 this를 사용하면 함수가 정의된 스코프에 있는 this 를 가르킨다고 했습니다.
즉, 화살표 함수 내부의 this는 화살표 함수가 정의된 문맥에 의해 결정됩니다.
function 구문으로 정의된 함수에 쓰이는 this가 어떻게 호출되는지에 의해 결정되는 것과는 다른 동작 방식을 보입니다.

 

const mary = {
    name: 'mary',
    getName: () => {
        return this.name;
    }
};

// 위의 화살표 함수는 전역 스코프에서 정의되었기 때문에, `this`는 전역 객체를 가리킵니다.
// `mary`의 메소드로 사용된다고 해도, 이 사실이 변하지 않습니다.
// 브라우저 환경의 전역 객체인 `window`는 `name`이라는 속성에 빈 문자열을 갖고 있기 때문에, 이 값이 대신 반환됩니다.
mary.getName(); // ''

이처럼, 객체의 속성 값에 메소드를 직접 정의할 때에는 화살표 함수를 사용해서는 안됩니다.

그러면 어떨때 화살표 함수를 사용하는게 좋을까요?

화살표 함수의 편리함은 함수를 다른 함수의 인수로 넘겨야 할 때 발휘됩니다.
함수를 받아서 호출하는 쪽에서 어떻게 호출하든, this 때문에 문제가 생길 일이 없습니다.
화살표 함수의 this는 '어떻게 정의되었는지'에 따라 결정되기 때문이죠 !

 

아래 코드를 실행해보시고, getName 메소드를 일반적인 함수 (function () {...)로 바꾸어서 결과가 어떻게 나오는지 관찰해보세요.

 

function Person(name) {
    this.name = name;
    this.getName = () => {
        return this.name;
    }
}

const mary = new Person('mary');

function printResult(func) {
    console.log(func());
}

// 화살표 함수로 정의된 메소드는 다른 함수의 인수로 넘겨도 아무런 문제가 없습니다!
printResult(mary.getName);

 

정리

function 구문으로 생성되는 함수가 단순한 함수 이외에 생성자나 제너레이터 등의 여러 기능까지 떠맡고 있는 반면에,
화살표 함수는 오직 함수 혹은 메소드로 사용되도록 만들어졌습니다.
그리고 어떻게 호출되더라도 this가 변하지 않고 문법이 간결하기 떄문에,
함수를 값으로 다루어야 하는 경우 (특히 함수를 다른 함수의 인수로 넘겨야 하는 경우) 에는 화살표 함수가 일반 함수 보다 편리한 경우가 많습니다.

 

 

함수 더 알아보기 · JavaScript로 만나는 세상