WEBOPIXEL

JavaScriptの関数の基礎を勉強してみた

Posted: 2011.07.26 / Category: javascript 

JavaScriptの関数って他の言語では見ない書き方をされていることがたびたびあります。(自分自身他の言語を詳しく知っているわけではありませんが、、、)
そこで今更ではありますが、JavaScriptの関数の基礎をちょっとだけ勉強してみました。

Sponsored Link

シンプルな関数

はじめに引数を2倍にして返すというシンプルな関数を作ってみます。

JavaScript

 
	function hoge(x) {
		return x * 2;
	}
	console.log(hoge(10));	//20
	

これはどんな言語でもほとんど同じなので問題ないですね。

関数を変数に入れる

関数は変数に入れることもできます。
呼び出し方は同じですね。

JavaScript

 
	var hoge = function(x) {
		return x * 2;
	};
	console.log(hoge(10));	//20
	

さらに関数の後に引数を指定することで、定義後すぐに実行できます。

JavaScript

 
	var hoge = (function(x) {
		return x * 2;
	})(10);
	console.log(hoge);	//20
	

引数にオブジェクトプロパティを使用する

関数に複数の引数がある場合、順番にも気をつけないといけません。
オブジェクトプロパティを使用することで、名前と値をペアで指定することができ引数の順番を気にすることなく記述できます。

JavaScript

 
	function hoge(args) {
		return args.hoge1 + args.hoge2 + args.hoge3;
	}
	console.log(hoge({hoge1:10, hoge2:20, hoge3:30}));
	

コンストラクタ関数

JavaScriptにはクラスがないのですが、コンストラクタ関数を使えばクラスっぽいことができるらしいです。
「x」「y」の2つのプロパティを持つ関数を定義します。
ちなみにコンストラクタ関数には直接returnを記述してはいけません。

JavaScript

 
	function hoge(x, y) {
		this.x = x;
		this.y = y;
	}
	

このコンストラクタ関数をオブジェクト化して、プロパティ「x」「y」にアクセスしてみましょう。

JavaScript

 
	var hoge1 = new hoge(10, 20);
	console.log(hoge1.x);	//10
	console.log(hoge1.y);	//20
	

コンストラクタ関数の中に関数を定義する

コンストラクタ関数の中には関数を定義することができます。
プロパティ「x」と「y」を足して返す「add」という関数を定義してみます。

JavaScript

 
	function hoge(x, y) {
		this.x = x;
		this.y = y;
		this.add = function() {
			return this.x +this.y;
		};
	}
	

使い方は先ほどとあまり変わりません。

JavaScript

 
	var hoge1 = new hoge(10, 20);
	console.log(hoge1.add());	//30
	

ほんとうに基礎の基礎って感じですが以上です。
JavaScriptちょうきもちわりーって感じでしたが、ちょっとだけ好きになれた気がします。

Web制作会社年鑑 2011 ~Web Designing Year Book 2011~ (Web Designing Books) JavaScript 第5版
Amazon.co.jp