0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

<3:変数と宣言>Progate学習修了者がJavaScriptPrimerを読んだら

Posted at

はじめに:

こんにちは。Satoです。
本稿では、Progate学習を修了した段階のプログラミング学習者が、JavaScriptPrimer(以下、Primerとします)を学習するとどうなるのかを記録したものです。基本的には自身のアウトプットを主眼に置いていますが、初学者が躓いた点とその解決方法も記載するつもりです。良かったら参考にしてみてください。

学習事項:

変数と宣言に関する概要

  • 変数:文字列・数値等のデータに名前をつけることで、繰り返し利用可能にする機能
  • 変数の宣言:JavaScriptの場合、const, let, varで宣言する
    →varはバグを発生させやすいので、constやletを使った方が良い。

[ES2015]const

constとは、再代入できない変数を宣言するキーワードのこと。
Cf:再代入の一例として、下記constの変数を”Kyoto”から"Tokyo"にすることが挙げられる。なお、constでこれをやるとエラーが発生してしまう。

// const 変数名 = 初期値;
const japanCapital = "Kyoto";
japanCapital = "Tokyo"; // => TypeError: invalid assignment to const 'japanCapital'

一般的に変数への再代入は、「変数の値は最初に定義した値と常に同じであるべき(参照透過性, referential transparency)」というルールに反する。従って、変数の値を再代入する必要が無い場合は、constを積極的に利用しよう

[ES2015]let

letは値の再代入が可能な変数を宣言したい場合に用いる。
使用例として、以下のようなfor文が挙げられるだろう。

let x = 0;
for (let i = 0; i < 9; i++) {
    x = x + i;
}
console.log(x);
// Expected output: "012345678"

varとその問題点

結論から言うと、varはletの古いバージョンだから現在は使わない方が良い。
varの問題点は、同じ名前の変数を再定義できてしまうことだ。letやconstで同じ名前を再定義しようとすると、下記のような構文エラー(SyntaxError)が発生する。

// "y"という変数名で変数を定義
let y = 1;
// 同じ名前の変数"y"を定義するとSyntaxErrorとなる
let y = 2; // => SyntaxError: redeclaration of let y

他にもvarには「変数の巻き上げ」と呼ばれる意図しない挙動がある。letやconstは、そういった問題を改善させたものだと認識しておけば良い。詳しくは、「関数とスコープ」で取り扱うとのこと。

変数名に使える名前のルール

変数名の名前(識別子)には、以下のルールがある。

  1. 半角アルファベット、_(アンダーバー)、$(ダラー)、数字が利用可能
  2. 変数名は数字から開始できない
  3. 予約語と被る名前(例:constやletなど)は利用できない

上記のルールに加えて、ひらがなや一部の漢字も変数名として利用可能ではある。しかし、全角の文字列が混在すると扱いにくいケースもあるので、利用するべきではない。

// 利用OKな変数名
let $; // OK: $も利用可能
let _title; // OK: _も利用可能
let jquery; // OK: 小文字アルファベットも利用可能
let NTT; // OK: 大文字アルファベットも利用可能
let es2015; // OK: 数字は先頭以外なら利用可能
let 日本語の変数名; // OK: ひらがなや一部の漢字も利用可能だが、推奨できない
// 利用NGな変数名
let 1st; // NG: 数字から始まっている
let 123; // NG: 数字のみで構成されている
let let; // NG: 'let'は変数宣言のために予約されているので利用不可
let if; // NG: 'if'はif文のために予約されているので利用不可

躓いた点:

特になし。

参考文献

azu・Suguru Inatomi「第一部: 基本文法 変数と宣言」『JavaScript Primer』
https://jsprimer.net/basic/variables/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?