１週間で学ぶべきこと
- 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