[Перевод] Несколько 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? Да вы просто реальный хипстерский мегахакер!

От переводчика: а вам есть что добавить?

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.