Selecting array elements

const array = ['x', 'y', 'z', 'ø']

const [first] = array
// first = 'x'

const [,, third] = array
// third = 'z'

no way to get last element 
// WRONG: [...init, last]


const [firstChar] = 'Meet.js wow'
// firstChar = 'M'

You can declare variable before destructuring

let a;
let b;

[a, b] = ['x', 'y']
// a = 'x', b = 'y'

let a;

{ foo: a } = { foo: 'x' } // WRONG

// Workaround
({ foo: a } = { foo: 'x' })
// a = 'x'

Rename property when needed

// config.js
const config = {
    redis: {
        host: '..',
        ..
    },
    rethink: {
        host: '..'
    },
    trackApi: '..',
    DEFAULT_OPTIONS: [],
    NAMES_MAPPING: {}
}

Rename property when needed

(without destructuring)

// connect.js
const config = require('./config')
const redisConfig = config.redis
const rethinkConfig = config.rethink
const NAMES_MAPPING = config.NAMES_MAPPING;


const redis = new Redis(redisConfig)
const rethink = new r.connect(rethinConfig)

Rename property when needed

// connect.js
const { 
    redis: redisConfig, 
    rethink: rethinkConfig, 
    NAMES_MAPPING 
} = require('./config');


const redis = new Redis(redisConfig)
const rethink = new r.connect(rethinConfig)

Object innards

const { length } = ['Meet', 'js', 'mail']
// ToObject(['Meet', 'js', 'mail'])
// length = 3

const { a } = undefined;
// TypeError

const { a } = null;
// TypeError

Internal ToObject() function

Named export

// utils/date.js
export function formatDate() {}
export function formatDatetime() {}
export function formatShortDate() {}

export default { formatDate, formatDatetime, formatShortDate }

// displayDates.js
import { formatDate, formatDatetime } from 'utils/date'

const date = formatDate(new Date())
const datetime = formatDatetime(new Date())

This is NOT destructuring

Named export simulation

// utils/date.js
module.exports = {
    formatDate() {},
    formatDatetime() {},
    formatShortDate() {}
}

// displayDates.js
const dateUtils = require('utils/date')

const date = dateUtils.formatDate(new Date())
const datetime = dateUtils.formatDatetime(new Date())

Named export simulation

(with destructuring)

// displayDates.js
const { formatDate, formatDatetime } = require('utils/date')

const date = formatDate(new Date())
const datetime = formatDatetime (new Date())

Picking from object

const teamIds = [100, 102]
const homeId = teamIds[0]
const awayId = teamIds[1]

const teamsMap = {
    100: { name: 'Team0' },
    101: { name: 'Team1' },
    102: { name: 'Team2' }
}

const homeTeam = teamsMap[homeId]
const awayTeam = teamsMap[awayId] 
// homeTeam = { name: 'Team0' }
// awayTeam = { name: 'Team2' }

Computed properties when destructuring

const teamIds = [100, 102]
const [homeId, awayId] = teamIds

const teamsMap = {
    100: { name: 'Team0' },
    101: { name: 'Team1' },
    102: { name: 'Team2' }
}

const { [homeId]: homeTeam, [awayId]: awayTeam } = teamsMap
// homeTeam = { name: 'Team0' }
// awayTeam = { name: 'Team2' }

Computed prop

Multiple values returned by function

function saveData(promises) {
    return Promise.all(promises).then(results => {
        const failed = results.filter(result => result.isFailed)
        
        return { results, failed }           
    })
}

const saveDataResult = saveData([..])

const results = saveDataResult.results
const failed = saveDataResult.failed

Using destructuring

const { results, failed } = saveData([..])

Named function parameters

function filter(rank, points, ratio) { .. }

filter(5, 13, 0.87) // ??

function filter({ rank, points, ratio }) { .. }

filter({ rank: 5, ratio: 0.87, points: 13 })



function filter({ rank, points = 10, ratio = 0.25 }) { .. }

filter({ rank: 5, points: 13 })