Background
- 久しぶりにJavascriptの知識の整理を実施することになった
- 良くわかりにくくなる事項について、自分の理解の整理のために本記事を投稿する
1. 関数の記法
1-1. 通常版
- 通常版では
functionキーワードに関数名を続けて記載する
（定義）
// 関数名: sayHello
// 引数: name
function sayHello(name) {
return `${name}さん、こんにちは！`; //処理
}
（実行方法）
console.log(sayHello('Taro'));
1-2. 無名関数
- 無名関数では関数定義を変数の値として代入して定義する
- 関数定義は呼び出し側の前に行う必要がある（いわゆる巻き上げが発生しない）
- 実行する場合は関数を代入した変数に引数をぶち込む
- 関数リテラルとも呼ばれる（リテラルとはソースコードに直接ベタ書きした文字や数字のこと）
（定義）
// 関数を代入する変数名: myfunc
// 引数: name
const myfunc = function (name) {
return `${name}さん、こんにちは！`; //処理
}
（実行方法）
console.log(myfunc('Taro'));
1-3. アロー関数
-
functionキーワードの代わりに「=>」（矢）を使って無名関数を記述する - アロー関数では、thisはアロー関数が宣言された場所によって決定される
- つまり定義したコンテキストでthisが固定される
- これによってvar self = this; を書かなくてよくなったりする
（定義）
// 関数を代入する変数名: myfunc
// 引数: name
// 平たく書くと、
// 無名関数: function(引数,...){...関数の本体...}
// アロー関数: (引数,...)=>{...関数の本体...}
const myfunc = (name) => {
return `${name}さん、こんにちは！`; //処理
}
// 関数処理が１文の場合`{}`を省略できる
const myfunc = (name) => `${name}さん、こんにちは！`;
// 引数が１つの場合、引数の`()`も省略できる
const myfunc = name => `${name}さん、こんにちは！`
// 引数が無い場合は`()`だけを記載する
const myfunc = () => "こんにちは！"
（実行方法）
console.log(myfunc('Taro'));
Reference
- JavaScriptの無名関数について現役エンジニアが解説【初心者向け】
- async/await 入門（JavaScript）
- export defaultってなんだろう
- イマドキのJavaScriptの書き方2018
- 【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ！
2. デフォルト引数
- 関数のデフォルト引数 は、関数に値が渡されない場合や undefined が渡される場合に、デフォルト値を指定できる
(Before) 従来こうしていたものが
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1 //bがundefinedだったら初期値として1を設定
return a * b
}
(After) こう定義できる
function multiply(a, b = 1) {
return a * b
}