Хлеб с маслом программирования на JavaScript.
Если вы какое-то время занимались программированием, вы, вероятно, знаете, что функции являются важной концепцией любого типичного языка программирования.
А если вы знакомы с функциональными языками программирования, такими как JavaScript, то трудно поспорить с утверждением, что функции — это хлеб с маслом функциональных языков программирования.
Если вы новичок в мире программирования, прочитайте эту статью, и в конце вы можете узнать что-то интересное о функциях и почему это важно.
Концепция функций довольно проста:
Разбивка больших проблем на части и объединение их в значение, чтобы уменьшить повторение.
Звучит книжно?
Позвольте мне упростить это.
Скажем, у вас есть проблема с нахождением квадрата некоторых чисел.
Типичным подходом будет:
let num;
num = 10;
console.log("Square of "+num+" is "+num*num);
num = 11;
console.log("Square of "+num+" is "+num*num);
num = 12;
console.log("Square of "+num+" is "+num*num);
num = 13;
console.log("Square of "+num+" is "+num*num);
num = 14;
console.log("Square of "+num+" is "+num*num);
num = 15;
console.log("Square of "+num+" is "+num*num);
num = 16;
console.log("Square of "+num+" is "+num*num);
num = 17;
console.log("Square of "+num+" is "+num*num);
Не кажется ли это странным? Повторяющийся?
Давайте посмотрим, как функции уменьшат это повторение.
function findSquare(num) {
console.log("Square of "+num+" is "+num*num);
}
findSquare(10); //Square of 10 is 100
findSquare(11); //Square of 11 is 121
findSquare(12); //Square of 12 is 144
findSquare(13); //Square of 13 is 169
findSquare(14); //Square of 14 is 196
findSquare(15); //Square of 15 is 225
findSquare(16); //Square of 16 is 256
findSquare(17); //Square of 17 is 286
findSquare(18); //Square of 18 is 324
Как насчет этого!
Это всего лишь простой пример, показывающий мощь функций, но этого недостаточно. На самом деле в наши дни у нас есть подход функционального программирования для решения проблемы. Мы обсудим более функциональное программирование в следующих статьях.
А пока давайте поиграем с некоторыми основами, чтобы помочь вам изучить основные понятия.
Структура функции:
Чтобы использовать функцию:
- во-первых, вам нужно определить функцию
- затем вызовите функцию
В приведенном выше примере:
Определите функцию:
function findSquare(num) {
console.log("Square of "+num+" is "+num*num);
}
Вызовите функцию:
findSquare(10);
Компоненты функции:
Обычно функция состоит из трех компонентов:
- имя функции
- параметры
- возвращаемые значения
Имя функции является обязательным, в то время как у некоторых функций есть параметры, а у некоторых нет. То же самое касается возвращаемых значений: некоторые функции возвращают значения, а некоторые нет.
// Without parameter, Without return value
function sayHello(){
console.log("I said hello");
}
sayHello(); // I said hello
//Without parameter, With return value
function greeting(){
return "Hello";
}
console.log(greeting()+ " World!"); // Hello world
//With parameter, Without return
function printDouble(num){
console.log("Double of "+num+" is "+num*2);
}
printDouble(2); // Double of 2 is 4
//with parameter, with return
function giveSquare(num) {
return num*num;
}
console.log(giveSquare(5)); // 25
Каждая переменная, созданная внутри функции, действительна только внутри этой функции. Это называется локальной областью действия.
Позволь мне показать тебе:
function printFive() {
const num = 5;
console.log(num); //5
}
console.log(num); //ReferenceError: num is not defined
Я написал подробную статью о Scope в JavaScript. Загляните сюда 👇
Прежде чем идти дальше, позвольте мне обратить ваше внимание на параметры и аргументы.
Иногда люди путают параметры и аргументы и считают их одним и тем же. Но между ними есть тонкая грань, которую нужно знать, чтобы стать лучшим разработчиком.
Посмотрите на изображение ниже:
Когда мы передаем значение при вызове функции, это значение называется аргументом, а когда мы принимаем значение в определении функции , это значение называется параметром.
Это все основы, которые вам нужно знать о функциях.
Но когда дело доходит до JavaScript, вы можете манипулировать функциями иначе, чем с любым другим функциональным языком программирования.
Позволь мне показать тебе:
Все функциональные языки программирования могут сделать это:
function makeTwice(n) {
return 2*n;
}
console.log(makeTwice(5));
Но не все функциональное программирование не может этого сделать:
const makeTwice = function(n) {
return 2*n;
}
let giveMeTwice = makeTwice; //passing makeTwice to giveMeTwice
console.log(giveMeTwice(5));
В JavaScript мы можем даже передать функцию в переменную, как обычное значение. Эта функция имеет несколько преимуществ в функциональном программировании с помощью JavaScript, которые мы обсудим в следующих статьях.
Прежде чем я закончу, есть несколько тем, которые необходимо обсудить.
Необязательный аргумент:
Позвольте мне сначала показать вам пример:
function makeSquare(n) {
return n* n;
}
console.log(makeSquare(5, "hello", false)); //25
Мы можем передать 3 аргумента (5, «hello», false), но наша функция makeSquare может принимать только 1 параметр.
Как вы уже догадались, аргументы hello и false являются необязательными.
Необязательные аргументы могут показаться бесполезными, но это совсем не так.
Позволь мне показать тебе:
Скажем, у вас есть проблема, когда вы передаете 2 аргумента. Если функция принимает два аргумента, она возвращает результат их различия, но если функция принимает только 1 параметр, то она возвращает -ve этого единственного числа.
function minus(x, y) {
if (y === undefined)
return -x;
else
return x - y;
}
console.log(minus(10)); // → -10
console.log(minus(10, 5)); // → 5
Вы даже можете установить значение по умолчанию для необязательного параметра.
function multiply(x, y=1) {
return x*y; //here y is 1 by default
}
console.log(multiply(10)); // → 10
console.log(multiply(10, 5)); // 50
Массив аргументов
Как я уже говорил вам ранее, функции в JavaScript намного более продвинуты, чем любые другие. Одной из его интересных функций является массив arguments.
Массив аргументов — это свойство по умолчанию функции в JavaScript, которое содержит все аргументы, переданные этой функции в форме массива.
Позволь мне показать тебе:
function demo(a,b,c) {
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
console.log(arguments.length); // 3
console.log(arguments[0]); // 10
console.log(arguments[1]); // 20
console.log(arguments[2]); // 30
}
demo(10,20,30);
Массив аргументов по-прежнему работает, даже если вы ничего не передаете в параметре функции.
Звучит странно?
Проверь это:
// removing a,b,c from parameter
function demo() {
console.log(arguments.length); // 3
console.log(arguments[0]); // 10
console.log(arguments[1]); // 20
console.log(arguments[2]); // 30
}
demo(10,20,30);
Заключение:
При этом до сих пор мы рассмотрели все основы, которые вам нужно знать о функциях в JavaScript. Теперь вы можете пойти и поиграть с ними самостоятельно.
Потому что это единственный способ научиться еще лучше.
Но это совсем не так. Нам еще многое предстоит обсудить о функциях и некоторых их интересных функциях.
Подробнее в последующих статьях. А пока продолжайте учиться.
Эта статья официально опубликована на В скобках.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
