Default values while Destructuring in JavaScript

Just before showing the example, we will see how to do destructuring in basic examples

Destructuring Objects

// for simple object
const obj = {
  name: 'Param',
  city: 'Tallinn',
  age: 20,
  company: 'Learn with Param OU',
}

const { name, age, ...rest } = obj

console.log(name) // Param
console.log(age) // 20
console.log(rest) // { city: 'Tallinn', company: 'Learn with Param OU', }

Destructuring Arrays

const personArr = [
  {
    name: 'Param',
  },
  {
    name: 'Ahmed',
  },
  {
    name: 'Jesus',
  },
]

const [first, ...restOfArr] = personArr

console.log(first) // { name: 'Param' }
console.log(restOfArr) // [{ name: 'Ahmed' }, { name: 'Jesus' }]

Destructuring not defined variable

What will happen if we destructure an undefined key in the object. Example,

const firstObj = {
  name: 'Param',
  city: 'Tallinn',
  age: 20,
  company: 'Learn with Param OU',
}

const { firstName, city } = firstObj

console.log(firstName) // undefined
console.log(city) // Tallinn

Default value while destructuring

Now we can pass in default value while destructuring, it will take the default if it is undefined. Example,

const secondObj = {
  firstName: 'Param',
  country: 'Estonia',
}

const { lastName = 'Harrison', country } = secondObj

console.log(lastName) // Harrison
console.log(country) // Estonia

Here in this example, even though lastName is not defined in object, it takes the default value we assigned while destructuring.

This will be very useful when you want to have default values set in your application even if there is no value in the object.

Edge case while setting default value in destructuring

This has an edge case though, destructuring will work well with default value if the value is undefined. It won't work for other non true values, for example null, 0, false.

Let see it in example,

const edgeCase = {
  why: undefined,
  what: null,
  how: 0,
  where: false,
}

const {
  why = 'why',
  what = 'what',
  where = 'where',
  how = 'how',
  notFound = 'Not Found',
} = edgeCase

console.log(why) // why
console.log(what) // null
console.log(how) // 0
console.log(where) // false
console.log(notFound) // Not Found

Hope you enjoyed and learnt some tricks about destructuring in javascript 😎

Checkout the examples here,