-
Notifications
You must be signed in to change notification settings - Fork 147
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add chapters on factory and constructor functions and dynamic objects
This commit introduces new documentation sections explaining factory functions, constructor functions, the constructor property, and the dynamic nature of objects in JavaScript. These additions aim to enhance understanding of object creation and manipulation in JavaScript.
- Loading branch information
1 parent
c0d3ecb
commit 1e37bec
Showing
5 changed files
with
389 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
--- | ||
chapter: 9 | ||
description: Understanding Constructor Functions in JavaScript. | ||
--- | ||
|
||
## Understanding Constructor Functions in JavaScript | ||
|
||
Constructor functions in JavaScript are special functions used to create and initialize objects. They provide a way to define a blueprint for creating multiple objects with similar properties and methods. | ||
|
||
### Defining a Constructor Function | ||
|
||
A constructor function is defined like a regular function but is typically named with an initial capital letter to distinguish it from regular functions. | ||
|
||
### Example of a Constructor Function | ||
|
||
Here's a basic example of a constructor function: | ||
|
||
```javascript | ||
function Person(firstName, lastName) { | ||
this.firstName = firstName; | ||
this.lastName = lastName; | ||
} | ||
|
||
const person1 = new Person("John", "Doe"); | ||
const person2 = new Person("Jane", "Smith"); | ||
|
||
console.log(person1.firstName); // Output: John | ||
console.log(person2.lastName); // Output: Smith | ||
``` | ||
|
||
In this example, the `Person` constructor function initializes the `firstName` and `lastName` properties for each new object created. | ||
|
||
### Adding Methods to Constructor Functions | ||
|
||
You can add methods to the objects created by a constructor function by defining them on the constructor's prototype. | ||
|
||
```javascript | ||
function Person(firstName, lastName) { | ||
this.firstName = firstName; | ||
this.lastName = lastName; | ||
} | ||
|
||
Person.prototype.getFullName = function() { | ||
return `${this.firstName} ${this.lastName}`; | ||
}; | ||
|
||
const person1 = new Person("John", "Doe"); | ||
console.log(person1.getFullName()); // Output: John Doe | ||
``` | ||
|
||
### Using `new` Keyword | ||
|
||
The `new` keyword is used to create an instance of an object from a constructor function. It performs the following steps: | ||
1. Creates a new empty object. | ||
2. Sets the `this` keyword to the new object. | ||
3. Executes the constructor function. | ||
4. Returns the new object. | ||
|
||
### Example with `new` Keyword | ||
|
||
```javascript | ||
function Car(make, model) { | ||
this.make = make; | ||
this.model = model; | ||
} | ||
|
||
const car1 = new Car("Toyota", "Corolla"); | ||
console.log(car1.make); // Output: Toyota | ||
``` | ||
|
||
### Constructor Functions vs. Classes | ||
|
||
ES6 introduced the `class` syntax, which provides a more concise and readable way to define constructor functions and methods. | ||
|
||
### Example with Classes | ||
|
||
```javascript | ||
class Person { | ||
constructor(firstName, lastName) { | ||
this.firstName = firstName; | ||
this.lastName = lastName; | ||
} | ||
|
||
getFullName() { | ||
return `${this.firstName} ${this.lastName}`; | ||
} | ||
} | ||
|
||
const person1 = new Person("John", "Doe"); | ||
console.log(person1.getFullName()); // Output: John Doe | ||
``` | ||
|
||
### Conclusion | ||
|
||
Constructor functions are a fundamental feature in JavaScript for creating and initializing objects. They allow you to define a blueprint for objects and add methods to their prototype. With the introduction of ES6, the `class` syntax provides a more modern and readable way to achieve the same functionality. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
--- | ||
chapter: 9 | ||
description: Understanding the `constructor` Property in JavaScript. | ||
--- | ||
|
||
## Understanding the `constructor` Property in JavaScript | ||
|
||
The `constructor` property in JavaScript is a reference to the function that created an instance's prototype. It is a property of all objects that points to the function that was used to create the object. | ||
|
||
### What is the `constructor` Property? | ||
|
||
The `constructor` property returns a reference to the constructor function that created the instance. This is useful for identifying the type of an object. | ||
|
||
### Example of the `constructor` Property | ||
|
||
Here's a basic example to illustrate the `constructor` property: | ||
|
||
```javascript | ||
function Person(firstName, lastName) { | ||
this.firstName = firstName; | ||
this.lastName = lastName; | ||
} | ||
|
||
const person1 = new Person("John", "Doe"); | ||
console.log(person1.constructor); // Output: [Function: Person] | ||
``` | ||
|
||
In this example, the `constructor` property of `person1` points to the `Person` function. | ||
|
||
### Using the `constructor` Property to Create New Instances | ||
|
||
You can use the `constructor` property to create new instances of the same type: | ||
|
||
```javascript | ||
const person2 = new person1.constructor("Jane", "Smith"); | ||
console.log(person2.firstName); // Output: Jane | ||
``` | ||
|
||
### `constructor` Property in Built-in Objects | ||
|
||
The `constructor` property is also available in built-in JavaScript objects: | ||
|
||
```javascript | ||
const arr = []; | ||
console.log(arr.constructor); // Output: [Function: Array] | ||
|
||
const obj = {}; | ||
console.log(obj.constructor); // Output: [Function: Object] | ||
``` | ||
|
||
### Modifying the `constructor` Property | ||
|
||
You can modify the `constructor` property, but it is generally not recommended as it can lead to unexpected behavior: | ||
|
||
```javascript | ||
function Animal(name) { | ||
this.name = name; | ||
} | ||
|
||
const dog = new Animal("Rex"); | ||
dog.constructor = Person; | ||
console.log(dog.constructor); // Output: [Function: Person] | ||
``` | ||
|
||
### Conclusion | ||
|
||
The `constructor` property is a useful feature in JavaScript that allows you to reference the function that created an instance's prototype. It can be used to identify the type of an object and create new instances of the same type. However, modifying the `constructor` property should be done with caution. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
--- | ||
chapter: 9 | ||
description: Understanding the Dynamic Nature of Objects in JavaScript. | ||
--- | ||
|
||
## Understanding the Dynamic Nature of Objects in JavaScript | ||
|
||
JavaScript objects are dynamic, meaning their properties can be added, modified, or deleted at runtime. This flexibility | ||
allows for powerful and adaptable code but requires careful management to avoid unexpected behavior. | ||
|
||
### Adding Properties | ||
|
||
You can add properties to an object at any time using dot notation or bracket notation. | ||
|
||
```javascript | ||
const person = { | ||
firstName: "John", | ||
lastName: "Doe" | ||
}; | ||
|
||
// Adding a new property | ||
person.age = 30; | ||
console.log( person.age ); // Output: 30 | ||
|
||
// Adding a property using bracket notation | ||
person["gender"] = "male"; | ||
console.log( person.gender ); // Output: male | ||
``` | ||
|
||
### Modifying Properties | ||
|
||
Existing properties can be modified by reassigning their values. | ||
|
||
```javascript | ||
const car = { | ||
make: "Toyota", | ||
model: "Corolla" | ||
}; | ||
|
||
// Modifying a property | ||
car.model = "Camry"; | ||
console.log( car.model ); // Output: Camry | ||
``` | ||
|
||
### Deleting Properties | ||
|
||
Properties can be removed from an object using the `delete` operator. | ||
|
||
```javascript | ||
const book = { | ||
title: "1984", | ||
author: "George Orwell", | ||
year: 1949 | ||
}; | ||
|
||
// Deleting a property | ||
delete book.year; | ||
console.log( book.year ); // Output: undefined | ||
``` | ||
|
||
### Checking for Properties | ||
|
||
You can check if an object has a specific property using the `in` operator or the `hasOwnProperty` method. | ||
|
||
```javascript | ||
const user = { | ||
username: "johndoe", | ||
email: "[email protected]" | ||
}; | ||
|
||
// Using the `in` operator | ||
console.log( "email" in user ); // Output: true | ||
|
||
// Using `hasOwnProperty` method | ||
console.log( user.hasOwnProperty( "username" ) ); // Output: true | ||
``` | ||
|
||
### Iterating Over Properties | ||
|
||
You can iterate over an object's properties using a `for...in` loop. | ||
|
||
```javascript | ||
const student = { | ||
name: "Alice", | ||
age: 22, | ||
major: "Computer Science" | ||
}; | ||
|
||
for (let key in student) { | ||
if (student.hasOwnProperty( key )) { | ||
console.log( `${key}: ${student[key]}` ); | ||
} | ||
} | ||
// Output: | ||
// name: Alice | ||
// age: 22 | ||
// major: Computer Science | ||
``` | ||
|
||
### Dynamic Property Names | ||
|
||
You can use dynamic property names by using computed property names in object literals. | ||
|
||
```javascript | ||
const propName = "score"; | ||
const game = { | ||
[propName]: 100 | ||
}; | ||
|
||
console.log( game.score ); // Output: 100 | ||
``` | ||
|
||
### Conclusion | ||
|
||
The dynamic nature of JavaScript objects provides great flexibility in managing data structures. You can add, modify, | ||
and delete properties at runtime, check for the existence of properties, and iterate over them. This flexibility, while | ||
powerful, requires careful handling to maintain code stability and predictability. |
Oops, something went wrong.