Термін «лексична область» на перший погляд може здатися неочевидним. Корисно було б розібрати значення цих слів окремо.

Ця стаття пояснить лексичну область, спершу розібравши значення слів «лексична» та «область».

Давайте почнемо з розбору значення слова «область».

Що ж таке область?

Область — це простір, в якому предмет (функція або змінна) є видимим та доступним для решти коду.

Зверніть увагу:

• Область — це територія, простір або регіон.
• Глобальна область — це глобальний простір (або публічний).
• Локальна область — це місцевий простір (або обмежений).

Ось приклад:

// Визначення змінної в глобальній області:
const fullName = "Oluwatobi Sofela";

// Визначення вкладених функцій:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Спробуйте на StackBlitz

У фрагменті вище ми визначили змінну fullName в глобальній області. Через це вона є видимою та доступною глобально всьому коду всередині цього скрипту.

Але ми визначили writeName() всередині функції sayName(), тому writeName() перебуває в локальній області sayName().

Не забувайте, що кожен раз, коли ми викликаємо функцію writeName(), комп’ютер не піде до глобальної області, щоб викликати змінну fullName. Натомість, він послідовно пройде через ланцюг областей, шукаючи fullName.

Що таке ланцюг областей?

Ланцюгом областей називають унікальні простори, які існують поза областю, де змінну викликали до глобальної області.

Для прикладу:

// Визначення змінної в глобальній області:
const fullName = "Oluwatobi Sofela";

// Визначення вкладених функцій:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Зверніть увагу, в фрагменті вище змінна fullName була викликана з області функції writeName().

Тому ланцюг областей, який існує від виклику змінної до глобальної області, виглядатиме так:

Область writeName() ---> область sayName() ---> область profile() ---> глобальна область

Іншими словами, від області виклику змінної fullName до її лексичної області (в даному випадку глобальної області) знаходяться чотири інших областей.

Зверніть увагу: глобальна область є останньою ланкою в ланцюгу областей JavaScript.

Як працює ланцюг областей?

Ланцюг областей JavaScript визначає ієрархію областей, через які має пройти комп’ютер, щоб знайти лексичну область конкретної функції, яка була викликана.

Для прикладу розглянемо такий код:

// Визначення змінної в глобальній області:
const fullName = "Oluwatobi Sofela";

// Визначення вкладених функцій:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

У фрагменті вище, кожен раз при виклику функції profile(), комп’ютер спочатку викликатиме функцію sayName(), яка є єдиним кодом всередині функції profile().

Після цього комп’ютер викликатиме функцію writeName(), яка є єдиним кодом всередині функції sayName().

Тепер, оскільки код всередині writeName() каже комп’ютеру викликати та повернути вміст змінної fullName, комп’ютер викличе fullName. Але комп'ютер не піде напряму до глобальної області, щоб викликати fullName.

Натомість комп’ютер крок за кроком проходить через ланцюг областей, щоб знайти лексичну область змінної fullName.

Ось послідовність кроків, які має зробити комп’ютер, щоб знайти лексичну область змінної fullName:

1. Комп’ютер провірить, чи змінна fullName була визначена локально всередені функції writeName(). Але він не знайде визначення fullName тут, тому він рухається до наступної області, щоб продовжити свої пошуки.
2. Комп’ютер шукатиме визначення fullName всередині sayName() (це наступна область в ланцюгу). Він не знайде визначення змінних тут, тому далі рухається вверх по ланцюгу.
3. Комп’ютер шукатиме визначення fullName у функції profile(). Визначення fullName тут немає. Комп’ютер далі шукає лексичну область змінної fullName в наступній частині ланцюга областей.
4. Комп’ютер доходить до глобальної області (наступна область після profile()). На щастя, він знаходить визначення fullName! Як наслідок, комп’ютер отримає вміст змінної ("Oluwatobi Sofela") і поверне його.

Час попрактикуватися з областю 🤸‍♂️🏋️‍♀️🏊‍♀️

Розглянемо код. Яку з трьох змінних fullName викличе комп’ютер?

// Спочатку змінна fullName визначається в глобальній області:
const fullName = "Oluwatobi Sofela";

// Вкладені функції, які містять ще дві змінні fullName:
function profile() {
  const fullName = "Tobi Sho";
  function sayName() {
    const fullName = "Oluwa Sofe";
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Комп’ютер викличе першу, другу чи третю змінну fullName?

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

Якщо у вас не буде виходити, не засмучуйтесь. Натомість, перегляньте урок та спробуйте ще раз.

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

Впоралися?

Серед трьох визначень fullName, що представлені в коді вище, комп’ютер викличе та поверне ту змінну, яка визначена у функції sayName().

Змінна fullName всередині sayName() буде викликана, тому що sayName() є першою областю, в якій комп’ютер знайде визначення fullName.

Тому, якщо викликати profile(), поверненим значенням буде "Oluwa Sofe".

Спробуйте на StackBlitz

Запам’ятайте:

• Уявімо, що комп’ютер не знайде визначення fullName у жодній області. В такому випадку комп’ютер поверне Uncaught ReferenceError: fullName is not defined.
• Глобальна область завжди є останньою в ланцюгу областей. Іншими словами, глобальна область — це те місце, де закінчуються всі пошуки.
• Внутрішня область (нащадок) має доступ до батьківської (зовнішньої) області, але зовнішня область не має доступу до області-нащадка. Наприклад, у фрагменті вище функція writeName() має доступ до коду всередині будь-якої батьківської області (sayName(), profile() або глобальної області). Однак sayName(), profile() та глобальна область не мають доступу до коду всередині writeName().

Швидкий огляд того, що ми вивчили

Область в JavaScript — це про простір.

Тому наступного разу, коли партнер запрошує вас у свою особисту область, пам’ятайте, що вони запрошують вас у свій особистий простір 😜!

Коли прибудете туди, не забудьте попросити їх продемонструвати лексичні вміння...

Ви питаєте, що означає «лексичний»? Давайте розберемося.

Що означає «лексичний»?

Лексичний — це про визначення речей.

Все, що пов’язано зі створенням слів, виразів або змінних, є лексичним.

Наприклад, гра scrabble є лексичною активністю, оскільки вона пов’язана зі створенням слів.

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

Зверніть увагу: другою назвою словника є лексикон. Іншими словами, лексикон — це словник, в якому перераховані та визначені слова.

Тепер, коли ми розуміємо значення слів «лексична» та«область», ми можемо говорити про лексичну область.

Що таке лексична область в JavaScript?

Лексична область — це область визначення виразу.

Іншими словами, лексична область предмету — це місце, в якому предмет було створено.

Зверніть увагу:

• Інакшою назвою для лексичної області є статична область.
• Місце, де предмет був викликаним, не завжди є лексичною областю предмета. Натомість область визначення предмету є його лексичною областю.

Приклад лексичної області:

Розглянемо такий код:

// Визначення змінної в глобальній області:
const myName = "Oluwatobi";

// Виклик змінної myName всередині функції:
function getName() {
  return myName;
}

Зверніть увагу, що у наведеному фрагменті ми визначили змінну myName в глобальній області та викликали її всередині функції getName().

Питання: який з двох просторів є лексичною областю змінної myName? Це глобальна область чи локальна область функції getName()?

Відповідь: не забувайте, що лексична область — це простір визначення, а не простір виклику. Тому лексичною областю змінної myName є глобальна область, оскільки ми визначили myName в глобальному середовищі.

Ще один приклад лексичної області

function getName() {
  const myName = "Oluwatobi";
  return myName;
}

Питання: де знаходиться лексична область myName?

Відповідь: зверніть увагу, що ми створили та викликали змінну myName всередині getName(). Тому лексичною областю myName є локальне серидовище getName(), оскільки getName() є простором визначення myName.

Як працює лексична область?

Область визначення виразу JavaScript визначає, який код має доступ до нього.

Іншими словами, лише код всередині лексичної області предмету має доступ до цього предмету.

Наприклад, розглянемо такий код:

// Визначення функції:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Визначення іншої функції:
function displayFullName() {
  const fullName = "Oluwatobi " + lastName;
  return fullName;
}

// Виклик функції displayFullName():
console.log(displayFullName());

// Виклик функції вище поверне:
Uncaught ReferenceError: lastName is not defined

Зверніть увагу, що виклик функції displayFullName() у фрагменті вище повернув Uncaught ReferenceError. Помилка повертається, бо лише код всередині лексичної області предмету може мати доступ до предмету.

Як наслідок, ані функція displayFullName(), ані її внутрішній код не мають доступу до змінної lastName, оскільки lastName була визначена в іншій області.

Іншими словами, лексична область змінної lastName відрізняється від області змінної displayFullName().

Простір визначення lastName знаходиться у showLastName(), якщо лексична область displayFullName() — це глобальне серидовище.

Тепер розглянемо інший код:

// Визначення функції:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Визначення іншої функції:
function displayFullName() {
  const fullName = "Oluwatobi " + showLastName();
  return fullName;
}

// Виклик функції displayFullName():
console.log(displayFullName());

// Виклик функції вище поверне:
"Oluwatobi Sofela"

У фрагменті вище displayFullName() успішно повернула "Oluwatobi Sofela", оскільки displayFullName() та showLastName() знаходяться в одній лексичній області.

Іншими словами, displayFullName() може викликати showLastName(), бо обидві функції визначено в глобальній області.

Зверніть увагу:

• У другому прикладі displayFullName() не отримала доступу до змінної lastName всередині showLastName(). Натомість displayFullName() викликала showLastName(), яка потім повернула вміст змінної lastName.
• Альтернативою лексичої області є динамічна область, але вона рідко використовується в програмуванні. Лише декілька мов, наприклад bash, використовують динамічну область.

Висновок

Кожен раз, коли ви чуєте «лексична», думайте про визначення.

Тобто лексична область машини, змінної, телефону, функції або купальника — це місце походження.

Огляд

У цій статті описано лексичну область в JavaScript. Також пояснено, чому це важливе поняття в програмуванні.

Дякую за увагу!

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

Також ми обговоримо, яким чином JavaScript компілює та виконує програми.

Вкінці ми поговоримо про те, яким чином можна використовувати лексичну область для пояснення помилок неоголошених змінних чи посилання.

Без зайвих слів, почнемо.

Зміст

• Як JavaScript виконує програми?
• Як JavaScript парсить/компілює та виконує код
• Розуміння помилки синтаксису
• Розуміння піднесення змінних та функцій
• Що таке лексична область?
• Розуміння лексичної області
• Підсумки

Як JavaScript виконує програми?

Перед тим як розбиратися, як JavaScript виконує код/програму, ми розглянемо різні кроки, що залучені у будь-якому процесі компіляції з точки зору теорії компілятора.

Для будь-якої мови компілятор виконує такі операції:

Токенізація/лексування

Під час цього процесу вся програма розділяється на ключові слова, які називаються токенами. Наприклад, розглянемо інструкцію let temp = 10: коли виконується токенізація, вона ділить інструкцію на такі ключові слова: let, temp, =, 10.

Лексування та токенізація є взаємозамінними термінами, але між ними є невелика різниця. Лексування — це процес токенізації, який також перевіряє, чи він сам має розглядатися як окремий токен. Ми можемо вважати лексування «розумною» версією токенізації.

Парсинг

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

Цю структуру дерева називають абстрактним синтаксичним деревом (AST).

Генерування коду

Цей процес конвертує AST у код, який може прочитати машина.

Це був короткий огляд того, як компілятор працює та генерує машинний код.

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

Найважливішим спостереженням щодо виконання коду JavaScript є той факт, що в межах виконання коду відбуваються дві фази:

1. Парсинг
2. Виконання

Перед тим, як ми перейдемо до лексичної області, важливо розуміти, як JavaScript виконує програму. У наступному розділі ми детальніше розберемо, як працюють ці дві фази.

Як JavaScript парсить/компілює та виконує код

Спочатку обговоримо фазу парсингу. Під час цієї фази двигун JavaScript оглядає всю програму, призначає змінні до відповідних областей та перевіряє наявність помилок. Якщо він знаходить помилку, виконання програми зупиняється.

Під час наступної фази відбувається виконання коду.

Для того, щоб краще зрозуміти цей процес, розглянемо детальніше два сценарії:

• Синтаксична помилка
• Піднесення змінної

Синтаксична помилка

Найкращий та найпростіший спосіб показати, як JS спочатку парсить, а потім виконує програму, — показати поведінку синтаксичної помилки.

Розглянемо такий помилковий код:

const token = "ABC";
console.log(token);

//Синтаксична помилка:
const newToken = %((token);

Програма вище видасть синтаксичну помилку в останньому рядку. Помилка буде виглядати ось так:

Uncaught SyntaxError: Unexpected token '%'

JavaScript не виконує console.log. Натомість він проходить через всю програму наступним чином:

• Рядок 1: знайдено оголошення та визначення змінної. Збережено посилання на змінну token в поточній області, яка є глобальною.
• Рядок 2: двигун JavaScript побачив, що змінна token використовується. Спочатку він звертається до поточної області з метою перевірити, чи присутня змінна token. Якщо вона присутня, то посилається на оголошення змінної token.
• Рядок 3: двигун побачив, що змінна newToken була оголошена та визначена. Він перевірив, чи змінна під назвою newToken вже існувала у поточній області. Якщо так, двигун видає помилку посилання. Якщо ні, двигун зберігає посилання на цю змінну в поточній області.
• У тому ж рядку двигун побачив, що він намагався посилатися на змінну %((token). Також він помітив, що назва почалася з символу %, а назви змінних не можуть починатися з резервованих ключових слів, тому двигун видав синтаксичну помилку.

Піднесення змінних та функцій

Піднесення — це механізм, завдяки якому всі змінні у своїх відповідних областях «підіймаються», тобто стають доступними зверху.

Поглянемо на приклад нижче, який покаже, що піднесення відбувається під час фази парсингу і потім відбувається виконання:

doSomething();

function doSomething(){
	console.log("How you doing?");
}

В прикладі вище, двигун проходить всю програму у такій послідовності:

• Рядок 1: двигун JavaScript потрапив нa функцію під назвою doSomething. Він перевірив, чи doSomething доступна в поточній області. Якщо так, він посилається на функцію, в інакшому випадку він видає помилку посилання.
• Виявилось, що під час фази парсину двигун знайшов function doSomething у поточній області. Як наслідок, він додав посилання на змінну в поточну область та зробив її доступною в межах всієї програми.
• Вкінці функція doSomething друкує рядок How you doing?.

Виходячи з пояснення вище, спочатку код парсувався, щоб згенерувати проміжний код, який забезпечує доступ до посилання на змінні та функції в поточній області.

В наступній фазі JavaScript знає про існування функції та починає її виконувати.

З прикладів наведених вище, ми можемо впевнено дійти до висновку, що двигун JavaScript робить наступні кроки перед виконанням коду:

1. Парсить код.
2. Генерує проміжний код, що описує доступні змінні та функції.
3. Використовуючи цей проміжний код, двигун починає виконання програми.

Що таке лексична область?

Процес визначення областей змінних та функцій під час виконання називається лексичною областю. Слово лексична походить від лексичної фази/фази токенізації компіляції JavaScript.

Протягом часу виконання JavaScript робить дві дії: парсинг та виконання. Як ми дізналися в попередньому розділі, під час фази парсингу визначаються області змінних та функцій. Тому й було важливо спочатку зрозуміти, як працює фаза парсингу у виконанні коду, оскільки вона закладає фундамент для розуміння лексичної області.

Простими словами, під час фази парсингу відбувається створення лексичної області.

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

По-перше, під час фази парсингу, область призначається/посилається на змінну там, де вона оголошена.

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

Потім, під час призначення області до змінної, двигун JavaScript перевіряє батьківські області на наявність змінної.

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

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

А ця ілюстрація показує, як двигун JS намагається знайти змінну, яка не існує в жодній області:

Розуміння лексичної області

У розділі вище ми дали визначення лексичній області. Також ми розібралися з її характеристиками.

У цьому розділі ми розглянемо лексичну область на прикладі. Як то кажуть, складні теми завжди легше зрозуміти на реальних прикладах.

Приклад, який ми розглянемо, полягає у забарвленні часток коду, які мають схожі області. Звучить незрозуміло, але дозвольте продемонструвати простою ілюстрацією.

Розберемо, що відбувається на цій ілюстрації.

У нашій програмі знаходяться:

• empData: масив об’єктів.
• allPositions: масив рядків що описує посади працівників.
• Інструкція, яка друкує змінні allPositions.

Тепер поглянемо, що відбувається під час фази парсингу цієї програми:

• Двигун починає з першого рядка і він потрапляє на оголошення змінної empData.
• Потім двигун провіряє, чи empData доступна в поточній області. Оскільки схожої змінної не знайдено, він шукає наявність цієї змінної в батьківських областях.
• Двигун зупиняє свій пошук, оскільки немає доступних областей і поточна область є глобальною.
• Далі двигун призначає значення undefined до змінної empData під час фази парсингу, щоб у випадку, коли щось у внутрішніх областях намагається посилатися на змінну, її можна було викликати.
• Права частина оператора присвоєння «розв’язується» під час фази виконання програми.
• Подібним чином двигун присвоює значення undefined до змінної allPositions.
• Але на правій частині ми також посилаємось на змінну empData. На цьому етапі двигун провіряє, чи змінна доступна в поточній області. Оскільки вона доступна, на неї далі йде посилання (тобто вона доступна у глобальній області).
• Двигун досі на правій частині оператора присвоєння, бо він помітив стрілкову функцію всередині функції «map». Оскільки двигун натрапив на визначення функції, він створює нову область. В ілюстрації ця область позначена цифрою 2.
• Оскільки це нова область, ми даємо їй чорний колір.
• Ця стрілкова функція має аргумент data та повертає data.position. У фазі парсингу, двигун підіймає всі потрібні змінні, посилавшись на змінні, доступні в поточній області, а також батьківській.
• Всередині цієї функції згадується змінна data, тому двигун провіряє, чи поточна область має цю змінну. Оскільки змінна присутня в поточній області, посилання йде туди ж.
• Коли двигун потрапляє на фігурну дужку }, він покидає функціональну область.
• Вкінці програми знаходиться інструкція, яка друкує змінні allPositions. Оскільки згадується змінна allPositions, двигун шукає її в поточній області (тобто глобальній області). Оскільки вона знайдена, вона посилається туди ж в інструкції console.

Підсумки

У цій статті ми ознайомилися з лексичною областю та розібралися, як вона працює, розглянувши простий приклад з забарвленням.

Дякую, що прочитали!

Підпишіться на мене у твіттері, GitHub та LinkedIn.

Під час отримання даних із зовнішніх джерел або серверів потрібно переконатися, що дані, які повертаються, мають формат JSON. Тоді ви можете використовувати їх у своїй програмі.

У деяких ситуаціях, працюючи локально або під час завантаження файлів даних на сервер, ми можемо забажати прочитати ці дані JSON із файлу.

Ми дізнаємося, як це зробити в цьому посібнику.

Як читати файл JSON у JavaScript за допомогою Fetch API

Одним із стандартних методів, який ми можемо використовувати для читання файлу JSON (локального файлу, або файлу, завантаженого на сервер), є Fetch API. Він використовує однаковий синтаксис для обох випадків. Єдиною відмінністю буде URL-адреса.

Наприклад, припустімо, що у папці нашого проєкту є локальний файл під назвою data.json, який містить такі дані JSON:

<!--./data.JSON-->

{
    "id": 1,
    "title": "Hello World",
    "completed": false
}

Тепер ми можемо прочитати цей файл у JavaScript за допомогою методу Fetch API:

<!--./index.js-->

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

У наведеному вище прикладі ми змогли прочитати локальний файл JSON. Але, на жаль, коли ми запускаємо це в браузері, ми можемо отримати таку помилку CORS (укр. спільне використання ресурсів різними джерелами), оскільки наш файл не знаходиться на сервері:

Щоб виправити це, ми переконаємося, що наш файл JSON знаходиться на локальному або віддаленому сервері. Якщо ми використовуємо Live-сервер у нашій IDE, все буде нормально. Але коли ми безпосередньо завантажуємо наш файл, ми отримуємо цю помилку.

І як я вже говорив раніше, припустімо, що у нас є файл JSON на віддаленому сервері, і ми намагаємося прочитати цей файл у JavaScript. Той самий синтаксис буде працювати:

<!--./index.js-->

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

Fetch API є кращим методом для використання, коли ми хочемо прочитати файл JSON із зовнішнього сервера або локального файлу в наш файл JavaScript.

Як прочитати файл JSON у JavaScript за допомогою оператора import

Інший метод, який ми можемо використати окрім створення запиту HTTP, є оператор import. Цей метод має кілька ускладнень, але ми розглянемо їх.

Як і в попередньому розділі, припустімо, що у нас є файл JSON, який містить дані користувача (наприклад, user.json):

<!--./user.JSON-->

{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

Ми можемо прочитати ці дані JSON у JavaScript за допомогою оператора імпорту таким чином:

<!---./index.js-->

import data from './data.json';
console.log(data);

На жаль, це викличе помилку, що ми не можемо використовувати оператор import поза модулем. Це стандартна помилка, коли ми намагаємося використати оператор import у звичайному файлі JavaScript, особливо для розробників, які не знайомі з JavaScript.

Щоб виправити це, ми можемо додати тег script type="module" в наш файл HTML, де ми посилалися на файл JavaScript, наприклад:

<html lang="en">
    // ...
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>

Коли ми це зробимо, ми все одно отримаємо іншу помилку:

Щоб виправити вже цю помилку, нам потрібно додати тип файлу JSON до оператора import, і тоді ми зможемо прочитати наш файл JSON у JavaScript:

import data from './data.json' assert { type: 'JSON' };
console.log(data);

Це ідеально працює, якщо ми запускаємо наші файли на локальному або віддаленому сервері. Але припустімо, що ми запускаємо це локально — тоді ми отримаємо помилку CORS.

Підбиваючи підсумки

У цій статті ми дізналися, як читати файл JSON у JavaScript і можливі помилки, з якими ми можемо зіткнутися під час використання кожного методу.

Найкраще використовувати метод fetch API, коли ви хочете зробити запит HTTP. Наприклад, припустімо, що ми отримуємо дані з фальшивого файлу JSON, який ми зрештою витягнемо з API.

Тим не менш, у ситуації, коли нам не потрібно використовувати запит HTTP, ми можемо використати оператор import. Ми можемо використовувати  import, коли використовуємо такі бібліотеки, як React та Vue, які мають відношення до модулів. Це означає, що нам не потрібно буде додавати тип модуля, а також нам не потрібно буде додавати тип файлу.

Жоден із цих методів не потребує встановлення пакету чи використання бібліотеки, оскільки вони є вбудованими. Вибирати, який метод використовувати, повністю залежить від вас.

Але коротка порада, яка відрізняє ці методи, полягає в тому, що Fetch API зчитує файл JSON у JavaScript, надсилаючи запит HTTP, тоді як оператор import не потребує жодного запиту HTTP, а працює як будь-який інший імпорт, який ми виконуємо.

Отримати доступ до властивостей об’єкта у JavaScript можна декількома способами. А ось найпопулярнішими є точкова нотація та дужкова нотація.

У цій публікації я розповім різницю між ними.

Завдяки точковій та дужковій нотаціям ви можете:

• отримати доступ до значення властивості за ключем
• змінити значення існуючої властивості за ключем
• додати нову властивість до об’єкта

Однак ці способи отримують доступ до властивостей по-різному і використовуються у різних ситуаціях.

Точкова нотація

Точкова нотація передбачає використання крапки (.) та ключа, щоб отримати властивість. Ось синтаксис:

об’єкт.ключ

Після крапки потрібно написати ключ властивості, яку хочемо отримати. Цей вираз поверне значення властивості. Ось приклад:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const target = obj.name
// deeecode

Використавши крапку та ключ name (.name), ми отримали «deeecode», що є значенням властивості name.

Цю нотацію також можна використовувати, щоб змінити існуючу властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj.age = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript"
// }

Ми змінили властивість age.

За допомогою такого підходу також можна додати нову властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj.location = "Mercury"

console.log(obj)
// {
//   name: "deeecode",
//   age: 80,
//   language: "javascript",
//   location: "Mercury"
// }

Ми додали властивість location.

Але цей підхід має обмеження, які ми незабаром розглянемо. Далі розберемося, як працює дужкова нотація.

Ось відеоверсія цієї теми, якщо вам цікаво.

Дужкова нотація

Дужкова нотація передбачає використання квадратних дужок, у яких знаходиться вираз, який оцінюється як значення. Це значення служить ключем для доступу до властивості. Ось синтаксис:

об’єкт[вираз]

Вираз у дужках оцінюється як ключ властивості, до якої ви хочете отримати доступ, та цей вираз поверне значення властивості. Розглянемо приклад:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const target = obj["name"]
// deeecode

Використавши квадратні дужки та вираз "name" (["name"]), ми отримали «deeecode», що є значенням властивості name.

Цю нотацію також можна використовувати, щоб змінити існуючу властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj["age"] = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript"
// }

Ми змінили властивість age за допомогою виразу "age".

За допомогою квадратних дужок також можна додати нову властивість:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

obj["location"] = "Mercury"

console.log(obj)
// {
//   name: "deeecode",
//   age: 80,
//   language: "javascript",
//   location: "Mercury"
// }

Ми додали нову властивість location за допомогою виразу "location".

Дужкова нотація має більше можливостей, ніж точкова нотація. Зараз поясню.

Різниця між точковою та дужковою нотаціями

Точкова нотація дозволяє лише статичні ключі, а дужкова нотація приймає динамічні ключі. Статичний ключ означає, що ключ вводиться напряму, а динамічний ключ означає, що ключ обчислюється у виразі.

Розглянемо декілька прикладів.

Використання обох підходів для доступу до властивостей

Починаємо з точкової нотації:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj.myKey
// undefined

Я призначив значення «language» до змінної myKey. Я очікую, що при використанні точкової нотації (тобто obj.myKey) «myKey» зміниться на «language». Тобто це читатиметься як obj.language та поверне «javascript».

Однак цього не стається, а результатом є undefined.

Причиною є те, що точкова нотація приймає лише статичні ключі. Тому коли ви використовуєте obj.myKey, JavaScript шукає властивість з ключем myKey у obj. Але такої властивості не існує, тому ми отримуємо undefined.

А ось дужкова нотація дозволяє динамічні ключі. Оскільки ця нотація приймає вирази, ви можете використати будь-який вираз, який дорівнюватиме значенню. Це може бути:

• hello + Hi, що дорівнюватиме helloHi у ролі ключа
• returnKey(), що дорівнюватиме значенню у ролі ключа
• isTrue ? "trueKey" : "falseKey", що дорівнюватиме «trueKey» або «falseKey» у ролі ключа
• variable, що дорівнюватиме значенню змінної у ролі ключа

Тому, використовуючи попередній приклад, ми можемо використати наступне:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj[myKey]
// javascript

Переданий у квадратні дужки вираз myKey є змінною. Цей вираз перетвориться на «language», що є значенням змінної. Використовуючи це значення, квадратні дужки можуть отримати значення властивості, тобто «javascript».

А якщо ви передасте рядок "myKey", ви отримаєте undefined:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "language"

const target = obj["myKey"]
// undefined

Причиною є те, що рядок "myKey" оцінюється як значення "myKey", яке служить як ключ для отримання властивості. Оскільки в obj немає ключа myKey, поверненим значенням є undefined.

Використання обох підходів для зміни властивостей

Розпочнемо з точкової нотації:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "age"

obj.myKey = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 80,
//   language: "javascript",
//   myKey: 100
// }

Ми маємо myKey зі значенням «age». Спроба виконати obj.myKey = 100, щоб змінити властивість age, не спрацює. Причина в тому, що точкова нотація приймає статичний ключ. Тому obj.myKey приймає myKey як ключ. Оскільки в obj не існує mykey, інструкція додає ключ. Отже, obj має новий ключ myKey зі значенням 100.

Якщо використати дужкову нотацію, поведінка інша:

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "age"

obj[myKey] = 100

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript"
// }

Замість того, щоб додавати нову властивість myKey до obj, дужкова нотація змінює властивість age. Причина в тому, що ми передаємо myKey як вираз до квадратних дужок. Цей вираз у ролі змінної перетворюється на "age", що є значенням змінної.  Використовуючи «age» у ролі ключа, цей підхід змінює значення властивості age на 100.

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

const obj = {
  name: "deeecode",
  age: 80,
  language: "javascript",
}

const myKey = "location"

obj[myKey] = "Mercury"

console.log(obj)
// {
//   name: "deeecode",
//   age: 100,
//   language: "javascript",
//   location: "Mercury"
// }

Змінна myKey отримує нове значення "location". Передавши його до квадратних дужок та призначивши значення «Mercury», ми отримаємо нову властивість з парою ключ-значення: location та «Mercury».

Яку нотацію використовувати?

Ми розглянули кожну нотацію, використавши різні приклади для доступу/зміни існуючих властивостей та додавання нових властивостей. Отож, яку нотацію використовувати при написанні коду JavaScript?

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

Точкова нотація корисна, якщо ви знаєте властивість заздалегідь. Ви просто використовуєте object.key, щоб прочитати/змінити існуючу властивість чи додати нову властивість.

Дужкова нотація корисна, якщо ви хочете динамічно отримати доступ до властивості. Ключ такої властивості може походити від виразів типу getKey(), "my" + "key" чи keyVariable.

Сподіваюсь, ви щось вивчили. Будь ласка, поділіться публікацією, якщо вона була корисною :)

У JavaScript є чудові модулі та методи для створення запитів HTTP, які можна використовувати для надсилання чи отримання даних зі сторони сервера. У цій публікації ми розглянемо кілька популярних способів створення запитів HTTP у JavaScript.

Ajax

Ajax — це традиційний спосіб створення асинхронного запиту HTTP. Дані можна надсилати за допомогою методу HTTP POST і отримувати за допомогою методу HTTP GET. Давайте подивимось, як зробити запит GET. Я буду використовувати сайт JSONPlaceholder — безкоштовний онлайн API REST для розробників, який повертає випадкові дані у форматі JSON.

Щоб зробити виклик HTTP в Ajax, потрібно ініціалізувати новий метод XMLHttpRequest() та вказати кінцеву точку URL-адреси і метод HTTP (у цьому випадку GET). Далі ми використовуємо метод open() для зв’язування методу HTTP та кінцевої точки URL-адреси і викликаємо метод send() для ініціалізації запиту.

Ми реєструємо відповідь HTTP в консолі за допомогою властивості XMLHTTPRequest.onreadystatechange, яка містить обробник подій, що викликається, коли подія readystatechanged запускається.

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Якщо ви переглянете консоль браузера, то побачите, що вона поверне масив даних у форматі JSON. Але як ми можемо знати, чи запит виконано? Іншими словами, як ми можемо обробляти відповіді за допомогою Ajax?

Властивість onreadystatechange має два методи: readyState та status, які дозволяють перевірити стан нашого запиту.

Якщо readyState дорівнює 4, то це свідчить про те, що запит виконано. Властивість readyState має 5 відповідей. Дізнайтесь про них більше за цим посиланням.

Окрім прямого виклику Ajax за допомогою JavaScript існують й інші, більш потужні методи здійснення виклику HTTP (наприклад, $.Ajax, який є методом jQuery) і тому я зупинюсь на них більш детально.

Методи jQuery

jQuery має багато методів для легкої обробки запитів HTTP. Щоб використати ці методи, вам потрібно включити бібліотеку jQuery до свого проєкту.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax

jQuery Ajax є одним із найпростіших методів здійснення виклику HTTP.

Метод $.ajax приймає багато параметрів, деякі з яких є обов’язковими, а інші необов’язковими. Він містить два варіанти функції зворотного виклику: success та error, щоб обробити отриману відповідь.

Метод $.get

Метод $.get використовується для виконання запитів GET. Він приймає два параметри: кінцеву точку та функцію зворотного виклику.

Метод $.post

Метод $.post — це інший спосіб надсилання даних на сервер. Він приймає три параметри: url, дані, які ви хочете надіслати, і функцію зворотного виклику.

$.getJSON

Метод $.getJSON отримує дані лише у форматі JSON. Він приймає два параметри: url та функцію зворотного виклику.

jQuery має ці методи для запиту або надсилання даних на віддалений сервер. Але насправді їх можна поєднати в один метод $.ajax, як показано у прикладі нижче:

Функція fetch

Функція fetch — це новий потужний web API, який дозволяє робити асинхронні запити. Насправді, fetch є одним із найкращих і моїх улюблених способів зробити запит HTTP. Він повертає проміс, що є однією з чудових функцій ES6. Якщо ви не знайомі з ES6, ви можете прочитати про нього в цій публікації. Проміси дозволяють нам розумніше обробляти асинхронний запит. Давайте подивимося, як працює fetch.

Функція fetch приймає один обов’язковий параметр: URL endpoint. Також вона може мати інші додаткові параметри, як у прикладі нижче:

Як ви можете бачити, fetch має багато переваг для виконання запитів HTTP. Ви можете дізнатися більше про них тут. Крім того, у fetch є інші модулі та плагіни, які дозволяють надсилати запити на сервер та отримувати їх зі сторони сервера (наприклад, axios).

Axios

Axios — це бібліотека з відкритим вихідним кодом для створення запитів HTTP, яка надає багато чудових функцій. Давайте подивимося, як вона працює.

Використання:

По-перше, вам потрібно включити Axios. Існує два способи включити Axios до проєкту.

Перший: ви можете використати npm:

npm install axios --save

І потім вам потрібно імпортувати його:

import axios from 'axios'

Другий: ви можете включити axios за допомогою CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Створення запиту з axios:

З Axios ви можете використати GET та POST для отримання та надсилання даних із сервера.

GET:

axios приймає один обов’язковий параметр і може приймати другий необов’язковий параметр. Деякі дані сприймаються як простий запит.

POST:

Axios повертає проміс. Якщо ви знайомі з промісами, ви, мабуть, знаєте, що проміси можуть виконувати кілька запитів. Ви можете робити те саме з axios і виконувати кілька запитів одночасно.

Axios підтримує багато інших методів і опцій. Ви можете дослідити їх тут.

Angular HttpClient

У Angular є власний модуль HTTP, який працює з додатками Angular. Він використовує бібліотеку RxJS для обробки асинхронних запитів і надає багато варіантів для виконання запитів HTTP.

Здійснення запиту на сервер за допомогою Angular HttpClient

Щоб зробити запит за допомогою Angular HttpClient, потрібно запустити наш код у додатку Angular. Тому я створив його. Якщо ви не знайомі з Angular, перегляньте мою публікацію, щоб дізнатися, як створити свій перший додаток Angular за 20 хвилин.

Перше, що нам потрібно зробити — імпортувати HttpClientModule до app.module.ts

Потім ми повинні створити сервіс для обробки запитів. Ви можете легко створити сервіс за допомогою Angular CLI:

ng g service  FetchdataService

Далі нам потрібно імпортувати HttpClient до сервісу fetchdataService.ts і вставити його всередині конструктора:

А в app.component.ts імпортувати fetchdataService :

//import
import { FetchdataService } from './fetchdata.service';

Зрештою, потрібно викликати сервіс і запустити його.

app.component.ts:

Ви можете переглянути приклад на Stackblitz.

Підсумки

Ми щойно розглянули найпопулярніші способи зробити запити HTTP у JavaScript.

Дякую за ваш час. Якщо вам сподобалась публікація, очікую оплесків та підписників у твіттері.

У JavaScript функція debounce гарантує, що ваш код запускається лише один раз за введення користувача. Пропозиції у вікні пошуку, автоматичне збереження текстових полів і усунення подвійних натискань кнопок — усе це випадки використання функції debounce.

У цьому посібнику ми дізнаємося, як створити функцію debounce в JavaScript.

Що таке debounce?

Термін debounce походить від електроніки. Коли ви натискаєте кнопку, скажімо, на пульті дистанційного керування телевізором, то сигнал надходить до мікрочіпа пульта настільки швидко, що перш ніж ви встигнете відпустити кнопку, він неодноразово повторюється і мікрочіп реєструє ваше «клацання» декілька разів.

Щоб змінити це, після отримання сигналу від кнопки мікрочіп припиняє обробку сигналів від неї на кілька мікросекунд — на той час, коли ви фізично не в змозі натиснути її знову.

Debounce у JavaScript

У JavaScript сценарій використання схожий. Ми хочемо запустити функцію, але лише один раз для кожного випадку використання.

Скажімо, ми хочемо показати пропозиції для пошукового запиту, але лише після того, як відвідувач завершить його введення.

Або ми хочемо зберегти зміни у формі, але лише тоді, коли користувач не працює активно над цими змінами, оскільки кожне «збереження» коштує нам подорожі до бази даних.

І мій улюблений приклад: деякі люди так звикли до Windows 95, що й досі двічі клацають усе 😁.

Це проста реалізація функції debounce:

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

Її можна використовувати для введення:

<input type="text" onkeyup="processChange()" />

Або для кнопки:

<button onclick="processChange()">Click me</button>

Або для події у вікні:

window.addEventListener("scroll", processChange);

І для інших елементів (наприклад, простих функцій JS).

Отже, що тут відбувається? debounce — це спеціальна функція, яка виконує два завдання:

• виділення області для змінної timer
• планування запуску функції в певний час

Давайте пояснимо, як це працює в першому випадку використання з введенням тексту.

Коли відвідувач пише першу літеру та відпускає кнопку, то debounce спочатку скидає таймер за допомогою clearTimeout(timer). На даний момент крок непотрібний, оскільки ще нічого не заплановано. Потім вона планує виклик наданої функції saveInput(), яка буде викликана через 300 мс.

Але, припустімо, що відвідувач продовжує писати, тому кожне відпускання кнопки знову викликає функцію debounce. Кожен виклик потребує скидання таймера, або, іншими словами, скасування попередніх планів saveInput(), і перепланування на новий час — 300 мс у майбутньому. Це триває до тих пір, поки відвідувач продовжує натискати кнопки.

Останнє планування виклику наданої функції saveInput() не буде очищено, і тому її зрештою буде викликано.

І навпаки: як ігнорувати подальші виклики

Це все добре для запуску автозбереження або відображення пропозицій. Але як щодо випадку використання з кількома натисканнями однієї кнопки? Ми не хочемо чекати останнього натиску, а краще зареєструвати перший і ігнорувати решту:

function debounce_leading(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

Тут ми запускаємо функцію saveInput() під час першого виклику функції debounce_leading, яка у свою чергу ініціалізується першим натисканням кнопки. Плануємо знищення таймера на 300 мс. Кожне наступне натискання кнопки протягом цього періоду часу вже матиме визначений таймер і зсуватиме деструкцію лише на 300 мс у майбутнє.

Реалізації debounce в бібліотеках

У цій статті я показав вам, як реалізувати функцію debounce у JavaScript і використовувати її для, ну, debounce подій, викликаних елементами вебсайту.

Однак вам не потрібно використовувати власну реалізацію debounce у своїх проєктах, якщо ви цього не хочете. Широко використовувані бібліотеки JS вже містять її реалізацію:

В середньому я працюю з даними JSON 18 разів на тиждень. І мені досі потрібно майже кожного разу гуглити конкретні способи маніпулювання ними. Лише уявіть, якби був путівник з усіма відповідями.

У цій публікації я покажу основи роботи з масивами об’єктів у JavaScript.

Якщо ви коли-небудь працювали зі структурою JSON, ви працювали з об’єктами JavaScript. Буквально. JSON розшифровується як JavaScript Object Notation.

Створити об’єкт JSON так само просто:

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

Цей об’єкт представляє автомобіль. Може бути безліч різних кольорів чи типів автомобілів, але кожен об’єкт являє собою окрему машину.

Зараз такі дані найчастіше отримують зовні. Але іноді потрібно створити об’єкти та їх масиви вручну, як я робив, коли створював цей інтернет-магазин:

Розглядаючи кожну категорію, елемент списку у HTML виглядає так:

Я би не хотів, щоб цей код повторювався 12 разів, оскільки в подальшому він може стати непідтримуваним.

Створення масиву об’єктів

Але повернемося до автомобілів. Давайте подивимося на цей набір:

Ми можемо представити його у вигляді масиву таким чином:

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

Масиви об’єктів не залишаються такими самими весь час. Нам майже завжди потрібно ними маніпулювати. Отже, давайте розглянемо, як ми можемо додавати об’єкти до вже існуючого масиву.

Додавання нового об’єкту до початку масиву — Array.unshift

Щоб додати об’єкт на першу позицію, використовуйте Array.unshift.

Додавання нового об’єкту в кінець масиву — Array.push

Щоб додати об’єкт в кінець масиву, використовуйте Array.push.

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

Додавання нового об’єкту посеред масиву — Array.splice

Щоб додати об’єкт посередині, використовуйтеArray.splice. Ця функція дуже зручна, оскільки вона також може видаляти елементи. Зверніть увагу на її параметри:

Array.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);

Отже, якщо ми хочемо додати червоний Volkswagen Cabrio на п’яте місце, ми використаємо:

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

Перегляд масиву об’єктів

Дозвольте мені поставити вам запитання: для чого вам переглядати масив об’єктів? Причина, чому я запитую, полягає в тому, що зациклення майже ніколи не є основною причиною того, чого ми хочемо досягти.

JavaScript надає багато функцій, які можуть вирішити вашу проблему без реалізації логіки в загальному циклі. Давайте поглянемо.

Пошук об’єкта в масиві за його значеннями — Array.find

Припустимо, ми хочемо знайти автомобіль червоного кольору. Ми можемо використати функцію Array.find.

let car = cars.find(car => car.color === "red");

Ця функція повертає перший елемент, який відповідає значенню:

console.log(car);
// output:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

Також можна шукати за кількома значеннями:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

У цьому випадку ми отримаємо останню машину в списку.

Отримання кількох елементів із масиву, які відповідають умові — Array.filter

Функція  Array.find повертає лише один об’єкт. Якщо ми хочемо отримати всі червоні машини, нам потрібно використовувати Array.filter.

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

Перетворення об’єктів масиву — Array.map

Це те, що нам дуже часто потрібно. Перетворення масиву об’єктів на масив інших об’єктів. Це робота для Array.map. Скажімо, ми хочемо класифікувати наші автомобілі на три групи залежно від їхнього розміру.

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

Також можна створити новий об’єкт, якщо нам потрібно більше значень:

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// output:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

Додавання властивості до кожного об’єкту масиву — Array.forEach

А якщо нам також потрібен розмір автомобіля? У цьому випадку ми можемо використати в об’єкті властивість  size. Це хороший варіант використання для функції Array.forEach.

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

Сортування масиву за властивістю — Array.sort

Коли ми закінчили з перетворенням об’єктів, нам зазвичай потрібно відсортувати їх тим чи іншим способом.

Як правило, сортування базується на значенні властивості кожного об’єкта. Ми можемо використовувати функцію Array.sort , але нам також потрібно надати іншу функцію, яка визначає механізм сортування.

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

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

Функція Array.sort порівнює два об’єкти і ставить перший об’єкт на друге місце, якщо результат функції сортування позитивний. Таким чином, ви можете дивитися на функцію сортування так, ніби це було питання: чи варто розмістити перший об’єкт на другому місці?

Обов’язково враховуйте випадок для нуля, коли порівнювані значення обох об’єктів однакові, щоб уникнути непотрібних замін.

Перевірка відповідності умови об’єктів у масиві — Array.every, Array.includes

Array.every та Array.some стають в нагоді, коли нам просто потрібно перевірити кожен об’єкт на певну умову.

Чи є у нас червоний кабріолет у списку машин? Чи всі автомобілі здатні перевозити щонайменше 4 людини? Або випадок, більш орієнтований на інтернет: чи є певний продукт у кошику?

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

Ви можете пам’ятати функцію Array.includes, яка схожа до Array.some,
але працює лише для примітивних типів.

Підсумок

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

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

Або зв’яжіться зі мною, і я підготую іншу публікацію :-)

JSON, або JavaScript Object Notation (укр. запис об’єктів JavaScript), оточує нас всюди. Якщо ви коли-небудь користувалися вебзастосунком, є велика ймовірність, що він використовував JSON для структурування, зберігання та передачі даних між своїми серверами та вашим пристроєм.

У цій публікації ми коротко розглянемо відмінності між JSON та JavaScript, а потім перейдемо до різних способів парсингу JSON за допомогою JavaScript у браузері та проєктах Node.js.

Відмінності між JSON та JavaScript

Хоча JSON і виглядає як звичайний JavaScript, його краще вважати форматом даних, подібним до текстового файлу. Так сталося, що JSON надихається синтаксисом JavaScript, тому вони схожі.

Розглянемо об’єкти JSON і масиви JSON та порівняємо їх з відповідниками JavaScript.

Об’єкти JSON vs літерали об’єктів JavaScript

По-перше, ось об’єкт JSON:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

Основна відмінність між об’єктом JSON та звичайним об’єктом JavaScript, який також називають літералом об’єкта, полягає у лапках. Всі ключі та значення рядків в об’єкті JSON повинні бути в лапках (").

Літерали об’єктів JavaScript трохи гнучкіші. В об’єктних літералах вам не потрібно брати ключі та рядки в лапки. Замість цього ви можете використати одинарні лапки (') або взагалі не використовувати лапки для ключів.

Наведений вище код міг би виглядати ось так, якби був літералом об’єкта JavaScript:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Зверніть увагу, що ключ 'favorite-game' в одинарних лапках. Для об’єктних літералів потрібно брати в лапки ключі, де слова розділені тире (-).

Якщо ви хочете уникнути лапок, ви можете переписати ключ, використавши верблюдячий регістр (favoriteGame) або розділивши слова підкресленням (favorite_game).

Масиви JSON vs масиви JavaScript

Масиви JSON працюють майже так само, як масиви в JavaScript, і можуть містити рядки, булеві значення, числа та інші об’єкти JSON. Наприклад:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

У звичайному JavaScript це може виглядати так:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

JSON як рядок

Може виникнути запитання: якщо існують об’єкти й масиви JSON, чи не можна було б використовувати їх у своїй програмі як звичайний літерал об’єкта чи масив JavaScript?

Так не можна зробити, оскільки насправді JSON — це простий рядок.

Наприклад, коли ви пишете JSON в окремому файлі, як-от згадані вище jane-profile.json чи profiles.json, цей файл насправді містить текст у формі об’єкта JSON або масиву, який виглядає як JavaScript.

І якщо виконати запит до API, повернеться щось схоже:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

Так само як і з текстовими файлами, якщо ви хочете використати JSON у своєму проєкті, вам потрібно буде проаналізувати або змінити його на щось, зрозуміле вашій мові програмування. Наприклад, парсинг об’єкта JSON в Python створить словник.

З цими знаннями розглянемо різні способи парсингу JSON в JavaScript.

Як парсити JSON у браузері

Якщо ви працюєте з JSON у браузері, ймовірно, ви отримуєте або надсилаєте дані через API.

Розглянемо декілька прикладів.

Як парсити JSON за допомогою fetch

Найпростіший спосіб отримати дані з API — використати fetch, який містить метод .json() для автомагічного парсингу відповідей JSON у придатний для використання літерал об’єкта або масив JavaScript.

Ось деякий код, який використовує fetch, щоб виконати запит GET для жарту з безоплатного Chuck Norris Jokes API:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // метод .json() парсить відповідь JSON у літерал об’єкта JS
  .then(data => console.log(data));

Якщо ви запустите цей код у браузері, то побачите щось схоже на консолі:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

Хоча це виглядає як об’єкт JSON, насправді це літерал об’єкта JavaScript, і ви можете вільно використовувати його у своїй програмі.

Як перетворити JSON у рядок за допомогою JSON.stringify()

А якщо ви хочете надсилати дані до API?

Скажімо, ви хочете надіслати жарт про Чака Норріса до Chuck Norris Jokes API, щоб інші люди могли прочитати його пізніше.

Спочатку ви повинні написати свій жарт як літерал об’єкта JS:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

Тоді, оскільки ви надсилаєте дані до API, вам потрібно буде перетворити літерал об’єкта newJoke у рядок JSON.

На щастя, JavaScript містить надзвичайно корисний метод для цього — JSON.stringify():

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

Хоча в цьому прикладі ми перетворюємо літерал об’єкта у рядок JSON, JSON.stringify() також працює з масивами.

Вкінці вам просто потрібно буде надіслати свій жарт-рядок JSON назад до API із запитом POST.

Зауважте, що Chuck Norris Jokes API насправді не має цієї функції. Але якби ця функція була, код був би схожим:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

Таким чином ви проаналізували вхідний JSON із fetch та використали JSON.stringify() для перетворення літералу об’єкта JS у рядок JSON.

Як працювати з локальними файлами JSON у браузері

На жаль, неможливо (або небажано) завантажити локальний файл JSON у браузер.

fetch викине помилку, якщо ви спробуєте завантажити локальний файл. Скажімо, у вас є файл JSON з парою жартів:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

Ви хочете проаналізувати його та створити список жартів на звичайній сторінці HTML.

Якщо ви створите сторінку з наступним кодом і відкриєте її у своєму браузері:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script>
    fetch("./jokes.json", { mode: "no-cors" }) // disable CORS because path does not contain http(s)
      .then((res) => res.json())
      .then((data) => console.log(data));
  </script>
</html>

На консолі ви побачите:

Fetch API cannot load file://<path>/jokes.json. URL scheme "file" is not supported

Браузери не дозволяють доступ до локальних файлів за замовчуванням з міркувань безпеки. Це добре, і вам не варто намагатися обійти цю поведінку.

Натомість можна перетворити локальний файл JSON у JavaScript. На щастя, це досить легко, оскільки синтаксис JSON дуже схожий на JavaScript.

Все, що вам потрібно зробити, це створити новий файл і оголосити свій JSON як змінну:

const jokes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

І додати його на свою сторінку як окремий скрипт:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script src="jokes.js"></script>
  <script>
    console.log(jokes);
  </script>
</html>

Ви зможете вільно використовувати масив jokes у своєму коді.

Ви також можете використовувати модулі JavaScript, щоб зробити те саме, але це виходить за межі публікації.

А якщо ви хочете працювати з локальними файлами JSON і маєте встановлений Node.js? Давайте розглянемо, як це зробити.

Як парсити JSON у Node.js

Node.js — це середовище виконання JavaScript, яке дозволяє запустити JavaScript поза браузером. Ви можете прочитати все про Node.js тут.

Незалежно від того, чи ви використовуєте Node.js для запуску коду локально на своєму комп’ютері чи для запуску цілих вебзастосунків на сервері, корисно знати, як працювати з JSON.

Для наступних прикладів ми використовуватимемо той самий файл jokes.json:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

Як парсити файл JSON за допомогою require()

Почнемо з найпростішого методу.

Якщо у вас є локальний файл JSON, вам потрібно лише використати require(), щоб завантажити його, як і будь-який інший модуль Node.js:

const jokes = require('./jokes.json');

Файл JSON буде автоматично аналізований, і ви зможете використовувати його у своєму проєкті:

const jokes = require('./jokes.json');

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

Зверніть увагу, що це синхронно, тобто ваша програма зупиниться, доки весь файл не буде проаналізований. Дійсно великі файли JSON можуть спричинити сповільнення вашої програми, тому будьте обережні з цим.

Також, оскільки парсинг JSON таким чином завантажує все в пам’ять, краще використовувати цей метод для статичних файлів JSON. Якщо файл JSON зміниться під час роботи програми, ви не матимете доступу до цих змін, доки не перезапустите програму та не проаналізуєте оновлений файл JSON.

Як парсити файл JSON за допомогою fs.readFileSync() та JSON.parse()

Традиційніший спосіб (через відсутність кращого терміну) парсингу файлів JSON у проєктах Node.js — прочитати файл за допомогою fs (файлова система), а потім проаналізувати за допомогою JSON.parse().

Подивимося, як це зробити з методом fs.readFileSync(). Спочатку додайте модуль fs до свого проєкту:

const fs = require('fs');

Потім створіть нову змінну для зберігання виводу файлу jokes.json та встановіть для неї значення fs.readFileSync():

const fs = require('fs');
const jokesFile = fs.readFileSync();

fs.readFileSync() приймає декілька аргументів. Першим є шлях до файлу, який ви хочете прочитати:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');

Але якщо зараз ви введете jokesFile на консолі, то побачите щось подібне:

<Buffer 5b 0a 20 20 7b 0a 20 20 20 20 22 63 61 74 65 67 6f 72 69 65 73 22 3a 20 5b 22 64 65 76 22 5d 2c 0a 20 20 20 20 22 63 72 65 61 74 65 64 5f 61 74 22 3a ... 788 more bytes>

Це означає, що модуль fs читає файл, але він не знає кодування чи формат файлу. fs можна використовувати для завантаження майже будь-якого файлу, а не лише текстових, як-от JSON, тому нам потрібно сказати, як файл закодовано.

Для текстових файлів зазвичай використовують utf8:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');

Якщо зараз ввести jokesFile на консолі, ви побачите вміст файлу.

Але поки що ми просто читаємо файл, і він досі є рядком. Нам знадобиться використати інший метод, щоб розібрати jokesFile у придатний для використання об’єкт або масив JavaScript.

Для цього ми використаємо JSON.parse():

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

Як випливає з назви, JSON.parse() бере рядок JSON та аналізує його в літерал об’єкта або масив JavaScript.

Подібно до наведеного вище методу require, fs.readFileSync() також синхронний метод, а це означає що він може призвести до сповільнення вашої програми, якщо вона читає великий файл (JSON чи інший).

Крім того, він читає файл лише один раз та завантажує його в пам’ять. Якщо файл змінюється, вам потрібно буде прочитати файл знову. Для полегшення ви можете створити функцію для читання файлів.

Ось як це може виглядати:

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);

console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// the jokes.json file changes at some point

const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);

console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

Як парсити JSON за допомогою fs.readFile() та JSON.parse()

Метод fs.readFile() дуже схожий на fs.readFileSync(), але він працює асинхронно. Це чудово, якщо у вас є великий файл для читання, і ви не хочете, щоб він затримував решту вашого коду.

Ось базовий приклад:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8');

Поки що це виглядає подібно до того, що ми робили з fs.readFileSync(), за винятком того, що ми не призначаємо його змінній, як-от jokesFile. Оскільки цей метод асинхронний, будь-який код після fs.readFile() буде виконано до завершення читання файлу.

Замість цього ми використаємо функцію зворотного виклику та проаналізуємо JSON у ній:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const jokes = JSON.parse(data);

  console.log(jokes[0].value);
});

console.log("This will run first!");

На консолі буде виведено наступне:

This will run first!
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

Подібно до fs.readFileSync(), fs.readFile() завантажує файл у пам’ять, а це означає, що вам доведеться прочитати файл знову, якщо він зміниться.

Крім того, всупереч тому, що fs.readFile() є асинхронним, він завантажує весь файл, який читає, у пам’ять. Якщо у вас масивний файл, можливо, краще переглянути потоки Node.js.

Як перетворити JSON у рядок за допомогою JSON.stringify() у Node.js

Зрештою, якщо ви аналізуєте JSON за допомогою Node.js, є великі шанси, що колись вам доведеться повернути JSON як відповідь API.

На щастя, це працює так само, як і в браузері: просто використайте JSON.stringify(), щоб перетворити літерали об’єктів або масивів JavaScript  у рядок JSON:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

Це все! Ми розглянули практично все, що вам потрібно знати про роботу з JSON у браузері та проєктах Node.js.

А тепер вирушайте та перетворюйте JSON в рядки чи аналізуйте їх скільки душі завгодно.

Я щось пропустив? Як ви аналізуєте JSON у своїх проєктах? Дайте мені знати у твіттері.

Метод forEach у JavaScript — це один із декількох способів пройти масив циклічно. Кожен метод має свої особливості, і вам, залежно від того, що ви робите, вирішувати, який з них використовувати.

У цій публікації ми докладніше розглянемо метод forEach у JavaScript.

Враховуючи, що ми маємо наступний масив:

const числа = [1, 2, 3, 4, 5];

Використання традиційного циклу for для проходження масиву буде таким:

for (i = 0; i < числа.length; i++) {
  console.log(числа[i]);
}

Чим особливий метод forEach( )?

Метод forEach також використовується для циклічного проходження масивів, але у порівнянні із циклом for він використовує функцію по-іншому.

Метод forEach передає функцію зворотного виклику для кожного елемента масиву разом з такими параметрами:

• Поточне значення (обов’язково) — значення поточного елемента масиву
• Індекс (необов’язково) — номер індексу поточного елемента
• Масив (необов’язково) — об’єкт масиву, до якого належить поточний елемент

Поясню ці параметри покроково.

По-перше, щоб пройти масив за допомогою методу forEach, вам потрібна функція зворотного виклику (або анонімна функція):

числа.forEach(function() {
    // код
});

Функція буде виконана для кожного окремого елемента масиву. Вона повинна приймати принаймні один параметр, який представляє елементи масиву:

числа.forEach(function(число) {
    console.log(число);
});

Це все, що нам потрібно зробити для циклічного проходження масиву:

Альтернативно, ви можете використати представлення стрілкової функції ES6, щоб спростити код:

числа.forEach(число => console.log(число));

Додаткові параметри

Індекс

Зараз продовжимо із додатковими параметрами. Першим є параметр «індекс», який представляє номер індексу кожного елемента.

По суті, ми можемо побачити номер індексу елемента, якщо додамо його як другий параметр:

числа.forEach((число, індекс) => {
    console.log('Індекс: ' + індекс + ' Значення: ' + число);
});

Масив

Параметр «масив» — це сам масив. Він також необов’язковий і може використовуватися при необхідності в різних операціях. В іншому випадку, якщо ми викличемо його, він просто буде надрукований стільки разів, скільки елементів в масиві:

числа.forEach((число, індекс, масив) => {
    console.log(масив);
});

Підтримка браузера

Метод Array.forEach підтримується в усіх браузерах, окрім Internet Explorer 8 або ранішого:

Дякую, що прочитали!

Довгий час я користувався бібліотеками, як-от Date-fns, коли мені потрібно було встановити дату в JavaScript. Але їх дивно використовувати у малих проєктах, що вимагають простих форматів дати й часу, які JavaScript пропонує за замовчуванням.

Я дізнався, що так робить багато розробників. І я думав, що це найкращий спосіб, допоки не зрозумів, що не завжди потрібно використовувати бібліотеки для форматування дат в JavaScript.

Якщо хочете спробувати, ось код:👇

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

Ви, мабуть, спробували його та побачили, що все працює. Давайте розберемось, як працює цей код та дізнаємось про інші способи форматування дати в JavaScript за допомогою лише одного рядка коду.

Як форматувати дату й час у JS

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

new Date() — це найпоширеніший метод отримання дати й часу в JavaScript.

За замовчуванням, коли ви запускаєте new Date() у своєму терміналі, використовується часовий пояс вашого браузера та дата/час показані як повний текстовий рядок, наприклад Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time).

Але мати щось подібне на вебсторінці або в додатку — непрофесійно та важко для читання. Тому потрібно знайти кращі способи для форматування дати й часу.

Розглянемо деякі методи, які працюють для дати й часу.

Методи дати й часу в JavaScript

Існує багато методів, які можна застосувати до дати й часу. Ці методи можна використовувати, щоб отримати інформацію щодо дати й часу. Ось декілька з них:

• getFullYear() — для отримання року як чотиризначного числа (yyyy)
• getMonth() — для отримання місяця як числа (0-11)
• getDate() — для отримання дня як числа (1-31)
• getHours() — для отримання години (0-23)

І багато інших…

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

Наприклад, new Date().getMonth() виведе 6, що означає липень. Щоб використати липень у моєму коді, мені знадобиться дуже великий код, що може бути громіздким:

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

Давайте розглянемо два методи, які можна використовувати для форматування дати й часу у своїх проєктах.

Метод toDateString() у JavaScript

Метод toDateString() повертає частину дати й часу у вигляді рядка, використовуючи наступний формат:

1. Перші три літери дня
2. Перші три літери місяця
3. Дві цифри, що позначають день (за потреби з нулями зліва)
4. Принаймні чотири цифри, що позначають рік (за потреби з нулями зліва)

new Date().toDateString();
//"Fri Jul 02 2021"

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

Наприклад, ми не маємо можливості показувати дату й час відповідно до нашої мови. Розглянемо ще один метод, який, на мій погляд, один із найкращих.

Метод toLocaleDateString() у JavaScript

Цей метод повертає дату й час як рядок, використовуючи локальні норми. Він також приймає параметри як аргументи, що дозволяє вам/вашим програмам налаштувати поведінку функції.

Синтаксис:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

Розглянемо приклади та їхні виводи:

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021

Можна не використовувати локалі або параметри:

new Date().toLocaleDateString()
// "7/2/2021"

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

new Date().toLocaleDateString('en-US')
"7/2/2021"

Параметри можна змінювати за бажанням. Ось 4 основні параметри:

• weekday — виводить день залежно від того, як ви хочете (короткий чи довгий)
• year — виводить рік як число
• month — виводить місяць залежно від того, як ви хочете (короткий чи довгий)
• day — виводить день як число

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

Висновок

Дату і час можна відобразити сімома різними методами. Кожен з цих методів надає певне значення:

1. toString() надає Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)
2. toDateString() надає Fri Jul 02 2021
3. toLocaleString() надає 7/2/2021, 2:05:07 PM
4. toLocaleDateString() надає 7/2/2021
5. toGMTString() надає Fri, 02 Jul 2021 13:06:02 GMT
6. toUTCString() надає Fri, 02 Jul 2021 13:06:28 GMT
7. toISOString() надає 2021-07-02T13:06:53.422Z

Якщо ви шукаєте передовіші формати дати, вам потрібно буде створити спеціальний формат самостійно.

Коли ви програмуєте в JavaScript, вам, можливо, знадобиться перевірити, чи порожній масив.

Щоб перевірити, порожній масив чи ні, ви можете скористатися властивістю .length.

Властивість length встановлює або повертає кількість елементів в масиві. Знаючи кількість елементів в масиві, можна визначити, порожній він чи ні. Порожній масив матиме 0 елементів всередині.

Пробіжимося по прикладах.

Приклад синтаксису .length

Const myArray = [‘Horses’, ‘Dogs’, ‘Cats’];

Тут ми створюємо змінну, яка вказує на масив.

Використовуючи властивість length, ми можемо перевірити довжину масиву:

myArray.length

Це поверне 3, оскільки в масиві 3 елементи.

Існує три способи перевірити, порожній масив чи ні, за допомогою .length.

Перший приклад

Спочатку створимо новий масив без елементів.

const arr = []

Тепер ми можемо перевірити, чи масив порожній, використовуючи .length.

arr.length

Це поверне 0, оскільки в масиві 0 елементів.

Другий приклад

Ми також можемо прямо перевірити, порожній масив чи ні.

if (arr.length === 0) { console.log("Array is empty!") }

Якщо наш масив порожній, буде надруковано повідомлення вище. Якщо в масиві є елементи, код в блоці if не виконуватиметься.

Третій приклад

Поєднуючи властивість length та логічний оператор «не» в JavaScript — символ «!» — ми можемо перевірити, порожній масив чи ні.

Оператор ! заперечує вираз. Його можна використати для повернення true, якщо масив порожній.

Для цього прикладу відкриємо нашу консоль JavaScript.

Спочатку створимо масив без елементів у ньому.

Далі використаємо логічний оператор «не» разом із нашою властивістю .length, щоб протестувати, порожній масив чи ні.

Якби ми не використали оператор «не», arr.length повернув би 0. З доданим оператором він поверне true, якщо його операнд false. Оскільки arr.length дорівнює 0, або false, він повертає true.

Використаємо твердження if та надрукуємо повідомлення, якщо наш масив порожній.

Коли перевіряєте, порожній масив чи ні, варто перевірити, чи справді масив є масивом.

Чому?

Тому що ви могли очікувати перевірити довжину масиву, але натомість у вас інший тип даних, наприклад, рядок:

Оскільки властивість length можна використовувати на інших типах даних, краще перевірити, чи ваш масив справді є масивом.

Я рекомендую використовувати метод Array.isArray(), щоб підтвердити, що масив є масивом. Цей метод визначає, чи передане є масивом. Якщо передане є масивом, цей метод поверне true.

Додамо цей метод до нашого прикладу.

Як використовувати метод Array.isArray()

Підіб’ємо підсумки

У цій публікації ми дізналися, що ви можете використовувати властивість length в JavaScript різними способами, щоб перевірити, чи масив порожній, чи ні. Властивість length повертає кількість елементів в масиві.

Ми також дізналися, що найкраще використовувати Array.isArray під час використання властивості .length, щоб перевірити, чи передане значення справді є масивом.

В JavaScript є багато способів зробити що завгодно. Зараз ми будемо працювати з масивами.

1. Оператор Spread (поверхнева копія)

З того часу, як з’явився ES6 — це найпопулярніший метод. Це короткий синтаксис, який є неймовірно корисним під час використання таких бібліотек, як React і Redux.

numbers = [1, 2, 3];
numbersCopy = [...numbers];

Примітка: ненадійно копіює багатовимірні масиви. Значення масиву/об’єкта копіюються за посиланням, а не за значенням.

Це добре:

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] та [1, 2, 3, 4]
// числа залишаються без змін

Це не добре:

nestedNumbers = [[1], [2]];
numbersCopy = [...nestedNumbers];

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// Обоє були змінені, оскільки мають спільні посилання

2. Старий добрий цикл for() (поверхнева копія)

Я думаю, що цей підхід найменш популярний, враховуючи, наскільки трендовим стало функціональне програмування в наших колах.

Чистий чи нечистий, декларативний чи імперативний, він виконує роботу!

numbers = [1, 2, 3];
numbersCopy = [];

for (i = 0; i < numbers.length; i++) {
  numbersCopy[i] = numbers[i];
}

Примітка: ненадійно копіює багатовимірні масиви. Оскільки ви використовуєте оператор =, він призначатиме об’єкти/масиви за посиланням, а не за значенням.

Це добре:

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] та [1, 2, 3, 4]
// числа залишаються без змін

Це не добре:

nestedNumbers = [[1], [2]];
numbersCopy = [];

for (i = 0; i < nestedNumbers.length; i++) {
  numbersCopy[i] = nestedNumbers[i];
}

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// Обоє були змінені, оскільки мають спільні посилання

3. Старий добрий цикл while() (поверхнева копія)

Такий самий, що й for: нечистий, імперативний, бла-бла-бла… Але працює!?

numbers = [1, 2, 3];
numbersCopy = [];
i = -1;

while (++i < numbers.length) {
  numbersCopy[i] = numbers[i];
}

Примітка: також призначає об’єкти/масиви за посиланням, а не за значенням.

Це добре:

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] та [1, 2, 3, 4]
// числа залишаються без змін

Це не добре:

nestedNumbers = [[1], [2]];
numbersCopy = [];

i = -1;

while (++i < nestedNumbers.length) {
  numbersCopy[i] = nestedNumbers[i];
}

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// Обоє були змінені, оскільки мають спільні посилання

4. Array.map (поверхнева копія)

На сучасній території ми знайдемо функцію map. Закорінена в математиці map — це концепція перетворення множини в множину іншого типу зі збереженням структури.

Простими словами: Array.map повертає масив тої самої довжини кожного разу.

Щоб подвоїти список чисел, використайте map із функцією double.

numbers = [1, 2, 3];
double = (x) => x * 2;

numbers.map(double);

А як щодо клонування??

Правда, ця публікація про клонування масивів. Щоб дублювати масив, просто поверніть елемент у виклику map.

numbers = [1, 2, 3];
numbersCopy = numbers.map((x) => x);

Якщо ви хочете побути математиками, (x) => x називається тотожністю. Вона повертає будь-який параметр, який було надано.

map(identity) клонує список.

identity = (x) => x;
numbers.map(identity);
// [1, 2, 3]

Примітка: також призначає об’єкти/масиви за посиланням, а не за значенням.

5. Array.filter (поверхнева копія)

Ця функція повертає масив, як і map, але не гарантовано, що він буде такої ж довжини.

А якщо відфільтрувати парні числа?

[1, 2, 3].filter((x) => x % 2 === 0);
// [2]

Довжина вхідного масиву дорівнює 3, а вихідного — 1.

Проте, якщо предикат вашого filter завжди повертає true, ви отримаєте дублікат!

numbers = [1, 2, 3];
numbersCopy = numbers.filter(() => true);

Кожен елемент проходить тест, тому він повертається.

Примітка: також призначає об’єкти/масиви за посиланням, а не за значенням.

6. Array.reduce (поверхнева копія)

Мені ніяково використовувати reduce для клонування масиву, тому що вона набагато потужніша за це. Але раз ви просите…

numbers = [1, 2, 3];

numbersCopy = numbers.reduce((newArray, element) => {
  newArray.push(element);

  return newArray;
}, []);

reduce перетворює початкове значення, коли воно проходить список.

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

Примітка: також призначає об’єкти/масиви за посиланням, а не за значенням.

7. Array.slice (поверхнева копія)

slice повертає поверхневу копію масиву на основі наданого вами початкового/кінцевого індексу.

Якщо ми хочемо перші 3 елементи:

[1, 2, 3, 4, 5].slice(0, 3);
// [1, 2, 3]
// Починається з індексу 0, закінчується на індексі 3

Якщо ми хочемо всі елементи, не вказуємо жодних параметрів:

numbers = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice();
// [1, 2, 3, 4, 5]

Примітка: це поверхнева копія, тому вона також призначає об’єкти/масиви за посиланням, а не за значенням.

8. JSON.parse та JSON.stringify (глибока копія)

JSON.stringify перетворює об’єкт на рядок.

JSON.parse перетворює рядок на об’єкт.

Якщо їх поєднати, то можна перетворити об’єкт на рядок, а потім змінити процес навпаки, щоб створити нову структуру даних.

Примітка: надійно копіює глибоко вкладені об’єкти/масиви!

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse(JSON.stringify(nestedNumbers));

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);

// [[1], [2]]
// [[1, 300], [2]]
// Два абсолютно окремі масиви!

9. Array.concat (поверхнева копія)

concat поєднує масиви зі значеннями або іншими масивами.

[1, 2, 3].concat(4); // [1, 2, 3, 4]
[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

Якщо ви не надасте нічого або порожній масив, повернеться поверхнева копія.

[1, 2, 3].concat(); // [1, 2, 3]
[1, 2, 3].concat([]); // [1, 2, 3]

Примітка: також призначає об’єкти/масиви за посиланням, а не за значенням.

10. Array.from (поверхнева копія)

Може перетворити будь-який ітерований об’єкт в масив. Надання масиву повертає поверхневу копію.

numbers = [1, 2, 3];
numbersCopy = Array.from(numbers);
// [1, 2, 3]

Примітка: також призначає об’єкти/масиви за посиланням, а не за значенням.

Висновок

Ну, було весело?

Я спробував клонувати, використовуючи лише 1 крок. Ви знайдете ще багато інших способів, якщо використаєте декілька методів та технік.

В ES2015 (ES6) з’явилось багато блискучих функцій. Вже минуло більше п’яти років і можна припустити, що багато розробників JavaScript ознайомилися з цими функціями та почали їх використовувати.

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

Одними з функцій в ES6 є let та const, які можна використовувати для оголошення змінних. Питання в тому, чим вони відрізняються від var, якою ми користувалися? Якщо ви досі не зрозуміли, то ця публікація для вас.

У цій статті ми обговоримо var, let та const щодо області видимості, використання та підняття. Зверніть увагу на відмінності, які я вкажу.

Var

До появи ES6 правили оголошення var. Проте є проблеми, пов’язані зі змінними, які оголошені з var. Ось чому виникла необхідність у появі нових способів оголошення змінних. По-перше, давайте краще зрозуміємо var, перед тим як обговорювати ці проблеми.

Область видимості var

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

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

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

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

    var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

У прикладі greeter має глобальну область видимості, оскільки існує поза функцією, тоді як hello має область функції. Тому ми не можемо отримати доступ до змінної hello поза функцією. А якщо ми зробимо так:

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

Ми отримаємо помилку через те, що hello недоступна поза функцією.

Змінні var можна переголосити та оновити

Це означає, що ми можемо робити це в тій самій області та не отримаємо помилку.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

і це

    var greeter = "hey hi";
    greeter = "say Hello instead";

Підняття var

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

    console.log(greeter);
    var greeter = "say Hello"

воно інтерпретується так:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say Hello"

Таким чином змінні var підіймаються наверх своєї області та ініціалізуються значенням undefined.

Проблематика var

У var є слабке місце. Я використаю приклад нижче, щоб пояснити:

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

Оскільки times > 3 повертає true, greeter перевизначається на "say Hello instead". Це не є проблемою, якщо ви хочете, щоб greeter був перевизначений; але стає проблемою, коли ви не усвідомлюєте, що змінна greeter була визначена раніше.

Якщо ви використовували greeter в інших частинах свого коду, ви можете бути здивовані виводом, який можете отримати. Ймовірно, це спричинить багато помилок у коді. Ось чому let та const необхідні.

Let

Тепер для оголошення змінної найкращим варіантом є let. Це не дивно, оскільки вона створена для вдосконалення оголошень var. Вона також розв’язує проблематику var, яку ми щойно розглянули. Розглянемо, чому так.

let має блокову область

Блок — це фрагмент коду, обмежений {}. Блок живе у фігурних дужках. Будь-що у фігурних дужках є блоком.

Отже, змінна, оголошена в блоці з let, доступна для використання лише в цьому блоці. Поясню на прикладі:

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello); // "say Hello instead"
    }
   console.log(hello) // hello is not defined

Як бачимо, використання hello поза блоком (фігурні дужки) повертає помилку. Це тому, що змінні let мають блокову область.

let можна оновити, але не переголосити

Як і var, змінна, оголошена з let, може бути оновлена в межах області видимості. На відміну від var, змінна let не може бути переголошена в межах області видимості. Це працюватиме:

    let greeting = "say Hi";
    greeting = "say Hello instead";

а це поверне помилку:

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

Однак, якщо ту саму змінну визначено в різних областях, помилки не буде:

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

Чому немає помилки? Це тому, що обидва випадки розглядаються як різні змінні, оскільки вони мають різні області.

З цього погляду, let краща за var. Використовуючи let, вам не потрібно турбуватися, чи ви використали ім’я для змінної раніше, оскільки змінна існує лише в межах області видимості.

Крім того, оскільки змінна не може бути оголошена більше одного разу в межах області видимості, то проблеми, яка виникає з var, не виникає.

Підняття let

Подібно до var, оголошення let підіймаються наверх. На відміну від var, яке ініціалізується як undefined, ключове слово let не ініціалізується. Тому якщо ви спробуєте використати змінну let перед оголошенням, ви отримаєте Reference Error.

Const

Змінні, оголошені з const, зберігають постійні значення. Оголошення const має деяку схожість з оголошенням let.    

Оголошення const мають блокову область

Як і до оголошень let, до оголошень const можна отримати доступ лише в межах блоку, у якому вони були оголошені.

Const не можна оновити або переголосити

Це означає, що значення змінної, оголошеної з const, залишається таким самим у межах області видимості. Його не можна оновити чи переголосити. Тому якщо ми оголосимо змінну з const, ми не зможемо зробити так:

    const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable. 

чи так:

    const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Тому кожне оголошення const повинне бути ініціалізоване під час оголошення.

Ця поведінка дещо відрізняється, коли йдеться про об’єкти, оголошені з const. Хоча об’єкт const неможливо оновити, можна оновити його властивості. Отже, якщо ми оголосимо об’єкт const ось так:

    const greeting = {
        message: "say Hi",
        times: 4
    }

але не можемо ось так:

    greeting = {
        words: "Hello",
        number: "five"
    } // error: Assignment to constant variable.

ми зможемо зробити ось так:

    greeting.message = "say Hello instead";

Це оновить значення greeting.message без повернення помилок.

Підняття const

Подібно до let, оголошення const підіймаються наверх, але не ініціалізуються.

Тож на випадок, якщо ви пропустили відмінності, ось вони:

• Оголошення var мають глобальну область видимості або область функції, тоді як let і const мають блокову область видимості.
• Змінні var можна оновити та переголосити в межах їхньої області; змінні let можна оновити, але не переголосити; змінні const не можна ні оновити, ні переголосити.
• Усі вони підіймаються наверх своєї області. Але тоді як змінні var ініціалізуються з undefined, змінні let і const не ініціалізуються.
• Хоча var і let можуть бути оголошені без ініціалізації, const повинна бути ініціалізована під час оголошення.

Маєте запитання чи доповнення? Будь ласка, дайте мені знати.

Дякую, що прочитали :)

Ця публікація базується на основах написання алгоритмів від freeCodeCamp «Зворотний рядок»

Перевертання рядка є одним із найпоширеніших запитань по JavaScript на співбесіді. Інтерв’юери можуть попросити вас написати різні способи перевернути рядок, іноді без використання вбудованих методів, або навіть за допомогою рекурсії.

Існують десятки різних способів перевернути рядок, за винятком вбудованої функції reverse, оскільки її немає в JavaScript.

Нижче наведено три найцікавіші способи перевертання рядка в JavaScript.

Завдання

Переверніть заданий рядок.
За необхідності перетворіть рядок у масив до того, як вносити зміни.
У результаті ви повинні отримати рядок.

function reverseString(str) {
    return str;
}
reverseString("hello");

Надані випадки

• reverseString(“hello”) повинен перетворитися на «olleh»
• reverseString(“Howdy”) повинен перетворитися на «ydwoH»
• reverseString(“Greetings from Earth”) повинен перетворитися на «htraE morf sgniteerG»

1. Перевертання рядка за допомогою вбудованих функцій

Для цього способу ми будемо використовувати три методи: String.prototype.split(), Array.prototype.reverse() та Array.prototype.join().

• Метод split() розбиває рядок в масив рядків, поділяючи рядок на підрядки.
• Метод reverse() повертає масив на місці. Перший елемент масиву стає останнім, а останній — першим.
• Метод join() об’єднує всі елементи масиву в рядок.

function reverseString(str) {
    // Крок 1. Використайте метод split(), щоб повернути новий масив
    var splitString = str.split(""); // var splitString = "hello".split("");
    // ["h", "e", "l", "l", "o"]
 
    // Крок 2. Використайте метод reverse(), щоб перевернути новий створений масив
    var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse();
    // ["o", "l", "l", "e", "h"]
 
    // Крок 3. Використайте метод join(), щоб об’єднати всі елементи масиву в рядок
    var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join("");
    // "olleh"
    
    //Крок 4. Поверніть перевернутий рядок
    return joinArray; // "olleh"
}
 
reverseString("hello");

Сполучаємо три методи:

function reverseString(str) {
    return str.split("").reverse().join("");
}
reverseString("hello");

2. Перевертання рядка за допомогою циклу for, що зменшується

function reverseString(str) {
    // Крок 1. Створіть порожній рядок, у якому буде розміщено новий створений рядок
    var newString = "";
 
    // Крок 2. Створіть цикл FOR
    /* Початковою точкою циклу буде (str.length - 1), що відповідає 
        останньому символу рядка, "o"
       Поки «i» більше або дорівнює 0, цикл триватиме
       Ми зменшуємо «i» після кожної ітерації */
    for (var i = str.length - 1; i >= 0; i--) { 
        newString += str[i]; // або newString = newString + str[i];
    }
    /* Довжина hello дорівнює 5
        Для кожної ітерації: i = str.length - 1 та newString = newString + str[i]
        Перша ітерація:    i = 5 - 1 = 4,         newString = "" + "o" = "o"
        Друга ітерація:   i = 4 - 1 = 3,         newString = "o" + "l" = "ol"
        Третя ітерація:    i = 3 - 1 = 2,         newString = "ol" + "l" = "oll"
        Четверта ітерація:   i = 2 - 1 = 1,         newString = "oll" + "e" = "olle"
        П'ята ітерація:    i = 1 - 1 = 0,         newString = "olle" + "h" = "olleh"
    Кінець циклу FOR*/
 
    // Крок 3. Поверніть перевернутий рядок
    return newString; // "olleh"
}
 
reverseString('hello');

Без коментарів:

function reverseString(str) {
    var newString = "";
    for (var i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
}
reverseString('hello');

3. Перевертання рядка за допомогою рекурсії

Для цього способу ми будемо використовувати два методи: String.prototype.substr() та String.prototype.charAt().

• Метод substr() повертає символи в рядку, починаючи з вказаного місця, через вказану кількість символів.

"hello".substr(1); // "ello"

• Метод charAt() повертає вказаний символ із рядка.

"hello".charAt(0); // "h"

Глибина рекурсії дорівнює довжині рядка. Цей метод не найкращий та дуже повільний, якщо рядок довгий і розмір стека викликає серйозне занепокоєння.

function reverseString(str) {
  if (str === "") // Це кінцевий випадок, який закінчить рекурсію
    return "";
  
  else
    return reverseString(str.substr(1)) + str.charAt(0);
/* 
Перша частина методу рекурсії
Потрібно пам’ятати, що у вас буде не один, а декілька вкладених викликів

Кожен виклик: str === "?"        	                  reverseString(str.subst(1))     + str.charAt(0)
1-ий виклик – reverseString("Hello")   поверне   reverseString("ello")           + "h"
2-ий виклик – reverseString("ello")    поверне   reverseString("llo")            + "e"
3-ій виклик – reverseString("llo")     поверне   reverseString("lo")             + "l"
4-ий виклик – reverseString("lo")      поверне   reverseString("o")              + "l"
5-ий виклик – reverseString("o")       поверне   reverseString("")               + "o"

Друга частина методу рекурсії
Метод потрапляє в умову if (якщо), і виклик з найбільшим вкладенням повертається негайно

5-ий виклик поверне reverseString("") + "o" = "o"
4-ий виклик поверне reverseString("o") + "l" = "o" + "l"
3-ій виклик поверне reverseString("lo") + "l" = "o" + "l" + "l"
2-ий виклик поверне reverserString("llo") + "e" = "o" + "l" + "l" + "e"
1-ий виклик поверне reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h" 
*/
}
reverseString("hello");

Без коментарів:

function reverseString(str) {
  if (str === "")
    return "";
  else
    return reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello");

Умовний (тернарний) оператор:

function reverseString(str) {
  return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello");

Перевертання рядка в JavaScript — це невеликий та простий алгоритм, який можуть запитати під час співбесіди. Ви можете вибрати короткий шлях у розв’язанні цієї проблеми або розв’язати її за допомогою рекурсії чи інших складніших рішень.

Сподіваюся, ви знайшли це корисним. Це частина моєї серії публікацій «Як розв’язувати алгоритми fCC», що стосується завдань по алгоритмах від freeCodeCamp, де я пропоную декілька розв’язків та покроково пояснюю, що може здатись неочевидним.

Ви можете слідкувати за мною на Medium, Twitter, Github та LinkedIn