Understanding Object Destructuring In Javascript.

Photo by Fahrul Razi on Unsplash

Hi, in this tutorial, you will learn how to write object destructing using JavaScript.

Object destructing is a javascript technique used to extract properties from objects and set them into new distinct variables. it also allows us to extract multiple properties at a time.

when dealing with object destruction we make use of the destructing assignment syntax {}.

Destructuring assignment syntax is a JavaScript expression that makes it possible to unpack properties from objects, into distinct variables.

Let's discover some examples of how object destructing works.

const Programmer = {
  name: 'John Doe',
  stack: 'Javascript',
}

const { name, stack } = Programmer;
console.log(name) // John Doe
console.log(stack) // Javascript 

In the example above we declared a Programmer object that holds two properties name and stack.

we were able to unpack properties from the source Programmer object using the destructuring assignment syntax and log them to the console.

Assigning unpacked variable a new name.

A property can be unpacked from an object and assigned to a variable with a different name than the object property names.

const Programmer = { name: 'James Doe' stack: 'Html'};

const { name:get_name, stack:get_stack } = Programmer;
console.log(get_name); // James Doe
console.log(get_stack); // Html

Here in the example, I declared a Programmer object. In the second line, I unpacked name and age properties from our sourced Programmer object and assigned them a local variable name, and logged them to the console respectively.

Assigning a new variable name and providing default values.

sometimes you might want to assign a default value in case an unpacked object value is undefined. let's see how to implement this technique.

const { age:student_age, grade:student_grade = "A" } = { age: 8 };

console.log(student_age) // 8
console.log(student_grade) // A

In the example above, I unpacked from an object and assigned it to a variable with a different name (student_age, student_grade) respectively.

In our source object, we have just one property but when unpacking from our source object we’re referencing a grade value that doesn't exist, this would throw an undefined error. But because we assign it a default value we were able to output its value.

Computed object property names and destructuring.

Prior to ES6, you could use the square brackets( []) to enable the computed property names for the properties on objects.

The square brackets allow you to use the string literals and variables as the property names. For example:

let title = 'Role Title';
let programmer = {
    [title]: 'Fullstack Develope',
    'working hours': 4
};

console.log(programmer[title]); // Fullstack Develope
console.log(programmer['working hours']); // 4

The title variable was initialized to a value of Role Title. Since both properties of the programmer object contain a space, you can only reference them using the square brackets.

computed property names, like object literals can be used with destructuring. For example:

// creating a string literal
const getStack = 'stack'
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              ;
const { [getStack]:stack } = { stack: "Javascript" };
console.log(stack); // Javascript

In this example, the [getStack] is a computed property of the getStack string literal. The property name that is unpacked is derived from the value of the getStack variable. I also assigned a new variable name to the [getStack] computer property to stack.

When you access the stack variable, JavaScript evaluates the getStack and uses its value to reference the property name in our source object, and returns the property’s value.

Note: When dealing with computed property destructing, the value of your string literal must correspend to the name of your source object key property.

Combined array and object destructing

Array and object destructuring can be combined. for example, let's say we have an array of three objects and you want the name property in the object, we can implement it as follows:

const student = [
    {id: 1, name: 'Paul'},
    {id: 2, name: 'James'},
    {id: 3, name: 'Doe'},
]

// Let access the name property of the third item from this obj
const [, , { name }] = student
console.log(name) // Doe

Accessing Object Keys and Values

Sometimes you might want to get object keys, values, and entries. In order to get these items we use Object.keys, Object.values, and Object.entries.

1. Object.keys(obj) - returns all the keys of an object as array
2. Object.values(obj) - returns all the values of an object as an array
3. Object.entries(obj)- returns an array of [key, value]

let's see some implementation of all these features:

const student = {
  name: 'James',
  age: 10,
  stack: 'Js'
}

Getting keys of the object

use the Object.key to get the keys of the Object:

const keys = Object.keys(student);
console.log(keys) // ["name", "age", "stack"]

Object.key returns the keys that are available in the object while calling the function.

Note: Any new keys added after calling the Object.key function won’t be updated:

const keys = Object.keys(student);
console.log(keys) // ["name", "age", "stack"]

// Address key won't be added to key array
student.address = 'tutorial example'; 

Getting values

Property values can be gotten from an object using the Object.values() function.

const student = {
  name: 'James',
  age: 10,
  stack: 'Js'
}

const values = Object.values(student)
console.log(values) // ["James", 10, "Js"]

Conclusion

in this tutorial, we have been able to work around JavaScript object destruction and how to manipulate object properties effectively.

I hope you enjoyed this article and learned something new. If you have any queries let me know in the comment box or you can connect with me on Twitter.