TIL.14) Arrow function_JavaScript

🚨 Caution 🚨

これらはwecodeで勉強してまとめたものです.
筆者が理解した部分に基づいて書いた文章で、実際の内容とは少し違うかもしれません.
この点に注意してください
コンテンツへのフィードバックに感謝します.

💡 function

この期間の学習において、function()の機能を実現する方法は、

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

このように実施する(ES 5規格)
もちろん、これは間違った方法ではありません.
最近のES 6の使い方は、現在のやり方とは少し違います.
このメソッドの名前はArrow関数で、
多くの人が利用しているように、この方法を理解し、熟知しなければなりません.
後で他の人が使っているコードを見ると、慌てたり、ぐずぐずしたりしないはずです.

💡 Arrow function

矢印シェイプ(=>)の記号が追加され、矢印の名前に一致します.
既存の方法と比較すると、

// 기존 function
function() {}

// arrow function
() => {}

目で見るだけでもずいぶん簡略化されていることがわかります.
functionという字がなくなって、=>に取って代わられたのが見えます.

名前付きfunction

// 기존 function
function abc() {}

// arrow function
const abc = () => {}

名前付きfunctionは、より大きな変化を示します.
まず、constによって機能に名前を付けます.
矢印機能を実現する方法.

▼因子のある関数

// 기존 function
function abc(x) {}

// arrow function
const abc = (x) => {}
const abc = x => {}

const abc = (x,y) => {}

機能にパラメータが含まれている場合は、括弧を省略することもできます.
もちろん,1つの因子しかない場合にのみ省略できる.
2つ以上のパラメータがある場合は、括弧を使う部分を知っておく必要があります.

▼functionが値を返す場合

// 기존 function
function abc(x) {
	return x+1
}

// arrow function
const abc = x => x+1

これは,機能内部でreturn値のみを受信する場合の変化である.
特殊な数式がない場合に戻り値を受け取る場合、
括弧は省略することもできます.
限界省略可能なarrow関数...
では、この2つの方法の出力値は正常に表示されますか?
確認しよう

既存の方法とarrow関数は同じ結果をもたらすことが分かった.
どの方法も正しいとは限らないが、間違っている.
多くの開発者が使用する方法である以上、この方法を熟知しなければならない.

要約すると...

() => {}

const a = () => {}

const a = data => {}

const a = data => data