JavaScript

Функции

В процессе создания кода, будут возникать ситуации, когда мы повторяем один и тот же код в разных местах. 

Например, у нас есть код, который обрабатывает форму захвата на сайте. По логике, нам нужно будет написать его для всех форм, которые есть. А если у нас их сто? или двести? Может быть сто раз скопировать код не будет проблемой, но что если вы захотите что-то изменить? Получается придется в каждом месте изменить кусок код на новый и так сто раз. Нужно найти, изменить и не запутаться где менял, а где нет. Сложновато....

Я думаю, уже понятно, что у меня есть для вас предложение, которое решит эту проблему раз и навсегда. Это решение называется - Функция. 

По сути, мы пишем кусок кода один раз и можем использовать его в любом месте, просто обратившись к нему. 

В течение урока мы напишем с вами функцию, которая будет складывать два числа. Давайте идти от простого к сложному и для начала просто напишем функцию, которая будет писать в консоли "Hello World!"

function hello_world(){
  console.log('Hello World!');
}

Пишем "function", далее имя нашей функции, чтобы мы могли к ней обращаться, потом идут скобочки (потом объясню для чего они) и в фигурных скобках пишем код, который мы хотим выполнить при вызове этой функции. 

Если мы сейчас напишем этот код на странице, то ничего не произойдет...Дело в том, что функцию надо вызвать. Это означает, что мы должны позвать эту функцию по ее имени и попросить выполнить код, который находится в теле функции (все, что находится между фигурных скобок называется телом функции).

Для того, чтобы вызвать функцию, надо написать имя функции и круглые скобки. 

hello_world();

Напишите этот код сразу после нашей функции и она запустится, вот так: 

function hello_world(){
  console.log('Hello World!');
}
hello_world();

Теперь вы можете в любом месте нашего кода, сколько угодно раз вызывать нашу функцию. Сейчас, конечно, она не несет большой пользы, но если вместо Hello World будет 1000 строк кода, то тогда будет гораздо проще написать одну строку, чтобы вызвать функцию, нежели копировать 1000 строк. 

Усложним нашу функцию и научимся передавать ей параметры. 

function write_text(text){
  console.log(text);
}
write_text('Hello World!');

В самой функции в круглых скобках мы пишем название переменной, которую мы можем использовать в теле функции. И эта переменная будет действовать только в рамках функции. За пределами функции эта переменная уже не будет существовать. А при вызове функции в круглых скобках мы пишем то, чему та переменная должна быть равна. 

То есть переменная перебегает вот по такой схеме: 

А теперь давайте передадим в функцию две переменные: 

function summ(a, b){
  console.log('a='+a);
  console.log('b='+b);
}
summ(5, 3);

Вот мы и приближаемся к тому, что написать функцию по сложению цифр) 

Получается, что в круглых скобках мы можем написать несколько переменных через запятую, а потом, при вызове функции, в том же порядке, написать значения этих переменных. 

А теперь, когда мы научились передавать несколько переменных, давайте сделаем с ними что-нибудь. 

function summ(a, b){
  var c=a+b;
  console.log(c);
}
summ(5, 3);

В функции создается новая переменная c, в ней сразу заносится сумма чисел a и b, а потом выводим значение в консоль. 

Но можно сделать еще интереснее: 

function summ(a, b){
  var c=a+b;
  return c;
}
var d=summ(5, 3);
console.log(d);

В конце добавился параметр return ( с англ. Вернуть ), который позволяет назначить самой функции, при вызове, какое-то значение. Получается, что, когда мы вызвали функцию, мы приравняли ее переменной d, а она будет равна именно тому, что мы пропишем в return. 

Опишу полностью логику что происходит: 

1. Мы создали переменную d и приравняли ей функцию summ
2. При вызове функции мы передали два значения:  5 и 3
3. Вызывается функция и переменным приравниваются значения. Теперь a=5,  а b=3, которые доступны только в теле функции. 
4. Создается переменная c и ей приравнивается значение суммы a и b, то есть 8. 
5. Значение c возвращается как результат работы этой функции и приравнивается переменной d. 
6. Выводим в консоль значение переменной d. 

Надеюсь, что все понятно. А если не понятно, то читайте статью заново и пробуйте писать свой код и свои функции. Если не разберетесь с этой темой, то дальше будет сложно, так как функции встречаются повсеместно и если их понять, то они становятся лучшими друзьями на все времени и постоянно выручают в процессе написания большого кода, где есть много повторений одного и того же кода.