21 вересня 2023 р.

Особливості JavaScript

Давайте коротко повторимо вивчений матеріал і пригадаємо ключові моменти.

Структура коду

Інструкції розділяються крапкою з комою:

alert('Привіт'); alert('Світ');

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

alert('Привіт')
alert('Світ')

Це називається “автоматичне вставлення крапки з комою”. Іноді такий варіант може не спрацювати, наприклад:

alert("Після цього повідомлення буде помилка")

[1, 2].forEach(alert)

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

Крапку з комою не потрібно ставити після блоків коду {...} та синтаксичних конструкцій з ними, наприклад, після циклів:

function f() {
  // після оголошення функції не обов’язково ставити крапку з комою
}

for(;;) {
  // після циклу також немає потреби ставити крапку з комою
}

…Але навіть якщо ми поставимо “зайву” крапку з комою, помилки не буде. Її просто буде проігноровано.

Детальніше: Структура коду.

Суворий режим (strict mode)

Щоб залучити усі можливості сучасної мови JavaScript, нам потрібно починати скрипти із конструкції "use strict".

'use strict';

...// ваш код

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

Без "use strict", код все ще буде працювати, однак деякі можливості працюватимуть в старому режимі, так званому “режимі сумісності”. Ми рекомендуємо використовувати суворий (“сучасний”) режим.

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

Детальніше: Сучасний режим, "use strict".

Змінні

Можна оголошувати наступним чином:

  • let
  • const (константа, не можна змінювати)
  • var (старий спосіб, ми переглянемо його пізніше)

Ім’я змінної може включати:

  • Літери та цифри; першим символом має бути лише літера, не цифра.
  • Допускаються символи $ та _, в парі з літерами.
  • Не латинські символи, як кирилиця та ієрогліфи також допускаються, але вони не мають широкого вжитку.

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

let x = 5; // присвоєно тип "число"
x = "Іван"; // тип змінився на "рядок"

Існує 8 типів даних:

  • число (number) для цілих та десяткових чисел,
  • bigint для цілих чисел довільної довжини,
  • рядок (string) для тексту/слів,
  • булевий тип (boolean) для логічних значень: true/false,
  • null — тип з єдиним значенням null, який означає “пусто” або “не існує”,
  • undefined — тип з єдиним значенням undefined, який означає “не присвоєно”,
  • об’єкт (object) та символ (symbol) — для складних структур даних та унікальних ідентифікаторів, ми їх ще не вивчили.

Оператор typeof повертає тип змінної, за винятком двох випадків:

typeof null == "object" // помилка в мові
typeof function(){} == "function" // спеціально для функцій

Детальніше: Змінні та Типи даних.

Взаємодія

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

prompt(question, [default])
Ставить питання question, а потім повертає те, що ввів відвідувач, або null, якщо відвідувач натиснув кнопку “Скасувати”.
confirm(question)
Ставить питання question і пропонує відвідувачу вибрати ОК або Скасувати. Вибір повертається як true/false.
alert(message)
Виводить повідомлення message.

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

Наприклад:

let userName = prompt("Ваше ім’я?", "Настя");
let isBunWanted = confirm("Хочете булочку?");

alert( "Відвідувач: " + userName ); // Настя
alert( "Хоче булочку: " + isBunWanted ); // true

Детальніше: Взаємодія: alert, prompt, confirm.

Оператори

JavaScript підтримує такі оператори:

Арифметичні

Звичайні: * + - /, а також оператори %, для визначення остачі від ділення та ** для піднесення до степеня.

Бінарний плюс + об’єднує (конкатинує) рядки. А якщо одним з операндів буде рядок, то інший операнд також буде конвертовано в рядок:

alert( '1' + 2 ); // '12', рядок
alert( typeof ( 1 + '2' ) ); // string
Оператори присвоєння

Звичайне присвоєння: a = b і складені a *= 2.

Оператори бітового зсуву

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

Умовний оператор

Єдиний оператор з трьома параметрами: cond ? resultA : resultB. Якщо cond вірно, повертається resultA, інакше – resultB.

Логічні оператори

Логічні І && та АБО || використовують так звані “ледачі обчислення” і насамкінець повертають значення, на якому воно зупинилося (не обов’язково true або false). Логічне НЕ ! конвертує операнд в логічний тип і повертає інвертоване значення.

Оператор об’єднання з null

Оператор ?? дає можливість вибору визначеного значення зі списку змінних. Результатом a ?? b буде a якщо його значення відмінне від null/undefined, інакше b.

Порівнювання

Перевірка на рівність == для значень різних типів, конвертує їх в число (за винятком null і undefined, які рівні тільки один одному і нічому іншому), тому приклади нижче рівні:

alert( 0 == false ); // true
alert( 0 == '' ); // true

Інші оператори порівнювання також конвертують значення в числовий тип.

Оператор строгої рівності === не виконує конвертацію: різні типи для нього завжди означають різні значення.

Значення null та undefined особливі: вони рівні == лише самим собі та не рівні нічому іншому.

Оператори порівнювання більше/менше порівнюють рядки посимвольно, інші типи конвертуються в число.

Інші оператори

Існують й інші оператори, такі як кома.

Детальніше: Базові оператори, математика, Оператори порівняння, Логічні оператори, Оператор об’єднання з null '??'.

Цикли

  • Ми вивчили 3 типи циклів:

    // 1
    while (condition) {
      ...
    }
    
    // 2
    do {
      ...
    } while (condition);
    
    // 3
    for(let i = 0; i < 10; i++) {
      ...
    }
  • Змінна, оголошена в циклі for(let...), видима лише в циклі. Але ми також можемо опустити let та використовувати повторно чинну змінну.

  • Директиви break/continue дозволяють вийти з циклу/поточної ітерації. Використовуйте мітки для виходу із вкладених циклів.

Детальніше: Цикли: while і for.

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

Конструкція “switch”

Конструкція “switch” може замінити декілька перевірок if. Для порівняння, ця конструкція використовує оператор строгого порівняння ===.

Наприклад:

let age = prompt('Скільки вам років?', 18);

switch (age) {
  case 18:
    alert("Не запрацює"); // результатом prompt є рядок, а не число
    break;

  case "18":
    alert("А так запрацює!");
    break;

  default:
    alert("Будь-яке значення, нерівне значенням вище");
}

Детальніше: Конструкція "switch".

Функції

Ми розглянули три способи створення функції в JavaScript:

  1. Function Declaration: функція в основному потоці коду

    function sum(a, b) {
      let result = a + b;
    
      return result;
    }
  2. Function Expression: функція як частина виразу

    let sum = function(a, b) {
      let result = a + b;
    
      return result;
    };
  3. Стрілкові функції:

    // вираз праворуч
    let sum = (a, b) => a + b;
    
    // багаторядковий код в фігурних дужках { ... }, тут потрібен return:
    let sum = (a, b) => {
      // ...
      return a + b;
    }
    
    // без аргументів
    let sayHi = () => alert("Привіт");
    
    // з одним аргументом
    let double = n => n * 2;
  • У функцій можуть бути локальні змінні: тобто ті, які оголошені в тілі функції, або передані як параметри. Такі змінні видимі лише всередині функції.
  • Параметри можуть мати усталені значення: function sum(a = 1, b = 2) {...}.
  • Функції завжди щось повертають. Якщо всередині функції немає оператора return, тоді вона поверне undefined.

Детальніше: дивіться Функції, Стрілкові функції, основи.

Ми вивчимо більше

Це був короткий перелік можливостей JavaScript. Цієї миті ми вивчили лише основи. Далі в посібнику ви знайдете більше особливостей і просунутих можливостей JavaScript.

Навчальна карта