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

JavaScript очень забавный, за исключением случаев, когда это не так.

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

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

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

Я узнал все это из исходников open source проектов (до node.js весь JavaScript-код не был открытым, не так ли?) и напишу здесь раз уж я выдумал это.

Хипстерский хак #1 — Вызов метода

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

// Скучно
if (success) {
  obj.start();
} else {
  obj.stop();
}

// В хипстерском духе
obj[success ? 'start' : 'stop']();

// Скучно

if (success) {

obj.start();

} else {

obj.stop();

}

// В хипстерском духе

obj[success ? 'start' : 'stop']();

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

Общеизвестный факт, что строки подобны другим строкам. Рано или поздно вам захочется объеденить две или более строки. Я не очень люблю оператор + для объеденения, так что на помощь приходит join().

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

['milk', 'coffee', 'sugar'].join(', '); // = 'milk, coffee, sugar'

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

['milk', 'coffee', 'sugar'].join(', '); // = 'milk, coffee, sugar'

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

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

// по-умолчанию 'No name' если myName пустой (или null, или undefined)
var name = myName || 'No name';

// убедимся, что есть опции объекта
var doStuff = function(options) {
  options = options || {};
  // ...
};

// по-умолчанию 'No name' если myName пустой (или null, или undefined)

var name = myName || 'No name';

// убедимся, что есть опции объекта

var doStuff = function(options) {

options = options || {};

// ...

};

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

Как и в случае с оператором по-умолчанию — этот тоже очень полезе. Он устраняет почти все вызовы If и делает код красивее.

// Скучно
if (isThisAwesome) {
  alert('yes'); // it's not
}

// Здорово
isThisAwesome && alert('yes');

// Также круто для защиты вашего кода
var aCoolFunction = undefined;
aCoolFunction && aCoolFunction(); // вызов функции не крашится

// Скучно

if (isThisAwesome) {

alert('yes'); // it's not

}

// Здорово

isThisAwesome && alert('yes');

// Также круто для защиты вашего кода

var aCoolFunction = undefined;

aCoolFunction && aCoolFunction(); // вызов функции не крашится

Хипстерский хак #5 — Синхронизация

Вы никогда не задумывалисть что быстрее: цикл с 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');
// output: testing_forward: 0.041ms

console.time('testing_backwards');
for (var i = a.length - 1; i >= 0; i--);
console.timeEnd('testing_backwards');
// output: testing_backwards: 0.030ms

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');

// output: testing_forward: 0.041ms

console.time('testing_backwards');

for (var i = a.length - 1; i >= 0; i--);

console.timeEnd('testing_backwards');

// output: testing_backwards: 0.030ms

Хипстерский хак #6 — Отладка

Я узнал об этом от одного Java разработчика. Такое мне даже в голову бы никода не пришло, но я использую это до сих пор.

var x = 1;
debugger; // исполнени кода остановится здесь
x++;

var x = Math.random(2);
if (x > 0.5) {
  debugger; // место остановки исполнения кода
}
x--;

var x = 1;

debugger; // исполнени кода остановится здесь

x++;

var x = Math.random(2);

if (x > 0.5) {

debugger; // место остановки исполнения кода

}

x--;

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

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

var deeplyNestedFunction = function() {
  var private_object = {
    year: '2013'
  };

  // Глобализуем для отладки:
  pub = private_object;
};

// Теперь в консоли (Chrome dev tools, firefox tools)
pub.year;

var deeplyNestedFunction = function() {

var private_object = {

year: '2013'

};

// Глобализуем для отладки:

pub = private_object;

};

// Теперь в консоли (Chrome dev tools, firefox tools)

pub.year;

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

Вы все еще объединяете строки с помощью оператора +? Есть лучший способ объеденить ваши предложения и данные. Он называется — шаблонизатор и вот микро-фремворк в 2.5 строки кода.

var firstName = 'Nikolay';
var screenName = 'PEKTOP'

// Уродство
'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);

var firstName = 'Nikolay';

var screenName = 'PEKTOP'

// Уродство

'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);

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

Пишите замечания, вопросы и советы в комментариях.

Оригинал поста на английском языке