DEV Community: marlonry

Prototype, Classes and More

marlonry — Mon, 26 Jul 2021 10:22:44 +0000

Introduction

Prototype is an important part of JavaScript, it gives objects the ability to inherit properties and methods from other objects. Classes makes inheritance easier as it provides an easier syntax.

Let's look into it...

So, where is the prototype, the prototype can be found on the properties on any object.

if you console.log() the following example, we can see that the prototype is a property:

const myObj = {
    x: 100,
    y: 200,
}

console.log(myObj);

The prototype is there as another property for the object we just created __proto__: Object, but as shown on the example above there is a value being exposed on the __proto__, this is the Object.prototype. But how did that get in there, If you check inside the object we can see other properties and methods that have been inherited by default from the Object.prototype. This is called the prototype chain.

What is the prototype chain

Each object has a property called __proto__ which is the link to another object as their prototype. This property inherits all the properties and methods from the object that has been used in the prototype. Let's follow up on the example above.

Here there we will create another object with Object.create() which creates an object and sets the prototype to the object passed as argument. Then set a property of z to 50 in the newly created object.

const myObj = {
    x: 100,
    y: 200,
}

const anotherObj = Object.create(myObj);
anotherObj.z = 50;

console.log(anotherObj);

Once the object is created the prototype chain will be set. by expanding the property __proto__ on the developer tools it's evident that it has correctly inherited the x and y properties from the other object. See Image Below.

In the prototype chain it's visible that the other object still inherits from the Object.prototype.

This happens because Object.protoype will always be at the top of the prototype inheritance chain, this means that the __proto__ for Object.prototype is null.

The way the object was created with Object.create() was by using other object as a prototype but there are other ways to create a inherit the prototype of an object.

ES5 and ES6

Now that we have a better understanding of what the prototype, let's see the two approaches that we have to creating objects and prototype inheritance in ES5 and ES6.

Constructors

We can either use constructor functions or the constructor method in classes to create objects. In order to create the object instance we have to use the new keyword.

// ES5
function MyObj() {
    this.x = 100;
    this.y = 200
}

const obj1 = new MyObj();

console.log(obj1)

// ES6
class MyObj {
    constructor() {
        this.x = 100;
        this.y = 200
    }
}

const c1 = new MyObj();

console.log(c1);

both of the examples above yield the same results except that the constructor for the newly created objects points to either the constructor function or the constructor() method in the class

Inheritance

Now let's see the steps to inherit properties and methods in another object by using constructor functions, the ES5 way.

Create the parent constructor function.

function MyObj(x, y) {
    this.x = x;
    this.y = y;
}

Add Desired Methods to the constructor function prototype.

MyObj.prototype.sum = function() {
    return this.x + this.y;
}

Create the child constructor function and execute the parent constructor inside the child constructor by using MyObj.call(this, x, y)

function AnotherObj(x,y,z) {
    MyObj.call(this, x, y);
    this.z = z;
}

Another way to execute the parent constructor inside the child constructor is the following. but this will only work because later on we will be calling the child constructor.

function AnotherObj(x,y,z) {
    Object.getPrototypeOf(AnotherObj.prototype).constructor.call(this, x ,y)
    this.z = z;
}

Set the child object prototype to the parent object in order inherit the methods that were added previously in the parent constructor function.

AnotherObj.prototype = Object.create(MyObj.prototype);

Reset the child constructor to be itself.

AnotherObj.prototype.constructor = AnotherObj;

Create a new instance of the child object.

const anotherObj1 = new AnotherObj(100, 200, 50);

When we console log the instance we get the following structure in the prototype chain. Which shows that we have inherited the properties and methods from the parent object.

console.log(anotherObj1);

We can do this more efficiently with ES6 classes.

Create parent class with constructor and methods.

class MyObj {
    constructor() {
        this.x = 100;
        this.y = 200
    }

    sum() {
        return this.x + this.y;
    }
}

Create child class and execute the parent constructor by calling super(x,y).

class AnotherObj extends MyObj {
    constructor(x,y,z) {
        super(x,y);
        this.z = z;
    }
}

Create instance

const anotherObj1 = new AnotherObj(100, 200, 50);

Once we console log the newly created object we see the same results

console.log(anotherObj1)

The only difference is that the constructor is the class rather than the function constructor.

I hope it is useful as it was useful to me in order to gain deeper understanding in the topic. Thank you for reading. Share your feedback. and let me know if you feel something is not right. Happy Coding!

Introduction to Javascript Destructuring

marlonry — Thu, 29 Apr 2021 08:29:52 +0000

Javascript Destructuring facilitates the process of obtaining the individual values of arrays and objects, then assigning them to variables. This can be possible with a few lines of code.

Destructuring can be useful in different situations, which I will describe below.

Array Destructuring

Let's start talking about array destructuring, this syntax can allow you to obtain the values from the array and assign them to variables. the following examples apply this in different ways:

Assigning a variable from an array

const [a, b] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 2

Assigning a variable from a nested array

const [a, [b]] = [1, [3, 2], 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 3

Skipping values is possible by leaving an empty space and a comma. the number of commas will skip a number of values inside the array.

const [a,, c] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(c); // Output: 3

We can combine the rest operator ... with destructuring, which assigns the rest of the array values to the variable rest.

const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7]
console.log(rest); // Output: [3, 4, 5, 6, 7]

We can also define default values in case the value from the array is not present, in this example below, we are destructuring an array with 2 values, however, we have a third variable c which will be assigned to a default value of 3.

const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // Output: 1 2 3

Whenever the value is present in the array, the variable will no be assigned to the default value but to the value in the array. below we see the variable c is assigned to the value from the array, which is 4.

const [a, b, c = 3] = [1, 2, 4];
console.log(a, b, c); // Output: 1 2 4

Swapping variables with array destructuring

let name1 = 'Louise';
let name2 = 'Ellie';

console.log(name1, name2); // Louise Ellie 
[name1, name2] = [name2, name1];
console.log(name1, name2); // Ellie Louise

Object Destructuring

Object destructuring allows you to obtain the values from the object properties and assign them to variables. the following examples apply this in different ways:

Assigning a variable from an object

const {name, age} = {name: 'Ellie', age: 27};
console.log(name); // Output: Ellie
console.log(age); // Output: 27

Assigning a variable from a nested object

const details = {
  name: 'Louise',
  age: 25,
  languages: {
    frontEnd: ['HMTL', 'CSS', 'JavaScript', 'React'],
    backEnd: ['Node.js', 'Express.js'],
    database: ['PostgreSQL', 'MongoDB'],
  }
}

const {name, age, languages: { frontEnd, backEnd, database }} = details;
console.log(frontEnd); // Output: ["HMTL", "CSS", "JavaScript", "React"]
console.log(backEnd); // Output: ["Node.js", "Express.js"]
console.log(database); // Output: ["PostgreSQL", "MongoDB"]

Assigning the rest of an object to a variable

const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // Output: 12
console.log(b); // Output: 43
console.log(rest); // Output: {c: 67, d: 17}

With object destructuring is also possible to set default values, but also to rename values. renaming values is usually useful when there are invalid property identifiers inside objects. in the example below name is assigned to the firstName variable and the likesProgramming variable is assigned to false as a default value.

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27};
console.log(firstName); // Output: Ellie
console.log(age); // Output: 27
console.log(likesProgramming); // Output: false

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27, likesProgramming: true};
console.log(likesProgramming); // Output: true

Destructuring an object passed as a functions argument. in the example below, the name, age, and country are being destructured right in the function argument. (This would also be possible with arrays).

const details = {
  name: "Max",
  age: 23,
  country: "Spain"
};

const showDetails = ({ name, age, country }) => {
  console.log("Name: " + name, "Age: " + age, "Country: " + country);
};

showDetails(details); // Output: Name: Max Age: 23 Country: Spain

It is also possible to rename and set default values inside functions. In the example below, the name value is assigned to the variable firstName, and the likesProgramming variable has a default value of false.

const showDetails = ({name: firstName, age, likesProgramming = false}) => {
  console.log('First Name: ' + firstName + ', ' + 'Age: ' + age + ', ' + 'Likes Programming: ' + likesProgramming);
}

const details = {name: 'Ellie', age: 27};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: false

Here we add the property likesProgramming set to true inside the details object, therefore once we run the showDetails function it won't use the default value anymore. It will destructure the property from the object instead.

const details = {name: 'Ellie', age: 27, likesProgramming: true};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: true

A returned object from a function, can be destructured right after the function has been called, as shown below. (This would also be possible with arrays).

const showDetails = () => ({name: 'Knox', age: 20, city: 'New York'});

const {name, city} = showDetails();

console.log(name); // Output: Knox
console.log(city); // Output: New York

Thank you for reading! See you in the next one, Happy Coding! 😃

Learning JavaScript Promises

marlonry — Mon, 01 Mar 2021 10:30:33 +0000

Hello, I am going to give you a quick introduction about JavaScript promises and why they work the way they do. Promises have been around for a while now. It is really important to understand this topic as modern development revolves around asynchronous code. Let's start by defining what they are:

What are Promises?

In JavaScript, a Promise is an object that returns some type of value that will arrive at any point in the future. During the process, a Promise will start in the pending state, which informs you that it hasn't been completed and that it will eventually return a value. This returned value can either be in a resolved state (success) or rejected state (fail), after it's been consumed.

It's really important to understand the three main states of a Promise.

Pending: The Promise is still doing its work and we don't know the type of response yet. We just know we have been promised a value.
Resolved: The promised value has been delivered successfully.
Rejected: The promised value has not been delivered successfully and we receive an explanation as to why it was rejected.

Now let's put this information into practice.

Let's create a Promise

Let's start with a simple example. In the image below, we create and consume a Promise right away.

const isPromisedFullfilled = true;

const myPromise = () => {
  return new Promise((resolve, reject) => {
    if (isPromisedFullfilled) {
      resolve("Hello, this is a successful Promise");
    }
    reject("Hello, this is a rejected Promise");
  });
};

console.log(myPromise()); // Promise {<pending>}

myPromise()
  .then((result) => console.log(`Success: ${result}`)) // if true = resolved
  .catch((err) => console.log(`Error: ${err}`)); // if false = rejected

// Output: Success: Hello, this is a successful Promise

Now let's break down each part of the example above. A function called myPromise returns a Promise. Inside the myPromise function, we get access to the resolve and reject methods on the arguments. These methods allow you to resolve or reject a value. Once the promise is consumed, this will define whether the promise has been fulfilled or not. In this case, we have a variable called isPromisedFullfilled, which has a boolean value and when the promise is consumed, it will resolve or reject depending on the variable value.

If the isPromisedFullfilled equals true, it will return a message "Hello, this is a successful Promise" and if it is false, it will run the next line of code which will reject the promise and return a message "Hello, this is a rejected Promise". This will happen once the promise has been consumed.

const isPromisedFullfilled = true;

const myPromise = () => {
  return new Promise((resolve, reject) => {
    if (isPromisedFullfilled) {
      resolve("Hello, this is a successful Promise");
    }
    reject("Hello, this is a rejected Promise");
  });
};

At the creation state, we can see that the Promise is still in a pending state when we log myPromise to the console.

console.log(myPromise()); // Promise {<pending>}

Let's handle the Promise

In order to consume a Promise, we get access to the .then() method that accepts two callback functions - one for the success and failure case of the promise. However, usually, the failure case of a promise is handled with the .catch() method, which only accepts one callback function to handle the rejected state or a thrown error.

As seen below, .then() method will handle the resolved state and provide a result, and .catch() will handle the rejected state and provide reasons for the errors. In this case, isPromisedFullfilled equals true, so "Success: Hello, this is a successful promise" will be the result.

myPromise()
  .then((result) => console.log(`Success: ${result}`)) // if true = resolved
  .catch((err) => console.log(`Error: ${err}`)); // if false = rejected

// Output: Success: Hello, this is a successful Promise

Why Promises?

Promises were made to handle asynchronous operations in an easier way as well as solving the "Callback Hell", which occurs when nesting functions inside other functions. We can usually see this pattern developing when dealing with asynchronous programming but with the introduction of Promises, we only attach a .then() after another. If we were to convert the example above to "Callbacks", it would look something like this:

let done = false;

function doSomething(successCallback, errorCallback) {
  if (done) {
    successCallback("Hello, this is a successful result");
  } else {
    errorCallback("Hello, this is a failed result");
  }
}

doSomething(
  (result) => console.log(`Success: ${result}`),
  (err) => console.log(`Error: ${err}`)
);

Although a few Callbacks don't seem like a big problem, once we start nesting them, using Callbacks can get out of hand really quickly.

Now that we know that Promises solve some problems, at the end of the day this is not the final solution to other problems that arise when using Promises, but it is important to understand them in order to move on to other ways of handling Asynchronous code like Async/Await.

Handling Multiple Promises

There are some important Static methods that can help us handle multiple Promises at once, for different cases, These are:

Promise.all()
Promise.allSettled()
Promise.race()
Promise.any()

I will explain each one briefly.

Promise.all()

This method takes an array of Promises as an argument and waits until all of the Promises are resolved. Once that's done, it will return a Promise where we can access an array with all the results from the resolved Promises through a .then() method.

const p1 = new Promise((resolve, reject) => {
  resolve("This is the first Promise"); // resolves
});

const p2 = new Promise((resolve, reject) => {
  resolve("This is the second Promise"); // resolves
});

Promise.all([p1, p2])
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

// Output: 
// ["This is the first Promise", "This is the second Promise"]

In case that one of them rejects, it will only return the reason for the first rejected Promise. As shown below.

const p1 = new Promise((resolve, reject) => {
  resolve("This is the first Promise"); // resolves
});

const p2 = new Promise((resolve, reject) => {
  reject("This is the second Promise"); // rejects
});

const p3 = new Promise((resolve, reject) => {
  reject("This is the third Promise"); // rejects
});

Promise.all([p1, p2, p3])
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

// Output: "This is the second Promise"

Promise.allSettled()

This method is similar to Promise.all(). It also takes an array of Promises as an argument, but the difference is that it returns a resolved Promise after all the Promises have either been resolved or rejected. After handling the returned Promise with .then(), we get access to an array of objects with the information about each Promise.

const p1 = new Promise((resolve, reject) => {
  resolve("This is the first Promise"); // resolves
});

const p2 = new Promise((resolve, reject) => {
  reject("This is the second Promise"); // rejects
});

const p3 = new Promise((resolve, reject) => {
  reject("This is the third Promise"); // rejects
});

Promise.allSettled([p1, p2, p3])
  .then((results) => console.log(results));

// Output: [Object, Object, Object]

As seen in the example above, we get an array of objects. After looping through the results and logging the results to the console, we can see the objects with useful information about each Promise.

Promise.allSettled([p1, p2, p3])
  .then((results) => {
    results.forEach((result) => {
      console.log(result)
    })
  })

// Output: 
// {status: "fulfilled", value: "This is the first Promise"}
// {status: "rejected", reason: "This is the second Promise"}
// {status: "rejected", reason: "This is the third Promise"}

Promise.race()

This method takes an array of Promises and returns a fulfilled Promise as soon as any Promise resolves or rejects. In the example below, the third promise resolves after a second, therefore its result will be handled on the .then(), in case that a promise rejects first, the error will be handled on the .catch();

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("This is the first Promise"), 3000); 
  // resolves after 3 seconds 
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => reject("This is the second Promise"), 2000); 
  // rejects after 2 seconds 
});

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("This is the third Promise"), 1000); 
  // resolves after 1 second
});

// Promise.race()
Promise.race([p1, p2, p3])
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

// Output: "This is the third Promise"

Promise.any()

This method is basically the opposite of Promise.all(), In Promise.any() if all promises are rejected it will return an AggregateError as seen below.

const p1 = new Promise((resolve, reject) => {
  reject("This is the first Promise"); // rejects
});

const p2 = new Promise((resolve, reject) => {
  reject("This is the second Promise"); // rejects
});

Promise.any([p1, p2])
  .then((result) => console.log(result))
  .catch((err) => console.log("Error: " + err));

// Output: "Error: AggregateError: All promises were rejected"

And when the Promises resolve, it will return a Promise with the resolved value from the Promise that fulfilled the fastest. In the example below, the Promise that took only a second to resolve will be the result of the handled Promise in the .then() method.

const p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, "This is the first Promise"); 
  // resolves after 2 seconds
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "This is the second Promise"); 
  // resolves after 1 second
});

Promise.any([p1, p2])
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

// Output: "This is the second Promise"

Promises are a very interesting part of javascript as they offer various features to work with asynchronous tasks. Even though in newer versions of javascript, there are better ways to deal with asynchronous programming, it is really important to understand how Promises work.

That's it for me today! As a reminder, this guide is based on the things I've learned about promises and how I understand them. Make sure to leave your feedback on things I could improve, and I hope it will also be useful for somebody that's learning Promises. See you guys. Catch you in the next one!!! 😃

...Spread and ...Rest Operator

marlonry — Thu, 18 Feb 2021 02:49:55 +0000

Hello, today I will be talking about the Spread and Rest operator, and give sample situations where they are most commonly used. As a beginner is hard to tell which one is the right operator since they share the same syntax. However, these operators are complete opposites in the way they behave.

The first thing to understand about each of these operators is that the ... Spread operator expands arrays, strings, and objects into single elements, and the ... Rest operator combines elements into an array. This can be better understood in practice so let's dive right into each context where they are presented.

In the following examples, I will show where the Spread and Rest operators are used and show a reminder of how each of the following situations used to be done before the operators were implemented.

Spread Operator

Concatenate Arrays

const names = ["Wade", "Samantha"];
const moreNames = ["Daito", "Helen"];

const allNames = [...names, ...moreNames];

console.log(allNames); // ["Wade", "Samantha", "Daito", "Helen"]

Arrays can also be concatenated with Array.prototype.concat().

Copy Arrays

const actions = ["run", "climb", "walk"];

const actionsCopy = [...actions];

console.log(actions); // ["run", "climb", "walk"]
console.log(actionsCopy); // ["run", "climb", "walk"]

There are multiple ways to copy arrays like using the Array.prototype.slice() method.

Merge Objects

const food = { dish: 'Sushi'};
const description = {type: "Japanese", servings: 8};

const dishInfo = {...food, ...description}; // fix

console.log(dishInfo); // {dish: "Sushi", type: "Japanese", servings: 8}

Objects can also be merged or copied with Object.assign().

Expand Strings into Single Elements

const place = "The Oasis"
const elements = [...place];
console.log(elements) // ["T", "h", "e", " ", "O", "a", "s", "i", "s"]

Strings can also be split with String.prototype.split().

Pass elements as arguments to a function

const numbers = [10, 6, 3];
const multiplyNumber = (a, b, c) => {
  console.log(a*b*c);
};

multiplyNumber(...numbers); // 180

Passing elements as arguments to a function can also be done with Function.prototype.apply().

Rest Operator

Pass an indefinite amount of arguments to a function

const getTotal = (...rest) => {
  console.log(rest); // [4, 5, 1, 8, 10]
  const total =  rest.reduce((acc, currentValue) => {
    return acc + currentValue;
  }, 0);
  console.log(total); // 28
};

getTotal(4, 5, 1, 8, 10);

The arguments object can also be used when passing an indefinite amount of arguments to a function.

Using rest with Destructuring

Arrays

const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];
console.log(rest); // Output: [3, 4, 5, 6, 7]

Objects

const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // 12
console.log(b); // 43
console.log(rest); // {c: 67, d: 17}

Thank you for reading!😃 and let me know what other cool things the Spread and Rest operator can do. Happy Coding!!

Understanding Tagged Template Literals

marlonry — Sun, 07 Feb 2021 08:45:32 +0000

With the introduction of Template Literals or Template Strings, string manipulations have been made easier with features such as embedded expressions, multi-line strings as well as raw strings. See some examples below.

const str = `I am a multi-line
String`;

const expression = "expression";
const str = `I am a string with a ${expression}`;

console.log(`Normal String \nNext String`);
/* output: 
Normal String 
Next String 
*/

console.log(String.raw`Normal String \nNext String`); 
// output: Normal String \nNext String

Another interesting feature that template literals offer, is the ability to tag strings with a function and be able to manipulate the string contents in whichever way you want. Check the example below to see the syntax for a tagged template string.

function tag() {
  return "Hello";
}

const name = "Daito";
const country = "Japan";
const description = tag`My friend ${name} is from ${country}.`;

console.log(description); // Hello;

As seen in the example above, the variable "description" has the name of the function right before the string (it's been tagged). Once it has been put in place, the function gets access to an array of strings and each of the expressions that are present, Although, with the help of the ES6 spread operator, we can pass all the expressions at once which will create an array. In the example above we will get access to the following:

An array of strings:

"My friend "
" is from "
"."

An array of expressions:

"Daito"
"Japan"

Now we can use these strings and expressions as we please. In the following example, the function has 2 parameters (strings and expressions) and then displays the results to the console.

function tag(strings, ...expressions) {
  console.log(strings, expressions);
}

const name = "Daito";
const country = "Japan";
const description = tag`My friend ${name} is from ${country}.`;

// Output: ↓ 
// ["My friend ", " is from ", "."] ["Daito", "Japan"];

In case that we didn't have any starting and ending values in the description string, it will be automatically filled with an empty string at the beginning and end, which would look something like this.

const description = tag`${name} is from ${country}`;
// Output: ↓ 
// ["", " is from ", ""] ["Daito", "Japan"];

Now that we have this, the possibilities are endless since everything is running through a function, we can manipulate our strings the way we want.

function tag(strings, ...expressions) {
  let str = ``;

  for (const [i, expression] of expressions.entries()) {
    str += `${strings[i]}${expression.toUpperCase()}`;
  }

  str += strings[strings.length - 1];

  return str;
}

const name = "Daito";
const country = "Japan";
const age = "24";
const description = tag`My friend ${name} is from ${country} and he is ${age} years old.`;

console.log(description); // Output: ↓ 
// My friend DAITO is from JAPAN and he is 24 years old.

or with a reducer function: (see example below)

function tag(strings, ...expressions) {
  const str = expressions.reduce((acu, currentValue, i) => {
    return `${acu}${currentValue.toUpperCase()}${strings[i + 1]}`;
  }, strings[0]);

  return str;
}

const name = "Daito";
const country = "Japan";
const age = "24";
const description = tag`My friend ${name} is from ${country} and he is ${age} years old.`;

console.log(description); // Output: ↓ 
// My friend DAITO is from JAPAN and he is 24 years old.

As always there are more interesting things that you can do with tagged template literals rather than just changing some of the text to uppercase. I hope this gives you a good start. Thank you for reading my post and see you in the next one. 😊

5 important JavaScript array methods

marlonry — Thu, 04 Feb 2021 08:11:38 +0000

Arrays are a crucial part of any programming language. Arrays are commonly used on a daily basis in any type of project and knowing how to interact with arrays will make your journey more enjoyable.

Before talking about the Array methods, first, let's understand what an Array is:

Arrays are a data structure that can store any type of data. These can contain a combination of elements, such as strings, numbers, or boolean values. For example an array of movie names or an array of numbers as shown on the example below:

const films = ["Harry Potter", "Tenet", "Mulan", "Wonder Woman"];

const numbers = [1, 34, 23, 17, 10, 7];

Now that we know what Arrays are, we can move on to talk about some Array methods that are really important.

For the examples below, I will be using the following Array of objects to illustrate the different Array methods. The Array contains various information about movies, such as name, year, and rating as shown below.

const films = [
  { name: "Tenet", year: 2020, rating: 7.5 },
  { name: "Wonder Woman 1984", year: 2020, rating: 5.4 },
  { name: "The Karate Kid", year: 1984, rating: 7.3 },
  { name: "Avengers: Endgame", year: 2019, rating: 8.4 },
  { name: "The Godfather", year: 1972, rating: 9.2 },
  { name: "Godzilla", year: 2014, rating: 6.4 },
  { name: "The Croods: A New Age", year: 2020, rating: 7.0 }
];

Filter

As the name indicates, the filter method can be used to filter or extract any type of information from an array based on a condition. This returns or creates a new array with the filtered items. In the following example, we get all the films that were released before the year 2000.

const filteredFilms = films.filter(film => {
  return film.year < 2000; // condition
});

/*
Output: filteredFilms = [
  { name: "The Karate Kid", year: 1984, rating: 7.3 },
  { name: "The Godfather", year: 1972, rating: 9.2 },
]
*/

Map

The Map method allows you to iterate through all the items in the array to carry out a specific task based on the provided function. Map will also create a new array with the results. In the following example, we are getting the names of all the films.

const filmNames = films.map((film) => {
  return film.name;
});

/*
Output: ["Tenet", "Wonder Woman 1984", "The Karate Kid", 
"Avengers: Endgame", "The Godfather", "Godzilla", 
"The Croods: A New Age"]
*/

ForEach

The Foreach method also allows us to iterate through all the items in an array but the difference is that it won't create any new array but rather it will execute the provided function on each item. In the following example, we are displaying on the console, a string with the name of the film and its rating.

films.forEach((film) => {
  console.log(`${film.name} has a rating of ${film.rating}`);
});

/*
Output: Tenet has a rating of 7.5 
Wonder Woman 1984 has a rating of 5.4 
The Karate Kid has a rating of 7.3 
Avengers: Endgame has a rating of 8.4 
The Godfather has a rating of 9.2 
Godzilla has a rating of 6.4 
The Croods: A New Age has a rating of 7 
*/

Find

The find method returns the first item on the array that passes the condition on the provided function. In the case that there are no items that satisfy the condition, it will simply return "undefined". In the following example, we are passing a testing function to find the name of a film.

const foundFilm = films.find((film) => {
  return film.name === "Avengers: Endgame"; //condition
});

// Output: {name: "Avengers: Endgame", year: 2019, rating: 8.4}

Reduce

And finally, we have the reduce method which is a bit confusing to understand. It allows us to iterate every item in the array and combine everything into a single result by passing a reducer function and an optional initial value. This reducer function takes 4 different arguments.

Accumulator
Current Value
Current Index
Source Array

The arguments that were are going to worry about for now are the accumulator (which is the current total on each iteration) and the current value (which gives you access to the current item on each iteration).

In the following example, we are passing a reducer function that adds the ratings of each film and an initial value of 0, and then display the average on the console.

const total = films.reduce((currentTotal, currentValue) => {
  return currentTotal + currentValue.rating;
}, 0);

// total = 51.199999999999996

console.log(total / films.length); // 7.314285714285714

That's it for me today. Thank you for reading my first DEV blog post. I will keep posting more content related to web development, programming, and things I've learned. Happy coding! 😃 catch you in the next one.