JavaScript Objects

Named values in one box

A variable holds one value. An object holds several, each under a name called a key or a property. A person has a name, a city, and an age. Those three belong together, so they live on one object instead of three loose variables.

Write an object in curly braces. Each property is key: value, separated by commas.

Create an object

Keys that are valid identifiers do not need quotes. Values can be strings, numbers, booleans, arrays, other objects, or functions. A trailing comma after the last property is allowed.

const person = {
  name: "Mina",
  city: "Lisbon",
  age: 28,
};

console.log(person);
console.log(typeof person);

Dot notation

person.name reads the name property. person.city readscity. Dots are the default: short, readable, and what you will type most of the time.

const person = {
  name: "Mina",
  city: "Lisbon",
  age: 28,
};

console.log(person.name);
console.log(person.city);
console.log(person.name + " lives in " + person.city);

person.age = 29;
console.log(person.age);

Reading a key that does not exist returns undefined, not an error.person.country is undefined until you add that property.

Bracket notation

person["name"] is the same property as person.name. Brackets take a string. Use them when the key is in a variable, when the key has a space, or when the key is not a valid identifier.

const person = {
  name: "Mina",
  city: "Lisbon",
  "zip code": "1000-001",
};

console.log(person["name"]);
console.log(person["zip code"]);

const key = "city";
console.log(person[key]);

person[key] uses the string currently stored in key. If key is"city", that line is person["city"]. Dot notation cannot do that:person.key would look for a property literally named key.

Add, change, and remove

Assignment on a property writes it. If the key already exists, the value is replaced. If it does not, the key is created. delete person.city removes a key. const on the object prevents rebinding the name person; it does not freeze the properties. You can still changeperson.name.

const person = { name: "Mina" };
person.city = "Lisbon";
person.name = "Mina Costa";
console.log(person);

delete person.city;
console.log(person);
console.log(person.city);

Nested objects and methods

A property can be another object. Read it with a chain of dots: person.address.city. A property can also be a function. A function stored on an object is a method. Call it withperson.greet().

Inside a method written as greet() { ... }, this refers to the object. This tutorial uses this lightly: return "Hello, " + this.name reads the name of whichever object you called the method on.

Objects vs primitives

Strings, numbers, and booleans are copied by value. Objects are copied by reference. Afterconst copy = person;, both names point at the same object. Changing copy.namechanges person.name. To copy the properties into a new object, useconst copy = { ...person }; (a shallow copy: nested objects are still shared).

typeof person is "object". So is typeof null andtypeof []. For a plain object vs an array, use Array.isArray. For “is this nothing?”, use value === null or value == null (the latter also catchesundefined).

Next: events — clicks, submit, input, and load, and the handler that runs when they fire.