初心者による初心者のためのJavaScript講座Ⅶ|ゼロからのWeb制作 Vol.22

ペンギン,ジャバジャバ

ペンギン,ジャバジャバ

こんにちは、鈴木です。

今回は、今まで作ったプログラムで説明が足りなかった部分を補足したいと思います。

目次

  1. 関数を定義する3つの方法
  2. 変数宣言は必須であるか?

1.関数を定義する3つの方法

関数を定義する方法は大きく分けて次の3つがあります。

  • function命令で定義
  • Functionコンストラクタ経由で定義
  • 関数リテラル表現で定義

◆function命令で定義

本講座で書いてきた関数はすべてfunction命令で定義しました。

基本的な構文はこちらになります。


function 関数名 (引数1〔,引数2…〕){
関数内で実行される任意の命令
戻り値
}

関数名は適当で構わないと今までの講座で言っていましたが、関数名を付けるときは以下の二つに注意してください。

  • 識別子を指定
  • その関数が何の処理をしているか分かる関数名

識別子は次の規則があります。

  • 1文字目は、英字/アンダースコア(_)/ドル記号($)のいずれかであること
  • 2文字目は以降は、1文字目で使える文字、または数字であること
  • 変数名に含まれる英字の大文字、小文字は区別される
  • Javascriptで意味を持つ予約語でないこと

予約語とは例えば、ifやforなどのECMAScriptの仕様で既存のキーワードとして予約されている言語です。

1文字目に数字を入れたり、2文字目以降に記号などを使わなければ、特に意識する必要はないと思います。後は、分かりやすい関数名にするだけです。

また、function命令で注意する点で、引数を指定する丸カッコ()や関数の中身を指定する中カッコ{}は省略することができません。省略すると関数の中身がそのまま出力されます。

function命令は静的な構造を宣言します。
これは実際に例を出して説明します。


document.writeln(multi(3,4));-①
function multi(a,b){
return a*b;
}

これは、文字列を出力するdocument.writelnでmultiという関数の結果を表示します。

*multiはmultiplication掛け算の略です。

①の時点はmultiという関数は定義されていませんが、ブラウザ上では3×4の答え12が表示されます。

これが、function命令は静的な構造を宣言しているということです。静的な構造とは「コードを解析/コンパイルするタイミングで、関数を登録している」という意味で、もっとわかりやすく言うと、プログラムが実行される前に、multiという関数がコンピュータによって認識されているということです。

だから、①の時点で関数が定義されていなくても、関数の答えが表示する訳です。

◆Functionコンストラクタ経由で定義

JavaScriptの組み込みオブジェクトとしてFunctionオブジェクトがあります。このFunctionオブジェクトのコンストラクタを利用して関数を定義することができます。

基本的な構文はこちらになります。


var 変数名=new Function (引数1〔,引数2…〕,関数の中身);

先程の掛け算の関数の例をこの形にすると、


var multi=new Function ("a","b","return a*b");
document.writeln(multi(3,4));

*ここで引数を”a,b”と指定することも可能です。

function命令にはないFunctionコンストラクタ重要な特徴として、関数の中身を文字列として指定することができる点。つまり、動的に関数の挙動を変えることができます。

◆関数リテラル表現で定義

基本的な構文はこちらになります。


var 変数名=function(引数1〔,引数2…〕){
関数内で実行される任意の命令(群)
戻り値
}

ここでも、先程の掛け算の関数の例をこの形にします。


var multi=function(a,b){
return a*b;
}
document.writeln(multi(3,4));

function命令と似ていますが、以下の違いがあります。

function命令では、関数名を直接定義しているのに対し、関数リテラルでは、function(a,b)と名前のない関数を定義した上で、変数multiに格納しています。

このように、宣言したときには名前のない関数を匿名関数、または、無名関数といいます。

*function命令の終わりで説明した静的な構造に関して、Functionコンストラクタと関数リテラルは当てはまりません。そのため、function命令の終わりで説明した形でコードを書くとエラーが生じます。

2.変数宣言は必須であるか?

JavaScript講座Ⅵで変数を省略することは可能であるとか書きましが、省略することで生じる問題についてここで書きたいと思います。


range="Global";-①
function getvalue(){
range="Local"-②
return range;
}
document.writeln(getvalue());-③
document.writeln(range);-④

この例で、仮にvarと宣言していた場合、③では「Local」、④では「Global」が表示されます。これは、グローバル変数、ローカル変数を利用しているため、正しい動作となります。

しかし、この例では、③④ともに「Local」が表示されます。なぜかというと、var宣言されなかった変数はすべてグローバル変と見なされるからです。

つまり、①で宣言した変数が②で上書きされてしまったのです。

なので、ローカル変数を使う時は、必ずvar宣言する。また、こういった不具合が生じないために、原則として変数にはvarを付けるようにしましょう。