Objects and JSON

An object groups related values under names. Each property pairs a key with a value. Use one object for a record and an array of objects for an ordered list. Parallel arrays can lose their alignment when only one is sorted or changed.

Create and read a record

const book = { title: "Dune", pages: 412, available: true };
book.title;    // "Dune"
book["title"]; // "Dune"

Property values may be arrays, objects, or functions as well as primitive values. Keys are strings or symbols; these examples use strings. String keys that are valid identifiers need no quotes. Keys containing spaces or hyphens need quotes: { "release-year": 1965 }. Numeric keys become strings, so { 1: "a" } has key "1". Object literals permit a trailing comma.

Dot access uses the literal name after the dot. Bracket access evaluates an expression:

const field = "pages";
book[field]; // 412
book.field;  // undefined

The second expression looks for a property named "field". Brackets also handle book["release-year"]. A missing property returns undefined; continuing through it, as in book.author.name, throws a TypeError when author is missing.

Change the object's contents

book.author = "Frank Herbert";
book.pages = 896;
delete book.available;

Assignment adds a missing property or replaces an existing value. Deletion removes the property itself, so "available" in book is now false. const keeps the variable attached to this object but permits changes to its contents.

For const reading = { city: "Nairobi", tempC: 24.5 };, reading.tempC += 1.5; stores 26. Then reading.humidity = 61; adds a field. With const key = "humidity";, reading[key] reads 61. A name such as tempC makes the measurement's unit visible.

Use variables in a literal

const name = "Lena";
const age = 29;
const person = { name, age };
const lang = "nl";
const greeting = { [lang]: "Hallo" };

Shorthand { name, age } means { name: name, age: age }. A computed name evaluates the expression inside square brackets: greeting has property "nl". Without those brackets, { lang: "Hallo" } would create the literal key "lang".

Checking whether a field exists is different from checking its value. An empty string, zero, or false may be a perfectly valid stored value.

Ask the right existence question

const item = { stock: 0, note: undefined };
Object.hasOwn(item, "stock"); // true
"note" in item;                // true
Boolean(item.stock);          // false

Object.hasOwn(obj, key) checks only the object's own properties. The in operator also checks inherited properties: "toString" in {} is true, while Object.hasOwn({}, "toString") is false. Older code often calls obj.hasOwnProperty(key).

A condition such as if (item.stock) tests truthiness. It cannot distinguish a missing field from a present field holding zero. The same issue applies to "", false, null, undefined, and NaN. Even a value of undefined can belong to an existing property, as note does above.

Choose keys, values, or pairs

For const scores = { Ana: 82, Ben: 74, Chen: 91 };, these functions return arrays of own enumerable string-keyed properties:

The object has no array-style length: scores.length is undefined. Object.keys(scores).length counts three properties. To total the scores, reduce the values with an initial zero. Their sum is 247 and their mean is about 82.33.

Loop with both parts available

let bestName;
let bestScore = -Infinity;
for (const [name, score] of Object.entries(scores)) {
  if (score > bestScore) {
    bestName = name;
    bestScore = score;
  }
}

The loop compares 82, 74, then 91 with the best score seen so far. It finishes with "Chen" and 91. The square-bracket pattern gives names to each pair's two parts.

A plain object is not iterable, so for...of scores throws a TypeError. Object.entries(scores) supplies an iterable array. The older for...in loop produces string keys and can include inherited enumerable properties.

Transform entries back into an object

const weightsG = { flour: 500, sugar: 250, salt: 5 };
const weightsKg = Object.fromEntries(
  Object.entries(weightsG).map(([item, g]) => [item, g / 1000])
);

entries produces pairs, map changes each value while keeping its key, and fromEntries rebuilds the record. The result is { flour: 0.5, sugar: 0.25, salt: 0.005 }; weightsG stays unchanged.

Own property order is defined. Array-index keys from "0" through "4294967294" appear first in ascending order; other string keys follow insertion order. A leading zero, as in "01", prevents a key from being an array index. Thus Object.keys({ b: 1, 2: "x", a: 2, 1: "y" }) gives ["1", "2", "b", "a"]. Use an array when positions carry meaning.

Two variables can refer to one object. Before predicting an update, decide whether the code created a new object or copied a reference to an existing one.

Trace identity separately from data

const p1 = { x: 1 };
const p2 = p1;
p2.x = 99;
p1.x;       // 99
p1 === p2;  // true

Assignment copied the reference. Both names reach the same property. Primitive assignment works differently: after let a = 5; let b = a; b = 6;, a remains 5.

Objects compare by identity with both === and ==. Two literals create separate objects even when all fields match: ({ x: 1 } === { x: 1 }) is false. To compare their data, compare the relevant properties. A matching printed appearance is not an identity check.

Passing an object into a function also copies its reference. A function that runs order.status = "shipped"; changes the caller's object. Returning { ...order, status: "shipped" } instead creates a new top-level record.

Separate const, freezing, and copying

const cart = { items: 2 }; allows cart.items = 3; but reassigning cart = {}; throws a TypeError. Object.freeze(cart) blocks changes to its own properties. In strict mode, attempts to add, remove, or overwrite them throw a TypeError.

Freezing is shallow. If a frozen record holds another object, that nested object's fields can still change. A frozen container and a deeply unchangeable structure are different things.

Follow a shallow copy

const settings = { theme: "dark", font: { size: 14 } };
const copy = { ...settings };
copy.theme = "light";
copy.font.size = 18;

Spread creates a new outer object. Its theme value is copied, so changing copy.theme leaves settings.theme as "dark". Its font value is a reference, copied into both records. Updating copy.font.size therefore makes settings.font.size equal 18 too.

Object.assign({}, settings) also makes a shallow copy. A shallow copy separates the outer record while retaining the identity of nested objects and arrays.

Copy nested data when it must be independent

const deep = structuredClone(settings);
deep.font.size = 22;
settings.font.size; // 18

structuredClone copies nested objects and arrays, along with supported values such as Map, Set, and Date. It also handles circular references. The new nested font can change independently. Functions cannot be cloned this way: an object containing a method causes a DataCloneError.

A JSON round trip, JSON.parse(JSON.stringify(obj)), copies only JSON-compatible data. It drops object properties holding undefined or functions, changes dates into strings, and loses Map and Set entries unless you convert them. Choose a clone for independent supported JavaScript data, and choose JSON when you intend to create a text representation.

Nested data combines records and lists. Read a path one step at a time, checking whether each step reaches an object, an array, or a final value.

Read and process a list inside a record

const order = {
  id: 1042,
  customer: { name: "Sara", city: "Lisbon" },
  items: [
    { product: "Tea", qty: 2, unitPrice: 4.5 },
    { product: "Mug", qty: 1, unitPrice: 9 }
  ]
};

order.customer.city reads "Lisbon". order.items[1].product first selects the items array, then its second record, then "Mug". order.items.length is 2.

The array methods you already know work with record properties. map(item => item.product) produces product names. filter(item => item.qty > 1) keeps the tea line. find(item => item.product === "Mug") returns the existing mug record, so changing that returned record changes the item in the order.

To calculate the total, use order.items.reduce((sum, item) => sum + item.qty * item.unitPrice, 0). The first line adds 9; the second adds 9 more, producing 18. Computing a total when needed prevents a separately stored total from becoming stale when items change.

Read optional data with a fallback

order.shipping?.date;                 // undefined
order.customer?.city ?? "unknown";    // "Lisbon"

Optional chaining, ?., stops when the value immediately to its left is null or undefined. A direct order.shipping.date would throw a TypeError. Use a check at each optional link in a longer path. Bracket access and calls also support it: order.items?.[0] and order.print?.().

Optional chaining is for values allowed to be missing. Required fields still need checks or errors that reveal a broken record. It cannot appear on the left of assignment: order.shipping?.date = "2026-05-01" is a syntax error.

The nullish coalescing operator, ??, uses its right side only for null or undefined. It preserves zero, false, and "". For const qty = 0;, qty ?? 1 remains zero, while qty || 1 becomes 1 because || replaces every falsy value.

Pick a useful shape

An array of records suits listing, filtering, and ordering. An object keyed by ID supports direct lookup: usersById["u23"].name. A Map is useful when lookup keys are frequently added and removed.

Newer JavaScript offers Object.groupBy, widely available since 2024:

const tasks = [
  { title: "Book flights", status: "done" },
  { title: "Pack", status: "todo" },
  { title: "Renew passport", status: "done" }
];
const grouped = Object.groupBy(tasks, task => task.status);

grouped.done holds two records and grouped.todo holds one. The result has no prototype, so it has no inherited toString method. An older alternative builds the arrays explicitly for these status keys:

const groupedOlder = tasks.reduce((groups, task) => {
  if (!Object.hasOwn(groups, task.status)) {
    groups[task.status] = [];
  }
  groups[task.status].push(task);
  return groups;
}, {});

The first record in each group creates its array. Later records append to that same array. This accumulator is an ordinary object; the newer method's result has no prototype. Use consistent names and value types across records; names such as distanceKm and tempC also keep units visible.

A method is a function-valued property called through an object. It lets an action use the record's current data.

Write a method with this

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

The shorthand increment() { ... } defines a regular function-valued property. In counter.increment(), the receiver counter becomes this. Each call reads the stored count, adds one, and returns the new number.

A bare count selects a variable, not the property. Without a matching variable, count += 1 throws ReferenceError. Use this.count to reach the receiver's field.

Read a function or run it

counter.increment reads a value of type "function". Parentheses in counter.increment() run it and give its return value. When passing an action for later use, the receiving code needs the function, not the result of executing it now.

Built-in methods use this calling shape too: Math.max(3, 7) returns 7 and "abc".toUpperCase() returns "ABC".

Reuse an action

function describe() {
  return this.name + " (" + this.year + ")";
}
const film = { name: "Up", year: 2009, describe };
const song = { name: "Hello", year: 2015, describe };

film.describe() returns "Up (2009)"; song.describe() returns "Hello (2015)". Using this lets the same function read either receiver. Hard-coding film.name would tie it to the film variable.

Return the receiver for another action

const playlist = {
  tracks: [],
  add(title) { this.tracks.push(title); return this; },
  count() { return this.tracks.length; }
};
playlist.add("Rain").add("Waves").count(); // 2

Each add returns the playlist, allowing the next method lookup on that object. Returning a number from add would break the chain because the next add would be looked up on that number.

Ordinary JSON conversion omits methods: stringifying { name: "Kit", hi() { return 1; } } writes only name. Parsing cannot restore omitted code. Records for saving or exchange often keep plain data and use separate processing functions.

For a regular function, the call determines this. Storing a function in an object does not permanently attach it to that object.

Follow the receiver at the call

const a = { n: "A", who() { return this.n; } };
const b = { n: "B" };
b.who = a.who;
a.who(); // "A"
b.who(); // "B"

Both properties hold the same function. The receiver before the dot differs, so the results differ. The function's original location does not decide which object it reads.

For a plain call, f(), strict mode supplies undefined as this. JavaScript modules always run in strict mode; a script or function can also begin with "use strict";. A non-strict regular function called plainly uses the global object, globalThis, instead. In a browser that global is window.

Recognize an arrow's surrounding context

An arrow has no this of its own. It keeps the this from the surrounding code where it was created. An object literal does not create a new this context.

// At the top level of a module:
const user = {
  name: "Ida",
  hi: () => "Hi, " + this.name
};

Calling user.hi() throws a TypeError: the arrow captured the module's top-level this, which is undefined. Changing the call to look like a method cannot give the arrow a new receiver. At the top level of a classic script, the surrounding this is the global object instead.

Use a regular method when the action needs the calling object. Use an arrow inside that method when a callback needs to keep the method's context:

const group = {
  title: "Team",
  members: ["Ana", "Ben"],
  list() {
    return this.members.map(m => this.title + ": " + m);
  }
};
group.list(); // ["Team: Ana", "Team: Ben"]

list gets group from its method call. The arrow is created inside that running method and keeps the same this. A strict regular callback without a supplied receiver would receive undefined, so this.title would fail there.

Use a decision order

When you encounter a call, first identify the function being called:

1. An arrow keeps its surrounding this; call, apply, and bind cannot replace it.
2. A bound regular function keeps its bound this, even through call or apply.
3. An unbound regular function called with call or apply uses the supplied this.
4. An ordinary obj.method() call uses obj.
5. A plain regular call uses undefined in strict mode or the global object in non-strict mode.

Callbacks can have a receiver supplied by their caller. For example, a regular DOM event listener registered with addEventListener receives the element it is registered on as this. Read how the receiving code invokes a callback before assuming it is a plain call.

Taking a method out of its object preserves the function but loses the original calling expression. A callback must be called in a way that supplies the object it needs.

Diagnose a detached method

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  }
};
const inc = counter.increment;
inc(); // TypeError in strict mode

inc() is a plain call, so this is undefined. Reading this.count fails before an increment can happen. In non-strict code, a plain call uses the global object and may write a global count instead; it does not reach the counter.

The same issue appears in array callbacks. [1, 2].map(counter.increment) supplies a function to map without its original receiver. The array values passed as arguments do not supply this.

Wrap the method call

const results = [1, 2].map(() => counter.increment());
// results is [1, 2]; counter.count is 2

The callback is an arrow that makes a normal counter.increment() call. That call has a receiver. The wrapper deliberately ignores the values passed by map; each invocation simply increments once. This form is convenient when only one use needs the callback.

Bind a reusable function

Starting with a fresh counter at zero:

const boundInc = counter.increment.bind(counter);
const results = [1, 2].map(boundInc);
// results is [1, 2]; counter.count is 2

bind returns a new function; it does not call the method yet. The new function keeps counter as its receiver. Binding it again with a different object cannot replace that receiver. Each call to bind creates a distinct function, so save the result when code must recognize the exact same callback later.

Binding can also fix leading arguments. function multiply(a, b) { return a * b; } followed by const double = multiply.bind(null, 2); makes double(21) return 42. null fills the receiver position because this function does not use this; 2 fills its first ordinary parameter.

Run once with call or apply

function describe(unit) {
  return this.value + " " + unit;
}
describe.call({ value: 12 }, "kg");    // "12 kg"
describe.apply({ value: 12 }, ["kg"]); // "12 kg"

Both forms execute immediately with the chosen receiver. call supplies arguments separately; apply supplies them in an array. An arrow's context is fixed by its surroundings, so these methods cannot replace its this.

Passing counter.increment() as a callback runs the method immediately and passes its returned number. That is not the function map needs. In an event registration such as button.addEventListener("click", counter.increment()), the counter changes immediately and the numeric listener causes a TypeError. Pass a function value, an arrow wrapper, or a stored bound function.

Object destructuring reads named fields into local variables. It selects values without copying the whole source record.

Match and rename

const book = { title: "Dune", pages: 412 };
const { pages, title: bookTitle, rating: stars = 0 } = book;

Matching uses property names, not their order. This declares pages as 412, bookTitle as "Dune", and stars as 0. It declares no title or rating variable: the name after a colon is the local target.

A missing field supplies undefined. A default replaces only undefined, preserving null, zero, false, and empty strings. const { a = 5 } = { a: null }; therefore leaves a as null.

Follow nested fields

const data = {
  location: { name: "Oslo" },
  current: { tempC: -3, windKph: 18 }
};
const {
  location: { name },
  current: { tempC, windKph: wind }
} = data;

The declared variables are name, tempC, and wind, holding "Oslo", -3, and 18. The enclosing location and current names select paths; they do not also become variables.

A missing outer object makes a nested read fail. const { shipping: { date } } = {}; throws TypeError. Supply an outer default when that field may be undefined:

const { shipping: { date } = {} } = {};
// date is undefined

This does not replace shipping when its value is null. Destructuring null or undefined directly also throws, so the source must be usable before unpacking begins.

Receive named options

function formatUser({ name, age = "unknown" }) {
  return name + ", " + age;
}

formatUser({ name: "Mo" }) returns "Mo, unknown". Reordering the fields in { age: 40, name: "Ines" } still returns "Ines, 40". Calling formatUser with no argument fails because there is no object to unpack. A whole-parameter default permits that call:

function greet({ name = "guest" } = {}) {
  return "Hi, " + name;
}
greet(); // "Hi, guest"

The outer default handles an omitted argument; the inner default handles a missing name. Passing null still fails. To assign existing variables, wrap an object-pattern statement in parentheses: let x, y; ({ x, y } = { x: 4, y: 7 });. Otherwise the initial braces are read as a statement block.

Array destructuring reads values by position from an iterable. Commas control which values are selected; the variable names do not choose positions.

Select or skip positions

const medals = ["gold", "silver", "bronze"];
const [first, second] = medals;
const [, , third] = medals;

The variables receive "gold", "silver", and "bronze". Empty slots consume values without declaring variables. A name beyond the available values receives undefined. Defaults replace only undefined:

const [p, q = 10] = [1]; // p is 1; q is 10
const [r = 10] = [null]; // r is null

Gather the remaining values

const [head, ...tail] = [1, 2, 3, 4];
// head is 1; tail is [2, 3, 4]

The final rest element makes a new array, empty when nothing remains. It must be last. Any object values inside that array keep their identities; collecting them does not deeply clone them.

Read a returned pair or swap variables

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [lo, hi] = minMax([4, 9, 1]);
// lo is 1; hi is 9

The caller follows the order agreed by the returning function. For many result fields, named object properties avoid having to remember positions.

With let x = 1, y = 2;, [x, y] = [y, x]; swaps the variables. The right-hand array is evaluated as [2, 1] before either assignment, preserving both old values without a temporary variable.

Unpack other iterables

Strings and Sets can be unpacked too: const [initial] = "Zoe"; gives "Z". Sets yield insertion-order values. Map entries are ordered pairs:

const distances = new Map([["park", 2], ["lake", 5]]);
for (const [place, distanceKm] of distances) {
  console.log(place, distanceKm);
}

The loop receives a pair, then the pattern separates its key and value. Object.entries supplies the same pair shape.

A plain object is not iterable, so const [name] = { name: "Ana" }; throws TypeError. Use curly braces to select its named field: const { name } = { name: "Ana" };. Square brackets require a sequence of values; braces select properties by name.

The three dots, ..., have two related jobs. Spread expands existing data into a value or call. Rest gathers values into a variable where a pattern or parameter declares it.

Merge in the order of priority

const defaults = { lang: "en", units: "metric", alerts: true };
const user = { lang: "pt", alerts: false };
const options = { ...defaults, ...user };
// { lang: "pt", units: "metric", alerts: false }

Object spread copies own enumerable properties. When a key appears again, the later value wins. Placing user before defaults would overwrite the user's settings. Spreading null or undefined into an object adds nothing.

Spread copies are shallow. If a nested record changes, copy that level too:

const settings = { theme: "dark", font: { size: 14, family: "serif" } };
const next = {
  ...settings,
  font: { ...settings.font, size: 18 }
};

The outer spread preserves theme. The inner spread preserves family while replacing size. settings.font.size stays 14 because the changed nested record is new.

Replace one record in a list

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

map makes a new array. The matching item becomes a new object, so updated[1].done is true while todos[1].done stays false. The unchanged first item is reused: updated[0] === todos[0] is true. Independent updates do not require copying unchanged records.

Expand iterable values

In an array literal or function call, spread takes values from an iterable. [...a, ...b] joins their values into a new array. Math.max(...[4, 9, 1]) passes three arguments and returns 9. A plain object cannot be expanded into an array: [...{ a: 1 }] throws a TypeError. Object spread and iterable spread use different rules for what they read.

Gather arguments or remaining properties

function total(...nums) {
  return nums.reduce((sum, n) => sum + n, 0);
}
total(2, 3, 5); // 10
total();        // 0

A rest parameter receives a real array, even when it receives no values. It must be the final parameter, and there can be only one. The older arguments object is not a real array. Arrows have no own arguments, though they can read an enclosing regular function's binding.

Object rest collects own enumerable properties not already selected:

const userRecord = { id: 8, name: "Rae", password: "x9!k" };
const { password, ...publicUser } = userRecord;
// publicUser is { id: 8, name: "Rae" }

This creates a new record and leaves the source unchanged. The rest property must be last. Look at placement to distinguish the jobs: three dots in a literal or call spread outward; three dots in a parameter list or destructuring target gather inward.

A Map stores associations between keys and values. Unlike a plain object's string keys, a Map key can be a number, an object, or another value without being converted into a string.

Create and maintain entries

const stock = new Map();
stock.set("apples", 12).set("pears", 7);
stock.get("apples"); // 12
stock.has("kiwis");  // false
stock.size;           // 2

set adds an entry or replaces its value and returns the Map for chaining. get returns undefined for a missing key; use has to distinguish that from an entry storing undefined. delete(key) returns whether it removed an entry, and clear() empties the collection.

Bracket notation is a different storage area: stock["plums"] = 5; adds an ordinary property to the Map object. It does not create an entry visible to get, has, or size. Use the Map methods for entries.

Keep key types and identities

m.set(1, "number"); m.set("1", "text"); creates two entries. Plain object keys 1 and "1" would refer to one property. Map keys compare like ===, except NaN matches itself and signed zeros share a key.

const person = { id: 1 };
const notes = new Map([[person, "ready"]]);
notes.get(person);      // "ready"
notes.get({ id: 1 });   // undefined

The second lookup creates a new object. Matching fields do not make it the same key. Keep and reuse the original object reference when using an object as a key.

Iterate and convert pairs

for (const [name, count] of stock) {
  console.log(name, count);
}

A Map yields [key, value] pairs in first-insertion order. Replacing a value does not move its key. keys(), values(), and entries() return iterable views you can loop over or spread into arrays. forEach passes its callback the value first, then the key.

new Map(Object.entries(obj)) turns a record's entries into a Map. Object.fromEntries(map) creates an object; use it when keys are strings, because object keys cannot preserve every Map key type. [...map] creates an array of pairs, useful for saving a Map's entries as JSON.

Count changing keys

const words = "the cat saw the dog and the bird".split(" ");
const counts = new Map();
for (const word of words) {
  counts.set(word, (counts.get(word) ?? 0) + 1);
}

The first occurrence starts at zero, then adds one. Later occurrences read and increase the stored count. counts.get("the") is 3 and counts.size is 6: the size counts distinct words, not all eight occurrences.

Choose a plain object for a record with known fields, especially JSON-friendly data. Choose a Map for changing keys, frequent size checks, or keys with types that must be preserved. Newer Map.groupBy preserves group-key types:

const owner = { name: "Ari" };
const jobs = [{ owner, done: false }, { owner, done: true }];
const byOwner = Map.groupBy(jobs, job => job.owner);
byOwner.get(owner).length; // 2

In older code, loop over jobs. For each owner, use has and set to create a group array once, then get(owner).push(job) to add the record. Keeping owner as an object key distinguishes different owners even when their name fields match. A WeakMap can attach metadata to objects without keeping otherwise unreachable key objects alive. It has no iteration or size. Modern WeakMaps also accept non-registered symbols as keys.

A Set stores unique values. Its main questions are whether a value is present and how two collections overlap.

Add and test values

const tags = new Set(["js", "css", "js"]);
tags.size;       // 2
tags.add("html");
tags.has("css"); // true

Adding an existing value changes nothing. add returns the Set for chaining. delete(value) returns whether the value was removed, while clear() removes all values. The constructor takes one iterable: use new Set([1, 2, 3]). new Set(1, 2, 3) throws a TypeError because its first input is not iterable. A string is iterable, so new Set("hello") contains "h", "e", "l", and "o".

A Set has no indexed positions. tags[0] is undefined. Loop with for...of, call forEach, or convert to an array for operations such as map and filter. Iteration follows insertion order; removing a value and adding it again places it at the end.

Remove duplicates without sorting

const unique = [...new Set([3, 1, 3, 2, 1])];
// [3, 1, 2]

The Set keeps the first occurrence of each value. Spreading yields those values into an array. Array.from(set) does the same conversion.

Values compare like ===, except NaN matches itself; signed zeros count as one value. Object values compare by identity: new Set([{ id: 1 }, { id: 1 }]).size is 2. To keep one record per ID, build a Map keyed by that ID, then read its values. Later records with the same ID replace earlier records, because set updates an existing entry.

For repeated membership tests in large collections, a Set avoids the one-by-one scan of an array's includes. Use it when presence matters more than position.

Compare two collections

Newer Set methods are available across major browsers from 2024. With a holding 1, 2, 3, 4 and b holding 3, 4, 5:

These return new Sets. isSubsetOf checks that every value is in the other collection. isSupersetOf checks the reverse containment. isDisjointFrom checks that the collections share no values. All three return booleans. For example, new Set([3, 4]).isSubsetOf(a) is true. Difference has a direction: values in b but not a would be only 5.

In an older environment, an intersection can be written as new Set([...a].filter(x => b.has(x))).

Ordinary JSON.stringify(set) produces "{}", losing the stored values. Convert to an array before writing JSON, then use new Set(parsedArray) when reading. A WeakSet can mark objects as processed without keeping otherwise unreachable objects alive. It cannot be iterated. Modern WeakSets also accept non-registered symbols.

JSON, short for JavaScript Object Notation, is a language-independent text format for structured data. An object is a live JavaScript value; JSON is text that can describe such a value.

Recognize the six value kinds

JSON supports objects, arrays, strings, numbers, booleans, and null. Any of these can be the top-level value. The text 42 is valid JSON even without braces. JSON has no representation for functions, undefined, dates as a distinct type, Map, Set, NaN, or Infinity.

{
  "name": "Amara",
  "age": 34,
  "languages": ["en", "yo"],
  "address": null,
  "member": true
}

The same structural ideas appear in JavaScript literals, but the allowed spelling is stricter. JSON is used in configurations and data exchange. Interchanged JSON uses UTF-8 encoding and the media type application/json; JSON files use the .json extension.

Apply the syntax rules

Every object key must be a string in double quotes. Strings also require double quotes. Commas separate properties or array items, but no comma may follow the last one. Comments are forbidden. Whitespace between values and punctuation is allowed.

Numbers use decimal notation. 1.5e3, -0.25, and 0 are valid. 07, +1, and 0x1F are invalid because JSON forbids leading zeros, a leading plus, and hexadecimal notation.

Escape characters inside strings

Use \" for a double quote, \\ for a backslash, \n for a newline, and \t for a tab inside a JSON string. A raw line break cannot appear inside a JSON string. Let JSON.stringify generate escapes from actual string values so embedded quotes cannot break the output.

A Unicode escape consists of a backslash, the letter u, and four hexadecimal digits for one UTF-16 code unit. For example, \u00e9 represents é. A character beyond that range may need two such escapes; it can also be written directly in the string. The quotes around JSON text in JavaScript source are a separate layer from the quotes inside the JSON itself.

Preserve identifiers and avoid duplicate keys

JavaScript numbers preserve every integer in the safe range from -9007199254740991 through 9007199254740991. Outside that range some integers remain exact and others round. Parsing '{"id":9007199254740993}' gives an id value of 9007199254740992. Store long identifiers as JSON strings when their exact digits matter.

Object keys should be unique within each JSON object. JavaScript's JSON.parse keeps the last occurrence when a key repeats: parsing '{"a":1,"a":2}' produces { a: 2 }. Distinct properties cannot be recovered from that repeated name.

JSON.stringify converts supported JavaScript values into JSON text. Decide what the text must preserve before converting a record with methods or collection values.

Write compact or indented text

const person = { name: "Amara", age: 34, tags: ["admin"] };
const text = JSON.stringify(person);
// '{"name":"Amara","age":34,"tags":["admin"]}'

The result is a string, so typeof text is "string". Own enumerable string-keyed properties are written in Object.keys order. JSON.stringify(person, null, 2) adds line breaks and two spaces of indentation per level. The second argument is null because no replacer is being used. Numeric indentation is capped at 10 spaces; a string used for indentation is limited to its first 10 characters.

Predict dropped and changed values

const data = {
  a: undefined,
  b: () => 1,
  c: NaN,
  d: [undefined, Infinity]
};
JSON.stringify(data); // '{"c":null,"d":[null,null]}'

An object property holding undefined, a function, or a symbol is omitted. In an array, such a value becomes null, preserving that position. NaN and Infinity become null in either place. At the top level, unsupported values such as undefined or a function make stringify return undefined, not JSON text.

A Date writes its ISO UTC string through toJSON. Ordinary Map and Set entries are not written, so either collection becomes {}. Convert Set values to an array, and Map entries to pairs or a string-keyed object, before writing them.

A circular reference and an ordinary BigInt such as 10n cause a TypeError. Shared references that do not form a cycle can be serialized, but JSON will not preserve their shared identity.

Choose data with a replacer

const user = { name: "Rae", email: "rae@example.com", password: "x9!k", age: 31 };
JSON.stringify(user, ["name", "email"]);
// '{"name":"Rae","email":"rae@example.com"}'

A replacer array selects property names. A replacer function transforms values as they are visited, beginning with the whole input under the key "":

JSON.stringify(user, (key, value) =>
  key === "password" ? undefined : value
);

Returning undefined omits an object property, makes an array position null, or causes an overall undefined result when returned for the root. Return the unchanged value for data you want to keep.

An object's toJSON() method can choose its representation. For { celsius: 21, toJSON() { return { c: this.celsius }; } }, stringification writes '{"c":21}'.

Do not build JSON by joining quoted strings yourself: embedded quotes or newlines can break its syntax. Do not stringify already serialized text expecting an object representation either. Stringifying '{"a":1}' encodes a string; parsing that result once returns a string, not an object.

JSON.parse reads JSON text and returns the value it describes. Parsing checks text syntax; checking whether the result fits your program is a separate task.

Read the value, then inspect its fields

const data = JSON.parse('{"city":"Lima","tempC":19.5}');
data.tempC + 1; // 20.5

The outer single quotes delimit a JavaScript string. The double quotes inside it belong to JSON. Parsing creates a plain object with a numeric tempC property. A text describing an array produces an array; primitive JSON texts produce their matching primitive values.

Data that is already an object needs no parse step. JSON.parse({ a: 1 }) first converts that argument to "[object Object]", then throws a SyntaxError. JSON.parse(undefined) also fails because "undefined" is not valid JSON text.

Handle invalid text

function safeParse(text, fallback) {
  try {
    return JSON.parse(text);
  } catch (error) {
    return fallback;
  }
}
safeParse("{ok:true}", null); // null

Malformed input, including an empty string, single-quoted JSON strings, unquoted keys, and trailing commas, throws a SyntaxError. Catching that failure gives the program a deliberate fallback instead of stopping it. A successfully parsed null is also possible, so choose how the caller will distinguish a fallback from valid data when that difference matters.

Restore selected values with a reviver

A date stored as text returns as a string. An array of key-value pairs remains an array until new Map(pairs) turns it into a Map. Functions omitted during writing cannot be recovered from the remaining text.

const text = '{"title":"Dentist","due":"2026-03-01T09:00:00.000Z"}';
const event = JSON.parse(text, (key, value) =>
  key === "due" ? new Date(value) : value
);

The reviver visits inner values before their containers, ending with the whole result under key "". Returning a value replaces the current value. Returning undefined removes that property; returning it for the root makes the entire parse result undefined. Forgetting return value for other keys can therefore erase the data you meant to keep.

Check shape and plan a round trip

Valid JSON can still have the wrong types. Parsing '{"temp":"19"}' leaves a string, so data.temp + 1 would concatenate to "191". Check required fields and types, such as typeof data?.temp === "number", before calculating. Convert with Number only when the intended format permits a numeric string; optional chaining and ?? can handle fields that may be absent.

For const settings = { theme: "dark", volume: 0.8, recent: ["a.txt"] };, stringification produces 48 characters of JSON text. Parsing it restores the same field data, but loaded === settings is false because parsing creates new objects. A Date returns as a string, an undefined-valued object property disappears, and an unconverted Set returns as {}. Convert special values before writing and restore their intended types after reading.