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).
Let's define a JavaScript Object employing object literal syntax. Using our car example, let's frame a JavaScript Object:
JavaScript1let 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 ([]
):
JavaScript1let carColor1 = car.color; // 'red', access using dot notation 2let carColor2 = car['color']; // 'red', access using bracket notation
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:
JavaScript1car.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:
JavaScript1let 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, 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:
JavaScript1let 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:
JavaScript1function start() { 2 return 'Engine started!'; 3}
we use the following notation:
JavaScript1start: 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:
JavaScript1start: function(key) { 2 if (key === 'correct') { 3 return 'Engine started!'; 4 } 5}
and would call like this: car.start('correct')
;
Moving forward, let's compose and use our own JavaScript Objects and manage the properties dynamically:
JavaScript1let 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.
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!