5 Typical JavaScript Interview Exercises

Question 1: Scope

Consider the following code:

1
2
3
4
5
(function() {
   var a = b = 5;
})();
console.log(b);

What will be printed on the console?

Answer

The code above prints 5.

The trick of this question is that in the IIFE there are two assignments but the variable a is declared using the keyword var. What this means is that a is a local variable of the function. On the contrary,b is assigned to the global scope.

The other trick of this question is that it doesn’t use strict mode ('use strict';) inside the function. If strict mode was enabled, the code would raise the error Uncaught ReferenceError: b is not defined. Remember that strict mode requires you to explicitly reference to the global scope if this was the intended behavior. So, you should write:

1
2
3
4
5
6
(function() {
   'use strict';
   var a = window.b = 5;
})();
console.log(b);

Question 2: Create “native” methods

Define a repeatify function on the String object. The function accepts an integer that specifies how many times the string has to be repeated. The function returns the string repeated the number of times specified. For example:

1
console.log('hello'.repeatify(3));

Should print hellohellohello.

Answer

A possible implementation is shown below:

1
2
3
4
5
6
7
8
9
String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
   for (var i = 0; i < times; i++) {
      str += this;
   }
   return str;
};

The question tests the knowledge of the developer about inheritance in JavaScript and theprototype property. It also verifies that the developer is able to extend native data type functionalities (although this should not be done).

Another important point here is to demonstrate that you are aware about how to not override possible already defined functions. This is done by testing that the function didn’t exist before defining your own:

1
String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

This technique is particularly useful when you are asked to shim a JavaScript function.

Question 3: Hoisting

What’s the result of executing this code and why.

1
2
3
4
5
6
7
8
9
10
11
function test() {
   console.log(a);
   console.log(foo());
   
   var a = 1;
   function foo() {
      return 2;
   }
}
test();

Answer

The result of this code is undefined and 2.

The reason is that both variables and functions are hoisted (moved at the top of the function) but variables don’t retain any assigned value. So, at the time the variable a is printed, it exists in the function (it’s declared) but it’s still undefined. Stated in other words, the code above is equivalent to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
   var a;
   function foo() {
      return 2;
   }
   console.log(a);
   console.log(foo());
   
   a = 1;
}
test();

Question 4: How this works in JavaScript

What is the result of the following code? Explain your answer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());

Answer

The code prints Aurelio De Rosa and John Doe. The reason is that the context of a function, what is referred with the this keyword, in JavaScript depends on how a function is invoked, not how it’s defined.

In the first console.log() call, getFullname() is invoked as a function of the obj.prop object. So, the context refers to the latter and the function returns the fullname property of this object. On the contrary, when getFullname() is assigned to the test variable, the context refers to the global object (window). This happens because test is implicitly set as a property of the global object. For this reason, the function returns the value of a property called fullname of window, which in this case is the one the code set in the first line of the snippet.

Question 5: call() and apply()

Fix the previous question’s issue so that the last console.log() prints Aurelio De Rosa.

Answer

The issue can be fixed by forcing the context of the function using either the call() or the apply()function. If you don’t know them and their difference, I suggest you to read the article What’s the difference between function.call and function.apply?. In the code below I’ll use call() but in this case apply() would produce the same result:

1
console.log(test.call(obj.prop));

Source: http://www.sitepoint.com/5-typical-javascript-interview-exercises/

Advertisements

CSS best transition effect like on selection make div bigger

<html>

<head>

<style type=”text/css”>

html {

background: #ff6461;

}

 

body {

position: absolute;

left: 50%;

top: 50%;

height: 214px;

width: 336px;

margin: -107px -168px;

}

 

input {

visibility: hidden;

}

 

label {

position: absolute;

left: 0;

right: 228px;

background: white;

cursor: pointer;

-webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;

transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s, bottom 0.33s;

}

#li0 + label {

top: 14px;

bottom: 164px;

}

#li1 + label {

top: 64px;

bottom: 114px;

}

#li2 + label {

top: 114px;

bottom: 64px;

}

#li3 + label {

top: 164px;

bottom: 14px;

}

:checked + label {

left: 122px;

right: 0;

top: 14px !important;

bottom: 14px !important;

-webkit-transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;

transition: left 0.33s 0.33s, right 0.33s 0.33s, top 0.33s 0.66s, bottom 0.33s 0.66s;

}

</style>

</head>

<body>

<input id=”li0″ name=”foo” type=”radio” />

 

<label for=”li0″></label><input checked=”” id=”li1″ name=”foo” type=”radio” />

 

<label for=”li1″></label>

 

<input id=”li2″ name=”foo” type=”radio” />

 

<label for=”li2″></label>

 

<input id=”li3″ name=”foo” type=”radio” />

 

<label for=”li3″></label>

 

<input id=”li4″ name=”foo” type=”radio” />

 

<label for=”li4″></label>

 

<input id=”li5″ name=”foo” type=”radio” />

 

<label for=”li5″></label>

 

</body>

 

</html>

Service Vs Factory

Var service = {prop:val,prop1:val1} return service;

 

Function val(){

Var xyz =1;

}

 

Now if you have val2 like

Function val2(){

Var hidingfunction = ‘tree’;

}

 

You can hide this val2 without calling in service, so that its not displayed to users.

 

One more difference is factory works in pass by reference, means if you add any one function from controller to factory..all controllers calling service will effect with new added function. Where as service cannot.

 

To be contd…