Lesson 6

Exploring the Galaxy of JavaScript: Understanding and Using Objects

Introduction and Topic Overview

Welcome to the universe of JavaScript! Today's topic is JavaScript Objects, a pivotal concept in JavaScript and programming! Objects efficiently group related data and functions.

In terms analogous to the real world, consider JavaScript Objects as school report cards that consolidate your subject scores (data) and remarks (characteristics) in one place. The objective of our lesson is to help you master JavaScript Objects to manage related data and functions effectively. Let's begin!

An Object in JavaScript, mirroring real-world entities, includes two principal components: properties and methods. Imagine there's a car, it displays certain characteristics, dubbed as properties (like color, make, and model), and some actions, labeled as methods (like start, stop). Essentially, JavaScript Objects package related data (properties) and functions (methods).

JavaScript Object Syntax

Let's define a JavaScript Object employing object literal syntax. Using our car example, let's frame a JavaScript Object:

JavaScript
1let car = { 2 color: 'red', 3 make: 'Toyota', 4 model: 'Corolla', 5};

The object car contains three properties: color, make, and model, defined using the 'key': 'value' syntax, separated by commas (,), enclosed within curly braces ({}).

To access properties, we can employ dot notation (.) or bracket notation ([]):

JavaScript
1let carColor1 = car.color; // 'red', access using dot notation 2let carColor2 = car['color']; // 'red', access using bracket notation
Properties of JavaScript Objects

JavaScript Object properties describe the object. For our car object, the properties are color, make, and model. You can add, modify, and delete properties as follows:

JavaScript
1car.color = 'blue'; // modifying color property 2car.roofRack = true; // adding roofRack property 3delete car.roofRack; // removing roofRack property

Properties in JavaScript can sport special names, enclosed by quotes or bracket notation:

JavaScript
1let house = { 2 'number of rooms': 4, 3 1: 'one', 4}; 5 6let rooms = house['number of rooms']; // equals 4 7let one = house[1]; // equals 'one'
Methods in JavaScript Objects

Methods, the second component of JavaScript Objects, encapsulate actions or behaviors. In our car object, methods might include actions, like start, stop, accelerate, and brake. Methods are defined as functions within an object:

JavaScript
1let car = { 2 color: 'red', 3 make: 'Toyota', 4 model: 'Corolla', 5 start: function() { 6 return 'Engine started!'; 7 }, 8 displayColor: function() { 9 // you can access Object properties by using 'this' keyword 10 console.log('The color of the car is ' + this.color); // prints "The color of the car is red" 11 } 12}; 13 14let carStart = car.start(); // calls the start method and returns 'Engine started!'

Pay attention that here we use a slightly modified version of function creation called function expression. Namely, instead of this:

JavaScript
1function start() { 2 return 'Engine started!'; 3}

we use the following notation:

JavaScript
1start: function() { 2 return 'Engine started!'; 3}

If we needed to provide parameters to the function, we would include the parameters in the parentheses after the function keyword:

JavaScript
1start: function(key) { 2 if (key === 'correct') { 3 return 'Engine started!'; 4 } 5}

and would call like this: car.start('correct');

Creating and Using JavaScript Objects

Moving forward, let's compose and use our own JavaScript Objects and manage the properties dynamically:

JavaScript
1let user = { 2 name: 'John', 3 age: 30, 4}; 5 6let userName = user.name; // 'John' 7let userAge = user['age']; // 30 8 9user.isAdmin = true; // a new property 'isAdmin' is added 10user.introduce = function() { // a new method is added 11 console.log("Hi, I am " + this.name); 12} 13delete user.age; // deletes the 'age' property

JavaScript supports dynamic alteration of properties, setting it apart from several other programming languages.

Lesson Summary

Bravo! You've mastered JavaScript Objects – data structures that merge related data and functions. We've journeyed from understanding Objects to managing their properties and methods. With JavaScript Objects in your armory, you're one step closer to becoming an accomplished JavaScript programmer!

Next, delve into our practice exercises to solidify your learning. Create your own objects, define novel properties, and invoke methods for an immersive deep dive into JavaScript programming. Embark on your journey. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.