👨🏼‍💻 💬 👶🏼 7 questions sur les fermetures JavaScript 🚃 👨🏿‍🔬 🤺

Bonjour, Habr. Pour les futurs étudiants du cours "Développeur JavaScript. Professionnel" a préparé une traduction de matériel intéressant.

Dans le cadre du recrutement des étudiants pour le cours, nous vous invitons à participer à un webinaire sur les carrières ouvert , où l'enseignant parlera de lui-même, de son expérience professionnelle et répondra à des questions sur une carrière dans ce domaine.

7 Questions d'entrevue sur les fermetures JavaScript. Pouvez-vous y répondre?

Chaque développeur JavaScript doit savoir ce qu'est une fermeture. Lors d'un entretien de codage JavaScript, il y a de fortes chances que l'on vous interroge sur le concept de fermeture.

J'ai compilé une liste de 7 questions intéressantes et difficiles sur les fermetures JavaScript.

Prenez un crayon, un morceau de papier et essayez de répondre aux questions sans regarder les réponses ni exécuter le code. Selon mes calculs, vous aurez besoin d'environ 30 minutes.

S'amuser!

, A Simple Explanation of JavaScript Closures ( JavaScript).

6: (Restore encapsulation)

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);

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?
})();

1

0

. .

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);
}

3

, 3

, 3

. .

2 .

for()

3 . log()

, i

. setTimout()

log()

1000.
for()

, i

3.

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?

'Count is 0'

. .

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).

? 7 "this" JavaScript.

"JavaScript Developer. Professional"

7 questions sur les fermetures JavaScript

7 Questions d'entrevue sur les fermetures JavaScript. Pouvez-vous y répondre?

1:

2:

3:

4:

5:

6: (Restore encapsulation)

7:

More articles: