Skip to main content

Session 01: JavaScript (ES Next)

Access https://playcode.io/ and start coding​

JavaScript Next​

JavaScript let​

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

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

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.

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

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.
  • 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.
// ES5
var x = function (x, y) {
  return x * y;
};

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

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

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.

🔹Looping over an Array

const cars = ['BMW', 'Volvo', 'Mini'];
// Method 1:
for (let car of cars) {
  console.log(car);
}

// Method 2:
for (let i in cars) {
  console.log(cars[i]);
}

🔹Looping over a String

let language = 'JavaScript';
let text = '';

for (let x of language) {
  text += x + ' ';
}

🔹Looping over properties of an Object:

const person = { fname: 'John', lname: 'Doe', age: 25 };

let text = '';
for (let x in person) {
  text += person[x];
}

🔹Array.forEach()

The forEach() method calls a function (a callback function) once for each array element.

const numbers = [45, 4, 9, 16, 25];

let txt = '';
numbers.forEach((value, index) => {
  console.log(value);
});

JavaScript Maps​

Learn more about Set objects in the the chapter: JavaScript Maps.

  • A Map holds key-value pairs where the keys can be any datatype.
  • A Map remembers the original insertion order of the keys.
  • A Map has a property that represents the size of the map.
// Create Objects
const apples = { name: 'Apples' };
const bananas = { name: 'Bananas' };
const oranges = { name: 'Oranges' };

// Create a new Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

JavaScript Sets​

Learn more about Set objects in the the chapter: JavaScript Sets.

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add('a');
letters.add('b');
letters.add('c');

JavaScript Classes​

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

  • JavaScript Classes are templates for JavaScript Objects.
  • Use the keyword class to create a class.
  • Always add a method named constructor():
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

A JavaScript class is not an object.

It is a template for JavaScript objects.

🔹Using a Class

const myCar1 = new Car('Ford', 2014);
const myCar2 = new Car('Audi', 2019);

JavaScript Promises​

  • 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.
const myPromise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('I love You !!');
  }, 3000);
});

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

Default Parameter Values​

ES6 allows function parameters to have default values.

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

Function Rest Parameter​

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

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);

String.includes()​

The includes() method returns true if a string contains a specified value, otherwise false:

let text = 'Hello world, welcome to the universe.';
text.includes('world'); // Returns true

String.startsWith()​

The startsWith() method returns true if a string begins with a specified value, otherwise false:

let text = 'Hello world, welcome to the universe.';

text.startsWith('Hello'); // Returns true

String.endsWith()​

The endsWith() method returns true if a string ends with a specified value, otherwise false:

var text = 'John Doe';
text.endsWith('Doe'); // Returns true

Array.from()​

The Array.from() method returns an Array object from any object with a length property or any iterable object.

Array.from('ABCDEFG'); // Returns [A,B,C,D,E,F,G]
Array from a number
const array = Array.from({ length: 10 }, (_, index) => index + 1);
console.log(array);

Array keys()​

The keys() method returns an Array Iterator object with the keys of an array.

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
const keys = fruits.keys();

let text = '';
for (let x of keys) {
  text += x + '<br>';
}

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:

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find((value, index, array) => {
  return value > 18;
});

Note that the function takes 3 arguments:

  • The item value

  • The item index

  • The array itself

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:

const numbers = [4, 9, 16, 25, 29];
let 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

JavaScript Array.includes()​

ECMAScript 2016 introduced Array.prototype.includes to arrays. This allows us to check if an element is present in an array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];

fruits.includes('Mango'); // is true

Modules​

Learn more about Modules in: JavaScript Modules.

Modules are imported in two differen ways:

🔹Import from named exports

import { name, age } from './person.js';

🔹Import from default exports

import message from './message.js';

JavaScript Async Functions​

async function myDisplay() {
  let myPromise = new Promise(function (myResolve, myReject) {
    setTimeout(function () {
      myResolve('I love You !!');
    }, 3000);
  });
  document.getElementById('demo').innerHTML = await myPromise;
}

myDisplay();

JavaScript Asynchronous Iteration​

ECMAScript 2018 added asynchronous iterators and iterables.

With asynchronous iterables, we can use the await keyword in for/of loops.

for await () {}

JavaScript Promise.finally​

ECMAScript 2018 finalizes the full implementation of the Promise object with Promise.finally:

let myPromise = new Promise();

myPromise.then();
myPromise.catch();
myPromise.finally();

JavaScript Object Rest Properties​

ECMAScript 2018 added rest properties.

This allows us to destruct an object and collect the leftovers onto a new object:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }