NOTE:
The term "object" denotes two kinds of objects: the key-value data structure in JavaScript, and the popular but opinionated programming methodology: OOP . This article is about the latter type of object.
Object data type
In JavaScript, [almost] everything is an object. To understand the language in-depth, you first have to know what objects are and how they work.
An object is used to store key-value data. It allows for various data and complex entities to be stored. Entities within an object are known as properties. A property is a "key-value" pair, where the key is the property name and value can be anything
To create an object, the curly braces {...}
is used with a list of optional properties. It's possible to initialize an empty object.
// Empty object using "object literal" syntax
let user = {};
// Empty object using "object constructor" syntax
let user = new Object();
When declaring an object, the curly braces {...} are preferred over the "object constructor". This is known as Object literal.
Object Literal
Inside the curly braces, we can put in properties separated by commas. All properties have a property name which is the key followed by a colon, and then the property value which can be anything.
let user = { // The object
name: "Romeo", // key "name" store value of "Romeo"
age: 22, // key "age" store value of 22
work: "Went to work" // key "work" store value of "Went to work"
}
Reading a property that doesn't exist will return an undefined value. This means the property hasn't been declared or defined yet. Property values are accessed using the dot .
notation.
alert(user.name) // Romeo
alert(user.height) // undefined
It is possible to add, remove and assign a value to a property. Values are removed or deleted using the delete
keyword. Values are assigned using the =
operator. If a property value already exists, it will replace it.
// Add a bolean value
user.isChristian = true;
// Delete property
delete user.work; // "work" property is deleted
alert(user.work); // undefined.
Lastly, property names that do not follow valid binding name have to be quoted, in other words, a property name can be multi worded. To access multi worded property names, the square bracket is used []
.
Square Brackets
Square brackets are used to access multi worded property names in an object. The dot .
does not work for multi-word names.
// Set property using square brackets
user["likes dogs"] = true;
// Access property using dot notation
user.likes dogs; // Syntax Error
user.likes dogs
will throw an error because JavaScript reads user.likes
first, which is valid, but throws an error when it gets to dogs
. This is because when using dot notation, the property name can not contain spaces, numbers and special characters (_ and $ are allowed).
The square brackets should be used for property names containing spaces (multi-word names).
// Get property name
alert(user["likes dogs"]); // true
// Delete property name
delete user["likes dogs"];
Square brackets allow accessing property names using expression. for instance, a variable.
const key = "likes dogs";
alert(user[key]); // true
With the square bracket notation, the properties of an object can be accessed by user input. Such flexibility can not be achieved with the dot notation
const pet = {
type: "Dog"
name: "Zeus",
breed: "Pitbull",
age: 3
}
let key = prompt("What do you want to know about my pet? ");
// access properties
alert(pet[key]); // "Pitbull" if user enter 'breed'
The square bracket gives more flexibility when accessing object properties, but more often than not you should be using the dot notation because of its simplicity and readability. Only use a square bracket when the need arises.
Object property short-hand
When working on or reading an actual codebase, property names and values are often the same. This is due to accepting values from variables. For example:
function myPet(type, name, breed, age) {
return {
type : type,
name : name,
breed : breed,
age : age
}
}
const pet = myPet("Dog", "Zeus", "Pitbull", 3);
alert(pet.name); // Zeus
In the example above, the object properties have the same values as the variables (function parameters). This is a common use-case but there is shorthand for it.
Instead of having a type:type
property of an object, you can just have a type
and JavaScript will understand that the single value represents both the property name and property value.
For example:
function myPet(type, name, breed, age) {
// Property value shorthand
return { type, name, breed, age };
}
// Normal object and shorthand togethter is valid
const pet = {
breed, // same breed:breed
age: 3
};
Property test.
Accessing an object property that is not available or does not exist return an undefined
value. unlike other programming languages, JavaScript does not halt the program and throw an error.
You can test if a property exist or not:
const pet = {};
consolg.log(pet.propertDoesNotExist === undefined); // returns "true." property does not exist
JavaScript has a special in
operator for testing if properties exist.
let pet = {type: "Dog", breed: "Pitbull"};
if ("type" in pet) console.log(pet.type); // logs "Dog" pet.type exists
if ("age" in pet) console.log(pet.age); // logs "undfined" pet.age doesn't exit
Why the in
operator is preferred for testing properties instead of comparing against undefined
is because property can exist but store undefined as the value.
For example:
const pet = {
type: undefined,
name: "Zeus"
}
if (pet.type) console.log("true") // type is "undefine" ...no such property
if ("type" in pet) console.log("true") // logs "true" Property exists
The pet.type
property above technically exist, but the if (pet.type)
test for a true or false condition didn't pass because the property name type is set to "undefined" explicitly.
undefined
values should not be explicitly set. you should prefer using null for unknown values.
the key in object
condition will always work as long the key exists in the object.
Summary
Let's go over what you've learned so far about JavaScript Object.
An object is a data structure for storing key-value data.
Data stored in an object are called properties, where:
- Property key or name must be string or symbol (_ and $)
- Property value can be of any type
To access object properties, use:
- The dot notation
object.property
- The square bracket notation
object["property"]
. You can take keys from expression using the square bracket
Additional Object operators:
delete
operator is used for deleting properties:delete object.property
The
in
operator is a special type of operator for testing object properties:"key" in object
To iterate over an object:
for (let key in obj)
loop. (Reserved for future update)
These are the basics that should be known for anybody starting JavaScript programming. The language has other built-in objects, like the Date, Array, Math and Error object. Understanding how they work isn't much of a brainer when you how the "plain" object works.
Top comments (0)