Lecture Notes Of Day 9
Objects
in JavaScript
Objective:
The objective of this class is to
help students learn how to work with objects in JavaScript. Objects are a
fundamental data structure in JavaScript, and understanding how to create and
manipulate them is essential for writing effective JavaScript code.
Topics
Covered:
1. Creating
Objects
2. Accessing
Object Properties
3. Methods
in Objects
4. Adding
and Removing Object Properties
1.
Creating Objects in JavaScript
In JavaScript, an object is a collection
of key-value pairs, where each key is a string (also called a property) and
each value can be any valid data type (numbers, strings, arrays, functions,
etc.).
Syntax:
There are two main ways to create
objects in JavaScript:
- Using
Object Literal Notation:
The easiest and most common way
to create an object is using curly braces {} with key-value pairs
separated by a colon.
let car = {
brand: "Toyota",
model: "Corolla",
year: 2021
};
Here, car is an object with three
properties: brand, model, and year.
- Using
the new Object() Syntax:
Another way to create objects is
by using the Object() constructor.
let car = new Object();
car.brand
= "Toyota";
car.model
= "Corolla";
car.year
= 2021;
This approach creates an empty
object and then assigns properties one by one.
2.
Accessing Object Properties
Once an object is created, you
can access its properties using either dot notation or bracket notation.
- Dot
Notation:
Dot notation is the most commonly
used method to access an object's properties. You simply write the object name
followed by a period . and then the property name.
console.log(car.brand); // Output: Toyota
console.log(car.model);
// Output: Corolla
- Bracket
Notation:
Bracket notation is useful when
the property name has spaces or special characters, or if you want to use a
variable to access the property.
console.log(car["brand"]); // Output: Toyota
console.log(car["model"]);
// Output: Corolla
Bracket notation with a variable:
let property = "year";
console.log(car[property]);
// Output: 2021
3.
Methods in Objects
Objects in JavaScript can also
contain methods, which are functions that are stored as properties of
the object. Methods are useful for defining behaviors related to the object.
Syntax:
A method is created by assigning
a function to a property of an object.
let person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // Output: John Doe
- Explanation:
- this
refers to the current object (person in this case).
- The
fullName method combines the firstName and lastName properties to return
the full name.
4. Adding
and Removing Object Properties
Objects in JavaScript are
dynamic, meaning you can easily add or remove properties after an object has
been created.
Adding
Properties:
To add a new property to an
object, you can simply assign a value to a new key.
- Using
dot notation:
person.age = 30;
console.log(person.age);
// Output: 30
- Using
bracket notation:
person["gender"] = "Male";
console.log(person.gender);
// Output: Male
Removing
Properties:
To remove a property from an
object, you can use the delete operator.
delete person.age;
console.log(person.age);
// Output: undefined
- Explanation:
- The
delete operator removes the specified property from the object.
- After
deletion, accessing person.age will return undefined since the property
no longer exists.
Example:
Putting It All Together
Let’s create a more complex object and demonstrate all the concepts covered in this lesson.
let
student = {
name: "Alice",
age: 22,
course: "Computer Science",
// Method to return full information
getInfo: function() {
return `${this.name}, Age: ${this.age},
Course: ${this.course}`;
}
};
//
Accessing properties
console.log(student.name);
// Output: Alice
console.log(student["course"]);
// Output: Computer Science
//
Calling the method
console.log(student.getInfo());
// Output: Alice, Age: 22, Course: Computer Science
// Adding
a new property
student.grade
= "A";
console.log(student.grade);
// Output: A
//
Removing a property
delete
student.age;
console.log(student.age);
// Output: undefined
- Explanation:
- The
student object has three properties (name, age, course) and one method (getInfo).
- We
accessed the properties using both dot and bracket notations.
- We
added a new property (grade) and removed an existing property (age).
Summary
- Objects are
a way to group related data and behaviors together in JavaScript.
- Creating
objects can be done using the object literal syntax
or the new Object() syntax.
- Accessing
properties can be done using dot notation or bracket
notation.
- Methods are
functions that belong to an object and can be invoked using dot notation.
- Adding
and removing properties from objects is
straightforward using assignment and the delete operator.
Practice
Exercises:
1. Create an
object to represent a book with properties like title, author, and price. Add
a method to display the book details.
2. Create an
object to represent a student with properties like name, age, grade, and subjects
(an array). Add a method to display the student's info.
3. Add a
property year to your student object and then remove the grade property.
