В цій статті ми поговоримо про функції, оскільки це тема, яку ви чуєте з самого початку свого шляху в автоматизації тестів, і яка є однією з основних частин JS. Функція — це набір інструкцій, що виконує завдання або обчислює значення, отримуючи вхідні дані і повертаючи результат. Функції дуже корисні, і варто підкреслити, що вони дозволяють повторно використовувати код у різних програмах, а також приховувати внутрішню реалізацію задачі, що виконується, і давати красиві і зрозумілі назви методам, щоб при виклику в тестах вони були легкими для розуміння (завжди вибирайте описові імена для ваших функцій, людство вам подякує, або хоча б ваш колега з QA). Функції також дозволяють розділяти складні програмні завдання на прості кроки, знижувати дублювання коду та покращувати трасування, що робить відлагодження легшим.
Оголошення функції
Ключове слово function йде перед ім'ям функції, параметри функції вказуються в дужках і розділяються комами, а сама декларація JS обмежена фігурними дужками.
function sum(a, b) {
// Ключове слово: function, Ідентифікатор: sum
return a + b; // Оголошення: return , Тіло функції
}
const s = sum(1, 5); // Виклик
Вираз функції
Ключове слово function визначає функцію в середині виразу, і вона може бути анонімною. Також варто пам'ятати, що її неможливо викликати до оголошення.
const square = function (number) {
return number * number;
};
let x = square(4); // 16
Вираз функції, що виконуються негайно
Це функція, яка виконується одразу після того, як була визначена. Це поширений шаблон проєктування, який використовується для створення локального простору для змінних, що допомагає уникнути забруднення глобального простору імен.
(function(){
// код
})();
У вигляді стрілочної функції
(() => {
// код
})();
(function (a, b) {
console.log(a + b);
})(3, 4); // 7
(function () {
let aName = "Barry";
})();
aName; // викликає "Uncaught ReferenceError: aName is not defined"
Тепер правильно:
let result = (function () {
let name = "Barry";
return name;
})();
result; // "Barry"
Параметри функції
З ECMAScript 2015 з'явилися 2 типи параметрів: за замовчуванням і решта.
Параметри за замовчуванням
Параметри функцій за замовчуванням мають значення undefined, але можна задавати їм значення:
function rest(a = 7, b = 2) { // Параметри за замовчуванням, 7 та 2
return a - b;
}
Параметри решта
Передаємо масив як параметр. У прикладі видно, що в multiply передано числа 1, 2, 3 як аргументи, і під час використання методу map вони множаться на перший параметр функції multiply.
function multiply(multiplier, ...theArgs) {
return theArgs.map((x) => multiplier * x);
}
let arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
Стрілочні функції
Вираз стрілочної функції має коротший синтаксис у порівнянні з виразами функцій, крім того, це анонімні функції, що не мають ідентифікатора.
Варто пам'ятати, що стрілочні функції не мають свого власного this, arguments, super чи new.target.
Стрілочні функції можна побачити в Cypress у тестах E2E, коли використовується describe у тестових суїтах, а також під час виконання самих тестів.
Це дозволяє легко читати код, покращує підтримуваність тестів, а також робить код більш чистим та лаконічним.
describe("Google Search", () => {
it("повинен здійснити пошук за терміном в Google", () => {
cy.visit("https://www.google.com");
cy.get('input[name="q"]').type("Cypress.io{enter}");
cy.title().should("include", "Cypress.io");
});
});
Базова стрілочна функція
const suma = (a, b) => a + b;
console.log(suma(2, 3)); // 5
Стрілочна функція без параметрів
const saludar = () => console.log("Hola, Mundo!");
saludar(); // Hola, Mundo!
Стрілочна функція з одним параметром
const cuadrado = (x) => x * x;
console.log(cuadrado(4)); // 16
З тілом у вигляді блоку
const resta = (a, b) => {
const resultado = a - b;
return resultado;
};
console.log(resta(10, 3)); // 7
Як callback в map
const numeros = [1, 2, 3, 4, 5];
const dobles = numeros.map((n) => n * 2);
console.log(dobles); // [2, 4, 6, 8, 10]
Стрілка в промісах
const promesa = new Promise((resolve, reject) => {
const exito = true;
if (exito) {
resolve("¡Éxito!");
} else {
reject("Error");
}
});
promesa
.then((mensaje) => console.log(mensaje)) // ¡Éxito!
.catch((error) => console.log(error));
Замикання (Closures)
Замикання — це поєднання функції в середині іншої. Воно дозволяє доступ до області видимості зовнішньої функції з внутрішньої функції. В JS замикання створюються щоразу, коли створюється функція, під час її визначення.
Методи
З ECMAScript 2015 (ES6) була введена скорочена синтаксис для визначення методів в ініціалізаторах об'єктів. Цей синтаксис робить код більш лаконічним і легким для читання.
До ES6
Після ES6
Примітка: Тепер ти знаєш, що якщо ми хочемо використовувати "this", не можна використовувати стрілочні функції для визначення методів в об'єктах.
Інформація була узята з офіційних джерел https://developer.mozilla.org/es/. Для більш детального вивчення цих тем можна звернутися до цього ресурсу, також нагадую, що ця стаття є частиною серії про JS для QA, метою якої є бути короткою та підсумовувати основи, що найчастіше використовуються для написання перших скриптів.
Перекладено з: Javascript para QA: Funciones