[JavaScript] JavaScript 화살표 함수(Arrow Functions) 소개

JavaScript 화살표 함수 소개

ES6 화살표 함수는 함수 표현식에 비해 더 짧은 구문을 작성할 수 있는 대안을 제공합니다.

다음 예제는 두 숫자의 합을 반환하는 함수 표현식을 정의합니다.

let add = function (x, y) {
	return x + y;
};

console.log(add(10, 20)); // 30

다음 예는 위와 동일합니다. add()함수 표현식이지만 대신 화살표 함수를 사용하십시오.

let add = (x, y) => x + y;

console.log(add(10, 20)); // 30;

이 예에서 화살표 함수에는 하나의 표현식이 있습니다. x + y따라서 표현식의 결과를 반환합니다.

그러나 블록 구문을 사용하는 경우 다음을 지정해야 합니다.

return 예시:

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

그만큼 typeof연산자 반환 function화살표 함수의 유형을 나타냅니다.

console.log(typeof add); // function

다음 예제와 같이 Function 유형의 인스턴스이기도 합니다.

console.log(add instanceof Function); // true

여러 매개변수가 있는 JavaScript 화살표 함수

화살표 함수에 두 개 이상의 매개변수가 있는 경우 다음 구문을 사용합니다.

 

(p1, p2, ..., pn) => expression;

다음 표현식:

 

=> expression

다음 표현식과 동일합니다.

=> { return expression; }

예를 들어, 배열 을 내림차순으로 정렬하려면 다음과 같이 사용합니다.

let numbers = [4,2,6];
numbers.sort(function(a,b){ 
    return b - a; 
});
console.log(numbers); // [6,4,2]

화살표 함수 구문을 사용하면 코드가 더 간결해집니다.

let numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers); // [6,4,2]

단일 매개변수가 있는 JavaScript 화살표 함수

화살표 함수가 단일 매개변수를 사용하는 경우 다음 구문을 사용합니다.

 

(p1) => { statements }

다음과 같이 괄호를 생략할 수 있습니다.

 

p => { statements }

다음 예제는 화살표 함수를 인수로 사용합니다. map()문자열 배열을 문자열 길이의 배열로 변환하는 메서드입니다.

let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);

console.log(lengths);

출력:

[ 4, 3, 5 ]

매개변수가 없는 JavaScript 화살표 함수

화살표 함수에 매개변수가 없으면 다음과 같이 괄호를 사용해야 합니다.

 

() => { statements }

예를 들어:

let logDoc = () => console.log(window.document);
logDoc();

매개변수 정의와 화살표 사이의 줄 바꿈

JavaScript에서는 매개변수 정의와 화살표( =>) 화살표 함수에서,

예를 들어 다음 코드는 SyntaxError가 발생합니다.

let multiply = (x,y) 
=> x * y;

그러나 다음 코드는 완벽하게 작동합니다.

let multiply = (x,y) => 
x * y;

JavaScript를 사용하면 다음 예와 같이 매개변수 사이에 줄 바꿈을 사용할 수 있습니다.

let multiply = (
  x,
  y
) => 
x * y;

화살표 함수 본문의 명령문 및 표현식

JavaScript에서 표현식은 다음 예제와 같이 값으로 평가됩니다.

 

10 + 20;

문은 다음과 같은 특정 작업을 수행합니다.

if (x === y) {
    console.log('x equals y');
}

화살표 함수의 본문에 표현식을 사용하는 경우 중괄호를 사용할 필요가 없습니다.

let square = x => x * x;

그러나 문을 사용하는 경우 다음 예와 같이 한 쌍의 중괄호 안에 넣어야 합니다.

let except = msg => {
    throw msg;
};

JavaScript 화살표 함수 및 객체 리터럴

다음 예를 고려하십시오.

let setColor = function (color) {
    return {value: color}
};

let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"

그만큼 setColor()함수 표현식은 다음을 가진 객체를 반환합니다. 

다음 구문을 사용하여 화살표 함수에서 객체 리터럴을 반환하면 오류가 발생합니다.

 

p => {object:literal}

예를 들어 다음 코드는 오류를 발생시킵니다.

let setColor = color => {value: color };

블록과 객체 리터럴 모두 중괄호를 사용하기 때문에 JavasScript 엔진은 블록과 객체를 구분할 수 없습니다.

이 문제를 해결하려면 다음과 같이 개체 리터럴을 괄호로 묶어야 합니다.

let setColor = color => ({value: color });

화살표 함수 대 일반 함수

화살표 함수와 일반 함수 사이에는 두 가지 주요 차이점이 있습니다.

1. 먼저 화살표 함수에서 this, arguments, super, new.target어휘적이다. 이는 화살표 함수가 둘러싸는 어휘 범위에서 이러한 변수(또는 구성)를 사용한다는 것을 의미합니다.
2. 둘째, 화살표 함수는 함수 생성자로 사용할 수 없습니다. 사용하는 경우 new화살표 함수에서 새 객체를 생성하기 위해 키워드를 사용하면 오류가 발생합니다.

JavaScript 화살표 기능 및 this값

JavaScript에서 새로운 함수는 자체적으로 정의합니다. this값. 그러나 화살표 기능의 경우에는 그렇지 않습니다.

다음 예를 참조하십시오.

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(function () {
            console.log(this.speed); // undefined
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50);

setTimeout()기능 익명 함수 내부에서, this.speed 는 undefined 입니다.

그이유는 setTimeout() 익명함수의 this는 setTimeout 함수이며, speedUp 함수를 표현하지 않습니다.

 

이 문제를 해결하려면 self같은 익명변수를 선언하여 상단의 함수를 지정해야됩니다.

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        let self = this;
        setTimeout(function () {
            console.log(self.speed);
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50); // 50;

익명(function) 함수와 달리 화살표(arrow) 함수는 다음을 캡처합니다.

상단의 익명함수까지 모두포함이 되어 this가 speed 값을 참조할수가 있습니다.

다음 코드는 예상대로 작동해야 합니다.

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(
            () => console.log(this.speed),
            1000);

    };
}

let car = new Car();
car.speedUp(50); // 50;

JavaScript 화살표 함수 및 인수 객체

화살표 함수에는 arguments물체. 예를 들어:

function show() {
    return x => x + arguments[0];
}

let display = show(10, 20);
let result = display(5);
console.log(result); // 15

내부의 화살표 기능 showMe()함수는 다음을 참조합니다. arguments물체. 그러나 이 arguments객체가 속한 show()화살표 기능이 아니라 기능입니다.

또한 화살표 기능에는 new.target예어.

JavaScript 화살표 함수 및 프로토타입 속성

함수를 정의할 때 function키워드, 함수에는 prototype 이라는 속성이 있습니다.

function dump( message ) {
    console.log(message);
}
console.log(dump.hasOwnProperty('prototype')); // true

그러나 화살표 기능에는 prototype가 없습니다.

let dump = message => console.log(message);
console.log(dump.hasOwnProperty('prototype')); // false

콜백 및 클로저 의 구문이 더 명확하기 때문에 화살표 함수를 사용하는 것이 좋습니다 

요약

• 사용 (...args) => expression;화살표 함수를 정의합니다.
• 사용 (...args) => { statements }여러 문이 있는 화살표 함수를 정의합니다.
• 화살표 함수에는  this또는 super 바인딩이 없습니다.
• 화살표 기능에는 prototype 없습니다.

 

 

 

 

 

참고: https://www.javascripttutorial.net/es6/javascript-arrow-function/