JavaScript Objects: Free JavaScript Tutorial

Topics Covered in This JavaScript Tutorial:

Introduction to Objects, Defining Custom Objects, Accessing and Manipulating Object Properties

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll master the fundamentals of JavaScript objects—one of the most crucial concepts for modern web development. You'll build custom objects from scratch and discover how to manipulate their properties dynamically, skills essential for creating interactive applications and managing complex data structures.

Getting Started

Let's set up your development environment to explore JavaScript objects using modern browser tools.

1. Navigate to the Objects folder located in Desktop > Class Files > JavaScript Class. Open this entire folder in your code editor—most modern editors like Visual Studio Code, WebStorm, or Sublime Text support folder-based workflows for better project organization.
2. In your code editor, open js-objects.html from the Objects folder.

3. Preview js-objects.html in Chrome or any Chromium-based browser like Edge or Brave. We'll leverage the powerful DevTools built into these browsers for real-time JavaScript debugging and testing.

   While the page appears minimal, the real action happens in the Console—your direct line to the JavaScript engine.

4. Keep this browser tab open throughout the exercise. You'll be refreshing it frequently to test your code changes, a fundamental part of the iterative development process.

Defining an Object

Now we'll create your first custom JavaScript object using modern ES6+ syntax and best practices.

1. Return to your code editor to begin writing JavaScript.

2. Within the script tag, declare a variable to hold your object using the preferred let keyword:

   <script>
      let person = {};
   </script>

   NOTE: The variable name person follows JavaScript naming conventions—descriptive and camelCase. The empty curly braces {} create an object literal, the most common and efficient way to define objects in modern JavaScript.

3. Add your first property inside the curly braces:

   let person = {
      name: 'Bob'
   };

   NOTE: You've just created a key-value pair where name is the key (property name) and 'Bob' is the value. Property names should start with a letter and follow camelCase convention for multi-word properties. Values can be any JavaScript data type—strings, numbers, booleans, arrays, functions, or even other objects.

4. Save your file and refresh the Chrome page to load your new JavaScript code.
5. Open the Developer Console using Cmd–Opt–J (Mac) or Ctrl–Shift–J (Windows). The Console is your interactive JavaScript playground—use it extensively for testing and debugging.

6. In the Console, type person and press Enter.

   The Console displays {name: 'Bob'}, confirming your object exists and contains the expected property.

Working with Properties of an Object

Master the essential techniques for accessing and modifying object properties—skills you'll use constantly in real-world development.

1. Test dot notation syntax to access individual properties. Type:

   person.name

2. Press Enter to execute.

   The Console returns 'Bob'—notice how dot notation extracts just the value, not the entire key-value pair.

3. Switch back to your code editor to expand the object with additional data types.

4. Add a numeric property, separating multiple properties with commas:

   let person = {
      name: 'Bob', 
      age: 23
   };

   NOTE: While you could write everything on one line, spreading properties across multiple lines dramatically improves readability—especially important when working with complex objects in production code.

5. Include a boolean property to demonstrate JavaScript's type flexibility:

   let person = {
      name: 'Bob', 
      age: 23, 
      alive: true
   };

   NOTE: Boolean values are either true or false (no quotes needed). They're crucial for conditional logic and state management in applications.

6. Save and refresh the page to load your enhanced object.
7. Ensure the Console remains open (or reopen it with Cmd–Opt–J / Ctrl–Shift–J).

8. Inspect the complete object by typing person and pressing Enter.

   The Console now displays all three properties: name, age, and alive, demonstrating how objects organize related data.

9. Access the boolean property specifically by typing person.alive and pressing Enter.

   The Console returns true, showing how you can extract any individual property value.

10. Add a new property dynamically—a powerful JavaScript feature for runtime object modification:

    person.hairColor = 'brown'

    NOTE: This demonstrates JavaScript's dynamic nature. Unlike statically-typed languages, you can add properties to objects at any time during execution—invaluable for building flexible, responsive applications.

11. Press Enter to execute the assignment.

    The Console echoes 'brown', confirming the property addition.

12. Verify the new property exists by typing person.hairColor and pressing Enter.
13. Display the complete updated object by typing person and pressing Enter. Notice how the hairColor property now appears alongside the original properties.

14. Modify an existing property value to simulate real-world data updates:

    person.age = 24

15. Press Enter, then type person and press Enter again to confirm the age property updated to 24.

    This demonstrates how objects serve as mutable data containers—essential for tracking changing application state.