ES6 JavaScript를 사용하면 스프레드 연산자, 객체 소멸, 새로운 변수 유형 등 많은 업데이트가 언어로 제공됩니다. 

그 놀라운 기능들 위에는 화살표 기능이 새롭고 간결한 방식으로 작성되었습니다. 

이 기사에서는 화살표 함수의 기본 사항을 살펴보고 그 이점에 대해 설명합니다.

화살표 함수를 사용하면 단 한 줄에서 읽기 쉽고 간결한 함수를 정의 할 수 있습니다! 

ES5 Functions 

먼저 ES5 JavaScript로 함수를 정의하는 방법부터 살펴 보겠습니다. 함수를 정의하려면 function 키워드가 필요합니다. 예를 들어 숫자에 2를 곱하는 함수를 정의하고자 한다면 다음과 같이 됩니다.

function multiplyByTwo(num){
    return num * 2;
}

또한 함수를 정의하고 원하는 경우 변수에 할당 할 수 있습니다.

const multiplyByTwo = function(num){
    return num * 2;
}

어떤 방법을 사용 하든지 상관없이 키워드 기능이 포함되어야 합니다.

첫 번째 ES6 화살표 함수 

화살표 함수를 만들려면 키워드 기능이 필요하지 않습니다. 사실, 기본적으로 키워드를 제거하고 매개 변수 다음에 열린 중괄호 앞에 화살표를 추가합니다. 그것은 이렇게 보일 것입니다.

const multiplyByTwo = (num) => {
    return num * 2;
}

이 시점에서 "이전"방식과 크게 다르지 않지만 몇 가지 기능을 향상 시킬 수 있습니다.

불필요한 괄호 제거하기 

매개 변수가 없거나 매개 변수가 둘 이상인 경우 매개 변수 주위의 괄호가 필요합니다. 그러나 화살표 함수에 하나의 매개 변수만 있는 경우에는 괄호를 생략하여 간단하게 만들 수 있습니다.

const multiplyByTwo = num => {
    return num * 2;
}

묵시적 반환(Implicit Return) 

흔히 한 줄의 코드만 반환하는 함수를 작성하기도 합니다. 함수를 작성하는 "오래된"방법으로 함수의 행 수는 함수를 정의한 방법에 영향을 미치지 않습니다. 화살표 기능을 사용하면 됩니다.

함수에서 수행하려는 유일한 작업이 한 행 리턴인 경우 * 암시 적 return *을 사용하여 함수를 크게 단순화 할 수 있습니다. 암시적 반환을 사용하는 동안 중괄호 또는 return 키워드는 필요하지 않습니다. 그것은 이렇게 보일 것입니다.

const multiplyByTwo = num => num * 2;

생각해 볼만한 한 가지는 아무것도 반환하지 않아도 암시적 반환 구문을 사용할 수 있다는 것입니다. 

즉, 함수를 호출한 호출자가 아무것도 반환하지 않을 것으로 예상되면 반환하는 것이 중요하지 않습니다.

예를 들어 콘솔에 무언가를 인쇄하고 싶다면 암시적 리턴을 사용하여 함수의 길이를 줄일 수 있습니다.

const printName = (first, last) => console.log(`${first} ${last}`);

Map 및 Filter에서 화살표 함수 사용 

사용되는 화살표 함수가 표시되는 가장 일반적인 장소 중 하나는 map, reduce, filter 등과 같은 JavaScript Array 메소드를 사용하는 것입니다. 이러한 메소드를 사용하여 화살표 함수를 사용하면 한 줄로 완전한 배열 변환을 수행 할 수 있습니다.

두 가지 예를 살펴 보겠습니다. 하나는 Map이 있고 다른 하나는 Filter가 있습니다. Map 버전의 경우 각 숫자에 2를 곱하여 배열을 변환하려고 한다고 가정 해 봅시다. 이런 식으로 보일 겁니다.

const twodArray = [1,2,3,4].map( num => num * 2);

이 화살표 함수는 매개 변수가 하나 뿐이기 때문에 괄호를 사용하지 않고 암시적으로 반환했습니다. 이로써 전체 변형이 한 줄로 유지되었습니다!

이제 Filter를 사용하여 다른 작업을 해봅시다. 짝수가 아닌 모든 숫자를 필터링 하려고 한다고 가정 해 봅시다.

const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);

다시 말하지만 괄호와 암시적 리턴은 없습니다. 슈퍼 하나 빠른 배열 변환을 만들 수 있습니다!

화살표 함수로 바인딩하는 'This' 

_this_ 키워드 주위의 대화는 확실히 중간 자바스크립트이므로 이 섹션에 대해 조금 더 연구해야 할 수도 있습니다. 그럼에도 불구하고 person 객체 내부에서 ES5 함수 정의를 사용하는 예제부터 시작합시다.

const person = {
    first: "James",
    last: "Quick",
    getName: function() {
        this.first + " " + this.last
    }
}

이 경우 이름과 성을 가진 person 객체와 해당 객체의 전체 이름을 반환하는 getName() 함수를 만들었습니다. 함수 내부에서 this.first와 this.last를 호출하여 첫 ​​번째 속성과 마지막 속성을 참조하려고 합니다.

ES5 함수가 객체에 정의되면 'this'는 객체 자체를 나타냅니다. 

this 키워드를 통해 해당 속성에 액세스 할 수 있는 이유는 해당 함수가 객체 내부에서 정의되면 객체 자체에 자동으로 바인딩 된다는 것입니다. 따라서 ES5 기능을 사용하여 'this'를 사용하여 객체 속성을 참조 할 수 있습니다.

화살표 함수는 'this'키워드에 아무 것도 바인딩 하지 않습니다. 

그러나 화살표 함수를 사용하면 상황이 조금 바뀝니다. 화살표 함수는 키워드 this에 대한 바인딩을 수행하지 않습니다. 따라서 함수 정의를 화살표 함수로 변경하면 모든 것이 작동하지 않습니다.

const person = {
    first: "James",
    last: "Quick",
    getName: () => {
        return this.first + " " + this.last
    }
}

이 경우 undefined가 첫 번째 속성과 마지막 속성 모두에 대해 인쇄됩니다. 이유는 'this'라는 키워드가 person 객체에 바인딩 되어 있지 않기 때문에 참조 할 첫 번째 변수와 마지막 변수가 없습니다.

이것을 화살표 함수에서 사용하는 것의 차이점을 이해하는 것이 중요합니다!

마무리 

화살표 함수는 ES6 JavaScript의 멋진 기능 중 하나입니다. 여러분은 예제와 문서에서 점점 더 많이 사용되는 것을 볼 수 있습니다. 그래서 어떻게 작동하는지 배울 가치가 있습니다. 물론 코드의 간결성과 가독성을 크게 향상 시킬 수 있습니다.