Javascript Interview Preparation — Part 1

3 min readNov 14, 2022

Hi everyone, in this series of articles, we will be going through some regular and essential concepts of core JS that are asked during interviews. This series will surely make you a better JS developer in one way or another. Please don’t forget to follow if you like this article, will provide more such articles in coming future. With this let’s get started…

Implicit v/s Explicit Binding

var obj = {
  name: "wisdomBearer",
  display: function(){
    console.log(this.name);
  }
};

var obj1 = {
  name: "Random"
};

obj.display()
// implicit binding: outputs "wisdomBearer" as "this" will get implicitly binded to "obj"

obj.display.call(obj1);
// explicit binding: outputs "Random" as "this" will get expicitly binded to "obj1"

I hope the above example clarifies the difference between implicit and explicit binding in JS, and also how with the help of the call() method we can implement explicit binding.
But here is a catch, if we use an arrow function instead of a normal function (as used above), then “this” will not point to obj1 rather it will be pointing to the global/window object.

var obj = {
  name: "wisdomBearer",
  display: () => {
    console.log(this.name);
  }
};

obj.display();
// outputs --> undefined

Infinite Currying

// below program will run for any number of arguements
function add(a){
  return function(b){
    if (b) return add(a+b);
    return a;
  }
};

console.log(add(5)(2)(3)());
// outputs --> 10
console.log(add(6)(9)());
// outputs --> 15

Explanation: Whenever the add() method is called with an argument it will return a function and that function accepts an argument as b, now if this ‘b’ doesn't have any value our function will simply return ‘a’. Else, it will recursively call add() method with the sum of our ‘a’ and ‘b’ (first two arguments passed). Please comment down if you still have a problem in understanding, will surely try to explain in more detail.

Shadowing

function test() {
  let a = "hello";
  
  if(true){
    let a = "hi";
    console.log(a);
    // O/P: hi
  }
  console.log(a);
  // O/P: hello
}

Shadowing is a common behavior that occurs when dealing with ‘let’ variables. ‘var’ also does shadowing but rather it does permanent shadowing (as shown below) instead of temporary as ‘let’ does (as shown above).

function test() {
  var a = "hello";
  if(true){
    var a = "hi";
    console.log(a);
    // O/P: hi
  }
  console.log(a);
  // O/P: hi
}

Also, it is important to keep in mind that we can shadow a ‘var’ with ‘let’ but the opposite is not possible.

function test() {
  var a = "hello";
  let b = "hello";
  if(true){
    let a = "hi";
    console.log(a);
    // outputs: "hi"
    var b = "hi";
    // ERROR: 'b' has already been taken
  }
}

Map, Filter, and Reduce

Map() is used to create a new array from an existing one by applying a method to each element of the array. It can have 3 parameters.

const nums = [1,2,3,4];
const addThree = nums.map((num, index, nums) => {
  console.log("This is each element: ", num);
  console.log("This is each element's index: ", index);
  console.log("This is whole array: ", nums);
  return num + 3;
})
console.log(addThree);
// outputs: [4,5,6,7]

Filter() is used to create a new array from the existing one by a condition to each element of the array, if true then only returns that particular element in a new array.

const nums = [1,2,3,4];
const moreThanTwo = nums.filter((num, index, nums) => {
  console.log("This is each element: ", num);
  console.log("This is each element's index: ", index);
  console.log("This is whole array: ", nums);
  return num > 2;
});
console.log(moreThanTwo);
// outputs: [3,4]

Reduce() is used to reduce the array values down to one single value.

const nums = [1,2,3,4];
const sum = nums.reduce((accumulator, num) => {
  console.log("This is result after each iteration(starting from 0): ", num);
  return accumulator + num;
}, 0)

Conclusion

This brings us to the end of Part 1 of this article. I hope you have learned/revised some valuable concepts of JS. Part 2 will be available soon, which will be having polyfills creation as well for the above methods. Please don’t forget to leave a CLAP if you liked the article. Your valuable suggestions are always welcome.
Happy Learning!!!