This content originally appeared on Go Make Things and was authored by Go Make Things
Object property shorthand values are a newer, simpler way to define properties and functions in an object. Today, we’re going to learn how they work.
Let’s dig in!
How object property shorthand values work
If you want to define a property in an object, and that key name already exists as a variable within the object’s scope, you don’t have to explicitly assign a value. You can use just the key name, and that variable’s value is used automatically.
// Some details
let name = 'Merlin';
let job = 'wizard';
let age = 'old AF';
// The object
let wizard = {
name: name, // The old way
job, // ES6 shorthand
age // ES6 shorthand
};
Historically, we needed to do things like name: name. With ES6 shorthand values, you can include the key name without the colon (:) or value.
Object function shorthands
Let’s imagine we wanted to add a few functions to our wizard object. ES6 provides a simpler way to do that as well.
Instead of creating a key name and then writing function () {}, you can add a named function without the function keyword.
let wizard = {
// Values
name: name, // The old way
job, // ES6 shorthand
age, // ES6 shorthand
// The old way of adding functions
summon: function () {
console.log('From out of thin air, watch me make a bear');
},
// The ES6 shorthand way
vanish () {
console.log(`Now you see me, now you don't.`);
}
};
⏰ Last Chance! A new session of the Vanilla JS Academy starts on Monday. Join today and get 25% off registration.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-01-25T14:30:00+00:00) Object property shorthand values with vanilla JavaScript. Retrieved from https://www.scien.cx/2023/01/25/object-property-shorthand-values-with-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.