Skip to content

Commit

Permalink
Add chapters on factory and constructor functions and dynamic objects
Browse files Browse the repository at this point in the history
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
Hachondeoro authored and sumn2u committed Aug 9, 2024
1 parent c0d3ecb commit 1e37bec
Show file tree
Hide file tree
Showing 5 changed files with 389 additions and 0 deletions.
4 changes: 4 additions & 0 deletions en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@
- [Prototype](objects/prototype.md)
- [Delete Operator](objects/delete.md)
- [Enumeration](objects/enumeration.md)
- [Factory Functions](objects/factory-functions.md)
- [Constructor Functions](objects/constructor-functions.md)
- [Constructor Property](objects/constructor-property.md)
- [Dynamic Nature](objects/dynamic-nature.md)
- [Date and Time](date-and-time.md)
- [JSON](json.md)
- [Error Handling](error-handling/README.md)
Expand Down
95 changes: 95 additions & 0 deletions en/objects/constructor-functions.md
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.
67 changes: 67 additions & 0 deletions en/objects/constructor-property.md
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.
117 changes: 117 additions & 0 deletions en/objects/dynamic-nature.md
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.
Loading

0 comments on commit 1e37bec

Please sign in to comment.