javascript関数の種類まとめ

カテゴリー︎： 【JavaScript】

関数とは、複数の処理をまとめるための機能である。

（サンプル例）引数で底辺、高さを受け取り、戻り値で三角形の面積を返す関数をつくる

三角形の数式⇒三角形の面積=底辺×高さ÷2

【関数宣言】①function命令で定義する


function triangle(teihen, height) {
  return teihen * height / 2;
}

document.writeln('三角形の面積＝' + triangle(10, 5) + ' cm2(平方（へいほう）センチメートル)');

【関数宣言】②Functionコンストラクタ経由で定義する

javascript組み込みオブジェクトの【Functionオブジェクト】のコンストラクタを利用して定義できる

Functionコンストラクタは関数が受け取る、

仮引数を順に並べ、最後に関数の本体を指定するのが基本だが

特別な理由がない限り、

あえてFunctionコンストラクタを利用するメリットはない

１点だけ、function命令にない特徴は、

Functionコンストラクタでは、

引数や関数本体を文字列として定義できるという点がある

なので関数を使う場合は、

基本的にfunction命令か、関数リテラルで定義したほうが無難である

※ newを省略することも可能　↓
var triangle = Function(‘teihen’, ‘height’, ‘return teihen * height / 2’);


var triangle = new Function('teihen', 'height', 'return teihen * height / 2');

document.writeln('三角形の面積＝'+ triangle(120,5)+' cm2(平方（へいほう）センチメートル)');

【関数式】③-1関数リテラル表現で定義する

関数リテラルは宣言した時点では名前をもたないので、

匿名関数や無名関数と呼ばれることがある

関数リテラル表現で定義するということは、

関数を変数に代入したり、

ある関数の引数として渡したり、

あるいは、戻り値として、関数を返すことが可能である


var triangle = function(teihen, height){
  return teihen * height / 2;
}

document.writeln('三角形の面積＝' + triangle(20, 5) + ' cm2(平方（へいほう）センチメートル)');

【関数式】③-2関数リテラル(即時関数)で定義する


var triangle = function(teihen, height){
return teihen * height / 2;
}
document.writeln('三角形の面積＝' + triangle(10, 5) + ' cm2(平方（へいほう）センチメートル)');

即時関数で書き換えると↓↓↓↓↓↓

(function(teihen, height){
console.log("三角形の面積=" + teihen * height / 2 + "cm2 です。");
})(30, 40);

(function(name){
console.log("hello! " + name);
})("tom");

(function(teihen, height){
console.log("三角形の面積=" + teihen * height / 2 + "cm2 です。");
document.writeln("★三角形の面積=" + teihen * height / 2 + "cm2 です。");
})(10, 5);

関数の巻き上げ

関数宣言①function命令では、宣言前でも関数を実行できる仕様
コードを解析・コンパイルするタイミングで関数を登録するので、
関数の実行時にコード内の一部として、関数をどこからでも呼び出せるということである

下記の２パターンはどちらでも正常に動く

function triangle(teihen, height) {
return teihen * height / 2;
}
console.log(triangle(10,5));//①function命令なので関数をどこからでも呼び出せる

console.log(triangle(10,5));//①function命令なので関数をどこからでも呼び出せる
function triangle(teihen, height) {
return teihen * height / 2;
}

では、次のケースでは

関数式（関数リテラル）では、実行時（代入時）に評価されるので
呼び出し元のコードよりも先に記述する必要がある

//正常なコード
var triangle = function(teihen, height){
return teihen * height / 2;
}
console.log(triangle(10,5));//呼び出し元のコードが先に記述してあるのでOK

//コードエラー
console.log(triangle(10,5));//呼び出しの前で実行しているのでNG
var triangle = function(teihen, height){
return teihen * height / 2;
}

PAGE TOP