9.3 JS 2015 (ES6)

JavaScript let

The let keyword allows you to declare a variable with block scope.

Example 1: JS let

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

Read more about let in the chapter: JavaScript Let.

return to top of page

JavaScript const

• The const keyword allows you to declare a constant (a JavaScript variable with a constant value).
• Constants are similar to let variables, except that the value cannot be changed.

Example 2: JS const

var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10

Read more about const in the chapter: JavaScript Const.

return to top of page

Arrow Functions

• Arrow functions allows a short syntax for writing function expressions.
• You don't need the function keyword, the return keyword, and the curly brackets.

Example 3: JS Arrow Functions

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

• Arrow functions do not have their own this. They are not well suited for defining object methods.
• Arrow functions are not hoisted. They must be defined before they are used.
• Using const is safer than using var, because a function expression is always a constant value.
• You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:

Example 4: JS Arrow Functions part 2

const x = (x, y) => { return x * y };

Learn more about Arrow Functions in the chapter: JavaScript Arrow Function.

return to top of page

The For/Of Loop

• The JavaScript for/of statement loops through the values of an iterable objects.
• for/of lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.
• The for/of loop has the following syntax:

for (variable of iterable) {
  // code block to be executed
}

• variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with const, let, or var.
• iterable - An object that has iterable properties.

Looping over an Array

Example 5: JS For Of Loop - Looping over an Array

var cars = ["BMW", "Volvo", "Mini"];
var x;

for (x of cars) {
  document.write(x + "<br>");
}

Looping over a String

Example 6: JS For Of Loop - Looping over a String

var txt = "JavaScript";
var x;

for (x of txt) {
  document.write(x + "<br>");
}

Learn more in the chapter: JavaScript Loop For/In/Of.

Using a Class

When you have a class, you can use the class to create objects:

Example 7: JS Classes - Using a Class

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Learn more about classes in the the chapter: JavaScript Classes.

return to top of page

JavaScript Promise Object

• A Promise is a JavaScript object that links "Producing Code" and "Consuming Code".
• "Producing Code" can take some time and "Consuming Code" must wait for the result.

Promise Syntax

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Example 8: JS Promise - Using a Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Learn more about Promises in the the chapter: JavaScript Promises.

return to top of page

The Symbol Type

• A JavaScript Symbol is a primitive datatype just like Number, String, or Boolean.
• It represents a unique "hidden" identifier that no other code can accidentally access.
• For instace, if different coders want to add a person.id property to a person object belonging to a third-party code, they could mix each others values.
• Using Symbol() to create a unique identifiers, solves this problem:

Example 9: JS Using JavaScript Symbol()

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person.id = 140353;

• Symbols are always unique.
• If you create two symbols with the same description they will have different values.

Symbol("id") == Symbol("id") // false

return to top of page

Default Parameter Values

ES6 allows function parameters to have default values.

Example 10: JS Functions Default Parameter Values

function myFunction(x, y = 10) {
  // y is 10 if not passed or undefined
  return x + y;
}
myFunction(5); // will return 15

return to top of page

Function Rest Parameter

The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:

Example 11: JS Functions - The Rest Parameter

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

return to top of page

Array.find()

• The find() method returns the value of the first array element that passes a test function.
• This example finds (returns the value of ) the first element that is larger than 18:

Example 12: JS Arrays - The find() Method

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Note that the function takes 3 arguments:

• The item value
• The item index
• The array itself

return to top of page

Array.findIndex()

• The findIndex() method returns the index of the first array element that passes a test function.
• This example finds the index of the first element that is larger than 18:

Example 13: JS Arrays - The findIndex() Method

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Note that the function takes 3 arguments:

• The item value
• The item index
• The array itself

return to top of page

New Number Properties

ES6 added the following properties to the Number object:

• EPSILON
• MIN_SAFE_INTEGER
• MAX_SAFE_INTEGER

Example 14: JS Number Object Properties - EPSILON

var x = Number.EPSILON;

Example 15: JS Number Object Properties - MIN_SAFE_INTEGER

var x = Number.MIN_SAFE_INTEGER;

Example 16: JS Number Object Properties - MAX_SAFE_INTEGER

var x = Number.MAX_SAFE_INTEGER;

return to top of page

The Number.isInteger() Method

The Number.isInteger() method returns true if the argument is an integer.

Example 17: JS Numbers - The isInteger() Method

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

The Number.isSafeInteger() Method

• A safe integer is an integer that can be exactly represented as a double precision number.
• The Number.isSafeInteger() method returns true if the argument is a safe integer.

Example 18: JS Numbers - The isSafeInteger() Method

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

• Safe integers are all integers from -(2⁵³ - 1) to +(2⁵³ - 1).
• This is safe: 9007199254740991. This is not safe: 9007199254740992.

return to top of page

The isFinite() Method

• The global isFinite() method returns false if the argument is Infinity or NaN.
• Otherwise it returns true:

Example 19: JS Numbers - The isFinite() Method

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

The isNaN() Method

The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:

Example 20: JS Numbers - The isNaN() Method

isNaN("Hello");       // returns true

return to top of page