Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at the core features of JavaScript.
No More apply()
Before ES6, we’ve to use apply to call a function with an array spread as arguments.
With ES6 or later, we can use the spread operator instead of calling a function.
It’s easier since we don’t have to set the value of this .
For instance, instead of writing:
Math.max.apply(Math, [3, 2, 1, 6])
We write:
Math.max(...[3, 2, 1, 6])
It’s much easier and we don’t have to worry about an extra argument.
With the push method, we can push multiple items with the apply method with ES5 or later:
var arr1 = [1, 2];
var arr2 = [3, 4];
arr1.push.apply(arr1, arr2);
The first argument is the array instance, which we set as the value of this .
With ES6, we can instead write:
const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.push(...arr2);
With the spread operator, we don’t have to do that anymore.
concat() can be Replace by Spread
We can replace concat with the spread operator with ES6.
Instead of writing in ES5:
var arr1 = [1, 2];
var arr2 = [3, 4];
var arr3 = [5, 6];
console.log(arr1.concat(arr2, arr3));
We write:
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
console.log([...arr1, ...arr2, ...arr3]));
We merged all 3 arrays together into with the spread operator with ES6 or later.
Both expressions return a new array with elements of all 3 arrays in it.
Function Expressions in Object Literals
We don’t to write out the function keyword for object methods anymore with ES6 or later.
It has a handy syntax for defining methods in objects.
In ES5 or earlier, we’ve to write:
var obj = {
eat: function() {
//...
},
drink: function() {
this.eat();
},
}
to define methods in an object.
With ES6 or later, we can shorten it to:
const obj = {
eat() {
//...
},
drink() {
this.eat();
},
}
We removed the function keyword and colon so it’s much shorter.
They do the same thing.
Constructors to Classes
ES6 provides us with a handy class syntax to create constructor functions.
In ES5, we’ve to write:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return 'Hello ' + this.name;
};
Instance methods are defined by adding a property to the prototype property.
In ES6, we can use the class syntax by writing:
class Person {
constructor(name) {
this.name = name;
}
greet() {
return `Hello ${this.name}`;
}
}
The constructor has what’s inside the constructor function.
And greet is still the method in Person ‘s prototype property.
It’s just written differently.
Subclasses
Creating subclasses is complicated with ES5. If we have super constructors and properties, it’s even harder.
To create a parent and child class with ES5 or earlier, we write:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
return 'Hello ' + this.name;
};
function Student(name, number) {
Person.call(this, name);
this.number = number;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.describe = function() {
return Person.prototype.greet.call(this) + '-' + this.number;
};
We create the Person constructor the same way.
Then to create the Student subclass, we call the Person constructor with the call method with this and name to call the parent constructor.
Then we initialize the instance data of Student .
And then we create the prototype of Student by calling Object.create with Person ‘s prototype.
Then we set the constructor property to Student to get the right constructor.
Then we add our instance methods to the Student class.
It’s complex and hard to understand.
With the class syntax, we write:
class Person {
constructor(name) {
this.name = name;
}
greet() {
return `Hello ${this.name}`;
}
}
class Student extends Person {
constructor(name, number) {
super(name);
this.number = number;
}
describe() {
return `${Person.prototype.greet.call(this)}-'${this.number}`;
}
}
All we had to do us to use the extends keyword to indicate that it’s a subclass.
And we call super to call the parent constructor.
Conclusion
Object-oriented programming is easier with ES6 or later.
