> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-06/es2015-or-16-quick-recap.md).

# ES2015 | 16 Quick Recap

A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond.

## Block scoping

**Let**

```
function fn () {
  let x = 0
  if (true) {
    let x = 1 // only inside this `if`
  }
}
 
 
```

**Const**

```
const a = 1
```

`let` is the new `var`. Constants work just like `let`, but can’t be reassigned. See: [Let and const](https://babeljs.io/learn-es2015/#let--const)

#### Backtick strings <a href="#backtick-strings" id="backtick-strings"></a>

**Interpolation**

```
const message = `Hello ${name}`
```

**Multiline strings**

```
const str = `
hello
world
`
```

Templates and multiline strings. See: [Template strings](https://babeljs.io/learn-es2015/#template-strings)

#### Binary and octal literals <a href="#binary-and-octal-literals" id="binary-and-octal-literals"></a>

```
let bin = 0b1010010
let oct = 0o755
```

See: [Binary and octal literals](https://babeljs.io/learn-es2015/#binary-and-octal-literals)

### New methods

**New string methods**

```
"hello".repeat(3)
"hello".includes("ll")
"hello".startsWith("he")
"hello".padStart(8) // "   hello"
"hello".padEnd(8) // "hello   " 
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC")
```

## Classes

```
class Circle extends Shape {
```

**Constructor**

```
  constructor (radius) {
    this.radius = radius
  }
 
```

**Methods**

```
  getArea () {
    return Math.PI * 2 * this.radius
  }
 
```

**Calling superclass methods**

```
  expand (n) {
    return super.expand(n) * Math.PI
  }
 
```

**Static methods**

```
  static createFromDiameter(diameter) {
    return new Circle(diameter / 2)
  }
}
 
```

Syntactic sugar for prototypes. See: [Classes](https://babeljs.io/learn-es2015/#classes)

## Promises

#### Making promises <a href="#making-promises" id="making-promises"></a>

```
new Promise((resolve, reject) => {
  if (ok) { resolve(result) }
  else { reject(error) }
})
 
```

For asynchronous programming. See: [Promises](https://babeljs.io/learn-es2015/#promises)

#### Using promises <a href="#using-promises" id="using-promises"></a>

```
promise
  .then((result) => { ··· })
  .catch((error) => { ··· })
 
 
```

#### Using promises with finally <a href="#using-promises-with-finally" id="using-promises-with-finally"></a>

```
promise
  .then((result) => { ··· })
  .catch((error) => { ··· })
  .finally(() => { // logic independent of success/error })
 
```

The handler is called when the promise is fulfilled or rejected.

#### Promise functions <a href="#promise-functions" id="promise-functions"></a>

```
Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)
```

#### Async-await <a href="#async-await" id="async-await"></a>

```
async function run () {
  const user = await getUser()
  const tweets = await getTweets(user)
  return [user, tweets]
}
 
 
```

`async` functions are another way of using functions.

See: [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)

## Destructuring

#### De-structuring assignment <a href="#destructuring-assignment" id="destructuring-assignment"></a>

**Arrays**

```
const [first, last] = ['Nikola', 'Tesla']
 
```

**Objects**

```
let {title, author} = {
  title: 'The Silkworm',
  author: 'R. Galbraith'
}
 
```

Supports for matching arrays and objects. See: [Destructuring](https://babeljs.io/learn-es2015/#destructuring)

#### Default values <a href="#default-values" id="default-values"></a>

```
const scores = [22, 33]
const [math = 50, sci = 50, arts = 50] = scores
```

```
// Result:
// math === 22, sci === 33, arts === 50
```

Default values can be assigned while destructuring arrays or objects.

#### Function arguments <a href="#function-arguments" id="function-arguments"></a>

```
function greet({ name, greeting }) {
  console.log(`${greeting}, ${name}!`)
}
 
```

```
greet({ name: 'Larry', greeting: 'Ahoy' })
```

Destructuring of objects and arrays can be also be done in function arguments.

#### Default values <a href="#default-values-1" id="default-values-1"></a>

```
function greet({ name = 'Rauno' } = {}) {
  console.log(`Hi ${name}!`);
}
 
```

```
greet() // Hi Rauno!
greet({ name: 'Larry' }) // Hi Larry!
```

#### Reassigning keys <a href="#reassigning-keys" id="reassigning-keys"></a>

```
function printCoordinates({ left: x, top: y }) {
  console.log(`x: ${x}, y: ${y}`)
}
 
```

```
printCoordinates({ left: 25, top: 90 })
```

This example assigns `x` to the value of the `left`key.

#### Loops <a href="#loops" id="loops"></a>

```
for (let {title, artist} of songs) {
  ···
}
 
```

The assignment expressions work in loops, too.

#### Object de-structuring <a href="#object-destructuring" id="object-destructuring"></a>

```
const { id, ...detail } = song;
 
```

Extract some keys individually and remaining keys in the object using rest (…) operator

## Spread

#### Object spread <a href="#object-spread" id="object-spread"></a>

**with Object spread**

```
const options = {
  ...defaults,
  visible: true
}
 
```

**without Object spread**

```
const options = Object.assign(
  {}, defaults,
  { visible: true })
```

The Object spread operator lets you build new objects from other objects.

See: [Object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)

#### Array spread <a href="#array-spread" id="array-spread"></a>

**with Array spread**

```
const users = [
  ...admins,
  ...editors,
  'rstacruz'
]
 
 
```

**without Array spread**

```
const users = admins
  .concat(editors)
  .concat([ 'rstacruz' ])
```

The spread operator lets you build new arrays in the same way.

See: [Spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)

## Functions

#### Function arguments <a href="#function-arguments-1" id="function-arguments-1"></a>

**Default arguments**

```
function greet (name = 'Jerry') {
  return `Hello ${name}`
}
 
```

**Rest arguments**

```
function fn(x, ...y) {
  // y is an Array
  return x * y.length
}
 
```

**Spread**

```
fn(...[1, 2, 3])
// same as fn(1, 2, 3)
 
```

Default, rest, spread. See: [Function arguments](https://babeljs.io/learn-es2015/#default--rest--spread)

**Fat arrows**

```
setTimeout(() => {
  ···
})
 
```

**With arguments**

```
readFile('text.txt', (err, data) => {
  ...
})
 
```

**Implicit return**

```
numbers.map(n => n * 2)
// No curly braces = implicit return
// Same as: numbers.map(function (n) { return n * 2 })
numbers.map(n => ({
  result: n * 2
})
// Implicitly returning objects requires parentheses around the object
 
 
 
 
```

Like functions but with `this` preserved. See: [Fat arrows](https://babeljs.io/learn-es2015/#arrows-and-lexical-this)

## Objects

#### Shorthand syntax <a href="#shorthand-syntax" id="shorthand-syntax"></a>

```
module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }
```

See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)

#### Methods <a href="#methods-1" id="methods-1"></a>

```
const App = {
  start () {
    console.log('running')
  }
}
// Same as: App = { start: function () {···} }
 
```

See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)

#### Getters and setters <a href="#getters-and-setters" id="getters-and-setters"></a>

```
const App = {
  get closed () {
    return this.status === 'closed'
  },
  set closed (value) {
    this.status = value ? 'closed' : 'open'
  }
}
 
 
```

See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)

#### Computed property names <a href="#computed-property-names" id="computed-property-names"></a>

```
let event = 'click'
let handlers = {
  [`on${event}`]: true
}
// Same as: handlers = { 'onclick': true }
 
```

See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)

#### Extract values <a href="#extract-values" id="extract-values"></a>

```
const fatherJS = { age: 57, name: "Brendan Eich" }

Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]
```

## Modules

#### Imports <a href="#imports" id="imports"></a>

```
import 'helpers'
// aka: require('···')
```

```
import Express from 'express'
// aka: const Express = require('···').default || require('···')
```

```
import { indent } from 'helpers'
// aka: const indent = require('···').indent
```

```
import * as Helpers from 'helpers'
// aka: const Helpers = require('···')
```

```
import { indentSpaces as indent } from 'helpers'
// aka: const indent = require('···').indentSpaces
```

`import` is the new `require()`. See: [Module imports](https://babeljs.io/learn-es2015/#modules)

#### Exports <a href="#exports" id="exports"></a>

```
export default function () { ··· }
// aka: module.exports.default = ···
```

```
export function mymethod () { ··· }
// aka: module.exports.mymethod = ···
```

```
export const pi = 3.14159
// aka: module.exports.pi = ···
```

`export` is the new `module.exports`. See: [Module exports](https://babeljs.io/learn-es2015/#modules)

## Generators

#### Generators <a href="#generators-1" id="generators-1"></a>

```
function* idMaker () {
  let id = 0
  while (true) { yield id++ }
}
```

```
let gen = idMaker()
gen.next().value  // → 0
gen.next().value  // → 1
gen.next().value  // → 2
```

It’s complicated. See: [Generators](https://babeljs.io/learn-es2015/#generators)

#### For..of iteration <a href="#forof-iteration" id="forof-iteration"></a>

```
for (let i of iterable) {
  ···
}
```

For iterating through generators and arrays. See: [For..of iteration](https://babeljs.io/learn-es2015/#iterators--forof)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://tkssharma.gitbook.io/react-training/day-06/es2015-or-16-quick-recap.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.