変数[JavaScript]

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let interval;

function startSlot() {
  const slotNumber = document.getElementById('slot-number');
  interval = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlot() {
  clearInterval(interval);
}

let intervalTwo;

function startSlotTwo() {
  const slotNumber = document.getElementById('slot-number-two');
  intervalTwo = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlotTwo() {
  clearInterval(intervalTwo);
}

let intervalThree;

function startSlotThree() {
  const slotNumber = document.getElementById('slot-number-three');
  intervalThree = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlotThree() {
  clearInterval(intervalThree);
}

変数

変数とは、なんらかの値を格納する箱のようなものです。JavaScriptをはじめ、多くのプログラミング言語にあります。ここではJavaScriptの変数を見ていきましょう。

JavaScriptでは、変数の定義方法が3つあります。

var 変数名 = 値;
let 変数名 = 値;
const 変数名 = 値;
例
let dog = 'ポチ';
console.log(dog);

例では「dog」という変数に「ポチ」という文字列を代入しています。定義部分以降、「dog」は文字列「ポチ」として扱われます。console.log()はコンソールに()内の値を表示できる関数です。これを用いて「console.log(dog);」とすると、「ポチ」と出力されます。

スコープ

変数には使用できる範囲があります。これを「スコープ」と言います。slot.jsを見ると、「function ○○() {}」の{}の中(ブロック)で定義した変数は、ブロックの中でしか使えません。例えば「let slotNumber = document.getElementById(‘slot-number’);」は「function startSlot() {}」の中でしか使えません。「let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];」のように、複数のfunctionで使いたい変数は{}の外で定義する必要があります。

var、let、constの違い

JavaScriptのバージョン「ES5」までは、varしかありませんでした。varの特徴は次の3つです。

  1. 値の再代入が可能
  2. 同じ名前の変数の再定義が可能
  3. 変数の定義位置によってはスコープを無視した挙動をする

このうち、下2つは問題があります。

2については、同じ名前の変数を定義するとその変数の中身が更新されます。意図せず同じ変数名をつけてしまった場合、変数の中身が変わっていることに気づかず使用して、予想外の挙動になる恐れがあります。

3についても、スコープを無視されては挙動の予測がしづらい上に、問題箇所を探しづらいという問題があります。

この問題を解決するために、ES6では新たに「let」と「const」が加わりました。

「let」はvarから2と3の機能を省いたものです。

「const」はさらに再代入もできない変数を定義します。ちなみにslot.jsでは3箇所で変数「slotNumber」をconstしているものの、スコープが異なるので再定義にはあたりません。

変数への再代入は、参照透過性(変数の値は最初に定義された時と常に同じであるというルール)に反するため、しばしばバグの要因となります。変数を定義するときは基本的に「const」を使用し、繰り返し処理のように再代入せざるを得ない場合のみ「let」を使うようにしましょう。

参考記事

変数と宣言 · JavaScript Primer #jsprimer
JavaScriptの変数宣言する方法についてを紹介します。変数を宣言する方法にはconst,let,varがあります。これらの動作の違いや使い分けについてを紹介します。
関数とスコープ · JavaScript Primer #jsprimer
スコープという変数などを参照できる範囲を決める概念を紹介します。ブロックスコープや関数スコープなどがどのような働きをしているのかや複数のスコープが重なったときにどのように変数の参照先が決まるのかを紹介します。また、スコープに関係する動作としてクロージャーという性質を紹介します。

コメント

  1. […] JavaScriptの変数const array = ;let interval;function startSlot() { const slotNumber = document.getElementById('slot-number&#39…tsushima164blog.com2019.11.25 […]

タイトルとURLをコピーしました