This is the fourth day of my participation in Gwen Challenge

Const and let variables

Problems with using var:

function getClothing(isCold) {
  if (isCold) {
    var freezing = 'Grab a jacket!';
  } else {
    var hot = 'It's a shorts kind of day.';
    console.log(freezing);
  }
}
Copy the code

GetClothing (false) will output undefined because all variables will be promoted to the top of the function scope before function is executed.

Variables declared by let and const solve this problem because they are block-level scoped. A variable declared by let or const in a code block (represented by {}) is stuck in a temporary dead zone until the declaration of the variable is processed.

function getClothing(isCold) {
  if (isCold) {
    const freezing = 'Grab a jacket!';
  } else {
    const hot = 'It's a shorts kind of day.';
    console.log(freezing);
  }
}
Copy the code

GetClothing (false) will print ReferenceError: Freezing is not defined, because freezing is not declared in the else statement, function scope, or global scope, so ReferenceError is raised.

About using let and const rules:

  • Variables declared using let can be reassigned, but cannot be redeclared in the same scope
  • Variables declared with const must be initialized by assignment, but cannot be redeclared or reassigned in the same scope class.

Template literals

Prior to ES6, the method to concatenate strings together was the + or concat() method, as in

const student = {
  name: 'Richard Kalehoff',
  guardian: 'Mr. Kalehoff'
};

const teacher = {
  name: 'Mrs. Wilson',
  room: 'N231'
}

let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';
Copy the code

Template literals are essentially string literals that contain embedded expressions.

Template literals are expressed in inverted quotation marks (”) (instead of single quotation marks (”) or double quotation marks (“”)) and can contain placeholders as ${expression}

let message = `${student.name} please see ${teacher.name} in
${teacher.room} to pick up your report card.`;
Copy the code

deconstruction

In ES6, you can use deconstruction to extract values from arrays and objects and assign them to unique variables

Destruct array values:

const point = [10, 25, -34];
const [x, y, z] = point;
console.log(x, y, z);

Prints: 10 25 -34
Copy the code

[] represents the array to be deconstructed, and x,y,z represent the variables in which the values of the array are to be stored. Values can also be ignored when deconstructing an array, such as const[x,,z]=point, ignoring the y coordinate. Deconstructing values in objects:

Const gemstone = {type: 'Quartz ', color: 'rose', karat: 21.29}; const {type, color, karat} = gemstone; console.log(type, color, karat);Copy the code

Curly braces {} represent the object being deconstructed, and type, color, and karat represent the variables into which attributes from the object are to be stored

Shorthand for object literals

let type = 'quartz'; let color = 'rose'; Let the carat = 21.29; const gemstone = { type: type, color: color, carat: carat }; console.log(gemstone);Copy the code

If you initialize an object with the same name as the assigned variable, you can delete the duplicate variable names from the object properties.

let type = 'quartz'; let color = 'rose'; Let the carat = 21.29; const gemstone = {type,color,carat}; console.log(gemstone);Copy the code

Abbreviation method name:

const gemstone = { type, color, carat, calculateWorth: Function () {// Calculate the value of the gemstone according to the type, color, and carat}};Copy the code

Anonymous functions are assigned to attribute calculateWorth, but is the function keyword really needed? Not in ES6!

let gemstone = { type, color, carat, calculateWorth() { ... }};Copy the code

for… Of circulation

for… The of loop is the latest addition to the JavaScript loop family.

It combines its sibling forms for loop and for… The advantage of an IN loop is that you can loop through any iterable (that is, iterable protocol) type of data. By default, the following data types are included: String, Array, Map, and Set. Note that the Object data type ({}) is not included. By default, objects are not iterable.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < digits.length; i++) {
  console.log(digits[i]);

Copy the code

The biggest disadvantage of the for loop is the need to track counters and exit conditions.

While the for loop does have advantages when iterating through arrays, some data structures are not arrays, so loop loops are not always appropriate.

for… In circulation

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}
Copy the code

You still need to use index to access the value of the array

When you need to add additional methods (or another object) to an array, for… In loops can cause a lot of trouble. Because of the for… The IN loop loops through all enumerable properties, meaning that if you add any other properties to the prototype of the array, those properties will also appear in the loop.

Array.prototype.decimalfy = function() { for (let i = 0; i < this.length; i++) { this[i] = this[i].toFixed(2); }}; const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (const index in digits) { console.log(digits[index]); }Copy the code

The forEach loop is another form of JavaScript loop. However, forEach() is really an array method, so it can only be used in arrays. There is no way to stop or exit the forEach loop. If you want this behavior in your loop, you need to use a basic for loop.

for… Of circulation

for… The of loop is used to loop over any iterable data type.

for… The way the of loop is written and for… The in loop is basically the same, just replace the in with of, and you can ignore the index.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}
Copy the code

It is recommended to use plural object names to represent collections of multiple values. Thus, when iterating through the collection, singular versions of names can be used to represent individual values in the collection. For example, for (const button of buttons) {… }.

for… The of loop has other advantages as well, solving for and for… Shortcomings of the IN loop. You can always stop or quit for… Of circulation.

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}
Copy the code

Don’t worry about adding new attributes to the object. for… The of loop will only loop over the values in the object.

Array.prototype.decimalfy = function() { for (i = 0; i < this.length; i++) { this[i] = this[i].toFixed(2); }}; const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (const digit of digits) { console.log(digit); }Copy the code