【JavaScript】学習開始１週間で覚える内容

# １週間で学ぶべきこと

 - var/let/constの使い分け
 - スコープの種類
 - 無名関数/即時関数
 - アロー関数

# var/let/constの使い分け

 - 昔は、変数が```var```のみだった
 - let,constは、```再代入の要否```で使い分ける

| 変数/定数| 再宣言|再代入|スコープ|
|:--:|:--:|:--:|:--:|
|var|○|○|関数|
|let|○|×|ブロック|
|const|×|×|ブロック|



####◆ 変数の巻き上げ
 - 関数を宣言した時点で、ローカル変数が```初期化(undefined)```される現象
 
```sample.js
 //ローカル変数
 var num = 0;
 //関数宣言
 var call = function(){
 //undefinedが出力される
   console.log(num); 
 //再代入として扱われる   
 var num = 1;
 //再代入した結果が出力される　　　　  
 console.log(num);
}
```

#スコープの種類

|スコープ|詳細|
|:--:|:--:|
|グローバル|プログラムの**トップレベル**で宣言された変数が持つスコープ|
|関数|**関数(function)単位**で作成されるスコープ|
|ブロック|**ブロック{}単位**で作成されるスコープ|

####◆関数スコープ

```sample.js
 //関数宣言
function fn() {
 //関数スコープを持つ変数宣言
 var num = 0;
 //変数numは、function内でのみ有効
 console.log(num);
 }
```

####◆ ブロックスコープ

```sample.js

function fn() {
 //for文を定義し、ローカル変数iを宣言
 for (let i = 0; i < 2; i++) {
 //変数iは、参照可能。 0,1が出力される
  console.log(i);
 }
 //for文のブロックスコープ外であり、変数iは参照不可
  console.log(i);
 }
```
#無名関数/即時関数

 - 無名関数：変数に```関数そのものを定義```することにより、```関数名```を省略する
 - 即時関数：```functionそのものを()で括り、変数に代入```することで、関数名、変数を省略する

####◆ 通常の関数

```sample.js
//関数名numを持つ関数を定義
function num(x,y){
//関数スコープ内に変数resultを定義
  var result = x + y;
//戻り値として出力
  return result;
}
//変数sumに、関数名numを代入する
  var sum = num(1,2);
//変数sumを出力
  alert(sum);
```


####◆ 無名関数

```sample.js
//変数numを宣言し、関数を定義
var num = function(x,y){
//関数スコープ内に変数resultを宣言
  var result = x + y;
//戻り値として出力
  return result;
}
//関数を内包した変数numから引数を取得
 var sum = num(1,2)
 alert(sum);
```

####◆ 即時関数

```sample.js
//変数numを宣言し、関数を定義
var num = (function(x,y){
//関数スコープ内に変数resultを宣言
  var result = x + y;
//戻り値として出力
  return result;
})(1,2);
//関数定義を内包した変数numを出力
  alert(num);
```

#アロー関数

####◆ 通常ケース(無名関数)

```sample.js
//変数numを宣言し、関数を定義
var num = function(x,y){
//関数スコープ内に変数resultを宣言
  var result = x + y;
//戻り値として出力
  return result;
}
//関数を内包した変数numから引数を取得
 var sum = num(1,2)
 alert(sum);
```

####◆ アロー関数

```sample.js
//アロー関数を内包した変数numを宣言
var num = (x,y) => {
//関数スコープ内に変数resultを宣言
  var result = x + y;
//戻り値として出力
  return result;
}
//関数を内包した変数numから引数を取得
 var sum = num(1,2)
 alert(sum);
``` 

####◆ thisを用いた通常関数

```sample.js
//変数numを宣言
num = 'example';
//関数sampleを定義
function sample(){
//"this"を用いて変数numを呼び出す
  console.log(this.num);
}
//変数sumを定義
let sum = {
//変数numに再代入
  num: 'example1',
//関数sampleを指定
  func: sample
}
//変数sumを出力
  sum.func();
//出力結果 ※再代入した'example1'が出力される
  example1
```

####◆ thisを用いたアロー関数

```sample.js
//変数numを宣言
num = 'example';
//アロー関数を内包した変数sampleを定義
let sample = () => {
//"this"を用いて変数numを呼び出す　※this.numをconsole.logする関数として確定
  console.log(this.num);
}
//変数sumを定義
let sum = {
//変数numに再代入
  num: 'example1',
//関数sampleを指定
  func: sample
}
//変数sumを出力
  sum.func();
//出力結果　※アロー関数内でthis.numとして宣言された時点で確定する
  example
```

# 参考文献

 - [JavaScript var/let/constによる変数宣言](https://qiita.com/wannabe/items/b2a0d63fc786eab13c48)
 - [JavaScriptのスコープ総まとめ](https://app.codegrid.net/entry/2017-js-scope-1)
 - [【JavaScript】無名関数とは/即時関数とは](https://qiita.com/hiroshimaeasyryo/items/a270b00c420ed96f02f0)
 - [【JavaScript入門】すぐわかる！無名関数とは](https://www.sejuku.net/blog/60321)
 - [JavaScript アロー関数を説明するよ](https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)
 - [【JavaScript】アロー関数式を学ぶついでにthisも復習する話](https://qiita.com/mejileben/items/69e5facdb60781927929)