JavaScript入門 関数(function)の定義方法と使い方

スポンサーリンク

JavaScript

前回の記事(JavaScript入門 文字列の基本操作(比較/検索/置換/削除/分割/連結))では、JavaScriptにおける文字列の基本的な扱い方を見てきました。
文字列操作はかなり種類がありますので、無理せず少しずつでも覚えていきましょう。

今回は、JavaScriptの関数(function)の定義方法と使い方について確認します。
プログラミングをしていると、処理内容を1つにまとめて扱いたい時や、同じ処理を使いまわしたい時があると思います。
そんな時に役立つのが関数なのです。
効率的なプログラムを書く上では、必ず関数の知識は必要になってきます。
ぜひこの機会で覚えておきましょう。

スポンサーリンク

関数(function)とは?

関数(function)というのは、複数の処理を1つにまとめることができ、名前を付けることができる機能です。
1つの関数に処理をまとめておくことで、同じ処理を複数書く必要が無くなる上、使い回しが利くようになります。
関数では、必要な値を受け取って、何らかの処理を行い、その結果の値を返すことができます。
関数は、効率的なプログラムを書く上で間違いなく必須となる知識となっています。

関数の定義方法

それでは、関数の定義方法について確認してみます。
主な関数の定義方法には2種類あります。
1つは関数宣言、もう1つは関数式です。

関数宣言による関数定義

最も一般的な関数の定義方法です。
関数をそのまま直接定義する方法なので、とても分かりやすいですね。

function 関数名(引数1, 引数2, ...) {
  // 処理内容
  return 戻り値;
}

関数名には、あなたが付けたい関数名を付けます。

引数には、関数内で扱う変数を定義します。
引数は無しでも良いし、複数定義することもできます。

戻り値というのは、処理の結果を返す時に使います。
returnの後に、返したい値(式)を書きます。
ちなみに、戻り値が要らない場合はreturnの処理は無くでも良いです。

例えば、数値aとbを受け取って、「a + b」を計算した結果を返す関数「add」は、以下のように定義できます。

function add(a, b) {
  return a + b;
}

関数式による関数定義

もう1つの関数定義方法では関数式を使います。
イメージ的には、変数に関数を割り当てる感じです。

var 関数名 = function(引数1, 引数2, ...) {
  // 処理内容
  return 戻り値;
}

上記で定義した、関数addをこちらの方法で定義すると以下のようになります。

var add = function(a, b) {
  return a + b;
}

関数の使い方

関数を使う際は、関数を定義した後に呼び出す必要があります。
関数の呼び出しは、呼び出したい関数名を指定するだけです。

function hello() {
  document.write('Hello!');
}
hello(); // 関数の実行
Hello!

引数がある関数の場合は、関数呼び出しの際に引数を与えます。
例えば、上記で扱ったadd関数を呼び出すときには以下のようにします。
この場合は、引数のaに1、bに2を設定しています。

function add(a, b) {
  return a + b;
}
var result = add(1, 2);
document.write(result);
3

練習問題

それでは、以上を踏まえて練習問題を解いてみましょう。

引数にname,ageを受け取り、「nameさんの年齢はage歳です。」(nameとageには与えられた値)と表示する、関数messageを定義してください。
そして、message(‘鈴木’, 31)を実行した時に、正しく意図した通りの結果になることを確認してください。

練習問題の解答例

関数の主な宣言方法は2通りありますが、ここでは関数宣言による方法で作ることとします。
引数はname,ageで、文字列の連結を使いながらdocument.write()で表示すれば良いですね。

function message(name, age) {
  document.write(name + 'さんの年齢は' + age + '歳です。');
}
message('鈴木', 31);

まとめ

今回の記事では、JavaScriptにおける関数の定義方法とその使い方について確認しました。
いかがでしたでしょうか?
内容をよく理解できたでしょうか?

関数は、効率的なプログラムを作成する際に必須となる知識です。
今後のプログラミングでも頻繁に使いますので、この機会によく覚えておきましょう。

次回は、JavaScriptの配列について見ていきます。
ぜひ楽しみにしていてくださいね。

前回 ≫ JavaScript入門 文字列の基本操作(比較/検索/置換/削除/分割/連結)
次回 ≫ JavaScript入門 配列の使い方(追加/取得/検索/結合/分割/削除)

コメント