3. Objects: things with named parts

Values that belong together

A particle in a game has a position and a velocity: four numbers. You could keep them in an array, [3, 4, 1, 2], but then you have to remember that slot 2 means “horizontal speed”. Six months later, nobody remembers.

const p = { x: 3, y: 4, vx: 1, vy: 2 };

console.log(p.x);   // 3
console.log(p.vx);  // 1

Curly braces with key: value pairs make an object. A dot followed by a name reads one property.

Change it, grow it

Properties can be changed and added at any time:

const p = { x: 3, y: 4 };
p.x = 10;           // change
p.color = 'red';    // add a new one

console.log(p);
// { x: 10, y: 4, color: 'red' }
console.log(p.size); // undefined

Reading a property that doesn’t exist gives undefined, just like reading past the end of an array.

Brackets: when the name is in a variable

Sometimes you don’t know which property you want until the program runs. Maybe the user picks “x” or “y”. Dot access needs the name written literally in the code, so there’s a second way:

const p = { x: 3, y: 4 };
const key = 'y';

console.log(p['x']);  // 3
console.log(p[key]);  // 4  (looks up 'y')
console.log(p.key);   // undefined!

That last line is a classic bug. p.key means “the property literally named key”, and there isn’t one. p[key] means “evaluate the variable key first, then look up whatever string it holds”.

const p = { x: 3, y: 4 };
p.x = 10;
p.color = 'red';
console.log(p);

const key = 'y';
console.log(p[key]);
console.log(p.key);
console.log(p.size);

Arrays of objects

Now combine this chapter with the last one. A game doesn’t have one particle, it has thousands. So you put them in an array:

const particles = [
  { x: 0, y: 0, vx: 1, vy: 2 },
  { x: 5, y: 5, vx: -1, vy: 0 },
  { x: 9, y: 1, vx: 0, vy: 3 },
];

for (let i = 0; i < particles.length; i++) {
  const p = particles[i];
  p.x = p.x + p.vx;
  p.y = p.y + p.vy;
}

particles[i] is an object, so particles[i].x (or p.x after const p = particles[i]) reaches inside it. This is the most natural way to write it, and it has a name you’ll see all through this book: an array of structs, or AoS. (“Struct” is the old C word for a record with named fields.)

Here’s the question this book is built around. The loop above only touches x, y, vx and vy. What if each particle also had a mass, a color, a name and a health, none of which the loop needs? Is it a problem that they’re all packed in alongside?

Turn the picture sideways. Instead of one object per particle, keep one array per property: all the x values together, then all the y values, and so on. That is a struct of arrays, or SoA:

Same data, different arrangement. In Part II you’ll learn why the arrangement can make a loop several times faster or slower, and you’ll measure it yourself. Researchers have even built JavaScript runtimes that switch an array of objects to columns automatically while the program runs^[3]. Viscosity’s job will be to make that choice, safely, for you.

Your turn

function centerX(ps) {
  // your code here
}

const ps = [
  { x: 2 },
  { x: 4 },
  { x: 9 },
];
console.log(centerX(ps));

function step(ps) {
  // your code here
}

const ps = [
  { x: 0, y: 0, vx: 1, vy: 2 },
];
step(ps);
console.log(ps[0]);

What you learned

• An object stores properties: named keys with values.
• obj.key is dot access. obj[expr] is bracket access, which computes the key at run time.
• Missing properties read as undefined. New ones can be added at any time.
• An array of objects is the array of structs (AoS) layout: each slot holds a whole record. A struct of arrays (SoA) keeps one array per property instead.

Next comes the chapter that explains what a variable really holds when it holds an object. It’s the key to the hardest problem Viscosity has to solve.