FAQ: Advanced Objects - Property Value Shorthand

[wiki-bot]

This community-built FAQ covers the “Property Value Shorthand” exercise from the lesson “Advanced Objects”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise Property Value Shorthand

• Is property value shorthand in objects compatible with all browsers?

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[leannerybintsev]

This passed the exercise but contains no arrow function:

I am not clear on why this passed but threw up an error when I added the =>

The example contained an arrow function.

[textninja83556]

Hello @ [leannerybintsev] changing to the arrow notation threw an error because of the function keyword.

const robotFactory = (model, mobile) => {} 

function robotFactory (model, mobile) {}

Those are the two ways to declare the function

[kelrob]

Is it possible to make use of property value shorthand when you want to give the property another name instead of the name in the parameter

E.g

// Property value shorthand
const robotFactory = (model, mobile) => {
  return {
    model,
    mobile,
    beep() {
      console.log('Beep Boop');
    }
  }
}

What if I want to give the property another name, for instance I want the property model to be modelType, is there a shorthand for this or I have to use the normal property declaration without the shorthand?

[devrockstar93153]

I was having trouble understanding the guts of what was passing through the robotFactory function and whether the arguments were targeting the key: or the :value. I also was uncertain why the key-value both take the argument variable. I attempted to create a new key-value pair using energySource: ‘Pig’. So two questions:

1. Why do we have both the key and value take the same variable as the argument?
2. Why doesn’t the argument ‘chicken’ in newRobot overwrite the key-value (energySource: ‘Pig’)?

function robotFactory(model, mobile, energySource){
return {
model: model,
mobile: mobile,
energySource: ‘Pig’,
beep() {
console.log(‘Beep Boop’);
}
}
}

const newRobot = robotFactory(‘P-501’, false, ‘chicken’);
console.log(newRobot.model) // returns ‘P-501’
console.log(newRobot.mobile) // returns false
console.log(newRobot.energySource) // returns ‘Pig’

[devrockstar93153]

I think I figured out that I was asking the wrong questions. The argument doesn’t know to target the key or the value in particular, it merely targets all instances of the undefined variable that was fed into the argument. And if I want ‘Pig’ to be overwritable I need to include it as a default value in the argument instead.

function robotFactory(model, mobile, energySource=‘pig’){
return {
model,
mobile: mobile,
energySource,
beep() {
console.log(‘Beep Boop’);
}
}
}
const newRobot = robotFactory(‘P-501’, false, ‘chicken’);
console.log(newRobot.model) // returns ‘P-501’
console.log(newRobot.mobile) // returns false
console.log(newRobot.energySource) // returns ‘chicken’

[samyadel]

property value shorthand is a shortcut that we can use when the property and the parameter have the same name. It doesn’t make sense if they don’t have the same name - how can you define the property name differently to the parameter and expect JavaScript to understand that this property has a value of the differently-named parameter?

[samyadel]

There’s something I don’t really understand. This lesson states that destructuring is a shortcut introduced in ES6 which simplifies assigning object properties to variables. However, it also states that property value shorthand is a destructuring technique! What does that even mean and how is property value shorthand related to destructuring?

[chip4533844923]

It seems no one has the same question as me ! the beep method is not declared in the robotFactory parameters, why we can call beep method?

function robotFactory(model, mobile){
return {
model,
mobile,
beep() {
console.log(‘Beep Boop’);

}

}
}

// To check that the property value shorthand technique worked:
const newRobot = robotFactory(‘P-501’, false)
console.log(newRobot.model)
console.log(newRobot.mobile)
newRobot.beep();

shown on console.
P-501
false
Beep Boop

[lindaweiss3810526669]

I guess, that anything stated in the parentheses of console.log, which happens to be part of the beep() method will be just logged to the console, no matter what.

[tera8236829013]

want to know the parameter in robotFactory function is always same as property name like in this model and mobile .
why it not excecute if I do model1 in place of model ?

[codebyte]
function robotFactory(model, mobile){
return {
model,
mobile,
beep() {
console.log(‘Beep Boop’);
}
}
}