5.1 basic notions

You already saw earlier in the course that objects in JavaScript are collections of key/value pairs. When several variables are strongly related, it is much better to wrap them inside an object instead of leaving them loose. Imagine an application that draws different shapes — circles, rectangles, and so on. For a circle you might be tempted to write: 

let radius = 1;
let x = 0;
let y = 0;

All these variables describe the same circle, so they belong together. A better design is to put them inside one circle object using the object literal syntax: 

const circle = {
  radius: 1,
  location: { x: 0, y: 0 },
  isVisible: true,
  draw() {
    console.log("draw");
  }
};

Each value can be any JavaScript type: number, string, boolean, null, undefined, another object, an array, or a function. Notice that location is itself an object with two properties, and draw is a function. Objects are not only meant to group data; they also group the operations that act on that data, like drawing or moving the circle.

From functions to methods

  • A function that lives outside any object is just called a function.
  • A function that lives inside an object is called a method — so circle.draw() is the draw method of the circle object.

Calling circle.draw() with dot notation prints our message on the console. This style — where a program is a collection of objects that send messages to each other — is called object-oriented programming, often shortened to OOP. The object literal syntax is great for one-off objects, but as applications grow we need better ways to create many similar objects, and that is what the next lessons explore.

Summary

This lesson covers the fundamental concepts of JavaScript objects and object-oriented programming. You'll learn how to group related variables and functions together using object literal syntax, organize data into key-value pairs, nest objects within objects, and distinguish between functions and methods. The lesson demonstrates how OOP allows you to encapsulate properties and behaviors within a single object, making code more organized and reusable.

Key points

  • Objects are collections of related key-value pairs that group correlated variables and functions together
  • Object values can be any JavaScript type: numbers, strings, booleans, null, undefined, other objects, arrays, or functions
  • Methods are functions that belong to an object; accessed using dot notation (e.g., circle.draw())
  • Object-Oriented Programming (OOP) structures code as a collection of communicating objects rather than independent functions and variables
  • Nested objects can be created by assigning object properties to other objects (e.g., circle.location = {x: 10, y: 20})
  • Object literal syntax uses curly braces {} and defines properties as key-value pairs separated by colons

FAQ

What is the difference between a function and a method?

A method is a function that belongs to an object. When a function is part of an object, it is called a method. Methods are accessed using dot notation, such as object.methodName().

What types of values can an object property hold?

Object properties can hold any JavaScript data type: numbers, strings, booleans, null, undefined, other objects, arrays, or even functions.

Why should we group related variables into objects instead of declaring them separately?

Grouping related variables and functions into objects makes code more organized, easier to maintain, and allows you to pass all related data as a single unit throughout your program instead of managing multiple independent variables.