JavaScriptの関数

Rubyでいうところのメソッドを、JavaScriptでは関数と呼ぶ。

・function

functionに続けて関数の名前を記述し、{ }のなかに処理を書く。関数を定義する方法で、関数宣言とよぶ。

function 関数名( 引数 ) {
      # 処理
}

・関数式
関数式と、関数宣言の違いは記述様式にある。

JavaScriptの関数宣言：function 関数名( ){  ~  }
関数式：function( ){ }
                            無名の関数を変数に定義または代入して関数を定義する。

# 関数宣言の場合

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


# 関数式の場合

変数 = function( 引数 ){
    # 関数内の処理
}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・関数式と関数宣言の特徴

hello()
const hello = function(){
console.log("hello")
}

# 出力結果
Uncaught ReferenceError: Cannot access 'hello' before initialization
   at <anonymous>:1:1

1行目の時点で関数helloは定義されていないため、このようなエラーが発生する。

hello()

function hello(){
 console.log('hello')
}

# 出力結果
hello

関数宣言は先に読み込まれる。
関数式であれば先に読み込まれることはない。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・無名関数

関数式で記述されているfunction( ){ }。関数名なしで関数を定義することができる。より簡潔なコードが記述できるメリットがある。

# 関数宣言
function hello(){
 console.log('hello')
}

# 関数式（無名関数）
const hello = function(){
 console.log('hello')
}

・即時関数

関数を定義すると同時に実行される構文。関数を定義してから呼び出すという手間を省くことができる。

# 無名関数
const countNum = function(num) {
 console.log(num)
}
countNum(1)

# 即時関数
(function countNum(num) {
 console.log(num)
})(1)

( )の中に、functionからはじまる関数定義そのものを配置することで、その関数を即実行する。関数を呼び出す手間が省ける。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・アロー関数

functionの記述を省略し、代わりに（）=>という記述によって関数を定義する構文。より短い記述で関数定義をできる。

# 無名関数
const 変数名 = function(){
 処理
}

# アロー関数
const 変数名 = () => {
 処理
}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

JavaScriptにおいて、変数定義などの最後にはセミコロンを以下のように付与する。目的は文章の終わりを示すため。

・・・このセミコロンは省略できる。

ただし、以下のように即時関数を用いる場合などはエラーとなることがあある。文字列がひと続きであると判断されてしまうため。

# エラーとなる
const your_name = "Tom"

(function sayHello(name) {
 console.log(name);
})(your_name);


# エラーにはならない
const your_name = "Tom";

(function sayHello(name) {
 console.log(name);
})(your_name);

2020/11/11