ES6 Variables, Arrow Functions, and more, Oh my!

Whether you're a seasoned JavaScript developer who could use an update or just touching JavaScript for the first time, ES6 for Everyone by Wes Bos is a course for you! This course will give you all the information to get started and also strengthen your basic JavaScript skills.

Having been already been familiar with jQuery, a library that aims to simply using JavaScript, I was a bit intimidated about stepping into the big world of vanilla JS and ES6. My previous experience with writing vanilla JS had been mostly annoyance – why would I do this small thing in JavaScript when I could do it in jQuery with fewer lines of code?

However, now after completing the Wes Bos course, I can see the value in learning plain old JavaScript. It gives you a really good base. I feel as though I’ve rounded out a lot of my knowledge. jQuery, at times, can feel constricting – Pure JavaScript gives you a lot more control. Now that I have more of a fundamental understanding of JavaScript, I can branch out and learn more libraries like React.

What is ES6, you may ask? ECMAScript is a scripting language that provides the basis for JavaScript and version 6 was released in 2015. The previous version, ES5, was released in 2009 so this was a pretty big leap.

The course is broken into 21 separate modules that cover everything you need to know about ES6. Each module has multiple videos that cover related topics. This makes it easy for beginners to follow along, or experts to skip around and update themselves on what they need or want to learn. In each video, Wes explains the topic using a real example of where it could be used within a project. After a sequence of videos, he will either suggest the user pause and work out the problem themselves or provide a list of exercises for the user to complete. However, if you prefer to just follow along, Wes provides all the course code. Personally, I learn best when I type everything out myself, and the videos were the perfect speed. Allowing me to follow along and be comfortable at a moderate pace. It is possible to speed the videos up within the stream player, too.

The videos are upbeat and engaging. They kept me interested throughout and I never found myself getting bored or drifting to other things. They also have a great replayability. I went through the course a few times just the get the full effect and still didn’t get bored going through them. They can also be easily referenced later if you ever need to go back for a quick refresh on a certain topic. Wes also has updated the videos a few times and everyone who previously purchased that course gets the updates for free.

The course goes through a bunch of topics, but here are some of the things I learned:

ES6 Variables

Variables contain values that are used throughout the code. ES6 introduces two new variable types -- let and const while still keeping the old way- var around.

*let is a variable that may be reassigned (think loops or mathematical equations).

*const is a variable that will never be reassigned.

*var, though it still does exist in ES6 is less favorable to let and const. There aren’t many use cases for using it over let or const.

Each of these variables is scoped to its respective block. Like this:

{
  const sarah = "sarah"
  console.log(sarah)
}

const sarah = "sarrrahhh"
console.log(sarah);

ES6 Arrow Functions

The old way:

function chromatic() {
  console.log(‘chromatic is awesome’)
}

The new way:

const chromatic = () => {
  console.log(‘chromatic is awesome’)
}

Spread Operator

const colors = [‘red’, ‘blue’]
const shapes = [‘square’, ‘circle’]
const colorfulShapes = […shapes,  …colors]

so

colorfulShapes = [ ‘square’, ‘circle’, ‘red’, ‘blue’]

This is helpful because you don’t need to know how many items are in the array!

Template Strings

The old way:

function  things(thing1, thing2, thing3) {
  console.log(thing1 + ‘is’ + thing2 + ‘which is also’ + thing3)
}

The new way:

function  things(thing1, thing2, thing3) {
  console.log(`${thing1} is ${thing2} which is also ${thing3}`)
}

Arrays

.from() - turn things into arrays! .find() - loops over items .of() - add things to a new array .filter() - similar to find but it creates a new array

Sets

Are nice because they’re not index based- they have a size, not a length so you can add and remove items from them easily.

const dogs = new Set();

dogs.add('yorkie');
dogs.add('husky');
dogs.add(‘pomeranian');

console.log(dogs); // Set('yorkie', 'husky', 'pomeranian')

dogs.delete('yorkie')
dogs.clear();

Overall I would highly recommend this course for anyone who is new to JavaScript or just looking to upgrade their ES6 knowledge. It taught me a lot about the value of learning JavaScript and I’m excited to put my newfound skills to use .