Object literals

Object literals are a fundamental concept in object-oriented programming with JavaScript. They allow you to represent data and behavior in a structured and intuitive way, using key-value pairs to define the properties and methods of an object. This approach makes objects self-contained and reusable, enabling developers to model real-world entities in code.

ℹ️

Object literals are unique to JavaScript, setting it apart from many other programming languages. With their concise { key: value } syntax, developers can directly define objects without needing a separate class.

For example, in the JavaScript code snippet below, the spaceSound object is defined as an object literal. Its properties (such as name and sound) and methods (such as play, stop, and display) are declared as key-value pairs. This demonstrates how object literals encapsulate both state and behavior in one cohesive unit.

(mouse press toggles the sound; key press stops it)

code

// Declare the "spaceSound" object literal
let spaceSound;

function preload() {
  // Load the sound file for the "spaceSound" object
  const sound = loadSound('/sounds/space.wav');
  // Define the "spaceSound" object as an object literal
  spaceSound = {
    name: 'space',
    sound: sound,
    getName: function() {
      return this.name;
    },
    play: function() {
      this.sound.play();
    },
    stop: function() {
      this.sound.stop();
    },
    toggle: function() {
      this.sound.isPlaying() ? this.sound.stop() : this.sound.play();
    },
    display: function(cellLength, outline, outlineWeight) {
      push();
      noFill();
      stroke(outline);
      strokeWeight(outlineWeight);
      ellipseMode(CENTER);
      circle(width / 2, height / 2, cellLength);
      pop();
    }
  };
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  // Display the "spaceSound" object using dot notation
  spaceSound.display(400, 'red', 3);
  // Display the name of the "spaceSound" object using dot notation
  fill(255);
  noStroke();
  textAlign(CENTER, CENTER);
  textSize(24);
  text(spaceSound.getName(), width / 2, height / 2);
}

function mousePressed() {
  // Toggle the sound playback of the "spaceSound" object using dot notation
  spaceSound.toggle();
}

function keyPressed() {
  // Stop the sound playback of the "spaceSound" object using dot notation
  spaceSound.stop();
}

Properties

The spaceSound object uses the {key: value} syntax to define the following properties:

spaceSound = {
  name: 'space', // The name of the object (Type: String)
  sound: sound,  // The sound file associated with the object (Type: p5.SoundFile)
  // Method definitions follow here
};

Methods

The spaceSound object also defines methods using the {key: value} syntax, where each method is a key with its value set to a function:

spaceSound = {
  // Properties omitted for clarity
  getName: function() {
    return this.name; // Returns the name of the object
  },
  play: function() {
    this.sound.play(); // Plays the associated sound file
  },
  stop: function() {
    this.sound.stop(); // Stops the sound file if it is playing
  },
  toggle: function() {
    // Toggles the sound: stops it if playing, or plays it if stopped
    this.sound.isPlaying() ? this.sound.stop() : this.sound.play();
  },
  display: function(cellLength, outline, outlineWeight) {
    // Draws a visual representation of the object on the canvas
    // Allows specifying the cell's size, outline color, and outline thickness
    push();
    noFill();
    stroke(outline);
    strokeWeight(outlineWeight);
    ellipseMode(CENTER);
    circle(width / 2, height / 2, cellLength);
    pop();
  }
};

Shorthand Syntax

In JavaScript, object literal methods can also be defined using shorthand syntax for brevity. For example:

spaceSound = {
  // Properties omitted for clarity
  getName() {
    return this.name;
  },
  play() {
    this.sound.play();
  },
  stop() {
    this.sound.stop();
  },
  toggle() {
    this.sound.isPlaying() ? this.sound.stop() : this.sound.play();
  },
  display(cellLength, outline, outlineWeight) {
    push();
    noFill();
    stroke(outline);
    strokeWeight(outlineWeight);
    ellipseMode(CENTER);
    circle(width / 2, height / 2, cellLength);
    pop();
  }
};

Both approaches are valid and interchangeable. The {key: value} syntax shown earlier highlights how object methods are stored as function values within the object.

ℹ️

The shorthand syntax is the only valid method syntax when defining methods inside a class.

Default Parameters

Methods in JavaScript can have default parameter values. For example, the display method can be defined with a default value for outlineWeight as follows:

// The method's body remains unchanged
display(cellLength, outline, outlineWeight = 3)

To use the default value for outlineWeight, simply omit it when calling the method:

spaceSound.display(400, 'red'); // outlineWeight defaults to 3

If you specify a value, it will override the default:

spaceSound.display(400, 'blue', 5); // outlineWeight is set to 5

ℹ️

Default parameters must come last in the parameter list. Otherwise, you need to pass undefined for preceding arguments to use later defaults.

Accessing Properties and Methods

To use an object, you can access its properties and methods using dot notation (object.property or object.method()) or square bracket notation (object['property'] or object['method']()).

Examples

// Accessing a property
console.log(spaceSound.name); // Output: 'space'
console.log(spaceSound['name']); // Output: 'space'

// Accessing a method
spaceSound.play(); // Plays the sound
spaceSound['play'](); // Plays the sound

ℹ️

Dot notation is more concise and commonly used, while square bracket notation is helpful when dealing with numeric or dynamic keys, or keys with special characters.

Drawing

The draw function is responsible for updating the canvas and visually representing the spaceSound object. It showcases how to use object methods like display and getName to render graphics and text dynamically.

function draw() {
  background(0); // Clear the canvas with a black background
  // Display the "spaceSound" object using the display method and dot notation
  spaceSound.display(400, 'red', 3);  
  // Display the name of the "spaceSound" object at the center of the canvas
  // using the getName method
  fill(255); // Set text color to white
  noStroke(); // Remove any outlines
  textAlign(CENTER, CENTER); // Center-align the text
  textSize(24); // Set the text size
  text(spaceSound.getName(), width / 2, height / 2);
}

ℹ️

Highlights

Visual Representation: The display method of the spaceSound object draws a red circular outline representing the object.
Dynamic Text: The getName method retrieves the object’s name, which is displayed as text in the center of the canvas.

This demonstrates how objects and their methods can be used to dynamically generate and update visual elements in a program.

Interaction

Interaction with the spaceSound object is managed through mouse and keyboard events, demonstrating how object methods can be used dynamically in response to user input.

Mouse Interaction:
Clicking the mouse triggers the toggle method of the spaceSound object, toggling its sound playback.

function mousePressed() {
  // Toggle the sound playback of the "spaceSound" object using dot notation
  spaceSound.toggle();
}

Keyboard Interaction:
Pressing any key stops the sound of the spaceSound object by calling its stop method.

function keyPressed() {
  // Stop the sound playback of the "spaceSound" object using dot notation
  spaceSound.stop();
}

These examples illustrate how objects (spaceSound) and their methods can be directly invoked in response to user input, making the application interactive and responsive.

Further Exploration

Create Additional Sound Objects: Define new sound objects similar to spaceSound, each with its own name, sound, and display behavior. Experiment with interactions between these objects or trigger unique events.
Implement Additional Behaviors: Add new methods, such as fadeOut() to lower volume gradually or restart() to replay the sound from the beginning.
Use Object Accessors: Refactor the name property to include getters and setters for input validation or dynamic formatting.
Create Alternative Displays: Implement new display methods to visualize objects differently—e.g., rectangles, lines, or animations that react to sound amplitude or user interactions.

References

p5.js API

createCanvas — Creates a drawing canvas on which all the 2D and 3D visuals are rendered in p5.js.
push — Saves the current drawing state (e.g., styles, transformations) to the stack.
pop — Restores the most recently saved drawing state from the stack.
noFill — Disables filling geometry shapes with color.
fill — Sets the fill color for shapes drawn after this function is called.
stroke — Sets the outline (stroke) color for shapes drawn after this function is called.
strokeWeight — Sets the width of the stroke used for lines and shape outlines.
ellipseMode — Changes the way the parameters of ellipse shapes are interpreted (e.g., center, corner).
circle — Draws a circle at a specified location and diameter.
textAlign — Sets how text is aligned horizontally and vertically within the canvas.
textSize — Sets the size of the text font for subsequent text rendering.
text — Draws text at a specified position on the canvas.
loadSound — Loads an external sound file for playback in the sketch.
mousePressed — Detects when the mouse is pressed and triggers a function, allowing interaction with the canvas.
keyPressed — Detects when a key is pressed and executes a function, enabling keyboard-based interaction.