ES 6を壊すこと:letとconst

年前今日.ECMA International ecmascriptの6番目のメジャーバージョンをリリースしました.このバージョンは公式にecmascript 2015と命名されましたが、一般的にES 6と呼ばれています.丁.丁.丁.あなたのために鐘を鳴らして、好奇心のその光をつけてください.
仕事を探している間、私は会社がJavascript(ES 6)としてそれを書いて、会社の要件としてJavascriptをリストするとき、ほとんどの時間に気づいた.私の経験から、私はES 6の原則/標準の知識は、多くの企業による仕事の要件として広く求められていることを学んだ.これにより、私はES 6についてこのブログシリーズを書いています

私自身のスキルとES 6ルールの知識を磨く.

ヘルプおよび/またはトピックであなたのスキルを強化するヘルプ.

始める

このブログのポストはこのシリーズの最初のものとなるので、私はEs 6のlet and const . これらのキーワードの各々に深く潜り込む前に、ES 6のブロックスコープの紹介に言及したい.

ブロックスコープ

ES 6の導入の前に、我々は使われましたvar JavaScript内のすべての変数を宣言するには.使用する変数var グローバルスコープまたはローカルスコープに該当する可能性があります.
グローバルスコープ-関数の外部で宣言された変数は、グローバルスコープを持つグローバル変数であると見なされます.つまり、「Webページ上のすべてのスクリプトと関数がアクセスできます」という意味です
ローカルスコープ-関数内で宣言された変数は、ローカルスコープを持つローカル変数であると見なされます.これは、“関数内からのみアクセスできます”ということを意味します.
これらの説明で、ブロックスコープを議論しましょう.使用した変数let and const はブロックスコープ内にあると見なされます.これは、変数が宣言されたブロック内でのみアクセスできることを意味します.ブロックは何ですか.よく、ブロックは通常、括弧を参照してください{} . ブロックは、条件文、ループの間、whileループの中にあるかもしれません.
例として、変数を宣言して使用すると宣言されますlet or const if文内で、変数はif文のブロックスコープ内でのみアクセスできます.
注意:これらの3つのスコープをもっと詳しく見てみてください.

JavaScriptのスコープ

ビクトリアクロフォード・ 4月19日・ 3分読む

#javascript #codenewbie #womenintech #beginners

ブロックスコープが定義されているので、2つのキーワードに移動しましょう.let and const .

レット

既に述べたように.let はブロックスコープ変数と見なされます.同様var , let 変数がスコープ内で再割り当てされます.

function testLet() {
  let cat = “Mr. Whiskers”; 
  console.log(cat) // “Mr. Whiskers”;

  cat = “Tuna”;
  console.log(cat) // “Tuna”;
}

変数let 類似した行為var 再割り当てでは、それはvar それが再宣言に来るとき.var 変数は同じスコープ内で再宣言できますlet 変数はこれを許可しません.

function testLet() {
  let cat = “Mr. Whiskers”; 
  console.log(cat) // “Mr. Whiskers”;

  let cat = “Tuna”; // SyntaxError: Identifier ‘cats’ has already been declared
}

let しかし、変数は、全体の親ブロックスコープ内の子ブロック要素内で同じ名前で宣言できます.これはなぜですか.よく技術的には、これは別のブロックスコープと見なされ、このスコープ内で宣言された変数はその外部にアクセスできません.

function testLet() {
  let cat = “Mr. Whiskers”;

  if (cat) {
    let cat = “Tuna”;
    console.log(cat) // “Tuna”
  }

  console.log(cat) // “Mr. Whiskers”
}

注意:同じプロジェクト内の複数の変数に対して同じ変数名を使用するのは一般的な慣習ではありません.
これらのすべてを使用すると、我々はまだ変数を子供のブロックの要素内の変数の新しい値を割り当てることができます.これはなぜですか.これは、我々がまだ変数のブロック範囲内に技術的にあり、スコープ内のどこにでもアクセスできます.

function testLet() {
  let cat = “Mr. Whiskers”;

  if (cat) {
    cat = “Tuna”;
    console.log(cat) // “Tuna”
  }

  console.log(cat) // “Tuna”
}

使用する変数let に代入できない.var . これは、変数が宣言されたが、まだ定義されていないことを意味しますundefined .

function testLet() {
  let cat;
  console.log(cat) // undefined

  cat = “Mr. Whiskers”;
  console.log(cat) // “Mr. Whiskers”
}

最後には、少なくとも、変数の浮気について話しましょう.使用する場合var , 変数は定義されています.これはスコープの先頭に浮かんでおり、スコープ内の任意の時点で利用可能です.で宣言された変数let 同じ方法で巻かれません.宣言が存在するが、値/定義がないので、宣言される前に変数をコールしようとすると、ReferenceError .

function testLet() {
  console.log(cat) // ReferenceError: cat is not defined
  let cat = “Mr. Whiskers”;
}

コンスト

繰り返しますがconst はブロックスコープ変数と見なされます.Unlike let and var , const 再署名を許可しません.使用const は、識別子が再割り当てされないシグナルです

function testConst() {
  const cat = “Mr. Whiskers”;
  console.log(cat) // “Mr. Whiskers”

  cat = “Tuna”; // TypeError: Assignment to constant variable 
}

const また、変数を初期化せずに宣言することはできません.let and var .

function testConst() {
  const cat; // SyntaxError: Missing initializer in const declaration
}

同様let , const 同じブロックスコープ内で再宣言できません.

function testConst() {
  const cat = “Mr. Whiskers”;

  const cat = “Tuna”; // SyntaxError: Identifier ‘cat’ has already been declared
}

また、let , const また、子ブロック要素内で宣言された変数がその外部で使用できないので、子ブロック要素内で同じ名前の新しい変数を宣言することもできます.

function testConst() {
  const cat = “Mr. Whiskers”;
  console.log(cat) // “Mr. Whiskers”

  if (cat) {
    const cat = “Tuna”;
    console.log(cat) // “Tuna”
  }

  console.log(cat) // “Mr. Whiskers”
}

今、変数を使用して宣言const 変数の値がオブジェクトまたは配列に設定されている場合は、値を再割り当てできません.オブジェクトまたは配列内の値を更新できます.簡単な条件では、例として、オブジェクト内のキーの値を変更することができます.

function testConst() {
  const cats = [“Snowball”];
  console.log(cats) // [“Snowball”]

  cats.push(“Mr. Whiskers”, “Tuna”)
  console.log(cats) // [“Snowball”, “Mr. Whiskers”, “Tuna”]
}

最後の思考

変数を宣言するとき、私はもはや使用しないというスタンスを取ったvar , 同じスコープ内で同じ変数1000 xを宣言できるという事実により、面倒なものになることができます.これは、問題を引き起こし、簡単にコードを破ることができます.また、あなたのコードに貢献したい別のdevに非常に厄介に見えることができます.
変数の値を変更する必要がない場合はconst . カウンタまたはループの場合はlet 使用に最適です.結局、これはすべて個人的な好みに基づいています.ちょうどあなたのコードが公開されている場合は、それをきれいにし、みんなのためだけでなく、簡単に従うようにしてください.
私は、これが役に立ちましたように願っています.何かがある場合は、その必要性を再評価するか、追加してください、私はまだ学んでいるとして、私に知らせてください!

ソース

var vs let vs const in JavaScript
JavaScript ES6+: var, let, or const?
ES6: Let and Const
let
const
ES6 - Variables
JavaScript