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

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

В прошлом уроке мы с Вами начали знакомится с другими возможными операциями между переменными, а так же познакомились с логикой неявного преобразования типов во время этих операций. Начали мы свое знакомство с операции Конкатенации, операции **Increment (Увеличения) и операции Decrement (Уменьшение).

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

УРОК 11. Другие возможные взаимодействия между переменными. Часть II.

Логическое взаимодействие между переменными.

Логические операции между переменными широко распространен в практике программирования. Мы попросту не могли убрать их из поля своего зрения, ибо это было бы большим упущением. Логические операции представлены тремя основными операндами:

1. AND кодовый аналог && - логическое И.
2. OR кодовый аналог || - логическое ИЛИ.
3. NOT кодовый аналог ! - логическое НЕ.

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

---

NOT кодовый аналог ! - логическое НЕ.

Добавим этот операнд в наш core.js файл:

var a = 1;
var b = 'привет';
var c = false;
var d = null;
var e = undefined;

/* применим к переменным логический операнд NOT(!) */

alert(!a);
alert(!b);
alert(!c);
alert(!d);
alert(!e);

Мы создали пять переменных разного типа, добавили комментарий, а затем применили к каждой из переменных логический операнд NOT(!) внутри конструкций alert();. Видите восклицательный знак перед каждой переменной? Это и есть он - логическое НЕ.

Если применить русский аналог операнда, то запись вида alert(!a); можно воспринимать, как - "выведи сообщение с НЕ 'a'", а запись вида alert(!b); - "выведи сообщение с НЕ 'b'" и т.д.

Прежде чем выполнить код в браузере и посмотреть, что же выведут нам сообщения - разберем этот код самостоятельно. Операнд NOT (!) это логическое преобразование текущего значения в противоположное. Я уже упомянул что операции такого рода производятся с переменными булевского типа. Из предыдущих уроков мы знаем, что переменные этого типа могут иметь всего два значения true и false, истина и ложь соответственно. Эти значения взаимоисключающие, то есть противоположные. Таким образом оператор NOT (!) примененный к значению "true" вернет "false", и наоборот - примените этого операнда к значению "false" вернет "true".

Давайте взглянем на код, приведенный выше. Из всех переменных, только переменная var c = false; не будет требовать от JavaScript неявного приведения к булевскому типа, потому что она уже имеет этот тип. Исходя из информации о том как работает NOT(!) мы смело можем сделать вывод, что конструкция alert(!c); выведет "true", так как операнд сменит текущее значение "false" на противоположное. А противоположным для лжи может быть только истина, то есть "true".

Для всех остальных переменных JavaScript сначала применит неявное преобразование и только после этого применит сам операнд NOT (!)

Переменная a имеет тип Number. Обратимся к нашей ассоциации, где true ассоциируется с 1, а false - с 0. Преобразование переменной числового типа в тип булевский при использовании операнда NOT (!) происходит по этой же ассоциации, с небольшим дополнением - любая цифра не равная нулю, будет ассоциироваться с истиной (true).

Таким образом var a = 1; JavaScript cначала преобразует в true. А уже применение к нему операнда NOT изменить эту истину на противоположную ей - ложь. То есть alert(!a); выведет нам false.

Переменная b имеет тип String. В работе с логическими операндами JavaScript преобразует переменные строкового типа, также руководствуясь ассоциацией. Эта ассоциация проста:

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

Если брать за пример нашу переменную b, мы видим в ее значении строку с набором кириллических символов 'привет'. Значит согласно нашей ассоциации, JavaScript преобразует такую строку в логический тип "true". Если бы переменная запись с переменной b выглядела как var b = '';, то есть как бы "пустая" строка. Строка без символов внутри. Она была бы преобразована JavaScript'ом как ложь.

Возвращаясь к результатам: var b = 'привет'; сначала будет преобразована JavaScript'ом в true, а значит конструкция alert(!a); выводит нам false.

Переменная d имеет специфическое значение Null. Из прошлых уроков мы помним, что Null ассоциируется с нулем (0). А уже сам 0 ассоциируется с false - ложью. Таким образом запись var d = null; сначала будет неявно преобразована в false, а уже конструкция alert(!d); сменит это значение на противоположное и выведет нам true.

Оставшаяся переменная e имеет специфическое значение undefined. Опять же из предыдущих уроков мы знаем, что undefined это что-то неясное, неопределенное, неизвестное. Такие категории в JavaScript'e, при попытке перевести их в логический тип, ассоциируются с false (ложью).
Таким образом запись var e = undefined; начала будет преобразована в булевский false, а уже затем
alert(!e); где применяется операнд NOT (!) сменит false на противоположный true. И выведет нам сообщение именно с этим значением.

В итоге после разъяснений, в браузере мы должны будем получить сообщения со значениями: false, false, true, true, true. Давайте проверим:

Как мы видим. Наши выводы верны. Идем дальше.

---

OR кодовый аналог || - логическое ИЛИ.

Этот операнд может показаться несколько сложнее, чем предыдущий. Однако работа этого операнда включает в себя всё тот же уже знакомый нам процесс неявного преобразования типов к типу Boolean и алгоритм:

Операнд OR (||) исполняется слева направо и прекращает свое выполнение сразу как только найдет значение, которое сможет преобразовать в true.

Рассмотрим на примере:

var a = 1;
var b = 'привет';
var c = false;
var d = null;
var e = undefined;

/* применим к переменным логический операнд OR(||) */

alert(a || c);
alert(d || e || b);
alert(b || a);

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

Начнем с конструкции alert(a || c);. Для лучшего восприятия подставим вместо названий переменных их значения alert(1 || false);. Для еще более лучшего восприятия представим запись в виде уже преобразованной JavaScript'ом alert(true || false);. То есть сама запись как бы дает нам выбор: true ИЛИ false - истина ИЛИ ложь. И вот уже на этом этапе мы должны применить алгоритм

Операнд OR (||) исполняется слева направо и прекращает свое выполнение сразу как только найдет значение, которое сможет преобразовать в true.

Согласно алгоритму, начинаем двигаться слева и хлоп! Сразу же натыкаемся на значение true. То есть уже на переменной a операнд OR (||) прекратит свое выполнение поэтому конструкция
alert(a || c); выведет нам значение переменной a, которое равно 1.

Вычисление результата для конструкции alert(d || e || b); будет развиваться по тем же законам. Мы с вами можем для лучшего восприятия мысленно преобразовать эту запись в запись со значениями - alert(null || undefined || 'привет');. JavaScript своим неявным преобразованием переведет запись в alert(false || false || true);. B с помощью алгоритма мы начинаем двигаться слева направо и видим false - идем дальше -> false - идем дальше -> true - прекращаем работу, возвращаем результат. Таким образом в записи alert(d || e || b); операнд OR (||) остановится на переменной b и выдаст нам ее значение равное 'привет'.

И наконец, конструкция alert(b || a); Не смотря на что будет в своем итоговом преобразовании иметь вид alert(true || true); также будет верна исполнению нашего алгоритма, и наткнувшись на истину в первой же переменной, вернет ее значение. То есть эта замечательная конструкция alert(b || a); вернет нам значение переменой b - 'привет'.

В итоге мы должны получить три сообщения со значениями: 1, "привет" и "привет".

Давайте проверим в браузере:

Все правильно. Код исполняется так, как мы и задумывали.

---

AND кодовый аналог && - логическое И.

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

Пока же об операнде AND (&&) Нам стоит знать три основных момента:

1. Так же, как и его собратья он исполняется слева направо.
2. Если на пути своего исполнения он столкнется со значением, которое можно интерпретировать как false - операнд прекратит свою работу и вернет это значение.
3. Если на пути своего исполнения он столкнется со значением, которое можно интерпретировать как true - операнд пустит его и перейдет к следующему значению справа от предыдущего. В случае когда значения всех участников операции с операндом AND (&&) могут интерпретироваться как true, операнд пройдет всю цепочку до самого конца, и вернет последнее значение.

Проверим на практике:

var a = 1;
var b = 'привет';
var c = false;
var d = null;
var e = undefined;
var f = true;

/* применим к переменным логический операнд AND(&&) */

alert(a && c);
alert(b && a && f);
alert(b && f && e);

Мы будем использовать те же переменные что и в двух примерах выше. Смысл тот же самый - избежать повторного разъяснения о неявном преобразовании типов в Boolean, когда это необходимо. Добавляли новую переменную f. Но отдельного рассмотрения она не требует, ибо неявного преобразования в данном случае с ней происходить не будет - она и так имеет логический тип.

Рассмотрим первую запись alert(a && c);. Мысленно мы можем преобразовать ее в alert(1 && false);. JavaScript в своею очередь неявно преобразует ее в alert(true && false);. Вооружимся тремя моментами работы операнда AND (&&) и постараемся разобраться в результате такой записи.

Сначала операнд столкнется со значением true. Согласно моменту №3 а именно этой его части:

...Если на пути своего исполнения он столкнется со значением которое можно интерпретировать как true - операнд пустит его и перейдет к следующему значению справа от предыдущего...

Значит, операнд пойдет дальше, где он столкнется со значением false. Тут мы уже воспльзуемся моментом №2:

Если на пути своего исполнения он столкнется со значением, которое можно интерпретировать как false - операнд прекратит свою работу и вернет это значение.

Вывод: результатом в сообщении выведенном с помощью конструкции alert(a && c); будет значение переменной c - false.

Следуя этой же логике получаем следующие шаги для записи alert(d && a && f); -> alert('привет' && 1 && true); -> alert(true && true && true);. Эта цепочка полностью соответствует моменту №3, согласно которому, результатом выполнения такой операции станет последнее "правдивое" значение, то есть значение переменной f равное true.

Вывод: результатом в сообщении выведенном с помощью конструкции alert(d && a && f); будет значение переменной f - true.

Для записи alert(b && f && e);. Цепочка преобразования удет выглядеть как alert('привет' && true && undefined); -> alert(true && true && false);, в которой два раза сработает момент №3 и закончится на третьей переменной, потому как попадет под условия момента №2.

Вывод: результатом в сообщении выведенном с помощью конструкции alert(b && f && e); будет значение переменной e - undefined.

Итог:

Мы должны получить три сообщения со значениями: false, true и undefined.

Проверим в браузере:

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

А на сегодня все

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

1. Урок 1.
2. Урок 2.
3. Урок 3.
4. Урок 4.
5. Урок 5.
6. Урок 6.
7. Урок 7.
8. Урок 8.
9. Урок 9.
10. Урок 10.