初心者覚書です。時々JSを使おうとするとアロー関数のことを忘れているのでメモとして作りました。ほぼ参考を読み、箇条書きにしただけなので、参考サイトを見た方がわかりやすいです。
アロー関数とは

アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできない
関数を短く書きたい、thisを束縛したくないという2つの理由がある
通常関数にはthisがあり、thisが何を指すのかは、通常関数を実行したタイミングで決まるが、
アロー関数には、それ自体が保有するthisはなく、関数の外のthisを関数内で参照できるだけです。レキシカルスコープのthisを参照します。つまり、アロー関数は定義したときに、thisが指すものがひとつに決まり、どうやって関数が実行されるかに左右されなくなります。
アロー関数はnewすることができません。つまり、アロー関数はコンストラクタになることができない＞通常関数はclassでextendsできますが、アロー関数はできない

arrow.js


const materials=[
'aaa',
'bbb',
'ccc'
];

console.log(materials.map(material => material.length));

参考：アロー関数を説明

getTriangle.js

let getTriangle = function(base,height){
return base * height /2;
};
console.log(getTriangle(10,2));

getTriangle_arrow.js

let getTriangle = (base,height)=>{
return base * height /2;
};
console.log(getTriangle(10,2));

本文が一文

getTriangle_arrow_short.js

let getTriangle = (base,height)=> base * height /2;
console.log(getTriangle(10,2));

引数がない場合

getTriangle_arrow_nohikisu.js

let show = ()=>console.log('hi!');
show();

@uttk さんに教えてもらったサイト、、
通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。

これを見ると巻き上げ、ジェネレータ関数、レキシカルスコープとかよくわからない。

巻き上げ

regular() // エラーにならない
function regular() {}

アロー関数は巻き上げが起こりません:


arrow() // ReferenceError: Cannot access 'arrow' before initialization
const arrow = () => {}

これは、アロー関数の性質というよりかは、constの性質によるもので、通常関数の場合でも、constなどを使った定義では、巻き上げが起こりません:

regular() // ReferenceError: Cannot access 'regular' before initialization
const regular = function () {}

ジェネレータ関数
通常関数はジェネレータ関数を定義できますが、アロー関数はジェネレータ関数を定義する構文がそもそもありません。

function* regular() {
    yield 1
}

レキシカルスコープ変数
通常関数は、argumentsで引数リストを参照できますが、アロー関数ではargumentsが定義されていないため、引数リストを参照できません。アロー関数のargumentsはレキシカルスコープ変数のargumentsを参照するだけです。

lexical.js

const arguments = 'hoge' // レキシカルスコープ変数

function regular() {
    console.log(arguments)
}
const arrow = () => {
    console.log(arguments)
}

regular(1, 2, 3) //=> [Arguments] { '0': 1, '1': 2, '2': 3 }
arrow(1, 2, 3) //=> hoge

アロー関数はletやconstの仕様上、同じ関数名で定義を上書きすることができない


let arrow = () => {}
let arrow = () => {}
//=> SyntaxError: Identifier 'arrow' has already been declared

アロー関数でもvarで宣言すると、上書き可能:


var arrow = () => {}
var arrow = () => {}

可変長引数?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters

やばい、色々調べているだけで人生が終わりそう