Unable to understand the instructions for ES6: Use Destructuring Assignment to Pass an Object as a Function's Parameters

Tell us what’s happening:
I don’t understand the instructions or how the example code relates to the problem we are to solve.

Your code so far

const stats = {
max: 56.78,
standard_deviation: 4.34,
median: 34.54,
mode: 23.87,
min: -0.75,
average: 35.85

// use function argument destructuring
// change code below this line
const half = (stats) => (stats.max + stats.min) / 2.0; 
// change code above this line

console.log(stats); // should be object
console.log(half(stats)); // should be 28.015

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36.

Challenge: Use Destructuring Assignment to Pass an Object as a Function’s Parameters

Link to the challenge:

1 Like

if you are interested in just a few property values from an object you can use destructuring to just get those plus already have them in easily typable variables

let’s say there is an object myObj from which we just need properties x and y inside the function

the object is passed inside the function as usual

the difference is inside the function declaration

the function could be declared as usual:

function myFunc (obj) {
   // do something with obj.x and obj.y

or we could use destructuring and be able to have directly the property names as function parameters

function myFunc ({x, y}) {
   // do something with x and y

in the editor there is a function that have a stats object as parameter, inside it there are referenced the properties as stats.min and stats.max
we just want to be able to use min and max

it is exactly the same thing, also the same as function in challenge description

OK, thanks. Prior to reading your explanation, I reviewed arrow functions. Then with just trial and error I was able to pass the challenge with the following code:

const half = ({max, min }) => (max + min) / 2.0;

However I didn’t really understand why it was the right answer. It makes a bit more sense after reading your explanation. What is the advantage of using destructuring here, instead of just using the function declaration?

Not sure what you mean by “instead of just using the function declaration”?

Using destructuring can make the code cleaner as you do not need to dot or bracket into the object. You can be a bit more up front and explicit about what properties are being use in a function. And you can also alias the properties right where you have the parameters instead of inside the function body (assign the value to a new variable).

const user = {
  name: 'John',
  posts: [
    { text: 'Hi, my name is John' },
    { text: 'Well I just wanted to say hello' }

const getUserName = ({ name: userName }) => {
  console.log(userName); // John

const getPosts = ({ posts }) => {
  posts.forEach(({ text: userPost }) => {
    // Hi, my name is John
    // Well I just wanted to say hello

I’m not sure what I mean either. I’m just having trouble understanding the purpose of destructuring.

Maybe I am wrong but it seems like destructuring is an alternate way to do something that could also be done in other ways, and it seems more abstract and difficult to understand.

What do you mean by “cleaner” code? Why would we not want to dot or bracket into the object? What would be the benefit of having “cleaner” code? What does it mean to “alias the properties right where you have the parameters” - and what would be wrong about putting them into the function body?

I don’t understand what your example demonstrates…

Sorry for all the questions but this whole ES6 section has been nothing but perplexing and mystifying to me.

It is an alternate way, and yes at first it may seem a bit difficult to understand. But, I can guarantee you that once you have understood it a bit better and have written more code you will be using it all the time, I can promise you that.

Clean, as in no superfluous implementation details. Just like how using .map or .forEach can hide implementation details you don’t need to worry about. Think of it as a higher-level abstraction of the code.

I mean why do you need JavaScript, you can just write in machine code right (facetious). No very few people actually like writing that low-level code so we (humans) invented languages to give us high-level abstractions.

Here are the two functions again without destructuring and some comments.

const getUserName = (user) => {
  // I don't really care that the name property is on the user object
  // I just want the name property
  console.log(user.name); // John
  // If I want to use a different variable name instead of "name"
  // I have to assign it in the function body
  const userName = user.name;
  console.log(userName); // John

const getPosts = (user) => {
  // Why should I need to dot into the object?
  user.posts.forEach(post => {
    // post is also an object so now I have to dot into that as well
    // Hi, my name is John
    // Well I just wanted to say hello

Some of this will become more clear with time and more coding on real projects.

OK, thanks for the feedback. In general I understand what you mean about the usefulness of abstraction. Hopefully with time and practice things will become clearer.