Прежде чем нырнуть глубоко,
Давайте разберемся, зачем нам вообще нужны функции.
Каждый код следует принципу DRY (Dне повторять Y себя). В основе принципа DRY лежат Функции.
Добавим два числа, 10 и 20.
const sum1 = 10 + 20;
Добавим 50 и 60.
const sum2 = 50 + 60
Сядьте поудобнее и задайте вопрос — я повторяюсь здесь? Что мы делаем?
Как я уже говорил, на помощь приходят функции!
Во-первых, давайте преобразуем приведенные выше строки в функции.
function sum1() {
return 10 + 20
}
Затем,
function sum2() {
return 50 + 60
}
Ура! мы преобразовали его в функции, но подождите и спросите: "Мы здесь используем DRY?".
Нет, мы по-прежнему повторяем каждое сложение двух чисел.
Тот факт, что вы преобразуете свой код в функции, не означает, что вы следуете принципу DRY.
DRY = определение того, что изменилось и осталось неизменным.
Что меняется = Цифры.
Что не изменилось = операция сложения.
Мы можем вставлять в функции неизмененные шаблоны, но как насчет изменения шаблонов?
Без изменений = внутри функций.
Изменено = Добро пожаловать в Параметры.
function sum(a,b) {
return a + b // Addition inside the function
}
Здесь"a" и "b" – это параметры, отвечающие за изменение одного из них.
Следовательно, вызов функций с использованием аргументов.
const sum1 = sum(10,20) const sum2 = sum(50,60)
Немного усложняю:
Мы будем работать с массивами.
Мы добавим каждый элемент массива на 5.
const arr = [1,2,3];
Как это сделать?
Мы будем перебирать каждый элемент в массиве и помещать результат в новый массив.
const arr = [1,2,3];
function arrAddFive(inputArray) {
let output = [] // Initializing empty array
for(i=0;i<inputArray.length;i++) {
let addingFive = inputArray[i] + 5; // addingFive to each element
output.push(addingFive); // Pushing it to output array
}
return output // Returns the output array(contains added 5 element)
};
const addresult1 = arrAddFive(arr);
// [6,7,8]
Для разных массивов
// Same code above const addresult2 = arrAddFive([11,12,13]); // [16,17,18] const addresult3 = arrAddFive([20,21,22]); // [25,26,27]
Мы используем одну и ту же функцию для разных массивов для согласования с DRY. Хороший!
Мы сделаем другую операцию, скажем, умножим на 5.
const arr = [1,2,3];
function arrMultiplyFive(inputArray) {
let output = [] // Initializing empty array
for(i=0;i<inputArray.length;i++) {
let multiplyingFive = inputArray[i] * 5; // Multiply 5 to each element
output.push(multiplyingFive); // Pushing it to output array
}
return output // Returns the output array(contains added 5 element)
};
const mulresult1 = arrMultiplyFive(arr); // [5,10,15]
Для разных массивов
const mulresult2 = arrMultiplyFive([11,12,13]) // [50,60,65] const mulresult3 = arrMultiplyFive([20,21,22]) // [100,105,110]
Используем ли мы здесь DRY? Да конечно! потому что одна и та же функция вызывается для разных массивов.
Что, если мы хотим, чтобы и умножение, и сложение выполнялись в одном коде?
const arr = [1,2,3];
function arrAddFive(inputArray) {
let output = [] // Initializing empty array
for(i=0;i<inputArray.length;i++) {
let addingFive = inputArray[i] + 5; // adding 5 to each element
output.push(addingFive); // Pushing it to output array
}
return output // Returns the output array(contains added 5 element)
};
function arrMultiplyFive(inputArray) {
let output = [] // Initializing empty array
for(i=0;i<inputArray.length;i++) {
let multiplyingFive = inputArray[i] * 5; // Multiply 5 to each element
output.push(multiplyingFive); // Pushing it to output array
}
return output // Returns the output array(contains added 5 element)
};
const addresult1 = arrAddFive(arr);
const mulresult1 = arrMultiplyFive(arr);
А теперь скажите мне ответ. Идем ли мы по СУХИМ следам?
Частично да! Потому что мы используем одну и ту же функцию для разных массивов для одних и тех же операций.
Когда вы хотите добавить 5, независимо от массива → мы используем функцию ‘arrAddFive’.
Если вы хотите умножить на 5 независимо от массива → мы используем функцию ‘arrMultiplyFive’.
Но мы не используем одну и ту же функцию независимо от массива и операции (умножения или сложения).
Можно сказать, что мы использовали функции в первом или более низком порядке.
Суть DRY заключается в поиске общего шаблона:
Здесь мы увидим общие шаблоны для обеих функций,
Все, что изменяется (отличается), будет передано функции в качестве параметров.
Что изменится?
let multiplyingFive = inputArray[i] * 5; let addingFive = inputArray[i] + 5;
Можем ли мы поставить такой же параметр, как этот,
// Don't do this const mulresult1=arrFunction(multiplyingFive=InputArray[i]*5,inputArray)
Я знаю, что это глупо, но я хотел бы остановиться на одном моменте.
Я могу создать функцию, которая всегда возвращаетвведенное число, умноженное на 5, или добавляет 5.
Позвольте мне закодировать это,
const arr = [1,2,3];
function arrFunc(callBackFn,inputArray) {
let output = [] // Initializing empty array
for(i=0;i<inputArray.length;i++) {
output.push(callBackFn(inputArray[i])); // Invoking the callBackFn
}
return output // Returns the output array(contains added 5 element)
};
function multiplyFive(input) {
return input * 5;
}
function addingFive(input) {
return input + 5;
}
const addresult1 = arrFunc(multiplyFive,arr); // [6,7,8]
const mulresult1 = arrFunc(addingFive,arr); // [5,10,15]
Поэтому, когда вы передаете функцию в качестве параметра, она называется функцией обратного вызова.
Здесь умножение на пять и добавление на пять называется функцией обратного вызова.
Почему используется термин «Обратный звонок»? Потому что он не вызывается сразу или вызывается внутри другой функции.
Функция, которая вызывает другую функцию внутри себя, должна быть более высокого порядка, верно, чем функция обратного вызова, верно?
Здесь arrFunc — это Функция высшего порядка, поскольку она принимает обратный вызов (другая функция в качестве параметра).
arrFunc вызывает функции обратного вызова — multiplyFive и addFive внутри него.
output.push(callBackFn(inputArray[i])); // Invoking the callBackFn
Функция обратного вызова вызывается некоторыми функциями более высокого уровня.
Или мы можем сказать, что он вызывается после вызова высшей функции.
Функция, которая принимает или выдает другую функцию, называется функциями высшего порядка.
Позже мы увидим одну функцию высшего порядка, которая возвращает другую функцию.
Первоначально опубликовано на https://www.pansofarjun.com 11 декабря 2022 г.
