#【JavaScript】function構文とアロー関数の違い、省略した書き方について
function構文で書いた以下の記事を発展させ、アロー関数について整理します。
【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値
https://qiita.com/kuro_96/items/21e670aa10861d997f8a
##アロー関数を使うメリット
次の条件で省略が可能、コードがシンプルになる
・引数が1つの場合:引数を囲む()を省略できる
・引数がない場合:()だけ記載する
・実行内容が1文である場合:{}を省略できる
・多くの学習サイトでfunction構文からアロー関数への移行が進んでいる(情報が多い)
以上がfunction構文よりもアロー関数を使う理由です。
##function構文の関数の書き方(復習)
###関数を作る
constで関数の容れ物を作り、
const 関数名 = function(){
実行内容;
}
作った関数を呼び出すときは
関数名();
関数名(引数);
とする。
以下は引数を受けとり、表示させる関数hello。
const hello = function(name){
console.log(`こんにちは、${name}さん`)
}
hello("you");
##アロー関数の書き方
###function構文との違い
function構文と比較して説明。
・function()から"function"をとる
・()の後に"=>"を追加する
矢印(アロー)を実行処理{}に向けて指すと覚えている
const 関数名 = () => {
実行内容;
}
先の関数helloの場合
const hello = (name) => {
console.log(`こんにちは、${name}さん`)
}
hello("you");
###省略した記法
・引数が1つの場合、引数を囲む()を省略できる
・実行内容が1文である場合、{}を省略できる
const 関数名 = 引数 => 実行内容;
先の関数helloの場合
const hello = name => console.log(`こんにちは、${name}さん`);
hello("you");
・引数がない場合は()だけ記載する
const 関数名 = () => 実行内容;
あるいは
const 関数名 = () => {
実行内容;
}
決まった文章を表示するgreet関数の場合
const greet = () => console.log("こんにちは。個人ゲーム作家のkuroと申します。");
greet();
実行結果
こんにちは。個人ゲーム作家のkuroと申します。
こちらで書いたadd関数の場合
【JavaScript】関数、ローカルスコープ、グローバルスコープ、引数、戻り値
https://qiita.com/kuro_96/items/21e670aa10861d997f8a
const add = function(a,b){
function add(a,b){
return a + b;
}
console.log(1,2);
}
アロー関数+省略記法
const add = (a,b) => a+b;
console.log(add(1,2));