変数と値

docs.scrimba.com

チェックアウトページを作成していて、商品の価格が3つの場所に表示されているとします。商品行、小計、確認画面です。19.99を手動で3つの場所すべてに入力すると、セールが終わる午後は見つけて置き換える作業になります。1つの名前で一度保存して変更すれば、それを使用しているすべての場所が一緒に更新されます。その名前が変数で、このチャプターはそれを作成する方法、いつそれをロックするか、そしてそれを何と呼ぶかについてです。

値を保存する

**変数**は、後で再度使用できるように値に付ける名前です。letという単語、その後に名前、=、その後に保存する値を使用して作成します。

let userName = "太郎";
console.log(userName); // 太郎

この行は、テキスト"太郎"を取得してuserNameという名前で記憶することを言っています。その後、userNameを書く場所であればどこでも、JavaScriptは保存したものを返します。

=を「この値をこの名前の下に置く」と読んでください。数学の授業での等号ではなく、両側が既に同じです。それは指示です。右側の値を取得して、左側の名前の下に隠します。

それは値を保存する指示なので、後で考え直すことができます。名前と=を新しい値で再度書くと、JavaScriptは最新のものを保持します。

let score = 0;
score = 10;
console.log(score); // 10

最初の行はscoreを作成して0を入れます。2番目のそれに新しい値を与えます。2番目のletはありません。scoreは既に存在するため。更新しており、再度作成していません。

変数は値に**バインド**された名前です。letで宣言し、代入演算子=で値を設定します。

let total = 0;
total = 42;
console.log(total); // 42

=は代入で、比較ではありません。右側の式を評価してから、左側の名前の下に結果を保存します。これが=が「この値を代入する」を意味し、「等しい」を意味しない理由です。演算子で会う比較は別の記号である===です。

letでの宣言は名前を作成します。再度割り当てると、それが保持する値を更新します。変数ごとに1回だけletを使用します。その後、左側の素の名前だけで十分です。

let itemPrice = 19.99;
itemPrice = 24.99;
console.log(itemPrice); // 24.99

右側の値は、JavaScriptが持つデータ型のいずれかです。テキスト、数値、またはブール値です。変数は気にしません。それは最後に割り当てたものを保持します。

変数は値にバインドされた**識別子**（コード内の名前）です。=は代入演算子で、右辺の式を評価して、結果を左側の名前にバインドします。等号性をテストすることはなく、値を固定ボックスにコピーすることもありません。それは値に名前を指します。

let total = 0;
total = 42;
console.log(total); // 42

再割り当てでは新しい変数は作成されません。既存のバインディングを再指定します。数字や文字列などのプリミティブでは、その区別は見えません。各値は分離して自己完結しています。オブジェクトのような共有されたものを変数が保持する瞬間に重要になり始めます。2つの名前が同じ値を指し、1つを通じた変更が他を通じて表示されるため。オブジェクトが到着するまでそれを完全に見ます。今のところ、名前が値を含むのではなく値を指すという考えを保持してください。

もう1つ、=がしないこと。それは値を所定の位置にロックしません。let score = 0は「とりあえずscoreを0で指す」と言い、次の行はそれを他の場所で指す自由があります。バインディングが再指定できるかどうかは、letとconstの違いで、次にあります。

Juno値を保存する 変数は再利用したい値の名前で、let name = valueで作成します。=を「この値をこの名前の下に置く」と読み、数学の授業の等号としては読まないでください。後で変更するには、2番目のletなしで名前と=を新しい値で再度書き、JavaScriptは最新の値を保持します。

Juno値を保存するletでの宣言は名前を作成します。=での割り当ては値を保存します。=は代入で、比較ではないため、「等しい」を意味しません。変数ごとにletを1回だけ書きます。その後、素の名前はそれが保持する値を更新します。

Juno値を保存する=は名前を値にバインドします。ボックスにコピーしたり、等号性をテストしたりしません。再割り当ては新しい変数を作成するのではなく、既存のバインディングを再指定します。数字や文字列では見えず、名前が共有されたものを指す場合に咬み始めます。オブジェクトが表示される前に「名前が値を指す」ということを心に留めておいてください。

let vs const

変数を作成するための2つの単語があります。letとconstです。あなたはletを見てきました。値を設定した後に値が変わらないはずの場合はconstを使用してください。

const taxRate = 0.2;
console.log(taxRate); // 0.2

税率は固定されているため、constはそれに適しています。「これは設定されており、それが誤って変更されるのは望まない」と言っています。constを再割り当てしようとすると、JavaScriptはエラーで停止します。これは便利なガードレールです。

最初にconstに到達してください。値が変わることがわかっている場合はletを使用してください。スコアが上がるまたはあなたが追加する合計など。値がその生涯全体を同じままである場合、constはそれを言い、それを保護します。

const currency = "USD";
let itemsInCart = 0;
itemsInCart = 3;
console.log(itemsInCart); // 3

通貨は変更されないため、それはconstです。カウントは変更されるため、それはletです。

JavaScriptは変数を宣言する2つの方法を提供し、選択は値が再割り当てされるかどうかについてです。constは**定数**バインディングを宣言します。それを割り当てると、その名前を新しい値で指すことはできません。

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

letは再割り当てを許可します。constは禁止します。コードをきれいに保つ規則はデフォルトでconstに到達し、必須な場合にのみletを使用することです。ほとんどの変数は一度設定され、何度も読み込まれるため、そのほとんどはconstである必要があります。

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

constは値が特別であることについてではありません。それはコードを読んでいる人、来週のあなたを含め、この名前は動かないというシグナルです。そのシグナルはプログラムを理解しやすくします。あなたが信頼できるconstはそのままです。

letとconstの両方が**バインディング**を宣言します。（名前と値の間のリンク）。違いは、そのバインディングを再割り当てできるかどうかです。constはバインディングを凍結します。初期割り当ての後、名前を新しい値で指すことはTypeErrorです。

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

constをデフォルトにし、再割り当てが実際である場合にのみletにドロップします。これはスタイルの気取りではありません。constは読んでいる間に依存できる事実で、その名前の下で変更される可能性が1つ少なく、そしてそれはバグが生きることができる場所を絞ります。

早期に述べる価値のある微妙さ。constはバインディングを修正しますが、コンテンツは修正しません。それは名前を再指定するのを止めます。しかし、値が内部部品を持つものである場合、それらの部品はまだ変更される可能性があります。数値または文字列には変更可能な内部パーツがないため、それらのconstは「この値は固定されている」のようにまったく同じように動作します。オブジェクトを使用すると、constは名前が同じオブジェクトを指し続けることを保証するだけです。オブジェクト自身のコンテンツは編集可能なままです。そのギャップは人々を驚かせます。デバッグの途中よりも今吸収する方が簡単です。オブジェクトは直接戻ります。

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

あなたが既存のコードで会うだろう3番目の、より古いキーワードがあります。varです。それを使用しないでください。それはletとは2つの方法が異なり、バグを引き起こします。1番目、varは関数スコープされています。それはletとconstが尊重する{ }ブロックを無視します。ブロック内で宣言されたvarは、周囲の関数全体に漏れます。一方letとconstはブロックスコープで、最も近い{ }内に留まります。2番目、varはホイストされます。宣言は、それがそのスコープの上部に移動したかのように処理されます。var名は存在します。（undefinedを保持）それを宣言する行の前に。これは、エラーをキャッチするのではなく、間違いを隠します。

letとconstもホイストされていますが、宣言行の前にそれらに到達すると、静かにundefinedを与えるのではなくスローします。その早い窓は時間的デッドゾーンと呼ばれ、それが生成するエラーは機能です。静かなバグを大きなエラーに変えるため。短いバージョン。デフォルトでconstを書き、必須な場合にletを書き、古いコードを維持するためにvarを読み取り専用の知識として扱います。

Junolet vs const 値が変わらないはずの場合はconstを使用し、値が変わる場合はletを使用します。最初にconstに到達し、値が変更する必要があることがわかったときにのみletに切り替えます。constを再割り当てするとエラーが発生し、これはガードレールが機能しています。

Junolet vs constconstは再割り当てを禁止します。letはそれを許可します。constをデフォルトにし、値が変更する必要がある場合にのみletに到達します。constは、この名前が動かないことを次の読者に伝え、ほとんどの変数は一度設定され、何度も読み込まれるため、そのほとんどはconstである必要があります。

Junolet vs constconstはバインディングを凍結しますが、コンテンツは凍結しません。そのため、名前を再割り当てするのはTypeErrorですが、それが指すオブジェクトはまだ編集できます。デフォルトでconstを使用し、実際の再割り当てにのみletを使用し、古いvarを読み取り専用の知識として扱います。それは関数スコープされ、バグを隠す方法でホイストされるため。バインディングとコンテンツのギャップは人々を捕まえるため、オブジェクトが到着する前にそれを念頭に置いてください。

変数を命名する

変数名にはいくつかの規則があります。文字、数字、_、$を使用できますが、数字で開始することはできず、スペースを含めることはできません。

let firstName = "太郎";
let item2 = "book";

名前は大文字と小文字を区別します。つまり、firstNameとfirstnameは2つの異なる変数です。首都を取得することは誤った初期の間違いであるため、名前を一貫して保つのに役立ちます。

JavaScriptの開発者が使用するスタイルは**キャメルケース**と呼ばれます。小文字で始まり、各後の単語の最初の文字を大文字にし、スペースなし。つまり、firstName、itemPrice、isLoggedInです。

let itemPrice = 19.99;
let isLoggedIn = true;

ルールを超えて、それらが何を保持するかを言う名前を目指してください。priceはpを打ち負かし、userNameはxを打ち負かします。あなたはコードを書くより遥かに多く読みます。明確な名前はそれを読みやすくするものです。

有効な名前のルール。文字、数字、_、$を含むことができます。数字で始まることはできず、letなどのスペースや予約語を含むことはできません。名前は大文字と小文字を区別するため、totalとTotalは個別の変数です。

それらのルール内で、慣例は**キャメルケース**です。小文字の最初の単語、各後続の単語を大文字にし、区切り文字なし。

let firstName = "太郎";
let itemPrice = 19.99;
let isLoggedIn = true;

慣例は言語で強制されていませんが、あなたが働く各コードベースで強制されるため、最初から従ってください。ブール値は、多くの場合、isまたはhasプレフィックス（isLoggedIn、hasDiscount）でよく読めます。値がtrueまたはfalseであることを一目で示すため。

名前はドキュメントです。daysUntilExpiryは次の読者に値が何を意味するかを伝えます。dは彼らを狩りに行かせます。説明的な名前は数回のキープレスの価値があり、実際の時間を節約します。それで彼らを使ってください。

語彙のルール。有効な**識別子**（コード内の名前）は文字、数字、_、$を含むことができます。数字で始まることはできず、予約語（let、const、returnなど）にはなりません。識別子は大文字と小文字を区別するため、totalとTotalは個別です。

その上に層状化した慣例は変数のキャメルケースで、言語が強制しなくてもそれを交渉不可能なものとして扱う価値があります。ツーリング、チームメイト、すべての人気のあるスタイルガイドはそれを想定しているため、偏差は利益なしに摩擦を追加します。

const firstName = "太郎";
const itemPrice = 19.99;
const isLoggedIn = true;

より高い価値の習慣は意味を持つ命名です。名前は持っている最も安いドキュメントであり、それが説明する値の上に位置しているため、最も正確に留まる可能性が高いものです。remainingCreditsは、「左側のクレジット」と言っているコメントが残らないかもしれないリファクタを生き残ります。ブール値は、はい/いいえの質問（isActive、hasAccess）として最も読みやすく、変更後に嘘をつく名前を避けてください。const totalのような、概念的に追加し続けるもの。意味が漂流する場合は、それを変更します。明確な命名はこのチャプターで最も高いレバレッジ習慣であり、それは無料です。

Juno変数を命名する 名前は文字、数字、_、$を使用できますが、数字で開始したり、スペースを含めたりすることはできません。名前は大文字と小文字を区別するため、firstNameとfirstnameは異なります。itemPriceのようなキャメルケースを使用し、それらが保持するものを言う名前を選択してください。pの上にpriceを選択します。

Juno変数を命名する 有効な名前は文字、数字、_、$を使用しており、数字で始まることはなく、大文字と小文字を区別します。慣例はキャメルケースであり、言語は強制しませんが、すべてのコードベースはそうしています。そのため、初日から従ってください。説明的な名前は、正確なままのドキュメントなので、dの上にdaysUntilExpiryにキープレスを費やしてください。

Juno変数を命名する 識別子は文字、数字、_、$を許可し、数字で始めることはなく、予約語にはなりません。大文字と小文字を区別します。キャメルケースを使用してください。言語は強制しませんが、すべてのツールとチームメイトはそれを想定しています。ここで最も高いレバレッジ習慣を意味するために命名することで、それは何もコストがかかりません。そのため、rの上にremainingCreditsをデフォルトにしてください。

ここから変数がどこへ行くか

変数はすべての基盤であり、他のすべてはそれに座ります。値は、名前でそれに到達できるまで有用ではありません。あなたは現在、letで値を保存する、constで値をロックする、およびそれをよく命名する3つの重要なムーブがあり、ここから書く必要があるすべてのプログラムでそれらの3つをすべて使用します。

次に、データ型で値自体を見ていきます。保存しているテキスト、数字、ブール値、および各値がそれが行う理由について。その後、演算子はそれらの値を組み合わせる方法を示し、関数は変数が値に名前を付ける方法で仕事の名前を付けることができます。