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 interview.
Table of contents:
- Inheritance in JavaScript:
- Closure in JavaScript:
- Bind, apply and call function methods
- Practice:
- Hoisting in JavaScript:
- Event Loop
- Scope in JavaScript
Question i1: What is functional inheritance pattern? How to create protected methods and private properties?
For implementing use this kata please.
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.
Example
const addTwoThings = thingToAdd(2);
addTwoThings(3); // -> 5
const addTwoThings = thingToAdd(10);
addTwoThings(30); // -> 40Answer
Currying functions consist of chaining closures that return inner functions. So in the case of thingToAdd you will have two separate closures that each return a single value that gets evaluated sequentially.
const thingToAdd = (a) => (b) => a + b;let thingToAdd = function (a) {
return function (b) {
return a + b;
}
}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
They'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: 3Answer
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)() === 10Answer
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
function test() {
foo();
bar();
function foo() {
console.log('foo');
}
var bar = function() {
console.log('bar');
}
}
test(); Answer
Console will output:
foo
TypeError: bar is not a function
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
try {
console.log(a);
} catch (e) {
try {
a = 10;
console.log(a);
} catch (e) {
console.log('bar');
}
}
let a = 1;Answer
Console will output:
bar
Reason:
Since let is uninitialized at any time until being declared (unlike var which is always initialized but with value undefined), the first attempt to console.log(a) will raise an error which will be caught by the catch block. Then, inside that catch block, there's a = 10 inside a try block again. This will also raise an error because there's still no variable named a so the catch block will catch the error once again so the output will be bar.
I would be thankful for your issues and pull requests.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent