【Javascript】変数を使う – プログラミング入門

前回は、変数の宣言の仕方や、値の代入の仕方を紹介しました。ここでは、新しい代入の仕方を含めた、変数の基本的な使い方を紹介していきます。

宣言の方法など、前回の内容はこちら

変数を使って計算

変数を使うときは中身が使われるというのを前回紹介しました。そのため、次のような書き方ができます。

let x;
x = 10;
console.log(x + 20);

xと10を足し算していますね。プログラムは上から順番に実行されるので、console.log(x + 20);は、console.log(10 + 20);と実質同じになります。

それでは、次のようなパターンを見てみましょう。

let x;
x = 10;
console.log(x + 20);
x = 50;

console.logのあとにx = 50;が追加されました。しかし、表示される結果は同じです。日本語で見ていきましょう。

このように、console.logでxを使った瞬間では、x = 50;の代入は行われていないことがわかります。プログラムは上から順番に実行されるので、後がどうなっていても関係ないというわけです。

もちろん、変数と値だけでなく、変数同士で計算することもできます。

let x;
let y;
x = 10;
y = 20;
console.log(x + y);

> node app.js
30

となります。もちろん足し算以外にも、通常の四則演算や括弧を使うこともできます。

変数に値を入れることができるのと同様に、変数に変数の値を入れることができます。

let x;
let y;
x = 10;
y = x;
console.log(y);

つまり、y = x;をした場所で、yには10が代入されたということになります。

次のパターンもみてみましょう。

let x;
let y;
x = 10;
y = x;
x = 20;
console.log(y);

この場合も、console.logの部分でのyの値は変わりません。

つまり、変数に値を代入するときは、値を共有しているのではなく、コピーしているというわけです。

また、代入に使われるのは計算した結果でした。つまり、このような使い方も可能です。

let x;
let y;
x = 10;
y = x + 100;
console.log(y);

yには、x + 100の結果である110が代入されたというわけです。

次のコードを見てみましょう。

let x;
x = 10;
x = x + 20;
console.log(x);

x = x + 20;が現れました。ここでは、xに対し、x + 20の計算結果が代入されるということです。

つまり、ここでも必ず右側が先に計算され、その計算結果が左側にある変数に代入されるという流れを踏んでいます。

という流れです。自分自身を使った値を代入するというのは、最初は少し違和感があるかもしれません。

しかし、右側を計算し、その結果を左側の変数に代入する、という流れを意識すれば問題ありません。ゆっくり慣れていきましょう!

例えば、x = y;での右辺の計算結果は、yの値を取り出したものになります。プログラムの動作上ではyのままだと計算が終わっていないということで、その値を取り出して初めて計算完了ということになります。

どのような代入でも、右側の計算結果を左側の変数に代入する、という流れを踏みます。

計算のときに変数を使うと、その変数に入っている値が計算に使われます。その流れを踏まえると、自分自身の変数を使った計算結果を自分に代入するといった行為も可能です。

この内容の理解度チェックはこちら