学習サポート始めました(有料)

プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

【理解を深める_04】関数の戻り値と引数

関数と戻り値

関数の基本

関数の処理としては、

決められた処理を元に、

「結果」を出力するものが関数です。

このように、

イメージとしては、

  • 関数は何かしらの「決められた処理」を行う
  • 関数は「結果」を返すことができる

と考えてもらうと良いでしょう。

例えば、

関数を呼び出して、

指定の文字を返す処理としては、

// 関数を定義
function sample() {
  return '関数から返す文字';
}

// 関数の呼び出し
let moji = sample();

// 表示確認
console.log(moji) //「関数から返す文字」と表示

このような形で、

関数を呼び出す形で使うことで、

結果として値が返されます。

関数の戻り値は「あり」と「なし」が可能

関数に関しては、

まず、基本として抑えることとして、

  • 結果として戻ってくる値のことを「戻り値」

ということをまずは、抑えておきましょう。

この「戻り値」に関して、

関数を使っていく上で

  • 関数の「戻り値」を「使う」
  • 関数の「戻り値」を「使わない」

という2種類があります。

初心者の方は、

関数に戻り値が必ずいると考えてしまいがちですが、

  • 関数の「戻り値」は、「使う」「使わない」は使い分ける

ということを意識して、

自分が使う関数は、

戻り値が必要かどうかを考えて関数を使うようにしましょう。

関数で「戻り値」を「使う」パターン

関数で「戻り値」を「使う」パターンについては、

// 関数を定義
function sample() {
  return '関数から返す文字';
}

// 関数の呼び出し
let moji = sample();

// 表示確認
console.log(moji) //「関数から返す文字」と表示

先ほど、サンプルで見せた

のような形で、

戻り値を使うことを想定しています。

上記のサンプルを詳しくみていくと、

という感じで、

let moji = sample();

この部分で、

「return」で返される値が、

変数に対して、値が入ります。

このように、

関数から戻り値を取る場合は、

「return」を使って関数から戻された値を使うことができます。

関数で「戻り値」を「使わない」パターン

関数の戻り値を「使わない」というパターンとしては、

  • 関数ないでコンソールの表示だけを行うような場合
  • 全体として参照可能な「スコープ」である「変数」を使用する場合

などが、

戻り値を必要としないパターンとして使うことがあります。

関数内でコンソールの表示だけを行うような場合は、

// 関数を定義
function sample() {
  // コンソールに表示
  console.log('関数内で表示を行います');
}

//関数を呼び出し
sample();

このように、

関数を呼び出すだけなので、

シンプルでわかりやすいと思います。

もう1つの、

全体として参照可能な「スコープ」である「変数」を使用する場合については、

「スコープ」の概念の理解が重要なので、

よく理解できていないという人は、

以下のページを参考に理解を深めてください。

上記のページの中で、

ポイントとしては、

この図を理解できていると良いですね。

実際の「スコープ」を考慮した例としては、

let moji = '最初の値';

function sample() {
  moji = '値を書き換え';
}

// 文字を確認1回目
console.log(moji);

// 関数を呼び出し
sample();

// 文字を確認2回目
console.log(moji);

このように、

関数の外で宣言された変数を使って処理を行うことで、

結果の値を「戻り値」として使用することはありません。

上記のコードを具体的にみていくと、

このように、

関数の外で定義されている変数を活用することで、

引数や戻り値などを使わずに関数を作ることができます。

この変数の「スコープ」を基礎として理解しておきながら、

関数内で使うことにも少しずつ慣れていくと良いでしょう。

全体として参照可能な「スコープ」である「変数」使用する例

  • 判定処理として、「0」になるかどうか、
  • この辺りを試すことは、
  • 理解を深めるので、
  • 以下のようにコードを作って
  • 試してみるとよいでしょう。
  • サンプルコード(自分なりに答えを確認してみましょう)
// 変数の定義
let globalVariable = 100;

function sample() {
  // 元の値に100を加える
  globalVariable = globalVariable + 100;
}

// 値を確認1回目
console.log('globalVariableの値 ['+globalVariable+']');

// 関数を呼び出し
sample();

// 値を確認2回目
console.log('globalVariableの値 ['+globalVariable+']');

// 関数を呼び出し
sample();

// 値を確認3回目
console.log('globalVariableの値 ['+globalVariable+']');

// 値を確認1回目
// 表示:globalVariableの値 [100]
console.log('globalVariableの値 ['+globalVariable+']');

// 関数を呼び出し
sample();

// 値を確認2回目
// 表示:globalVariableの値 [200]
console.log('globalVariableの値 ['+globalVariable+']');

// 関数を呼び出し
sample();

// 値を確認3回目
// 表示:globalVariableの値 [300]
console.log('globalVariableの値 ['+globalVariable+']');

初心者向けピックアップ

Webデザインの基礎学習におすすめ

IT関連の記事を掲載

HTML/CSS/JSのポイントのみ学習

ポートフォリオを作る流れを理解

コスパ良く学習サポートを受けたい人向け