Основи у

Про концепцію Основи

JavaScript - динамічна мова, заснована на прототипах. У ній є кілька примітивів, а все інше вважається обʼєктом.

Хоча вона найбільш відома як мова сценаріїв для вебсторінок, її використовують і в багатьох середовищах поза браузером, наприклад у Node.js. Мова активно розвивається, а завдяки тому, що вона підтримує кілька парадигм, у ній можливі різні стилі програмування. JavaScript - динамічна мова, яка підтримує обʼєктно-орієнтований, імперативний і декларативний (наприклад, функційне програмування) стилі.

Присвоєння (повторне присвоєння)

Є кілька основних способів присвоїти значення іменам у JavaScript: за допомогою змінних або констант. На Exercism змінні завжди записують у стилі camel case, а константи - у стилі SCREAMING_SNAKE_CASE. Офіційного посібника, якого треба дотримуватися, немає, і різні компанії та організації мають різні стильові посібники. Змінні можна писати так, як зручно. Перевага написання їх так, як це зроблено у вправах, у тому, що у вебінтерфейсі та більшості IDE вони підсвічуватимуться інакше.

Змінні в JavaScript можна визначати за допомогою ключового слова const, let або var.

Змінна, оголошена через let або var, протягом свого життя може посилатися на різні значення. Наприклад, myFirstVariable можна визначати й перевизначати багато разів за допомогою оператора присвоєння =:

let myFirstVariable = 1;
myFirstVariable = 'Some string';
myFirstVariable = new SomeComplexClass();

На відміну від let і var, змінним, визначеним через const, значення можна присвоїти лише один раз. Саме так у JavaScript визначають константи.

const MY_FIRST_CONSTANT = 10;

// Can not be re-assigned.
MY_FIRST_CONSTANT = 20;
// => TypeError: Assignment to constant variable.

Присвоєння констант

Ключове слово const згадується і для змінних, і для констант. Ще одне поняття, яке часто згадують поряд із константами, - (не)змінюваність.

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

const MY_MUTABLE_VALUE_CONSTANT = { food: 'apple' };

// This is possible
MY_MUTABLE_VALUE_CONSTANT.food = 'pear';

MY_MUTABLE_VALUE_CONSTANT;
// => { food: "pear" }

Значення константи (незмінюваність)

Як правило, на Exercism і в багатьох інших організаціях та стильових посібниках проєктів значення, які мають вигляд const SCREAMING_SNAKE_CASE, не змінюють. Технічно ці значення можна змінити, але заради ясності та передбачуваності на Exercism цього не радять робити. Коли цього конче потрібно дотриматися, варто скористатися Object.freeze(value).

const MY_VALUE_CONSTANT = Object.freeze({ food: 'apple' });

// This silently fails
MY_VALUE_CONSTANT.food = 'pear';

MY_VALUE_CONSTANT;
// => { food: "apple" }

У реальних проєктах Object.freeze рідко трапляється по всій кодовій базі, але правило ніколи не змінювати значення у стилі SCREAMING_SNAKE_CASE - хороше правило; його часто забезпечують за допомогою автоматичного аналізу, наприклад лінтера.

Оголошення функцій

У JavaScript одиниці функціональності інкапсульовані у функціях; функції, які належать одна до одної, зазвичай групують в одному файлі. Ці функції можуть приймати параметри (аргументи) і повертати значення за допомогою ключового слова return. Функції викликають за допомогою синтаксису ().

function add(num1, num2) {
  return num1 + num2;
}

add(1, 3);
// => 4

💡 У JavaScript є багато різних способів оголосити функцію. Ці інші способи мають інший вигляд, ніж використання ключового слова function. Трек намагається вводити їх поступово, але якщо вони вже відомі, можна використовувати будь-який із них. Здебільшого використання того чи іншого не краще й не гірше.

Експорт та імпорт

Ключові слова export та import - потужні інструменти, які перетворюють звичайний файл JavaScript на модуль JavaScript. Крім того, що вони дають коду змогу вибірково надавати назовні компоненти, як-от функції, класи, змінні та константи, вони відкривають і цілу низку інших можливостей, як-от:

• Перейменування експортів та імпортів, що дає змогу уникати конфліктів імен,
• Динамічний імпорт, який завантажує код на вимогу,
• Tree shaking, який зменшує розмір підсумкового коду, позбуваючись модулів без побічних ефектів і навіть умісту модулів, які не використовуються,
• Експорт живих звʼязувань, який дає змогу експортувати значення, що змінюється всюди, де його імпортовано, якщо змінюється початкове значення.

Конкретний приклад - те, як працюють тести на треку JavaScript в Exercism. Кожна вправа має щонайменше один файл реалізації, наприклад lasagna.js, і щонайменше один файл тестів, наприклад lasagna.spec.js. Файл реалізації використовує export, щоб відкрити публічний API, а файл тестів використовує import, щоб отримати до нього доступ, і саме так він може перевіряти результати роботи реалізації.

// file.js
export const MY_VALUE = 10;

export function add(num1, num2) {
  return num1 + num2;
}

// file.spec.js
import { MY_VALUE, add } from './file';

add(MY_VALUE, 5);
// => 15