My notes https://learnjavascript.online/app.html?

id=1584

Objects III
A nifty feature in Objects is the object shorthand. Say you have a variable age, and you wanted to create an
object with a key age and its value is a variable age:

const age = 18;

const person = {
name: "John",
age: age
}

const age = 18;

const person = {
name: "John",
age
}

Because the property name is the same as the name of the variable used as its value, then you can drop the :
age so you're left only with age

Here's another example:

const isAdmin = false;
const darkMode = true;

const settings = {
isAdmin,
darkMode
};

console.log(settings); //{isAdmin: false, darkMode: true}

Debugging tip

Object shorthand can be used as a very useful debugging tip. Let's say you've got the following code:

const sum = (a, b) => {

console.log(a); // 1
console.log(b); // 3
let total = a + b;
console.log(total); // 4
return total;
}

// Sample usage
sum(1, 3);

There are several console.log calls because we are trying to debug our code. However, it will be tough for us
to map on the console which value corresponds to which console.log call

To fix that, you can wrap every variable inside the console.log call with {} so that the code becomes as
follows:

const sum = (a, b) => {

console.log({a}); // {a: 1}
console.log({b}); // {b: 3}

1 of 4 5/10/2025, 9:45 PM
My notes https://learnjavascript.online/app.html?id=1584

let total = a + b;
console.log({total}); // {total: 4}
return total;
}

// Sample usage
sum(1, 3);

const sum = (a, b) => {

console.log({a}); // {a: 1}
console.log({b}); // {b: 3}
let total = a + b;
console.log({total}); // {total: 4}
return total;
}

// Sample usage
sum(1, 3);

By wrapping every variable with {}, you are now using the object shorthand that you learned above. The
benefit here is that, instead of logging a, you are logging {a: a}

Just like array destructuring, you can destructure key/value pairs (or nested objects) from an object. The
concept is similar, except that you have to use {} instead of [] on the left side of the = operator and you
should have an object on the right side of the = operator

const config = {
id: 1,
isAdmin: false,
theme: {
dark: false,
accessibility: true
}
};

Here's how you access some of its properties and create variables out of them:

const id = config.id;
const isAdmin = config.isAdmin;
const theme = config.theme;

This can be refactored with object destructuring as follows:

const {id, isAdmin, theme} = config;

You can also decide to only destructure the variables you need, for example:

const {isAdmin, theme} = config;

It's also possible to destructure with a default value, meaning that you can assign a default value to a property
if it does not exist in the object you're destructuring from. For example:

Destructuring with default value

const user = {
id: 1,
name: "Sam"
};

2 of 4 5/10/2025, 9:45 PM
My notes https://learnjavascript.online/app.html?id=1584

const {name, isAdmin = false} = user;

console.log(isAdmin); // false

Destructure and rename

It's also possible to destructure and rename from an object. For example, let's say you already have a name
variable so you'd like to destructure user.name and assign it to a variable called userName. Here's how you can
do it:

const name = "Document title"; // name variable is already declared

const user = {
id: 1,
name: "Sam",
isAdmin: true
};

// destructure user.name into variable userName

const {name: userName, isAdmin} = user;
console.log(userName); // "Sam"

Here's another example where we destructure user.isAdmin into a new variable admin (note that we
destructure it and rename it):

const user = {
id: 1,
name: "Sam",
isAdmin: true
};

const {id, name, isAdmin: admin} = user;

// We've renamed isAdmin to admin while destructuring
console.log(admin); // true

Concatenate objects

In some scenarios, you'd like to merge 2 objects together. You can do that using the ... spread operator

const firstPerson = {
name: "Sam",
age: 18
}

const secondPerson = {
age: 25,
type: "admin"
}

const mergedObjects = {...firstPerson, ...secondPerson};

console.log(mergedObjects); // {name: "Sam", age: 25, type: "admin"}

It's also possible to check if a key exists in an object using the in operator. The in operator returns true if the
specified property is found in the specified object, otherwise it returns false

const person = {
name: "Alex",
age: 35
};

if ("name" in person) {

3 of 4 5/10/2025, 9:45 PM
My notes https://learnjavascript.online/app.html?id=1584

console.log(person.name);
}

Notice that the property name should be given as a string

You will learn in the following chapter about optional chaining, which makes this use case less relevant. On
the other hand, the in operator is more commonly used to look up if a key exists in the window object. Here's a
common use case:

if ("ontouchstart" in window) {
// using a touchscreen
} else {
// not using a touchscreen
}

Please note that there are many concepts yet to be explained (notably: the window object and event handlers).
The ontouchstart is an event handler that's only present when the user is browsing from a device with a
touchscreen. So, by checking the existence of this key in window ("ontouchstart" in window), we're able to
know whether the user is using a touchscreen or not

The ontouchstart is an event handler that's only present when the user is browsing from a device with a
touchscreen. So, by checking the existence of this key in window ("ontouchstart" in window), we're able to
know whether the user is using a touchscreen or not.

Chapter Recap

Assuming a variable name, here's an example of object shorthand: const user = {name}.
const user = {age} is equivalent to const user = {age: age}.
When you have several console.log calls, wrap the values with {} so that you use object shorthand. The
benefit is that you will be able to see the name of the variable that you were trying to log, alongside its value.
Just like array destructuring, you can destructure key/value pairs (or nested objects) from an object.
It's also possible to destructure with a default value, meaning that you can assign a default value to a
property if it does not exist in the object you're destructuring from.
You can merge objects together with the ... operator. The order of objects matters (for duplicate keys).
Show previous notes

4 of 4 5/10/2025, 9:45 PM