questions with answers

Top 20 Interview questions for front end Developers


This is really helpful for front-end developers, we have collected all this to help for job seekers and based on real time job lookers information we have designed, almost we covered about javascript basic levels to experts levels with simple explanation along with basic example code understandable and explainable. also written about other front-end things like jquery and html including css, this all are mostly regularly asking top 20 asking interview questions and answers for front-end developer.

this completely technical question, other round interview question like HR round interview questions with answers and manager round questions and answers will design in the next article

1. What are the falsy values in JS?

Ans: javascript have truthy and falsy values, both will will work on different way there is exception, so simple example is boolens but not exactly even more than that. also we have javascript falsy values list below.

Javascript is loosely typed programing language, so you can play with on way. another example we have with basic else condition which is described about falsy values.

///falsy variables......
false
0
null
empty string("")
NaN (Not a Number)
#ff0000

///falsy example code
var isPerson = false;
var isAnimal = false;

if (isPerson) {
    alert('Welcome to World);
} else if (isAnimal) {
    alert('Welcome to Jungle);
} else (false) {
  alert("What are you?");
}

2. What is output for below code? What is JS hoist?

Ans: Hoisting is JavaScript's default behavior of moving declarations to the top. Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function). so first will get the first alert Undifined and in order will get the second alert value 10.

 var num = 5;
     function xyz() {
        alert(num); //result of num?  Undefined
 var num = 10;
        alert(num); //result of num? 10
       }
 xyz();

3. What is output for below code?

function foo() {
    return {
       a:1
    }
}
foo(); //what will be the output here?
function foo() {
    return
             {
                    a:1
             }
}
foo(); //what will be the output here?

Ans: No Output

var y = {
    "foo": "car"
        }

function xyz() {
    y.foo = "caar";
}
xyz();

Ans:caar

4. How to pass function as parameter in another function, Give any example?

Ans: function addContact(id, refreshCallback) {
    refreshCallback();
    // You can also pass arguments if you need to
    // refreshCallback(id);
}

function refreshContactList() {
    alert('Hello World');
}

addContact(1, refreshContactList);

5. What is bind in JS, Explain about function bind?

Ans: The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.

6. How to attach an event dynamically to DIV tag in my HTML doc?

Ans: document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

7. What will be the output?

var x = 1;
function abc() {
    var self = this;
    console.log(self.x);  1
    console.log(this.x);  1
    (function () {
        console.log(self.x);  1
        console.log(this.x); 1
    })();
}
abc();
Ans:1, 1

8. Explain below JS code, what is difference between below two scenarios?

var x = function () {
         console.log("Hi");
 }
x();
function x() {
     console.log("helo");
}
x();

Ans: 2 times "Hi" will be executed

9. Advantages and Disadvantages with anonymous function in JS?

Ans: An anonymous function is a function that was declared without any named identifier to refer to it. As such, an anonymous function is usually not accessible after its initial creation. check the below code.

§Normal function declaration[edit]
function hello() {
  alert('world');
}
 
hello();
§Anonymous function declaration[edit]
var anon = function() {
  alert('I am anonymous');
};
 
anon();


//
The most common use for anonymous functions are as arguments to other functions, or as a closure.
setTimeout(function() {
  alert('hello');
}, 1000);
 
// Our anonymous function is passed to setTimeout, which will execute
// the function in 1000 milliseconds.
 
(function() {
  alert('foo');
})();
 
// This is a common method of using an anonymous function as a closure,
// w

10. Difference between "null" and "undefined"? When we will use them?

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as:
 var TestVar;
 alert(TestVar); //shows undefined
 alert(typeof TestVar); //shows undefined
null is an assignment value. It can be assigned to a variable as a representation of no value:
 var TestVar = null;
 alert(TestVar); //shows null
 alert(typeof TestVar); //shows object
From the preceding examples, it is clear that undefined and null are two distinct types: undefined is a type itself (undefined) 
while null is an object.

11. Solve the below issue?

var myArray = [1,2,3,4,1,5,6,7,1,4,5];
1.How to check duplicate values in above array
-> Don’t use any iteration (FOR or While loops not allowed)

var myArray = [1,2,3,4,1,5,6,7,1,4,6];
var sorted_arr = myArray.sort(); // You can define the comparing function here. 
                             // JS by default uses a crappy string compare.
var results = [];
for (var i = 0; i < myArray.length - 1; i++) {
    if (sorted_arr[i + 1] == sorted_arr[i]) {
        results.push(sorted_arr[i]);
    }
}

alert(results);//alert will show duplicate values1,4,5

12. Solve the below problem?

//sum of number 
console.log((/* write your code here */)(n)); 
1. Executing the above code should return sum of n (any number). e.g. passing 5 (in place of n) 
should print 15 i.e. (5 + 4 + 3 + 2+ 1) 
2. Do not name any functions in your code 
3. Do not use arguments.callee 
4. Do not use loops anywhere (Recursion must be used to calculate the sum) 

Hint: Although functions cannot be named, they can be passed as parameters to another function
Ans:

13. What is output for below code

Ans: Reference error: X is not defined

1)  function a()  {
  alert(x);
  }
  function  b() {
  var  x=10;
  a();
  }

14) Various types of object declaration?

we have few types of object declaration, here we have basic object declaration.

  Ans:
  var x = new Object();
  var x = {};
  var x = Object.Create();

15. Solve the below problem?

Ans: Good Techincal question, we have may methods to add value in the arrays,

Adding values to the end:-

var myArray = [];  myArray.push("I");

Adding values to the begin:-

var myArray = [];  myArray.unshift("I");

Adding values at some index:-

var myArray = [];  myArray.[2]="I";

using splice:-

var myArray.splice(index, 0, "a","e","i","o","u");

using concat:-

var myArray = a.concat.(b);
var myArray = ["a","e","i","o","u"];
Want to add Capital "I" after small "i" and add Capital "U" after small "u".
1. Don’t use any iterations
2. Don’t use index reference

16. Explain Box Model in CSS, what is total width of DIV tag?

Box Model? Box Model is nothing but total css properties values combination like width and height border and padding also margin, read more about css box model click here. so TOTAL width of div tag 103px.

myDiv {
width: 100px;
height:100px;
border:1px solid grey;
padding:2px;
margin:0px;
}
//div output with total size(103px)

17. Browser behavior on below style and output?

This really smart question!!, let's go into code we have div containing with class (myStyle), along with inline style property(width:150px), div element first and high priority to inline style so div width will be 150px background color effects from the class property(background-color:red;).

output: finally output is 150px div with red background color.

    <div class="myStyle" style="width:150px"></div>
   .myStyle {
         width: 100px;
         background-color:red;
    }

18. Which is most priority CSS in below code?

This little tricky question interviews testing your confidence levels, be clear on this question, you should answers like this, most high priority is first one called external way.

we can write css in three ways:-

1) External Styles

2) Internal Styles

3) Inline Styles

Read more about this same topic

<link   rel="stylesheet" href="sample.css" type="text/css" /> ( in my  external css having id #myDiv { width: green; } )
  <style>
  #myDiv {
  color: red;
  }
  </style>
  <div id="myDiv" style="color:blue;"></div>
Ans:

19. Differences between keeping script tag in html doc?

Ans: yes understood the question itself not clear, but interview asked, so to understand more read this article.

<html>
  <head>
  <style type="text/javascript"  src="myScript.js"></script>
  <script type="text/javascript>
  Some functions ......
  </script>
  </head>
  <body>
  <script type="text/javascript">
  Some JS code..........
  </script>
  </body>
  <script type="text/javascript"  src="myScript2.js"></script>
  </html>

20. What is output for below css?

Ans: out put for below code, we have couple of div with some inline styles, first div has position relative with top:30px and lefty 30px with blue border color. and second div has position absolute remaining things as same with first div but different border color and also one more thing divs width and height same.

output is, first div displays with blue color border and second div displays red border and override on relative div(first div). also check the output for below code so that you wil get clear picture on this.

<div  style="position:relative;top:20px;left:30px;border:2px solid  blue;width:100px;height:100px"><div>
<div style="position:absolute;top:20px;left:30px;border:2px  solid red;width:100px;height:100px"><div>