前書き

_Variables_は多くのプログラミング言語の基本的な部分であり、初心者のコーダーが学ぶ最初で最も重要な概念の1つです。 JavaScriptには変数のさまざまなプロパティがあり、それらに名前を付けるときに従わなければならないいくつかの規則があります。 JavaScriptには、変数の宣言に使用される3つのキーワード( + var、` + let`、および + const)があり、それぞれがコードによる変数の解釈方法に影響を与えます。

このチュートリアルでは、変数とは何か、それらを宣言して名前を付ける方法、および + var ++ let +、および `+ const +`の違いを詳しく見ていきます。 また、変数の動作に対する巻き上げの影響とグローバルスコープとローカルスコープの重要性についても確認します。

変数を理解する

variableは、値を保存するために使用される名前付きコンテナーです。 複数回参照する可能性のある情報は、後で使用または変更するために変数に保存できます。 JavaScriptでは、変数内に含まれる値はhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript[JavaScriptデータ型]であり、数値、文字列、またはオブジェクトを含みます。

今日のJavaScriptが基づいているhttp://www.ecma-international.org/ecma-262/6.0/[ECMAScript 2015(ES6)]言語仕様の前には、変数を宣言する方法は1つしかありませんでした。 + var + キーワード。 その結果、ほとんどの古いコードと学習リソースは変数にのみ `+ var +`を使用します。 https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascriptの `+ var ++ let +、および `+ const +`キーワードの違いについて説明します以下の#difference-between-var、-let、-and-const [its own section]。

`+ var +`を使用して、変数自体の概念を示すことができます。 以下の例では、変数を_declare_し、それに値を_assign_します。

// Assign the string value Sammy to the username identifier
var username = "sammy_shark";

このステートメントは、いくつかの部分で構成されています。

  • `+ var +`キーワードを使用した変数の宣言

  • 変数名(または識別子)、 + username +

  • `+ = +`構文で表される割り当て操作

  • 割り当てられる値、 " sammy_shark "

これで、コードで `+ username `を使用できます。 JavaScriptは、「 username 」がストリング値「 sammy_shark +」を表すことを記憶します。

// Check if variable is equal to value
if (username === "sammy_shark") {
 console.log(true);
}
Outputtrue

前述のように、変数はJavaScriptデータ型を表すために使用できます。 この例では、文字列、数値、オブジェクト、ブール値、null値を持つ変数を宣言します。

// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" };
var success = true;
var nothing = null;

`+ console.log +`を使用すると、特定の変数に含まれる値を確認できます。

// Send spartans variable to the console
console.log(spartans);
Output300

変数は、後でアクセスおよび変更できるメモリにデータを保存します。 変数を再割り当てして、新しい値を与えることもできます。 以下の単純化された例は、パスワードが変数に保存され、更新される方法を示しています。

// Assign value to password variable
var password = "hunter2";

// Reassign variable value with a new value
password = "hunter3";

console.log(password);
Output'hunter3'

実際のプログラムでは、パスワードはほとんどの場合データベースに安全に保存されます。 ただし、この例は、変数の値を更新する必要がある状況を示しています。 「+ password 」の値は「 hunter2 」でしたが、JavaScriptがその時点から認識している値である「 hunter3 +」に再割り当てしました。

変数の命名

JavaScriptでは、変数名は_識別子_と呼ばれます。 JavaScriptの構文とコード構造の理解で、識別子の命名規則のいくつかをここでまとめました。

  • 変数名は、文字( + a-z +)、数字( + 0-9 +)、ドル記号( + $ +)、および下線( + _ +)のみで構成できます

  • 変数名に空白文字(タブまたはスペース)を含めることはできません

  • 数字で変数の名前を始めることはできません

  • 変数の名前として使用できないhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Reserved_keywords_as_of_ECMAScript_2015 [予約済みキーワード]がいくつかあります

  • 変数名では大文字と小文字が区別されます

JavaScriptには、 `+ var `または ` let `で宣言された関数と変数の名前にキャメルケース(キャメルケースとして定型化される場合があります)を使用する規則もあります。 これは、最初の単語を小文字で書き、その後にスペースのない後続のすべての単語の最初の文字を大文字にする習慣です。 定数ではないほとんどの変数は、いくつかの例外を除き、この規則に従います。 ` const +`キーワードで宣言された定数の変数名は、通常すべて大文字で記述されます。

これは多くの学習ルールのように思えるかもしれませんが、有効で従来の変数名を書くことはすぐに第二の性質になります。

+ var ++ let +、および `+ const +`の違い

JavaScriptには、変数を宣言するための3つの異なるキーワードがあり、言語に複雑さの層を追加します。 3つの違いは、スコープ、巻き上げ、および再割り当てに基づいています。

Keyword Scope Hoisting Can Be Reassigned Can Be Redeclared

var

Function scope

Yes

Yes

Yes

let

Block scope

No

Yes

No

const

Block scope

No

No

No

あなたは自分のプログラムで3つのうちどれを使うべきか疑問に思うかもしれません。 一般的に受け入れられている方法は、可能な限り「+ const 」を使用し、ループと再割り当ての場合は「 let 」を使用することです。 一般に、レガシーコードの作業以外では、「 var +」は回避できます。

可変スコープ

JavaScriptの_Scope_は、変数のJavaScriptへのアクセシビリティを決定するコードの現在のコンテキストを指します。 スコープの2つのタイプは、_local_と_global_です。

  • *グローバル変数*は、ブロックの外側で宣言されたものです

  • *ローカル変数*はブロック内で宣言されたものです

以下の例では、グローバル変数を作成します。

// Initialize a global variable
var creature = "wolf";

変数を再割り当てできることを学びました。 ローカルスコープを使用すると、元の値を変更または再割り当てすることなく、外部スコープの変数と同じ名前の新しい変数を実際に作成できます。

以下の例では、グローバルな `+ species +`変数を作成します。 関数内には、同じ名前のローカル変数があります。 それらをコンソールに送信すると、スコープによって変数の値がどのように異なり、元の値は変更されないことがわかります。

// Initialize a global variable
var species = "human";

function transform() {
 // Initialize a local, function-scoped variable
 var species = "werewolf";
 console.log(species);
}

// Log the global and local variable
console.log(species);
transform();
console.log(species);
Outputhuman
werewolf
human

この例では、ローカル変数は_function-scoped_です。 `+ var +`キーワードで宣言された変数は常に関数スコープです。つまり、関数は別のスコープを持つものとして認識されます。 したがって、このローカルスコープの変数は、グローバルスコープからアクセスできません。

ただし、新しいキーワード `+ let `および ` const `は_block-scoped_です。 つまり、新しいローカルスコープは、ファンクションブロック、 ` if `ステートメント、および ` for `ループと ` while +`ループを含む、あらゆる種類のブロックから作成されます。

関数スコープとブロックスコープの変数の違いを説明するために、 `+ let `を使用して ` if +`ブロックに新しい変数を割り当てます。

var fullMoon = true;

// Initialize a global variable
let species = "human";

if (fullMoon) {
 // Initialize a block-scoped variable
 let species = "werewolf";
 console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);
OutputIt is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a human.

この例では、 + species +`変数にはグローバルに1つの値( `+ human +)とローカルに別の値( + werewolf +)があります。 しかし、 `+ var +`を使用する場合、異なる結果になります。

// Use var to initialize a variable
var species = "human";

if (fullMoon) {
 // Attempt to create a new variable in a block
 var species = "werewolf";
 console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);
OutputIt is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.

この例の結果では、グローバル変数とブロックスコープの変数の両方が同じ値 `+ werewolf `になります。 これは、 ` var `を使用して新しいローカル変数を作成する代わりに、同じスコープ内で同じ変数を再割り当てするためです。 ` var `は、 ` if +`が別の新しいスコープの一部であることを認識しません。 一般的に、変数値を意図せずオーバーライドする可能性が低いコードを生成するため、ブロックスコープの変数を宣言することをお勧めします。

巻き上げ

これまでの例のほとんどでは、変数を_declare_するために `+ var +`を使用し、値で_initialized_を持っています。 宣言して初期化した後、変数にアクセスまたは再割り当てできます。

変数が宣言および初期化される前に変数を使用しようとすると、 `+ undefined +`が返されます。

// Attempt to use a variable before declaring it
console.log(x);

// Variable assignment
var x = 100;
Outputundefined

しかし、 `+ var `キーワードを省略すると、変数を宣言するのではなく、初期化するだけです。 ` ReferenceError +`を返し、スクリプトの実行を停止します。

// Attempt to use a variable before declaring it
console.log(x);

// Variable assignment without var
x = 100;
OutputReferenceError: x is not defined

この理由は、変数と関数の宣言がスコープの最上部に移動するJavaScriptの動作である_hoisting_によるものです。 初期化ではなく、実際の宣言のみがホイストされるため、最初の例の値は `+ undefined +`を返します。

この概念をより明確に示すために、以下に記述したコードとJavaScriptが実際にどのように解釈したかを示します。

// The code we wrote
console.log(x);
var x = 100;

// How JavaScript interpreted it
var x;
console.log(x);
x = 100;

JavaScriptは、スクリプトの実行前に変数として `+ x `をメモリに保存しました。 定義される前に呼び出されたため、結果は「+100」ではなく「+ undefined」になります。 ただし、 `+ ReferenceError `が発生してスクリプトが停止することはありません。 ` var `キーワードは実際には ` var `の位置を変更しませんでしたが、これは巻き上げがどのように機能するかを示す有用な表現です。 ただし、このコードを書いたプログラマーは、代わりに ` undefined `である場合、 ` x `の出力が ` true +`であることを期待するため、この動作は問題を引き起こす可能性があります。

次の例では、巻き上げが予測不可能な結果を​​もたらす可能性があることも確認できます。

// Initialize x in the global scope
var x = 100;

function hoist() {
 // A condition that should not affect the outcome of the code
 if (false) {
   var x = 200;
 }
 console.log(x);
}

hoist();
Outputundefined

この例では、グローバルに `+ x `を ` 100 `として宣言しました。 「 if 」ステートメントに応じて、「 x 」は「+200」に変更できますが、条件が「+ false 」であったため、「 x 」の値に影響を与えてはなりませんでした。 代わりに、 ` hoist()`関数の上部に ` x `が巻き上げられ、値は ` undefined +`になりました。

このタイプの予測できない動作は、プログラムにバグを引き起こす可能性があります。 `+ let `と ` const +`はブロックスコープであるため、以下に示すように、この方法ではホイストされません。

// Initialize x in the global scope
let x = true;

function hoist() {
 // Initialize x in the function scope
 if (3 === 4) {
   let x = false;
 }
 console.log(x);
}

hoist();
Outputtrue

`+ var `で可能な変数の重複宣言は、 ` let `と ` const +`でエラーをスローします。

// Attempt to overwrite a variable declared with var
var x = 1;
var x = 2;

console.log(x);
Output2
// Attempt to overwrite a variable declared with let
let y = 1;
let y = 2;

console.log(y);
OutputUncaught SyntaxError: Identifier 'y' has already been declared

要約すると、 `+ var `で導入された変数は、変数宣言がメモリに保存されるJavaScriptのメカニズムであるホイストの影響を受ける可能性があります。 これにより、コードに未定義の変数が生じる場合があります。 ` let `と ` const +`の導入により、変数を宣言する前または変数を複数回宣言しようとする前に変数を使用しようとするとエラーがスローされるため、この問題が解決します。

定数

多くのプログラミング言語には、変更または変更できない値である_定数_があります。 JavaScriptでは、 `+ const `識別子は定数をモデルにしており、 ` const +`に割り当てられた値は再割り当てできません。

すべての `+ const +`識別子を大文字で書くのが一般的な慣例です。 これにより、他の変数値から容易に区別できるものとしてマークされます。

以下の例では、変数「+ SPECIES 」を「 const +」キーワードで定数として初期化します。 変数を再割り当てしようとすると、エラーが発生します。

// Assign value to const
const SPECIES = "human";

// Attempt to reassign value
SPECIES = "werewolf";

console.log(SPECIES);
OutputUncaught TypeError: Assignment to constant variable.

`+ const +`値は再割り当てできないため、同時に宣言して初期化する必要があります。そうしないと、エラーもスローされます。

// Declare but do not initialize a const
const TODO;

console.log(TODO);
OutputUncaught SyntaxError: Missing initializer in const declaration

プログラミングで変更できない値は_immutable_として知られていますが、変更できる値は_mutable_です。 `+ const `の値を再割り当てすることはできませんが、 ` const +`で宣言されたオブジェクトのプロパティを変更できるため、それらは変更可能です。

// Create a CAR object with two properties
const CAR = {
   color: "blue",
   price: 15000
}

// Modify a property of CAR
CAR.price = 20000;

console.log(CAR);
Output{ color: 'blue', price: 20000 }

定数は、将来の自分自身やプロジェクトで作業している他のプログラマーに、目的の変数を再割り当てしないことを明確にするのに役立ちます。 将来、変数が変更される可能性がある場合は、代わりに変数を宣言するために `+ let +`を使用する必要があります。

結論

このチュートリアルでは、変数とは何か、変数の命名規則、および変数値の再割り当て方法について説明しました。 また、スコープと巻き上げ、元の「+ var 」キーワードの制限のいくつか、および「 let 」と「 const +」がこれらの問題を修正する方法についても学びました。

変数が他の言語でどのように使用されるかを比較するには、「https://www.digitalocean.com/community/tutorials/how-to-use-variables-in-python-3 [変数の使用方法Python 3]。」