Skip to content

Commit 1e37bec

Browse files
Hachondeorosumn2u
authored andcommitted
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.
1 parent c0d3ecb commit 1e37bec

File tree

5 files changed

+389
-0
lines changed

5 files changed

+389
-0
lines changed

en/SUMMARY.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@
6464
- [Prototype](objects/prototype.md)
6565
- [Delete Operator](objects/delete.md)
6666
- [Enumeration](objects/enumeration.md)
67+
- [Factory Functions](objects/factory-functions.md)
68+
- [Constructor Functions](objects/constructor-functions.md)
69+
- [Constructor Property](objects/constructor-property.md)
70+
- [Dynamic Nature](objects/dynamic-nature.md)
6771
- [Date and Time](date-and-time.md)
6872
- [JSON](json.md)
6973
- [Error Handling](error-handling/README.md)

en/objects/constructor-functions.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
chapter: 9
3+
description: Understanding Constructor Functions in JavaScript.
4+
---
5+
6+
## Understanding Constructor Functions in JavaScript
7+
8+
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.
9+
10+
### Defining a Constructor Function
11+
12+
A constructor function is defined like a regular function but is typically named with an initial capital letter to distinguish it from regular functions.
13+
14+
### Example of a Constructor Function
15+
16+
Here's a basic example of a constructor function:
17+
18+
```javascript
19+
function Person(firstName, lastName) {
20+
this.firstName = firstName;
21+
this.lastName = lastName;
22+
}
23+
24+
const person1 = new Person("John", "Doe");
25+
const person2 = new Person("Jane", "Smith");
26+
27+
console.log(person1.firstName); // Output: John
28+
console.log(person2.lastName); // Output: Smith
29+
```
30+
31+
In this example, the `Person` constructor function initializes the `firstName` and `lastName` properties for each new object created.
32+
33+
### Adding Methods to Constructor Functions
34+
35+
You can add methods to the objects created by a constructor function by defining them on the constructor's prototype.
36+
37+
```javascript
38+
function Person(firstName, lastName) {
39+
this.firstName = firstName;
40+
this.lastName = lastName;
41+
}
42+
43+
Person.prototype.getFullName = function() {
44+
return `${this.firstName} ${this.lastName}`;
45+
};
46+
47+
const person1 = new Person("John", "Doe");
48+
console.log(person1.getFullName()); // Output: John Doe
49+
```
50+
51+
### Using `new` Keyword
52+
53+
The `new` keyword is used to create an instance of an object from a constructor function. It performs the following steps:
54+
1. Creates a new empty object.
55+
2. Sets the `this` keyword to the new object.
56+
3. Executes the constructor function.
57+
4. Returns the new object.
58+
59+
### Example with `new` Keyword
60+
61+
```javascript
62+
function Car(make, model) {
63+
this.make = make;
64+
this.model = model;
65+
}
66+
67+
const car1 = new Car("Toyota", "Corolla");
68+
console.log(car1.make); // Output: Toyota
69+
```
70+
71+
### Constructor Functions vs. Classes
72+
73+
ES6 introduced the `class` syntax, which provides a more concise and readable way to define constructor functions and methods.
74+
75+
### Example with Classes
76+
77+
```javascript
78+
class Person {
79+
constructor(firstName, lastName) {
80+
this.firstName = firstName;
81+
this.lastName = lastName;
82+
}
83+
84+
getFullName() {
85+
return `${this.firstName} ${this.lastName}`;
86+
}
87+
}
88+
89+
const person1 = new Person("John", "Doe");
90+
console.log(person1.getFullName()); // Output: John Doe
91+
```
92+
93+
### Conclusion
94+
95+
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.

en/objects/constructor-property.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
chapter: 9
3+
description: Understanding the `constructor` Property in JavaScript.
4+
---
5+
6+
## Understanding the `constructor` Property in JavaScript
7+
8+
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.
9+
10+
### What is the `constructor` Property?
11+
12+
The `constructor` property returns a reference to the constructor function that created the instance. This is useful for identifying the type of an object.
13+
14+
### Example of the `constructor` Property
15+
16+
Here's a basic example to illustrate the `constructor` property:
17+
18+
```javascript
19+
function Person(firstName, lastName) {
20+
this.firstName = firstName;
21+
this.lastName = lastName;
22+
}
23+
24+
const person1 = new Person("John", "Doe");
25+
console.log(person1.constructor); // Output: [Function: Person]
26+
```
27+
28+
In this example, the `constructor` property of `person1` points to the `Person` function.
29+
30+
### Using the `constructor` Property to Create New Instances
31+
32+
You can use the `constructor` property to create new instances of the same type:
33+
34+
```javascript
35+
const person2 = new person1.constructor("Jane", "Smith");
36+
console.log(person2.firstName); // Output: Jane
37+
```
38+
39+
### `constructor` Property in Built-in Objects
40+
41+
The `constructor` property is also available in built-in JavaScript objects:
42+
43+
```javascript
44+
const arr = [];
45+
console.log(arr.constructor); // Output: [Function: Array]
46+
47+
const obj = {};
48+
console.log(obj.constructor); // Output: [Function: Object]
49+
```
50+
51+
### Modifying the `constructor` Property
52+
53+
You can modify the `constructor` property, but it is generally not recommended as it can lead to unexpected behavior:
54+
55+
```javascript
56+
function Animal(name) {
57+
this.name = name;
58+
}
59+
60+
const dog = new Animal("Rex");
61+
dog.constructor = Person;
62+
console.log(dog.constructor); // Output: [Function: Person]
63+
```
64+
65+
### Conclusion
66+
67+
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.

en/objects/dynamic-nature.md

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
chapter: 9
3+
description: Understanding the Dynamic Nature of Objects in JavaScript.
4+
---
5+
6+
## Understanding the Dynamic Nature of Objects in JavaScript
7+
8+
JavaScript objects are dynamic, meaning their properties can be added, modified, or deleted at runtime. This flexibility
9+
allows for powerful and adaptable code but requires careful management to avoid unexpected behavior.
10+
11+
### Adding Properties
12+
13+
You can add properties to an object at any time using dot notation or bracket notation.
14+
15+
```javascript
16+
const person = {
17+
firstName: "John",
18+
lastName: "Doe"
19+
};
20+
21+
// Adding a new property
22+
person.age = 30;
23+
console.log( person.age ); // Output: 30
24+
25+
// Adding a property using bracket notation
26+
person["gender"] = "male";
27+
console.log( person.gender ); // Output: male
28+
```
29+
30+
### Modifying Properties
31+
32+
Existing properties can be modified by reassigning their values.
33+
34+
```javascript
35+
const car = {
36+
make: "Toyota",
37+
model: "Corolla"
38+
};
39+
40+
// Modifying a property
41+
car.model = "Camry";
42+
console.log( car.model ); // Output: Camry
43+
```
44+
45+
### Deleting Properties
46+
47+
Properties can be removed from an object using the `delete` operator.
48+
49+
```javascript
50+
const book = {
51+
title: "1984",
52+
author: "George Orwell",
53+
year: 1949
54+
};
55+
56+
// Deleting a property
57+
delete book.year;
58+
console.log( book.year ); // Output: undefined
59+
```
60+
61+
### Checking for Properties
62+
63+
You can check if an object has a specific property using the `in` operator or the `hasOwnProperty` method.
64+
65+
```javascript
66+
const user = {
67+
username: "johndoe",
68+
email: "john@example.com"
69+
};
70+
71+
// Using the `in` operator
72+
console.log( "email" in user ); // Output: true
73+
74+
// Using `hasOwnProperty` method
75+
console.log( user.hasOwnProperty( "username" ) ); // Output: true
76+
```
77+
78+
### Iterating Over Properties
79+
80+
You can iterate over an object's properties using a `for...in` loop.
81+
82+
```javascript
83+
const student = {
84+
name: "Alice",
85+
age: 22,
86+
major: "Computer Science"
87+
};
88+
89+
for (let key in student) {
90+
if (student.hasOwnProperty( key )) {
91+
console.log( `${key}: ${student[key]}` );
92+
}
93+
}
94+
// Output:
95+
// name: Alice
96+
// age: 22
97+
// major: Computer Science
98+
```
99+
100+
### Dynamic Property Names
101+
102+
You can use dynamic property names by using computed property names in object literals.
103+
104+
```javascript
105+
const propName = "score";
106+
const game = {
107+
[propName]: 100
108+
};
109+
110+
console.log( game.score ); // Output: 100
111+
```
112+
113+
### Conclusion
114+
115+
The dynamic nature of JavaScript objects provides great flexibility in managing data structures. You can add, modify,
116+
and delete properties at runtime, check for the existence of properties, and iterate over them. This flexibility, while
117+
powerful, requires careful handling to maintain code stability and predictability.

0 commit comments

Comments
 (0)