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

3 min read読了の目安(約3200字

1週間で学ぶべきこと

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

var/let/constの使い分け

  • 昔は、変数がvarのみだった
  • let,constは、再代入の要否で使い分ける
変数/定数 再宣言 再代入 スコープ
var 関数
let × ブロック
const × × ブロック

◆ 変数の巻き上げ

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

スコープの種類

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

◆ 関数スコープ

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

◆ ブロックスコープ


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

無名関数/即時関数

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

◆ 通常の関数

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

◆ 無名関数

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

◆ 即時関数

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

アロー関数

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

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

◆ アロー関数

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

◆ thisを用いた通常関数

//変数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を用いたアロー関数

//変数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

参考文献