1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[JS](基礎)関数について

Last updated at Posted at 2022-01-25

アウトプットとして

Rubyでいうところのメソッドを、JavaScriptでは関数と呼びます。
この関数ですが、いろんな記述の方法があるので整理するために記事にしたいと思いました。

##いろいろな関数定義

関数宣言(function)

JavaScriptではfunction 関数名(){ 処理 }と記述することで関数を定義することができます。

function 関数名(引数) {
  // 処理
}
function calc(num1,num2){
  return num1*num2
}

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

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

const hello = function(){
  // 処理
}
const calc = function(num1,num2){
  return num1*num2
}

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

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

(function 関数名(引数) {
  // 処理
})(呼び出すための引数)
(function countNum(num) {
  console.log(num)
})(1) // => 1

()の中にfunctionからはじまる関数定義そのものを配置することで、その関数を即実行するということができるようになります。

###アロー関数
functionの記述を省略し、その代わりに()=>という記述によって関数を定義する構文です。より短い記述で関数定義をできるという点がメリット。

このアロー関数を少し深掘りしてみた記事がこちら→アロー関数を少しだけ深掘りしてみた

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

// アロー関数
const 変数名 = () => {
  処理
}
const countNum = (num) => {
  console.log(num)
}
countNum(1) // => 1

##それぞれの関数の特徴まとめ

関数定義の種類 特徴
関数宣言 標準的な関数の定義
無名関数 関数を多く使用するコードであるときに使用する。関数名の重複を避けることができる。
即時関数 流用する可能性のない関数を定義するときに使用する。別途関数を定義する手間がない。
アロー関数 無名関数または即時関数において、より省略した記述をしたい時に使用する。

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

returnを記述していない例
function calc(num1, num2){
    num1 * num2
}

num1 = 3
num2 = 5
console.log(calc(num1, num2))
// => undefined(戻り値が取得できてない)
returnを記述した例
function calc(num1, num2){
   return num1 * num2 //戻り値を得るためにreturnを記述
}

num1 = 3
num2 = 5
console.log(calc(num1, num2))
// => 15

##まとめ
関数名などは覚える必要はないと思いますが、どういう書き方があってどういう特徴があるのかは覚えておきたいです!

※補足等ありましたらコメントいただけると幸いです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?