Write Concise Object Literal Declarations Using Simple Fields1

JavaScript
1

Tell us what’s happening:
It is easy but I don’t know what to do

Your code so far


const createPerson = (name, age, gender) => {
  "use strict";
  // change code below this line
  return {
    name: name,
    age: age,
    gender: gender
  };
  // change code above this line
};
console.log(createPerson("Zodiac Hasbro", 56, "male")); // returns a proper object

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-simple-fields

2

From the lesson text:

ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood.

So it’s telling you to simplify the way you write the object. If the variable name matches the object key, i.e. x: x or name: name for example, you can just write it once, x or name etc.

3

const createPerson = (name, age, gender) => {
“use strict”;
// change code below this line
return {
x: name,
age: age,
gender: gender
};
// change code above this line
};
console.log(createPerson(“Zodiac Hasbro”, 56, “male”)); // returns a proper object

That? BU t it isn;t right

4

If the key was x and the value was represented by the variable x, instead of

return { 
  x: x 
};

You can simple write:

return {
  x
};
5

const createPerson = (name, age, gender) => {
“use strict”;
// change code below this line
return {
x: x
};
};
// change code above this line

console.log(createPerson(“Zodiac Hasbro”, 56, “male”)); // returns a proper object

That is my code but tell me:x is not defined
x is not defined

6

My example was for if the key and value variable were both x.

Read the code you have carefully to see what keys and values your object in the challenge has.

7 
const createPerson = (name, age, gender) => {
  "use strict";
  return {
    name: name,
    age: age,
    gender: gender
  };
};

why can we use an identical name for both the key and the parameter? I think the key will be replaced by the parameter I input.

If I try:
console.log(createPerson("Zodiac Hasbro", 56, "male"))

my expected return will be:

{"Zodiac Hasbro": "Zodiac Hasbro", 56: 56,  "male": "male"}

please correct me, I’m confused.

9

You can read more about object literals here: https://dev.to/sarah_chima/enhanced-object-literals-in-es6-a9d

In your example the expected return is a little wrong, but understandably so.

ES6 Javascript knows that in that pattern name, age, and gender actually stands for both the key and the value - and that those are two different things!

You are expecting it to recognise them solely as variables, which is sensible, so setting the age variable to 56 means it should read as 56: 56.

But JS cleverly recognises that it represents both the name of the key, age and the variable value that you pass it in the function parameter, 56.

It’s pretty wild, but allows you to write less code to do the same job. This is always a dangerous tradeoff because the terse nature of the new syntax can be harder to read when you are unfamiliar with it, but once you internalise it: less code = fewer potential bugs.

10

Now I know that in this scenario, ES6 automatically distinguish the key from the parameter, and I should accept this as a common feature in order to save time and avoid bugs. Thank you!