5 питань для підготовки до інтерв'ю по JavaScript. Part 3

10.03.20. Час прочитання - 15 хв

Ловіть наступну серію питань та відповідей, які допоможуть підготуватися до співбесіди. Першу та другу частини можна знайти у нашому блозі під тегом "front-end".

1. Чому obj.someprop.x призводить до помилки?

Const obj = {}
console.log(obj.someprop.x)

Відповідь очевидна: ми намагаємось отримати доступ до властивості x властивості someprop, яке має значення undefined. obj.__ proto.__ proto = null, тому повертається undefined, а в undefined немає властивості x.

2. Що таке мета події або цільовий елемент (event.target)?

Простими словами, event.target - це елемент, в якому відбувається подія, або елемент, який викликав подію.

Маємо таку розмітку:

<div onclick="clickFunc(event)" style="text-align: center; margin: 15px;
border: 1px solid red; border-radius: 3px;">
    <div style="margin: 25px; border: 1px solid royalblue; border-radius: 3px;">
        <div style="margin: 25px; border: 1px solid skyblue; border-radius: 3px;">
            <button style="margin: 10px">
                Button
            </button>
        </div>
    </div>
</div>

І такий простенький JS:

function clickFunc (event) {
     console.log (event.target)
}

Ми прикріпили «слухач» до зовнішнього div. Однак, якщо ми натиснемо на кнопку, то отримаємо в консолі розмітку цієї кнопки. Це дозволяє зробити висновок, що елементом, що викликав подію, є саме кнопка, а не зовнішній або внутрішній div.

3. Що таке поточна ціль події (event.currentTarget)?

Event.currentTarget - це елемент, до якого прикріплений слухач подій.

Аналогічна розмітка:

<div onclick="clickFunc(event)" style="text-align: center;margin:15px;
border:1px solid red;border-radius:3px;">
    <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;">
        <div style="margin:25px;border:1px solid skyblue;border-radius:3px;">
            <button style="margin:10px">
                Button
            </button>
        </div>
    </div>
</div>

І трохи видозмінений JS:

function clickFunc(event) {
    console.log(event.currentTarget)
}

Ми прикріпили слухач до зовнішнього div. Куди б ми не скликали, чи то кнопка або один з внутрішніх div, в консолі ми завжди отримаємо розмітку зовнішнього div. Це дозволяє зробити висновок, що event.currentTarget - це елемент, до якого прикріплений слухач подій.

4. У чому різниця між операторами "==" і "==="?

Різниця між оператором "==" (абстрактна рівність) і оператором "===" (сувора рівність) полягає в тому, що перший порівнює значення після їх перетворення або приведення до одного типу (Coersion), а другий порівнює без такого перетворення.

Копнемо глибше. І спочатку поговоримо про перетворення.

Перетворення являє собою процес приведення значення до іншого типу або, якщо точніше, процес приведення порівнюваних значень одного типу. Порівнюючи, оператор "==" виробляє так зване неявне порівняння. Оператор "==" виконує деякі операції перед порівнянням двох значень.

Припустимо, ми порівнюємо x та y.

Алгоритм наступний:

1. Якщо x та y мають однаковий тип, порівняння виконується за допомогою оператора "===".
2. Якщо x = null і y = undefined, повертається true.
3. Якщо x = undefined і y = null, повертається true.
4. Якщо x = число, а y = рядок, повертається x == toNumber (y) (значення y перетворюється в число).
5. Якщо x = рядок, а y = число, повертається toNumber (x) == y (значення x перетворюється в число).
6. Якщо x = логічне значення, повертається toNumber (x) == y.
7. Якщо y = логічне значення, повертається x == toNumber (y).
8. Якщо x = рядок, символ або число, а y = об'єкт, повертається x == toPrimitive (y) (значення y перетворюється в примітив).
9. Якщо x = об'єкт, а y = рядок, символ або число, повертається toPrimitive (x) == y.
10. Повертається false.

Запам'ятайте: для приведення об'єкта до «примітиву» метод toPrimitive спочатку використовує метод valueOf, потім метод toString.

Приклади:

Всі приклади повертають true.

Перший приклад - перша умова алгоритму.
Другий приклад - четверта умова.
Третій - друга.
Четвертий - сьома.
П'ятий - восьма.
І останній - десята.

Якщо ж ми використовуємо оператор "===", всі приклади, крім першого, повернуть false, оскільки значення в цих прикладах мають різні типи.

5. Чому результатом порівняння двох схожих об'єктів є false?

let a = {
    a: 1
}
let b = {
    a: 1
}
let c = a

console.log(a = = = b) // false
console.log(a = = = c) // true

В JS об'єкти та примітиви порівнюються по-різному. Примітиви порівнюються за значенням. Об'єкти - за посиланням або адресою в пам'яті, де зберігається змінна. Ось чому перший console.log повертає false, а другий - true. Змінні «a» і «c» посилаються на один об'єкт, а змінні «a» і «b» - на різні об'єкти з однаковими властивостями та значеннями.