5 концепцій JavaScript, які повинен знати кожен початківець
1. Ключові слова let
і const
Раніше JavaScript надавав лише ключове слово var
для оголошення змінних. Але з var
є певні проблеми.
Перша проблема полягає в тому, що його область видимості може бути глобальною або функціональною.
По-друге, змінні, оголошені за допомогою var
, можуть бути повторно визначені. Крім того, виникають проблеми, адже ці змінні можна змінювати.
Тож JavaScript запропонував два нові ключові слова, щоб уникнути небажаних ситуацій — let
та const
.
Змінні, що оголошуються через let
і const
, мають блочну область видимості. Також варто зазначити, що змінні, оголошені з let
, не можуть бути повторно визначені, тоді як змінні, створені з const
, не підлягають ані повторному оголошенню, ані змінам.
2. Інтерполяція
String є одним з найпоширеніших типів даних у світі програмування. Він часто використовуються в розробці JavaScript. Робота з ним іноді може бути складною. Наприклад, зверніть увагу на наступний код.
let firstname = "John"; let secondname = "Doe"; let age = 25; let location = "Kyiv"; let message = firstname + " " + secondname + " is " + age + " years old and he lives in " + city; return message;
У прикладі немає проблеми, але хіба це не виглядає дещо складно? Інтерполяція робить такі ситуації значно простішими.
return `${firstname} ${secondname} is ${age} years old and he lives in ${location}.`;
Завдяки інтерполяції нам не потрібно використовувати оператор конкатенації. Ми можемо просто вписувати змінні безпосередньо в сам рядок.
3. Spread оператор
Spread використовується для розпакування масиву або об’єкта в JavaScript. В основному він розпаковує елементи масиву або об’єкта, розділені комами. Зверніть увагу на наступний код.
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
У наведеному коді arr3
створюється з arr1
та arr2
. Оператор Spread, позначений як ...
, використовується для розпакування arr1
та arr2
. Це можна зробити без оператора розповсюдження, але це буде досить складно.
Отже, Spread дуже корисний у таких ситуаціях. Крім того, його також можна використовувати аналогічно для об’єктів.
4. Arrow функції
Розробники JavaScript давно просили цей функціонал. Окей, що це? — це простий концепт, який дозволяє нам стисло писати функції. Зверніть увагу на наступний код.
function testOne(a, b) { return a + b; }
Функція testOne
є звичайною функцією JavaScript, створеною за допомогою традиційного ключового слова function
. Тепер зверніть увагу на наступний код.
const testTwo = (a,b) => a + b;
Наведений вище код є альтернативою функції testOne
. Якщо тіло функції має лише одне вираження, ми можемо опустити ключове слово return
у стрілкових функціях.
5. Деструктуризація
Деструктуризація масивів і об’єктів — це ще одна потужна функція сучасного JavaScript. Вона використовується для того щоб отримати властивості з об’єкта або елементів з масиву. Зверніть увагу на наступний код.
const obj = { name: "John", age: 25 city: "Kyiv" } const { name, age, city } = obj;
У наведеному коді властивості об’єкта obj
дістаються за допомогою деструктуризації об’єкта. Як ви можете бачити, деструктуризація об’єкта виконується за допомогою фігурних дужок. Аналогічно, елементи масиву можуть бути вилучені за допомогою деструктуризації масиву, яка виконується за допомогою квадратних дужок.
Окрім цих функцій, є ще багато цікавих можливостей, про які я розповім у наступних статтях, таких як async/await
, оператор залишку, нові методи масивів, тощо. Більшість із цих функцій легко зрозуміти, і вони дуже корисні під час програмування у веб.
Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті
2 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів