[Из песочницы] 5 популярных JavaScript-хаков
Существует несколько 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
