JavaScript ES6

The let keyword

The let keyword was introduced in ES6 as a new way of declaring variables in JavaScript. It provides block-level scoping, which means that variables declared with let can only be accessed within the block in which they were declared.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript let</h1>
<script>
    let a = 10;
    {
        let a = 15;
    }
    document.write(a);
</script>

</body>
</html>

Preview

The const keyword

The const keyword was introduced in ES6 as a new way to declare constants in JavaScript. Constants are similar to variables, but once defined, their value cannot be changed.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript const</h1>
<script>
    var b = 10;
    {
        const b = 15;
    }
    document.write(b);
</script>

</body>
</html>

Preview

Arrow Functions

Arrow functions were introduced in ES6 as a shorthand syntax for writing functions in JavaScript. They provide a more concise and readable way to write functions, especially for simple one-line functions.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Arrow Functions</h1>
<script>
    const a = (a, b) => a * b;
    document.write(a(6, 4));
</script>

</body>
</html>

Preview

The ... Operator

The ... operator, also known as the spread syntax, was introduced in ES6 as a way to spread the elements of one iterable (like an array) into another iterable (like a function call).

Example

<!DOCTYPE html>
<html>
<body>

<h1>The ... Operator</h1>
<script>
    const x1 = ["Jan", "Feb", "Mar"];
    const x2 = ["Apr", "May", "Jun"];
    const x3 = ["Jul", "Aug", "Sep"];
    const x4 = ["Oct", "Nov", "Dec"];

    const year = [...x1, ...x2, ...x3, ...x4];
    document.write(year);
</script>

</body>
</html>

Preview

For/of loop

The for...of loop was introduced in ES6 as a new way to loop over iterable objects (such as arrays, strings, and maps) in JavaScript. This provides a cleaner and more readable syntax than the traditional for loop.

Example

<!DOCTYPE html>
<html>
<body>

<h1>For/of loop</h1>
<script>
    const lang = ["HTML", "CSS", "JavaScript", "jQuery"];
    let result = "";

    for (let x of lang) {
        result += x + "<br>";
    }
    document.write(result);
</script>

</body>
</html>

Preview

Map Objects

A Map object in JavaScript is a collection of key-value pairs, similar to an object. However, Map objects can have any type of value as a key (not just strings or symbols, like objects), and they maintain the order of their elements (unlike objects).

Example

<!DOCTYPE html>
<html>
<body>

<h1>Map Objects</h1>
<script>
    const lang = new Map([
        ["HTML", 90],
        ["CSS", 80],
        ["JavaScript", 70]
    ]);
    document.write(lang.get("HTML"));
</script>

</body>
</html>

Preview

Set Objects

A set object in JavaScript is a collection of unique values, which can be of any type. Unlike arrays, Set objects do not allow duplicates, so each value in the collection can appear only once.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Set Objects</h1>
<script>
    const lang = new Set();

    lang.add("HTML");
    lang.add("CSS");
    lang.add("JavaScript");

    document.write(lang.size)
</script>

</body>
</html>

Preview

JavaScript Classes

Classes were introduced in ES6 as a new way to define objects and their behavior in JavaScript. They provide a more familiar and structured syntax for creating objects that share the same properties and methods.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Classes</h1>
<script>
    class Bike {
        constructors(name , year){
            this.name = name;
            this.year = year;
        }
    }
    const myBike = new Bike("Hero", 2018);
    document.write(myBike.name + " " + myBike.year);
</script>

</body>
</html>

Preview

JavaScript Promises

Promises were introduced in ES6 as a way to handle asynchronous operations in JavaScript. They provide a cleaner and more structured way to handle callbacks and avoid callback hell. A promise is an object that represents a value that may not yet be available, but will be resolved (or deallocated) at some point in the future. Promises have three statuses: Pending, Resolved, or Rejected. Once a promise is resolved or discarded, it cannot be changed.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Promises</h1>
<script>
    const myPromise = new Promise(function(myResolve, myReject){
        setTimeout(function(){myResolve("Hello, World!"); }, 2000);
    });
    myPromise.then(function(value) {
        document.write(value);
    });
</script>

</body>
</html>

Preview

JavaScript Symbol

Symbol is a new primitive data type introduced in ES6. It is a unique identifier that can be used as a property key across objects. Symbols are guaranteed to be unique, even if their description is the same.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Symbol</h1>
<script>
    const prson = {
        fname: "Peter",
        lname: "Baker",
        age : 26,
    }
    let id =  Symbol("id");
    prson[id] = 150456;

    document.write(prson[id]);
</script>

</body>
</html>

Preview

Default Parameters

Default parameters were introduced in ES6 as a way to provide default values for function parameters. If a function is called without passing the value of a parameter that has a default value, the default value will be used instead.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Default Parameters</h1>
<script>
    function myFunction(a, b = 8) {
        return a + b;
    }
    document.write(myFunction(7));
</script>

</body>
</html>

Preview

Function Rest Parameter

The rest parameter syntax allows a function to accept any number of arguments in the form of an array. The rest of the parameters are denoted by using three dots before the parameter name, as in: ...args.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Function Rest Parameter</h1>
<script>
    function fun(...input){
        let sum = 0;
        for(let i of input){
            sum+=i;
        }
        return sum;
    }
    document.write(fun(1,2,3));
</script>

</body>
</html>

Preview

String.includes()

The String.includes() is a String method introduced in ES6. It is used to determine whether a string contains another string, and returns a boolean value indicating whether the search string was found in the original string.

Example

<!DOCTYPE html>
<html>
<body>

<h1>String.includes()</h1>
<script>
    const str = "Hello, world!";
    document.write(str.includes("Hello"));
</script>

</body>
</html>

Preview

String.startsWith()

The startWith() method is a String method introduced in ES6. It is used to determine whether a string begins with another string, and returns a Boolean value indicating whether the search string was found at the beginning of the original string

Example

<!DOCTYPE html>
<html>
<body>

<h1>String.startsWith()</h1>
<script>
    const str = "Hello, world!";
    document.write(str.startsWith("Hello"));
</script>

</body>
</html>

Preview

String.endsWith()

endsWith() method is a String method introduced in ES6. It is used to determine whether a string ends with another string, and returns a Boolean value indicating whether the search string was found at the end of the original string.

Example

<!DOCTYPE html>
<html>
<body>

<h1>String.endsWith()</h1>
<script>
    const str = "Hello, world!";
    document.write(str.endsWith("world!"));
</script>

</body>
</html>

Preview

Array.from()

Array.from() method is a static method introduced in ES6. It creates a new, shallowly-copied Array instance from an array-like or iterable object. The method takes two arguments: the first is the array-like or iterable object to be converted, and the second is an optional map function that can be used to map the values before adding them to the new array.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array.from()</h1>
<script>
    const myArray = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
    document.write(myArray);
</script>

</body>
</html>

Preview

Array keys()

The keys() method is an array method introduced in ES6. It returns a new ArrayIterator object containing the keys of each index in the array

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array keys()</h1>
<script>
    const lang = ["HTML", "CSS", "JavaScript", "jQuery"];
    const keys = lang.keys();

    let result = "";
    for (let x of keys) {
        result += x + "<br>";
    }
    document.write(result);
</script>

</body>
</html>

Preview

Array find()

find() method is an array method introduced in ES6. It is used to retrieve the value of the first element in an array that satisfies a condition. The method returns undefined if no element satisfies the condition. The find() method takes a callback function as its argument, which should return a boolean value. The method will return the first element that satisfies the condition.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array find()</h1>
<script>
    const num = [4, 6, 10, 30, 15];
    const result = num.find(myFunction);

    document.write(result);

    function myFunction(value) {
        return value > 12;
    }
</script>

</body>
</html>

Preview

Array findIndex()

findIndex() method is an array method introduced in ES6. It is used to retrieve the index of the first element in an array that satisfies a given condition. The method returns -1 if no element satisfies the condition. The findIndex() method takes a callback function as its argument, which should return a boolean value. The method will return the index of the first element that satisfies the condition.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Array findIndex()</h1>
<script>
    const num = [4, 6, 10, 30, 15];
    const result = num.findIndex(myFunction);

    document.write(result);

    function myFunction(value) {
        return value > 12;
    }
</script>

</body>
</html>

Preview

New Math Methods

1. Math.trunc()

This method returns the integer part of a number by removing any fractional digits.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Javascript Math trunc()</h1>
<script>
    document.write(Math.trunc(5.4))
</script>

</body>
</html>

Preview

2. Math.sign()

This method returns the sign of a number, indicating whether the number is positive, negative, or zero. It returns 1 for positive numbers, -1 for negative numbers, and 0 for zero.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Javascript Math sign()</h1>
<script>
    document.write(Math.sign(5))
</script>

</body>
</html>

Preview

3. Math.cbrt()

This method returns the cube root of a number.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Javascript Math cbrt()</h1>
<script>
    document.write(Math.cbrt(10))
</script>

</body>
</html>

Preview

4. Math.log10()

This method returns the base 10 logarithm of a number.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Javascript Math.log10()</h1>
<script>
    document.write(Math.log10(100))
</script>

</body>
</html>

Preview

5. Math.log2()

This method returns the base 2 logarithm of a number.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Javascript Math.log2()</h1>
<script>
    document.write(Math.log2(100))
</script>

</body>
</html>

Preview

New Number Properties

1. Number.EPSILON

This property represents the smallest difference between two representable numbers. This is useful when comparing floating-point numbers for equality.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript EPSILON</h1>
<script>
    const num = Number.EPSILON;
    document.write(num);
</script>

</body>
</html>

Preview

2. Number.MAX_SAFE_INTEGER

This property represents the maximum integer value that can be safely represented in JavaScript, which is 2^53 - 1.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript MAX_SAFE_INTEGER</h1>
<script>
    const num = Number.MAX_SAFE_INTEGER;
    document.write(num);
</script>

</body>
</html>

Preview

New Number Methods

ES6 introduced several new methods to the Number object:

1. Number.isInteger()

This method determines whether the given value is an integer or not. Returns true if the value is an integer, otherwise false.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Number.isInteger()</h1>
<script>
    document.write(Number.isInteger(12));
</script>

</body>
</html>

Preview

2. Number.isSafeInteger()

This method determines whether the given value is a safe integer or not. A safe integer is an integer that can be represented exactly as a number value. Returns true if the value is a safe integer, otherwise it returns false.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Number.isSafeInteger()</h1>
<script>
    document.write(Number.isSafeInteger(12));
</script>

</body>
</html>

Preview

New Global Methods

ES6 introduced several new global methods, meaning they are not part of a specific object, but can be called directly from anywhere in the code. Here are some new global methods:

1. Number.isFinite()

This method determines whether the given value is a finite number or not. Returns true if the value is a finite number, otherwise it returns false.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript isFinite() Method</h1>
<script>
    document.write(isFinite(10 / 1));
</script>

</body>
</html>

Preview

2. Number.isNaN()

This method determines whether the given value is NaN or not. It returns true if the value is NaN, otherwise it returns false.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript isNaN() Method</h1>
<script>
    document.write(isNaN("WebTutor"));
</script>

</body>
</html>

Preview

Object entries

Object.entries() is a method introduced in ES2017 (ES8) that returns an array of a given object's own enumerable property [key, value] pairs. It basically allows you to turn an object into an array of arrays, where each internal array contains two items: the key and the value of a property. The Object.entries() method is a new method introduced in ECMAScript 2017 (ES8) that returns an array of a given object's own enumerable property [key, value] pairs.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array entries()</h1>
<script>
    const arr = ["HTML", "CSS", "Javascript", "jQuery"];
    const lang = arr.entries(3, 1);

    for (let result of lang){
        document.write(result + "<br>")
    }
</script>

</body>
</html>

Preview

JavaScript Modules

JavaScript modules are a way of organising code into independent, reusable components. They are an important feature of ECMAScript 6 (ES6), which introduced a standardised module syntax for JavaScript. Modules allow developers to break down their code into smaller, more manageable pieces, which can then be imported and used in other parts of the codebase.

There are two types of JavaScript modules: built-in modules and user-defined modules.

Built-in modules are provided by the JavaScript environment and include modules such as maths and date.
User-defined modules are created by developers and can be shared and imported across different parts of the codebase.

ES6 modules use the import and export keywords to define and use modules. The export keyword is used to mark a function, variable, or object as public, making it available for use in other parts of the codebase. The import keyword is used to bring one module into another module.

Example

import wlcmsg from "./wlcmsg.js";
document.write(wlcmsg());

JS ES5

HTML DOM