関数と戻り値
関数の基本
関数の処理としては、
決められた処理を元に、
「結果」を出力するものが関数です。
このように、
イメージとしては、
- 関数は何かしらの「決められた処理」を行う
- 関数は「結果」を返すことができる
と考えてもらうと良いでしょう。
例えば、
関数を呼び出して、
指定の文字を返す処理としては、
// 関数を定義
function sample() {
return '関数から返す文字';
}
// 関数の呼び出し
let moji = sample();
// 表示確認
console.log(moji) //「関数から返す文字」と表示このような形で、
関数を呼び出す形で使うことで、
結果として値が返されます。
関数の戻り値は「あり」と「なし」が可能
関数に関しては、
まず、基本として抑えることとして、
- 結果として戻ってくる値のことを「戻り値」
ということをまずは、抑えておきましょう。
この「戻り値」に関して、
関数を使っていく上で
- 関数の「戻り値」を「使う」
- 関数の「戻り値」を「使わない」
という２種類があります。
初心者の方は、
関数に戻り値が必ずいると考えてしまいがちですが、
- 関数の「戻り値」は、「使う」「使わない」は使い分ける
ということを意識して、
自分が使う関数は、
戻り値が必要かどうかを考えて関数を使うようにしましょう。
関数で「戻り値」を「使う」パターン
関数で「戻り値」を「使う」パターンについては、
// 関数を定義
function sample() {
return '関数から返す文字';
}
// 関数の呼び出し
let moji = sample();
// 表示確認
console.log(moji) //「関数から返す文字」と表示先ほど、サンプルで見せた
のような形で、
戻り値を使うことを想定しています。
上記のサンプルを詳しくみていくと、
という感じで、
let moji = sample();この部分で、
「return」で返される値が、
変数に対して、値が入ります。
このように、
関数から戻り値を取る場合は、
「return」を使って関数から戻された値を使うことができます。
関数で「戻り値」を「使わない」パターン
関数の戻り値を「使わない」というパターンとしては、
- 関数ないでコンソールの表示だけを行うような場合
- 全体として参照可能な「スコープ」である「変数」を使用する場合
などが、
戻り値を必要としないパターンとして使うことがあります。
関数内でコンソールの表示だけを行うような場合は、
// 関数を定義
function sample() {
// コンソールに表示
console.log('関数内で表示を行います');
}
//関数を呼び出し
sample();このように、
関数を呼び出すだけなので、
シンプルでわかりやすいと思います。
もう１つの、
全体として参照可能な「スコープ」である「変数」を使用する場合については、
「スコープ」の概念の理解が重要なので、
よく理解できていないという人は、
以下のページを参考に理解を深めてください。
上記のページの中で、
ポイントとしては、
この図を理解できていると良いですね。
実際の「スコープ」を考慮した例としては、
let moji = '最初の値';
function sample() {
moji = '値を書き換え';
}
// 文字を確認１回目
console.log(moji);
// 関数を呼び出し
sample();
// 文字を確認２回目
console.log(moji);
このように、
関数の外で宣言された変数を使って処理を行うことで、
結果の値を「戻り値」として使用することはありません。
上記のコードを具体的にみていくと、
このように、
関数の外で定義されている変数を活用することで、
引数や戻り値などを使わずに関数を作ることができます。
この変数の「スコープ」を基礎として理解しておきながら、
関数内で使うことにも少しずつ慣れていくと良いでしょう。
全体として参照可能な「スコープ」である「変数」使用する例
- 判定処理として、「0」になるかどうか、
- この辺りを試すことは、
- 理解を深めるので、
- 以下のようにコードを作って
- 試してみるとよいでしょう。
- –
- サンプルコード（自分なりに答えを確認してみましょう）
// 変数の定義
let globalVariable = 100;
function sample() {
// 元の値に100を加える
globalVariable = globalVariable + 100;
}
// 値を確認１回目
console.log('globalVariableの値 ['+globalVariable+']');
// 関数を呼び出し
sample();
// 値を確認２回目
console.log('globalVariableの値 ['+globalVariable+']');
// 関数を呼び出し
sample();
// 値を確認３回目
console.log('globalVariableの値 ['+globalVariable+']');
// 値を確認１回目
// 表示：globalVariableの値 [100]
console.log('globalVariableの値 ['+globalVariable+']');
// 関数を呼び出し
sample();
// 値を確認２回目
// 表示：globalVariableの値 [200]
console.log('globalVariableの値 ['+globalVariable+']');
// 関数を呼び出し
sample();
// 値を確認３回目
// 表示：globalVariableの値 [300]
console.log('globalVariableの値 ['+globalVariable+']');