Jon Grabbe
About Portfolio

Top 5 ES6 Features

With ES6 came a handfull of new features. These are some of the more usefull ones.

Array methods

Here are a list of some new array methods that are handy for common Javascript logic

Array.prototype.filter

This array method takes in a function as a parameter and returns a new array with elements that pass the test provided by the helper function.

Array.prototype.find

Find the first element in an array that passes a test provided by a function as a parameter. The test function should return true or false.

Array.prototype.every

This tests if all the elements in an array pass a certain test. It iterates through an array and checks each element to a test function if each element passes then the method returns true and false if it did not.

Array.prototype.some

Tests wheather some elements in a array pass a test. Only one element needs to pass a test as opposed to Array.every where they all need to return true. Array.some takes a function that is uses to test each element, and as soon as an element passes it returns true. If not, it returns false.

Arrow functions

Arrow functions provide a more concise way of writing functions. They have limitations so they should not be used in all situations.

Classes

Classes provide a way to create templates of objects and allow other objects to inherit the same properties and methods of a parent object. ES6 gives us a better syntax for doing this

class User {
constructor(name) {
this.name = name
}
greet() {
return 'hello my name is'+this.name
}
}
let bill = new User('bill');
console.log(bill.name) //ruturns 'bill';
let jane = new User('jane');
console.log(jane.name) //returns 'jane'
//a class inheriting properties and methods from another class
class Profile extends User {
constructor(name, posts, profilePicture) {
super(name);
this.posts = posts;
this.profilePicture = profilePicture;
}
get ProImg() {
return this.profilePicture;
}
get ProfilePosts() {
return this.posts;
}
}
let Jake = new Profile('Jake', [{'post1': 'blah blah blah', 'post2': 'post content here'}], 'pofile-jake.png')
console.log(Jake.greet()) //hello my name is Jake
console.log(Jake.ProImg) //profile-jake.png
console.log(Jake.ProfilePosts[0]['post1']) //blah blah blah

Template strings

Template strings make concatenating strings much easier all you have to do is create a string between backticks ` ` and use a dollar sign and curly brackets ${} to insert a JavaScript expression

function hello(firstName, lastName) {
return `Good morning ${firstName} ${lastName}!
How are you?`
}

5. let and const

I written an article on let and const var, let and const. but the short version is the new keywords let and const add two new ways of creating variables. The main differences are in scope, hoisting, and how you can declare them.

let

carName = "Volvo";
alert(carname);
let carName;
This will cause a reference error

const