Junior Garcia@jrgarciadev
Frontend Interview Essentials
Key topics and questions for frontend developer interviews. Focus on JavaScript and frontend technologies to prepare for your next developer role with confidence.
# Table of Contents
- Hoisting
- Equality Testing
- this
- Event Loop
- Closure
- Scope
- Datatypes
- Implementation/Coding Questions
- Design based open ended problems
- Theoretical Questions
Hoisting:
Give the output/error in the following cases
-
function a(){ console.log(b) // output: ƒ b(){ console.log("hi") } var b = 10; return function b(){ console.log("hi") } } a()
-
var a = 10; function b() { a = 1; return; function a(){}; } b(); console.log(a) // output: 10
-
function sayHi() { console.log(name); // output: undefined console.log(age); // reference error var name = 'sunil'; let age = 21; } sayHi()
-
console.log(a) // output: undefined var a = "test" sayHello() // error a() var a = function sayHello(){ console.log("hi") }
-
var x = 10 function y(){ x = 100 return } y() console.log(x) // output: 100
-
var x = 10 function y(){ x = 100 return var x = function(){ console.log("hi") } } y() console.log(x) // output: 10
-
var x = 10 function y(){ x = 100 return x = function(){ console.log("hi") } } y() console.log(x) // output: 100
-
console.log(a()) function a(){ console.log("gg") } console.log(b()) var b = function(){ console.log("gg") } console.log(c(), d()) var c = function d(){ console.log("gg") }
Equality Testing:
-
var a = {key: 1}; var b = {key: 1}; console.log(a == b); // false console.log(a === b); // false
-
console.log(null == null); // true console.log(null === null); // true console.log(undefined == undefined); // true console.log(undefined === undefined); // true console.log(NaN == NaN); //false console.log(NaN === NaN); //false
this
Give the output/error in the following cases
-
const x = { firstName: '', lastName: '', setName: function(name) { console.log(this) let splitName = function(n) { console.log(this) const nameArr = name.split(' '); this.firstName = name[0]; this.lastName = name[1]; } splitName(name); } } var name = 'Jon doe'; x.setName(name); console.log(x.firstName); // undefined console.log(x.lastName); // undefined
-
var Foo = function( a ) { function bar() { return a; } this.baz = function() { return a; }; }; Foo.prototype = { biz: function() { return a; } }; var f = new Foo( 7 ); f.bar(); // error bar is not fn f.baz(); // 7 f.biz(); // undefined // Modify the above declaration so that the output is 7 for each of the declared functions
-
function a(){ console.log(this) } a() // window var a = function(){ console.log(this) } a() // window var a = function sayHello(){ console.log(this) } a() // window
-
obj = { name: "supername", getN: function(){ console.log(this.name) // supername, this = obj function x(){ console.log(this.name) // undefined, this = window } x() } } obj.getN() // How to fix above so that inside function x, this refers to obj // Hint: Fat arrow, Bind, Call
Event Loop
Give the output in the following cases
-
console.log("A") setTimeout(function(){ console.log("B") }, 1000) console.log("C") // output: // A // C // B (after atleast 1 sec)
-
console.log("A") setTimeout(function(){ console.log("B") }, 0) console.log( console.log("C") ) // output: // A // C // B (immediately after C is printer)
-
setTimeout(function(){ console.log("2000") }, 2000) setTimeout(function(){ console.log("1000") }, 1000) setTimeout(function(){ console.log("4000") }, 4000)
Closure
Write function definition for the following cases
Infinite Argument Problem
-
Create a function sum which when called
sum(1,2,3....n)()
orsum(1)(2)(3)...(n)()
should yield same result. -
For a given n number of arguments, create a function sum which when called
- sum(1,2,3....n)
- sum(1)(2)(3)...(n)
- sum(1,2,3)(4,5,...n)
- sum(1,2)(3,4)(5)(6,7)..(n)
- sum(1,2,3...n-2)(n-1, n) all should yield the same result.
-
Create a function such that
sentence("I")("am")("going")("out.")
should output I am going out. The last parameter will always contain full stop.- sentence("I")("am")("going")("out.")
- sentence("I am")("going")("out.")
- sentence("I am going")("out.")
- sentence("I")("am going out.")
all should yield same result
I am going out.
Scope
-
for(var i = 0 ; i < 10; i++) { setTimeout(function(){ console.log(i) }, 1000) }
What will be the output? What are the various ways so that proper value for
i
is printed? (Hint: let, iife) -
function createButtons(){ for (var i = 1; i <= 5; ++i) { var body = document.getElementsByTagName("body") var button = document.createElement("button") button.innerHTML = 'button' + i button.onclick = function(){ console.log('this is button' + i) } body.appendChild(button) } }
How can you fix the issue if any?
Datatypes
On this page
Page 1 of 2