umma.dev

ES2019 is the latest version of Javascript. ES6 is commonly used amongst developers and also gets called JavaScript 6… sometimes.

Let and Const

With let you can change the value of the variable however with const (short for constant) you are unable to change the value.

Example of let

for(let i=0; i<=10; i++) {
    return i++;
}

Example of const

render() {
    const { example } = "hello"
     return (
        <div>{example}</div>
    )
}

Arrow Functions

Previously…

function example(a, b) {
    return a+b;
}

With ES6

const example = (a,b) => { return a+b; }

Classes

class Cat {
    constructor(type) {
        this.colour = 'ginger';
    }
}

class Animal {}

class Cat extends Animal {
    sound = 'Meow!';

    /*
    this is a private class field
    #sound = 'Meow!';
    console.log(this.#sound);
    */

    makeSound() {
        console.log(this.sound)
    }
}

const minnie = new Cat();
minnie.makeSound();

An example of private properties

class Cat {
    #name;
    constructor(name) {
        this.#name = name;
    }
    showName() {
        console.log(this.#name);
    }
}
const minnie = new Cat('Minnie');
minnie.showName();

Function Parameters

function example(str) {
    return str;
}
example("Hello");

Array.find() and Array.findIndex

Array.find()

const num = [1,2,3,4]
const check = num.find(theValue);

function theValue(value, index, arr) {
    return value < 2;
}

Array.findIndex()

const num = [1,2,3,4]
const check = num.findIndex(theValue);

function theValue(value, index, arr) {
    return value < 2;
}

Exponential Operator

let a = 6;
let b = a ** 2; //b=36

let a = 6;
let b = Math.pow(a, 2); //b=36

Regular Expressions

Regular Expressions (or RegEx) is a feature which enables you to search patterns within a string.

Positive Lookahead

This is used to select a pattern when another known patter is ahead of.

const str = "crosswords, afterwords, catchwords";
const word = str.match(/[a-zA-Z]+(?=words)/g);
console.log(word); //["cross", "after", "catch"]

Negative Lookahead

A negative lookahead does the opposite to a positive lookahead. Instead it looks for the words that do not include the common string.

const str = "crosswords, afterwards, catchwords";
const words = testString.match(/(cross|after|catch)(?!words)/g);
console.log(words); //["after"]

Positive Lookbehind

Used to select a pattern in a string when another known pattern is just behind it.

const str = "frozenberries, frozenyoghurt, frozenfish";
const frozen = str.match(/(?<=frozen)[a-zA-Z]+/g);
console.log(frozen); //["berries", "yoghurt", "fish"]

Negative Lookbehind

Select a pattern in a string when another known pattern is not behind it.

const str = "redberries, frozenyogurt, frozenfish";
const frozen = str.match(/(?<!frozen)(berries|yogurt|fish)/g);
console.log(frozen); //["berries"]

Array.flat() and Array.flatMap()

Array.flat()

const nums = [1, [2, [3, [4, 5]]]];
nums.flat(); //[1,2, [3, [4, 5]]]
nums.flat(1); //[1, 2, 3, [4,5]]
nums.flat(Infinity); //[1, 2, 3, 4, 5]

Array.flatMap

const nums = [1, 2, 3, 4, 5];
const sqr = nums.map(n=>[n, n*n])
//sqr = [[1,1], [2,4], [3,9]]
sqr.flat(); //[1, 1, 2, 4, 3, 9]

Object Entries

Object.entries

const test = {a:1, b:2, c:3};
const testEntries = Object.entries(test); //[["a", 1], ["b", 2], ["c", 3]]

Object.fromEntries

const test = [["a", 1], ["b", 2], ["c", 3]];
const testFrom = Object.fromEntries(test) //{a:1, b:2, c:3}

This

this depends on the context of where it is accessed

Promises

Promise.allSettled

Takes an array of promises and resolves once all of the promises have been resolved/rejected

const prom1 = () => new Promise(
    (resolve, reject) => setTimeout(() => resolve('one'), 2000);
)
const prom2 = () => new Promise(
    (resolve, reject) => setTimeout(() => reject('err'), 2000);
)

var prom = Promise.allSettled([prom1(), prom2()]. then(
    (values) => console.log(values)
))

/* output
[
    {status: "fulfilled", value: "one"}
    {status: "rejected", value: "err"}
]
*/

Promise.any

The promise returned by this method does not execute the catch block as soon as ana promise is reject. Instead, it waits until for any of the promises resolves.