🧕🏿 📭 ✳️ JavaScriptクロージャに関する7つの質問 😀 🍅 🏤

こんにちは、Habr。コース「JavaScriptDeveloper。Professional」の将来の学生のために、興味深い資料の翻訳を用意しました。

コースへの学生募集の一環として、オープンキャリアウェビナーに参加することをお勧めします。このウェビナーでは、教師が自分自身、彼の専門的な経験について話し、この分野でのキャリアについての質問に答えます。

JavaScriptクロージャに関する7つのインタビューの質問。あなたはそれらに答えることができますか？

すべてのJavaScript開発者は、クロージャとは何かを知っている必要があります。JavaScriptコーディングのインタビュー中に、クロージャの概念について尋ねられる可能性が高くなります。

JavaScriptクロージャに関する7つの興味深く難しい質問のリストをまとめました。

鉛筆と一枚の紙を取り、答えを見たりコードを実行したりせずに質問に答えてみてください。私の計算によると、約30分かかります。

楽しむ！

, 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"

JavaScriptクロージャに関する7つの質問

JavaScriptクロージャに関する7つのインタビューの質問。あなたはそれらに答えることができますか？

1:

2:

3:

4:

5:

6: (Restore encapsulation)

7:

More articles: