DEV Community: Aastha Talwaria

Volume of lakes

Aastha Talwaria — Mon, 10 Oct 2022 08:51:49 +0000

Given an array of positive integers representing 2-D bar heights, design an algorithm that can compute the total volume of water that could be held in all lakes on such an island given an array of the heights of the bars. Assume an elevation map where the width of each bar is 1 unit.
Example Given Array of heights [1,3,2,4,1,3,1,4,5,2,2,1,4,2], return 15 (3 bodies of water with volumes of 1,7,7 yields total volume of 15).

Input: [1,3,2,4,1,3,1,4,5,2,2,1,4,2]
Output: 15

My Approach:

Iterate the Array of heights.
- Find maximumBefore(maximum height before the current height)
- Find maximumAfter(maximum height after the current height)
- If current is greater than maximumBefore or maximumAfter, update maximumBefore and continue, else the volume at current height will be (minimum of maximumAfter, maximumBefore) - height.

CODE:

var a = [1,3,2,4,1,3,1,4,5,2,2,1,4,2];
function getVolume (arr) {
    let maxBefore = 0;
    let answer = 0;
    let maxAfter = 2;
    for(var i = 1; i < arr.length-1; i++){
        if(arr[i] >= arr[maxBefore]) {
            maxBefore = i;
            continue;
        }
        if(i >= maxAfter){
            let max = i+1;
            for(var innerIndex =i+1; innerIndex< arr.length; innerIndex +=1) {
                if(arr[max]<=arr[innerIndex]) {
                    max= innerIndex;
                }
            }
            maxAfter = max;
        }
        if(arr[i] < arr[maxBefore] && arr[i] < arr[maxAfter]) {
            answer += Math.min(arr[maxBefore], arr[maxAfter])-arr[i];
        }
    }
    return answer;
}
let sol = getVolume(a);
console.log('volume of lakes: ',sol); //volume of lakes: 15

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.

Let's split and count

Aastha Talwaria — Tue, 29 Mar 2022 14:01:53 +0000

Given a string of letters and we have to find the number of times the string can be splitted in such a way that atleast one the splitted string have equal number of occurance of x and y.

Example:
Let's say string is ayxbx. So possible case are:

a and yxbx
ay and xbx
ayx and bx
ayxb and x

Out of these possible cases only 2nd case (ay and xbx) does not satisfy the condition.(ay has 1 'y's and 0 'x's, xbx` has 0 'y's and 2 'x's).

My Approach:

Split and count
`

function getCount (str){
let strLength = str.length;
if(strLength < 2){
    return 0;
}
let count = 0,
    firstStringLettersCount = { x: 0, y:0 },
    secondStringLettersCount = { x: 0, y:0 };

for(let i = 0; i < strLength; i++){
    secondStringLettersCount[str[i]] += 1;
}

for(let i = 0; i < strLength-1 ; i++){
    firstStringLettersCount[str[i]] += 1;
    secondStringLettersCount[str[i]] -= 1;
    if(
        firstStringLettersCount['x'] === firstStringLettersCount['y'] ||
        secondStringLettersCount['x'] === secondStringLettersCount['y']
    ){
        count++;
    }
}
return count;
}

STRAPI - Fetching data belongs to a model through another relationship (Graph database)

Aastha Talwaria — Mon, 14 Mar 2022 07:35:22 +0000

Suppose we have the following in schema:

country
homepage
topics
sources
sections
articles

And this is how they are related

homepage has one country.
homepage has many topics.
homepage has many sources.
topics belongs to many sections.
sources belongs to many sections.
sections belongs to many articles.

Requirement:
Get top 10 the articles for homepage having country id as countryId sorted by attribute_name.

My Approach:

async function findTopArticleByCountryId({ countryId, sortBy = 'likeCount' }) {
  try {
    const response = await strapi.connections.default.raw(
      `SELECT * FROM articles WHERE section IN (
        SELECT id FROM sections WHERE 
        topic IN (
          SELECT id FROM topics WHERE homepage IN (
            SELECT id FROM homepage WHERE country = ${countryId}
          )
        )
        OR service IN (
          SELECT id FROM sources WHERE homepage IN (
            SELECT id FROM homepage WHERE country = ${countryId}
          )
        )
      ) ORDER BY ${sortBy} DESC LIMIT 10;`
    );
    const [articles] = response;
//sanitize articles entity
    return articles;
  } catch (e) {
    console.log(e);
    return false;
  }
}

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.

i18n in STRAPI

Aastha Talwaria — Mon, 14 Mar 2022 07:35:08 +0000

As per wikipedia

Internationalisation and Localisation, often abbreviated i18n and L10n, is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes.

Let's take an example use-case; so that we both are on the same page.

We have one collection named home-page having the following fields. ( My use-case was to provide support for 4-5 languages, may require more in future).

where banner(single component) and brand(repeatable component) are components.
Fields description:

title - home-page having three fields title, title_ar, title_ru, values of title English(en), Arabic(ar) and Russian(ru) language repectively.
Banner and Brand - title in banner and name in the brand are language-dependent and the rest of the fields are the same for all languages. - And, when selected languageCode is ar, my frontend will need title = titile_ar in response for banner and name = name_ar in response for brand.

My Approach ( didn't use any plugin ):

Made a file specifying the language dependent fields.

This is generated automatically (based on the collection) when server starts.
projec_dir/constants/i18n.config.json

{
  "home-page": [
    "title"
  ],
  "component.banner-component": [
    "title"
  ],
  "component.brand-component": [
    "name"
  ]
}

get data from the model using find, findOne or any other customised service.
fetch schema of the model (required for the name of the attribute to get language dependent fields from the JSON imported from project-dir/constants/i18n.config.json)
replace ${field} with ${field}${languageCode}.
delete ${field}${languageCode}.

Code:

project_dir/constants/i18n.constants.js

const i18nFields = require('./i18n.config.json');
const DEFAULT_LANGUAGE = 'en';
const LANGUAGE_LIST = ['en', 'ar', 'ka', 'ru', 'uzb'];
const I_18_FIELDS = i18nFields;
const I18N_LIST = ['home-page'];

module.exports = {
  DEFAULT_LANGUAGE,
  LANGUAGE_LIST,
  I_18_FIELDS,
  I18N_LIST,
};

project_dir/utils/i18n.utils.js

 const _ = require('lodash');
const {
  LANGUAGE_LIST,
  DEFAULT_LANGUAGE,
} = require('../constants/i18n.constants');

function internationalizeFields(components, langCode, fields) {
  if (!components) {
    return undefined;
  }
  const i18Component = { ...components };
  if (fields) {
    fields.forEach((field) => {
      const currentLanguageFieldValue = _.get(
        i18Component,
        `${field}_${langCode}`
      );
      if (langCode !== DEFAULT_LANGUAGE) {
        _.set(i18Component, field, currentLanguageFieldValue);
      }
      LANGUAGE_LIST.forEach((lang) =>
        _.unset(i18Component, `${field}_${lang}`)
      );
    });
  }
  return i18Component;
}
module.exports = {
  internationalizeFields,
};

project_dir/utils/strapi.util.js

/* global strapi */

function getAttributes({ modelName }) {
  try {
    return strapi.api[modelName].models[modelName].__schema__.attributes;
  } catch (err) {
    //throw error
  }
}
function addComponentSchema({ parentSchema }) {
  const result = Object.keys(parentSchema).reduce((acc, curr) => {
    acc[curr] = parentSchema[curr];
    if (parentSchema[curr].type !== 'component') {
      return acc;
    }
    const component = strapi.components[acc[curr].component];
    if (!component) {
      throw error
    }
    acc[curr].schema = component.attributes;
    acc[curr].schema = addComponentSchema({ parentSchema: acc[curr].schema });
    return acc;
  }, {});
  if (!result || Object.keys(result).length === 0) {
    //through error
  }
  return result;
}

module.exports = {
  getAttributes,
  addComponentSchema,
};

project_dir/utils/controller.util.js


const { DEFAULT_LANGUAGE } = require('../common/constants/i18n.constants');
const { I_18_FIELDS } = require('../common/constants/i18n.constants');
const { internationalizeFields } = require('../common/utils/i18n.utils');
const { getAttributes, addComponentSchema } = require('./strapi.utils');

/**
 * @param {*} modelName modelName for keys in I_18_FIELDS
 * @param {*} data data to be internationlised
 * @param {*} schema schema corresponding to modelName
 * @param {*} lang
 * @returns internationalised data
 */
async function internationalizeData({
  modelName,
  data,
  schema,
  lang = DEFAULT_LANGUAGE,
}) {
  if (!data) {
    return data;
  }
  if (!schema) {
    const modelSchema = getAttributes({ modelName });
    schema = addComponentSchema({ parentSchema: modelSchema });
  }
  const schemaKeys = Object.keys(schema);
  if (!schemaKeys.length) {
    return data;
  }
  if (Array.isArray(data)) {
    data.forEach(async (entry, index) => {
      data[index] = await internationalizeData({
        modelName,
        data: entry,
        schema,
        lang,
      });
    });
    return data;
  } else {
    data = internationalizeFields(data, lang, I_18_FIELDS[modelName], null);
  }
  schemaKeys.forEach(async (curr) => {
    if (
      schema[curr] &&
      (schema[curr].type === 'component' || schema[curr].collection)
    ) {
      if ((schema[curr].repeatable || schema[curr].collection) && data[curr]) {
        data[curr].forEach(async (entry, index) => {
          data[curr][index] = await internationalizeData({
            modelName: schema[curr].component || schema[curr].collection,
            data: entry,
            schema: schema[curr].schema,
            lang,
          });
        });
      } else if (modelName.indexOf('.') === -1) {
        data[curr] = await internationalizeData({
          modelName: schema[curr].component,
          data: data[curr],
          schema: schema[curr].schema,
          lang,
        });
      }
    }
  });
  return data;
}
module.exports = {
  internationalizeData,
};

project_dir/api/homepage/controller.js

/* global strapi */

const { sanitizeEntity } = require('strapi-utils');
const { internationalizeData } = require('../../../utils/controller.util');

async function findOne(ctx) {
  const { id } = ctx.params;
  const { lang } = ctx.request.header;
  const entity = await strapi.services['home-page'].find({ id });
  const sanitizedEntity = sanitizeEntity(entity, {
    model: strapi.models['home-page'],
  });
  const data = internationalizeData({
    modelName: 'home-page',
    data: sanitizedEntity,
    schema: null,
    lang,
  });
  return data;
}
module.exports = {
  findOne,
};

Similarly, you can do for other apis.

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.

Find Value at Key

Aastha Talwaria — Wed, 09 Feb 2022 12:39:17 +0000

Problem Statement:

Write method findPath
Should take two params:
- object
- keys separated by dots as string
Return value if it exists at that path inside the object, else return undefined

My Approach:

Initialise answerObject as the original Object.
Split the string with ..
Traverse the spitted array.
- Update answerObject with the value read from iterated key.
- If answerObject is not undefined, then continue.
- Else break.
Return answerObject.

CODE:

var obj = {
    a: {
        b: {
            c: 12,
            j: false
        },
        k: null
    }
};

function findPath(obj, str=''){
    var ansObj = JSON.parse(JSON.stringify(obj));
    var attributes = str.split('.');
    if(!attributes.length){
        return undefined;
    }
    let index = 0;
    while(attributes[index]){
        if(ansObj[attributes[index]]!== undefined){
            ansObj = ansObj[attributes[index]];
        } else {
            ansObj = undefined;
            break;
        }
        index++;
    }
    return ansObj;
}
//Output: 
console.log(findPath(obj, 'a.b.c')); // 12
console.log(findPath(obj, 'a.b')); // {c: 12, j: false}
console.log(findPath(obj, 'a.b.d')); // undefined

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.

Add 1 to the Number(Wrapped in linked List)

Aastha Talwaria — Tue, 09 Mar 2021 09:02:40 +0000

Add one to the Number wrapped in LinkedList

(Benefits of LinkedList: no limits for a number)
Given a linked list denoting a number (each key will have numbers from 0-9), implement a function for adding 1 to it.
Example - For number 7899, Linked List would be [7, 8, 9, 9]
If you add 1 to 7899, you get 7900 which is [7, 9, 0, 0]

Input1:  [7, 8, 9, 9]
Output1: [7, 9, 0, 0]

My Approach:

The idea is to solve the problem by the backtracking technique.
As when we add the multi-digit number, we start from the end. Thus, carrying a borrow from last to first digit we get our answer. I will follow the same approach in my code.

CODE:

//function converting nums in linkedList
function getLinkedList ( ...arr ) {
    let nodesArray = [];
    for( var index=0; index<arr.length; index++ ) {
        nodesArray.push({
            digit: arr[index],
            next:null
        })
    }
    for( var index = 0; index < nodesArray.length-1; index++ ) {
        nodesArray[index].next = nodesArray[index+1];
    }
    if(nodesArray.length){
        return nodesArray[0];
    }
}
//prints the linkedList's digits in an Array.
function printList(list) {
    let arr = [], node = list;
    while(node != null) {
        arr.push(node.digit);
        node = node.next;
    }
    console.log(arr);
}
let list = getLinkedList(7, 8, 9, 9);

printList(list); // [7, 8, 9, 9]

let num =1;//number to be added

//function which will add one to the number
function addOne(_list) {
    //to achieve backtracking calling function before implementation till end
    if(_list.next != undefined){
        addOne(_list.next);
    }
    _list.digit += num;
    //borrow will be in case of sum 10 or greater than ten
    if(_list.digit>10){
        _list.digit = 10-_list.digit;
        num = 1;
    } else if(_list.digit=== 10){
        _list.digit = 0;
        num = 1;
    } else {////borrow will be zero when sum is less than 10
        num =0;
    }
    //to handle all nine case, 
    //example in case of 9999, answer will be 10000
    if(list === _list && num!= 0 ){
        //creating new node for the last borrow (1), in case of all nine
        list = {
            digit : num,
            next: list
        }
    }
}
addOne(list);
printList(list); // [7, 9, 0, 0]
//in case of[9, 9, 9, 9], the output is [1,0,0,0,0]

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.

Separate -ives and +ives maintaining their order

Aastha Talwaria — Sun, 07 Feb 2021 12:49:55 +0000

Move all negative numbers to the beginning and positives to end, maintaining their order

An array contains both positive and negative numbers in random order. Rearrange the array elements so that all negative numbers appear before all positive numbers and the order of their occurrence in the given array should be maintained(order of negatives among negatives and positives among positives).

Input: [3, 5, -9, -8, 1 , 2, -10, -11, 15, 20, -20, 22]
Output: [-9, -8, -10, -11, -20, 3, 5, 1, 2, 15, 20, 22]

NOTE: Order of elements is important here.

My Approach(without using extra space):

The idea is to solve the problem by dividing the array into four parts at each step when we want to shift the elements while iterating the array ( shifting condition will be arr[index]<0).
Steps:
- iterate through the list
- At every step, when a negative number encountered, slice the array in four parts say
  - first part: the part with the negatives.
  - the mid part: which we have to shift after the encountered negative number
  - the -ive number.
  - the last part, which is not iterated.

CODE:

let a = [3, 5, -9, -8, 1 , 2, -10, -11, 15, 20, -20, 22];
var nIndex = 0;
for(var index = 0; index    < a.length ; index++){
    if(a[index]<0){
        //negatives array
        let negativesArray= a.slice(0, nIndex);
        let midArray = a.slice(nIndex, index);
        let neg_num = a[index];
        let endArray = a.slice(index+1);
        a= [...negativesArray, neg_num,...midArray,...endArray];
        nIndex++;
    }
}
console.log(a) //output: [-9, -8, -10, -11, -20, 3, 5, 1, 2, 15, 20, 22]

Let's discuss your approach in the discussion box or you can hit me up at aastha.talwaria29@gmail.com.

Thanks for reading.

The walk: On Closures

Aastha Talwaria — Sun, 28 Jun 2020 06:26:31 +0000

Closures in JavaScript is a feature where an inner function can access the outer function's variables. The concept of closures revolves around the term :
lexical scope or scope chain

The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.
So, we can say that an inner function has three scope chains:-

variables defined in its own scope
variables defined in outer function’s scope
and the global variables

Let's understand this by looking at an example.

function getNameFunction(){
    var initialWord = 'The ';
    function getName(){
        var title = 'Walk';
        return initialWord+title;
    }
    return getName;//returning the function
}

var output = getNameFunction();//outut will carry getName function ref.

In the above example, we have two functions getNameFunction(outer function) and getName(inner function).
'getNameFunction' has local variable named as 'initialWord' and a function 'getName' and returns 'getName' which is actually a function ( Note: 'getNameFunction'is not executing the function, it simply returning the body of the function 'getName' ). Now after returning the 'getName', all the variable in the scope of the outer function no longer exists.

Wait, Did you read that? the variable no longer exists.

Then how will our getName(inner function) function survive in the outer world as its dependent on the variable of the outer function (initialWord)?
Don't worry! JavaScript makes this function survive with the help of closures.

The lifespan of a variable defined inside of a function is the lifespan of the function execution. In this case, output is a reference to the instance of the function getName() created when getNameFunction() is invoked. The instance of getName maintains a reference to its lexical environment, within which the variable initialWord exists. Witness this by using below mentioned code

output();//returns: The walk

What if the inner function changes the outer function's variable value.

Will that make any difference when we call the outer function again. Let's dig more into closures with next example.

function getFunctionByType(type){
    var initialValue = 5;//initial value
    function getValue(){//inner function
        if(type === 'increment'){
            return ++initialValue;//changing the value of variable defined in outer function scope
        } else if(type === 'decrement') {
            return --initialValue;//changing the value of variable defined in outer function scope
        } else {
            return initialValue;//changing the value of variable defined in outer function scope
        }
    }
    return getValue; //returning inner function 
}
var incrementFunction = getFunctionByType('increment');
var decrementFunction = getFunctionByType('decrement');

In the above example, the outer function has two local variables type and initialValue and a function getValue which is using the variables of its surrounding function getFunctionByType and changing their values.

Let's invoke incrementFunction and decrementFunction.

incrementFunction();//returns 6
decrementFunction();//returns 4

Is this what you expected. If no, then don't worry, I will explain.
When we invoked getFunctionByType for the first time, the function creates the fresh variable and initialize its value. And those values are accessed by the getValue instance function stored in incrementValue. That instance then maintains the reference of its lexical environment, within which the variable type and initialValue exists and outer scope vanishes.
For the second time invoke, getFunctionByType creates its local variable again fresh with the mentioned initial values and creates the function getValue and returns it.
Which means, the two instances of getValue have a separate world. They don't share anything. Both of them is having their own lexical scope and outer function's variables. If one changes the value of its outer function, that will not affect the values of second.

How JavaScript maintains it.

The answer is by maintaining the scopes. First of all, when js encounters a variable it looks for that variable in the inner scope. If that is not present in the inner scope it goes for its outer scope. To check for the above example, you can see all the properties of the getName() instance by using console.dir(incrementFunction) and console.dir(decrementFunction).

//incrementFunction whose properties should be output
console.dir(incrementFunction);

NOTE: console.dir() is the way to see all the properties of a specified JavaScript object in the console by which the developer can easily get the properties of the object.

So, by expanding the properties, in Scopes, you will see Closure where the function name is given(getFunctionByType) and its variables are present(type, initialValue).

So, this was all about Closures from my side.

If you want to ask or share anything about closures, and this post then start a discussion (in discussion box mentioned below) or you can hit me up at aastha.talwaria29@gmail.com.

And if you have any suggestions for my next article then please let me know.

Thanks for reading.

Array's Avengers: forEach(), filter(), map() and reduce()

Aastha Talwaria — Fri, 29 May 2020 12:56:51 +0000

If you are reading this, you must know what arrays are?
So, here's a quick intro of arrays.

Arrays

A special variable used to store multiple variables.
Example

//basic example of an array
var avengers = ["Iron man", "Captain America", "Thor"];

You can also store variables having different data types in an array of javascript.

Ok! So let's start with the four avengers of arrays which are:

forEach()
filter()
map()
reduce()

We know these are different but we don't care how?.
Let's learn about these functions in detail.

Starting with...

1.) forEach()

forEach() works just like well known for loop which allows you to perform some action on all the elements one by one.

Syntax
array.forEach(callback(currValue , index , array), thisArg)

callback(mandatory) : The function which will be executed for each element. And it accepts three arguments which are:
- currValue(optional) : aka currentValue, value on which the function is being processed.
- index(optional) : the index of the current Value in array.
- array(optional) : array for which forEach function is called.
thisArg(optional) : value of the context(this) while executing the callback function.

The 'currValue', 'index' and 'array' are optional. But, if you don't need any of these, you must be executing piece of code array.length (returns an integer equal to length of array) times.

function Calculator() {
  this.count = 0;
}
//adding 'addition' function to 'Calculator' which will take array as a parameter.
Calculator.prototype.addition= function(array) {
  /*for 'addition', 'this' will be same as of Calculator's 'this' and
 'sum' will be another attribute just like 'count'.*/
  this.sum = 0;
  array.forEach((currentValue, index, array) => {
    /* array: array which will be passed while calling the Calculator.addition function.
    index: will be index of currentValue in array */
    this.sum += currentValue;    //adding currentValue to sum
    ++this.count;
  }, this);//passing 'this', to pass the same context as Calculator to access sum and count of 'Calculator' 
}

const obj = new Calculator();
//taking a random array as an example
obj.addition([8, 12, 5]);
console.log("Count: ", obj.count);//Count: 3
console.log("Sum: ", obj.sum);//Sum: 25

In the above-mentioned example, we are calculating sum of all the elements of the array and finding the count of elements using forEach().
**you can skip the optional fields(which are index, array, currentValue and thisArg) if you do not want to use them.

2.) filter()

Unlike forEach() (just iterates over the array), filter() allows the filtering of an array based on the return type of the callback given to it. The filter() method creates an array filled with all array elements that pass a test implemented by the provided function(callback).
Yes, you are right! the filter() takes a callback as an argument whose return value decides the output.

Syntax
var result_array = array.filter(callback(currValue, index, array), thisArg)

callback(mandatory) : The function which will be executed for each element whose returned value will decide the output(if it returns true filter() will add the currValue to the filtered array else it will skip currValue). And it accepts three arguments which are:
- currValue(optional) : aka currentValue, value on which the function is being processed.
- index(optional) : the index of the current Value in array.
- array(optional) : array for which filter() is called.
thisArg(optional) : value of the context(this) while executing the callback function.

Example

function Movies(){
 this.moviesCount = 0; 
 this.watchedMovies = null;
}
Movies.prototype.getWatchedMovies = function(array, watched_topic){
 this.watchedMovies = array.filter((value, index, array)=>{
  /* array: An array which will be passed while calling the 
  Movies.getWatchedMovies function.
    index: will be index of currentValue in array */
  if(value.indexOf(watched_topic) !== -1){
    ++this.moviesCount;//incrementing count when its learned
    return true; //returning true to include learned value in filtered array
  } else {
   return false;//returning false, to not include these value in filtered array
  }
 }, this);//passing 'this', to pass the same context as Movies to access moviesCount of 'Movies' 
}
let obj = new Movies();
let movies_array = ["Captain America: The First Avenger", "Captain America: Civil War", "Iron Man", "Iron Man 2"]
obj.getWatchedMovies(movies_array, "Iron Man");
console.log("Watched movies: ",obj.watchedMovies);//Watched movies: array(2) ["Iron Man", "Iron Man 2"];
console.log("Count: ", obj.moviesCount);//Count: 2

In the above-mentioned example, we filtered the movie's array using the 'watched_topic'. If we check our array(on which we applied filter) after filtering, it will not change. That means, the filter does not change or update the existing array, it gives the new filtered array every time.

Difference between forEach() and filter() is that forEach() iterates the array and executes the callback but filter executes the callback and check its return value and on basis of that return value it decided what should be put inside the filtered array (when the return value is 'true', then it adds the currValue to a final array and in case it gets 'false' filter ignores that currValue).

3.) map()

Like forEach() and filter(), map() takes a callback function and executes that callback for each element of the array.
map() returns a new array populated with the result of calling the callback on every element.

Syntax
var result_array = array.map(callback( currValue, index, array) { // return element for result_array }, thisArg)

callback(mandatory) : The function which will be executed for each element whose returned value will be added in the resulting array. And it accepts three arguments which are:
- currValue(optional) : value on which the function is being processed.
- index(optional) : the index of the current Value in array.
- array(optional) : array for which map() is called.
thisArg(optional) : value of the context(this) while executing the callback function.

Example

var getMoviesStatus = function( movies_array, watched_topic){
/*in this example, I don't want index , movies_array and 
'this' argument inside the callback given to map(). Hence, skipping them.*/
 var moviesStatus = movies_array.map((currentValue)=>{
  if(currentValue.indexOf(watched_topic) !== -1){
   return {currentValue: "watched"};//returning 'watched' status when that movie is watched
  } else {
   return {currentValue: "pending"};//returning 'pending' status
  }
 })
 //returning the map() result, aka moviesStatus
 return moviesStatus;
}

let movies_array = ["Captain America: The First Avenger", "Captain America: Civil War", "Iron Man", "Iron Man 2"];
console.log(getMoviesStatus( movies_array, "Iron Man"));
//[{"Captain America: The First Avenger": "pending"}, {"Captain America: Civil War": "pending"}, {"Iron Man": "watched"}, {"Iron Man 2": "watched"}];

In the above example, we enhanced our previous example in which we were filtering the movies array using 'watched_topic'. But now, we are returning an array of objects having movies and their status.
Our callback is returning an object during its execution for each element having currentValue (which will be movie name in our case) and it's status. map() will take those objects and populate them in an array and will return that.
Unlike filter(), map() populates the values returned by the callback provided to it upon completion

4.) reduce()

Last but not least.
reduce() also takes the callback and executes that callback for all the elements of the array but unlike filter() and map(), it does not returns an array. It takes the reducer function (your callback), and executes it for each element and reduce the array to the single value.

Syntax
var result = array.reduce(callback( accumulator, currValue, index, array ), initialValue)

callback(mandatory) : The function which will be executed for each element (except for the first element, when initialValue is not provided). And it accepts following arguments which are:
- accumulator(optional) : The accumulator accumulates the return value of callback. It is the value returned by the callback during its execution for the last iteration. For the first iteration, its value will be equal to initialValue if initialValue is provided else it will be initiated with the first element of the array for which reduce() is called.
- currValue(optional) : value on which the function is being processed.
- index(optional) : the index of the current Value in array. reduce() starts iteration from index = 0, when initialValue is provided. Otherwise, it starts with index = 1.
- array(optional) : array for which reduce() is called.
initialValue(optional) : if initialValue is provided, the first iteration will start from index = 0 and accumulator's value(for first iteration) will be equal to initialValue. Otherwise, the first iteration will start from index = 1, and the accumulator's value(for the first iteration) will be equal to array[0]. See the example for better understanding. If the array is empty and no initialValue is provided, TypeError will be thrown. Example

//this function will calculate sum
var getSum = function (array, initialValue){
    ///callback will be passed to the reduce() 
    let callback = function(accumulator, currValue){
        return accumulator+currValue;
    }
    if(initialValue != undefined){
        //when initial value is provided passing it to the reduce
        return array.reduce(callback, initialValue);
    } else {
        return array.reduce(callback);
    }
//You can skip the if-else case by giving 0 as a default value to initialValue.
}
//calling the getSum function without initialValue
console.log(getSum([12, 8, 6, 7]));//33
//calling the getSum function with initialValue
console.log(getSum([12, 8, 6, 7], 5));//38

First of all, I apologize to Avenger's fan for not taking the avenger related example. I found this example more suitable for understanding the concept.

So coming to the point, in the above-mentioned code snippet, we have calculated the sum of the elements of the array.
In case, you provided undefined initialValue to reduce(), it will take that and will try to add elements to that. Which will give NaN at the end

At the first calling of the getSum function, we called it without initial value. That means, reduce() with start its iteration with index = 1 and accumulator's value will be initiated with 12(first element of provided array).
Whereas, while calling the getSum next time, we provided initialValue '5'. This means, this time reduce() will start its iteration with index = 0, and the accumulator's value will be initiated with 5(provided initialValue).

So, this was all about the avengers of arrays.

If you want to ask or share anything about our avengers, our array's avengers, and this post then start a discussion (in discussion box mentioned below) or you can hit me up at aastha.talwaria29@gmail.com.

And if you have any suggestions for my next article then please let me know.

Thanks for reading.