備忘録１：JavaScriptの関数定義について

転職のための3月6日から某スクールにでプログラミング学習を始めた32歳のおっさんです。時系列でHTML⇨CSS⇨Rubyを学習中。

あとタイトルの書き方変えました。
今までの書き方だと自分が内容わかんないんでっ！

学習内容：JacaScriptにおける関数定義の方法について

1：開幕の自問自答

①関数ってなんすか？
　⇨Rubyで言うメソッドみたいなもんです。
②def〜メソッド名〜endのやつ？
　⇨左様でござる。
③しゅんころでブログ終わるのでは？
　⇨（4つの方法があるので言うほどしゅんころでは）ないです。
　　　※今知ってる限りで4つです。他にもあるかも？

と言うわけで４種類、書き残しておきます。
相変わらずSSメインですが、今回からcode機能も積極的に使います。
内容間違ってたらさーせん( ˘ω˘)

2：事前知識

今回、JavaScriptを初めて触るのでいくつか前提知識を残しておきます。
SSは全てChromeの検証モードのconsoleで動かしたものを撮影してます。

test＝変数名　”中身”＝変数の中身。値。

/* 変数を定義する。 */
const test = "中身"

constは値の変わらない変数を定義する際に使用する。
具体的には以下
test = "中身変更"　←NG
const test = "定義し直す"　←NG

/* 他の手法 */
let test = "中身"

letは値を変えられる変数を定義する際に使用する。
具体的には以下
test = "中身変更"　←OK
const test = "定義し直す"　←NG

/* 他の手法 */
var test = "中身"

varは再代入・再定義どちらも可能。
具体的には以下
test = "中身変更"　←OK
const test = "定義し直す"　←OK

ただし、なんでもOK故に可読性がむちゃくちゃ悪いので基本使われることはない。
分かりづらさが中臣鎌足。

/* 関数を定義する */
function

関数を定義する際に使用する。
Rubyで言う　def みたいなもの。

３：関数宣言

今まで学習してきたRubyの形式に最も近い？関数定義の手法。
console.log が Ruby で言う puts にあたる。
初めに関数が読み込まれるため、クセがなく使える。
とてもよく使用される。らしい。

4：関数式

変数に関数を取り込む形で扱える。
const で 変数test5 を定義し、その後の処理を変数に入れている。
変数＝関数　となり、この名前の無い関数を　無名関数　と言う。らしい。
特徴は以下。

/* NGな例 */
test()

const test = function(){
  console.log(`これはダメな例`)
}


/* OKな例 */
const test = function(){
  console.log(`OKな例`)
}

test()

NG例のように記述すると
関数を呼び出した時点ではまだ関数が定義されていないためエラーが出る。
そのため、関数の呼び出しは必ず関数の後に記述する必要がある。（OK例）

こちらもよく使用される。らしい。

5：アロー関数

functionの記述を省略出来る記述方式。
おそらく　＝＞　これが矢に似てるからアロー関数。
近年、この記述方式を採用する企業が増えているらしい。
また、関数式と同じく関数の呼び出しは関数の後にする必要がある。
以下NG例

/* NG例 */

test()

const test = () => {
  console.log(`NGな例`)
}

この場合、関数式と同じく　test（）　の段階では関数が定義されていないためエラーとなる。 

6：即時関数

関数を読み込んだ時点で返り値を出す。関数を呼び出す手間が省ける。
そのため、実行するまでもなくSSに20000と出ている。

const num3 = 100
const num4 = 200

この2つがどこにも見当たらない。
なんと、変数の定義すら省略されているのだ。
この場合、SSで言う(100,200)が実引数なのである。

現場での使用頻度は、わたしはまだ知る由もない。

7：終わり

思ったよりも長くなりましたが今回は終了です。
この書き方の方が、後々見たときに分かりやすい気がします。

まだJavaScriptに触って二日目となるため、どっか間違ってたらさーせん。
とはいえ、まぁ自分用ですしお寿司( ˘ω˘)
多分基本of基本of基本のため、絶対に憶えなきゃあいけないはず。
何はともあれ

終わり！！！！！！！！！！！！！！！