１週間で学ぶべきこと

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

参考文献