Traditionally JavaScript is the only mainstream language with prototype-based inheritance. Programmers switching to JS from class-based language found it puzzling, but ES2015 introduced classes, which are just syntactic sugar over the inner working, but changed a lot how we built JavaScript programs.
Now inheritance is very easy and resembles other object-oriented programming language:
class Person {
contructor(name){
this.name = name
}
hello(){
return ‘hello, Iam’ + this.name+ ‘.’
}
}
class Actor extend Person{
hello(){
return super.hello()+ ‘I am an actor.’
}
}
var tomCruise = new Actor(‘Tom Cruise’)
tomCruise.hello() code-boxClasses do not have explicit class variable declarations, but you must initialize any variable in the constructor.
Constructor
Classes have a special method called constructor which is called when a class is initialized via new.
Super
The parent class can be referenced using super().
Getters and Setters
A getter for a property can be declared as
class Person{
get fullName(){
return `${this.firtsName} ${this.lasName}`
}
} code-boxSetters are written in the same way:
class Person{
set age(years){
this.theAge = years
}
} code-boxModules
Before ES2015, there were at least 3 major modules competing standards, which fragmented the community:
- AMD
- RequireJS
- CommonJS
ES2015 standardized these into a common format.
Importing Modules
Importing is done via the import … from … construct:
import + from ‘mymodule;
import React from ‘react’
import { react, Componenent} from ‘react’
import React as MyLibrary from ‘react’ code-boxExporting modules
You can write modules and export anything to other modules using the export keyword:
export var foo = 2
export function bar(){ /*…*/} code-boxTemplate Literals
Template literals are a new syntax to create string:
They provide a way to embed expressions into string, effectively interpolating the values, by using the ${a_variable} syntax:
const var = ‘test’
const string = `something ${var}` //something test code-boxYou can perform more complex expressions as well:
const string = `something ${1 + 2 + 3}`
const string2 = `something ${foo() ? ‘x’ : ‘y’}` code-boxAnd strings can span over multiple lines:
const string3 = `Hey
this
string
is awesome!` code-boxCompare how we used to do multiline string pre-ES2015:
var str = ‘One\n’ +
‘Two\n’ +
‘Three’ code-boxDefault Parameters
Functions now support default parameters:
const foo = function(index = 0, testing = true){/* … */}
foo() code-boxThe spread operator
You can expand an array, an object or a string using the spread operator.
Let’s start with an array example. Given
You can create a new array using
You can also create a copy of an array using
This work for object as well. Clone an object with:
Using strings, the spread operator creates an array with each char in the string:
const hey = ‘hey’
const arrayized = […hey] // [ ‘h’, ’e’, ’y’] code-boxThis operator has some pretty useful applications. The most important one is the ability to use an array as function argument in a very simple way:
const f = (foo, bar) => {}
const a = [1, 2]
f(…a) code-boxDesctructuring assignments
Given an object, you can extract just some values and put them into name variables:
const Person = {
firstName: ‘Tom’,
lastName: ‘Cruise’,
actor: true,
age: 54,
const (firstName: name,age) = person } code-box
Name and age contain the desired values.
The syntax also works on arrays:
const a = [1,2,3,4,5]
[first, second, , ,fifth] = a code-boxEnhanced Object Literals
In ES2015 Object Literals gained superpowers.
Simpler syntax to include variabels
Instead of doing
const something = ’y’
const x = {
something : something
} code-boxYou can do
const something = ‘y’
const x = {
something
} code-boxPrototype
A prototype can be specified with
const anObject = { y: ‘y’}
const x = {
__proto__: anObject
} code-boxSuper()
const anObject = { y: ‘y’, test: () => ‘zoo’ }
const x = {
__proto__: anObject,
test(){
return super.test()+ ‘x’
}
}
x.test() //zoox code-boxDynamic properties
const x = {
[‘a’ + ‘_’ + ‘b’]: ‘z’
}
x.a_b //z code-boxFor-of loop
ES5 back in 2009 introduced forEach() loops. While niche, they offered no way to break, like for loops always did. ES5 introduced the for-of loop, which combines the consiness of forEach with the ability to break:
for (const v of [‘a’, ‘b’, ‘c’]){
console.log(v);
}
for (const [I, v] of [‘a’, ‘b’, ‘c’].entries()){
console.log(I, v)
} code-boxMap and Set
Map and Set (and their respective garbage collected Weakmap and WeakSet) are the official implementations of two very popular data structures.
Post a Comment