Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

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

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

JS об'єкт switch

Загальний опис

switch — це умовна конструкція, яка дозволяє виконувати різні фрагменти коду залежно від значення виразу. Вона працює шляхом послідовного порівняння виразу з кожним з вказаних case. Якщо збіг знайдено, виконується відповідний блок коду. Конструкція завершується після ключового слова break, яке запобігає виконанню наступних блоків. Якщо жоден із випадків (case) не збігається, виконується блок default, якщо він заданий.

Наприклад, для перевірки дня тижня:

const day = "Monday";
switch (day) {
    case "Monday":
        console.log("Початок робочого тижня");
        break;
    case "Friday":
        console.log("Час розслабитись");
        break;
    default:
        console.log("Це звичайний день");
}

Особливість конструкції switch полягає в тому, що порівняння значень виконується жорстко (===), тому різні типи даних не призводять до збігу. Наприклад, 1 і "1" не вважаються рівними.

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

const fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("Яблуко");
    case "orange":
        console.log("Апельсин");
        break;
}
// Виведе: "Яблуко", "Апельсин"

Ця поведінка може використовуватися для об’єднання кількох case для однієї дії.

Порада:

Використовуйте default, навіть якщо здається, що всі можливі випадки враховані. Це корисно для обробки неочікуваних або невідомих значень, наприклад:

switch (status) {
    case "active":
        console.log("Активний");
        break;
    default:
        console.log("Невідомий статус");
}
Порада:

Переконайтеся, що ви додаєте break після кожного блоку. Винятки можна робити тільки свідомо, наприклад, коли потрібно, щоб код «провалився» у наступний випадок.

Порада:

Не використовуйте switch, якщо кількість умов дуже велика. У таких випадках краще застосовувати об'єкти або функціональний підхід. Наприклад:

const actions = {
    Monday: () => console.log("Понеділок"),
    Friday: () => console.log("П’ятниця"),
};
(actions[day] || (() => console.log("Невідомий день")))();

Синтаксис

switch (вираз) {
    case значення1:
        // Код для значення1
        break;
    case значення2:
        // Код для значення2
        break;
    default:
        // Код за замовчуванням
}

Переглядачі

Переглядач

1

1

1

4

12

Переглядач

4.4

18

4

1

Переглядач

0.10.0

1.0

Приклади


У цьому прикладі реалізовано простий конвертер валют, який використовує switch для визначення курсу залежно від обраної валюти. Користувач вводить суму в гривнях і вибирає, у яку валюту конвертувати (долар, євро, фунт). Натисканням кнопки отримує результат розрахунку, який відображається на сторінці.

У цьому прикладі switch використовується для реалізації калькулятора. Конструкція забезпечує простоту читання та додавання нових операцій.

function calculator(a, b, operation) {
    switch (operation) {
        case "add":
            return a + b;
        case "subtract":
            return a - b;
        case "multiply":
            return a * b;
        case "divide":
            return b !== 0 ? a / b : "Помилка: ділення на нуль";
        default:
            return "Невідома операція";
    }
}
console.log(calculator(4, 2, "add")); // 6
console.log(calculator(4, 0, "divide")); // Помилка: ділення на нуль

Цей приклад демонструє, як switch може обробляти різні HTTP-статуси. Завдяки блоку default можна легко передбачити поведінку для невідомих значень.

function handleResponse(status) {
    switch (status) {
        case 200:
            return "OK";
        case 404:
            return "Not Found";
        case 500:
            return "Server Error";
        default:
            return "Unknown Status";
    }
}
console.log(handleResponse(200)); // OK
console.log(handleResponse(403)); // Unknown Status

Методи

Властивості