矢印関数

既存の関数

function add(a, b){ return a + b };

矢印関数

const add = (a, b) => a + b;

矢印関数フィーチャー

関数の表現はより簡単です.

既存の関数

const nubmers = [1,2,3,4,5];
const odd = numbers.filter(function(x) {
  return x%2 === 1;
});

矢印関数

const numbers = [1,2,3,4,5]
const odd = numbers.filter( x => x%2 === 1);

一目で簡潔に見えるでしょう?
「=>」を使用するには、関数やreturnを使用する必要はありません.
なお、パラメータが1の場合は括弧を省略することができる.

const double = x => {x * 2}

関数を1行で表すことができる場合は、カッコを省略することもできます.

const double = x => x * 2

矢印関数は常に匿名関数です.

矢印関数には独自のthisはありません.
関数が実行されると、外部スキャンプログラムが受信します.

ES 5<->変換ES 6関数

ES5 -> ES6

// ES5 기존 함수
function welcome(name){
  return "안녕하세요" + name
}

// ES6 화살표 함수

const welcome = (name) => {
  return "안녕하세요" + name
}

ES6 -> ES5

// ES6 화살표 함수
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  }
   return user;
}

// ES5 기존 함수

function handleBio(nickname, bio) {
  const user = {
    nickname = nickname,
    bio : bio
  }
  return user
}

矢印関数は既存の関数に置き換えられますか?

矢印関数は既存の関数を完全に置き換えることはできません.そのためです.
一般的な関数では、関数を呼び出す方法で、関数にバインドするオブジェクトが動的に決定されます.
矢印関数の場合、バインドするオブジェクトが静的に定義されます.
->あくまで大尉のthis(メキシコthis)
例を挙げる.

btn.addEventListner("click", function() {
	console.log(this.textContent);
}):

このコードにはfunctionが含まれており、thisは自分を示しています.
ボタンをクリックすると、ボタンのテキスト値が出力されます.

btn.addEventListner("click", () => {
	console.log(this.textContent); // undefined
}):

このような矢印関数では、ボタンのテキストは出力されません.それは、親ブロックに囲まれているため、それ自体ではありません.
したがって、メソッド、コンストラクション関数、addEventLister関数のコールバック関数として矢印関数を使用することはできません!