Let, Const, and Template Strings

`let` and `const`

ES2015 brings us some new words to declare variables, along with a new kind of scope. So far we have only seen global and function scope, but the keyword let gives us access to block scope. You can think of blocks as code inside of curly braces that are not part of an object or function definition. Blocks exist in if statements, for/while loops, switch statements and try/catch blocks. Here are some examples:

let moderator = '@Dan&Jel';
if (moderator === '@Dan&Jel') {
  let anotherModerator = 'SoloLearn';
}
anotherModerator; // ReferenceError! This would not be true if we had used 'var' instead of 'let'.

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// Try replacing let i = 0 by var i = 0 in the above. What happens ... and why?

ES2015 also gives us another keyword const which allows us to create constants. You can think of a constant as variables that can not be reassigned.

const favoriteFood = 'Big Mac';
favoriteFood = 'Royale with Cheese';
// Uncaught TypeError: Assignment to constant variable.
const person;
// Uncaught SyntaxError: Missing initializer in const declaration

Like let , const also respects block scope. This is the biggest difference between using let and const as opposed to the keyword var .

Template strings

ES2015 gives us string interpolation using back ticks (``) and adding our variables in a ${} . Here is an example:

`Now we can do string interpolation like ${1 + 1}`;
 
var person = '@Dan&Jel';

`My name is ${person}`;

String interpolation can make working with strings much more convenient, because it allows us to avoid having to do a lot of string concatenation:

var firstName = 'Danijel';
var lastName = 'Ivanovic';
var title = 'moderator';
var employer = 'SoloLearn';

// UGHHH, so much concatenation ...!!
var greeting1 = 'Hi, my name is '+ firstName +' '+ lastName +', I am a '+ title +' at '+ employer +'!';

// Much better
var greeting2 = `Hi, my name is ${firstName} ${lastName}, I am a ${title} at ${employer}!`;

`for of` loop

Another nice addition to ES2015 is the for of loop which allows us to iterate through what is called an iterable . We will not get in depth about iterables , but know that these include objects, arrays and even returned values from generators.

let arr = [1, 2, 3, 4, 5];

for (let val in arr) {
  console.log(val);
}

// 0
// 1
// 2
// 3
// 4

for (let val of arr) {
  console.log(val);
}

// 1
// 2
// 3
// 4
// 5

When dealing with arrays, note the difference between a for in loop and a for of loop. The for in loop will loop over the indices of an array; the for of loop will loop over the elements of an array:

let letters = ['a', 'b', 'c'];

for (let idx in letters) {
  console.log(idx);
}

// 0
// 1
// 2

for (let char of letters) {
  console.log(char);
}

// 'a'
// 'b'
// 'c'

Example #1 Let and Const

Example #2 for..of Loops

Here's a quick summary!

let & const

• Read more about let here!

• Read more about const here!

let and const basically replace var . You use let instead of var and const instead of var if you plan on never re-assigning this "variable" (effectively turning it into a constant therefore).

• Dive into # var, let & const how these different approaches differ and when to use which.

**A Simple Explanation of JavaScript Variables: const, let, var

Have a nice Coding!

When you're ready, move on to Arrow Functions

inv

Happy SoloLearning ;) by @booleanmaybe

inv