Differences between ES5 and ES6

One thing I realized recently is that I don't know enough about the differences between javaScript versions ES5 and ES6. I know I've used both before, in fact I prefer to use some features from one over the other.

So, with the help of some other resources, here's what I learned:

Fat Arrow Functions:

What are they?

Instead of writing a function like this:

function logToConsole(string) {
     console.log(string)
}

You can write it like this:

const logToConsole = (string) => {
     console.log(string)
}

Why it can be beneficial:


Fat arrow functions take up less space and, in my personal opinion look cooler.

They inherit this from whatever code is calling the function

So, for example in React, you no longer have to do this:

this.myFunction = this.myFunction.bind(this)

You can replace it with this:

myFunction = () => {

}

Now you don't have to write a constructor function just to bind this.




Object.assign vs the spread operator.

If you want to combine objects, or non-destructively change objects, you can do it by either doing Object.assign, or by the spread operator.

const obj1 = {a: 1, b:2, c:3}
const obj2 = {d:4, e:5, f:6}


let result = Object.assign(obj1, obj2)


The spread operator allows you to do it this way:

let result = {...obj1, ...obj2}

I've seen both ways used when trying to preserve state in redux, although the spread operator, seems like a more simplified way of writing it.



Next up, getting multiple values from objects.

In ES5, when you want to get all of the values from an object, you can do it like this:

var awesome = {a:1, b:2, c:3}

var a = awesome.a
var b = awesome.b
var c = awesome.c

In ES6, you can do it like this:

const awesome = {a:1, b:2, c:3}

const {a, b, c} = awesome

That's pretty neat and it takes up less space.





Lets talk about variables.

In previous versions of JavaScript, variables were created with the keyword var. 

var i = 0 for example was often used in a for loop
for (var i = 0; i < array.length; i++){}

ES6 introduces the variable keywords let and const. Let is for a variable who's value is going to change. Const is for a variable who's value isn't going to change.



Here are somethings I didn't know about:

in ES5, javaScript used callback functions to execute code asynchronously.
in ES6, javaScript now uses promises. In the promise, there are also some keywords that are new. Resolve and Reject as well as then and catch. I've used then and catch before when doing api calls. Then is like a callback function, in that when everything is done executing, it then moves on to whatever is in the then block. The catch is used to catch errors, or data that isn't what is expected. I've seen the then and catch keywords used in the Fetch API (see my previous post)


And lastly, importing modules.
This is done a lot in react and I realized that I've only learned how to do them the ES6 way.

In ES5 you can export a module by using the syntax
module.exports = modulename

In ES6 you do it this way:
export default modulename

I really like the ES6 way of exporting a module. It seems cleaner.



I'm sure this is not an all encompassing list of changes between ES5 and ES6, but it's a good start.


The resources that I used to write this blog and learn more include:
https://codeburst.io/es5-vs-es6-with-example-code-9901fa0136fc
https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4