[Javascript]矢印関数(=>)

矢印関数はES 6構文です.functionキーワードを使用して関数を作成するよりも、関数を簡単に表現できます.矢印関数は常に匿名であるため、非メソッド関数に使用することが望ましい.また、自分のthis、arguments、super、newもあります.targetをバインドしません.ジェネレータとしては使用できません.
functionキーワードには2つの関数を生成する方法があります.

// 함수 선언(Function Declaration)
function sayHi(){ 
  console.log("hi!");
}

// 함수 표현(Function Expression)
var sayHi2 = function(){
  console.log("hi!");
};

関数表示方法を使用して関数を作成する場合は、矢印関数を使用して関数を作成できます.

var sayHi2 = () => console.log("hi");

同様に、矢印関数は無名の関数を生成する方法の1つであり、その基本形式は(パラメータ1、パラメータ2、...)=>である.{関数の内容}

1.構文

基本構文

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression 
// 다음과 동일함: => { return expression; } 

// 매개변수가 하나뿐인 경우 괄호는 선택사항: 
(singleParam) => { statements } 
singleParam => { statements } 

// 매개변수가 없는 함수는 괄호가 필요: 
() => { statements }

// 함수 몸체 지정 방법
x => { return x*x }  //single line block
x => x*x            
// 함수 몸체가 한줄의 구문이라면 중괄호 생략 가능하며, 암묵적으로 return된다.

高度な構文

// 객체 리터럴 식을 반환하는 본문(body)을 괄호 속에 넣음
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수가 지원됨
(param1, param2, ...rest) => {statements}
(param1 = defaultValue1, param2, ..., paramN = defaultValueN) => {statements}

// 매개변수 목록 내 구조분해도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a+b}) => a + b + c;
f();  //6

2.矢印関数の特徴

コードの簡潔性

// ES5버전 이전
setTimeout(function() {
  console.log("1");
}, 1000);

// ES6버전 이후
setTimeout(() => {
  console.log("2");
}, 2000)

コールバック関数の欠点の1つとして,パラメータとしての関数の内容を加えるにつれてコードが乱雑になるという欠点がある.矢印関数は、これらの欠点を解消します.

//ES5버전 이전
var arr1 = [1, 2, 3, 4, 5, 6].map(function(val){
  return val * 2;
})
console.log(arr1);  //[ 2, 4, 6, 8, 10, 12 ]

//ES6버전 이후
let arr2 = [1, 2, 3, 4, 5, 6].map((val) => val*2);
console.log(arr2);  //[ 2, 4, 6, 8, 10, 12 ]
                                

矢印関数を使用すると、returnとともに書かれた戻り文を非常に簡潔に表すことができます.

矢印関数とthis

一般的な関数とは異なり、矢印関数のthisは関数を呼び出す方法で決定され、バインドするオブジェクトを決定するthisは矢印関数を呼び出す時間に関係なく、常に親スキャンのthisを指します.
なぜなら、矢印関数にはthisとパラメータがないからです.
したがって、一般的には、これが介入している場合は、一般関数が使用されます.

var myObj = { 
  myText: "hi!",
  myFunc2: () => {
    console.log(this.myText);
  }
};

myObj.myFunc2(); // undefined
//상위 스코프에 변수 myText가 존재하지 않으므로 undefined반환한다.

上記の例では、矢印関数をコールバック関数として使用すると、この関数は親スキャンのグローバルスキャンオブジェクトまたはwindowオブジェクトになります.

window.myText="banana";
var myObj = { 
  myText: "hi!",
  myFunc2: () => {
    console.log(this.myText);
  }
};

myObj.myFunc2(); // "banana"

したがって、WindowsオブジェクトにmyTextの値を指定すると、myObjectオブジェクトのコンテキストのthis Windowsオブジェクトになります.
コメントサイト
https://beomy.tistory.com/19
https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/Javascript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-Arrow-Functions
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://velog.io/@grinding_hannah/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98arrow-function-%EC%95%8C%EA%B8%B0