JavaScript Interview Questions: Functions

Manu Bhardwaj — Mon, 15 Jun 2020 20:51:46 +0000

JavaScript has been the most used programming language for many years now, yet people continue to struggle to grasp it. This article sets out to discuss some of the most frequently asked questions in JavaScript.

Question

What is the value of x & y ?

const fn = (a, ...numbers, x, y) => {
    console.log(x, y)
};

Solution

SyntaxError: Rest parameter must be last formal parameter

Rest parameters must always be the last argument to a function.

Question

Guess the output of the following code:

var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};
var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

Solution

undefined
John Doe

The first console.log prints undefined because we are extracting the method from the hero object, so stoleSecretIdentity() is being invoked in the global context (i.e., the window object) where the _name property does not exist.

Question

What is the output of the following code snippet?

function greet() {
    console.log(this.name);
}
const sayHello1 = greet.bind({name: "Tom Cruise"});
sayHello1();
const sayHello2 = sayHello1.bind({name: "Zac Efron"});
sayHello2();

Solution

Tom Cruise
Tom Cruise

Binding an already bound function does not change the execution context.

Question

What will be logged to the console after running the snippet below?

function greet() {
  setTimeout(function() {
    console.log(this.name);
  }, 500);
}
greet.call({name: 'Daniel Craig'});

Solution

undefined

In the snippet above, console.log is called inside an anonymous callback function passed to setTimeout. In this case, the callback function will create a context that is not explicitly set. In non-strict mode, this will be set to the global object. Even if we are calling the greet function with call and we are setting the context of hello to {name: 'Daniel Craig'}, the callback function will not use the same context as the hello function and it will look for the name property on the global object. If a name property is defined it will return the value, otherwise it will log undefined.

Question

What will be logged to console?

function Employee(name) {
    this.name = name;
}
Employee.prototype.getName = () => {
    return this.name;
};
const jason = new Employee('Jason');
console.log(jason.getName());

Solution

undefined

The reason is that the snippet above is using an arrow function for getName. Arrow functions cannot create a context and therefore this will be the global object in non-strict mode.

Question

What is wrong with the code written below?

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};
setInterval(replaceThing, 1000);

Solution

originalThing is only referenced in the main body of replaceThing, and in unused. unused itself (which we never even run!) gets cleaned up once replaceThing ends... the only thing from replaceThing that escapes is the second closure, someMethod. And someMethod doesn't refer to originalString at all!
So even though there’s no way for any code to ever refer to originalThing again, it never gets garbage collected! Why? Well, the typical way that closures are implemented is that every function object has a link to a dictionary-style object representing its lexical scope. If both functions defined inside replaceThing actually used originalThing, it would be important that they both get the same object, even if originalThing gets assigned to over and over, so both functions share the same lexical environment. Now, Chrome's V8 JavaScript engine is apparently smart enough to keep variables out of the lexical environment if they aren't used by any closures: that's why the first example doesn't leak.
But as soon as a variable is used by any closure, it ends up in the lexical environment shared by all closures in that scope. And that can lead to memory leaks.

Wrapping up

JavaScript is not a very vast language IMPO but it has a lot of depth in all that it holds in itself. If we can construct a clear understanding of the topics that we regularly use, it becomes extremely easy for us to get a hold on them.

Vue Router: Route Resolvers

Manu Bhardwaj — Mon, 18 Nov 2019 08:07:23 +0000

What is a Router Resolver?

In the most simplest of terms, I’d say a Router Resolver allows you to get data before navigating to the new route.

What’s the use case?

One way to deal with getting and displaying data from an API is to route a user to a component, and then in that component’s created hook call a method in a service to get the necessary data. While getting the data, perhaps the component can show a loading indicator.

But, in cases where you want the API data to be fetched before the component is initialised, this strategy fails and this is where Route Resolvers are used.

How to implement?

Vue Router provides beforeEnter hook to take action before a route is resolved, we can use this hook as a point to bind our route resolver.

The resolver function is going to do the API calling stuff to resolve and set data in the destination route’s meta key.
Route’s Meta is an object that contains additional information related to a route. We will utilise this object to store our data.

In the above code, getList is a function that returns Promise and we await for the data to be resolved before we call next() to resume the routing.
Now, in the component we can consume the data by reading it from the route’s meta.

So, this is how we can create and use Route Resolvers in Vue.Js.

Connect with me

LinkedIn: https://www.linkedin.com/in/imanubhardwaj/
Medium: https://medium.com/@immanubhardwaj
Github: http://github.com/imanubhardwaj/

Forem: Manu Bhardwaj

JavaScript Interview Questions: Functions

Question

Solution

Question

Solution

Question

Solution

Question

Solution

Question

Solution

Question

Solution

Wrapping up

Vue Router: Route Resolvers

What is a Router Resolver?

What’s the use case?

How to implement?

Connect with me