ES6 - Write Concise Object Literal Declarations Using Object Property Shorthand

Tell us what’s happening:

In the example that’s initially provided below for explanation purposes in the site here, what if property x has a different value than “x”? What if x’s value is "Larry" or something other than x? It’s saying the point of this problem is to reduce redundancy of having to write x: x but, why is the value of the property the same? So i.e., the redundancy is confusing me. Usually I see something different for the values of properties.

Also, in the after syntactic sugar example provided, the arrow operator => is followed by ({}) parentheses & curly braces but, in my solution it’s {return { name, age, gender };};, it’s double curly braces with return inside. Why is that and I thought the return was inherent in some arrow function applications so I thought I shouldn’t have to keep return in it?

EXAMPLE IN COURSE PROBLEM BEFORE “SYNTACTIC SUGAR”

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

AFTER SYNTACTIC SUGAR

const getMousePosition = (x, y) => ({ x, y });

Your code so far

const createPerson = (name, age, gender) => {
  // Only change code below this line
  return {
        name, age, gender
      };
  // Only change code above this line
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

ES6 - Write Concise Object Literal Declarations Using Object Property Shorthand

The value of the variable doesn’t matter for this simplification. The name of the variable sets the property name.

I’m sorry but, I’m still not understanding.
The values for the x & y properties are x & y correct? Or is this some type of destructure I didn’t notice, therefore it’s not showing the values?

No, the values of x and y can be anything. x and y are just the names of those variables. The variable x is not obligated to hold only a string ‘x’

Okay, if x and y aren’t the values to x and y properties (as it’s written the same as objective properties and values e.g., x: x), is x and y even a property? Why is there x and y next to x and y in the first place? I’m not understanding why there’s redundancy in the first place and why x and y aren’t the values of the properties x and y.

This say to take the value in the variable named x and store it in a property named x. We could have also written

getMousePosition = (x, y) => ({
  x: y.
  y: x
});

And we have valid JavaScript. Here we take the value in the variable named y and store it in a property named x.

I’m sorry, I’m not understanding the concept you or this code is trying to explain. Could you direct me to some resources that may help? I assume x: & y are the properties since, every other problem that talks about objects includes something likeconst myObjct = ({ name: "Larry", age: 50}) but, I can’t tell from your response if X: & y: are properties or the variables you’re referencing. Also, you mentioned that it could be x: y, y: x but, how could that be? In the link I initially provided, the point was to reduce redundancy since x: was x (the same or redundant). If it changes to x: y it’s no longer redundant thus, how could we shorten it?

Right here. x and y are function parameters, so they are working just like variables in your function.

I think you might be overthinking this. Another way to say this would be:

If you are using variables to create an object and you don’t specify the parameter names, then the parameter names are assumed from the name of your variables.

const name = 'john';
const surname = 'smith';

const person = {
  first: name,
  last: surname,
};

console.log(person);

const otherPerson = {
  name,
  surname,
};

console.log(otherPerson);

What happens when you run this code? What do you see in the console? For the person I specified parameter names and for the otherPerson I let JavaScript fill in the parameter names itself.