Главная

5 популярных JavaScript-хаков

2014-10-14 в 11:38, admin, рубрики: javascript, JS, Программирование

Существует несколько 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 станут поддерживаться современными браузерами.