Стать программистом. Часть 21. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

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

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

Давайте начинать.

Урок 21. Функции, Часть IV. Аргументы.

Для нашего курса (курса для новичков) условно, сущности, которые мы можем предавать в аргументы функции можно поделить на группы:

1. Переменные
2. Операции взаимодействия между переменными
3. Вызов Функции и сами функции.

Давайте разберем все группы подробнее.

Переменные.

Эта группа одна из самых простых для понимания. Здесь все предельно ясно - любые переменные, в том числе и сложносоставные, допустимые в JavaScript'e могут быть переданы функции в роли аргумента. Пример:

var  a = 'привет, голос!'; // String
var  b = 22; // Number
var  c = false; // Boolean
var  d = undefined; // Undefined
var  e = null; // Null
var  f = [1, 2, 3, 4]; // Array(Object)

function plusMessage(arg_1, arg_2) {
    alert(arg_1 + arg_2);
}

plusMessage(a, b);
plusMessage(a, c);
plusMessage(a, d);
plusMessage(a, e);
plusMessage(a, f);

В начале этого примера мы создали переменные со всеми известными нам с Вами на текущий момент типами. Простая функция plusMessage принимает два аргумента и старается произвести операцию сложения между ними. Обратите внимание на вызовы этой функции на строчках №12-№16. Первым аргументом в этих вызовах всегда стоит переменная а c типом String и значением "привет, голос!". Другими словами, результатом которые мы будем видеть в сообщениях будет результат сложения строки с переменной другого типа. Как именно формируется такой результат мы рассматривали с Вами одном из прошлых уроков. Но сейчас нам важен не результат, как таковой, а то что мы можем передать в аргументы функции абсолютно любую переменную, с абсолютно любым типом и это допустимо. Результат выполнения:

Обратите внимание. Все вызовы функции отработали, и вкладка Console при этом осталась чистой, без сообщения об ошибках.

Операции взаимодействия между переменными.

Операции взаимодействия между переменными тоже могут быть переданы в аргумент функции. Тут надо понимать, что когда функция ожидает 1 аргумент, а вместо него получает запись с операцией между несколькими переменными, то сначала будет произведена эта операция, а вот уже ее результат займет место аргумент и будет использоваться самой функцией. Сам операции взаимодействия мы также разбирали в прошлых уроках. Вот основные из них:

Арифметические операции (сложение (a + b), вычитание (a - b), умножение (a * b) и т.д.)

var  a = 12; // Number
var  b = 22; // Number

function message(text) {
    alert(text);
}

message(a+b);

Обратите внимание, функция message ожидает принять один аргумент. Но при вызове мы ей передаем арифметическую операцию message(a+b);. В это ситуации сначала будет выполнена операция сложения, а уже результат этой операции функция message возьмет как аргумент и выведит с ним сообщение:

Операции присваивания (присваивание со сложением (a += 1), присваивание с вычитанием (a -= 1), инкремент (a++) и т.д.)

var  a = 12; // Number

function message(text) {
    alert(text);
}

message(a+=1);

В этом примере мы в вызове функции message(a+=1); как аргумент передали операцию присваивания со сложением. Логика работы будет такой же, как и в предыдущем примере. Сначала будет произведена операции присваивания, а уже потом, будет выведено сообщение с результатом:

При этом есть важный момент, так как мы использовали операцию присваивания (не важно, что в виде аргумента) то значение самой переменой a после вызова message уже будет 13. То есть оно отработало не только для функции, но и для переменной.

Операции сравнения (больше (a > b), меньше (a < b), неравно (a != b) и т.д.)

var a = 12; // Number
var b = 11; // Number   

function message(text) {
    alert(text);
}

message(a < b);

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

Логические операции (логическое "И (AND)" (a && b), логическое "ИЛИ (OR)" (a || b) и т.д.)

var a = 12; // Number
var b = 11; // Number   

function message(text) {
    alert(text);
}

message(a && b);

И наконец, в этом примере мы видим логическую операцию "И (AND)" вместо аргумента. Из прошлого урока мы знаем, что результатом работы a && b -> 12 && 11 будет 11. Именно это значение и будет воспринято функцией как окончательный аргумент. Проверим:

Вызов Функции и сами функции.

Вызов функции может выступать аргументом только случае использования оператора return в теле такой функции. В прошлом уроке мы рассмотрели несколько таких примеров. Приведем один из них:

var a = 12; // Number
var b = 11; // Number

function sum (arg_1, arg_2) {
    return arg_1 + arg_2;
}   

function message(text) {
    alert(text);
}

message(sum(a, b));

В данном примере в роли аргумента для функции message выступает вызов функции sum. Сама функция sum использует оператор return. Это значит, что на место вызова функции sum "вернется" результат операции arg_1 + arg_2, расположенной в её теле. То есть по сути, запись вида message(sum(a, b)); можно интерпретировать как message(sum(12, 11)); и окончательно - как message(23);. Соответственно результат будет:

Ну и теперь самое интересное. JavaScript позволяет передавать сами функции как аргументы для других функций. Давайте рассмотрим на практике:

var a = 12; // Number
var b = 11; // Number

function sum (arg_1, arg_2) {
    return arg_1 + arg_2;
}   

function message(arg_1, arg_2, function_1) {

    alert(function_1(arg_1, arg_2));
}

message(a, b, sum);

Давайте разбираться. Функция sum осталась без изменений. Основное преобразование пережила фнукция message. Обратите внимание, теперь она принимает ТРИ параметра. При этом последний я назвал function_1 для того чтобы логически подчеркнуть, что на его место будет ожидаться именно функция (подчеркиваю: не вызов функции, а сама функция). Смотрим на вызов message(a, b, sum); на строке №13. Двумя первыми параметрами мы передали цифры, а третьим параметром - функцию sum. То есть запись может интерпретироваться как message(12, 11, sum);. После этого вызова в работу вступает тело функции message alert(function_1(arg_1, arg_2)); и если мы в эту запись подставим значения из вызова то получим alert(sum(12, 11));. Ну а как отработает эта запись мы уже знаем - на место вызова sum(12, 11) вернется 23, так как sum использует оператор return.
 
А на сегодня все.

Ссылки на предыдущие уроки:

(function () {
Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13, Урок 14, Урок 15, Урок 16, Урок 17, Урок 18, Урок 19, Урок 20 })();