「JavaScript」関数定義

関数とは

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

Rubyでメソッドを定義する際はdef メソッド名 ~ endと記述しました。一方で、JavaScriptではfunction 関数名(){ 処理 }と記述することで関数を定義することができます。

function

functionを用いることで関数を定義することができます

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

#　JavaScriptの戻り値
JavaScriptでは関数の戻り値をreturnを用いて明示する必要があります。

function calc(num1,num2){
  return num1*num2
};

const num1 = 3
const num2 = 4
console.log(calc(num1,num2))

上記のように最終的に返したい結果の部分にreturnをつけてあげてください。

関数宣言と関数式について

関数宣言については上記で紹介した

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

特徴として下記で紹介する関数式とは違い関数宣言は先に読み込まれます。
順番に読み込まれるのではないので定義している文より先に呼び出す文があってもエラーにならず結果を返してくれます。
####関数宣言
一方で、関数式の場合は、function(){}という無名の関数を変数に定義または代入して関数を定義する、という記述になります。

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

こちらは逆に順に読み込まれるので定義前に呼び出したりすると定義されていないよとエラーになること間違い無いでしょう。

関数式の種類

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

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

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

###即時関数
即時関数とは、関数を定義すると同時に実行される構文です。関数を定義してから呼び出すという手間を省くことができます。
()の中にfunctionからはじまる関数定義そのものを配置することで、その関数を即実行するということができるようになります。その結果、関数を呼び出すという手間が省けます。

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

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

###　アロー関数
アロー関数とは以下のようにfunctionの記述を省略し、その代わりに（）=>という記述によって関数を定義する構文です。より短い記述で関数定義をできるというメリットがあります
このように、アロー関数を用いることで短い記述で関数を定義することができます。

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

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