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.