Змінні, математичні оператори та константи
Ви вже познайомились з історією мови JavaScript, деякими базовими поняттями та дізнались, які типи даних в ній використовуються. Непоганий початок! А в цьому уроці ми дізнаємось про низку інших важливих понять та інструментів. І почнемо зі змінних!
Змінні
Про змінні ви можете пам’ятати з математики. В математиці — це величина, значення якої може змінюватись у межах певної задачі (на відміну від константи, значення якої є сталим). Ось, наприклад, в цієї формулі x та y — це змінні.
x = y +1
І якщо y = 1, то x = 2. А якщо y = 2, то x = 3. І так далі.
В програмуванні змінні працюють аналогічно. У них теж може бути власне ім’я та значення, що може змінюватись.
Щоб в JavaScript задати змінну (тобто, визначити змінну), використовується ключове слово let.
Наприклад, оцей код визначає змінну з назвою d та значенням 2.
По суті, код на екрані можна прочитати як «нехай літера d буде змінною». Або ж трохи пафосніше: «призначаю літеру d змінною».
Імена змінних можуть бути короткими, як от одна літера, а можуть бути довшими та осмисленішими. Наприклад, якщо ми хочемо, щоб змінна використовувалась для опису відстані, можна назвати її відповідно — distance. Адже осмислені назви допомагають швидше зрозуміти контекст сценарію. І на щастя в JavaScript ім’я змінної може складатися з багатьох різноманітних символів: англійських чи навіть українських літер та цифр. Але при цьому не може починатися з цифри.
Втім все-таки краще не використовувати в назвах змінних українські літери, адже всі ключові слова в мові записуються англійською, і змішувати англійські та українські символи не дуже зручно.
З іменуванням змінних розібрались! А які значення можна їм задати?
Власне, майже будь-які.
Наприклад, формулу або ж яку-небудь арифметичну операцію. Ось в цьому прикладі значенням змінної буде результат обчислення виразу «2+2». Тобто 4:
Змінна може і не мати значення. В цьому прикладі значенням змінної distance буде так зване невизначене значення (undefined). Це, по суті, означає, що змінна має назву, але немає ніякого наповнення.
До речі, ключове слово let щоразу писати не потрібно. Лише коли ви визначаєте змінну вперше. А після того, як ви призначили якусь літеру чи напис змінною, слово let більше писати не потрібно — його використання буде призводити до помилки. Тож після визначення просто використовуєте змінну за іменем та і все.
Ключові слова
let — лише одне з ключових слів в мові JavaScript. Є і інші. Ключові слова — це такі слова в мові програмування, що зарезервовані для позначення та розпізнавання певних складових в коді. Наприклад, для позначення змінної або для задання умов. Одна з особливостей ключових слів полягає в тому, що через їхню роль в мові JavaScript їх не можна використовувати для іменування змінних чи констант.
Ще два ключових слова, які корисно згадати — const та var.
За допомогою ключового слова const, як ви, певно, здогадались, ми визначаємо константи. На відміну від змінної, значення якої можна перевизначати скільки завгодно разів впродовж коду — адже вона тому і змінна, що може змінюватись — константа змінюватись не може. Бо саме слово «конста́нта» буквально означає «стала величина». І якщо ви спробуєте змінити константу, якій вже задали значення, — отримаєте помилку.
Ключове слово var також визначає змінні. Але почекайте… Хіба ж не ключове слово let визначає змінні? Нащо два ключових слова для одної і тої самої дії? Річ у тім, що насправді, змінні, які ви визначаєте, використовуються не в усій програмі, а в певних її ділянках, які ще називаються «ділянками видимості змінної». Бо в якихось ділянках коду вона буде зчитуватись, а в якихось — ні. Це пов’язано із тим, що сучасні програми є досить великими, і можуть об’єднувати тисячі рядків коду, в окремих частинах якого будуть виконуватись різні задачі у різний спосіб. Так от, те, яким ключовим словом ви визначаєте змінні — var чи let — впливатиме на те, наскільки широкими будуть ці самі ділянки видимості. Докладніше ми про це ще розповімо трохи згодом. Також слід зазначити, що ключове слово var, насправді, є дещо застарілим, і сьогодні його використовувати не рекомендується. Є і інші відмінності, але в них ми зараз занурюватись не будемо.
Якщо ви плануєте визначити декілька змінних чи констант одночасно, то для кожної з них писати ключові слова не потрібно. Достатньо одного ключового слова, а перелік визначених змінних чи констант ви просто вказуєте через кому:
До речі, оцей перенос рядка після коми не є обов’язким. Ми його тут додаємо просто для зручності читання коду.
А ще змінні можна використовувати всередині інших змінних.
В цьому прикладі значенням змінної b буде шість.
Оператори
Символи + та = також мають свою назву. В мовах програмування їх називають операторами.
По суті, оператор — це команда (інструкція мови програмування), за допомогою якої виконується певна взаємодія з інформацією. А якщо простими словами, оператор — це інструмент для проведення певної операції: віднімання, додавання, множення тощо.
В JavaScript операторів є чимало, і впродовж цього курса ми познайомимося з багатьма з них. А почнемо — з арифметичних.
В JavaScript їх шість:
- додавання,
- віднімання,
- множення,
- ділення,
- остача від ділення
- та піднесення до степеня.
Оператори додавання та віднімання, як ви, напевно, здогадались, позначаються символами + та - відповідно. Як і в математиці, мінус використовується не лише для віднімання, але й для позначення від’ємних чисел.
Оператори множення та ділення позначаються за допомогою символів * та /.
Оператор остачі від ділення позначається символом %. Щоб зрозуміти, як він працює, згадаємо, як це працює в математиці!
Якщо ви ділите число 10 на 2, ви отримуєте значення 5. В цьому випадку ми маємо ділення без остачі, а 5 — це ціле число.
Але що, як ми поділимо 10 на 3? Тоді ми отримаємо не ціле число, а число з хвостиком — 3,33.
А коли ви ділете з остачею, то те, що ви отримали в результаті ділення, складається з двох частинок: трьох часток по 3 та одинички. В яких 3 частки по 3 — це неповна частка, а 1 — остача.
Відповідно, коли ви в JavaScriptі використовуєте / в цій операції, то в результаті ділення отримаєте число з комою. А якщо % — то лише остачу: тобто, в нашому прикладі — 1.
Оператор піднесення до степеня позначається двома зірочками **. Наприклад, ось так мовою JavaScript буде виглядати 2 в степені 3:
Нарешті, щоби записати результат арифметичного, або будь-якого іншого, виразу в змінну, використовуються оператори призначення. Їх кілька, але базовим серед них є символ = . Він записує в змінну, що вказана ліворуч, результат виразу праворуч від себе.
До речі, в JavaScript зовсім не обов’язково призначати значення змінним в окремих рядках, як у цьому прикладі:
Оператор = дозволяє призначити значення тій чи іншій змінній прямо всередині формули (виразу).
Наприклад, ось цей код запише в змінну a суму чисел 2 та 3 (тобто, 5), а в змінну b — значення 9.
Таким чином, ці два приклади є рівноцінними.
Послідовність виконання обчислень тут така сама, як в математиці. Спочатку JavaScript обчислює вираз в дужках, записує результат, а потім використовує його в наступній арифметичній операції.
Призначення змінних
Ця властивість також дозволяє одночасно призначати одне значення кільком змінним:
В цьому прикладі обидві змінні матимуть значення 2. Ми вже казали, що оце присвоєння певного значення змінній ще називають призначенням. Тобто, вираз на екрані можна прочитати так: змінним а та б призначено значення 2. Це — звичайне призначення.
Окрім нього, в JavaScript існують також й інші форми призначення.
Щоб зрозуміти, як вони працюють, треба спочатку пояснити, що в програмуванні є дуже поширеним випадок, коли змінній, якій вже було присвоєно певне значення, треба змінити це значення за допомогою певної математичної операції.
Наприклад, змінній а, що мала вихідне значення 2, ми тепер хочемо призначити нове значення, додавши до вихідного одиницю. Це можна було б зробити за допомогою такого виразу: «а призначити результат виразу “а додати один”». До речі, це ми не ускладнюємо, а просто коректно читаємо код. Бо тут правильно казати не «дорівнює», а саме «призначити». Тому, власне, і оператор призначення.
Ми про це вже трошки говорили раніше, але для новачків буде корисним роз’яснити це ще раз.
Річ у тім, що коли ми записуємо цей вираз, то насправді — це не математична формула «а дорівнює а + 1». Тобто, це не рівність, в якій права частина дорівнює лівій. Тут ідея в тому, що змінній ліворуч призначається значення виразу праворуч.
Іншими словами, це програмний еквівалент напису: «a — це a плюс 1». Або ж, якщо зовсім точно, то: «Нове значення змінної a — це сума поточного значення змінної a та одиниці».
Відповідно, в результаті обчислення виразу новим значення змінної буде 3.
Аналогічно може виникати необхідність призначити змінній нове значення через віднімання, ділення, множення, отримання остачі чи піднесення до степеня.
Все це можна робити відповідними виразами:
Короткі форми операторов призначення
Оскільки ці випадки є ну дуже типовими, існує коротка форма операторів призначення для них:
- += для додавання,
- -= для віднімання,
- *= для множення,
- /= для ділення,
- %= для остачі від ділення,
- **= для піднесення до степеня.
Тож наші попередні приклади в скороченій формі виглядатимуть так:
Але і це ще не все. Додавання та віднімання одиниці є настільки поширеною в програмуванні операцією, що для неї існують спеціальні оператори. Вони називаються інкремент (від англійського «приріст») та декремент (це перекладається з англійської як «спадання») відповідно. Вони записуються за допомогою двох плюсів та двох мінусів перед або після змінної:
Тут важливо зрозуміти дві речі. По-перше, обидва ці оператори можуть бути застосовані лише до змінних. Спроба застосувати їх до звичайних значень викличе помилку:
Коли ми ставимо два плюси після змінної, це називаєтья суфіксна (або постфіксна) форма інкременту або декременту. А якщо перед змінною — це префіксна форма.
І насправді, те, де ви розміщуєте їх, впливає і на те, яке значення виразу отримуєте. В цьому прикладі ми призначили змінній а значення 2. А змінній b — два дуже подібних вирази — один з суфіксним інкрементом, а другий — з префіксним.
В результаті обчислення виразів, в першому випадку отримаємо значення 2, а в другому — 3. Тому що в першому випадку значенням виразу є значення змінної до виконання операції інкременту. А в другому — після. Простою мовою, це означає, що реальний порядок дій в коді буде таким: в першому випадку ми спочатку призначаємо змінній b поточне значення змінної а (тобто, двійку), а вже потім перевизначаємо цю змінну. А в другому прикладі ми спочатку перевизначаємо а, збільшивши її значення на одиницю, а вже потім призначаємо b оновлене значення а.
Перший час інкременти та декременти можуть здаватися трохи складними, але ви дуже скоро до них звикнете.
Перетворення типів даних
Поки що ми розглядали лише операції над числами. Але ж в мові JavaScript так багато інших типів даних! Що буде, якщо застосувати ці оператори до них?
Тут як раз і важливо згадати, що JavaScript — це мова з динамічною типізацією. Тобто, за необхідності JavaScript самостійно перетворює один тип даних на інший.
Оскільки арифметичні оператори призначені для роботи над числами, то саме на числа JavaScript намагатиметься перетворити значення інших типів, навіть якщо в коді вони записані, як рядкові. Наприклад, хоч в цьому прикладі четвірка обгорнута лапками, коли поруч із нею з’явиться вираз «мінус два», JavaScript самостійно перетворить четвірку на число і відніме від нього двійку:
З цього правила є декілька виключень, більшість з яких пов’язана з особливостями складніших типів, таких як об’єкти та функції.
Але одне важливе виключення має інше походження і пов’язане з оператором «плюс». Наприклад, результатом додавання текстового значення (рядка) з цифрою 2 до числа 2 буде не 4, як можна було б очікувати, відповідно до попереднього приклада з відніманням, а «22».
Чому так? Справа в тому, що оператор + використовується не лише для арифметичного додавання, але і для так званого зчеплення рядкових значень.
Зчепленням називається операція об’єднання кількох рядкових значень в одне. Інколи цю операцію ще називають розумним словом конкатенація (від латинського concatenatio — «зчеплення»).
Саме через цю особливість мови будь-який вираз з оператором + сприймається як зчеплення, якщо хоча б одне зі значень у цьому виразі є рядковим.
Щоби уникнути такого перетворення, можна використати механізм перетворення поточного типу на числовий:
Але є і компактніший спосіб: достатньо від кожного доданка (в даному випадку змінних а та б) відняти 0.
Це не змінить значення змінних, адже ми від них насправді нічого не відняли. Зате завдяки самому факту виконання операції віднімання наш бубочка JavaScript перетворить тип змінних a та b в даному виразі на числовий.
До слова, ще одним важливим виключенням з правила перетворення типів є те, що не можна змішувати звичайні числа і довгі цілі числа. Спроба це зробити призведе до помилки:
Зчеплення та інтерполяція
Ну а тепер повернімося до зчеплення. Як ми вже казали, зчеплення — це об’єднання кількох рядкових значень в одне, яке записується за допомогою оператора +. Простою мовою, так ми склеюємо декілька написів в один.
Це більше всього виправдано, коли ми хочемо додати до якогось тексту значення змінної. Скажімо, тут ми додаємо до слів привітання ім’я користувача:
Такий спосіб роботи з рядками виглядає непогано на коротких прикладах, але ви дуже швидко зрозумієте проблему на такому прикладі:
На щастя, є простіший і зручніший спосіб, що називається інтерполяція. Це мудре слово означає формат рядкового значення, в якому змінні вказуються за допомогою спеціальної форми запису. Ось як виглядає попередній приклад із застосуванням інтерполяції:
Зверніть увагу на лапки: для інтерполяції використовуються похилі одинарні лапки. На клавіатурі вони розташовані ліворуч від цифри 1. Перед назвами змінних в таких рядках ставиться символ $, а сама назва поміщається у фігурні дужки.
До речі, інтерполяція дозволяє працювати не лише зі змінними. У фігурні дужки можна помістити будь-який вираз, наприклад арифметичну операцію:
… призначення змінної:
… або інкремент:
На цьому знайомство з базовим синтаксисом мови JavaScript ми завершимо. А в наступних уроках ми познайомимось з умовами та циклами.
