javascript Function(関数)の基礎 – 戻り値が複数だった場合の参照方法等

どうもこんばんは。今回のtipsは【Function(関数)の基礎 – 戻り値が複数だった場合の参照方法等】です。基礎を怠ればなんとやらです。備忘録の意味も含めて記しておきます。お役に立てれば光栄なんですが。

関数の基本形

document.getElementByIdブラブラすると長くなるので。なるだけわかりやすくシンプルに説明する為に実行部分の記述等がjQueryになっています。（便利な時代になったもんですね…）
　

//基本形
function ex1() {
	$(‘#debug1’).text(‘150’);
};
//実行
$(function(){
	ex1();
});

　
この例では、$(function(){….});の記述で読み込み時にex1()を実行しています。ここで例えば、実行部分を下記のようwindow.resizeと書き換えた場合、このex1()はウィンドウをリサイズしたタイミングで実行されます。
　

$(window).resize(function(){
	ex1();
});

　
実行・出力結果はデモページの方になります。合わせてご参照ください。

基本形（戻り値単数）

ここからreturn文を使った例になります。これで実行したい式に値を返すことができます。

function ex2(e1, e2) {
	var exAll2 = e1 + e2;
    return exAll2;
};
//実行
$(function(){
	$(‘#debug2’).text(ex2(100, 50));
});

実行結果は150

基本形（戻り値複数 – 参照 – array）

function ex3(e3, e4) {
	var exAll3 = e3 + e4;
	var exAll4 = e3 * e4;
	return [exAll3,exAll4];
};
//実行
$(function(){
	var arr = ex3(10,10);
	$(‘#debug3’).text(arr[0]);
	$(‘#debug4’).text(arr[1]);
});

実行結果は20と100

基本形（戻り値複数 – 参照 – object）

function ex4(e5, e6) {
	var exAll5 = e5 + ‘ & ‘ + e6;
	var exAll6 = e5 + ‘ and ‘ + e6;
	return {x: exAll5, y: exAll6}
};
//実行
$(function(){
	var ob = ex4(‘A’,’B’);
	$(‘#debug5’).text(ob.x);
	$(‘#debug6’).text(ob.y);
});

実行結果はA & BとA and B

出力先

出力・実行先のHTMLは以下のようになります。デモページもありますが、コピーしていろいろいじってみても面白いと思いますよ！

<p id="debug1"></p>
<p id="debug2"></p>
<p id="debug3"></p>
<p id="debug4"></p>
<p id="debug5"></p>
<p id="debug6"></p>

以上になります。