FAQ: Advanced Objects - Destructured Assignment

It makes sense, but why is the example in this lesson showing the opposite? :frowning:

There is a clue in the narrative…

Since functionality is referencing robot.functionality we can call the methods available to robot.functionality simply through functionality.

What if we only destructure that property?

{functionality} = robot.functionality

Will the beep() method work on that object?

What is the difference between using destructured assignment and accessing properties with getters?

Maybe it has something to do with being able to modify the variable separate from the property itself? But if that’s the case, why use it at all? It seems like destructured assignment rids us of the need for getters at all?

They are nothing alike. Destructuring assignment lets us reach into an object and assign its properties to outside variables, or as below, an array…

u = [3, 5, 8, 9, 10, 11]
[a, b, ...c] = u
console.log(a, b, c)
3 5 [ 8, 9, 10, 11 ]
const _ = {
  clamp (num, lower, upper) {
    return Math.min(Math.max(num, lower), upper);
  },
  inRange (n, start, end) {
    if (! end) {
      [start, end] = [0, start]
    } else if (start > end) {
      [start, end] = [end, start]
    }
    return n >= start && end > n;
  },
  words (str) {
    return str.match(/[^\W]+/g)
  }
}

Notice that above is an object encapsulating some methods. We can reach into the object and bring a method out into the open where we can call it like a global function.

const {inRange} = _

console.log(inRange(5, 10, 20))    //  false

How we can equate that to getter/setter behavior is beyond me. Rather than find reasons to not use them it might be better to learn everything you can about their usage. They are really quite useful in an OOP setting.

1 Like

Thank you so much! I think I was comparing destructured assignment with getters because they both hold object properties. I think my mind was making the leap by saying “Well, if we can initialize a variable to an object’s property, how is that different from using destructured assignment to create a variable that holds object properties?”

1 Like

We would not be creating an object with destructuring assignment since that would be the opposite of what is happening. Although, in a factory function we can use destructuring assignment of the parameters…

const foo = function (low, mid, high) {
    return {
        low,
        mid,
        high
    }
}
console.log(foo(5, 15, 45))
// { low: 5, mid: 15, high: 45 }
1 Like

A getter is an object property, one that triggers built in behavior when polled. Setters are similar in that they take assignments, not calls.

The destructuring assignment is moot, by now, and we can see there is no link in the behavior of it, and get/set.

Extra Study

const foo = function (low, mid, high) {
    return {
        low,
        mid,
        high
    }
}

In the earlier example of this code we logged the outcome, thereby freeing the object of any reference. We let the object go, and therefore the enclosing function is free to give up its memory.

What happens when we assign the object?

obj = foo(10, 30, 90)

They object now has a reference, but where does it point to? The object enclosed by foo(). Now the memory that function occupies is frozen as long as that reference exists. If we call the same function and assign each return to a new variable we have all the space the variables occupy, along with multiple instances of the function stored in memory, each with their own closure reference to keep each variable alive.

One cure is to make sure that factories are called only from within a function. Another cure I am theorizing on is to return the items, rather than the object itself. How it would free the function of the bindings is the biggest question, and beyond me, but worth exploring.

Bottom line, consume factory output. Don’t leave it laying around. It can add up to substantial loss of available memory and cause rampant slowdowns.

I noticed in their study cards that if you have an object:

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

You can then use destructured assignment to do something like this:

const { name, residence } = vampire;

So my question is: Is this method just shorthand for creating multiple variables at once, or does this just create one variable that then stores the key-value pairs I selected in a new object?

console.log({ name, residence }); // prints Object { name: "Dracula", residence: "Transylvania" }

But you can also access “name” and “residence” as individual variables:

console.log(name); // prints "Dracula"

So which one is it?

It is one assignment but multiple variables. Recall that object property names are themselves variables. This construct just allows us direct access to all of those included in the assignment.

1 Like