Оператор function в JavaScript — оголошення функції
Загальний опис
function — ключове слово для створення функції, яка є одним із основних будівельних блоків JavaScript. Функція дозволяє організувати код, зробити його повторно використовуваним і більш читабельним.
Створення функції починається з ключового слова function, за яким іде ім'я функції (наприклад, calculateSum). Потім у круглих дужках (()) задаються параметри — вхідні дані, які функція приймає. Далі у фігурних дужках ({}) розташовується тіло функції, яке виконує інструкції.
Функція може повертати результат за допомогою ключового слова return. Якщо return відсутній, функція повертає undefined.
Ось приклад простої функції, яка обчислює суму двох чисел:
function calculateSum(a, b) {
return a + b;
}
console.log(calculateSum(5, 3)); // Виведе: 8
Функції можна викликати необмежену кількість разів, змінюючи вхідні дані:
console.log(calculateSum(10, 15)); // Виведе: 25
console.log(calculateSum(7, 2)); // Виведе: 9
Також функції можна вкладати одна в одну:
function square(x) {
return x * x;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(2, 3)); // Виведе: 13
Функції є іменованими (мають ім'я) або анонімними (без імені). Анонімні функції часто використовуються як значення змінної:
const multiply = function(x, y) {
return x * y;
};
console.log(multiply(4, 5)); // Виведе: 20
Ще один тип функцій — стрілкові функції (arrow functions), які спрощують синтаксис:
const subtract = (a, b) => a - b;
console.log(subtract(10, 4)); // Виведе: 6
Функції — потужний інструмент, який дозволяє організовувати код у модульні та логічно завершені частини.
автор: Bond
- Порада
-
Не обов'язково завжди використовувати
return. Наприклад, функції можуть просто виконувати дії, як у цьому прикладі:
автор: Bondfunction logMessage(message) { console.log(message); } logMessage("Привіт, світ!"); - Порада
-
Параметри функцій є опціональними. Якщо аргумент не передано, параметр отримає значення
undefined. Можна додати значення за замовчуванням:
автор: Bondfunction greet(name = "Гість") { return `Привіт, ${name}!`; } console.log(greet()); // Привіт, Гість! - Порада
-
Функція може викликати саму себе — це називається рекурсія. Використовуйте її для складних завдань, таких як підрахунок факторіалу:
автор: Bondfunction factorial(n) { if (n === 1) return 1; return n * factorial(n - 1); } console.log(factorial(5)); // 120
Синтаксис
function name(параметри) {
// Тіло функції
return; // Опціонально
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 0.10.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Замикання зберігає доступ до змінної count, навіть якщо зовнішня функція вже завершила роботу.
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2Цей приклад зберігає результати обчислень у кеші, щоб уникнути повторних розрахунків.
function memoize(fn) {
const cache = {};
return function(arg) {
if (cache[arg]) {
return cache[arg];
}
const result = fn(arg);
cache[arg] = result;
return result;
};
}
const square = memoize(x => x * x);
console.log(square(5)); // 25 (обчислено)
console.log(square(5)); // 25 (взято з кешу)Користувач вводить температуру, обирає напрямок конвертації (з Цельсія у Фаренгейт або навпаки) та натискає кнопку. JavaScript-функція convertTemperature обробляє значення і виводить результат на сторінку. Це чудовий приклад того, як функції забезпечують динамічну взаємодію з користувачем.
HTML
<header>
<h2 class="title">Конвертер температур</h2>
<p class="description">Конвертує значення між Цельсієм і Фаренгейтом.</p>
</header>
<main>
<div class="result">
<!-- Форма для введення значення -->
<form id="converterForm">
<label for="temperature">Введіть температуру:</label>
<input type="number" id="temperature" name="temperature" required>
<label for="conversionType">Тип конвертації:</label>
<select id="conversionType" name="conversionType">
<option value="toCelsius">З Фаренгейта в Цельсій</option>
<option value="toFahrenheit">З Цельсія в Фаренгейт</option>
</select>
<button type="button" id="convertBtn">Конвертувати</button>
</form>
<!-- Місце для результату -->
<p id="resultText">Результат: <span id="resultValue">-</span></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
form label {
display: block;
margin: 10px 0 5px;
}
form input,
form select {
padding: 5px;
margin-bottom: 10px;
width: 100%;
max-width: 300px;
}
form button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
form button:hover {
background-color: #0056b3;
}
#resultText {
margin-top: 15px;
font-weight: bold;
font-size: 1.2em;
}JS
// Функція для конвертації температури
function convertTemperature(value, type) {
if (type === "toCelsius") {
return (value - 32) * 5 / 9; // З Фаренгейта в Цельсій
} else if (type === "toFahrenheit") {
return value * 9 / 5 + 32; // З Цельсія в Фаренгейт
}
return null; // Якщо тип некоректний
}
// Обробник кнопки конвертації
document.getElementById("convertBtn").addEventListener("click", function () {
// Отримуємо введені значення
const temperature = parseFloat(document.getElementById("temperature").value);
const conversionType = document.getElementById("conversionType").value;
// Перевіряємо, чи введено число
if (isNaN(temperature)) {
alert("Будь ласка, введіть коректне число!");
return;
}
// Виконуємо конвертацію
const result = convertTemperature(temperature, conversionType);
// Відображаємо результат
document.getElementById("resultValue").textContent = result.toFixed(2);
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!