Object Literals in JavaScript

These come up in interviews more than you think

Petey
Petey
Jan 10 · 3 min read
Photo by Arian Darvishi on Unsplash

What are Object literals in JavaScript?

More than one interviewer has asked me this question for front-end positions. If you have done any kind of JavaScript development, you have used an object literal at some point. I’ll explain and provide some sample code.


Object Literal

Those values can be properties and functions. Here’s a snippet of an object literal with one property and one function.

var greeting = {
fullname: "Michael Jackson",
greet: (message, name) => {
console.log(message + " " + name + "!!");
}
};

Here’s the snippet to use the object we just created to log the fullname and call the greet function with the fullname value.

Let’s suppose we want to access the fullname inside the greet function instead of having to read it from a parameter. If we try to access it directly by doing something like this:

greet = (message)=> {
console.log(message + " " + fullname + "!!");
}

We will get an undefined error. The fullname property isn’t visible directly.

However, you can create a function (e.g. getFullName())that accesses the fullname value using the this keyword, which is just the current object context.

If you’d like to read more about the this keyword, visit W3 Schools. The function would look like this:

getFullName: () => {
return this.fullname;
}

The greet function now would look like this:

greet: (message) => {
console.log(message + " " + this.getFullName() + "!!");
}

All members of an object literal in JavaScript, both properties and functions, are public. The only place you can put private members is inside of a function.

For instance, I can add a private variable inside of the greet function to further customize the message. The function’s code now would look something like this.

(message, name) => {
var customMessage = message + " " + name +
"!!! It's nice to meet you."

console.log(customMessage);
}

The customMessage variable is only visible in your function, but if it was placed outside of the function as a property, then it would be public.

Assigning an object literal to another variable only performs a shallow copy, which means you get the reference of the object instead of the actual value.

Let’s say I wanted to create another greeting object by using the greeting object we created earlier.

var anotherGreeting = greeting;

Doing this might look fine at first, but any change made to the copied object (anotherGreeting) will reflect in the original object (greeting).

var copiedGreeting = greeting;
copiedGreeting.fullname = "Michael Buble";
console.log(greeting.fullname + " == " + copiedGreeting.fullname);
---------------output----------------
Michael Buble == Michael Buble

You cannot copy an object literal without manually copying all the values.

Lastly, you can mutate members of an object literal, meaning you can add and remove them as you please.

If I need to remove the fullname property from the object and add other properties (e.g. first and last name), I can simply do this.

delete greeting["fullname"];
greeting.firstname = "Michael";
greeting.lastname = "Jackson";

Object literal should be used if you want to create objects on the go with no intention of copying values to another object or maybe mapping one object to another.

If you will need to create multiple instances of a structure and perform operations based on predefined values, then you should use a function constructor — i.e., an instance object, which I’ll discuss in-depth in another article.

Thank you for reading. Happy coding!

Better Programming

Advice for programmers.

Petey

Written by

Petey

Husband, father, engineer, musician, and writer by luck. I write mostly about whatever comes to mind. Follow me on this crazy writing journey if you dare.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade