JavaScript の基礎知識を少しずつ理解してゆくための記事です。
本記事では関数について、自分が思う最低限の超基本的な知識だけをまとめてみました。

関数の定義方法

関数の基本的な定義方法は以下の通りです。

function命令による定義
関数式による定義
アロー関数による定義

最も一般的なのは funcition命令による定義でしょうか。
宣言した関数は呼び出し演算子の () を利用して呼び出します。

function sum( a, b ) {
  return  a + b;
}
sum( 1,2 ); // 3

次が関数式による定義です。
この sumは、関数 function(){ … } への参照となり、関数名と同じように、() をつけることで参照する関数を実行できます。
宣言した時点では名前を持たないので、匿名関数や無名関数と呼ばれます。

const sum = function( a, b ) {
  return  a + b;
}
sum ( 1,2 );

最後にアロー関数による定義です。
関数式と同様に参照先の変数に()をつけることで実行できます。

const sum = ( a, b ) => { return  a + b; };
sum( 1,2 );

アロー関数には次の省略記方があります。

引数が「１つ」の場合に限って () を省略できる。
( 引数名 ) => { ……… }
. . ↓
引数名 => { ……… }
実行する内容が return 文だけの場合は、return と {} を省略できる。
( 引数名 ) => { return ……… }
. . ↓
( 引数名 ) => ………
条件が合わさるととんでもなくシンプルになります。
引数 => ………

JavaScriptにおける関数

JavaScriptにおける関数は実行可能なオブジェクトであるというのが大きな特徴です。

オブジェクトとは 名前（プロパティ）と値（バリュー）をペアで管理する入れ物であり以下のように定義ができます。
値へのアクセス方法は「オブジェクト名.プロパティ名」のように記述します。

const container = {
  apple: 'りんご',
  orange: 'みかん',
  hello: function() {
    console.log( 'hello' )  // バリューにメソッドを定義することもできる
  }
}  
console.log( container.apple ) // りんご
console.log( container.orange ) // みかん
container.hello() // hello

バリューにメソッドを定義することもでき、呼び出しの際は () を付けます。

つまり関数もオブジェクトであるため、以下のようにプロパティやメソッドの追加ができるということになります。

function f() {
  console.log( 'hoge' );
}

// プロパティの追加
f.prop = 'apple'
console.log( f.prop ) // apple

// メソッドの追加
f.method = function() {
  console.log('method was called');
}
f.method(); // method was called

関数の主な特徴

関数名は重複してもエラーにならずあと勝ちになる

関数名が重複している場合、エラーにならずあと勝ちになります。

function f(name) {
  console.log( name );
}
function f() {
  console.log( 'hogehoge' );
};
f('Taro');  // hogehoge

上の例を見てわかる通り、引数の個数が一致する関数が実行されるわけではありません。

関数式で宣言した関数名の重複はエラーになる

関数式で宣言した関数は重複時にエラーになります。ややこしいですね、、

const f = function ( name ) {
  console.log( name );
}
function f() {  // Uncaught SyntaxError: Identifier 'f' has already been declared
  console.log('Hello World');
};
f( taro );

関数を呼び出す際に、実引数を省略できる

実引数を省略した場合、以下のようにundefined が設定されます。

function f(a, b, c) {
  console.log( 'a:' + a );
  console.log( 'b:' + b );
  console.log( 'c:' + c );
}

f( 'apple', 'orange' );
// a: apple
// b: orange
// c: undefined

逆に引数をとらない関数に実引数を与えても無視されます。

function f() {
  console.log( 'hogehoge' );
}

f( 'apple' );  // hogehoge

戻り値を定義しない場合は undefined が返る

戻り値を指定しない（ return文を書かない）場合、undefinedが返却されます。

function f() {
  // return 文を省略
}
console.log(f()); // undefined

また、通常ないと思いますがreturn;のように返却する値を何もかかない場合も、同様に undefined が返却されます。

関数の基礎知識としては以上とさせて頂きます。
関数だけでも本記事では書ききれなかったことだらけですが、色々な内容に触れようとするとどんどん他の予備知識が必要になり膨大な記述量・情報量になるので少しづつ学んで行ければよいかなと思います。

まるノート

備忘録も兼ねて、様々なお役立ち情報をまとめています。

JavaScript基礎知識～関数について～