Just remember that while you may be using const in a static context, it is still a mutable value.

[...someVariable] it's actually spread attribute not operator.

answer re: What are these three dots in React doing?

Jan 13 '17

538

... are called spread attributes which, as the name represents, it allows an expression to be expanded.

var parts = ['two', 'three']
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

And in this case (I'm going to simplify it).

// Just assume we have an

…

Open Full Answer

Yep! There is also a solution that involves renaming files to .mjs and using --experimental-modules, but I find esm works really well in practice (and is easier)

I just switched back to var...

I plan to! Thanks 😄

Chris, I was very impressed with your tutorial; but I was also quite dumbfounded. I'm basically a retread. I grew up in the era of mainframes, punch cards and COBOL. dBaseIII+ and IV reminded me how much I missed programming. However, I stayed on the admin/engineering track. Now we have DevOps (DevSecOps and DevNetOps in some places). I love the concept, but it's going to take a while before I can feel worthy enough to contribute anything. I thought that Javascript might be easy as I'd had a taste of JSON when I was doing PowerShell and .NET. You tutorial taught me alright. It taught me that I know NOTHING about javascript. I tried to follow along as best I could, but it was like trying to understand Integral Calculus again. Let's just say that I got my butt whooped and barely passed it all those years ago. Looks like I'm going to be sitting at the 'kiddies' table for a while as I try to learn these other dialects.

I love languages. I can even speak a few besides English. But right now, my heads filled with PowerShell, .NET, Terraform, Ansible, PowerCLI and so on. The further I get, the more I realize that I don't know and it can be frustrating; but at the end of the day, it really is still fun.

Do you by chance have a 'baby-primer' version of your class? I don't think that Javascript for Dummies could even help me right now. What I can relate to is your teaching style. You are a great communicator and your graphics for the examples are first rate. So I know that some day, I'll be able to understand your teachings a lot easier. For now, I'll take my dunce cap and go sit in the corner for a spell. Don't worry, I'm not giving up. It's all too much fun and if you and the community can be patient with a slowpoke like me, then I know that I'll make the grade - just a bit further down the road.

Meanwhile, if you ever need any help with VMware, or need a few virtual servers built somewhere, I offer my services gratis because I really want to learn from you.

LLAP,
Miguel (aka GulMiguel/Airwolf) :)

Quite late to the party here, but a cool thing to note regarding your point 5 is that you can also "selectively" deconstruct an array, that is, select only certain elements. Like this:

const array = [1, 2]
const [, second] = array
console.log(second) // 2

Or more advanced:

const array = [1, 2, 3, 4, 5, 6]
const [, second,, fourth,, sixth] = array
console.log(second, fourth, sixth) // 2 4 6

I enjoyed a lot Chris, thank you very much!
I needed a pocket reminder like that.

Great article! Simple and useful, thank you!

This is a fantastic write-up of the core ES6 benefits! I just wanted to note that if performance is a concern for functions bound to this, then the handleEvent API carries infinitesimal overhead compared to the arrow function syntax and bind(this) calls within the constructor.

const clickCounter = {
  submit: 0,
  reset: 0,
  elements: {},

  // `this` will be `clickCounter`
  handleEvent({currentTarget, type}) {
    if (type === "click") {
      this.incrementClicks(currentTarget);
    }
  },

  // `this` will still be `clickCounter`!
  incrementClicks(currentTarget) {
    const {localName, type} = currentTarget;
    localName === "button" ? this[type]++ 
      : (this.elements[elTag(currentTarget)] || this.elements[elTag(currentTarget)] = 0)++;
  },

  elTag({localName, classList, id}) {return [
      localName,
      id ? `#${id}` : null,
      classList.length ? `.${[...classList].join(".")}` : null
    ].join("");
  }
}

// count ALL the clicks!!
document.addEventListener("click", clickCounter);

Great article except the usage of var. I would not discourage it, as let is limited to the scope of braces whereas var is limited to the scope of the current this (function) context. Both have strengths.

Very Interesting I'll share this post in my community.