Forem: Param Bedi

JS Array Methods - Map, Filter and Reduce

Param Bedi — Sun, 20 Jul 2025 10:56:35 +0000

So this is day 2 for me on covering all the basics required to prepare for js interview. Today I am going to cover Array methods - Map, Filter and Reduce.

Map

So, Map is an array method used to create a new array by applying a function to each element of the input array.

const nums = [1, 2, 3, 4];

const multipliedTwo = nums.map((val, index, arr) => {
    return val * 2;
})

console.log(multipliedTwo); // [ 2, 4, 6, 8 ]

Filter

Filter is an array method used to apply condition on each element of the input array and keep the ones that satisfies the condition.

const evenNums = nums.filter((val) => {
    return val % 2 == 0;
});

console.log(evenNums); // [ 2, 4 ]

Reduce

Reduce is an array method that Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.

const sum = nums.reduce((acc, val) => {
    return acc + val;
}, 0);

console.log(sum); // 10

Before diving into some interview questions, lets understand prototype feature provided by js.

Array.prototype is a core js feature that refers to the object from which all js arrays inherit.
Note: Array inherits from array.prototype which inherits from Object.prototype.

Interview Questions based on prototype, map, filter and reduce

Write a polyfill for map function?

Note: Polyfill means a function manually written for a functionality that is not supported on older web browsers.

Array.prototype.myMap = function (callBackFn) {
    let result = [];
    for (let i = 0; i < this.length; i++) {
        result.push(callBackFn(this[i], i, this));
    }
    return result;
};

const multipliedThree = nums.myMap((val) => {
    return val * 3;
});

write a polyfill for filter function?

Array.prototype.myFilter = function (callBackFn) {
    let result = [];
    for (let i = 0; i < this.length; i++) {
        if (callBackFn(this[i], i, this)) result.push(this[i]);
    }
    return result;
};

const oddNums = nums.myFilter((val) => {
    return val % 2 !== 0;
})

write a polyfill for reduce function?

Array.prototype.myReduce = function (callBackFn, initialValue) {
    let acc = initialValue;
    for (let i = 0; i < this.length; i++) {
        acc = acc ? callBackFn(acc, this[i], i, this) : this[i];
    }
    return acc;
}

const sumNums = nums.myReduce((acc, val) => {
    return acc + val;
});

Differences btw map and forEach?

Map is used to return a new array where as forEach is used to iterate through array and doesn't return anything.
We can chain array functions on map whereas not possible through forEach.

const isMoreThan3Multiple = nums.map((val) => {
    return val * 2;
}).filter((val) => val > 3);

Write a function to return total of students marks after 20 marks are added to the students less than 60.


let students = [
    { name: "param", rollNumber: 25, marks: 80 },
    { name: "srijan", rollNumber: 37, marks: 73 },
    { name: "shitiz", rollNumber: 38, marks: 15 },
    { name: "arun", rollNumber: 1, marks: 11 },
]

console.log(students.reduce((acc, stu) => {
    let newVal = stu.marks < 60 ? stu.marks + 20 : stu.marks;
    return acc + newVal;
}, 0));

Difference between let, var and const

Param Bedi — Sat, 19 Jul 2025 08:42:46 +0000

So after a long while, I finally decided to switch companies. And it is the perfect time to polish on the basics before I deep dive in interviews. As a Frontend developer, basics matters a lot. In javascript, I think day 1 should be for, how let, var and const works and what are their differences. So this is my way of writing and learning once again the basics. lets start...

Scoping

It is worth noting how the variables are scoped. When declaring variables, if its done with var, its in global/functional scope where as if the variables are declared with let/const, its always block scoped. Lets take an example -

function varScope() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 - accessible due to function scope
}

function letScope() {
  if (true) {
    let y = 20;
  }
  console.log(y); // ReferenceError - y is block scoped
}

{
   const a = 10;
}
console.log(a); // ReferenceError - a is block scoped

Shadowing

A variable declared in inner scope of a block with the same name as in outer scope shadows (overlaps) the outer one. lets take an example -

In case of let and const, shadowing happens...

let a = 100;
{
  let a = 200;
  console.log(a); // 200 - inner 'a' shadows the outer one
}

console.log(a); // 100 - outer scope unchanged

but if you use var in block scope with a let in outer, it will give error as var is global scope which means there will be 2 declarations in global scope at the same time.

let b = 10;
{
  var b = 20; // SyntaxError: Identifier 'b' has already been declared
}

Redeclaration

var _allows redeclaration where as _let, const doesn't allow redeclaration in the same scope.

var name = 'Alice';
var name = 'Bob'; // Allowed

let city = 'Paris';
let city = 'London'; // SyntaxError - cannot redeclare block-scope variable

const PI = 3.14;
const PI = 3.14159; // SyntaxError - cannot redeclare block-scope variable

Declaration without initialization and Reassigning

var and let variables can be declared without initialization and reassigned where as const needs to be initialized at the time of declaration and cannot be reassigned.

var a; // Correct
let b;  // Correct
const c; // SyntaxError: Missing initializer in const declaration

var x = 10;
x = 15; // correct

let y = 20;
y = 25; // correct

const z = 30;
z = 35; // TypeError: Assignment to constant variable

Hoisting

A JS program consists of 2 phases - creation phase and execution phase.

During Creation phase, JS engine creates global/window object and allocates heap memory for declaration of variables.

During this phase, all variables and functions are moved to top of the code and declared. variables are initialized _undefined _whereas whole function is declared. This is called hoisting.

Remember, var is hoisted but let, const are not (they are hoisted technically but in temporal deadzone which means they are in the scope but not declared yet).

console.log(price); // undefined (hoisted)
var price = 100;

console.log(message); // ReferenceError (not initialized)
let message = "Hello";

Note: The temporal dead zone is the time between entering scope and the variable's actual declaration where let and const exist, but accessing them throws an error.

Final Notes:

Avoid using var in modern JS code unless absolutely necessary.
Prefer let for variables that need reassignment.
Use const by default for immutable references.