１週間で学ぶべきこと
- 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
参考文献
Discussion