関数は常に値を返す
これまであまり意識していませんでしたが、関数のreturn文を書かなかったり、returnに何も指定しない場合、その関数はundefinedを返します。
script.js
const func1 = function() {
return 'hello!';
}
console.log(func1()); // 'hello'
const func2 = function() {
console.log('good morning');
}
console.log(func2()); // undefined
const func3 = function() {
console.log('good night');
}
console.log(func3()); // undefined
Javascriptの関数は第一級関数
Javascriptの関数はオブジェクトなので、変数などに「値」として格納することができます。また、関数を関数の引数や戻り値にすることもできます。
第一級関数は下記の性質を持つ関数です。
- 変数やデータ構造に格納することができる
- サブルーチン（関数やプロシージャ）のパラメータとして渡すことができる
- サブルーチン（関数やプロシージャ）の戻り値となることができる
- 実行時に生成することができる
- 独自の存在を持つ（名前によらない存在である）
関数の実行方法はいろいろある
Javascriptの関数はfunction文で宣言した名前の後ろに()を付けて実行するのが一般的ですが、他にも実行方法があります。
関数として実行
func1.js
const func1 = function() {
return 'as a function';
}
console.log(func1()); // 'as a function'
メソッドとして実行
func2.js
const myObj = {
func2: function() {
return 'as a method';
},
};
console.log(myObj.func2()); // 'as a method'
コンストラクタとして実行
func3.js
const myPC = function() {
this.memorySize = 8;
this.cpuClock = 2.7;
this.displaySize = 14;
this.getMemorySize = function() {
return this.memorySize;
}
}
const pc = new myPC();
console.log(pc); // pcオブジェクトとそのプロパティ
appy()もしくはcall()を使って実行
func4.js
const greet = {
runGreet: function() {
console.log(this.name, arguments[0], arguments[1]);
}
}
const cody = { name: 'cody' };
const lisa = { name: 'lisa' };
greet.runGreet.call(cody, 'foo', 'bar'); // cody foo bar
greet.runGreet.apply(lisa, ['foo', 'bar']); // lisa foo bar
無名関数
無名関数は名前がない関数で、主に引数として他の関数に渡すために利用されます。
noname.js
const sayHi = function(f) {
f(); // 引数として渡された関数fを実行
}
sayHi(function() { console.log('hi') }); // 'hi'
関数式を即時実行
関数式（=Functionコンストラクタで生成された関数を除く全ての関数）は、関数定義の後に()を付与することで即時実行ができます。
immediate.js
const sayHi = function() {
console.log('hi');
}(); // 'hi'
無名関数の即時実行
関数式と同様に、無名関数も即時実行ができます。
noname-immediate.js
(function(msg) {
console.log(msg);
})('hi');
括弧でくくるのは、「式」として扱うようにするためです。
関数の巻き上げ
Javascriptでは、関数宣言（function文）を使って、定義される前に関数を実行することができます。
Java等のサーバサイドの言語を経験している人にとっては不自然でないかもしれません。
calc.js
console.log(sum(2, 2));
function sum(x, y) {
return x + y;
}
関数を変数に代入した場合は解釈されません。
calc.js
console.log(sum(2, 2));
const sum = function(x, y) {
return x + y;
}