【読書会資料】JavaScriptの関数について②

公開日:2019-07-11
最終更新:2019-07-11

自社の読書会の担当分の資料として。
以下の続きである。
【読書会資料】JavaScriptの関数について①

Chapter4 くり返し利用するコードを1箇所にまとめる - 関数 -

4.2 関数定義における4つの注意点

4.2.1 return命令の直後で改行しない

return命令の直後で改行すると、以下のような「エラーは発生しないが意図した動作もしないケース」が発生するので注意が必要。

function add(num1, num2) {  
    return // 改行  
    num1 + num2;      
}  

// 結果はundifinedとなる  
// 理由はreturnにセミコロンが自動付与されてしまい(return;)、  
// その後の文は無視され、デフォルトのundifinedが返るため  
console.log(add(1, 2));  

return命令以外でも、以下のような文でも命令の直後に改行しないこと。

  1. ラベル付きのbreak/continue命令
  2. throw命令
  3. ++、--演算子(後置)

4.2.2 関数はデータ型の一種

JavaScriptでは「関数はデータ型の一種」のため、以下のコードが成り立つ。

// 変数addに関数型のリテラルを格納  
let add = function(num1, num2) {  
    return num1 + num2;  
}  
// 変数addに数値型のリテラルを格納  
add = 0;  

// 数値型に書き換えられた変数を参照しているため、結果は0  
console.log(add);  

ちなみに下記のコードの場合、結果はどうなるか?

// 変数addに関数型のリテラルを格納  
let add = function(num1, num2) {  
    return num1 + num2;  
}  
console.log(add);  

結果は、下記のように、変数に格納された関数定義が文字列として出力される。

// コンソールの結果は、以下の文字列データ  
function(num1, num2) {  
    return num1 + num2;  
}  

このことから、関数を呼び出すときの丸括弧は「関数を実行する」という意味を持っていることがわかる。(つまり関数を呼び出す時は、addではなくadd()でなければいけない)

4.2.3 function命令は静的な構造を宣言する

JavaScriptにおいて以下のコードは成り立つ。

// add関数はまだ宣言されていないが、呼び出すことができる  
console.log(add(1, 2)); // 3  

function add(num1, num2) {  
    return num1 + num2;  
}  

「function命令はコードをコンパイルするタイミングで関数を登録している」ので、実行時にはすでにコード内の構造の一部として、関数を呼び出すことができる。

4.2.4 関数リテラル/Functionコンストラクターは実行時に評価される

では、4.2.3で記述したコードを関数リテラル(またはFunctionコンストラクター)で書き換えると、どうなるか?

console.log(add(1, 2)); // Uncaught ReferenceError: Cannot access 'add' before initialization  

let add = function(num1, num2) {  
    return num1 + num2;  
}  

結果はエラーが出力される。これはFunctionコンストラクターで記述しても同じ。つまり、関数リテラルおよびFunctionコンストラクターは、function命令とは異なり、代入文の実行時に関数が登録される。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
funacchiの技術ブログ。クリエイティブコーディングに興味あります。現在Processingを少しずつ勉強中。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする