ES6 - Write Concise Object Literal Declarations Using Object Property Shorthand

JavaScript
1

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

2

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

3

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?

4

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’

5

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.

6

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.

7

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?

9

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.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.