JavaScriptには基本的な関数の書き方が2種類あります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//関数文 function Func1(){ } //関数式 var Func2 = function(){ } //関数式2 var Func3 = function testFunc(){ } |
関数文と関数式です。
二つの関数を使ってみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <body> <p>関数</p> <p id = "myid1">こんにちは！</p> <p id = "myid2">こんにちは！</p> <input type="button" value="isClicked1" onclick="isClicked1()"> <input type="button" value="isClicked2" onclick="isClicked2()"> <script> //関数文 function isClicked1(){ var text = document.getElementById("myid1"); if (text.innerHTML == "こんにちは！") { text.innerHTML = "こんばんは！"; } else{ text.innerHTML = "こんにちは！"; } } //関数式 var isClicked2 = function(){ var text = document.getElementById("myid2"); if (text.innerHTML == "こんにちは！") { text.innerHTML = "こんばんは！"; } else{ text.innerHTML = "こんにちは！"; } } </script> </body> </html> |
JavaScript関数の特徴
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function JSfunc1( a, b, c) { console.log(a,b,c); } //func("A");として実行する //A undefined undefined //渡してない変数はundefinedとなるが少なく渡すこと自体は問題ない。 function JSfunc2( a, b, c) { for (var p of arguments){ console.log(p); } } //func("A","B","C","D");として実行する //A B C //変数を多く渡すことも問題ない。 |
JavaScriptの関数では引数を多く、あるいは少なく渡すことが可能です。
渡していない変数を関数内で利用した場合、undefinedとなります。
それを解決するのがargumentsを使い引数をループ処理する方法です。
関数文
|
1 2 3 |
function Func1(){ console.log("HelloWorld"); } |
他の言語でもお馴染みの書き方ですね。
()内に変数を入れるなどの動作は同じです。
またファイル内のどの位置で宣言してもかまいません。
宣言前の行に Func1(); とし関数を実行することが可能です。
しかし、もう一度同じ関数名で宣言することはできません。エラーとなります。
関数式
関数式の場合、関数を変数に代入し利用することができます。
|
1 2 3 |
var Func2 = function(){ console.log("Hello World"); } |
この書き方の場合、Func2();と書いて関数を実行しますが、Func2は変数のため、宣言前に実行することはできません。
しかし、変数なので同じ変数名に上書きすることが可能です。