JavaScript Interview Questions: Functions
Tags: javascript
Published: 2020-06-15 20:51:46

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 ?
```javascript 
const fn = (a, ...numbers, x, y) => {
    console.log(x, y)
};
```
##Solution
```javascript 
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:
```javascript 
var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};
var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());
```
##Solution
```javascript 
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?
```javascript 
function greet() {
    console.log(this.name);
}
const sayHello1 = greet.bind({name: "Tom Cruise"});
sayHello1();
const sayHello2 = sayHello1.bind({name: "Zac Efron"});
sayHello2();
```
##Solution
```javascript 
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?
```javascript 
function greet() {
  setTimeout(function() {
    console.log(this.name);
  }, 500);
}
greet.call({name: 'Daniel Craig'});
```
##Solution
```javascript 
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?
```javascript 
function Employee(name) {
    this.name = name;
}
Employee.prototype.getName = () => {
    return this.name;
};
const jason = new Employee('Jason');
console.log(jason.getName());
```
##Solution
```javascript 
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?
```javascript 
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.