Skip to content

Latest commit

 

History

History
284 lines (189 loc) · 13.5 KB

article.md

File metadata and controls

284 lines (189 loc) · 13.5 KB

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

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

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

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

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

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

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

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

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

[1, 2].forEach(alert)

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

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

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

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

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

Детальніше: info:structure.

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

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

'use strict';

...// ваш код

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

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

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

Детальніше: info:strict-mode.

Змінні

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

  • 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" // спеціально для функцій

Детальніше: info:variables та info:types.

Взаємодія

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

prompt(question, [default]) : Ставить питання question, а потім повертає те, що ввів відвідувач, або null, якщо відвідувач натиснув кнопку "Скасувати".

confirm(question) : Ставить питання question і пропонує відвідувачу вибрати ОК або Скасувати. Вибір повертається як true/false.

alert(message) : Виводить повідомлення message.

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

Наприклад:

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

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

Детальніше: info:alert-prompt-confirm.

Оператори

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

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

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

```js run
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, які рівні тільки один одному і нічому іншому), тому приклади нижче рівні:

```js run
alert( 0 == false ); // true
alert( 0 == '' ); // true
```

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

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

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

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

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

Детальніше: info:operators, info:comparison, info:logical-operators, info:nullish-coalescing-operator.

Цикли

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

    // 1
while (condition) {
  ...
}

// 2
do {
  ...
} while (condition);

// 3
for(let i = 0; i < 10; i++) {
  ...
}

  • Змінна, оголошена в циклі for(let...), видима лише в циклі. Але ми також можемо опустити let та використовувати повторно чинну змінну.

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

Детальніше: info:while-for.

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

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

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

Наприклад:

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

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

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

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

Детальніше: info: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.

Детальніше: дивіться info:function-basics, info:arrow-functions-basics.

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

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