Tips

JavaScript 超入門(8) 関数

JavaScript 超入門(8) 関数

Javascriptを学んでみようという人をターゲットに、JavaScriptの基本を解説していきたいと思います。

他の言語(特にJava等のオブジェクト指向言語)は少しでもかじったことがあるけど、JavaScriptはまだ・・・って人を想定しています。

関数

JavaScriptの中でも非常に深いテーマが「関数」です。

「関数」とは、ひとことで言えばある入力に対して一連の処理を行い出力をするものです。
それに名前をつけておくことで同じ処理を何回でも呼び出すことが可能になります。

本稿では関数のごく初歩的な扱いについて説明していきたいと思います。

関数の宣言

関数は次の構文で定義できます。

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

引数は関数呼び出し時に与えるべき入力を宣言しておきます。
関数の呼び出す元に返す出力が戻り値になります。なお、値を返す必要がない時はreturn文を省略することも可能です。

以下で例を見てみましょう。

function addNums(a, b){
  return a + b;
}
console.log(addNums(2,3));

addNumsは二つの数値の和を返す関数です。呼び出し元はaddNums()で処理を呼び出すことができます。

関数式

JavaScriptにおいて関数はオブジェクトの一種です。データ型の一種と言い換えても構いません。
他の言語の経験者こそんん?と違和感があるかもしれませんが、関数は変数に代入することが可能なのです。(付け加えるならば引数に与えることも可能)

次の例を見てください。

var addNums = function(a, b) {
  return a + b;
}
console.log(addNums(2,3));

上の例では関数リテラルを用いて匿名(無名)関数を定義し、それを変数addNumsに代入しています。
匿名関数とは宣言の時点で名前を持たない関数のことです。

関数がデータ型の一種であることをふまえれば、極端な例ですが次のようなコードもちゃんと動くことがわかります。

var addNums = function(a, b) {
  return a + b;
}
console.log(addNums(2,3));
addNums = 0;
console.log(addNums);

JavaScriptの柔軟な言語体系を表している一例と言えます。

 

メソッド

関数はオブジェクトであり、オブジェクトのプロパティに参照を代入できます。

var sampleObj = {
  addNums: function(a, b){
    return a + b;
  }
};
console.log(sampleObj.addNums(2,3));

このようにプロパティに代入された関数をJavaScriptではメソッドと呼びます
オブジェクトのプロパティのうち、関数であるものがメソッドであるという言い方もできますね。
メソッドの呼び出しは、(オブジェクト).(メソッド名)(引数)で行います。

なお関数の宣言の方法として他にFunctionオブジェクトを用いて明示的に関数オブジェクトを生成する方法もありますが、
上記二つに比べて使われるシーンが少ないので省略します。

 

以上、JavaScriptにおける関数の基本的な扱いについて解説しました。
JavaScriptの関数は他の言語のそれと大きく異なる部分を持っており、プログラム経験者であるほど不思議な印象を受けるかもしれません。
その分、関数を理解することがJavaScriptの理解を深めるポイントと言えます。
その特徴を頑張って覚えていきましょう。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座!Bootstrap活用を学ぶなら・・
魁!小野の塾 連載

Recent News

Recent Tips

Tag Search