October 4, 2014 at 01:13

Javascript Interview Questions

    Not so long ago, I was puzzled by the job search, in connection with which I visited an nth number of interviews and heard many interesting questions. A lot of articles with JS questions are walking around the network, so I’ll try to select questions that I haven’t seen yet. There are no questions like What is a closure? , Inheritance in JavaScript or Make ajax request VanillaJS . By the way, I advise you to look for answers to these questions before reading the article :) Under the cut questions like “with a catch”. It is unlikely that any of them will come across to you, but, I hope, the article will set you up for “dirty” thinking, and will remind you of some slippery places and underwater pebbles of javascript.


    Hoisting


    Hoisting - the ascent of variables declared in a function. Here you can learn in detail about how this happens.
    And here is an interesting question:

    (function() {
	f();
	f = function() {
		console.log(1);
	}
})()
function f() {
	console.log(2)
}
f();


    What will we see in the console?

    Answer
    Declared in gs function f()will pop up, respectively, when called finside an anonymous function, we will see not ReferenceError, as someone might have expected, but a deuce in the console, when you call again, the variable f already refers to the function that prints 1.

    Result:
    < (function() {
  	f();
	f = function() {
		console.log(1);
	}
})()
function f() {
	console.log(2)
}
f();
> undefined
2
1



    If you immediately caught the catch of the previous task - do not flatter yourself. Here is another interesting code example:

    (function() {
	var x = 1;
	function x() {};
	console.log(x);	
})()


    What will we see in the console now?

    Answer
    Functions declared using function declarations take precedence and are understood above var. Therefore, the interpreter will first execute function x() {};, and then var x = 1;

    <(function () {
    var x = 1;

    function x () {};

    console.log (x);
    }) ()

    > undefined
    1


    And finally. Let me remind you of the advice of Douglas Crockford: avoid weaknesses of the language and use strengths and use JSLint.
    In order not to stumble upon such surprises, you can take the habit of putting var at the beginning of the function yourself and declaring the function through function expression

    Pass by link



    Probably everyone knows that all objects are passed to javascript by reference:

    var obj = {
	a: 1
};
(function(obj) {
	obj = {
		a: 2
	};
})(obj);
console.log(obj.a);


    I don’t know about you, but I fell asleep on this question. I knew for sure that the object did not change after the function call, but could not explain why.

    But why!
    When an anonymous function is called, a local variable obj will be created in its scope. And then a new object is created {a : 2}, the reference to which falls into the local variable obj, but the variable from the top scope will still refer to the old object.


    Execution context



    The context of function execution is a powerful and expressive mechanism, if skillfully used. True, there are several points that should not be forgotten. A simple example. Consider a class that logs certain actions.

    Logger = function(logFn) {
	_logFn = logFn;
	this.log = function(message) {
		_logFn(new Date() + ": " + message);
	}
}
var logger = new Logger(console.log);
logger.log("Hi!");
logger.log("Wazzup?");


    What will be in the console? How to fix it?

    Answer
    In the console we see TypeError: Illegal invocation
    And all because when you call logger.log(), the execution context of functions - logger

    To fix, you can remember about the built-in methods of functions .apply(), .call(),.bind()

    < rightLogger = new Logger(console.log.bind(console))
> Logger {log: function}
< rightLogger.log("It's works")
> Sat Oct 04 2014 00:32:49 GMT+0400 (MSK): It's works



    UPD: another set of 5 suitable interesting questions on the topic
    Tags:

    Also popular now: