読者です 読者をやめる 読者になる 読者になる

javascriptの関数の書き方について

javascript

最近少しずつ、javascriptについても学習をしています。

当然ながら、rubyとは動きが違うのですが、違う部分を意識するためにも、ここに記載しておきます。

関数の作り方

function命令で定義する

標準的な書き方ですね。

function 関数名 { 処理を記入 }

function hello(name) {
  return `my name is ${name}`;
}
hello("mikami");
"my name is mikami"

Functionコンストラクターで作成する

これは特殊な書き方だと思います。

特にこれで書く利点もないようなので、普通は書かないほうがいいです。

ただ、こんな書き方もあるんだなということで、書いておきます。

var 変数名 = new Function(引数, 処理を記入)

var hello = new Function('name', 'return `my name is ${name}`');
hello('mikmi');
"my name is mikami"

関数リテラルで作成する

これもよく利用される書き方だと思います。

var 変数名 = function(引数, 処理)

var hello = function(name) {
  return `my name is ${name}`;
};
hello('mikami');
"my name is mikami"

アロー関数で定義する

ES2015から使用できるようになりました。

coffee script を使用している人は、アロー演算子は馴染みがあるかも。

var hello = (name) => {
  return `my name is ${name}`;
}
hello('mikami');
"my name is mikami"

function命令の処理

javascriptのfunction命令は静的解析で行われます。

そのため、次のようなコードは動きます。

hello('mikami');

function hello(name) {
  return `my name is ${name}`;
};

では、関数リテラルで表現している場合はどうなるでしょうか?

hello('mikami');

var hello = function(name) {
  return `my name is ${name}`;
};

Uncaught TypeError: hello is not a function(…)

関数リテラルの場合は、実行時に評価されています。

ここら辺はちょっとした注意事項だと思います。

以上です。