Tari Ibaba

ES13 was packed with valuable features that completely transformed the way we write JavaScript.

Code became cleaner, shorter, and easier to write.

Let’s check them out and see the ones you missed.

1. Top-level await

With ES13 we were finally able to use await in the global scope!

❌ Before ES13:

JavaScriptCopied!

// ❌ Syntax error: await is only valid in async functions
await setTimeoutAsync(3000);

function setTimeoutAsync(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('codingbeautydev.com');
    }, timeout);
  });
}

We always had to put it in an async function or create an async IIFE:

JavaScriptCopied!

// async IIFE
(async () => {
  await setTimeoutAsync(3000);
})();

// à la C++
async function main() {
  await setTimeoutAsync(3000);
}

✅ After ES13:

JavaScriptCopied!

// ✅ Waits for timeout - no error thrown
await setTimeoutAsync(3000);

function setTimeoutAsync(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('codingbeautydev.com');
    }, timeout);
  });
}

2. Class declaration upgrades

Class field declarations

Before ES13 we could only declare class fields in the constructor!

Unlike in many other languages we could not declare or define them in the outermost scope of the class.

❌ Before:

JavaScriptCopied!

class Site {
  constructor() {
    // ❌ wouldn't work outside
    this.url = 'codingbeautydev.com';
    this.color = '🔵blue';
  }
}

const site = new Site();

console.log(site.url); // codingbeautydev.com
console.log(color); // blue

✅ Now with ES13:

Just like in TypeScript:

JavaScriptCopied!

class Site {
  // ✅ no constructor needed
  url = 'codingbeautydev.com';
  color = '🔵blue';
}

const site = new Site();

console.log(site.url); // codingbeautydev.com
console.log(color); // 🔵blue

Private methods and fields

Creating private methods was impossible before ES13.

We also had to the ugly underscore hack to indicate privacy — but that was just an indication.

❌ Before:

JavaScriptCopied!

class Person {
  _firstName = 'Tari';
  _lastName = 'Ibaba';

  get name() {
    return `${this._firstName} ${this._lastName}`;
  }
}

const person = new Person();
console.log(person.name); // Tari Ibaba

// We can still access private members!
console.log(person._firstName); // Tari
console.log(person._lastName); // Ibaba

// They can also be modified
person._firstName = 'Lionel';
person._lastName = 'Messi';

console.log(person.name); // Lionel Messi

✅ Now after ES13:

We can add private fields and members to a class by prefixing it with a hashtag (#):

You’ll get a syntax error if you try to access it from outside the class:

JavaScriptCopied!

class Person {
  #firstName = 'Tari';
  #lastName = 'Ibaba';

  get name() {
    return `${this.#firstName} ${this.#lastName}`;
  }
}

const person = new Person();
console.log(person.name);

// SyntaxError: Private field '#firstName' must be
// declared in an enclosing class
console.log(person.#firstName);
console.log(person.#lastName);

We can see something interesting from the error message:

The compiler doesn’t expect you to even try to access private fields from outside the class — it assumes you’re trying to creating one.

Static class fields and static private methods

Static fields — properties of the class itself rather than any specific instance.

Ever since ES13 we can now easily create them for any class:

JavaScriptCopied!

class Person {
  static #count = 0;
  static eyeCount = 2;

  static getCount() {
    // Access fellow static member with this
    return this.#count;
  }

  // instance member
  constructor() {
    // Access static member with this.constructor
    this.constructor.#incrementCount();
  }

  static #incrementCount() {
    this.#count++;
  }
}

const person1 = new Person();
const person2 = new Person();

console.log(Person.getCount()); // 2

3. Array upgrades: new at() method

So usually we’d use square brackets ([]) to access the Nth of the array.

JavaScriptCopied!

const arr = ['a', 'b', 'c', 'd'];

console.log(arr[1]); // b

But accessing the Nth item from the end was always a pain — we had to index with arr.length - N:

❌ Before ES13:

JavaScriptCopied!

const arr = ['a', 'b', 'c', 'd'];

// 1st element from the end
console.log(arr[arr.length - 1]); // d

// 2nd element from the end
console.log(arr[arr.length - 2]); // c

Luckily ES13 brought a new at() method that solved all that:

JavaScriptCopied!

const str = 'Coding Beauty';

console.log(str.at(-1)); // y

console.log(str.at(-2)); // t

4. Static class blocks

With static fields came static blocks.

To execute code only once, at the creation of the class — just like static constructors in OOP languages like C# and Java.

So you can create as many of them as you want in the class — all the code will run in the order you defined them:

JavaScriptCopied!

class Vehicle {
  static defaultColor = 'blue';
}

class Car extends Vehicle {
  static colors = [];

  static {
    this.colors.push(super.defaultColor, 'red');
  }

  static {
    this.colors.push('green');
  }
}

console.log(Car.colors); // [ 'blue', 'red', 'green' ]

5. Error reporting upgrades

So sometimes we catch errors of methods down the call stack only to rethrow it back up the stack.

But when we do this we lose crucial information from the original error:

JavaScriptCopied!

try {
  userAction();
} catch (err) {
  // ❌ doesn't know fundamental cause of error
  console.log(err);
}

function userAction() {
  try {
    apiCallThatCanThrow();
  } catch (err) {
    // 👇 rethrow
    throw new Error('New error message');
  }
}

function apiCallThatCanThrow() {
  console.log('fetching from codingbeautydev.com...');
  throw new Error('throwing for no reason');
}

That was why ES13 introduce a new cause property to preserve this important info and make debugging easier:

JavaScriptCopied!

try {
  userAction();
} catch (err) {
  // ✅ now knows what caused the error
  console.log(err);
  console.log(`Cause by: ${err.cause}`);
}

function userAction() {
  try {
    apiCallThatCanThrow();
  } catch (err) {
    // ✅ error cause
    throw new Error('New error message', { cause: err });
  }
}

function apiCallThatCanThrow() {
  console.log('fetching from codingbeautydev.com...');
  throw new Error('throwing for no reason');
}

Final thoughts

Overall ES13 was a significant leap for JavaScript with several features that have become essential for modern development.

Empowering you to write cleaner code with greater conciseness, expressiveness, and clarity.

An interesting occurrence showing the sheer weirdness of JavaScript:

Just when you thought you knew everything about parseInt:

The funny thing is it returns 0 for four and five zeroes after the decimal point.

But just add one more zero and it starts acting crazy?

The difference from Number is even more stark.

✅ parseInt vs Number — four and five zeroes:

But:

❌ parseInt vs Number — six zeroes:

But we figure it out eventually.

parseInt: The missing parts

By understanding how the parseInt function work:

It takes two arguments: the string and the base or radix.

JavaScriptCopied!

parseInt(string)

parseInt(string, radix)

Look what it does for 6 zeroes when it’s a string:

JavaScriptCopied!

parseInt('0.5') // 0
parseInt('0.05') // 0
parseInt('0.005') // 0
parseInt('0.0005') // 0
parseInt('0.00005') // 0
parseInt('0.000005') // 0
// 6
parseInt('0.0000005') // 0
parseInt('015') // 15
parseInt('015', 8) // 13

But for Number:

JavaScriptCopied!

Number('0.5') // 0.5
Number('0.05') // 0.05
Number('0.005') // 0.005
Number('0.0005') // 0.0005
Number('0.00005') // 0.00005
Number('0.000005') // 0.000005
// 6 !
Number('0.0000005') // 0.0000005
Number('015') // 15

But what happens when it’s a number?

A number like 0.0000005?

Step 1: Convert the number to a string

Number gets coerced to a string!

So look what parseInt does to 0.0000005:

JavaScriptCopied!

String(0.5);      // => '0.5'
String(0.05);     // => '0.05'
String(0.005);    // => '0.005'
String(0.0005);   // => '0.0005' 
String(0.00005);  // => '0.00005'
String(0.000005); // => '0.000005'

String(0.0000005); // => '5e-7' 👈 this is important

Step 2: Do the actual rounding

So:

parseInt(0.0000005) → parseInt('5e-7')

And now see what happens for '5e-7' for parseInt:

Why?

Because of how parseInt works: It interprets only the leading portion of the string as an integer value.

It doesn’t recognize e, so it ignores it and everything onwards.

This is same reason why:

1. parseInt(999999999999999999999) → parseInt(1e+21) → 1
2. parseInt(0.0000007) → parseInt(7) → 7

So Number is your best bet if you wanna avoid surprises when converting a string to a number

And if you need just the integer part, Math.floor() is here for you:

JavaScriptCopied!

Math.floor(0.5);      // 0
Math.floor(0.05);     // 0
Math.floor(0.005);    // 0
Math.floor(0.0005);   // 0
Math.floor(0.00005);  // 0
Math.floor(0.000005); // 0
Math.floor(0.0000005); // 0 ✅ perfect

HTML will never be the same with the new <dialog> tag.

❌Before:

See how much work it would have taken me to create a dialog 👇

Almost 20 lines of CSS alone:

And that’s just CSS for the dialog functionality — it will still look very basic:

But how about with the new <dialog> tag!

✅ Now:

HTMLCopied!

<button id="open">Open</button>
<dialog id="dialog">
  ⚡Lighting strikes the earth 44 times every second!
</dialog>

JavaScriptCopied!

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');
open.addEventListener('click', () => {
  dialog.showModal();
});

We can even use the show() method to show a non-modal dialog — less intrusive with no backdrop:

JavaScriptCopied!

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');
open.addEventListener('click', () => {
  dialog.show();
});

Dialogs have always been a powerful way to forcefully seize your user’s attention and slam information in their faces.

It’s been a staple feature of every UI design system from Material Design to Fluent Design.

But even as common as they are we always had to resort to third-party libraries or create custom components to use them.

And many of these libraries don’t even follow the official recommendations for usability & accessibility…

Example: pressing the Escape key should dismiss the dialog on the page — but this doesn’t happen for many custom dialogs.

So <dialog> changes all that.

Auto-open dialog

The open attribute keeps the dialog open from the moment you open the page:

HTMLCopied!

<dialog id="dialog" open>
  Giraffes are much more likely to be
  struck by lightning than humans are.
  In fact, they're 30 times more likely
</dialog>

Auto-close button

Yes, you could add close functionality with standard event listeners and the close() method:

JavaScriptCopied!

const close = document.querySelector(
  '#dialog .close'
);
close.addEventListener('click', () => {
  dialog.close();
});

But the built-in <dialog> makes this even easier — no JavaScript needed:

HTMLCopied!

<dialog id="dialog">
  ⚡Gain essential coding skills & knowledge at
  codingbeautydev.com
  <br />
  <form method="dialog">
    <button class="close">Close</button>
  </form>
</dialog>

How to style <dialog> the right way

<dialog> has a special ::backdrop pseudo-element for styling the backdrop:

CSSCopied!

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

Styling the main element is straightforward:

CSSCopied!

dialog {
   background-color: black;
   color: white;
 }

Final thoughts

With the new HTML <dialog> tag, creating modals and dialogs in our web apps has never been easier and faster.

The biggest reason we use languages like JavaScript and Python instead of Assembly is how much closer to natural language they are.

Or how much they CAN be!

Because sometimes we write code just for it to work without any care about demonstrating what we’re doing to other humans.

And then this backfires painfully down the line. Especially when one of those humans is your future self.

Parts of speech: back to basics

You know your code is natural when it resembles English as much as possible. Like an interesting, descriptive story.

It means you’ve intelligently made the entities and actions in the story to powerfully express the code flow from start to completion.

Nouns

What entities are we talking about?

• Variables
• Properties (getters & setters)
• Classes & objects.
• Modules

Every character has a name, so we describe them with expressive nouns and noun phrases.

Not this:

JavaScriptCopied!

// ❌ do-examples.ts

// ❌ Cryptic
const f = 'Coding';
const l = 'Beauty';

// ❌ Verb
const makeFullName = `${f} ${l}`;

class Book {
  // ❌ Adjectival phrase
  createdAt: Date;
}

But this:

JavaScriptCopied!

// ✅ examples.ts 

// ✅ Readable
const firstName = 'Coding';
const lastName = 'Beauty';

// ✅ Noun
const fullName = `${firstName} ${lastName}`;

class Book {
  // ✅ Noun phrase 
  dateCreated: Date;
}

Verbs

What are the actions in your codebase?

• Functions
• Object methods

An action means an entity is doing something; the naturally way to name them is with descriptive verbs and verb phrases.

Not this:

JavaScriptCopied!

class Product {
  constructor(name, price, quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }

  // ❌ Noun
  total() {
    return this.price * this.quantity;
  }
}

const product = new Product('Pineapple🍍', 5, 8);

console.log(product.total()); // 40

But this:

JavaScriptCopied!

class Product {
  constructor(name, price, quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }

  // ✅ Verb
  getTotal() {
    return this.price * this.quantity;
  }
}

const product = new Product('Banana🍌', 7, 7);

console.log(product.getTotal()); // 49

Methods are for doing something. Properties are for having something.

So better still:

JavaScriptCopied!

class Product {
  constructor(name, price, quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }

  get total() {
    return this.price * this.quantity;
  }
}

const product = new Product('Orange🍊', 7, 10);

console.log(product.total); // 70

Adverbs

Remember an adverb tells you more about a noun or verb or another adverb.

In JavaScript this is any function that takes function and returns another: a higher-order function. They upgrade the function.

So instead of this:

JavaScriptCopied!

// ❌ Verb
function silence(fn) {
  try {
    return fn();
  } catch (error) {
    return null;
  }
}

const getFileContents = (filePath) =>
  silence(() => fs.readFileSync(filePath, 'utf8'));

It’ll be more natural to do this:

JavaScriptCopied!

// ✅ Adverb
function silently({ fn }) { // or "withSilence"
  try {
    return fn();
  } catch (error) {
    return null;
  }
}

const getFileContents = (filePath) =>
  silently({ fn: () => fs.readFileSync(filePath, 'utf8') });

It’s like saying, “Get the file contents silently“.

Natural inputs

Coding and computing are all about processing some input to produce output.

And in natural code the processing is action and the input + output are entities.

Let’s say we have a function that calculates a rectangle’s area and multiplies it by some amount.

Can you see the problem here?

JavaScriptCopied!

const area = calculateArea(2, 5, 10); // 100

Which argument is the width and height? Which is the multiplier?

This code doesn’t read naturally; In English we always specify objects of an action.

How to fix this? Named arguments:

JavaScriptCopied!

// Inputs are entities - nouns✅
const area = calculateArea({ multiplier: 2, height: 5, width: 10 });

function calculateArea({ multiplier, height, width }) {
  return multiplier * height * width;
}

This is far easier to read; we instantly understand what inputs we’re dealing with.

Even when there’s just 1 argument I recommend using this.

Natural outputs

And we can be just as explicit in our outputs:

JavaScriptCopied!

const { area } = calculateArea({
  multiplier: 2,
  height: 5,
  width: 10,
});

function calculateArea({ multiplier, height, width }) {
  return { area: multiplier * height * width };
}

Which also allows us easily upgrade the function later:

JavaScriptCopied!

const { area, perimeter } = calculateArea({
  multiplier: 2,
  height: 5,
  width: 10,
});

console.log(area, perimeter); // 100 60

function calculateArea({ multiplier, height, width }) {
  return {
    area: multiplier * height * width,
    perimeter: (height + width) * 2 * multiplier,
  };
}

There’s no time for magic

Coding isn’t a mystery thriller! It’s a descriptive essay; be as descriptive as possible.

Not this cryptic mess:

JavaScriptCopied!

function c(a) {
  return a / 13490190;
}

const b = c(40075);

console.log(p); // 0.002970677210624906

What do all those numbers and variables mean in the bigger picture of the codebase? What do they tell us – the human?

Nothing. They tell us nothing. The entity & action names are either non-existent or of terrible quality.

It’s like telling your friend:

Yeah I went to this place and did this thing, then I did something to go to this other place and did something of 120!.

This is nonsense.

Natural code describes everything. Nice nouns for entities, great verbs for the actions.

JavaScriptCopied!

const speedstersSpeedKmPerHr = 13490190;
const earthCircumferenceKm = 40075;

function calculateSpeedstersTime(distance) {
  return distance / speedstersSpeedKmPerHr;
}

const time = calculateSpeedstersTime(earthCircumferenceKm);

console.log(time); // 0.002970677210624906 ~ 11s

Now you’ve said something.

Yeah I went to the restaurant and ate a chicken sandwich, then I drove to the gym and did bicep curls of 120 pounds!.

Create “useless” variables

Variables in natural code are no longer just for storing values here and there.

They’re also tools to explain what you’re doing:

That’s why instead of doing this:

JavaScriptCopied!

if (
  !user.isBanned &&
  user.pricing === 'premium' &&
  user.isSubscribedTo(channel)
) {
  console.log('Playing video...');
}

We’ll do this:

JavaScriptCopied!

const canUserWatchVideo =
  !user.isBanned &&
  user.pricing === 'premium' &&
  user.isSubscribedTo(channel);

if (canUserWatchVideo) {
  console.log('Playing video...');
}

We’re going to use the variable only once but it doesn’t matter. It’s not a functional variable but a cosmetic variable; a natural variable.

Final thoughts

Code is for your fellow humans too, not just compilers.

Can someone who doesn’t know how to code understand what’s going on in your code?

This is no doubt a powerful guiding question to keep your code as readable an natural as possible.

10 essential skills every web developer should have…

From web basics you may be familiar with already; then going on to crucial skills like working with browser dev tools and coding rapidly with AI.

Notice how the focus is on real-world action instead of just theoretical knowledge — because that’s what matters.

1. HTML essentials: Create a basic functional web page

All about the core skeleton of a website.

How to:

• Create an HTML page in an editor & open it in the browser

• Set page title & icon

• Create paragraphs of text

• Create headings

• Create links to other pages

• Display images

• Display tabular data

• Show lists of elements

• Handle input with forms

• Create comments & comment out code

• Make your page more meaningful with Semantic HTML

Some people think semantic HTML is useless because of CSS but they’re wrong.

It’s still crucial for accessibility and explaining your page to search engines to rank high on the results page.

JavaScriptCopied!

<!-- tells search engine that the "AI singularity" is a time -->

<time datetime="2025-01-07">AI singularity</time> is
coming sooner than you think!

Without this you end up like those devs who use <div> for everything.

2. CSS essentials: Style the web page

That’s how you can go from this:

To this:

Enriching the skeleton with life.

How to:

• Add styles to a page

• Add colors: Fills, gradients, opacity, foreground vs background colors

• Customize fonts: Font family, size, styles, weight, web-safe fonts, Google Fonts

• Create layouts: Margin & padding, visual stacking, relative alignments

• Add and customize backgrounds

• Add flair with animations and transitions

• Style particular states and parts of elements: Pseudo-selectors and pseudo-classes

• Customize shape: outline & borders, height, width,

• Reuse styles: CSS variables

• Make your page look great for all screen sizes: breakpoints, responsive images,

• Style faster with frameworks: Tailwind, Sass

3. JavaScript essentials

How to add interactivity to your web pages and make things happen:

Basics

If you’re new to coding:

How to:

• Think about programming

• Add JavaScript code to a page

• Print output: alert(), innerHTML, console logging

• Manage data — Create, use, update, and print variables: data types, scopes

• Create comments & comment out existing code

• Reuse actions: Create & call functions: syntax, parameters & arguments, return values, types, scopes

• Create objects to represent real-world entities: data & variables, actions & methods, nested objects

• Select and manipulate elements on a page: getElementById, querySelector, use methods & properties, etc.

• Handle input & events: on a web page, etc.

• Manipulate text with strings: multiline, substrings, case, concatenate, interpolate, split & join, trim & pad, search & replace, regex

• Use lists: initialize, add, update, remove, iterate, transform, search, filter, sort, reverse

• Use date and time: Create, update, format & display

• Get data or do action conditionally: if/else, switch, ternaries, dictionary selection

• Indefinitely do action conditionally: while, do while, for, break, continue

• Upgrade your dev experience with TypeScript: types, generics, interfaces, transpiling, configuring, etc.

Develop for the client-side

You may know coding basics in & out but can you write JS code specifically for the browser?

How to:

• Make network requests to a server: fetch() API, HTTP verbs, send & get data

• Handle UI states: empty, loading, error, partial, ideal

• Store data locally: cookies, Local Storage, Session Storage, etc.

• Organize and package code: modules & module bundlers

• Handle form input

• How to code faster with NPM packages

4. Improve quality of life with dev tools

How to:

• Create, inspect, & filter console logs: info, errors, warnings

• Add temporary scripts & actions

• Inspect, select & debug HTML elements

• Inspect & temporarily modify styles

• Monitor network requests

• Test your pages on multiple screen sizes

• Install editor extensions to develop faster

• Customize editor themes, fonts, and settings to enjoy development more

• Use an integrated debugger

• Code faster with snippets: including Emmet

• Develop faster with keyboard shortcuts

• Use AI to develop faster

5. Improve site performance

How to:

• Measure performance

• Improve perceived performance

• Improve Core Web Vitals: LCP, CLS, INP

• Optimize general resource delivery: caching,

• Optimize images: compressing, WebP

• Lazy load images & video

• Optimize CSS

• Optimize web fonts: compressing, swapping, etc.

6. JavaScript framework: Develop faster

Whether it’s React, Angular, or Vue, they all have the same fundamental concepts:

How to:

• Create and reuse components

• Accept & display data in components: data binding, conditional rendering, etc.

• Manage state in a component

• Display & update list data

• Handle events from components

• Handle side effects and external data changes & state changes

• Manage app-level state — independent from components

• Handle form input

• Style components

• Handle SPA navigation with frontend routing

7. Version control: Track changes

Version control makes it easy to track changes across your codebase and experiment.

How to:

• Create a local repo to store code & assets

• Stage and commit files & changes: best practices, etc.

• Ignore files with .gitignore

• Check out previous commits

• Create new branches: from latest or previous commits

• Merge branches: resolving merge conflicts, etc.

Git & GitHub

How to:

• Create your own GitHub repo: README.md, licenses, etc.

• Use remotes: Create, push, pull, remove

• Clone a repo from GitHub

• Fork a GitHub repo

• Make pull requests to a GitHub repo

8. Manage data in a database

Even if you’re dedicated to frontend, knowing these will refine your understanding of data processing & manipulation.

How to:

• Design a schema for the data

• Implement schema: tables, keys, data types, foreign keys, collections (NoSQL)

• Add data to the database

• Read data: joins, filter, sort, search, aggregate

• Update data

• Delete data

9. Develop for the server-side

How to:

• Respond to a request: URLs, using the header & body

• Manage logs: Create, inspect

• Create a RESTful API: HTTP verbs, status codes

• Fetch data from other APIs

• Send requests to a database: Create, read, update, delete

10. General but crucial

How to:

• Learn rapidly on demand

• Solve problems independently from code

• Communicate: with designers, clients & other devs

• Debug: and be patient

• Search for information on demand: and process it for your needs

Final thoughts

Once you learn all these you’ll be able to build 99% of web apps and sites from start to finish with great speed and high quality of life.

ES8 was packed with valuable features that completely transformed the way we write JavaScript.

Code became cleaner, shorter, and easier to write.

Let’s check them out and see the ones you missed.

1. Trailing commas

Trailing commas used to cause a syntax error before ES8!

❌ Before:

JavaScriptCopied!

const colors = [
  '🔴red',
  '🔵blue',
  '🟢green',
  '🟡yellow', // ❌ not allowed
];

const person = {
  name: 'Tari Ibaba',
  site: 'codingbeautydev.com' // ❌ nope
};

But this caused some problems:

But this made things inconvenient when rearranging the list:

Also we always had to add a comma to the last item to add a new one — cluttering up git diffs:

So ES8 fixed all that:

✅ Now:

JavaScriptCopied!

const colors = [
  '🔴red',
  '🔵blue',
  '🟢green',
  '🟡yellow', // ✅ yes
];

const person = {
  name: 'Tari Ibaba',
  site: 'codingbeautydev.com', // ✅ yes
};

The benefits they bring also made tools Prettier add them by default after formatting:

2. async / await

This was where it all started with async/await!

No more annoying nesting with then():

❌ Before:

JavaScriptCopied!

wait().then(() => {
  console.log('WHERE ARE YOU?!😠');
});

function wait() {
  return new Promise((resolve) =>
    setTimeout(resolve, 10 * 1000)
  );
}

✅ After:

JavaScriptCopied!

// 💡 immediately invoked function expression (IIFE)
(async () => {
  await wait();
  console.log('WHERE ARE YOU?!😠');
})();

function wait() {
  return new Promise((resolve) =>
    setTimeout(resolve, 10 * 1000)
  );
}

The difference is clear:

❌ Before:

JavaScriptCopied!

function getSuggestion() {
  fetch('https://api.example/suggestion', {
    body: JSON.stringify,
  })
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      const { suggestion } = data;
      console.log(suggestion);
    });
}

✅ After:

JavaScriptCopied!

async function getSuggestion() {
  const res = await fetch('https://api.example/suggestion');
  const { suggestion } = await res.json();
  console.log(suggestion);
}

10 lines → 3 lines.

With async/await we could finally use our native try-catch for async code:

❌ Before ES8:

JavaScriptCopied!

startWorkout();

function startWorkout() {
  goToGym()
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {
      console.log(err);
    });
}

function goToGym() {
  return new Promise((resolve, reject) => {
    if (Math.random() > 0.5) {
      reject(new Error("I'm tired today!😴"));
    }
    resolve("Let's go!🏃‍♂️👟");
  });
}

✅ Now:

JavaScriptCopied!

startWorkout();

function startWorkout() {
  try {
    goToGym();
  } catch (err) {
    console.log(err);
  }
}

function goToGym() {
  return new Promise((resolve, reject) => {
    if (Math.random() > 0.5) {
      reject(new Error("I'm tired today!😴"));
    }
    resolve("Let's go!🏃‍♂️👟");
  });
}

3. Powerful Object static methods

Object.values()

A brilliant static method to extract all the values from an object into an array:

JavaScriptCopied!

const person = {
  name: 'Tari Ibaba',
  site: 'codingbeautydev.com',
  color: '🔵blue',
};

const arr = Object.values(person);

// ['Tari Ibaba', 'codingbeautydev.com', '🔵blue']
console.log(arr);

Awesome for data visualization:

JavaScriptCopied!

const fruits = [
  {
    name: 'Banana',
    pic: '🍌',
    color: 'yellow',
  },
  {
    name: 'Apple',
    pic: '🍎',
    color: 'red',
  },
];

const keys = Object.keys(fruits.at(0));
const header = keys.map((key) => `|   ${key}   |`).join('');
const rows = fruits
  .map((fruit) =>
    keys.map((key) => `|   ${fruit[key]}   |`).join('')
  )
  .join('\n');

console.log(header + '\n' + rows);

Object.entries()

Bunches each key-value pair in the object to give a list of tuples:

JavaScriptCopied!

const person = {
  name: 'Tari Ibaba',
  site: 'codingbeautydev.com',
  color: '🔵blue',
};

const arr = Object.entries(person);

/* [
  [ 'name', 'Tari Ibaba' ],
  [ 'site', 'codingbeautydev.com' ],
  [ 'color', '🔵blue' ]
] */
console.log(arr);

Great for data transformations using both the object key and value:

Object keyed by ID → list of objects:

❌ Before:

JavaScriptCopied!

const tasks = {
  1: {
    title: '👟HIIT 30 minutes today',
    complete: false,
  },
  2: {
    name: 'Buy the backpack🎒',
    complete: true,
  },
};

const taskList = Object.keys(tasks).map((id) => ({
  id,
  ...tasks[id],
}));

console.log(taskList);

✅ Now:

JavaScriptCopied!

// ✅ cleaner
const taskList = Object.entries(tasks).map(
  ([id, task]) => ({
    id,
    ...task,
  })
);

console.log(taskList);

4. Native string padding

On the 22nd of March 2016, the popular NPM package left-pad broke several thousands of software projects after the creator took it down as a form of protest.

It made a lot of people worried about our possible over-dependence on external modules — even something as simple as string padding.

But luckily ES8 brought native string padding to JavaScript with the padStart and padEnd string methods:

JavaScriptCopied!

const name = 'tari';

console.log(name.padStart(9, ' ')); // '     tari'

console.log(name.padEnd(10, '🔴')); // 'tari🔴🔴🔴'

We no longer needed to rely on yet another 3rd party dependency.

5. Object.getOwnPropertyDescriptors()

Semi-fancy name but effortless to understand.

Descriptors are properties of properties — one of these:

• value
• enumerable
• get
• set
• configurable
• enumerable

JavaScriptCopied!

const person = {
  name: 'Tari Ibaba',
  color: '🔵color',
  age: 999,
  greet: () => console.log('Hey!'),
};

console.log(
  Object.getOwnPropertyDescriptors(person)
);

Final thoughts

Overall ES8 was a significant leap for JavaScript with several features that have become essential for modern development.

Empowering you to write cleaner code with greater conciseness, expressiveness, and clarity.

Without this JaaScript you will waste thousands of dollars and users will hate your app.

1. They will hate your app

They will be irritated by the horrible user experience and never return.

So imagine you’ve created an amazing AI writing assistant giving helpful suggestions for writing engaging stories:

You’ve got your API all set up for requests in handleChange:

JavaScriptCopied!

export function AssistantUI() {
  const [suggestions, setSuggestions] = useState('');
  const [loading, setLoading] = useState(false);
  
  const handleChange = async (event: any) => {
    const value = event.target.value;
    setLoading(true);
    const res = await fetch(
      'https://api.writer.example.com/suggestions',
      {
        method: 'POST',
        body: JSON.stringify({ text: value }),
      }
    );
    const json = await res.json();
    setSuggestions(json.suggestions);
    setLoading(false);
  };

  return (
    <div className="flex flex-col justify-center flex-wrap content-start">
      <textarea
        onChange={handleChange}
        className="mt-2 mb-4"
        cols={40}
        rows={10}
      />
      { //... }
    </div>
  );
}

But unfortunately there’s a serious problem — can you spot it? 👇

I just started writing and immediately your AI is telling me nonsense about wrong spelling!

Where is my breathing space? Can’t you at least allow me to stop typing?

Oh no, I’m done — You ruined my day and I’ll never return.

But luckily that was just you in an alternate reality — the real you already knew that such UX would be annoying at best and infuriating at worst.

You’re so thoughtful and empathetic — that was why you knew this was a much better way to write handleChange:

JavaScriptCopied!

export function AssistantUI() {
  const [suggestions, setSuggestions] = useState('');
  const [loading, setLoading] = useState(false);

  const timeout = useRef<NodeJS.Timeout | null>(null);
  const handleChange = async (event: any) => {
    const value = event.target.value;
    setLoading(true);
    
    // restart delay
    clearTimeout(timeout.current!);
    
    // ✅ 1-second delay before fetch
    timeout.current = setTimeout(async () => {
      const res = await fetch(
        'https://api.writer.example.com/suggestion',
        {
          method: 'POST',
          body: JSON.stringify({ text: value }),
        }
      );
      const json = await res.json();
      setSuggestions(json.suggestions);
      setLoading(false);
    }, 1000);
  };

  return (
    // ...
  );
}

Now the AI waits for 1 second before giving suggestions!

Everybody is in love with your app now – we could even stop using it if we tried…

In programming, we call this technique debouncing.

And it shows up everywhere…

• Google Search: Any time you search, you’re experiencing debouncing in action.

Notice the delay between typing and the autocomplete update. It’s not latency, it’s debouncing.

• Conversation: When we’re debating and you let me make my points before responding, you’re debouncing.

You didn’t interrupt and start screaming — you made sure I was done by constantly setting a subconscious timeout until I finally stopped speaking:

JavaScriptCopied!

let silenceTimeout;
let silenceDelay = 1000;

function opponentKeepsTalking() {
  clearTimeout(silenceTimeout);
  silenceTimeout = setTimeout(() => {
    reply('Your fallacious premises have no basis in reality');
  }, silenceDelay);
}

2. You lose thousands of $$$

Your users are not the only ones getting overloaded — your servers are crying out for help.

❌ Before debounce:

1,000 users typing 10 times a second = 10 x 60 x 1000 = 600,000 requests a minute!

This load isn’t a functional issue with cloud computing but what about the costs?

Especially since you’re probably using an expensive AI service like OpenAI or GCP Vertex.

✅ Now after debounce:

Typing frequency no longer matters — if they pause typing 10 times every minute that’s

10 x 1000 = 10,000 requests a minute! A 98.3% reduction in requests and costs!

You were spending $1000 a day but now you’re spending less than $170 (!)

What took you a day to spend now takes you a week. Thanks to debounce.

But you can do better

Okay but that’s still like $5,000 a month — can’t we do better?

90% of your users are free and we need to keep their usage at a bare minimum.

Luckily you’re really smart so you quickly came up with this:

JavaScriptCopied!

const timeout = useRef<NodeJS.Timeout | null>(null);
const ignoring = useRef<boolean>(false);
const handleChange = async (event: any) => {
  if (plan === 'free') {
    // ✅ still ignoring so nope
    if (ignoring.current) return;
  
    // ✅ start ignoring for 20 seconds
    ignoring.current = true;
    setTimeout(() => {
      ignoring.current = false;
    }, 20 * 1000);
  }

  // after throttle
  debounce();
  const value = event.target.value;
  setLoading(true);
  const res = await fetch(
    'https://api.writer.example.com/suggestion',
    {
      method: 'POST',
      body: JSON.stringify({ text: value }),
    }
  );
  const json = await res.json();
  setSuggestions(json.suggestions);
  setLoading(false);
};

You ignore free users for 20 seconds after getting their last suggestion.

So only 3 suggestions per minute for them.

900 free users, 100 paying.

900 x 3 + 100 x 10 = 3,700 requests a minute — from $5,100 to $1900.

Killing two birds with one stone:

• Massive 63% savings
• Incentivize free users to upgrade for unlimited suggestions.

This is another technique we call throttling.

And it shows up anywhere you have periodically limited access to something:

• GPT-4o model: Only allow 80 messages every 3 hours for Plus users, as of May 13th 2024.

• Eating: You can only gobble up so much food at a time

Recap from our earlier debate:

• Debounce: You wait for me to finish talking before responding and vice versa.
• Throttle: We both have 5 minutes max at a time to talk.

With this powerful combo, what lasted only one day now lasted 3 weeks.

600,000 requests became 3,700, everyone loves your app, and you’re going to be a billionaire.