こんにちは、フロントエンドエンジニアのてりーです。
目次
関数とは
一連の手続きを1つの処理にまとめた物。
関数を使うことによって、毎回同じ処理を書かずとも、その関数を呼び出すことによって同じ処理を実行できる。
例
//関数宣言 //引数に+1をするfunctionを作る function increments(n){ return n+1 } //呼び出し //incrementsを呼び出すと()に入れた引数に+1する処理を毎回してくれる。 console.log(increments(5)) //6 console.log(increments(1)) //2 JavaScriptの関数の定義は2パターン
JavaScriptの関数には「式」と「文」のどちらかで定義する。
式：評価された後に値として存在するもの。
式を評価する事で、結果として評価値を返す。
式は評価した結果を変数に代入できる。
// 1 + 1という式の評価値を表示 console.log(1 + 1); // => 2 // 式の評価値を変数に代入 const total = 1 + 1; // 関数式の評価値(関数オブジェクト)を変数に代入 const fn = function() { return 1; }; // fn() という式の評価値を表示 console.log(fn()); // => 1文：何らかの手続きを処理系に命令するもの。
処理する1ステップが1つの文である。;で1文ごとに区切る。
ifやforなどが文としてよく使われている。
const isTrue = true; if (isTrue) { 処理 }文は変数に代入できない！！その為、下はエラーが出る
// 構文として間違っているため、SyntaxErrorが発生する const forIsNotExpression = if (true) { 処理 }アロー関数と無名関数
アロー関数式
ES2015で導入されてから、スッキリしてい見やすい為、急速に普及している記法。
アロー関数式では以下の省略ができる。
・引数がひとつだけの場合はカッコが省略できる
・本文が return 文だけのときは、return 文をブロックごと省略できる
省略例
const plusOne = function (n) { return n + 1; } // アロー関数式() const addOne = (n) => { return n + 1; }; // アロー関数式 省略 const increment = n => n + 1;無名関数
名前がない関数。匿名関数とも呼ばれる。
宣言された関数は生まれた時点から名前を持つのが基本である。
関数の名前はFunction インスタンスとしての name プロパティに格納されてる。
function mercury() {} mercury.name //宣言文で定義した関数の名前 'mercury' const fn = function mars() {}; fn.name // 関数式で定義した関数の名前 'mars'もし名前を書かなかった場合(無名関数)は変数の名前が関数の名前になる。
const venus = function () { console.log('I am Venus!'); }; venus(); //I am Venus! venus.name //'venus' //functionに名前がない為、変数名のvenusが関数の名前になっている。