JavaScriptでconstを


なぜそれがVistaを広範囲にわたる記事からJavaScriptで使用するのが悪い考えであるかを学んだので、この記事はES 6とそれ以降のJavaScriptバージョン、すなわちletとconstから導入される2つの選択肢に集中します.
letとconstは、JavaScriptプロジェクトのVARの使用に従うすべての問題を明確にしたVARへの最良の選択肢です.この記事は、JavaScriptのletまたはconstを使用する最良のインスタンスであるときに明瞭になります.
1 .みましょう.

Unlike var, let DOES NOT allow redefining of variables within the same scope. This means that unlike in var if a variable is already defined, trying to redefine it a second time will result in an error. Check article and specifically visit the example of variable redefinition with var to get a better understanding. Basically, this example is NOT allowed by let;


// jshint esversion:6
"use strict";
/* jshint node: true */
let target = 20;
console.log(target);
let target = 'twenty';
console.log(target);
これは、ターゲットが既に定義されていることを示すエラーを生成します.変数宣言をvarとletと混ぜるのは、本当に悪い考えです.記事が示すように、それは完全にuse varについて忘れるだけです.
これは完全に許可し、Javascriptでの法的操作である変数の再署名と混乱する必要はありません.例
// jshint esversion:6
"use strict";
/* jshint node: true */
let target = 20;
console.log(target);
target = 'twenty';
console.log(target);
これは変数を再定義しませんが、値を20から20まで、そしてデータ型を数値から文字列に変更します.
バグコードの中でJavaScriptコードを実行しているときに、開発者ツールまたはノードコンソールからブラウザコンソールを利用するとき、JavaScriptコーディングを妨げるか、制限しないので、巨大な問題でないletの唯一の欠点は起こります.JavaScriptコードを実行するこれらのメソッドを具体的に明確にする記事を見てください.
2つのプラットフォームからのコードスニペットの実行は、codepenのような新興のプラットフォームを考慮した有害な問題ではないとして、指定された時間で複数の変数定義を意味する変数の再定義を禁止します.

Unlike var, variables declared using let utilize block scope. These variable's usability and availability are limited to the block scope. What's even better, is that these variables are only available after definition avoiding the issue of variable hoisting described in article.


以下の例を使用します
// jshint esversion:6
"use strict";
/* jshint node: true */
console.log(target);
console.log('entering the loop');
for (let i = 0; i < 4; i++) {
  console.log(target);
  let target = 'target' + i;

}
console.log('Exiting loop');
console.log(target);
varと異なり、letは定義される前に変数へのアクセスを許可しません.また、そのコードを実行するとエラーが発生します

target was used before it was declared, which is illegal for 'let' variables.**


第2章
このキーワードは、値を変更すべきでない変数を定義するために使用されます.letとconstの違いを理解するために,可変変異性として知られている概念がある.

Basically, A mutable object is an object whose state can be modified/changed after it is created while Immutables are the objects whose state cannot be changed/modified once the object is created.


これはletとconstの最大の違いです.前の例から、letで変数を宣言した後、値とデータ型を次のように再割り当てできます
// jshint esversion:6
"use strict";
/* jshint node: true */
let target = 20;
console.log(target);
target = 'twenty';
console.log(target);
これはletを使用して宣言されたすべての変数が変更可能か変更可能かを意味します.
constは全く新しい話です.constで宣言された変数は変更または変更できません.基本的にこれは許されません.
// jshint esversion:6
"use strict";
/* jshint node: true */
const target = 20;
console.log(target);
target = 'twenty';
console.log(target);
しかし、constには制限があります.よく理解するには、JavaScriptのプリミティブと参照値の違いを参照してください.

The article elaborates that the major difference between primitive and reference types in javascript is primitive types have a fixed amount of memory space allocated to the values while reference types can be of any size or length.


したがって、制約に戻ると、constで宣言された変数の無能性は、番号、文字列、boolean、null、未定義、ES 6のシンボル、オブジェクト、関数、および配列のような参照であるが、参照されるオブジェクトではなく、原始的な値でしか動作しない.

// jshint esversion:6
"use strict";
/* jshint node: true */
const names = ['Cyrus', 'Codes', 'Hash', 'Node', 'Works'];
console.log(names);
names[1] = 'code';
console.log(names);
この例から、constは配列を保護します.配列項目'コード'を' code 'に変更することができます.
より多くの場合、操作は配列に新しい項目を追加し、他の要素を削除するような配列で実行できます.
// jshint esversion:6
"use strict";
/* jshint node: true */
const names = ['Cyrus', 'Codes', 'Hash', 'Node', 'Works'];
console.log(names); //[ 'Cyrus', 'Codes', 'Hash', 'Node', 'Works' ]
names[1] = 'code';
console.log(names); //[ 'Cyrus', 'code', 'Hash', 'Node', 'Works' ]
//operations
names.push('Blogs');
console.log(names); //[ 'Cyrus', 'code', 'Hash', 'Node', 'Works', 'Blogs' ]
names.pop();
console.log(names); //[ 'Cyrus', 'code', 'Hash', 'Node', 'Works' ]
許可されていないのは、配列の再割り当てです.
// jshint esversion:6
"use strict";
/* jshint node: true */
const names = ['Cyrus', 'Codes', 'Hash', 'Node', 'Works'];
console.log(names);
names = [1, 2, 4, 6, 7];
すべてのことは、constがオブジェクト、配列、あるいはこれらのオブジェクトの内部に対して同じ制限をしない関数の可能性を防ぎます.
JavaScriptを使用している間、これは単なる注意ですが、これらのオブジェクトの内容も不変である/不変の、すなわちfreeze ()のままであることを保証するJavaScriptメソッドがあります.以下に例を示します.
// jshint esversion:6
"use strict";
/* jshint node: true */
const names = ['Cyrus', 'Codes', 'Hash', 'Node', 'Works'];
Object.freeze(names);
names[1] = 'code';
console.log(names);
これは次のようにエラーになります
TypeError: Cannot assign to read only property '1' of object '[object Array]'
これは部分的に限界を解決した.一部聞いてください.凍結メソッドは、最終的にconstと同じ制限を発生させます.参照されるオブジェクト名[ 1 ]が原始的であるので、それは上の例でしか機能しません.これが他の内部のオブジェクトへのリファレンスであるならば、我々は運が尽きます.これは、オブジェクトが上記の例のような原始的なタイプではなく、他のオブジェクトの中で入れ子にされるところを指します.
これを詳しく説明するには、次のようにオブジェクトが入れ子になっている配列を使用します
// jshint esversion:6
"use strict";
/* jshint node: true */
const days = {
  total: 7,
  color: 'blue',
  weekdays: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
};
console.log(days);
days.color = 'red';
console.log(days);

単に
  • を置くだけで、それが不変になっているconstとして宣言されたオブジェクト(日)があります.
  • オブジェクト(日)は、それをいくつかの変数すなわち中に入れます;合計、色、および平日.
  • オブジェクトがCOSTを使用して宣言されていても、上記の例から、
  • は、青から赤への色の値を変更するとき、その内容は明白です.
  • まだ私と?これを解決するには、以下のようにオブジェクトの内部(総、色、平日)を不変にするメソッドFreeZE ()を導入します.
    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    const days = {
      total: 7,
      color: 'blue',
      weekdays: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
    };
    Object.freeze(days);
    console.log(days);
    days.color = 'red';
    console.log(days);
    
    このコードは次のようにエラーを生成します
    TypeError: Cannot assign to read only property 'color' of object '#<Object>'
    
    つまり、メソッド凍結は、内部での無能性/変更可能性の問題を解決します.これは、constの制限に対する解決策である不変であるか不変ではありません.同じ例から、オブジェクト日には、基本的に配列の基本的な曜日があります.
    信じようと信じまいと、これは凍結方法の力が終わりに来るところです.FreeZ ()は、ネストされたオブジェクトの内部ではなく、プリミティブとオブジェクトで動作します.
    これは、色(原始値である)を変更することは不可能ですが、上記の例によって凍結が適用されると、ネストされた配列(平日)の内部のどれかを次のように可能なデータに変えることは非常に可能です

    Change first internal of the nested array in this case sun to Sunday;


    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    const days = {
      total: 7,
      color: 'blue',
      weekdays: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
    };
    Object.freeze(days);
    console.log(days);
    days.weekdays[0] = 'Sunday';
    console.log(days);
    
    JavaScriptが自由に変数やオブジェクトを連続的に入れ子にすることができます.例
    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    const days = {
      total: 7,
      color: 'blue',
      weekdays: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
    };
    Object.freeze(days);
    console.log(days);
    days.weekdays[0] = ["Sunday Morning", "Sunday Afternoon"];
    console.log(days);
    
    概要

    Var;

    • Var allows variable redefinition which is a bad idea for various reasons elaborated in this article..
    • var allows variable hoisting - Acess and usability of a variable before the declaration.
    • NO block scope - Variables defined within a block example in a loop, are accessible outside this scope.

    Let

    • Does NOT allow variable redefinition.
    • Does NOT allow variable hoisting- access, and usability of variables before the declaration.
    • Allows variable reassignment either the value or even the datatype (Mutable/Changeable). Has
    • HAS block scope - Variables defined within a block example in a loop are accessible only inside this scope.

    Const

    • Does NOT allow variable redefinition.
    • Does NOT allow variable hoisting- access, and usability of variables before the declaration.
    • Does NOT allow variable reassignment either the value or even the datatype (NOT Mutable / NOT Changeable).
    • HAS block scope - Variables defined within a block example in a loop are accessible only inside this scope.

    freeze() method

    • Makes primitive and objects declared with const immutable/unchangeable which is evident where it's impossible to change the color of the object from blue to red once freeze() was introduced.
    • Does NOT make the internals of nested objects immutable/unchangeable which is evident where the values of the nested array are changed in one example from a primitive String(sun) to another primitive String (Sunday), and the second example from a primitive String (sun) to a nested array with two primitive Strings namely Sunday Morning and Sunday Afternoon.

    constとletの使いやすさを広範囲にカバーして、それを含むletの上にconstを使用する利点を理解することが不可欠です
    JavaScriptコードのエラーが少ない
    JavaScriptコードの簡単な管理と流れ、
  • constは、不変の例であることを意図した変数の意図しない変化を防止する
  • const pi = 3.142;
    
    凍結メソッドは、letとconstの両方の内部の変異性である無力の問題を解決します.これは、オブジェクトの参照値を、次の2つの例で明らかに変更することを意味します
    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    let days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
    console.log(days);
    days[0] = 1;
    console.log(days);
    
    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
    console.log(days);
    days[0] = 1;
    console.log(days);
    
    これは以下のように解決される.
    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
    const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
    console.log(days);
    Object.freeze(days);
    days[0] = 1;
    console.log(days);
    
    コード全体で、次の行が特に上部に含まれている.
    // jshint esversion:6
    "use strict";
    /* jshint node: true */
    
    私たちのコードを厳密モードで実行するのを助けます.正確にこれが何を意味するかを知るために、記事を読んでください.

    Personal Note: This article has been a long one but very informative. Frankly, I've learned and understood more than I had when I started it about the variable declaration, nesting of objects, and limitations of every variable declaration keyword namely var, let, and const.

    To understand everything in it my best advice would be to run all code snippets attached and have a look at its outcome, try to reason it out, and then check the preceding explanation for clarification.

    To easily run all your javascript code snippets, read article and choose your best option to run these snippets.


    この記事を読むのに時間を割いてくれてありがとう.私は本当に読書を通してあなたの忍耐と注意を感謝します.これはちょうど始まりであり、私の開発の旅に関連する多くのヒントやポストだけでなく、技術的な側面は、途中にあり、彼らが行うときに通知を取得するには、私に従ってください.
    あなたがより寛大に感じているならば、私は私にコーヒーを買うのを止めません.次の記事まで、私の前のものを見てください、そして、あなたはあなたが考えるより多くの利益を得るかもしれません.