Javascriptの関数定義

WHY

javascriptのカリキュラムは終えたが、いまいちピンとこないためにアウトプットの一環として書いていきます。

---

javascriptの関数定義を初心者なりにまとめてみます。

function

functionを用いることで関数を定義することができる。functionに続けて「関数名、（）{ }」と記述していき、{}のなかに処理を書いていく。

function 関数名( ) {
  // 処理
}

//(例)
function sayHello(){
  console.log("こんにちは")
}

sayHello()

コンソールでの出力

関数宣言

このように関数名を定義し、処理を書いていく定義を関数宣言という。

関数式

関数宣言は関数名を記述するのに対し、関数式の場合は、function(){}という無名の関数を変数に定義または代入して関数を定義する。

変数 = function( 引数 ){
  // 処理
}

無名関数

関数名なしで定義する。より簡潔なコードが記述できるというメリットがある。

// 関数宣言
function hello(){
  console.log('こんにちは')
}

// 関数式（無名関数）
const hello = function(){
  console.log('こんにちは')
}

即時関数

関数を定義すると同時に実行される。関数を定義してから呼び出すという作業を短縮することができる。

// 無名関数
const hello = function(text) {
  console.log(text)
}
  hello("こんにちは")

// 即時関数
(function hello(text) {
  console.log(text)
})("こんにちは")

アロー関数

functionの代わりに「（）=>」という記述によって関数を定義する。より短い記述で関数定義をできる。

// 無名関数
const hello = function(text){
  console.log(text)
}

// アロー関数
const hello = (text) => {
  console.log(text)
}

---

javascriptはrubyと違い、関数名を定義する場所に関数名だけではなく、そのまま処理を記述することが多々あります。

//(例)
pullDownButton.addEventListener('mouseover', function(){
    console.log("mouseover OK")
  })

似ているようできちんと紐解いて学んでいこうとおもいます。