Hola, Habr. Para los futuros alumnos del curso "JavaScript Developer. Professional" se preparó una traducción de material interesante.
Como parte de la captación de estudiantes para el curso, lo invitamos a participar en un webinar de carrera abierto , donde el profesor contará sobre sí mismo, su experiencia profesional y responderá preguntas sobre una carrera en esta área.
7 Preguntas de la entrevista sobre cierres de JavaScript. ¿Puedes responderlas?
Todo desarrollador de JavaScript debe saber qué es un cierre. Durante una entrevista de codificación de JavaScript, es muy probable que se le pregunte sobre el concepto de cierre.
He compilado una lista de 7 preguntas interesantes y difíciles sobre cierres de JavaScript.
Tome un lápiz, una hoja de papel e intente responder las preguntas sin mirar las respuestas o ejecutar el código. Según mis cálculos, necesitará unos 30 minutos.
¡Diviértete!
, 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"