Олександра Донцова Front-end Developer у Sigma Software, Викладач Комп'ютерної школи Hillel.

Зміст

У цій статті я збираюся розглянути 10 важливих тем JavaScript, які повинен знати кожен JavaScript-розробник: як початківець, так і з досвідом. Якщо ви тільки почали вивчати JavaScript, ця стаття буде особливо корисною.

IIFE

Immediately-invoked function expressions (IIFEs) — якщо перекладати суворо, це функціональне вираз із миттєвим викликом.

Тобто це функція, яка дозволяє нам визначити анонімну функцію і відразу ж її викликати, без використання посилання.

Наприклад:

let animal = function(name) {
    return {
        getAnimal: function() {
            return name;
        }
    }
}("Crocodile");
 
console.log(animal.getAnimal()); 
// output: "Crocodile"

У коді вище IIFE використовується для створення об'єкта за допомогою методу getAnimal(), а метод використовує аргумент name як значення, що повертається, по суті, name тут — це інкапсульована (закрита) частина об'єкта, що повертається.

Temporal Dead Zone

Дослівно «Тимчасова мертва зона».

Змінна, оголошена за допомогою let або const, не може бути доступна до оголошення в межах її області видимості. Це викликає помилку посилання або ініціалізації. Ця ситуація називається Temporal Dead Zone.

console.log(animal); // Uncaught ReferenceError: animal is not defined
 
if(true) {
    console.log(animal); // Uncaught ReferenceError: Cannot access  'animal' before initialization
 
    const animal = "Parrot";
 
    console.log(animal); // "Parrot"
}

У прикладі вище ми отримаємо помилку до того часу, поки вилучимо висновок у консоль перших двох console.log. Тільки в останній консолі ми отримаємо "Parrot".

Оголошення об'єкта з константою

Ви можете оголошувати об'єкти за допомогою const, і це не перешкоджає зміні цього об'єкта. Але якщо ви спробуєте призначити значення цього об'єкта (наприклад, присвоїти новий об'єкт), він видасть помилку.

Наприклад:

const animal = {
    pet: "Cat",
    wild: "Tiger",
};
 
// It works
animal.pet = "Dog";
console.log(animal.pet); // "Dog"
 
// It throws an error
// Uncaught TypeError: Assignment to constant variable
animal = {
    pet: "Dog",
    wild: "Tiger",
}

Можна змінювати властивість об'єкта, не викликаючи помилки, оскільки це змінює вміст об'єкта. Але якщо ви спробуєте надати значення об'єкту, він видасть помилку, тому що ви намагаєтеся змінити зв'язок у пам'яті.

Тут потрібно обов'язково пам'ятати одну річ: const запобігає зміні константи, а не властивості всередині неї.

Порівняння змінних

Є два різні способи порівняння значень об'єктів щодо рівності в JavaScript.

Оператор Рівності, що складається з двох знаків рівності: ==
Оператор Суворої Рівності, що складається з трьох знаків рівності: ===

При порівнянні двох змінних оператор рівності перевіряє значення двох змінних, а оператор суворої рівності перевіряє і значення, і тип даних.

Наприклад:

const x = 8;
const y = "8";
 
console.log(x == y); // true
console.log(x === y); // false

Другий висновок у консоль повертає false, тому що тип двох змінних не однаковий. Тут a — ціле число, тоді як b — рядок.

Зберігання даних — web-storage

Дані web-storage містяться у двох об'єктах усередині браузера і дозволяють зберігати пари ключ — значення у браузері:

session storage — розділяється між вкладками, у кожній новій вкладці свій storage, дані зберігаються тільки під час цієї сесії, при закритті вкладки дані стираються
local storage — тривале зберігання даних, дані не мають терміну давності, після якого закінчуються і видаляються, навіть при переустановці ОС або перезапуску браузера, дані нікуди не подінуться

Тепер давайте подивимося, як ви можете додавати, вилучати та видаляти дані з web-storage. Є три методи, якими ми можемо це зробити:

Storage.setItem(key, value) — дозволяє нам зберігати дані у сховищі. Він приймає два параметри. Перший — це ім'я елемента, який ви хочете додати, а другий — його значення (як в об'єкті)
Storage.getItem(key) — дозволяє нам отримувати дані. Він приймає один параметр, який є ім'ям елементу даних, який ви хочете отримати. Потім він повертає значення елементу
Storage.removeItem(key) — дозволяє нам видаляти дані. Він приймає один параметр, який є ім'ям елемент даних, який ви хочете видалити. Потім він видаляє елемент із веб-сховища

Рис. 1 Приклад використання local storage

Hoisting

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

myPet("Cat");
 
function myPet(pet) {
    console.log(`My pet is ${pet}`);
}
 
// The result of the code above is `My pet is Cat`

Object.freeze()

Object.freeze() — метод заморожує об'єкт, і цей заморожений об'єкт більше не можна змінити, зовсім. Ви не можете додати або видалити будь-яку властивість замороженого об'єкта.

Давайте подивимося демо, щоб було зрозуміліше:

const dish = {
    first: "meat",
}
 
Object.freeze(dish);
 
dish.first = "fish";
dish.desert = "ice-cream";
delete dish.first;
 
console.log(dish); // {first: 'meat'}

У коді вище я спочатку створила об'єкт dish, додала туди якість first. Наступним кроком я застосувала метод Object.freeze() до мого об'єкта, після застосування цього методу спробувала замінити існуюче поле, додати нове і видалити. В кінці вивела в консоль мій об'єкт, в результаті бачимо, що об'єкт не було змінено, оскільки він заморожений.

Object.seal()

Метод Object.seal() запечатує об'єкт. Він працює приблизно так само, як Object.freeze().

Як і Object.freeze(), цей метод також запобігає додаванню та видаленню властивостей. Але відмінність полягає в тому, що значення існуючих властивостей все ще можуть бути змінені, доки вони доступні для запису.

Подивимося демо:

const dish = {
    first: "meat",
}
 
Object.seal(dish);
 
dish.first = "fish";
dish.desert = "ice-cream";
delete dish.first;
 
console.log(dish); // {first: 'fish'}

Спочатку я оголосила об'єкт dish із властивістю first, а потім запечатала його методом Object.seal(). Оскільки об'єкт запечатаний, значення об'єкта можна змінити, що можна побачити як результат, але додати нові поля не вийде, як і видалити існуючі.

Як працює метод try…catch

Немає значення, наскільки добре ми програмуємо, іноді в наших скриптах є помилки. Що справді відбувається, коли в наших сценаріях виникають помилки?

Відповідь на запитання — скрипт перестає працювати і видає нам помилку. А що, якщо наш код не вмиратиме щоразу, коли ми припустилися помилки, а виконуватиме якийсь функціонал? Адже це було б бездоганно. І ми можемо це зробити за допомогою try…catch.

Як же працює try...catch:

У конструкції try…catch в першу чергу виконається код, який лежить у try {}
Якщо try{} немає помилки, то частина catch(err) ігнорується, виконання досягає кінця try{} і продовжується
Якщо виникає помилка, виконання try зупиняється і починається виконання catch(err). Помилка міститиме об'єкт помилки з детальною інформацією про те, що сталося.

Саме за допомогою такого функціоналу ми можемо відловлювати помилки і при цьому не припиняти виконання нашого коду.

Приклад:

try {
    ddddd;
    console.log("Here is try");
} catch (error) {
    console.log(`Here is error`);
    console.log(error);
}
// Here is error
// ReferenceError: ddddd is not defined at index.js:78:5
 
console.log("Here is next code"); // this code is also executed

З прикладу вище бачимо, що відпрацював код, зловив помилку, я її вивела в консоль, але і все, що нижче, теж було виконано

Що потрібно пам'ятати під час використання try…catch

Є щось, що вам потрібно пам'ятати, коли ви використовуєте try...catch у своєму коді.

По-перше, try...catch працює лише для помилок під час виконання (runtime errors). Це означає, що під час використання try...catch код має бути «працездатним». Іншими словами, код має бути синтаксично вірним для JavaScript.

Вам стане ясно, коли ви побачите цей приклад:

try {
    }}}}}}
    console.log("Here is try");
} catch (error) {
    console.log(`Here is error`);
    console.log(error);
}
// Uncaught SyntaxError: Missing catch or finally after try
 
console.log("Here is next code"); // this code will not executed

У прикладі вище код ніколи не відпрацює правильно, ми отримуємо синтаксичну помилку, і ця помилка не буде виловлена try...catch.

По-друге, try...catch працює синхронно. Це означає, що якщо виконання відбувається в запланованому коді, такому як setTimeout, помилка не буде перехоплена. Це відбувається тому, що функція виконується пізніше, і двигун уже вийшов із конструкції.

try {
    setTimeout(function() {
        ddddd;
        console.log("Here is try");
    }, 1000)
} catch (error) {
    console.log(`Here is error`);
    console.log(error);
}
// index.js:79 Uncaught ReferenceError: ddddd is not defined at
 
console.log("Here is next code"); // this code will be executed

Запустивши код вище, ми спочатку побачимо в консолі Here is next code, а потім вже синтаксичну помилку, не відловлену try...catch.

У цьому випадку, якщо сподобався матеріал, ставте лайк. І якщо збереться достатньо лайків, напишу ще десять корисних методів для JS-розробників.

10 Must-Have методів у JavaScript

Зміст

IIFE

Temporal Dead Zone

Оголошення об'єкта з константою

Порівняння змінних

Зберігання даних — web-storage

Hoisting

Object.freeze()

Object.seal()

Як працює метод try…catch

Що потрібно пам'ятати під час використання try…catch

Рекомендуємо курс по темі

Схожі матеріали