JavaScript · 2 min read

Objects and JSON

Group related data into objects, add methods, destructure values, and convert data to and from JSON.

An object groups related data as key: value pairs, called properties.

const student = {
  name: "Ada",
  age: 36,
  tracks: ["HTML", "CSS"],
  isPremium: false,
};

Reading and changing properties

student.name;          // "Ada"       (dot notation)
student["age"];        // 36          (bracket notation)
 
const key = "tracks";
student[key];          // ["HTML", "CSS"]  (brackets work with variables)
 
student.age = 37;               // update
student.country = "UK";         // add a new property
delete student.isPremium;       // remove a property
"name" in student;              // true

Methods

A function stored in an object is called a method. Inside it, this refers to the object:

const counter = {
  count: 0,
  increment() {
    this.count++;
    return this.count;
  },
};
 
counter.increment(); // 1
counter.increment(); // 2

Looping over objects

const scores = { html: 90, css: 75, js: 60 };
 
Object.keys(scores);    // ["html", "css", "js"]
Object.values(scores);  // [90, 75, 60]
 
for (const [track, score] of Object.entries(scores)) {
  console.log(track + ": " + score);
}

Destructuring and spread

Destructuring pulls values out into variables. Spread (...) copies properties.

const user = { name: "Grace", role: "admiral", city: "NYC" };
 
const { name, role } = user;        // name = "Grace", role = "admiral"
 
const updated = { ...user, city: "Arlington" }; // copy with one change
 
const [first, second] = ["gold", "silver", "bronze"]; // arrays too

Arrays of objects

Real data is often a list of objects. Combine this with array methods:

const courses = [
  { title: "HTML", lessons: 8, done: true },
  { title: "CSS", lessons: 8, done: false },
  { title: "JS", lessons: 8, done: false },
];
 
const unfinished = courses.filter((c) => !c.done).map((c) => c.title);
// ["CSS", "JS"]

JSON

JSON (JavaScript Object Notation) is a text format for data, used by almost every web API. It looks like a JavaScript object, but keys must be in double quotes and it cannot contain functions.

json

{
  "name": "Ada",
  "age": 36,
  "tracks": ["HTML", "CSS"]
}

Convert between objects and JSON text:

const text = JSON.stringify(student);   // object → JSON string
const back = JSON.parse(text);          // JSON string → object

Try it: a profile card from data

<div id="card"></div>
<button id="level">Level up</button>
<pre id="json"></pre>

Edit this example in the Playground.

Open in Playground

Notice that JSON.stringify skips the describe method: JSON cannot store functions.

Summary

Objects store data as key: value properties; read them with dot or bracket notation.
Methods are functions inside objects; this refers to the object.
Destructuring and spread make copying and extracting values easy.
JSON is the text format for data; use JSON.stringify and JSON.parse.

Open in Playground

Saved in this browser.

Arrays and Loops The DOM and Events