day15

Day 15: Destructuring Part 2

As we discussed yesterday, destructuring has many use cases, and we will discuss one per day.

Yesterday we discussed that destructuring can be used to extract properties and their values out of an object.

Today's discussion will be about how destructuring can be used to pull out properties from an object within function arguments.

Let's take the yesterday's example forward.

2. Pulling properties out of objects when they are passed as function arguemnts

Yesterday we saw an example for object destructuring, let's see today's topic on the same example.

Make a greetings function which takes studentDetails object as argument and returns a greeting message

Let's solve this problem with normal object destructuring and with destructuring in function arguments.

Greetings example - solution 1

var studentDetails =  {
    first_name: "Madhav",
    last_name: "Bahl",
    profession: "Student",
    age: 21
};

function greetings (studentDetails) {
    var { first_name, last_name, profession, age } = studentDetails;

    return `Hi, I am ${first_name} ${last_name}.
        I am a ${profession}
        My age is ${age}`
}

Yesterday when we saw this example without destructuring, we saw that we had to write 4 lines (= num of properties) just to extract variables from the object, but with destructuring that was reduced to a single line.

Now that can also be reduced further.

Greetings example - destructuring in function argument.

Question: Make a greetings function which takes studentDetails object as argument and returns a greeting message.

var studentDetails =  {
    first_name: "Madhav",
    last_name: "Bahl",
    profession: "Student",
    age: 21
};

// Destructuring in function argument
function greetings3 ({ first_name, last_name, profession, age }) {
    return `Hi, I am ${first_name} ${last_name}.
        I am a ${profession}
        My age is ${age}`
}

As you can see, this reduced the 4 lines (without destructuring) of extracting properties, into 0 explicit lines.

And you will see this type of destructuring quite often if you are aiming to become a JS developer, so keep this syntax in mind :)

Download your free eBook

Claim Your Free PDF Here