【JavaScript入門】関数

関数の書き方

戻り値がない場合はreturnを省略できる。その場合はundefinedが返る。
関数は、呼び出し時より後ろに定義してあっても正常に実行できる。

print();

function print(){
    console.log('test');
}

実行結果

test

関数リテラルは、無名関数（匿名関数）を変数に代入する書き方です。
以下のようにメソッドを変数に代入して、任意のタイミングで使うことも出来ます。
関数リテラルを定義しただけでは、中のコードは実行されません。関数リテラルは呼び出し処理を先に書くと動きません。（先に宣言しないとダメ。）

let print =function(){
    console.log('test');
}
print();

実行結果

test

関数リテラルを呼ぶときに()を付け忘れると関数の定義が文字列として出力されてしまうことに注意する。

let print =function(){
    console.log('test');
}
console.log(print);//[Function: print]

let print =function(){
    return 3 * 4;
}
console.log(print());//12

let print =function(x,y){
    return x * y;
}
console.log(print(5,6));//30

以下のように代入したメソッドにsampleと付いていたとしても、print()で実行できます。

let print =function sample(){
    console.log('test');
}
print();

new演算子を用いると初期化処理が行われる。
functionではなくFunctionと、上一桁が大文字のFであることに注意。
Functionコンストラクターは、以下のように定義しただけで、print()を実行していなくても処理が走るため、sampleという文字列が返ります。

let print = new Function(
    'x',
    'y',
    console.log('sample'),
    'return x * y'
);
//sample

let print = new Function(
    'x',
    'y',
    console.log('sample'),
    'return x * y'
);
console.log(print(2,3));

実行結果

sample
6

アロー関数は、関数リテラルをシンプルに書くための記法です。
以下の関数リテラルをアロー関数で書き直すと、

let print =function(x,y){
    return x * y;
}

このようになります。functionキーワードが消えて、=>が増えました。

let print =(x,y) =>{
    return x * y;
}
console.log(print(3,7));//21

アロー関数の構文は以下のとおりです。

(x,y) => {return x *y;}

本文が一文である場合は、{}とreturnを省略できます。 {}を省略したらreturnも省略しなければなりません。

let print =(x,y) => x * y;

console.log(print(3,7));//21

引数が1個の場合は、()も省略可能です。

let print =x => x * 10;

console.log(print(5));//50

引数が0個の場合（引数がない場合）は、()を省略することはできません。

let print =() => 10 * 10;

console.log(print());//100

アロー関数がオブジェクトリテラルを帰す場合は注意が必要。
以下のように書くとundefinedがreturnされてしまいます。

let getObj =() => {value:100};

console.log(getObj());//undefined

オブジェクトリテラルを返したい場合は全体を()で括る必要があります。

let getObj =() => ({value:100});

console.log(getObj());//{ value: 100 }

無名関数の全体を()で括って、.call(this)を最後に付けて実行すると、その場で関数が実行されます。
自作アプリの場合は、コード全体を即時関数で括ることによってライブラリの変数名との衝突を避けることが出来ます。

(function (){
    var x = 10;
    var y = 20;
    console.log(x * y);
}).call(this);//200

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！