# The Javascript filter method and the includes method
The <code>filter</code> method is a built-in JavaScript function that is available for arrays. It allows you to create a new array with elements that pass a certain condition specified by a callback function. 

It **iterates** through each element of the array and executes the callback function on each element. 
* If the callback function returns **true** for a particular element, that element will **be included** in the new filtered array.

* If the callback function returns **false**, the element will **be excluded** from the new array.


```javascript
const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];
```

Now, we have the <code>filter</code> method being applied to the array <code>listNumber1</code>. The callback function being used is as follows: 

```javascript
(i) => {
 return i > 5;
}
```

This callback function takes one argument <code>i</code>, which represents **each element of the array** <code>listNumber1</code> during the iteration. The function returns true if the element <code>i</code> is greater than 5, and false otherwise.

The <code>filter</code> method is now applied to the array <code>listNumber1</code> using the provided callback function: 

```javascript
listNumber1.filter((i) => {
 return i > 5;
});
```

The <code>filter</code> method will **iterate** through each element of the array <code>listNumber1</code>, and for each element, it will call the callback function with that element. 
After iterating through all elements, the <code>filter</code> method returns a new array containing the elements that passed the condition specified by the callback function. 

In this case, the resulting filtered array will be: <code>[6, 7, 8]</code>

The <code>filter</code> method was used on the array <code>listNumber1</code> with a callback function that checks if each element is greater than 5. The result is a new array <code>[6, 7, 8]</code>, containing only the elements that satisfy the condition (elements greater than 5).
 
## Understanding the includes function

The <code>includes</code> function is another built-in JavaScript method that is available for arrays. It allows you to check whether an array includes a specific value or not. The function returns true if the value is found in the array and false otherwise.

Let's remind ourselves of the provided array:
```javascript
const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];
```

Now, let's apply the <code>includes</code> function to the array <code>listNumber1</code> to check if it includes the value <code>3</code>:

```javascript
console.log( listNumber1.includes(3) );
```

The <code>includes</code> function will search for the value <code>3</code> in the array <code>listNumber1</code>.

The function starts at the first element of the array, which is <code>1</code>.
It compares <code>1</code> with the value we are looking for, which is <code>3</code>.
Since <code>1</code> is not equal to <code>3</code>, the function moves to the next element.
It compares <code>2</code> with <code>3</code>, and again, they are not equal, so it continues to the next element.

It compares <code>3</code> with <code>3</code>, and this time they are equal! So the function immediately returns true because the array includes the value <code>3</code>.
The output of the first console.log statement will be: <code>true</code>

Let's apply the includes function to the array <code>listNumber1</code> to check if it includes the value <code>10</code>:

```javascript
console.log( listNumber1.includes(10) );
```

The <code>includes</code> function will search for the value <code>10</code> in the array <code>listNumber1</code>. 

The output of the second console.log statement will be: <code>false</code>

To summarize, the <code>includes</code> function is used to check whether a value exists in an array. It returns true if the value is found and false if it is not found.
In the case of the provided array <code>listNumber1</code>, the output of <code>console.log( listNumber1.includes(3) );</code> will be <code>true</code>, and the output of <code>console.log( listNumber1.includes(10) );</code> will be <code>false</code>. 

 
## Understanding filter method used in conjunction with the includes function 
Let's explain the filter method used in conjunction with the includes function to find the intersection of two arrays, represented by listNumber1 and listNumber2.
![Post Images](/images/post-single/intersection.svg#thumbnail)
*Figure of the intersection of part A and part B*

We've already covered the filter method and the includes function in previous explanations, but let's recap:

The <code>filter</code> method creates a new array with elements that pass a certain condition specified by a callback function.
The <code>includes</code> function checks whether a specific value exists in an array and returns true if the value is found, and false otherwise.

Let's take a look at the provided arrays:

```javascript
const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];
const listNumber2 = [5, 6, 7, 8, 9, 10];
```

Now, the <code>filter</code> method is used on the array <code>listNumber1</code> with the provided callback function:

```javascript
listNumber1.filter( (i) => {
 return listNumber2.includes( i );
} );
```

The <code>filter</code> method will iterate through each element of the array <code>listNumber1</code>, and for each element, it will call the callback function with that element.

After iterating through all elements, the <code>filter</code> method returns a new array containing the elements that exist in both listNumber1 and <code>listNumber2</code>, which is the intersection of the two arrays.

The resulting filtered array will be:

```javascript
[1, 5, 6, 7, 8]
```

To conclude, the <code>filter</code> method, when used with the <code>includes</code> function as shown, is an effective way to find the intersection of two arrays (elements that exist in both arrays). In this case, the resulting filtered <code>array [1, 5, 6, 7, 8]</code> represents the intersection of <code>listNumber1</code> and <code>listNumber2</code>.
 

### Difference
![Post Images](/images/post-single/difference.svg#thumbnail)
*Figure of the difference of part A and part B*

he <code>filter</code> method used with the <code>includes</code> function to find the difference between two arrays, represented by <code>listNumber1</code> and <code>listNumber2</code>.

```javascript
const listNumber1 = [1, 2, 3, 4, 5, 6, 7, 8];
const listNumber2 = [5, 6, 7, 8, 9, 10];
```

```javascript
listNumber1.filter( (i) => {
 return !listNumber2.includes( i );
} );
```
The resulting filtered array will be: <code>[1, 2, 3, 4]</code>

The only difference is the use of the logical <code>NOT (!)</code> operator before the <code>listNumber2.includes(i)</code> condition in the callback function for finding the difference. 
This small change inverts the logic, making it return true for elements that are not present in <code>listNumber2</code> (i.e., unique to <code>listNumber1</code>).

So, while the code structures are almost identical, the <code>!</code> in the second approach completely changes the meaning of the condition. This shows how a simple modification can make a significant difference in the outcome when working with array operations like finding intersections and differences.

 The Javascript filter method and the includes method


# React components can be written using either JavaScript classes or JavaScript functions

**React components** can be written using either **JavaScript classes** or **JavaScript functions**. While both methods are widely used, creating components with functions is generally simpler and requires less code and detailed knowledge of JavaScript compared to the class-based approach. 

However, it's still important to have a good understanding of both methods and know how to write components using classes as well as functions. This knowledge will enable you to choose the appropriate method for your specific use case and ensure that your components are performant, reusable, and maintainable.

Developers who are accustomed to languages like C++, C#, Java, and PHP can find JavaScript's object-oriented inheritance model confusing. To address this issue, **ES6 introduced classes**.  

While Javascript classes are **essentially syntactical simplification**, they provide a more intuitive way of approaching object-oriented programming for developers who are familiar with traditional OOP concepts.

## Classes in object-oriented programming

In object-oriented programming, a **class serves as a blueprint** for defining the behavior and properties of objects of a particular type. For instance, the Person class below provides a general template for creating instances of different types of persons.  

It's worth noting that classes are usually denoted with an **initial capital letter** to distinguish them from other types of objects.    

```javascript
class Person {

  constructor( name, surname ) {
    this.name = name;
    this.surname = surname;
  }

}
```

The **constructor method** is run when an object of the **Person type** is created. It typically sets initial properties and handles other initializations. 

---

An object can now be created from this class with the **new** keyword:

---


```javascript
const person1 = new Person( “Maria”, “Paula”);
```

In **object-oriented programming**, it's often useful to build on an existing class by defining **a subclass** that inherits its properties and methods. This allows us to reuse code and avoid duplicating functionality.  

For example, we could create a **Cooker class** that extends the **Person class** using the **"extends"** keyword. This would allow the **Person class** to inherit all the properties and methods defined in the **Cooker class**.  
In addition, we can add, remove, or modify **properties and methods** in the **subclass** as needed to tailor it to our specific use case.    

```javascript
class Cooker extends Person {
     constructor ( name, surname, speciality ) {
     
    super( name, surname );
    this.speciality = speciality;
  }
  
    displayCompetency() {
    console.log(`${this.name} ${this.surname} knows ${this.speciality}`);
    }

}
```

> This approach makes it easier and more intuitive to create human objects with the desired behaviors and characteristics.
> Overall, inheritance provides a powerful mechanism for building complex and customizable object hierarchies in a clear and efficient way.


## Javascript "traditional" constructor functions

In this example, we can see how inheritance is implemented using the **"extends"** keyword and the **"super"** keyword in JavaScript. Specifically, the Developer class is defined as a **subclass** of the **Person class**, **inheriting** all of its **properties** and **methods**.

Overall, inheritance provides a powerful tool for building complex and flexible object hierarchies in JavaScript, allowing developers to **reuse code** and create more modular and maintainable programs. By leveraging the **"extends"** and **"super"** keywords, we can create clean and intuitive class definitions that are easy to understand and modify as needed.

To achieve this, the **constructor** of the **Developer class** calls the **constructor of its parent class** using the **"super"** keyword. This is a more concise and readable way to achieve the same result as the traditional constructor functions:


```javascript
function Person ( name, surname ) {
  this.name = name;
  this.surname = surname;
}

Person.prototype.displayCompetency = function () {
   console.log( `${this.name} ${this.surname} knows ${this.speciality}` );
}

function Cooker ( name, surname, speciality ) {
  Person.apply( this, arguments );
  this.speciality = speciality;
}

Cooker.prototype = Object.create( Person.prototype );
Cooker.prototype.constructor = Cooker;

```

The **this** keyword refers to the current instance of **the Cooker object**.
In JavaScript, the **apply() method** is used to call a function with a given this value and arguments provided as an array (or an array-like object). In this case, **Person.apply( this, arguments );** is invoking the **Person constructor function** and passing the current this (which refers to the **Cooker instance**) and the arguments object as arguments.

By using **Person.apply( this, arguments )**, the Cooker object inherits the properties (name and surname) defined in the **Person constructor**, as it is calling the Person constructor function with the current instance **(this)** of Cooker.  

This is a way to achieve inheritance in JavaScript. After that, the **speciality property** is added to the Cooker object using **this.speciality = speciality;**.

```javascript
  Person.apply( this, arguments );
  this.speciality = speciality;
```


So, in summary, the **this** keyword inside **Person.apply( this, arguments );** refers to the **current instance** of the **Cooker object**.  

## The prototype
We need to take care of inheritance before augmenting the prototype because the **prototype** of the **subclass** (in this case, **Developer**) needs to be **linked to the prototype** of its **superclass (Person)** in the inheritance chain.

![Post Images](/images/post-single/imagem1.png)
*Figure of the Prototype chain for inheritance - The prototype of Cooker.prototype is set to Person.prototype*


By assigning Cooker 's prototype to be an instance of Person's prototype using **Object.create( Person.prototype )**, we create a new object that inherits from **Person's prototype**. This allows Developer instances to access methods and properties defined on Person's prototype.

After this step, we need to set the constructor property of **Cooker's prototype** back to Cooker, which was overwritten when we assigned a new object to **Cooker prototype**. This step ensures that Cooker instances correctly identify their constructor as Developer rather than inheriting it from Person.  

```javascript
Cooker.prototype = Object.create( Person.prototype );
Cooker.prototype.constructor = Cooker;

```

If we were to augment the prototype before establishing the inheritance chain, anything added to **Cooker 's prototype** would be wiped out when we set its prototype to be an instance of **Person's prototype**. Therefore, **inheritance** needs to be **established first**, before adding any new members to the prototype chain.


---

**This Javascript "traditional" constructor function:**

---


```javascript
function Person ( name, surname ) {
  this.name = name;
  this.surname = surname;
}

Person.prototype.displayCompetency = function () {
   console.log(`${this.name} ${this.surname} knows ${this.speciality}`);
}

function Cooker ( name, surname, speciality ) {
  Person.apply( this, arguments );
  this.speciality = speciality;
}

Cooker.prototype = Object.create( Person.prototype );
Cooker.prototype.constructor = Cooker;


```
**Is equivalent to:**  

---

**This Javascript ES6 classes constructor method:**

---


```javascript
class Person {
  constructor(name, surname) {
    this.name = name;
    this.surname = surname;
  }
}

class Cooker extends Person {
  constructor(name, surname, speciality) {
    super(name, surname);
    this.speciality = speciality;
  }

  displayCompetency() {
    console.log(`${this.name} ${this.surname} knows ${this.speciality}`);

  }
}
```


The Javascript filter method and the includes method

Stéphane Cabaret

Javascript classes are essentially syntactical simplification

Stéphane Cabaret

Javascript

Popular on Stefdev

The Javascript filter method and the includes method

Javascript classes are essentially syntactical simplification

About

My story

Let's talk about professional opportunities: