概要
この記事では、JavaScriptの関数や戻り値、スコープについて、超基本的な知識をメモ的にまとめています。
自分用の備忘録なのであしからず。
目次
関数とは
「関数」とは、簡単に言うと複数の処理をまとめたものです。
例えば、2つの数値を足す、足し算の結果を出力するというような処理を、関数（ここではaddとします）の中で定義することで、addを呼び出すだけで2つの処理を行ってくれます。
それでは、関数の定義から使い方までをみていきましょう。
関数の定義
関数の定義と呼び出し方の構文は、以下のようになっています。
//関数の定義
function 関数名(引数) {
処理1
処理2
:
:
}
//関数を呼び出す
関数名(引数);
functionに続けて関数名を書き、( )の中に引数を書きます。{ }の中には、関数を呼び出した際に実行する処理をを書きます。
ここで出てきた「引数」とは、関数に与える情報です。関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を使うことができます。
定義した関数は関数名(引数);とすることで呼び出すことができます。
実際に書いてみるとこのようになります。自己紹介の関数を書いてみました。
function introduce(name, job) {
console.log(`私は${name}です。`)
console.log(`${job}です。`)
}
introduce('ta1fukumoto', 'エンジニア');
//私はta1fukumotoです。
//エンジニアです。
introduce('Messi', 'フットボールプレイヤー');
//私はMessiです。
//フットボールプレイヤーです。
コードをみていきます。
まず、function introduce(name, job) {}でintroduceという名前の関数を定義しています。
introduce関数は引数にnameとjobを受け取ります。そのため、関数を呼び出す際に、2つの引数を渡す必要があります。
introduce関数の中では、2つの処理が書かれています。関数を呼び出した際にこれらの処理がまとめて実行されます。
これらの処理の中では、引数が使われており、関数を呼び出した際に渡された引数の値が代入されます。
introduce('ta1fukumoto', 'エンジニア');の部分で関数を呼び出しています。引数で渡しているta1fukumotoがnameに、エンジニアがjobに入り、関数の中の処理が実行されます。
関数式
関数は、定数や変数に代入することができます。これを「関数式」と言います。
関数式は、「無名関数」とすることができ、関数名をつけなくても良くなります。
関数式の構文は、以下に示す通りです。
//関数式による関数の定義
const 定数 = function(引数) {
処理1
処理2
:
:
}
//関数式を呼び出す
定数(引数);
このように、定数や変数を定義し、そこに関数を代入する感じです。このとき関数名は省略することができます。
呼び出す際は、定数の後ろに(引数)と書いて、引数を渡します。
先ほどの例を関数式で書き換えると次のようになります。
const introduce = function(name, job) {
console.log(`私は${name}です。`)
console.log(`${job}です。`)
}
introduce('ta1fukumoto', 'エンジニア');
//私はta1fukumotoです。
//エンジニアです。
introduce('Messi', 'フットボールプレイヤー');
//私はMessiです。
//フットボールプレイヤーです。
関数名が定数に置き換わったようなイメージですね。
アロー関数
関数式による関数の定義の際、function()と書いてきましたが、この部分を() =>としても関数を定義することができます。
この関数の書き方を「アロー関数」と呼びます。
アロー関数を使うと、コードがシンプルになり読みやすくなります。
引数を渡すときは、(引数) =>のように()の中に引数を書きます。
const introduce = (name, job) => {
console.log(`私は${name}です。`);
console.log(`${job}です。`);
}
アロー関数では、関数の定義部分が変わるだけで、呼び出し方は変わりません。
アロー関数は、. ES2015（ES6）から利用できるようになった表現です。1行で書く際の省略形などもありますが、ここでは割愛させていただきます。
オブジェクトと関数
関数は、オブジェクトの値として用いることもできます。
関数を呼び出すときは定数名.プロパティ名()とします。
//オブジェクトの値として関数を定義する場合
const 定数名 = {
プロパティ名: (引数) => {
処理
}
};
//関数を呼び出す
定数名.プロパティ名(引数);
戻り値
「戻り値」とは、呼び出し元で受け取る処理結果のことで、このことを「関数が戻り値を返す」と言います。
戻り値を返すには、関数の中でreturnを使います。return 値と書くことで、関数はその値を戻り値として返します。
呼び出した関数に戻り値がある場合、関数の呼び出し部分がそのまま戻り値に置き換わります。そのため、関数の呼び出し部分を定数に代入することもできます。
戻り値として、面積の計算結果を返すコードを書いてみます。
//戻り値として面積を計算した値を返す関数
const area = (height, width) => {
return height * width;
};
//関数をそのまま出力
console.log(area(12, 5));
//60
//関数を別の定数に代入して出力
const result = area(12, 5);
console.log(result);
//60
コードをみていきましょう。
関数areaはアロー関数の関数式で定義されています。引数にはheightとwidthを受け取ります。
関数の中の処理では、計算結果をreturnで返しています。
そのため、関数を呼び出してコンソールで出力すると、計算結果の60が表示されます。
関数はさらに定数に代入することもでき、代入した定数をconsole.logで出力すると計算結果が表示されます。
条件式をreturnする
条件式をreturnすると、真偽値を戻り値として返すこともできます。
const checkArea = (height, width) => {
const area = height * width;
return area > 50;
};
console.log(checkArea(3,7));
//false
console.log(checkArea(12, 5));
//true
上の例では、areaを計算したあと50より大きいか判定し、真偽値を戻り値として返します。
そのため、出力はtrueやfalseとなります。
最後に、returnは戻り値を返すだけでなく関数の処理を終了させる性質も持っています。
よってreturnの後にある処理は実行されません。
スコープ
「スコープ」とは、それぞれの定数や変数が使用できる範囲のことです。
ひとつ前の例で、定数 areaを関数内で定義しています。areaを関数の{ }の外で出力しようとするとエラーが表示されます。このように、関数の引数や関数内で定義した定数や変数は、その関数の中でしか使うとこができません。
関数だけではなく、if文やswitch文などの条件文や、for文などの繰り返し文モスコープを作ります。基本的に{ }を使う構文がスコープを作ると考えましょう。
const calculateArea = (height, width) => {
const area = height * width;
console.log(area); //スコープの中なのでOK
};
calculateArea(2, 6);
//12
console.log(area); //スコープの外なのでNG
//エラーが表示されます
例のコードをみていきましょう。
定数areaは関数の中で定義されています。よって、areaは、関数calculateAreaの中でしか使うことができません。
関数の外で、areaをconsole.logで出力しようとするとエラーが生じます。
一方、関数の外で定義した定数や関数は関数の中でも外でも使うことができます。
まとめ
以上、関数についてまとめました。
今回も学んだ知識を使って簡単なプログラムを書いてみました。
//背番号からバルサの選手を特定します
const checkPlayerName = (number) => {
switch (number) {
case 10:
return 'Messi';
case 3:
return 'Pique';
case 21:
return 'deJong';
default:
return '選手が見つかりません';
}
};
console.log(checkPlayerName(10));
//Messi
console.log(checkPlayerName(3));
//Pique
console.log(checkPlayerName(99));
//選手が見つかりません
トップチーム全員文でやろうと思いましたが、流石にコードが長くなりすぎるのでやめました笑
このように関数の中にswitch文を書くこともできます。また、returnがbreakの代わりになっています。
最後まで読んでいただきありがとうございます。ではまた。