http://habrahabr.ru/post/240357/
Существует несколько
JavaScript-хаков, которыми постоянно пользуются опытные программисты. Они не совсем очевидны, особенно для новичков. Эти хаки используют возможности языка, имеющие некоторые побочные эффекты. В этой статье я объясню, как работают 5 таких распространённых хаков.
Использование оператора !!
для конвертации в логическое значение
Всё в JavaScript может быть интерпретировано как
истинное или
ложное. Это означает, что если вы поместите объект в условный оператор
if
, то он выполнит либо
true
-ветку кода (когда объект имеет значение
true
), либо выполнит
false
-ветку (соответственно, когда объект имеет значение
false
).
0, false, "", null, undefined, NaN — это ложные значения. Все остальные значения возвращают
true
. Иногда вам может потребоваться конвертировать переменную в логическое значение. Это можно сделать с помощью оператора
!!
:
var something = 'variable';
!!something // returns true
С другой стороны, вместо
if (x == "test")
можно просто написать
if (x)
. Если же
x
будет пустой переменной, то просто выполнится код из блока
else
.
Конвертация строки в число с помощью оператора +
В JavaScript
+
— это унарный оператор, который возвращает числовое представление операнда или
NaN
, если операнд не имеет такового. Например, с помощью этого оператора можно проверить, является ли переменная
x
числом (такой код можно увидеть в библиотеке
underscore):
x === +x
.
Такой способ не очевиден. Скорее всего, вы бы применили методы
parseFloat
и
parseInt
.
Определение значения по умолчанию с оператором ||
В JavaScript
||
является примером выполнения
короткого замыкания. Этот оператор сперва анализирует выражение слева от него, и, если оно ложно, анализирует выражение справа. В любом случае, он возвращает первое истинное выражение. Рассмотрим следующий пример:
function setAge(age) {
this.age = age || 10
}
setAge();
В этом примере мы вызываем функцию
setAge()
без аргументов, таким образом
age || 10
вернет 10 (
!!age == false
). Такой способ весьма хорош для того, чтобы задавать значения переменных по умолчанию. На самом деле, такой подход эквивалентен следующему примеру:
var x;
if (age) {
this.age = age;
} else {
this.age = 10;
}
Первый пример с оператором
||
более лаконичен, поэтому именно такой способ используется во всем мире.
Лично я часто использую этот способ. Мне нравится его лаконичность и простота. Однако стоит заметить, что с таким способом вам не удастся задать переменной значение 0, так как 0 является ложным выражением. Поэтому я советую при необходимости использовать такой способ:
this.age = (typeof age !== "undefined") ? age : 10;
Использование void 0 вместо undefined
Ключевое слово
void
принимает один аргумент и всегда возвращает
undefined
. Почему просто не использовать
undefined
? Потому что в некоторых браузерах
undefined
— это просто переменная, которая может быть переопределена. Поэтому
void 0
даёт нам больше уверенности в том, что ничего не будет случайно сломано. Хотя вы можете найти этот хак в исходниках многих библиотек, я бы не рекомендовал использовать его регулярно, так как все
ES5-совместимые браузеры не позволяют перезаписывать значение
undefined
.
Инкапсуляция с помощью паттерна (function() {...})()
В ES5 есть только 2 типа областей видимости: глобальная область видимости и область видимости функции. Всё, что вы пишите, принадлежит к глобальной области, которая доступна из любого места кода. Она включает в себя объявление переменных и функций. Однако, что если вы захотите инкапсулировать большинство кода, а в глобальной области видимости оставить только интерфейс? Тогда вам следует использовать анонимную функцию. Рассмотрим следующий пример:
(function() {
function div(a, b) {
return a / b;
}
function divBy5(x) {
return div(x, 5);
}
window.divBy5 = divBy5;
})()
div // => undefined
divBy5(10); // => 2
Из всех перечисленных в статье хаков этот хак является самым безвредным; вы можете и должны использовать его в своих проектах, чтобы предотвратить взаимодействие внутренней логики с глобальной областью видимости.
В заключение я хотел бы напомнить вам, что любой написанный вами код должен быть прост и понятен для других программистов. И любые стандартные конструкции, предоставляемые языком, следует использовать в первую очередь.
Некоторые из хаков, рассмотренных в статье, могут быть решены элегантнее с помощью ES6 (следующая версия JavaScript). Например, в ES6 вместо
age = age || 10
можно написать следующее:
function(age = 10) {
// ...
}
Другой пример — паттерн
(function() {...})()
, который вы уже вряд ли станете использовать после того, как
модули ES6 станут поддерживаться современными браузерами.
Дополнительные материалы
Если вы хотите погрузиться в тему
JS-хаков ещё глубже, вам могут пригодиться следующие ресурсы:
Оригинал статьи:
JavaScript hacks explained
Автор статьи: Yanis T