Hello, Habr. For future students of the course "JavaScript Developer. Professional" prepared a translation of interesting material.
As part of recruiting students for the course, we invite you to take part in an open career webinar , where the teacher will tell about himself, his professional experience and answer questions about a career in this area.
7 Interview Questions on JavaScript Closures. Can you answer them?
Every JavaScript developer should know what a closure is. During a JavaScript coding interview, there is a good chance that you will be asked about the concept of a closure.
I have compiled a list of 7 interesting and difficult questions about JavaScript closures.
Take a pencil, a piece of paper and try to answer the questions without looking at the answers or running the code. According to my calculations, you will need about 30 minutes.
Have fun!
, A Simple Explanation of JavaScript Closures ( JavaScript).
1:
2:
3:
4:
5:
6: (Restore encapsulation)
7:
1:
: clickHandler
, immediate
, delayReload
:
let countClicks = 0;
button.addEventListener('click', function clickHandler() {
countClicks++;
});
const result = (function immediate(number) {
const message = `number is: ${number}`;
return message;
})(100);
setTimeout(function delayedReload() {
location.reload();
}, 1000);
3 (outer scope)?
clickHandler
countClicks
.
immediate
.
delayReload
location
( (outermost scope)).
2:
(code snippet):
(function immediateA(a) {
return (function immediateB(b) {
console.log(a); // What is logged?
})(1);
})(0);
:
immediateA
0
, , 0
.
immediateB
, immediateA
, , a immediateA
, a
0
. , console.log(a)
0
.
3:
(code snippet):
let count = 0;
(function immediate() {
if (count === 0) {
let count = 1;
console.log(count); // What is logged?
}
console.log(count); // What is logged?
})();
:
let count = 0
count
.
immediate()
— , count . immediate() count
0
.
let count = 1
count
, count . console.log(count)
1
.
console.log(count)
0
, count .
4:
(code snippet):
for (var i = 0; i < 3; i++) {
setTimeout(function log() {
console.log(i); // What is logged?
}, 1000);
}
:
2 .
1
for()
3 .log()
,i
.setTimout()
log()
1000.
for()
,i
3.
2
1000 :
setTimeout()
log()
.log()
i
, 3, 3.
3
, 3
, 3
.
: 0, 1, 2 ? !
5:
(code snippet):
function createIncrement() {
let count = 0;
function increment() {
count++;
}
let message = `Count is ${count}`;
function log() {
console.log(message);
}
return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log(); // What is logged?
:
increment()
3 , count
3.
message
createIncrement()
. 'Count is 0'
. , count
, message
'Count is 0'
.
log()
— , message createIncrement()
. console.log(message)
'Count is 0'
.
: log(), , count? !
6: (Restore encapsulation)
createStack()
:
function createStack() {
return {
items: [],
push(item) {
this.items.push(item);
},
pop() {
return this.items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => [10]
stack.items = [10, 100, 1000]; // Encapsulation broken!
, , . , stack.items
.
, : push()
pop()
, stack.items
.
, , , items
createStack()
:
function createStack() {
// Write your code here...
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
:
(refactoring) createStack()
:
function createStack() {
const items = [];
return {
push(item) {
items.push(item);
},
pop() {
return items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
items
createStack()
.
, createStack()
, items
. , : push()
pop()
.
push()
pop()
, , items
createStack()
.
7:
multiply()
, 2 :
function multiply(num1, num2) {
// Write your code here...
}
multiply(num1, numb2)
2 , 2 .
, 1 const anotherFunc = multiply(numb1)
, . anotherFunc(num2)
num1 * num2
.
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
:
multiply()
:
function multiply(number1, number2) {
if (number2 !== undefined) {
return number1 * number2;
}
return function doMultiply(number2) {
return number1 * number2;
};
}
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
number2
undefined
, number1*number2
.
number2
undefined
, , multiply()
. doMultiply()
, .
doMultiply()
, number1
multiply()
.
:
5 , .
5 , ,. A Simple Explanation of JavaScript Closures ( JavaScript).
"JavaScript Developer. Professional"