0
0

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.

【JavaScript】無名関数とは????

Last updated at Posted at 2023-05-04

【JavaScript】 無名関数とは????

はじめに

JavaScript初学者の私がつまづいた部分を備忘録およびアウトプットとして記事にしています。
同じ初学者の方の理解するきっかけになればと思います。

無名関数とは?

無名関数とはその名の通り名前のない関数になります。
関数は本来下記のsumのように名前がつきます。

function sum(x, y){
  return x + y
};
console.log(sum(1,1))

このコードの説明としては、sum関数は引数x, yの2つをもらいその2つを合計したものを返すという関数です。
出力ではsum関数の実行にあたって引数が2ついるのでsum(1,1)としています。そして出力するためにconsole.log()の中に入れることで出力しています。

上記に対して無名関数はこのようになります。

const sum = function(a, b) {
  return a + b;
};
const result = sum(1,1)
console.log(result)

このコードでは関数function以降の部分は名前がない無名関数になっており、
その無名関数をsum変数に代入している状態です。
そしてその関数を持ったsum変数に引数を与えて関数を呼び出しresult変数に代入。console.log(result)で結果が出力されます。

無名関数を他の関数の引数として渡してみる

const sum = function(a, b) {
  return a + b;
};
function calculate(operation, a, b) {
  return operation(a, b);
};
var result = calculate(sum, 3, 5);
console.log(result); 

このコードでは先ほど作成した無名関数を持った変数sumをcalculate関数の引数として渡したコードになります。
正直このようなコードを始めた見た時にoperationはどこからきたんだろう???と悩みました、、、
このoperationは無名関数を持った変数sumを受けている、ただの仮引数名になります。

return operation(a, b);

上記operationの部分は実質下記のような形になっています。

sum(3, 5);

そして引数3と5を受け取った無名関数が実行されます。その値が変数resultに入る流れになります。

おわりに

進むにつれて無名関数をサラッと使ったサンプルが多くなるので基礎しっかり理解していないと頭の中がグチャグチャになってしまいますね、、、
最後まで見ていただきありがとうございました!

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?