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 myFunc(myObj)
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 }) => {
console.log(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
console.log(post.text);
// 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.