DEV Community

Cover image for What is your favourite ES6 feature?
Tanwa Sripan
Tanwa Sripan

Posted on

What is your favourite ES6 feature?

Helloooo everyone! πŸ‘‹ It has been a while since I last posted, I have been rather busy the past 2 weeks!

As the title suggests, I am curious to know what your favourite JavaScript ES6 feature is...πŸ€”

I was recently asked this in an interview and it surprised me as I have been learning JS with latest features so I don't quite know which features are ES6 and which are newer... So I answered with what came to mind, and it was Promises. Since I have been learning about backend development with NodeJS, I have learnt a lot about asynchronous programming which is why I chose that answer (I also talked about async/await, which was not introduced until ES7, oops!). Of course, I had to explain why I chose that particular feature and I talked about the benefit of how it helps eliminate callback hell, improve error handling and how you can use Promise chaining to your advantage.

So, I present to you the same question, what is/are your favourite ES6 feature/s and why? (If you are preparing for an interview, this could be a good practice to answer out loud πŸ˜‰).

Discussion (19)

Collapse
helloitsian profile image
Ian • Edited on

I have two that are tied.

Not so much a feature, but a neat trick to remove a property of an object (and copy said object) with destructuring.

const object = { toDelete: 1, toStay: 2, };
const { toDelete, ...rest } = object;
console.log(rest); // { toStay: 2 }
Enter fullscreen mode Exit fullscreen mode

Additionally, my favorite ES6 feature is Proxies, I think it's cool you can make a reactive state with them. Also guarding objects is nice sometimes.

Collapse
justtanwa profile image
Tanwa Sripan Author

That's really cool, I have not used Proxies before, do you have an example use case you have used in the past?

Collapse
helloitsian profile image
Ian • Edited on

Here's a basic/rough example on how you can do simple data binding with Proxies

const subscribers = [];

const states = {
  data: new Proxy(
    {
      message: "Hello, world!",
    },
    {
      get(target, prop) {
        return target[prop];
      },
      set(target, prop, value) {
        target[prop] = value;
        subscribers.forEach(
          ({ el, state, prop }) => (el.innerText = states[state][prop])
        );
        return true;
      },
    }
  ),
};

const bindedEls = document
.querySelectorAll("[data-bind]")
.forEach((bindEl) => {
  const dataBind = bindEl.dataset.bind.split(".");
  const [state, prop] = dataBind;

  bindEl.innerText = states[state][prop];
  subscribers.push({
    el: bindEl,
    state,
    prop,
  });
});

setTimeout(() => states.data.message = "Updated value with Proxy data binds!", 3000);
Enter fullscreen mode Exit fullscreen mode

Here's a fiddle: jsfiddle.net/tbwh3c01/

Thread Thread
justtanwa profile image
Tanwa Sripan Author

Thank you for this example!

Thread Thread
helloitsian profile image
Ian

np!

Collapse
darkwiiplayer profile image

Here is an example of how I use Proxies in the wild. They're one of my favourite things in JS; the sky is the limit for what you can build using them :D


EDIT: In case that code requires an explanation, here is the documentation.

Thread Thread
justtanwa profile image
Tanwa Sripan Author

Wow! A lot going on here, but it looks awesome :D Not sure I understand it all, but thank you for the example.

Collapse
blackeyv profile image
raymond-yan • Edited on

Cool trick. Never thought about using destructuring like this.

Collapse
pengeszikra profile image
Peter Vivo • Edited on

generator function you can get in and leave (yield) so many times, it is perfect for declarative coding time consuming process. Modern usecase is redux-saga

really old poker example on codepen.io

   // example of use generators
   * singleRound(){

    for( let deal of this.dealing() ) yield deal

    for( let flop of this.theBetRound( 'Flop' ) ) yield flop

    for( let flop of this.theFlop() ) yield

    for( let turn of this.theBetRound( 'Turn' ) ) yield turn
    yield this.theTurn(); 

    for( let river of this.theBetRound( 'River' ) ) yield river
    yield this.theRiver(); 

    for( let showdown of this.theBetRound( 'Showdown' ) ) yield showdown

    let winnerIs = []
    for( let score of this.showScores( winnerIs )) yield score
    let winner = this.theShowdown( winnerIs )
    yield winner    
    winner.chips += this.dealer.drawBet()
    for( let pause of Array(10)) yield winner

    // yield this.theShowdown()
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
justtanwa profile image
Tanwa Sripan Author

Really cool, thank you for sharing!

Collapse
timkovik profile image
timkovik

Optional chaining is amazing

Collapse
justtanwa profile image
Tanwa Sripan Author

That's cool also, though I have not used it much

Collapse
cmgustin profile image
Chris Gustin

I’m a big fan of .forEach() and the related .filter() and .map() methods.

Much cleaner and easier to read than the old C-style iterative loops in my opinion, and a great addition to the language given how much of modern JS and front-end dev involves looping through large amounts of data in some way or another.

Collapse
justtanwa profile image
Tanwa Sripan Author

I agree, I also like array methods, they are very handy :D

Collapse
andrewbaisden profile image
Andrew Baisden

Probably the new array methods.

Collapse
admirnisic profile image
admirnisic

Do not know what is my favorite one but one cool feature which is on top of my list is default value for function parameters.

function sayHello(name = 'World') {
    return `Hello ${name}!`;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
mistval profile image
Randall

There are a lot of great features that came in ES6, but I would agree that Promises are my favorite, especially since they paved the way for async/await. Const, let, and classes are also great.

Collapse
mrdulin profile image
official_dulin

Optional chain

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited on

Mine are Proxy objects and default symbols that can be used for meta programming.