6.1 Creating Objects
Objects are one of the primary data types in JavaScript and are widely used for storing and managing data. An object is a collection of properties, where each property consists of a key (name) and a value. In this lecture, we will cover creating objects, as well as accessing their properties and methods.
1. Object Literal
The most common way to create an object in JavaScript is by using an object literal.
In this example, we created an object person with four properties: name, age, isStudent, and greet.
let person = {
name: 'John',
age: 30,
isStudent: false,
greet: function() {
return 'Hello!';
}
};
2. Object Constructor
Objects can also be created using the Object() constructor.
This method is equivalent to creating an object using an object literal, but it's more verbose:
let person = new Object();
person.name = 'John';
person.age = 30;
person.isStudent = false;
person.greet = function() {
return 'Hello!';
};
3. Constructor Function
A constructor function allows for creating multiple instances of objects with the same properties and methods.
In this example, the constructor function Person() is used to create objects john and jane with identical properties and methods:
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function() {
return 'Hello!';
};
}
let john = new Person('John', 30, false);
let jane = new Person('Jane', 25, true);
4. Object.create() Method
The Object.create() method creates a new object with the specified prototype and properties.
In this example, the john object is created based on the personPrototype:
let personPrototype = {
greet: function() {
return 'Hello!';
}
};
let john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
john.isStudent = false;
6.2 Accessing Properties and Methods
1. Dot Notation
The most common way to access an object's properties and methods is using dot notation:
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person.name); // Outputs: John
console.log(person.age); // Outputs: 30
console.log(person.greet()); // Outputs: Hello!
2. Bracket Notation
Object properties can also be accessed using bracket notation. This method is useful if the property name is stored in a variable or contains spaces or special characters:
let person = {
first name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person['first name']); // Outputs: John
console.log(person['age']); // Outputs: 30
let propertyName = 'greet';
console.log(person[propertyName]()); // Outputs: Hello!
3. Modifying and Adding Properties
Object properties can be modified or added at any time:
let person = {
name: 'John',
age: 30
};
// Modifying an existing property
person.age = 31;
console.log(person.age); // Outputs: 31
// Adding a new property
person.isStudent = false;
console.log(person.isStudent); // Outputs: false
4. Deleting Properties
Object properties can be deleted using the delete operator:
let person = {
name: 'John',
age: 30,
isStudent: false
};
delete person.isStudent;
console.log(person.isStudent); // Outputs: undefined
6.3 Iterating Over Object Properties
1. for...in Loop
The for...in loop allows iterating over all enumerable properties of an object:
let person = {
name: 'John',
age: 30,
isStudent: false
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Outputs:
// name: John
// age: 30
// isStudent: false
2. Object.keys() Method
The Object.keys() method returns an array of all enumerable properties of an object:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let keys = Object.keys(person);
console.log(keys); // Outputs: ['name', 'age', 'isStudent']
3. Object.values() Method
The Object.values() method returns an array of values for all enumerable properties of an object:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let values = Object.values(person);
console.log(values); // Outputs: ['John', 30, false]
4. Object.entries() Method
The Object.entries() method returns an array of [key, value] pairs for all enumerable properties of an object:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let entries = Object.entries(person);
console.log(entries); // Outputs: [['name', 'John'], ['age', 30], ['isStudent', false]]
6.4 Checking for Property Existence
1. in Operator
The in operator checks for the existence of a property in an object:
let person = {
name: 'John',
age: 30
};
console.log('name' in person); // Outputs: true
console.log('isStudent' in person); // Outputs: false
2. hasOwnProperty() Method
The hasOwnProperty() method checks if an object has a specific property as its own (not inherited):
let person = {
name: 'John',
age: 30
};
console.log(person.hasOwnProperty('name')); // Outputs: true
console.log(person.hasOwnProperty('isStudent')); // Outputs: false
GO TO FULL VERSION