【JavaScript備忘録】変数を使う

こんにちは！セミマサです。この記事は変数の備忘録になります。

変数の宣言
1. グローバル変数とローカル変数
2. 変数の巻き上げ
変数の型
変数のスコープ
1. 関数スコープ
2. ブロックスコープ
おわりに

変数の宣言

JavaScriptの変数宣言はvar,let,constの3種類がある。これらをつけなくても変数宣言はでき、その場合グローバル変数として扱われる。

var:関数スコープ。

let:ブロックスコープ。

const:ブロックスコープ。再代入ができない。

グローバル変数とローカル変数

var global = 2;
const variable_test = ()=>{
    var local = 1;
    test = 5;
    return global + local; 
};
const variable_test2 = ()=>{
    var local = 3;
    return test + local; 
};
console.log(variable_test());//3
console.log(variable_test2());//8
console.log(local);//エラー

var global = 2;

const variable_test = ()=>{

var local = 1;

test = 5;

return global + local;

};

const variable_test2 = ()=>{

var local = 3;

return test + local;

};

console.log(variable_test());//3

console.log(variable_test2());//8

console.log(local);//エラー

上記ソースにおいてglobalとtestがグローバル変数、localがローカル変数となっている。

・関数外で宣言した変数globalがvariable_testで参照できていたり、variable_test内で宣言した変数testがvariable_test2で参照できていることからグローバル変数はどこからでも参照可能なことがわかる。

・逆にローカル変数localは関数内でしか参照できないため、console.log(local);はエラーが発生する。

変数の巻き上げ

変数の宣言 (および一般的な宣言) はコードを実行する前に処理されますので、変数はコード内のどこで宣言しても、コードの先頭で宣言したものと等価になります。
var – JavaScript | MDN より引用

JavaScriptの変数には上記した巻き上げという仕様がある。

var global2 = 5;
const variable_test3 = ()=>{
    console.log(global2);//undefined
    var global2 = 3;
    console.log(global2);//3
};
variable_test3();

//↓実際の挙動はこう
/*
var global2 = 5;
const variable_test3 = ()=>{
    var global2;//巻き上げ
    console.log(global2);
    var global2 = 3;
    console.log(global2);
};
variable_test3();
*/

var global2 = 5;

const variable_test3 = ()=>{

console.log(global2);//undefined

var global2 = 3;

console.log(global2);//3

};

variable_test3();

//↓実際の挙動はこう

var global2 = 5;

const variable_test3 = ()=>{

var global2;//巻き上げ

console.log(global2);

var global2 = 3;

console.log(global2);

};

variable_test3();

3行目のconsole.logは5を返すと思いがちだが、実際に返ってくるのはundefinedである。変数の巻き上げによってローカル変数global2の宣言のみが先頭にもっていかれることでこのような結果になる。

変数の型

const number = 1;
console.log(typeof number);//number

const string = "test";
console.log(typeof string);//string

const object = {name:"user",pass:"password"};
console.log(typeof object);//object

const nu = null;
console.log(typeof nu);//object

const nan = NaN;
console.log(typeof nan);//number

const boo = true;
console.log(typeof boo);//boolean

const arraylist = [1,2,3,4,5];
console.log(typeof arraylist);//object

const func = ()=>{
    return 0;
};
console.log(typeof func);//function

const number = 1;

console.log(typeof number);//number

const string = "test";

console.log(typeof string);//string

const object = {name:"user",pass:"password"};

console.log(typeof object);//object

const nu = null;

console.log(typeof nu);//object

const nan = NaN;

console.log(typeof nan);//number

const boo = true;

console.log(typeof boo);//boolean

const arraylist = [1,2,3,4,5];

console.log(typeof arraylist);//object

const func = ()=>{

return 0;

};

console.log(typeof func);//function

・JavaScriptの変数にも型が存在し、typeofを使うことで厳密ではないものの型を取得できる。

変数のスコープ

関数スコープ

const variable_test5 = ()=>{
    var local = 1;
    if(local === 1){
        var local2 = 2;
    }
    console.log(local2);//2
}
variable_test5();

const variable_test5 = ()=>{

var local = 1;

if(local === 1){

var local2 = 2;

}

console.log(local2);//2

}

variable_test5();

関数スコープであるvarは宣言された関数内であればどこからでも参照できる。

ブロックスコープ

const variable_test6 = ()=>{
    let local = 1;
    if(local === 1){
        let local2 = 2;
        console.log(local2);//2
    }
    console.log(local2);//エラー
}
variable_test6();