Objects: the key-value map

An object in JS is an unordered collection of key → value pairs. Keys are strings (or Symbol), values are anything: numbers, strings, arrays, other objects, functions. It's the most-used data structure in the language: every "record" in your domain will typically be an object.

const utente = {
  nome: 'Anna',
  eta: 28,
  attivo: true,
  ruoli: ['admin', 'editor'],
};

Reading properties: dot vs bracket

There are two equivalent notations:

utente.nome; // 'Anna'    (dot — the normal form)
utente['nome']; // 'Anna'    (bracket — equivalent)

// Brackets are MANDATORY when:
// 1) the key is not a valid identifier
const tag = { 'codice-fiscale': 'ABC123' };
tag['codice-fiscale']; // OK
// tag.codice-fiscale;      // syntax error

// 2) the key is computed (variable/expression)
const campo = 'eta';
utente[campo]; // 28

A missing property returns undefined, without errors:

utente.telefono; // undefined

Adding, modifying, removing

const u = { nome: 'Anna' };
u.eta = 28; // adds
u.nome = 'Anna B.'; // modifies
delete u.eta; // removes the property

delete is a keyword. It will turn out to be a rare use case: most of the time you'll want to produce a new object without that key (we'll see this with spread).

Shorthand: keys named like the variable

When the key name matches the variable name, you can omit the duplication:

const nome = 'Anna';
const eta = 28;

const u1 = { nome: nome, eta: eta }; // explicit form
const u2 = { nome, eta }; // shorthand, equivalent

Checking the presence of a property

Three options, in order of preference:

'nome' in utente; // true   ← in operator
utente.nome !== undefined; // true   ← works almost always
Object.hasOwn(utente, 'nome'); // true   ← modern, safe

Try it

Exercise#js.m3.l2.e1

Attempts: 0Loading…

Create the object user = { name: 'Sara', age: 22 }, then add the 'active' property set to true and return the object as the last expression.

Loading editor…

Show hint

You can add properties after the fact with dot notation.

Solution available after 3 attempts

Review exercise

Exercise#js.m3.l2.e2