[js]変数宣言を理解するための簡単なまとめ

よくわからんくなるね。

とりあえずやるなら
こんな感じ
使い分け

とりあえずやるなら

変数は関数内がガチャつくからという理由で作るほか、複数回使うときに毎度書くのがめんどいから作ったりする。それでもって、変数は記述の中で中身を書き換えたり追加したりがある。

で、要するに最初に書くタイミングで「宣言」をする。

とりあえず「やってる感」を出したいなら、「var」をつける。

var sample = 'aaaaa';

宣言しなくても動いちゃうので普通に使う分には必須じゃない感じがある（use strict）。

単純にどこで書き始めてるかという視覚的な理解が得られる他、宣言には種類があって物によって仕様もかわってくるので役割を明確にできる。

こんな感じ

詳しく、正しく知りたい人はちゃんとした記事を読むこと。

	var	let	const
再代入	○	○	×
再宣言	○	×	×
ブロックスコープ	×	○	○
関数スコープ	×	○	○

再代入は変数の中身の書き換え。

var sampleVar = 'aaaa';
sampleVar = 'bbbb';
console.log(sampleVar); //bbbb

let sampleLet = 'aaaa';
sampleLet = 'bbbb';
console.log(sampleLet); //bbbb

const sampleConst = 'aaaa';
sampleConst = 'bbbb';
console.log(sampleConst); //エラー

再宣言はその名の通り。そんな場面は少ないと思うけど、ifとか発火のタイミングで変数を扱うときにありがち。

var sampleVar = 'aaaa';
var sampleVar = 'bbbb';
console.log(sampleVar); //bbbb

let sampleLet = 'aaaa';
let sampleLet = 'bbbb';
console.log(sampleLet); //エラー

const sampleConst = 'aaaa';
const sampleConst = 'bbbb';
console.log(sampleConst); //エラー

スコープは要するに外部から引っ張れるかどうか。外部の種別は別ファイルだったり括弧だったりで色々ある。

ブロックスコープの動作は要するに括弧内にあるものを持ち出せるかどうか。

if(...){
    var sampleVar = 'aaaa';
    let sampleLet = 'aaaa';
    const sampleConst = 'aaaa';
}
console.log(sampleVar); //aaaa
console.log(sampleLet); //エラー
console.log(sampleConst); //エラー

関数スコープはこんなかんじ。関数内で宣言した内容は関数内でしか動かない。直接変数を指定してもエラーになる。

function sample(){
    var sampleVar = 'aaaa';
    let sampleLet = 'aaaa';
    const sampleConst = 'aaaa';
}
sample();//aaa aaa aaa

console.log(sampleVar); //エラー
console.log(sampleLet); //エラー
console.log(sampleConst); //エラー

使い分け

個人的には再代入が当たり前なんで、constが一番扱いづらい。

元々変数の扱いがletに準拠してたので、とりあえずvarのところをとりあえずletにしても支障は一切でなかった。

varを何でもできる安心感と取るか、ガバガバと取るかは人によるところだと思う。雑に言えばletとconstはvarの機能をそれぞれ限定・制限したものだと考えたら手っ取り早い。

そもそもちゃんと組まないと動かないわけで、組み方はいっぱいあるわけで。時間を書けてみっちり組む余裕があるなら使い分けたら良いんじゃないかなって思ったりします。ガチガチにしないとぶっ壊れるような、そこまで込み入った内容は組んでないしね。