Forem: Shahzaib Khalid

Object.fromEntries (ES2019) - An elegant inverse of Object.entries (ES2017)

Shahzaib Khalid — Wed, 28 Aug 2019 13:32:04 +0000

Hey! 👋

Check out today's Dev Tip! 👇

Follow me on Twitter @shahzaibkhalid for more Dev Tips! ✨

Object.entries 🚀

For each key-value pair in an object, Object.entries gives you an array where the first element is the key, and the second element is the value.

Object.entries is especially useful in combination with for-of, as it enables you to very elegantly iterate over all key-value pairs in an object:

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

for (const [key, value] of entries) {
  console.log(`The value of ${key} is ${value}.`);
}
// Logs:
// The value of x is 42.
// The value of y is 50.

Unfortunately, there’s no easy way to go from the entries result back to an equivalent object… until now! 🎉

Object.fromEntries 🦄

const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]

const result = Object.fromEntries(entries);
// → { x: 42, y: 50 }

Practical Usage 👀

One common use case is transforming objects. You can now do this by iterating over its entries, and then using array methods you might already be familiar with:

const object = { x: 42, y: 50, abc: 9001 };
const result = Object.fromEntries(
  Object.entries(object)
    .filter(([ key, value ]) => key.length === 1)
    .map(([ key, value ]) => [ key, value * 2 ])
);
// → { x: 84, y: 100 }

Hope you learned something new today. Do let me know what do you think about this Dev Tip in the comments below. 👀

Peace. ✌️

globalThis - Access environment-agnostic global `this` value

Shahzaib Khalid — Tue, 27 Aug 2019 03:02:47 +0000

Hey! 👋

Check out today's Dev Tip! 👇

Follow me on Twitter @shahzaibkhalid for more Dev Tips! ✨

globalThis provides a standard way of accessing the global this value i.e. the global object in an environment-agnostic way. 🚀

🛑 This is a stage-3 proposal on the ECMAScript list of proposals and although the functionality is shipped in most of the new browsers, consider polyfilling it to support older browsers.

Accessing the global object requires different syntax in different JavaScript environments:

👉 window or frames - On the web
👉 self - In Web Workers
👉 global - In Node.js

Let's suppose we want to share some functionality on both, Web and Node.js, e.g. checking if Set natively exists in our environment
or not? We've to check the environment first! ❌

const doesSetExists = () => {
  if (typeof window !== 'undefined') {
    return typeof window.Set === 'function';
  } else if (typeof global !== 'undefined') {
    return typeof global.Set === 'function';
  } else {
    throw new Error('Unable to locate global object');
  }
}

Using globalThis - it drills-down to a single line and environment-agnostic ✅ 🔥

const doesSetExists = () => typeof globalThis.Set === 'function';

Hope you learned something new today. Do let me know what do you think about this Dev Tip in the comments below. 👀

Peace. ✌️

Promise.all (ES2015) vs Promise.allSettled (ES2020). What's changed? 🤔

Shahzaib Khalid — Sun, 25 Aug 2019 06:46:27 +0000

Hey! 👋

Check out today's ⚡️ Dev Tip 💡 👇

Follow me on Twitter @shahzaibkhalid for more Dev Tips! ✨

Let’s say we want to run many promises to execute in
parallel and wait till all of them are ready. 🧐

// some dummy promises to play with 🍭
const p1 = new Promise(resolve => resolve('Shahzaib'));
const p2 = new Promise((_ ,reject) => reject('User does not exists!'));
const p3 = new Promise(resolve => resolve('Lahore'));

Promise.all (short-circuits if any of the promises is rejected)

If any of the passed promises is rejected, the promise
returned by Promise.all immediately rejects with that error. ❌

Promise.all([p1, p2, p3])
  .then(response => console.log(response))
  .catch(error => console.log(error)); // 👉'User does not exists!'

Promise.allSettled (does not short-circuits)

Waits for all passed promises to settle (either resolved or rejected). 🥳

The resulting array has:

{status: 'fulfilled', value: result} - for successful responses
{status: 'rejected', reason: error} - for errors

Promise.allSettled([p1, p2, p3])
  .then(response => console.log(response));

/**
 * 👉 [ {status: 'fulfilled', value: 'Shahzaib'},
 *      {status: 'rejected', reason: 'User does not exists!'},
 *      {status: 'fulfilled, value: 'Lahore'} ] 🚀
 */

Hope you learned something new today. Do let me know what do you think about this Dev Tip in the comments below. 👀

Peace. ✌️