Author

https:­//s­emk­ode­v.com Roman Semko - JS experts @ SemkoDev web develo­pment on steroids! Constants const PI = 3.141593

PI > 3.0 Scoping // Block-Scoped Variables

for (let i = 0; i < a.length; i++) {

let x = a[i]

…

}

for (let i = 0; i < b.length; i++) {

let y = b[i]

…

}



let callbacks = []

for (let i = 0; i <= 2; i++) {

callbacks[i] = function () { return i * 2 }

}

callbacks[0]() === 0

callbacks[1]() === 2

callbacks[2]() === 4



// Block-Scoped Functions

{

function foo () { return 1 }

foo() === 1

{

function foo () { return 2 }

foo() === 2

}

foo() === 1

} Arrow functions odds = evens.map(v => v + 1)

pairs = evens.map(v => ({ even: v, odd: v + 1 }))

nums = evens.map((v, i) => v + i)



// Statement bodies

nums.forEach(v => {

if (v % 5 === 0)

fives.push(v)

})



// Lexical this - More intuitive handling of current object context.

this.nums.forEach((v) => {

if (v % 5 === 0) this.fives.push(v)

}) Extended parameter handling // Default parameters

function f (x, y = 7, z = 42) {

return x + y + z

}

f(1) === 50



// Rest parameters

function f (x, y, ...a) {

return (x + y) * a.length

}

f(1, 2, "hello", true, 7) === 9



// Spread operator

var params = [ "hello", true, 7 ]

var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]

f(1, 2, ...params) === 9



var str = "foo"

var chars = [ ...str ] // [ "f", "o", "o" ] Template Litarals var customer = { name: "Foo" }

var card = { amount: 7, product: "Bar", unitprice: 42 }

message = `Hello ${customer.name},

want to buy ${card.amount} ${card.product} for

a total of ${card.amount * card.unitprice} bucks?`

Extended Literals 0b111110111 === 503

0o767 === 503 Enhanced Object Properties // Shorthand

obj = { x, y } // => obj = { x: x, y: y };



// Computed properties

let obj = {

foo: "bar",

[ "baz" + quux() ]: 42

}



// Method properties

obj = {

foo (a, b) {…},

bar (x, y) { …}

} Destru­cturing Assignment // Array matching

var list = [ 1, 2, 3 ]

var [ a, , b ] = list

[ b, a ] = [ a, b ]



// Object matching, including deep matching

var { op: a, lhs: { op: b }, rhs: c } = getASTNode()



// Parameter context matching

function f ([ name, val ]) {

console.log(name, val)

}

function g ({ name: n, val: v }) {

console.log(n, v)

}

function h ({ name, val }) {

console.log(name, val)

}

f([ "bar", 42 ])

g({ name: "foo", val: 7 })

h({ name: "bar", val: 42 }) Classes class Rectangle extends Shape {

constructor (id, x, y, width, height) {

// Super call

super(id, x, y)

this.width = width

this.height = height

}

// Getter and setter

set width (width) { this._width = width }

get width () { return this._width }

}



class Circle extends Shape {

constructor (id, x, y, radius) {

super(id, x, y)

this.radius = radius

}

do_something(x) {

let a = 12;

// call parent method

super.do_something(x + a);

}

static do_whatever() {

// static access

}

}



Circle.do_whatever() Maps & Sets // Set

let s = new Set()

s.add("hello").add("goodbye").add("hello")

s.size === 2

s.has("hello") === true

for (let key of s.values()) // insertion order

console.log(key)



// Map

let m = new Map()

m.set("hello", 42)

m.set(s, 34)

m.get(s) === 34

m.size === 2

for (let [ key, val ] of m.entries())

console.log(key + " = " + val)