This documents contains the most actual and important questions for Javascript developer position. It will helps you to compose question list for your own interview or prepare to inverview.
Table of contents:
- Inheritance in Javascript:
- Closure in Javascript:
- Bind, apply and call function methods
- Hoisting in Javascript:
- Event Loop
For implementing use this kata please.
Question i2: What is functional inherence pattern? How to create protected methods and private propreties?
var baseObject = {
prop: "Base value",
getProp: function() {
return this.prop;
}
};
var otherObject = Object.create(baseObject);
otherObject.prop = "Other value";
console.log(otherObject.getProp());
delete otherObject.prop;
console.log(otherObject.getProp());
Answer
Console will output
Other value
Base value
MDN definition: Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created.
Javascript.isSexy: A closure is an function that has access to the outer (enclosing) function’s variables-scope chain.
function outerFunction() {
var flag = undefined;
function innerFunction() {
if (true) {
flag = true;
} else {
var flag = false;
}
console.log(flag);
}
console.log(flag);
innerFunction();
}
outerFunction();
Answer
Console will output the followings:
undefined
true
What will output these example?
for (var i=0; i < 10; i++){
setTimeout(function(){
console.log(i);
}, 1000);
}
How to fix it to output numbers from 0 to 9?
Answer
Ther're several ways to resolve code above.
- By creating a IIFE (Immediately Invoked Function Expression):
for (var i=0; i < 10; i++){
setTimeout((function(param){
console.log(i);
})(i), 1000);
}
- By using ES6 feature, by using let syntax particularly:
for (let i=0; i < 10; i++){
setTimeout(function(){
console.log(i);
}, 1000);
}
- By binding
console.logfunction:
for (var i=0; i < 10; i++){
setTimeout(console.log.bind(console, i), 1000);
}
There's an example of function output:
nextID(); // output: 1
nextID(); // output: 2
nextID(); // output: 3
Answer
We should use closure in IIFE:
var nextID = (function() {
var id = 0;
return function() {
console.log(++id);
}
})();
This function must meet conditions:
typeof sum(1) === 'function'
typeof sum(1)(2) === 'function'
typeof sum(1)(2)() === 'number'
sum(1)() === 1
sum(1,2)(3)() == 6
sum(1,2)(3,4)() === 10
Answer
function sum (fn) {
var sumArguments = Array.prototype.slice.call(arguments);
return function sumInner() {
if (arguments.length) {
sumArguments = sumArguments.concat(Array.prototype.slice.call(arguments));
return sumInner;
} else {
return sumArguments.reduce(function(total, arg) {
return total + arg;
}, 0);
}
};
}
Answer
W3School Hoisting is JavaScript's default behavior of moving declarations to the top. In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.
var a = 1;
function bar() {
if (!a) {
var a = 10;
}
console.log(a);
}
bar();
Answer
Console will output :
10
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a);
Answer
Console will output :
1
Answer
Event Loop in the browser could be represented as the following code:
while (eventLoop.waitForTask()) {
const taskQueue = eventLoop.selectTaskQueue()
if (taskQueue.hasNextTask()) {
taskQueue.processNextTask()
}
const microtaskQueue = eventLoop.microTaskQueue
while (microtaskQueue.hasNextMicrotask()) {
microtaskQueue.processNextMicrotask()
}
if (eventLoop.shouldRender()) {
eventLoop.render()
}
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
Answer
Console will output :
script start
script end
promise1
promise2
setTimeout
I would be thankful for your issues and pull requests