JavaScript - ES6 methods

revision:


ES6 methods list and description

Array.from() : converts array-like values and iterable values into arrays.

syntax:
        const str = 'hello';
        const arr = Array.from(str);
        console.log(arr); // ['h', 'e', 'l', 'l', 'o']
    

Array.of() : creates an instance from a variable number of arguments instead of the number of arguments or type of arguments.

syntax:
        console.log(Array.of(1, 2, 3)); // [1, 2, 3]
        console.log(Array.of(5));       // [5] (not 5 empty slots like new Array(5))
    

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

syntax:
        
    

copyWithin() : copies the part of an array to a different location within the same array.

syntax:
        const arr = [1, 2, 3, 4, 5];
        arr.copyWithin(0, 3); // copy elements starting at index 3 to index 0
        console.log(arr); // [4, 5, 3, 4, 5]
    

find() : finds the firrst value from an array, based on the specific criteria that are passed to this method.

syntax:
        const numbers = [10, 20, 30, 40];
        const found = numbers.find(n => n > 25);
        console.log(found); // 30
    

findIndex() : returns the index of the first element of the given array that satisfies the given condition.

syntax:
        const numbers = [10, 20, 30, 40];
        const index = numbers.findIndex(n => n > 25);
        console.log(index); // 2
    

entries() : returns an array iterator object, which can be used to loop through keys and values of arrays.

syntax:
        const arr = ['a', 'b', 'c'];
        for (let [index, value] of arr.entries()) {
            console.log(index, value); // 0 'a', 1 'b', 2 'c'
        }
    

includes() : checks whether an array includes a certain element, returning true or false.

syntax:
        const arr = [1, 2, 3];
        console.log(arr.includes(2)); // true
    

keys() : returns an array iterator object along with the keys of the array.

syntax:
        const arr = ['a', 'b', 'c'];
        for (let key of arr.keys()) {
            console.log(key); // 0, 1, 2
        }
    

values() : provides the value of each key.

syntax:
        const arr = ['a', 'b', 'c'];
        for (let value of arr.values()) {
            console.log(value); // 'a', 'b', 'c'
        }
    

fill() : fills the specified array elements with a static value.

syntax: [1, 2, 3].fill(0); // [0, 0, 0] 

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

syntax:
        const str = 'Hello, world!';
        console.log(str.startsWith('Hello')); // true
        console.log(str.startsWith('world')); // false
    

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

syntax:
            const str = 'Hello, world!';
            console.log(str.endsWith('Hello')); // false
            console.log(str.endsWith('world')); // true
    

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

syntax:
        console.log(Number.isInteger(0));         // true
        console.log(Number.isInteger(123));       // true
        console.log(Number.isInteger(-456));      // true
        console.log(Number.isInteger(3.14));      // false
        console.log(Number.isInteger(0.0));       // true (still an integer)
        console.log(Number.isInteger('123'));     // false (string)
        console.log(Number.isInteger(NaN));       // false
        console.log(Number.isInteger(Infinity));  // false
        console.log(Number.isInteger(null));      // false
        console.log(Number.isInteger([123]));     // false (array)
    

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

syntax:
        console.log(Number.isSafeInteger(9007199254740991)); // true
        console.log(Number.isSafeInteger(9007199254740992)); // false
        console.log(Number.isSafeInteger(-9007199254740991)); // true
        console.log(Number.isSafeInteger(-9007199254740992)); // false

        console.log(Number.isSafeInteger(10));      // true
        console.log(Number.isSafeInteger(10.5));    // false (not integer)
        console.log(Number.isSafeInteger('10'));    // false (not a number)
        console.log(Number.isSafeInteger(NaN));     // false
        console.log(Number.isSafeInteger(Infinity));// false
        
    

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

syntax:
        console.log(isFinite(123));           // true
        console.log(isFinite(-123));          // true
        console.log(isFinite(0));             // true
        console.log(isFinite(99999999999999999999999)); // true

        console.log(isFinite(Infinity));      // false
        console.log(isFinite(-Infinity));     // false
        console.log(isFinite(NaN));           // false
        console.log(isFinite('123'));         // false (string is not a number)
        console.log(isFinite(null));          // true (null is coerced to 0)
        console.log(isFinite(undefined));     // false
    

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

syntax:
        console.log(isNaN(NaN));        // true
        console.log(isNaN('hello'));    // true – coerced to NaN
        console.log(isNaN(undefined));  // true – coerced to NaN
        console.log(isNaN(123));        // false
        console.log(isNaN('123'));      // false – coerced to number 123
        console.log(isNaN(true));       // false – coerced to 1
        console.log(isNaN(false));      // false – coerced to 0
        console.log(isNaN({}));         // true – coerced to NaN
    

spread (...) operator : expands an iterable (like an array) into more element.

syntax:
        const arr = [1, 2, 3];
        console.log(...arr); // 1 2 3
    

examples

code:
                <div>
                    <p id="ES6_1"></p>
                    <p id="ES6_2"></p>
                    <p id="ES6_3"></p>
                    <p id="ES6_4"></p>
                    <p id="ES6_5"></p>
                    <p id="ES6_6"></p>
                    <p id="ES6_7"></p>
                    <p id="ES6_8"></p>
                    <p id="ES6_9"></p>
                    <p id="ES6_10"></p>
                    <p id="ES6_11"></p>
                    <p id="ES6_12"></p>
        
                </div>
                <script>
                    var arr=[2.1,3.5,4.7]; 
                    var result = arr.map((numA) => 2*numA );  
                    console.log(result);
                    document.getElementById("ES6_1").innerHTML = "map(): " + result;
        
                    const ages = [32, 33, 16, 40];
                    function checkAge(age) {
                         return age > 18;
                    }
                    document.getElementById("ES6_2").innerHTML = "every(): " + (ages.every(checkAge));
                    console.log(ages.every(checkAge))
        
                    const ages_A = [32, 33, 16, 40];
                    console.log(ages_A.includes(33))
                    document.getElementById("ES6_3").innerHTML = "includes(): " + ages_A.includes(33);
        
                    const ages_B = [33, 32, 16];
                    for (const element of ages_B) {
                        console.log("for ... of iterator:" + (element + "b"));
                        document.getElementById("ES6_4").innerHTML += "for . . . of operator: " + (element + "b") +"<br>" ;
                    }
        
                    const ages_C = [33, 32, 16];
                    console.log("spread operator: " + ages_C);
                    document.getElementById("ES6_5").innerHTML = "spread operator: " + ages_C;
                  
                    const ages_D = [33, 32, 16];
                    console.log("filter(): " + ages_D.filter((age) => age>20));
                    document.getElementById("ES6_6").innerHTML = "filter(): " + ages_D.filter((age)=> age>20);
        
                    const ages_E = [33, 32, 16];
                    const reducer = (first, second) => first + second;
                    console.log("reduce(): " + ages_D.reduce(reducer));
                    document.getElementById("ES6_7").innerHTML = "reduce(): " + ages_D.reduce(reducer);
        
                    const myArr = Array.from("ABCDEFG");
                    document.getElementById("ES6_8").innerHTML = "Array.from() : " + myArr;
                    
                    const numbers = [4, 9, 16, 25, 29];
                    let first = numbers.find(findFunction);
                    document.getElementById("ES6_9").innerHTML = "first number over 18 is " + first;
                    document.getElementById("ES6_10").innerHTML = "first number over 18 has index " + 
                    numbers.findIndex(findFunction);numbers.findIndex(findFunction);
                    function findFunction(value, index, array) {
                        return value > 18;
                    }
                    document.getElementById("ES6_11").innerHTML =  " is 10 an integer, is 10.5 an integer? : " 
                    + Number.isInteger(10) + " , " + Number.isInteger(10.5);
                    document.getElementById("ES6_12").innerHTML =  " is 10 a safe integer, is 12345678901234567890
                     a safe integer? : " + Number.isSafeInteger(10) + " , " + Number.isSafeInteger(12345678901234567890);
                    
                </script>