Несколько JavaScript хаков для хипстеров

JavaScript забавный язык программирования, ну, кроме некоторых случаев.

Постоянные опасения ошибок времени выполнения заставляют нас думать постоянно. Мы программируем все лучше и лучше — так как постоянно приходится выполнять код в уме, другого способа нет.

Вот почему важно, чтобы код был аккуратный. Маленький код, изящный. Такой, в который можно влюбиться. В противном случае, JavaScript может и отпугнуть.

Я подобрал для вас несколько забавных сниппетов, которые радуют меня самого, и которые я сам использую вместо скучного кода, занимающего много места. Некоторые из них делают код короче, другие четче и яснее. Еще парочка — это хаки для отладки.

Все это я узнал, изучая проекты с исходным кодом, но здесь я пишу так, как будто бы — это я их придумал.

Хипстерский хак #1 — вызов функций

Я в самом деле ненавижу блок if/else, избавиться от него нам поможет полезный трюк, позволяющий делать вызов функций основанный на булевом значении.

// Скучно if (success) {   obj.start(); } else {   obj.stop(); }   // По хипстерски var method = (success ? 'start' : 'stop'); obj[method](); 

Хипстерский хак #2 — соединение строк

Известный факт — строки дружат с другими строками. Рано или поздно вам понадобится сделать конкатенацию нескольких из них. Мне не особо нравится пользоваться "+", поэтому на помощь приходит join:

['first', 'name'].join(' '); // = 'first name';   ['milk', 'coffee', 'suger'].join(', '); // = 'milk, coffee, suger' 

Хипстерский хак #3 — оператор «по умолчанию» ||

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

// возвращает  'No name' когда myName пусто (null или undefined) var name = myName || 'No name';     // либо options нам передано, либо инициализируем его пустым объектом var doStuff = function(options) {   options = options || {};   // ... }; 

Хипстерский хак #4 — охранный оператор &&

Подобно оператору «по умолчанию», он необычайно полезен. Он позволяет избавиться практически от всех IF и делает код намного приятней.

// Скучно if (isThisAwesome) {   alert('yes'); // it's not }   // Прикольно isThisAwesome && alert('yes');   // Так же полезно для подстраховки var aCoolFunction = undefined; aCoolFunction && aCoolFunction(); // не запустится, но и не вылетит с ошибкой 

Хипстерский хак #5 — оператор XXX

Этот оператор полностью подпадает под закон о копирайте. Когда я пишу код и мне зачем-то нужно выйти в веб или отредактировать другой кусок кода, я добавляю строку с оператором xxx. Код в этом месте полюбому прервется и можно будет доделать начатое позже. Строка xxx отлично ищется, так как в обычном коде не встречается, ну и вообще не нужно заморачиваться с комментарием в TODO.

var z = 15; doSomeMath(z, 10); xxx // Отличный оператор. Я единственный, кто его использует вместо TODO doSomeMoreMath(z, 15); 

Хипстерский хак #6 — замер времени

Вам интересно узнать, что быстрее: цикл с i++ или с i—. Мне лично нет. Те кому интересно могут воспользоваться выводом результатов замера времени в консоль. Это бывает полезно, если надо узнать скорость выполнения операций, блокирующих событийный цикл.

var a = [1,2,3,4,5,6,7,8,9,10];   console.time('testing_forward'); for (var i = 0; i < a.length; i++); console.timeEnd('testing_forward'); // вывод: testing_forward: 0.041ms   console.time('testing_backwards'); for (var i = a.length - 1; i >= 0; i--); console.timeEnd('testing_backwards'); // вывод: testing_backwards: 0.030ms  

Хипстерский хак #7 — отладка

Этот трюк я узнал от одного Java-разработчика. Абсолютно не представляю почему он о нем знал, а я нет. Но, как бы то ни было, с тех пор я им пользуюсь постоянно. Просто вводишь debugger в код и отладчик остановится на этой строке.

var x = 1; debugger; // Здесь мы остановимся x++;     var x = Math.random(2); if (x > 0.5) {   debugger; // Условная точка останова... } x--; 

Хипстерский хак #8 — отладка старой школы

Мне всегда больше нравилось выводить значения переменных в некоторых местах кода, вместо построчной отладки. Если вы похожи на меня, вам может потребоваться вынести некоторые приватные переменные в глобальную область видимости. Главное не забудьте подчистить код, перед передачей в продакшин.

var deeplyNestedFunction = function() {   var private_object = {     year: '2013'   };      // Делаем глобальной для отладки:   pub = private_object; };   // Теперь в консоли вбиваем (Chrome dev tools, firefox tools, и т.д.) pub.year; 

Хипстерский хак #8 — ультра-легкий шаблонизатор

Вы все еще используете "+" для конкотенации строк. Есть лучший способ соединить строки с данными. Он называется шаблонизация, и вот вам отличный фреймворк в 2,5 строки кода.

var firstName = 'Tal'; var screenName = 'ketacode'   // Уродский способ 'Hi, my name is ' + firstName + ' and my twitter screen name is @' + screenName;   // Пацанский var template = 'Hi, my name is {first-name} and my twitter screen name is @{screen-name}'; var txt = template.replace('{first-name}', firstName)                   .replace('{screen-name}', screenName); 

Вы все это уже знали?

И даже придуманный мной лично оператор XXX? Да вы просто реальный хипстерский мегахакер!