JavaScript features that I didn't know existed

The other day I was reading materials on MDN and came across some pretty interesting features and JavaScript API, the existence of which I did not know. I want to talk about them today.

I do not presume to judge whether they will be useful to someone, but I suppose that since all this is in the language, then it is useful to know about it, at least.

Tags

for JS… ? — . break continue for, break .

loop1: //   "loop1" 
for (let i = 0; i < 3; i++) { // "loop1"
   loop2: //   "loop2"
   for (let j = 0; j < 3; j++) { // "loop2"
      if (i === 1) {
         continue loop1; //  "loop1"
         // break loop1; //  "loop1"
      }
      console.log(`i = ${i}, j = ${j}`);
   }
}

/* 
 * # 
 * i = 0, j = 0
 * i = 0, j = 1
 * i = 0, j = 2
 * i = 2, j = 0
 * i = 2, j = 1
 * i = 2, j = 2
 */

. break.

foo: {
  console.log('one');
  break foo;
  console.log('this log will not be executed');
}
console.log('two');

/*
 * # 
 * one
 * two
 */

void

, JavaScript void, , , JS 1996- . , . MDN:

void undefined.

, , IIFE:

void function iife() {
	
console.log('hello');
}();

//  –   ,  ...

(function iife() {
    console.log('hello');
})()

void , , … void (undefined)!

const word = void function iife() {
	
return 'hello';
}();

// word   "undefined"

const word = (function iife() {
	
return 'hello';
})();

// word   "hello"

void async, :

void async function() { 
    try {
        const response = await fetch('air.ghost.io'); 
        const text = await response.text();
        console.log(text);
    } catch(e) {
        console.error(e);
    }
}()

//     :)

(async () => {
    try {
        const response = await fetch('air.ghost.io'); 
        const text = await response.text();
        console.log(text);
    } catch(e) {
        console.error(e);
    }
})();

«»

, «», , , . MDN:

( ) .

function myFunc() {
  let x = 0;
  return (x += 1, x); //   ,   return ++x;
}

y = false, true; //  true  
console.log(y); // false (  )

z = (false, true); //  true  
console.log(z); // true (  )

«»

«» . . console.log :

const type = 'man';

const isMale = type === 'man' ? (
    console.log('Hi Man!'),
    true
) : (
    console.log('Hi Lady!'),
    false
);

console.log(`isMale is "${isMale}"`);

API

— , , , , , JS API , . API — :

const date = new Date();

const options = {
  year: 'numeric', 
  month: 'long', 
  day: 'numeric'
};

const formatter1 = new Intl.DateTimeFormat('es-es', options);
console.log(formatter1.format(date)); // 22 de diciembre de 2017

const formatter2 = new Intl.DateTimeFormat('en-us', options);
console.log(formatter2.format(date)); // December 22, 2017

, , Firefox 58+, , , . , Babel . Bash-, !

const square = (n) => n * n;
const increment = (n) => n + 1;

//    
square(increment(square(2))); // 25

//    
2 |> square |> increment |> square; // 25

,

▍

, .

. , , , , -.

Java. , JS, - , .

▍ Array.prototype.reduceRight

, - Array.prototype.reduceRight(), Array.prototype.reduce() Array.prototype.reverse(). , . , , reduceRight() .

const flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []);

//   [4, 5, 2, 3, 0, 1]

▍ setTimeout()

, , .bind(…), setTimeout(), , , JS .

setTimeout(alert, 1000, 'Hello world!');

/*
 * #  (alert)
 * Hello World!
 */

function log(text, textTwo) {
    console.log(text, textTwo);
}

setTimeout(log, 1000, 'Hello World!', 'And Mars!');

/*
 * # 
 * Hello World! And Mars!
 */

▍ HTMLElement.dataset

data-* HTML-, , API, . ( ), , , JS. data-birth-planet JS birthPlanet.

<div id='person' data-name='john' data-birth-planet='earth'></div>

JS:

let personEl = document.querySelector('#person');

console.log(person.dataset) // DOMStringMap {name: "john", birthPlanet: "earth"}
console.log(personEl.dataset.name) // john
console.log(personEl.dataset.birthPlanet) // earth

//      
personEl.dataset.foo = 'bar';
console.log(personEl.dataset.foo); // bar

, JavaScript - .

! - JS, ? — .