アウトプットを頑張る

初めてのプログラミング学習期間中の記録と、日頃読んでいる本をメモのアウトプットをがんばります。

【プログラミング学習】JavaScriptの関数宣言

JavaScriptの様々な関数定義

f:id:yuma6128:20220111072108j:plain

関数宣言

  • 関数のときに紹介した定義する方法です。

ingkiym926.hatenablog.com

function 関数名( 引数 ) {
 // 関数内の処理
}

こちらの関数宣言はRubyと共通部分も多かったと思います。
JavaScriptでは関数の定義のために、別の方法があります。
今回は、関数定義方法である関数式を紹介します。

関数式

関数式と、関数宣言の違いは記述様式です。

// 関数宣言(これまで)

function 関数名( 引数 ) {
 // 関数内の処理
}

// 関数式 (今回)
 変数 = function( 引数 ){
 // 関数内の処理
}

関数宣言と関数式の違い

  • 関数宣言と関数式は読み込まれるタイミングが異なります。
    下記で違いを説明いたします。
hello()

const hello = function(){
 console.log('こんにちは')
}

f:id:yuma6128:20220113074443p:plain となり、Uncaught ReferenceError: hello is not definedat :1:1 というエラーが1行目の時点で関数helloが定義されていないため表示されます。
関数宣言を用いた場合

hello()
function hello(){
console.log('こんにちは')
}

f:id:yuma6128:20220113074832p:plain
と表示されました。
JavaScriptでは関数宣言は先に読み込まれるために、このような事象が発生します。
一方で関数式であれば先に読み込まれることはありません。