Created to standardize JavaScript, so as to foster multiple independent implementations.
Edition 5th - 2009
Edition 6th (ES6, ECMAScript 2015) - 2015
Edition 7th - 2016
Edition 8th - 2017
ECMAScript 2018 was finalized in January 2018
Brief History of
Block-scoped binding constructs
var x = 1
if (true) {
var x = 2
console.log(x)
// 2
}
console.log(x) // 2
let x = 1
if (true) {
let x = 2
console.log(x)
// 2
}
console.log(x) // 1
Single-assignment
const foo = 'bar'
foo = 'baz' // throws an TypeError
const animal = { name: 'dog' }
animal.name = 'cat' // 'cat'
Shorter functions
const arr = [ 1, 2, 3 ]
arr.map(function (e) {
return e + 1
})
arr.map((e) => {
return e + 1
})
arr.map(e => e + 1)
No binding of this
this.name = 'ben'
const somebody = {
name: 'jas',
arrowFnGetName: () => this.name,
regularFnGetName: function() { return this.name }
}
console.log(somebody.arrowFnGetName()) // 'ben'
console.log(somebody.regularFnGetName()) // 'jas'
function Animal (name) {
this.name = name
}
Animal.prototype.speak = function () {
console.log(this.name + ' makes some noise')
}
Animal.prototype.jump = function () {
console.log(this.name + ' jumps')
}
function Cat (name) {
Animal.call(this, name)
}
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.speak = function () {
console.log(this.name + ' meows')
}
var cat = new Cat('Tigger')
cat.speak() // 'Tigger meows'
cat.jump() // 'Tigger jumps'
class Animal {
constructor(name) {
this.name = name
}
speak () {
console.log(this.name + ' makes some noise')
}
jump () {
console.log(this.name + ' jumps')
}
}
class Cat extends Animal {
speak () {
console.log(this.name + ' meows')
}
}
const cat = new Cat('Tigger')
cat.speak() // 'Tigger meows'
cat.jump() // 'Tigger jumps'
// foobar.js
const foo = 'foo'
export default foo
export const bar = 'bar'
// main.js
import foo, { bar } from 'foobar.js'
React.createElement(
'a',
{
href: 'https://google.com/'
},
'GOOGLE'
)
<a href='https://google.com/'>GOOGLE</a>
class MyComponent extends React.Component {
render() {
return (
<h1>Please click the button</h1>
// render button
<button>Click Me</button>
);
}
}
constructor(props) {
super(props);
this.state.name = '123'
}
render() {
return (
<div>
<h1>{`Hello! ${this.state.name}`}</h1>
</div>
);
}
constructor(props) {
super(props);
this.setState({
value: 'Foo'
})
}
componentDidMount() {
this.setState({
value: 'Foo'
})
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { greeting: 'Hello World!' }
}
render() {
<MyCustomComponent
id='custom_component'
class='components'
>
<h1>greeting</h1>
</MyCustomComponent>
}
}
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { greeting: 'Hello <br/> World!' }
}
render() {
return (
<MyCustomComponent>
<h1>{ this.state.greeting }</h1>
</MyCustomComponent>
)
}
}
class Demo extends React.Component {
handleChange(event) {
this.setState({ foo: 'foo' })
}
render() {
return (
<input onChange={this.handleChange} />
);
}
}
class Demo extends React.Component {
render() {
this.setState({ name: 'Kobe' });
return (
<div>`Miss ${name} so much...`</div>
);
}
}
componentDidMount() {
console.log(this.state.count) // count == 0
this.setState({ count: ++count });
console.log(this.state.count)
}
Single source of truth
State is read-only
Changes are made with pure function
React Component Testing
Redux-related Testing
Action Creator Testing
Reducer Testing
Helpers/Libraries Testing
A module bundler for modern JavaScript applications
Builds a dependency graph of modules, then packages them into a small number of bundles
Fragment, Context API, Refs, Strict Mode, New Lifecycles, Profiler
lazy, memo, contextType
Hooks