JavaScript의 ES6 화살표 함수 시작

JavaScript의 ES6 화살표 함수 시작

2022-06-01 last update

10 minutes reading JavaScript Development

소개


ES6에 대해 JavaScript는 확장 조작자, 대상 분해, 새로운 유형의 변수 등 많은 업데이트가 있습니다.가장 현저한 변화 중 하나는 화살표 함수인데, 이것은 새로운 간결한 함수 작성 방법이다.화살표 함수를 사용하면 한 줄에서 읽을 수 있고 간결한 함수를 정의할 수 있습니다.본고에서 우리는 arrow 함수의 기본 지식을 소개하고 그 장점을 토론할 것이다.

ES5의 기능


먼저 ES5 JavaScript 정의 함수를 사용하는 방법을 살펴보겠습니다.함수를 정의하려면function 키워드가 필요합니다.예를 들어, 숫자를 두 개로 곱한 함수를 정의하려면 다음과 같습니다.
function multiplyByTwo(num){
    return num * 2;
}
만약 필요하다면, 우리는 함수를 정의하여 변수에 분배할 수도 있다.
const multiplyByTwo = function(num){
    return num * 2;
}
어떤 식으로든 키워드 함수를 포함해야 합니다.

첫 번째 ES6 화살표 기능


화살표 함수를 만들려면 키워드 함수가 필요하지 않습니다.사실상, 이 키워드는 기본적으로 삭제되었고, 매개 변수 뒤에 열려 있는 괄호 앞에 화살표를 추가했습니다.보아하니 이렇다.
const multiplyByTwo = (num) => {
    return num * 2;
}
이 점에서 그것은 낡은 방법과 실질적으로 다르지 않아 보이지만, 우리는 약간의 강화를 진행할 수 있다.

불필요한 괄호 삭제


만약 매개 변수가 없거나 매개 변수가 한 개가 아니라면, 매개 변수 주위에 괄호를 붙여야 한다.그러나 arrow 함수가 매개 변수가 하나일 때 괄호를 줄여 다음과 같이 간소화할 수 있습니다.
const multiplyByTwo = num => {
    return num * 2;
}

수익률 억제


통상적으로, 우리가 작성한 함수는 한 줄의 코드 후에만 되돌아온다.낡은 함수 작성 방식을 사용하면 함수 중의 행수는 함수를 정의하는 방식에 영향을 주지 않는다.화살표 기능을 통해 할 수 있습니다.
함수에서만 단행 반환을 실행하려면 은식 반환을 사용하여 함수를 간소화할 수 있습니다.은식return을 사용할 때 괄호나 return 키워드가 필요하지 않습니다.보아하니 이렇다.
const multiplyByTwo = num => num * 2;
반드시 어떤 내용을 되돌려야 하는 것은 아니더라도 암시적 반환 문법을 사용할 수 있다.다시 말하면, 함수의 호출자가 그것을 되돌려 주기를 원하지 않는다면, 그것을 되돌려 주는 것은 중요하지 않다.
예를 들어, 일부 컨텐트를 콘솔에 인쇄하려면 암시적 반환을 사용하여 함수의 길이를 줄일 수 있습니다.
const printName = (first, last) => console.log(`${first} ${last}`);

맵 및 필터에서 화살표 함수 사용하기


화살표 함수를 사용하는 가장 흔히 볼 수 있는 곳 중 하나는 맵,reduce,filter 등 자바스크립트 수조 방법을 사용하는 것이다. 화살표 함수를 이런 방법과 결합하여 사용하면 한 줄에서 완전한 수조 변환을 완성할 수 있다.
두 가지 예시를 봅시다. 하나는 맵이고, 다른 하나는 Filter입니다.맵 버전에 대해 모든 숫자를 2로 곱해서 그룹을 변환해야 한다고 가정하십시오.이렇게 보입니다.
const twodArray = [1,2,3,4].map( num => num * 2);
이 화살표 함수에 대해 괄호를 생략하고 암시적으로 되돌아왔습니다.이것은 전체 변환을 한 줄로 유지합니다.
이제 필터로 다른 것을 만들어 봅시다.만약 우리가 모든 짝수가 아닌 숫자를 필터해야 한다고 가정하자.우리는 이렇게 할 것이다.
const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);
마찬가지로 괄호와 스텔스가 없습니다.

화살표 함수의 "this" 귀속 사용하기


person 객체에서 ES5 함수 정의를 사용하는 예제부터 시작합니다.
const person = {
    first: "James",
    last: "Quick",
    getName: function() {
        this.first + " " + this.last
    }
}
이 예에서, 우리는 이름과 성을 가진person 대상, 그리고 이 사람의 전체 이름을 되돌려주는 getName () 함수를 만들었습니다.함수 내부에서, 우리는 호출 this.firstthis.last 을 통해 첫 번째 속성과 마지막 속성을 인용하려고 합니다.
우리가this 키워드를 통해 이 속성에 접근할 수 있는 이유는 이 함수들이 대상 내부에서 정의될 때 자동으로 대상 자체에 귀속되기 때문이다.따라서 ES5 함수에 대해서는 객체 속성을 참조하기 위해 this 을 사용할 수 있습니다.
그러나 화살표 함수를 사용하면 상황이 달라집니다.화살표 함수는 키워드 this 에 귀속되지 않습니다.따라서 우리가 함수 정의를 화살표 함수로 바꾸면 일은 일어나지 않을 것이다.
const person = {
    first: "James",
    last: "Quick",
    getName: () => {
        return this.first + " " + this.last
    }
}
이 경우 키워드undefined가person 대상에 귀속되지 않고 인용할 첫 번째와 마지막 변수가 없기 때문에 첫 번째와 마지막 속성this으로 인쇄됩니다.

결론


화살표 함수는 ES6 JavaScript의 많은 새로운 기능 중 하나입니다.예시와 문서에서 사용이 갈수록 많아지는 것을 볼 수 있기 때문에 그들의 작업 방식을 배울 가치가 있습니다.그것들은 또한 코드의 간결성과 가독성을 현저히 높일 수 있다.