The hidden and new parts of JS

!// The hidden and new parts of JS
@ritz078

function varTest() {
var x = 1;
if (true) {
var x = 2; !// same variable!
console.log(x); !// 2
}
}
function letTest() {
let x = 1;
if (true) {
let x = 2; !// different variable
}
}
Scope
letvar

!// SyntaxError: Missing initializer in const declaration
const a;
const
const b = [1, 2, 3];
!// Modification without changing reference allowed.
b.push(4); !// b = [1, 2, 3, 4]
!// throws an error. reassigning not allowed.
b = [2, 3];

console.log(a); !// undefined
var a = 5;
console.log(b); !// ReferenceError: b is not defined
const b = 5;
console.log(c); !// ReferenceError: c is not defined
let c = 5;
Hoisting
https://stackoverflow.com/a/31222689/3366126

{
"plugins": [
["transform-es2015-block-scoping", {"tdz": true}]
]
}

for (var i = 0; i < 10; i!++) {
setTimeout(function() {
console.log(i)
}, 5)
}
var i;
for (i = 0; i < 10; i!++) {
console.log(i)
}, 5)
}
!// 10 is printed 10 times.
😢

for (let i = 0; i < 10; i!++) {
console.log(i)
}, 5)
}
!// Prints number from 1 to 10
🤔 Why ?

!// A closure is created.
!// Now i is a value and not
!// a reference.
var _loop = function _loop(i) {
setTimeout(function () {
console.log(i);
}, 5);
};
for (var i = 0; i < 10; i!++) {
_loop(i);
}
for (let i = 0; i < 10; i!++) {
console.log(i)
}, 5)
}
!// Prints number from 1 to 10
😌

{
"plugins": [
["transform-es2015-block-scoping", {
"throwIfClosureRequired": true
}]
]
}

Array.isArray(Array.prototype); !// true

.sort( )
const arr = [10, 3, 100]
const sortedArray = arr.sort();
!// it doesn't correctly sort an array of numbers. 🤔
console.log(sortedArray) !// [10, 100, 3]
!// also sorting changes the original array
console.log(arr) !// [10, 100, 3]
The default sort order is according to string Unicode code points.

const arr = [10, 3, 100]
!// passing a comparator function
const sortedArray = arr.sort((a, b) !=> a - b);
console.log(sortedArray) !// [3, 10 100]

~N !!=== -(N + 1)
Tilde (~)
!// equivalent to someStr.indexOf("a") !>= 0
if (~someStr.indexOf("a")) {
!// Found it
} else {
!// Not Found
}

.includes ()
const arr = [1, 2, 3, NaN];
arr.includes(3) !// true
!// uses same value zero comparison
!// just like map and set.
arr.includes(NaN) !// true
!// uses Strict Equality Comparison "!!==="
arr.indexOf(NaN) !// -1

!// !|> Indexed access to elements
!// !|> Has length property
!// !|> Does not have array methods such as push,
!// forEach and indexOf
const arrayLikeObject = {
0: "hello",
1: "world",
length: 2
}
console.log(arrayLikeObject[1]) !// hello
!// throws error
console.log(arrayLikeObject.indexOf("hello"))

!// Arguments are array like objects
function a () {
console.log(Array.isArray(arguments)) !// false
console.log(arguments[0]) !// 1
console.log(arguments.length) !// 3
}
a(1, 2, 3)

!// elements is a HTMLCollection
!// They are array like objects
const elements = document.getElementsByTagName("div")
console.log(Array.isArray(elements)) !// false

Converting array like objects to an array
!// Can convert array like objects and string into
!// an array.
Array.from(arguments);
!// Borrowing a method from Array
Array.prototype.slice.call(arguments);
!// Node treats arguments and array like objects differently.
!// Anyways, you shouldn't be spreading arguments, it's going
!// to cause an engine to deoptimize the entire function.
!// https:!//github.com/petkaantonov/bluebird/wiki/Optimization-
killers#3-managing-arguments
[!!...arguments]

length
!// array-like-object
const a = {
0: 1,
1: 2,
2: 3,
length: 3
}
console.log(Object.keys(a))
!// ["0", "1", "2", "length"]

function a () {
arguments.length !// 3
Object.keys(arguments)
!// ["0", "1", “2"]
}
a(1,2,3)
no length

.defineProperty()
const a = {
0: 1,
1: 2,
2: 3
}
Object.defineProperty(a, "length", {
enumerable: false,
writable: true, !// can value be modified ?
configurable: true, !// can property be deleted ?
value: 3
})
console.log(a.length) !// 3
console.log(Object.keys(a)) !// ["0", "1", "2"]

function sum (a, b, c) {
!// the number of arguments actually passed.
console.log(arguments.length) !// 2
return a + b + c;
}
sum(1, 2)
!// the number of arguments that the function accepts.
console.log(sum.length) !// 3
.length ()

function sum (a, b, c=3) {
return a + b + c;
}
sum(1, 2)
!// the number of arguments that the function accepts.
console.log(sum.length) !// ?
Gotcha

!// There is no c here. Now sum.length makes better sense. 😀
function sum(a, b) {
var c = arguments.length > 2 !&& arguments[2] !!!== undefined ?
arguments[2] : 3;
return a + b + c;
}
sum(1, 2)
console.log(sum.length) !// 2

Dependency Injection
var app = angular.module('myApp', []);
!// works as expected
app.controller('myCtrl', function($scope, $timeout) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
!// works as expected
app.controller('myCtrl', function($timeout, $scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
In this case, position of argument doesn’t matter but name does.
🤔

function a($scope, $timeout) {
!// your code here
}
const code = a.toString()
!// "function a($scope, $timeout) {
!// !// your logic here
!// }"
const match = code
.match(/^functions{0,}[a-zA-Zd_]{0,}(([^)]+))/)[1];
console.log(match.split(", ")) !// ["$scope", "$timeout"]
.toString()
If the argument name changes after minification, this fails.

async function () {
let response = await fetch("https:!//random-api/v1");
let user = await response.json();
return user;
}
!// syntax error in top-level code
let response = await fetch("https:!//random-api/v1");
let user = await response.json();

class Thenable {
constructor (num) {
this.num = num;
}
then (resolve, reject) {
setTimeout(() !=> resolve(this.num * 2), 1000);
}
}
async function () {
let result = await new Thenable(2)
alert(result)
}
a()

const data = [
fetch("/a"),
fetch("/b"),
fetch("/c")
]
for await (const x of data) {
console.log(x)
}
ES2018: async-for-of
Async for-of statements are only allowed within async functions and
async generator functions.

> const map = new Map();
> map.set('foo', 123);
> map.get('foo') !// 123
> map.has('foo') !// true
> map.delete('foo') !// true
> map.has('foo') !// false
> map.size !// 1
> map.clear()
length is for data structures that are indexable – like arrays.
size is for collections that are unordered like maps and sets.

!// Any value can be a key.
const KEY1 = {};
map.set(KEY1, 'hello');
console.log(map.get(KEY1)); !// hello
const KEY2 = {};
map.set(KEY2, 'world');
console.log(map.get(KEY2)); !// world
Object vs Map

Object vs Map
const map = new Map ();
!// typeof keys is preserved
map.set(1, "hello")
console.log([!!...map.keys()]) !// [1]
const obj = {}
!// typeof keys is string
obj[1] = "world"
console.log(Object.keys(obj)) !// ["1"]

Object vs Map
!// Map
const map = new Map ();
!// Doesn't override prototype methods
map.set("get", "world")
console.log(map.get) !// function get() { [native code] }
!// Object
const obj = {}
!// overrides prototype methods
obj['toString'] = "override"
console.log(obj.toString) !// "override"

Array vs Set
const arr = [1, 2, "3", 3, 3];
const set = new Set(arr);
!// O(1) lookup
set.has(3)
!// only unique values are present.
!// They are unique by both type
!// and value.
set.size !// 4
Array.from(set.values())
!// [1, 2, "3", 3]
const arr = [1, 2, "3", 3, 3];
!// O(n) lookup
arr.indexOf(3)
!// all elements preserved
arr.length !// 5

Rest operator in object destructuring
const obj = {foo: 1, bar: 2, baz: 3};
const {foo, !!...rest} = obj;
!// Same as:
!// const foo = 1;
!// const rest = {bar: 2, baz: 3};

RegExp capture groups
const RE_DATE = /(?<year>[0-9]{4})-(?<month>[0-9]
{2})-(?<day>[0-9]{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; !// 1999
const month = matchObj.groups.month; !// 12
const day = matchObj.groups.day; !// 31

promise
.then(result !=> {···})
.catch(error !=> {···})
.finally(() !=> {···});
Promise.prototype.finally()

The hidden and new parts of JS

More Related Content

What's hot (20)

Similar to The hidden and new parts of JS (20)

Recently uploaded (20)

The hidden and new parts of JS