Objects in JavaScript

Finally, let's combine our loose transaction variables from chapter 4 into a real object – the data structure our budget app works with consistently from here on.

Creating object literals

const transaction = {
  description: 'January salary',
  amount: 2400,
  category: 'Salary',
  date: '2026-01-31',
};

console.log(transaction.amount);       // 2400 - dot notation
console.log(transaction['amount']);    // 2400 - bracket notation, identical

Bracket notation is needed when the property name comes from a VARIABLE or contains characters invalid in an identifier:

const field = 'amount';
console.log(transaction[field]); // 2400 - dot notation wouldn't work here (transaction.field would be wrong)

Changing, adding, removing properties

const transaction = { description: 'January salary', amount: 2400 };

transaction.amount = 2500;       // change
transaction.note = 'Bonus included'; // add a new property
delete transaction.note;        // remove a property

console.log(transaction); // { description: 'January salary', amount: 2500 }

Shorthand notation for properties and methods

const description = 'February rent';
const amount = -850;

// Verbose:
const transactionA = { description: description, amount: amount };

// Shorthand, when variable name === property name:
const transactionB = { description, amount };

console.log(transactionA);
console.log(transactionB); // identical result

const budgetApp = {
  transactions: [],

  // Method shorthand instead of 'add: function (t) { ... }'
  add(transaction) {
    this.transactions.push(transaction);
  },
};

Nested objects

const transaction = {
  description: 'February rent',
  amount: -850,
  category: {
    name: 'Housing',
    icon: '????',
  },
};

console.log(transaction.category.name); // 'Housing'

Useful Object. methods

const transaction = { description: 'Salary', amount: 2400 };

console.log(Object.keys(transaction));   // ['description', 'amount']
console.log(Object.values(transaction)); // ['Salary', 2400]
console.log(Object.entries(transaction)); // [['description', 'Salary'], ['amount', 2400]]

for (const [key, value] of Object.entries(transaction)) {
  console.log(`${key}: ${value}`);
}

Tipp: Object.entries() combined with for...of is the usual, clean way to iterate an object – clearly preferable to for...in from chapter 7, which (less problematic for objects than for arrays, though) also includes inherited properties.

Objects are compared by reference

const a = { amount: 100 };
const b = { amount: 100 };
const c = a;

console.log(a === b); // false - TWO different objects in memory, despite identical content
console.log(a === c); // true  - c points to the SAME object as a

Achtung: This is one of the most common JavaScript surprises for beginners: === on objects (and arrays) compares the memory REFERENCE, not the content. Two objects with identical content are NEVER ===-equal, unless they are the same reference.

The budget app's first real transaction list

Now let's replace the plain number arrays from chapters 10/11 with real objects – from here on, this is the central data structure the rest of this tutorial works with:

src/index.js

const transactions = [
  { description: 'January salary', amount: 2400, category: 'Salary', date: '2026-01-31' },
  { description: 'January rent', amount: -850, category: 'Rent', date: '2026-01-01' },
  { description: 'Weekly groceries', amount: -60, category: 'Groceries', date: '2026-01-05' },
  { description: 'Movies', amount: -18, category: 'Leisure', date: '2026-01-12' },
];

const balance = transactions.reduce((sum, t) => sum + t.amount, 0);
console.log(`Balance: ${balance} EUR`); // Balance: 1472 EUR

for (const t of transactions) {
  console.log(`${t.date} | ${t.category.padEnd(12)} | ${t.amount} EUR | ${t.description}`);
}