Стиль коду

Ваш код постійно хтось читатиме. І впродовж навчання, і особливо — під час реальної роботи. Тому ваш код має бути читабельним та зручним для тестування.

Будь-який дурень може написати код, зрозумілий для комп'ютера. Хороший програміст пише код, зрозумілий людині. © Мартін Фаулер

Таким код стає, якщо написаний за певними стандартами. Може здатись, що це складно. Але це справа звички. Якщо регулярно писатимете код, то дуже швидко звикнете до цих правил, вони будуть "на автоматі". На Zero стандарти такі:

Не юзайте alert / confirm

Вивести на екран === вивести на консоль. console.log() — бро

alert() і confirm() — НЕ бро. Забудьте про існування alert() і confirm() принаймні до кінця курсу Zero.

Не пишіть занадто довгі рядки

Рядок коду має бути не довшим за 80 символів. Це враховуючи коментарі та те, що пробіл — теж символ.

Наприклад, ось цей виділений рядок містить якраз 80 символів, враховуючи пробіли

Якщо у вас є довші рядки в коді — скоротіть їх.

+prompt()

Функція prompt() повертає рядок. Якщо ви питаєте у користувача число — приводьте отримані дані до типу Number руками. Найпростіше — через унарний +, тобто +prompt().

І навпаки: якщо ви питаєте у користувача слово, юзайте звичайний prompt() без плюса.

Будьте уважні до цього моменту, це часте джерело багів.

Скорочуйте арифметику

Мова про +=, -=, *=, /=, ++, -- etc.

Якщо бачите це вперше — може здатись кракозябрами. Але насправді все просто, тут все детально описано.

Правила оголошення змінних

Не юзайте var

Ми про це писали раніше тут, але ще раз нагадаємо: var — погано. Юзайте let.

Де створили — там і заповнюємо

Якщо можете оголосити змінну і заповнити її корисним значенням в одному рядку, так і робіть. Виключення: оголошення змінних, які оголошуються в одному скоупі, а заповнитись можуть лише в якомусь іншому.

Тобто отак — не варто:

let i
i = 0

Але якщо щось типу

let i

for (i = 0; ...; ...) {
    ...
}

let ololo = i;

for (i = 100500; ...; ...) {
    ...
}

... то тоді норм.

У всіх інших випадках робіть так:

let i = 0;

Назва змінної та значення, звісно, можуть бути будь-якими. Мова саме про принцип "де створили — там і заповнюємо".

Оголошення кількох змінних поспіль

Якщо створюємо і одразу ж присвоюємо значення, для читабельності краще кожну змінну з нового рядка:

let variable1 = 1;
let variable2 = "abcdefg";
let variable3 = true;
let variable4 = -100499;

Але якщо ви просто оголошуєте багато поспіль, але не заповнюєте — краще в 1 рядок через кому.

let variable1, variable2, variable3, variable4;

Де оголошувати?

Краще за все оголошувати змінну якнайближче до місця, де вона вперше використовується.

Якщо оголошуєте в циклі for, то є не зовсім очевидна фіча — оголошення кількох змінних в скоупі цикла, але не в тілі. Ну щось типу:

for (let i = 0, limit = 30, counter = 0; i <= limit; i++) {
    console.log(i + "/" + limit);
    if (i % 3 == 0) {
        counter++;
        console.log("\n--- " + counter + "\n");
    }
}

Детальніше про це можна почитати тут.

Правила іменування змінних

Ім'я змінної має чітко відповідати на питання "що лежить всередині"? Бажано називати коротко (до трьох слів), але між короткою і беззмістовною назвою та довгою, але зрозумілою, обирайте зрозумілу. Крім того:

Ne imenuyte zminni translitom, tse pogano ta vzagali fu-fu-fu. Англійська мова — бро.
Перша літера назви повинна бути маленькою (lowerCamelCase).
Не скорочуйте назви, бо ніхто крім вас це скорочення не зрозуміє (частіше за все). Якщо у назві змінної буде кілька "повновісних" слів (highestNumber, arrayLengthLimit, treeHeightWithoutStump тощо) — це абсолютно норм.

a, b, c, x, n, n1, num, userNum, Zminna, zminna, temp і т.п. — це максимально погані імена для змінних

Окремо про іменування змінних-лічильників у циклах

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

for (let i = 0; i < 10; i++)

У цьому прикладі лічильник називається i.

Ніщо, крім лічильників, не має називатись однією літерою.

Зазвичай лічильники називаємо i, j, k і т.д. за алфавітом відповідно вкладеності у фігурних дужках. Ось на прикладі псевдокоду:

for (i) {
    for (j) {
        for (k) {
        }
    }
    
    for (j) {
        for (k) {
        }
    }
    
    for(j) {
    
    }
}

for (i) {
   
}

Вхопили суть? Мислити треба "сходинками" Кожна { — це +1 за алфавітом. Кожна } — це -1 за алфавітом.

А "алфавіт лічильників" починається з i (тому що index; це стара математична традиція і стандарт майже у всіх мовах програмування).

Тобто у одному завданні може існувати скільки завгодно однаково названих змінних, головне — в різних областях видимості. Область видимості (вона ж — скоуп) — це, якщо сильно спростити, "сходинка" коду, вкладеного у { }.

{ Фігурні дужки }

В if-else, циклах та функціях {} обов'язкові. У всіх інших випадках {} зайві.
{ — це завжди останній символ у рядку. } — це завжди початок рядка. При цьому після { та } не має бути нічого, крім коментарів. Код — з наступного рядка. З цього "завжди" є 2 виключення: do-while та if-else: вони пишуться інакше (лише вони).
if else та цикли ніколи не пишемо без фігурних дужок.
Кожного разу, коли відчиняємо нову {, то код далі "зсуваємо" на 1 таб (4 пробіли) праворуч. Якщо }— ліворуч. Запам'ятати просто: кожен новий рівень вкладення в { } має бути зміщений на 1 "сходинку" праворуч.

Схематичні еталони

... — це умовно будь-який код (1 або кілька рядків — неважливо)

Звертайте увагу на те, пробіли, переноси рядків, порожні рядки та фігурні дужки.

...

for (...; ...; ...) {
    ...
}

...

while (...) {
    ...
}

...

do {
    ...
} while (...);

...

if () {
    ...
} 

if () {
    ...
} else {
    ...
}

if() {
    ...
} else if () {
    ...
} else { 
    ...
}

Про коментарі

Видаляйте закоментований код

Коли ви тестуєте, як щось працює, у вас може бути кілька варіантів коду, і ви "перемикаєтесь" між ними, коментуючи одні та залишаючи робочими інші. Це зручно, коли ви пишете програму. Але не скидайте таке на рев'ю. У фінальній версії програми закоментований код — це сміття. Прибирайте сміття з коду, перш ніж скидати на рев'ю.

Це не стосується описових коментарів, посилань на задачі і т.п. Мова лише про код.

Коментуйте вашу логіку

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

Але робіть це змістовно. Не констатуйте очевидне, типу коментарів до циклу "робимо 10 ітерацій, на кожній з яких відбувається N".

Коментарі до логіки мають пояснювати загальний хід вашої думки, а не просто дословно описувати мовою людьскою те, що поряд записано мовою JavaScript.

Щоб було зрозуміліше, ось вам аналогія. Задача "Сходи в магазин купи хліба".

Плюс-мінус норм стиль коментів:

Заглянути в шафу, обрати одяг, вдягтись, не забути зачинити квартиру на виході, дійти до хлібного кіоска. Якщо буде хліб — купити й повернутись додому, не буде — пошукати в сусідніх магазинах. Якщо за 20 хвилин не знайдеться — повертатись додому. не забути зачинити двері зсередини. Роздягтись, помити руки. Якщо все ж купили хліб — закинути в хлібницю.

Поганий стиль:

Протягнути руку до лівої двері верхньої секції коричневої шафи. Розтиснути пальці, ухопитись за ручку. Тягти на себе, доки двері не відхиляться на 90° від початкового положення. Проаналізувати поток світла, що відбивається від вмісту шафи та падає на сітківку ока, і переконатись у наявності одягу всередині шафи...

Ну ви зрозуміли 😉 Передбачаючи питання: так, люди іноді дійсно пишуть подібні коментарі...

Ідеально:

Піти пошукати в магазинах біля дому хліб. Якщо за 20 хв так і не знайшовся — повертатись додому без хлібу. Не забути вимити руки.

PreviousЛогування NextРев'ю

Last updated 1 year ago