JavaScript 関数のサンプル

JavaScriptの関数のサンプルです。

関数
関数内の変数のスコープ
関数の引数が配列のサンプル
変数に関数を代入して実行するサンプル
同じ関数名が2つあった場合
関数の中に関数があるサンプル
関数の中のthisが指す対象

関数

function 関数名 (引数){
　処理
　return 値
}

関数は処理をまとめることができます。
引数は関数内部のみで参照可能です。パラメータとも言います。
引数は必須ではありません。
returnは、関数の呼び出し元に値を返します。返り値または戻り値といいます。
returnより後ろの処理は実行されません。
returnは必須ではありません。
以下はMDNの関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

引数なし、戻り値なしの関数のサンプル

引数なし、戻り値なしの関数のサンプルです。

<script>

function test1(){
	console.log("テスト"); //テスト
}

test1();

</script>

7行目のtest1()が、3行目の関数を呼んでいます。

引数あり、戻り値ありの関数のサンプル

引数あり、戻り値ありの関数のサンプルです。

<script>

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

let num = test2(2,3);

console.log(num); //5

</script>

7行目のtest2(2,3)が、3行目の関数を引数付きで呼んでいます。
4行目で計算した値をreturnで7行目の呼び出し元に返しています。9行目で5が表示されます。
→3行目の引数(aとb)を仮引数、7行目の引数を実引数といいます。

関数内の変数のスコープ

関数内の変数のスコープのサンプルです。

<script>
var a = 1; //グローバル変数

function test1(){
	const b = 2;
	c = 3; //グローバル変数

	console.log(a); //1
}

test1();

//console.log(b); //エラー b is not defined
console.log(c); //3
</script>

2行目は関数の外で変数を宣言しています。グローバル変数です。
5行目は関数の中で変数を宣言しています。ローカル変数です。
6行目は関数の中で変数を宣言していますが、constをつけていないのでグローバル変数です。

8行目は、2行目のグローバル変数にアクセスできます。
13行目は、関数の外から5行目のローカル変数にアクセスを試みますがエラーになります(b is not defined)。
14行目は、関数の外から6行目の変数にアクセスします。グローバル変数なのでアクセスできてしまいます。

関数の引数が配列のサンプル

関数の引数が配列のサンプルです。

<script>
function test1(array1){
	let sum1 = 0;

	array1.forEach(function(a1){
		sum1 = sum1 + a1;
	});
	return sum1;
}

const a = [1,2,3];

console.log(test1(a)); //6

</script>

11行目は、配列です。
13行目は、引数が配列です。2行目の関数に渡します。
5-7行目は、配列の要素の値を１つずつ足しています。

変数に関数を代入して実行するサンプル

変数に関数を代入して実行するサンプルです。

<script>

function test1(i){
	console.log(i + "です")
}

var a = test1;

a(2); //2です

</script>

変数に関数を代入するときは、関数名だけを記述します。引数の()の部分は不要です。
変数で関数を実行する場合、変数の後ろに引数の()を追加します。

3-5行目は関数です。
7行目は、関数を変数に代入しています。
9行目は、関数を実行しています。

同じ関数名が2つあった場合

同じ関数名が2つあった場合のサンプルです。

<script>
function test1(){
	console.log("前");
}
function test1(){
	console.log("後");
}

test1(); //後

</script>

2,5行目は、同じ関数名です。
9行目は、後の関数が実行されます。

関数の中に関数があるサンプル

関数の中に関数があるサンプルです。

<script>
function test1(a){

	function test2(a){
		return a + 2;
    };
	return test2(a);
}
console.log(test1(1));// 3 
</script>

2行目が外側の関数で4行目が内側の関数です。
9行目は、2行目の関数を呼んでいます。
7行目は、内側の関数test2を実行後、return文で結果を9行目に返しています。

関数の中のthisが指す対象

関数の中のthisが指す対象のサンプルです。

<script>
var a = 1; //グローバル変数

function test1(){

	const a = 3;
	console.log(this.a); //1
}

test1();

</script>

7行目のthis.aは2行目のグローバル変数を指します。
strictモードであれば、エラーになります。
(Uncaught TypeError: Cannot read property 'a' of undefined)