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

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

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

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

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

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

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

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

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

[1, 2].forEach(alert)

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

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

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

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

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

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

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

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

          'use strict';

...// ваш код

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

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

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

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

Взаємодія

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

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:

Function Declaration: функція в основному потоці коду
```
function sum(a, b) {
  let result = a + b;

  return result;
}
```

Function Expression: функція як частина виразу

          let sum = function(a, b) {
  let result = a + b;

  return result;
};
        

Стрілкові функції:

          // вираз праворуч
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.

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

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

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

Змінні

Взаємодія

Оператори

Цикли

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

Функції

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

Коментарі

Глава

Навігація по уроку