Junior Garcia
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.

  • 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") }
  • 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
  • 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
  • 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)
  • Create a function sum which when called sum(1,2,3....n)() or sum(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.
  • 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?

Page 1 of 2