JavaScript Objects
JavaScript Objects
A JavaScript object stores related values together as named properties.
An array uses numbers to find its values; an object uses names.
Each name and value pair is called a property.
Example
Example
javascript
const person = {
name: "Ada",
age: 36
};
console.log(person.name);The output is Ada.
What is an Object?
An object is a collection of named values written inside curly braces.
Each property has a key and a value, separated by a colon.
Objects are how you group information that belongs together.
Syntax
Syntax
javascript
const name = {
key: value,
key2: value2
};Separate the properties with commas.
Dot Notation
The usual way to read a property is a dot followed by the name.
Example
Example
javascript
const car = { brand: "Toyota", year: 2021 };
console.log(car.brand);This only works when you know the name as you write the code.
Bracket Notation
Square brackets take the name as a string.
This is what you need when the name is in a variable.
Example
Example
javascript
const car = { brand: "Toyota" };
const key = "brand";
console.log(car[key]);Brackets are also needed for names with spaces or dashes.
Adding and Changing Properties
You can add a property simply by assigning to it.
Example
Example
javascript
const car = { brand: "Toyota" };
car.year = 2021;
car.brand = "Honda";
console.log(car.brand + " " + car.year);Assigning to a name that does not exist creates it.
Missing Properties
Reading a property that is not there gives undefined.
Example
Example
javascript
const car = { brand: "Toyota" };
console.log(typeof car.colour);No error is raised, which can hide typos in property names.
Deleting a Property
delete removes a property entirely.
Example
Example
javascript
const car = { brand: "Toyota", year: 2021 };
delete car.year;
console.log(Object.keys(car).length);The object now has one property.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Objects</title>
</head>
<body>
<h1>JavaScript Objects</h1>
<p id="result"></p>
<script>
const person = {
name: "Ada Lovelace",
role: "Mathematician",
year: 1815
};
document.getElementById("result").innerHTML =
person.name + "<br>" + person.role + "<br>" + person.year;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try adding a property:
Add person.city = "London"; and show it too.
Important Points
- An object groups named values inside curly braces.
- Each property is a key and a value separated by a colon.
- Dot notation reads a property by a known name.
- Bracket notation is needed when the name is in a variable.
- A missing property gives
undefined, not an error.
Conclusion
A JavaScript object keeps related information together under one name.
Objects and arrays are the two structures almost every program is built from.
Understanding properties is the basis for everything else in this section.