일반 제품에는 어떤 문제가 있나요?" />

JavaScript에 대한 지식이 있고 ECMAScript 2015(ES6)에 Arrow 함수를 추가하려는 이유가 궁금하다면 혼자가 아닙니다. 언어에 대한 지식과 그 복잡함, 기이함을 쌓아가면서 나도 같은 생각을 하게 되었습니다. 이번 포스팅에서는 이 기능이 추가된 이유와 차이점, 이점, 언제 사용해야 하는지에 대해 설명하겠습니다.

차이점을 이야기해보자

화살표 함수가 도입되기 전에는 아래와 같은 전통적인 형식으로 함수를 선언해야 했습니다.

function add(x, y) {
  return x   y;
}

또는 표현식으로 선언:

const addFunction = function add(x, y) {
  return x   y;
}

화살표 기능을 도입하면 다음과 같이 작성할 수 있습니다.

const addFunction = (x,y) => x   y

간결한 구문

위의 예에서 화살표 함수를 사용하고 암시적 반환 기능을 활용하면 함수를 한 줄로 빠르게 리팩토링할 수 있다는 것을 쉽게 알 수 있습니다. 결과 코드는 더 간결하고 깔끔하며 읽기 쉬워 개발이 더 원활하고 디버깅이 더 빨라집니다.

게양

기본적으로 JavaScript 런타임은 실행 컨텍스트 생성 시 모든 함수와 변수 선언을 해당 범위의 맨 위로 끌어올립니다. 예를 들어 전역 범위 내에서 선언된 모든 함수와 변수는 나중에 호출되는 모든 함수에서 사용할 수 있습니다. 그러나 화살표 함수는 호이스팅되지 않으므로 함수가 실행되는 정확한 위치와 함수가 액세스할 수 있는 변수를 더 효과적으로 제어할 수 있습니다.

문맥

JavaScript 함수가 실행될 때마다 this 값을 포함하여 함수가 실행되는 환경에 대한 정보가 포함된 실행 컨텍스트를 생성합니다. 전통적인 함수는 자체 컨텍스트에서 실행되는 반면, 화살표 함수는 항상 이를 호출한 함수의 컨텍스트를 상속합니다.
아래 코드 사용:

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

다음과 같은 오류가 발생합니다. 정의되지 않은 'forEach' 속성을 읽을 수 없습니다. 이는 printGreetings 함수가 Person 클래스의 컨텍스트 내에 있고 해당 컨텍스트를 상속함에도 불구하고 forEach 함수가 (비록 내장 JavaScript 함수)는 this.name 속성을 포함하지 않는 자체 컨텍스트에서 실행되므로 조회 오류가 발생합니다.

그러나 화살표 함수는 자체 컨텍스트에서 실행되지 않으며 화살표 함수를 사용하여 위의 함수를 다시 작성하면...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

결과는 예상대로일 것입니다.

Good Morning, George
Hello! George
Howdy! George

요약

화살표 기능의 이점을 요약합니다. 더 짧고 간결한 코드를 허용합니다. 기능 블록 코드의 암시적 반환을 제공합니다. 실행 컨텍스트의 최상위로 끌어올리지 않고 코드에서 정확한 위치를 유지합니다. 마지막으로, 자체 컨텍스트를 실행하지 않고 이를 호출한 함수의 컨텍스트를 상속하므로 이 키워드를 보다 예측 가능하게 사용할 수 있습니다.

이 게시물이 전통적인 함수와 화살표 함수의 차이점과 이점을 더 잘 이해하고 JavaScript 여정에서 한 단계 더 나아갈 수 있도록 도움이 되기를 바랍니다.

추가 자료:
Dmitri Pavlutin 블로그 - 화살표 기능과 일반 기능의 차이점
MDN 참조 문서 - 화살표 함수