Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

変数

変数は、値に代表的な名前を割り当てるデータ構造です。あらゆる種類のデータを含めることができます。

変数の名前は識別子と呼ばれます。有効な識別子が後に続く必要があります。できます。

識別子には、Unicode 文字、ドル記号（$）、アンダースコアを使用できます文字（_）、数字（0 ～ 9）、さらに一部の Unicode 文字などです。
パーサーはスペースを使用して空白文字を使用するため、識別子に空白文字を含めることはできません分割します。たとえば、変数を呼び出そうとすると、 myVariable ではなく my Variable の場合、パーサーは 2 つの識別子を確認します。 my と Variable であり、構文エラー（"unexpected token: あります。
識別子の先頭は、英字、アンダースコア（_）、ドル記号（$）のいずれかにする必要があります。数字と数字の混同を防ぐため、先頭を数字にすることはできません。識別子:
```
let 1a = true;

> Uncaught SyntaxError: Invalid or unexpected token
```
JavaScript で識別子の先頭に数字が許可されている場合、 ID が数字だけで構成されているため、使用される数値間に競合が生じています。数値と数値:
```
let 10 = 20

10 + 5
> ?
```
「予約済みの単語」識別子として使用することはできません。
ID に特殊文字（! . , / \ + - * =）を含めることはできません。

以下は、識別子の作成に関する厳格なルールではありませんが、コードの管理を容易にするベストプラクティスを紹介します。特定のプロジェクトに異なる標準がある場合は、整合性を確保するためにそれらの標準に従ってください。

JavaScript の組み込みのメソッドとプロパティで設定された例に従って、キャメルケース（「キャメルケース」とも呼ばれます）は、識別されます。キャメルケースとは改善するために、各単語の最初の文字を除く、すべての単語の最初の文字を大文字にするスペースを使用しない読みやすさに優れています。

let camelCasedIdentifier = true;

コンテキストや性質に応じて、他の命名規則を使用するプロジェクトもあるできます。たとえば、クラスの最初の文字は、通常、大文字は大文字で表記されるため、複数単語のクラス名ではキャメルというバリアントを使用することがよくあります。「アッパーキャメルケース」と呼ばれるまたは Pascal。

class MyClass {

}

識別子は、それに含まれるデータの性質を簡潔に記述するたとえば、theNumberOfDaysInTheCurrentMonth よりも currentMonthDays のほうが適切な名前です）。ひと目で読み取れます（originalValue は val より優れています）。「このモジュール全体で使用されている myVariable 識別子は、本番環境のコードではあまり役に立ちません。なぜなら、含まれているデータに関する情報は表示されません。

ID に含まれるデータが限定的になりすぎないようにする必要があります。その理由は、その値は、データに対するスクリプトの動作や、スクリプトの動作によって決定することですたとえば、変数で元々識別子 miles は、後でキロメートルの値への変更が必要になる場合がありますその変数への参照をすべてプロジェクトに変更して混乱を防ぐのに役立ちます。これを防ぐには、ID として distance を使用します。してください。

JavaScript は、変更される ID に対して特別な権限や意味を付与しません。アンダースコア文字（_）で始まりますが、通常は、アンダースコア文字が変数、メソッド、プロパティが「private」の場合、つまり Chronicle だけをそのオブジェクトを含むオブジェクトのコンテキスト内で使用できます。変更することはできません。この規則はされ、JavaScript の Java 言語コードを追加するより前から、プライベートプロパティ。

変数の宣言

JavaScript が識別子を認識できるようにする方法は複数あります。「宣言」と呼ばれるものです。使用します。変数の宣言には、let、const、または var 個のキーワード。

let myVariable;

let または var を使用して、いつでも変更できる変数を宣言します。これらのキーワードは、JavaScript インタープリタに文字列が値を含む可能性のある識別子です。

最新のコードベースで作業する場合は、var ではなく let を使用します。var はまだ機能しています最新のブラウザでは使用できますが、インストールされていたため、後で変更することはできず、下位互換性を維持します。いくつかの問題に対処するために ES6 で let が追加されましたデザインは var です。

宣言された変数は、変数に値を割り当てることで初期化されます。次を使用: 変数に値を代入または再代入するには、単一等号（=）を使用します。あなたならこれを宣言するのと同じステートメントの一部として使用できます。

let myVariable = 5;

myVariable + myVariable
> 10

変数を初期化せずに let（または var）で宣言することもできます。すぐに使えますその場合、変数の初期値は undefined で、値を割り当てます。

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

undefined 値を持つ変数は、未定義の変数とは異なります。識別子がまだ宣言されていないからです。まだ定義していない変数の参照エラーが発生します。

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

識別子と値の関連付けは通常、「バインディング」と呼ばれます。 let、var、const のキーワードに続く構文は、「バインディングリスト」複数のカンマ区切り変数宣言を（想定されるセミコロンで終わる）。これにより、次のコードスニペットが機能的に同一である:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

変数の値を再代入しても let（または var）は使用されません。これは、JavaScript が変数が存在することをすでに認識している:

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

既存の値に基づいて、変数に新しい値を再割り当てできます。

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

本番環境で let を使用して変数を再宣言しようとすると、構文エラーが発生します。

let myVariable = true;
let myVariable = false;
> Uncaught SyntaxError: redeclaration of let myVariable

ブラウザデベロッパーツール let（と class）の再宣言については制限が緩やかであるため、デベロッパーコンソールにも同じエラーが表示されます。

従来のブラウザの互換性を維持するため、var で不要な再宣言が許可されています。次の動作を行います。

var myVariable = true;
var myVariable = false;

myVariable\
> false

`const`

定数（変数の型）を宣言するには、const キーワードを使用します。すぐに初期化され、その後は変更できません。定数の識別子 let（および var）を使用して宣言した変数と同じルールに従います。

const myConstant = true;

myConstant
> true

定数を宣言するには、値を直ちに代入する必要があります。これは、作成後に定数を再割り当てすることはできないため、初期化されていない定数は定数は undefined のままです。定数を宣言しようとすると、そうしないと、構文エラーが発生します。

const myConstant;
Uncaught SyntaxError: missing = in const declaration

const で宣言された変数の値を、次のように変更しようとすると、 let（または var）で宣言された変数の値を変更すると、 error:

const myConstant = true;

myConstant = false;
> Uncaught TypeError: invalid assignment to const 'myConstant'

ただし、定数がオブジェクトに関連付けられている場合、そのオブジェクトのプロパティは変更できます。

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

constantObject
> Object { firstvalue: true, secondvalue: false }

オブジェクトを含む定数は、不変可変データ値への参照です。定数自体は変更できませんが、参照先の次のオブジェクトに対して、変更、追加、削除を行うことができます。

const constantObject = { "firstvalue" : true };

constantObject = false
> Uncaught TypeError: invalid assignment to const 'constantObject'

変数の再代入が期待されない場合は、その変数に代入できるように使用します。const を使用すると、開発チームや将来のメンテナンス担当者に想定が逸脱しないように、その値を変更しないようにたとえば、変数は最終的に変数に予測する。

変数のスコープ

変数のスコープは、その変数が使用可能なスクリプトの一部です。変数のスコープ外では、識別子としてではなく、定義されない undefined 値を格納しますが、宣言されていない場合と同様です。

変数の宣言に使用するキーワードと、変数のブロックステートメント（ブロックスコープ）に変数のスコープを設定できます。個々の関数（関数スコープ）、JavaScript アプリケーション全体（グローバルスコープ）。

ブロックスコープ

let または const を使用して宣言した変数のスコープは、最も近いものになります。ブロックステートメントを含むつまり、変数にはそのブロック内でのみアクセスできます。試行含まれるブロックの外部でブロックスコープの変数にアクセスすると、存在しない変数にアクセスしようとすると、次のようなエラーが発生します。

{
    let scopedVariable = true;
    console.log( scopedVariable );
}
> true

scopedVariable
> ReferenceError: scopedVariable is not defined

JavaScript に関する限り、ブロックスコープの変数は存在しません そのファイルが含まれるブロックの外に出て表示できますたとえば、1 つの行で 1 対 1 の呼び出します。そのブロックの外で、別の定数を宣言します。同じ識別子が渡されます。

{
  const myConstant = false;
}
const myConstant = true;

scopedConstant;
> true

宣言された変数は親ブロックに拡張できませんが、すべての子孫ブロックで使用できます。

{
    let scopedVariable = true;
    {
    console.log( scopedVariable );
    }
}
> true

宣言された変数の値は、子孫ブロック内から変更できます。

{
    let scopedVariable = false;
    {
    scopedVariable = true;
    }
    console.log( scopedVariable );
}
> true

新しい変数を子孫内で let または const で初期化できるブロックの変数と同じ ID を使用しても、エラーなしでブロックできます。親ブロック:

{
    let scopedVariable = false;
    {
    let scopedVariable = true;
    }
    console.log( scopedVariable );
}
> false

関数のスコープ

var を使用して宣言された変数のスコープは、それを含む最も近い関数に設定されます（または、クラス内の静的初期化ブロック）を使用します。

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

これは関数が呼び出された後も変わりません。しかし、変数が初期化された場合でも、変数自体は関数の範囲外で使用できません。

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

myFunction();
> true

scopedVariable;
> ReferenceError: scopedVariable is not defined

グローバルスコープ

グローバル変数は JavaScript アプリケーション全体で使用できます。ブロックや関数内に挿入できます

これは望ましいデフォルトに見えますが、変更すると、不必要なオーバーヘッドが加わり、場合によってはアプリケーション内の同じ識別子を持つ他の変数と競合する可能性があります。これは、ページのレンダリングに関連するあらゆる JavaScript に当てはまります。サードパーティライブラリやユーザー分析などですしたがって、ベストプラクティスとして、可能な限りグローバルスコープの汚染を回避してください。

親関数の外部で var を使用して宣言された変数、または let または親ブロック外の const はグローバルです。

var functionGlobal = true; // Global
let blockGlobal = true; // Global

{
    console.log( blockGlobal );
    console.log( functionGlobal );
}
> true
> true

(function() {
    console.log( blockGlobal );
    console.log( functionGlobal );
}());
> true
> true

明示的に宣言せずに値を変数に割り当てる（例: var、let、または const を使用して作成しない）は、変数をグローバルスコープのログエントリのみが含まれます。変数「暗黙のグローバル」とも呼ばれます。

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

変数ホイスティング

変数と関数宣言はスコープの一番上にホイスティングされます。つまり JavaScript インタープリタは、任意の時点で宣言された変数を最初の行に効果的に移動させることができます。スコープを指定します。つまり、変数の値に var は、変数の宣言前に参照できます。その際、 error:

hoistedVariable
> undefined

var hoistedVariable;

変数宣言のみがホストされ、初期化はホストされないため、 var、let、const のいずれかで明示的に宣言されていない変数ホイスティングされません。

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

前述のとおり、宣言されているが初期化されていない変数は、値 undefined が割り当てられます。この動作は、ホイスティングされた変数や var を使用して宣言された宣言のみが対象となります。

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

この直感的でない動作は主に、インフラストラクチャで行われた設計上の決定による変更はできません。また、変更のリスクが伴い、対応できます

let と const は、代わりにエラーがスローされたときにエラーをスローすることで、この動作に対処しています。変数が作成される前にアクセスします。

{
    hoistedVariable;

    let hoistedVariable;
}
> Uncaught ReferenceError: can't access lexical declaration 'hoistedVariable' before initialization

このエラーは、「hoistedVariable is notdefined」のエラー予期される可能性のある動作を以下に示します。JavaScript は変数がホイスティングされている場合、その変数は表示されます。ただし、その変数を実行時に利用できるようにするのではなく、宣言すると、インタープリタはエラーをスローします。undefined let、const（または class）を使用して宣言された変数は、「時間的デッドゾーン」（"TDZ"）を返します。コード内で変数が宣言されている場所を指定します。

時間的なデッドゾーンにより、次の要素に対する let の動作が var よりも直感的になります。あります。これは、const の設計においても重要です。定数を変更すると、定数がスコープの一番上にホイスティングされ、暗黙的な値が指定されたその後、undefined を意味のある値で初期化できませんでした。

理解度をチェックする

識別子の作成に使用できるのは、どのような種類の文字ですか。

手紙

アンダースコア

数字

値を持つ変数を宣言する際のおすすめの方法は、次のうちどれですか。いつでも変更できますか。

しましょう

const

var

変数