JavaScript変数 - 一白山中

アルファベットから開始する

$ 及び _ 記号からスタートしてもOKですが、薦めはしない

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>

// ES6に詳しい人ですと、piに対して、const キーワード利用可能です。定数を表す
// const pi = 3.14;
var name="Bill Gates";
var answer='Yes I am!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>

<p>クリックして、変数を作って、利用する</p>
<button onclick="myFunction()">ここクリックしてください</button>
<p id="demo"></p>
<script>
function myFunction(){
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
</script>

</body>
</html>

※下記の形式でもOK

var lastname="Doe", age=30, job="carpenter";

var lastname="Doe",
age=30,
job="carpenter";

var x,y,z=1;

※var carname;のように、変数生成したが、値代入しないと、そのまま利用すると、

undefinedになる（よくあるミスである）

※再度生成しても、値が保留される

var carname="Volvo";
var carname;

ただし、下記の場合は、値が更新される

var a = 1;
var a = 'x';
console.log(a);
// 输出 'x'

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>

<p>もし y=5、x=y+2を計算する。結果を表示する</p>
<button onclick="myFunction()">クリックしてください</button>
<p id="demo"></p>
<script>
function myFunction(){
var y=5;
var x=y+2;
var demoP=document.getElementById("demo");
demoP.innerHTML="x=" + x;
}
</script>

</body>
</html>

※2015 年以前、 varキーワードで、変数を生成する

2015年以降の JavaScript バージョン(ES6)にて、constキーワードで、定数を生成することと let キーワードで、変数生成することを許可された

※const(定数)

//定数a生成、値0を付与する
const a = 0;

//エラー（別値代入NG）
a = 1;

//エラー（再度生成してはいけない）
const a = 2;

//0を出力
console.log("a is: " + a);

※varとletの区別（適応範囲）

function varTest() {
    var x = 1;
    if (true) {
        var x = 2;       // 同じ変数！
        console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
        let x = 2;       // 違う変数！    
        console.log(x);  // 2  
    }
    console.log(x);  // 1
}