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 functionfunction 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: herefunction 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 ๐Ÿ˜.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store