Part 1: Tips and Trick in Javascript Object destructure, ESNext

Photo by Max Nelson on Unsplash

Hi folks, so today I’m going to share ways that you can make your code shorter and hipster with Javascript Object. This will be in ESNext syntax (will continue update as times pass 😊).

All the example will be runnable in any browser devtool(as the time writing I was working on Chrome 70) and I will be using var instead on const because, in const you can not redeclare the same variable. Also noted that, some term I may not use the correct one and a feedback are welcome 😊.Part 2 Tips and Trick in Javascript Object, ESNext

So let’s get started then.

1. Return object literal with fat arrow function

Usually in old function way the way we want to return object is like this

// old way, notice 8 lines, yikes.
function setupConfiguration(config) {
  return {
     one: config.one,
     two: config.two,
     three: config.three,
     four: 'default configuration',
  }
}
setupConfiguration({ 
  one: 'one',
  two: 'second', 
  three: '3rd', 
})
// output
{
  "one": "one",
  "two": "second",
  "three": "3rd",
  "four": "default configuration"
}

The elegant way is like this:

// 👍👍
var setupConfiguration = config => ({
     one: config.one,
     two: config.two,
     three: config.three,
     four: 'default configuration',
})

Look how simple it is. Things that you have to notice is that after the => you need to put ({ key: 'you value' }) then you would be able to return an object.

2. Destructure object params in function

Ok just now when we write our setupConfiguration function, we still have to type a lot.

// Which characters/variables is keep repeat in this function
function setupConfiguration(config) {
  return {
     one: config.one,
     two: config.two,
     three: config.three,
     four: 'default configuration',
  }
}
// I already bold it for you 😃.

Ok let’s go straight to the implementation.

// 👍👍
// this bold is variable created inside this function, and you can use it like as you do with variables.
function setupConfiguration({ one, two, three }) {
  return {
     one: one,
     two: two,
     three: three,
     four: 'default configuration',
  }
}
// this bold is object
setupConfiguration({ 
  one: 'one',
  two: 'second', 
  three: '3rd', 
})

So what happen?. setupConfiguration function will accept an Object , and it will destructure/pluck keys that we only interested, which in this case we only interested in one, two, and three .

3. Shorthand property names

We still have repeat characters in our function:

function setupConfiguration({ one, two, three }) {
  return {
     one: one,
     two: two,
     three: three,
     four: 'default configuration',
  }
}

How do we improve this?

// 👍👍
function setupConfiguration({ one, two, three }) {
  return {
     one,
     two,
     three,
     four: 'default configuration',
  }
}

Since we have destructure our object in our function parameters, we created 3 variables namely one , two and three . Hence, if the property key is the same as variable, we can shorten it like the above example. But, if you need to custom value you will have to write like before.

// 👍👍
function setupConfiguration({ one, two, three }) {
  return {
     one,
     two,
     three: `This is ${three} in string`,
     four: 'default configuration',
  }
}

4. Rename our key after we destructure object

As our example at the top, we are actually return three key with a value of This is 3 in string, so it would be wise if we can rename our three into threeString .

// 👍👍
// the bold is variables
function setupConfiguration({ one, two, three: threeString }) {
  return {
     one,
     two,
     threeString: `This is ${threeString} in string`,
     four: 'default configuration',
  }
}
// output
{
  "one": "one",
  "two": "second",
  "threeString": "This is 3rd in string",
  "four": "default configuration"
}

Now, instead of creating one , two and three variables, we are creating one , two and threeString .

5. Default value in object destructuring

Can we make this even simpler?

Bob the builder( “yes we can”)

Now if you notice that our four key is always returning default configuration , what if we, later we can also dynamically change the four .

function setupConfiguration({ one, two, three: threeString, four }){
  return {
     one,
     two,
     threeString: `This is ${threeString} in string`,
     four
  }
}

Now we have accept the four but how do we make a default value for it. Well on the first thought we can check the value of four and and make an if ...else statement

// sorry no :+1: :+1: here
function setupConfiguration({ one, two, three: threeString, four }){
  if (!four) {
      four = 'default configuration' 
  }
  return {
     one,
     two,
     threeString: `This is ${threeString} in string`,
     four
  }
}

It still will work 100%, but generally we would like to avoid using if...else statement as it will have extra effort to use our brain. A better way would be

// 👍👍
function setupConfiguration({ 
   one, 
   two,
   three: threeString, 
   four = 'default configuration' // default value for four
}){
  return {
     one,
     two,
     threeString: `This is ${threeString} in string`,
     four
  }
}

One last example, so bear with me for a few moments.

Photo by Nathan Boadle on Unsplash

6. Destructure, rename, and default in expression.

Now let switch our setupConfiguration function to fat arrow function.

// 👍👍
var setupConfiguration = ({ 
   one, 
   two, 
   three: threeString, 
   four = 'default configuration'
}) => ({
  one,
  two,
  threeString: `This is ${threeString} in string`,
  four
})

After that, we can call our function like this

// by the way this is expression (there is = sign)
var doneSetup = setupConfiguration({ 
  one: 'one',
  two: 'second', 
  three: '3rd', 
})
console.log(doneSetup)
// output 
{
  "one": "one",
  "two": "second",
  "threeString": "This is 3rd in string",
  "four": "default configuration"
}

Ok, now I’m only interested on one , two property. Same like our No. 2 (Destructure object params in function) implementation, we can just destruct the result like this:

// 👍👍
// the bold is variable we created
var { one, two } = setupConfiguration({ 
  one: 'one',
  two: 'second', 
  three: '3rd', 
})
console.log(one, two)
// 'one', 'second'

Can we rename our keys just like No. 4 (Rename our key after we destructure object)?

// 👍👍
// the bold is variable we created
var { one, threeString: three } = setupConfiguration({ 
  one: 'one',
  two: 'second', 
  three: '3rd', 
})
console.log(three)
// 'This is 3rd in string'

And last but not least, to make a default variable, we can do like this:

// 👍👍
// the bold is variable we created
var configuration = setupConfiguration({ 
  one: 'one',
  two: 'second', 
  three: '3rd', 
})
var { 
   one, 
   threeString: three, 
   five = 'this is five'
 } = configuration;
console.log(five)
// 'this is five'

lets celebration

Congratulation you have just mastered object destructuring. Well it’s not that really hard right. I’m sorry for the example if its not a that good 😥.

Conclusions

We have learnt how to destructure , rename key , and default value in objects weather it is in function parameters or expression . There is still a lot of use cases that need to cover. Stay tune for my next part 😁.