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

[@Aquahawk]

У меня есть чем добить. Чтобы больше эти пальцы клавиатуру не оскверняли:)

[@paulll]

Когда я лишь начинал программировать на javascript'e, я отлаживал код самым бредовым способом — функцией alert().
К моменту прочтения этого поста я знал все перечисленные хаки. Только вместо "xxx" писал "_end" или что-нибудь в этом роде.

[@TheShock]

А надо было писать "debugger;".

[@paulll]

Я тогда лишь начинал программировать…

[@VitaZheltyakov]

Статья засчитана. Несмотря на мои хорошие знания JS, всё так один пункт не знал. И это не оператор «xxx» (я лично использую пометку "//!!!" для обозначения мест, к которым надо вернуться).

[@Agent_J]

Чем этот способ лучше "// todo"

[@VitaZheltyakov]

По сути ничем, просто "//!!!" проще набирать на клавиатуре.

[@Agent_J]

Зато IDE показывает все TODO со структурой файлов и возможностью фильтровать. Можно и свой патерн добавить (типа тех же !!!), но я не вижу в этом какого-либо смысла. Опять же, ваши восклицательные знаки приведут в замешательство того, кому достанется ваш код.

[@VitaZheltyakov]

Во-первых, я использую в основном редакторы кода, а не IDE.

Во-вторых, я чётко разделяю какие заметки попадают в комментарии кода (которые я исправлю в ближайшее время) и какие в журнал багов или будущих разработок. Поэтому проблем в этом плане не возникает.

В-третьих, потери функциональности от "//!!!" практически никакой — поиск его всегда найдёт.

[@Agent_J]

Просто из любопытства, а почему вы не используете IDE? Они существенно облегчают жизнь и ускоряют разработку.

[@webinside]

Тоже с незапамятных времен пользуюсь редактором. Несколько раз пытался перейти на разные IDE и возвращался.

[@VitaZheltyakov]

Во-первых, в редакторах кода нет ничего лишнего.
Во-вторых, в редакторах кода есть много нужных фишек, которых нет в IDE.

По сути современные редакторы кода мало чем отличаются от IDE.

[@Agent_J]

Вы меня сейчас удивили. Это какие фичи есть в редакторах, которые отсутствую в хорошей IDE?
И что у вас за редактор такой, который мало отличается от IDE, а значит поддерживает навигацию по коду, отладку приложения, инспекцию кода, интеграцию с VCS, встроенную документацию ЯП/библиотеки, автокомплит с учётом версии ЯП, диплоймент и многие другие вещи, которые могут быть специфичны для разных ЯП, вроде валидации и поддержки фреймворков.

[@frog]

Поддержу предыдущего оратора (в плане приверженности к простым редакторам).
Дело в том, что если проект не очень большой и нет первоочередной цели с огромной скоростью генерировать код, многие фичи просто не нужны. Некоторое время назад я (после долгого сидения на EditPlus) попробовал WebStorm, он мне сначала понравился и я его даже купил. Теперь вот думаю переходить обратно. Устал бороться с искусственным интеллектом, кучей каких-то окон и уведомлений, непонятно зачем и когда появляющихся и меняющих размеры и расположение по всяким хитрым закономерностям. В настройках можно полдня искать нужную опцию просто потому, что их там огромное количество. Ряд элементарных примитивных вещей сделаны с избыточностью, которая усложняет работу.

[@Agent_J]

Зачем с ним бороться, если он помогает? Вы же не хотите назло гадкому ИИ писать говнокод?
О каких непонятных окнах вы говорите? Ни разу не видел, чтобы какое-то окно самопроизвольно выскакивало и меняло положение. Всё находится там, куда я его прикрепил. Всё появляется тогда, когда я совершаю соответствующее действие.
Поиск нужных опций в настройках WebStorm вообще невероятно удобен: просто нажмите Ctrl+Alt+S, начните вбивать «notifications» и вы увидете все эти надоедливые уведомления, которые можно просто выключить, раз они вам мешают.
Вбейте в поиск другую нужную вам опцию и меню настроек сократится, оставив лишь необходимое и подсветив относящиеся к запросу настройки:



Конечно всё сводится к размерам проекта, если у вас три функции на два файла, так вам и блокнота хватит.
Я, в общем, тоже использую Notepad++ если надо быстренько отрыть файл вне текущего проекта и что-то пофиксить. Но вести разработку хоть мало-мальски сложного проекта без IDE это просто ужас.

[@frog]

Про отключение AI — я уже оботключался весь. И всё равно отдельные вещи продолжают происходить не в тему (это не только notification'ов касается — я про AI вообще. Включая расстановку кавычек, зависимость поведения от типа файла и т.п.) А ведь хотелось бы ещё не полностью лишить его разума, а хоть какое-то примитивное форматирование оставить.
И я в курсе про поиск в настройках. Но чтобы пользоваться поиском, надо знать по каким конкретно словам искать и как именно найденная настройка сработает. Это очевидно только в очень ограниченном количестве случаев.
Про закономерности с окнами сейчас не могу привести конкретного примера, но в основном это было связано с нижней панелью с File Transfer/Event log и пр. И там какие-то разовые сообщения об ошибках (с фтп ) временами болтаются и мозолят глаз, несмотря на то, что после этого было уже 100 успешных upload'ов.
На самом деле я же не пытаюсь никого переубедить. Просто говорю что вот да — есть причины пользоваться простыми редакторами.

[@zxcabs]

Короче вы просто не осилили WebStorm.
Сам более двух лет сидел на обычных редакторах, но после перехода на WebStrom мир стал лучше.

[@VitaZheltyakov]

Я тоже удивился…

Я использую RJ TextEdit в нём есть навигация по коду, отладка приложения, автокомплит с учётом версии ЯП, диплоймент, валидация и поддержка фреймворка. То есть из перечисленного Вами, нет инспекции кода, интеграции с VCS и встроенной документации по ЯП. Но зато есть редактирование столбцом, маппинг, автоформатирование файла.

[@Agent_J]

Пруф пожалуйста.
Я сейчас не утверждаю, возможно просто не нашёл где это всё включается, но я установил RJ TextEdit и
1) Навигации по коду практически нет (к определению функции/метода могу попасть, а к определению переменной/класса/статичного метода/константы нет, о наследовании ничего не знает)
2) Отладки нет
3) Автокомплит бесполезный (не знает что такое пространство имён, не работает для ключевых слов языка, не работает для вызова констант, статичных свойств и методов класса). О наследовании ничего не знает. О DOC Comments ничего не знает. Не нашёл, где указать версию PHP. Пишу «array_d», жму Ctrl+Пробел, выбираю «array_diff()», на выходе получаю «arraarray_diff()»
4) Диплоймент это просто FTP доступ.
5) Не нашёл ни слова об интеграции с каким-либо фреймворком.

Проверял на PHP коде, для JS из коробки вообще ничего не работает кроме подсветки кода.

[@aplic]

Установил WebStorm, пытаюсь периодически перейти на него.
1. Настроить цветовую схему и оформление как в VS так и не смог, запутался в хитросплетениях.
2. Автокомплит бесполезен, ничего толком не видит, а хинты прописывать мне это надо?
3. Тормозищще, фризы, хотя и памяти и процессор мощный.
4. Навигация по коду такая что лучше без нее.
5. Какой-то спец-функционал раз в год нужен, для отладки IDE не нужен, деплой давно уже без IDE автоматический.
6. Единственная функция, которую сумел использовать, это глобальные замены в коде проекта, а вот рефакторинг уже не умеет.

Я конечно понимаю, что в идеале IDE было бы удобнее, но такие IDE как сейчас писанные на яве это ничуть не лучше чем простой текстовый редактор.

[@Agent_J]

Очень толсто, но я отвечу.
Я пользуюсь PhpStorm, по сути то же самое что WebStorm
1) Равносильно утверждению «C++ плохой язык — я не смог освоить, запутался в хитросплетениях»
2) Автокомплит всё чётко видит, кроме случаев, где вам надо дополнить то, что будет определено только во время выполнения скрипта.
3) У меня открыт проект на Symfony2 (это должно намекать на размер проекта). Комп не самый крутой: Win7 x86, Core i5 3.3GHz, RAM 2.98 ГБ
Притормаживает только при индексации проекта. Фризы бывают, но короткие и крайне редко
4) Очень обоснованное заявление
5) Для отладки JS на клиенте IDE не нужна, а вот для сервера очень даже нужна. Про диплой соглашусь, тут всё индивидуально.
6) Что умеет ваш текстовый редактор для рефакторинга? Разве что бездумно Найти/Заменить

[@demiazz]

1) он действительно плохой
2) простите, но индексацию по файлу умеет и Sublime из коробки, или просто прикручивается ctags к тому же vim'у. Автокомплит — это годная штука только тогда, когда у нас статически типизированный компилируемый язык, или язык, который на основе статического анализа позволяет вывести тип переменной. В любом другом случае — это индексация, и ни разу не крутая фича IDE;
3) у меня Fedora 19, Core i3 2.4, RAM 8Гб — тормозит безбожно, хотя проекты над которыми работают жрут не меньше ресурсов, написаны на языке более медленном, но при этом работают на ура (проекты здоровые, написаны на Ruby и Rails);
4) дело вкуса, но тот же саблайм умеет навигацию не хуже, чем любая IDE;
5) Для дебага не обязательно иметь под рукой тяжеленную IDE, ради интеграции отладчика с этой самой IDE, где можно поелозить мышкой по вкладочкам;
6) Как было сказано для пункта 2 — определить тип переменной в динамическом языке на основе статического анализа кода практически невозможно, а значит и весь рефакторинг в большинстве случаев сводится к обычному бездумному Найти/Заменить. Без ручного контроля не обойтись, а иногда только руками и возможно

Так скажите, зачем мне IDE, если я вполне комфортно живу без нее, и моя продуктивность не снижается от этого?

[@Agent_J]

1) Не о языке разговор. Вместо C++ подставьте ваш любимый. Говорить, что что-либо плохое только потому, что я не смог разобраться — как минимум глупо. Тем более что настройка цветовой схемы не требует семи пядей во лбу
2) При чём тут индексация по файлу? Я говорю про корректный автокомплит в проекте. Вот вам пример. Сверху PhpStorm, снизу Sublime 2

Содержание Cities.php

<?php

namespace App\Models;

class Cities
{
    public function setTitle()
    {
        return $this;
    }
    
    public function save()
    {
        return $this;
    }
    
    public static function getModelName()
    {
        return '';
    }
}

4) Как это может быть делом вкуса? Навигация либо работает, либо нет. В IDE клик по переменной/методу/константе/директории ведёт к их определению. Если метод перегружен — можно перейти к родителю.
5) Согласен, можно использовать отдельный продукт. Но работать в интегрированной среде гораздо удобней
6) Если я хочу переименовать метод SomeClass::someMethod, то встроенная в IDE утилита переименует только его (отрефакторив и места использования), она не будет трогать AnotherClass::someMethod и строку Hello, someMethod

[@demiazz]

1) это был сарказм
2) Простите, но вы мне подсовываете тривиальный код, который легко парсить и индексировать. А как вам пример с метапрограммированием на Ruby? Где методы класса могут генерироваться на лету? Как по вашему в данном случае будет работать автодополнение? Похожие вещи есть и в других языках. В том же Javascript.

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

Я согласен, что удобно ходить по клику к переменной, но это не всегда возможно. Если вы говорите о PHP, C++, Java — я согласен, там это может сработать очень хорошо.
5) Может быть в случае с PHP в IDE работать удобнее, но RubyMine пока не научилась работать с Pry, например. Хотя ребята проделывают огромную работу по интеграции с дебаггером. Но это опять таки дело привычки, и используемых инструментов. В вашем случае, у вас нет интерактивной консоли, с которой вы бы могли работать с запущенным живым кодом. А в моем случае такое есть. И я не просто могу дебажить, но я могу изучать структуру кода в рантайме, следить за окружением и даже просматривать исходники методов конкретного объекта прямо в интерактивной консоли Ruby с помощью этого pry. То есть, в этом плане, для меня IDE проигрывает.

Тот же Javascript можно отлично отлаживать в браузере, причем для меня это крайне предпочтительный вариант, так как я провожу отладку непосредственно там, где мой код будет работать.

Опять приходим к тому же — все зависит от используемого языка.
6) Опять же, возвращаюсь к тому, о чем я говорил в первом пункте. Все зависит от языка. Да и рефакторинг, это не только переименование класса/метода/модуля/переменной.

[@aplic]

При чем тут вообще C++? Вы даже не пытались понять что я пишу.
Поясняю. Пользовательская настройка цветовой схемы должна быть предельно проста. Там ведь нет ничего заумного. Да вообще по хорошему зачем мне это делать, предоставьте возможность выбора из списка, это так сложно что ли? Так ведь нет. В списке выбора две одинаковых неконтрастных светлых темы, а остальные инверсные. Ни одной нормализованной светлой нет. По умолчанию стоит шрифт который вообще не предназначен для экрана, печатный шрифт. Качаю темы оформления доступные в инете, ставлю, они не применяются, в превью применяются, в работе нет. Поменять цвет самостоятельно тоже не получается, для большинства пунктов цвет выбрать можно, для части пунктов — нет. Что дальше, лезть в файлы тем и править их руками?
Ну то есть я это ведь не просто так написал, обоснованно, и по другим пунктам тоже. И список недостатков этим не ограничивается. И в совокупности из за этих недостатков преимущества этой IDE не перевешивают. И это все ответ на ваш исходный вопрос почему люди не используют IDE. И вы не хотите понять ответы. Ну если не хотите понять ответы, зачем было вообще задавать этот вопрос? Или вопрос был риторический, для вброса?

[@minister35]

Не пытайтесь навязать мне свой редактор/IDE, и я не буду навязывать вам операционную систему вашего смартфона или необходимость употреблять/не употреблять мясо.

[@VitaZheltyakov]

Без обид, но по-моему разговор переходит в раздел срача «IDE & Редактор кода». Это изначально глупо и бесполезно.

Мне удобно писать "//!!!" в моём редакторе, Вам удобно писать "// todo" в своей IDE. Разные инструменты — разные подходы.

[@Agent_J]

Автоформатирование файла есть в любой нормальной IDE. Редактирование столбцом есть во всех продуктах JetBrains (вероятно и в других, не буду утверждать, т.к. не знаю).
А что вы подразумеваете под маппингом?

[@Maklaut]

Возможно имелись ввиду такие фичи как скорость работы и простота. Навороченным IDE этих двух фич часто нехватает :)

[@hellman]

После привыкания к множественному выделению в sublime, в других редакторах/IDE просто дико раздражает его отсутствие. Вроде небольшая фишка, но без неё жить никак

PS минус к IDE — тормознутость

[@maximw]

Редактор кода, мало чем отличающийся от IDE, с большой долей вероятности является IDE. :)

[@demiazz]

А что есть в IDE, без чего жить нельзя в редакторе, например, в Vim, Sublime или Emacs?

[@Max7K]

я тоже использую xxxxxx как закладку чтобы можно было быстро вернутсья к тому участку кода. А лично для меня он лучше чем // только потому, что если я все-таки забыл вернуться и дописать свой код, то при первом же запуске получу ReferenceError: xxxxx is not defined и вернусь чтобы доделать то что забыл.

[@Zibx]

Вот простой шаблонизатор, который работает до тех пор пока в имени свойства переданного объекта не встретится регэкспа. Принимает на вход строку вида 'Hi, my name is {first-name} and my twitter screen name is @{screen-name}' и объект вида {'first-name': 'Василе', 'screen-name': 17}

getTemplated: function( text, replacements ){
    for( var i in replacements )
        replacements.hasOwnProperty( i ) &&
            ( text = text.replace( new RegExp('\\{'+ i +'\\}','gi'), replacements[ i ] ) );

    return text;
},

[@k12th]

Можно и без регекспов.

text = text.split('{' + i + '}').join(replacements[i])

Выигрыш, правда, скорее всего копеечный, но во времена IE6 это имело смысл:)

[@valkiriy]

Классный вариант! Намного читабельнее.

[@Zibx]

Чудесно, попутно убивается некорректное поведение при регэкспе в параметре.

[@Zerstoren]

Автор текста не хипстер, а идиот.

1) success? obj.ok(): obj.bad();
и жизнь лучше.

с 2-4, только для совсем зеленых новичков.

5) Если уже и ставить, то синтаксически неверную конструкцию, чтоб код не запустился вообще. А еще есть alert, console.error и многое другое, что может вам сказать, что нужно это доделать.

6-8) Нужно было автору оригинала почитать сначала маны по дебагу в браузерах

8) ага, 8 пункт 2 раза. За такое бить по рукам нужно, при чем битой.

[@alhimik45]

Кстати, восьмое вроде вообще не работает.

[@Zerstoren]

если strict mode, то не работает, если обычный режим, то работает.
Для strict mode можно писать window.globvar

[@zag2art]

>8 пункт 2 раза. За такое бить по рукам нужно, при чем битой.

Ну это наверное меня. Автор здесь не при чем.

[@Zerstoren]

То что вы опечатались, ничего страшного.
За такой микро «шаблонизатор» бить по рукам надо.

[@maximw]

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

Хак 1 — это плохая практика, если не стоит задачи превратить код в нечитаемый говнокод.
Аналогично хаки 3 и 4 надо использовать с осторожностью, там где смысл их использования очевиден.

Остальное разной степени «капитанские велосипеды». Я не мегахакер, JS знаю довольно посредственно.

[@alhimik45]

С такими хаками в 30 строчек можно поместить больше кода!)

[@front_end]

Автор начал работать в компании верстальщиком, в потом серверсайдер показал ему Javascript.
Ждем «мегахипстерского» анализа CoffeScript.

[@maximw]

Из блога автора «I’m currently working as an [iOS developer] + [Web developer] + [whatever is needed] at a startup in Israel.»

[@front_end]

Главное верить (с)

[@jMas]

Простой темплейтер (демо):

function t(tpl, data) {
     return tpl.replace(/\{(.*?)\}/g, function(str, a) { return data[a] || ''; });
}

[@k12th]

Предчувствую неделю «шабонизаторов в двух с половиной строках»…

[@Dimcore]

Астрологи объявили неделю шаблонизаторов — прирост шаблонизаторов увеличен

[@maximw]

А через неделю вам или коллеге понадобиться добавить вызов obj.oneMoreOk() после вызова obj.ok(). И будете разгребать эту лапшу. Матерясь, переделывать на if.

[@jMas]

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

[@wisd]

А разве так нельзя?
success && (obj.ok() | obj.oneMoreOk());

[@maximw]

А вы уверены, что obj.ok() возвращает что-то что будет интерпретировано как true?

[@wisd]

Там поэтому и стоит | а не ||

[@maximw]

> А разве так нельзя?
> success && (obj.ok() | obj.oneMoreOk());

Тогда, по всей видимости, синтаксически можно. Но зачем? Вы считаете улучшается читаемость?

[@wisd]

Вы спросили как — я ответил.

[@maximw]

А! Понял вас, спасибо. Мой вопрос был не настолько буквальный. Понятно, и этот случай синтаксически можно «хакнуть», что вы и показали. Но я спрашивал про удобство работы с кодом.

[@bolk]

Брр.

success && (obj.ok(), obj.noMoreOk());

[@subzey]

Как-то недостаточно хипстерски.

success && obj.ok() ^ obj.oneMoreOk();

[@dtestyk]

если нужна альтернативность вариантов:

success&&(
  obj.start()||1
)||(
  obj.stop()||1
)

еще можно else if и совместить с комментариями:

1==0&&(
  console.log(5)||"первое условие"
)||7==8&&(
  console.log(9)||1
)||7==7&&(
  console.log(100)||"условие по умолчанию"
)

[@Zibx]

Не повторяйте этого в своём коде:

success && (obj.ok() || true) && obj.oneMoreOk();
или
success && obj.oneMoreOk(obj.ok(), void 0);

[@uSide]

тогда уж:

(success && obj.ok()) || obj.bad();

[@nekt]

Нужно больше регулярок. А то уж слишком читаемо.

[@m0dE]

зачем я только что все это прочитал?

[@josser]

Что бы написать в комментариях: «зачем я только что все это прочитал?»

[@dpigo]

Ужасный перевод набора примитивных сниппетов, сдобренных щепоткой bad practice. Уважаемый переводчик, нельзя так издеваться над читателем.

[@zag2art]

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

[@aplic]

ошибки:
replace без регекспа неглобальная замена.
.join() в два раза медленнее чем + и выглядит некрасиво, хотя в туториалах пишут обратное.

[@akkuch]

Красиво или некрасиво — субъективно.

А по поводу скорости, то простой тест показывает, что в Chrome join() в целом не медленнее, а иногда даже быстрее:

for(var i = 0; i < 1000000; i++) { "test1" + "test2" + "test3" + "test4" } // 624ms
for(var i = 0; i < 1000000; i++) { ["test1", "test2", "test3", "test4"].join() } // 639ms
for(var i = 0; i < 1000000; i++) { "test1" + i + "test2" + i + "test3" + i + "test4" } // 1467ms
for(var i = 0; i < 1000000; i++) { ["test1", "test2", "test3", "test4"].join(i) } // 951ms

В FF правда ваша, join() почти в два раза медленнее, зато, как по мне, читается проще.

[@aplic]

У вас последние две строки неэквивалентны, в третей три приведения i к строке, в четвертой одно.
Строки в современных браузерах оптимизированы для модификации, то есть + не вызывает перевыделение памяти каждый раз и давние рекомендации join сейчас уже неактуальны. А в общем пишите как вам удобнее, эти микросекунды сейчас редко где важны.

[@akkuch]

Да, с последними строками оплошал.

[@Zibx]

Как измерялось время, были ли замкнут каждый отдельный пример? Иначе имеем поиск во всём скоупе виндоу, что на миллионе проходов уже даёт эффект.

[@josser]

О я тож поделюсь )
Хипста цикл:

i = array.length;
while (i--) { }

Хипста пассворд генератор:

Math.random().toString(33).substr(2)

[@norlin]

Крутой генератор, я подобное юзал для сокращалки строк. Только небольшой фикс:

Math.random().toString(36).substr(2)

Иначе, в пароль не смогут попасть символы x, y, z.

[@josser]

Ой, неправильно посчитал, пасиба! )

[@Flammar]

А, я понял, он пытается перевести «16-ричную» дробь в «33-ричную», получается периодическая дробь…

[@impwx]

С точки зрения развития проекта большинство советов, наоборот, вредны. Всё сэкономленное на наборе пары лишних символов время компенсируется стократно тем, сколько времени другим разработчикам потребуется въезжать в вашу конвенцию.

[@Kottenator]

А как вам такое:

— Приведение к boolean: !!x
— Приведение к integer: ~~x

[@Agent_J]

Опасный способ приведения к int

~~'1 str'; // 0
~~[1];     // 1
~~[1, 2];  // 0
~~1.9;     // 1

[@azproduction]

0 | x объективно лучше, чем ~~x, но в любом случае лучше написать явно Boolean(x) и Math.floor(x), ведь вы пишете код для людей ;-)

[@Mithgol]

По сравнению с операцией |0 метод Math.floor даёт другие результаты для отрицательных чисел (как я упоминал во блогозаписи «Вертикальная черта, затем ноль»).

[@zxcabs]

Только есть свои особенности: habrahabr.ru/post/172731/#comment_5997887

[@VanSanblch]

Удалено. Так как выше ответили про привидение к int через | 0.

[@Triang3l]

Мне больше нравится >>0 к int и >>>0 к unsigned int. В IE8 быстрее, чем ~~. Но по-асмовски надо писать |0.

[@Blekel]

sarcasm:
вот поэтому лучше не заниматься поддержкой JS/PHP/etc динамического кода, написанного другими погромистами
//sarcasm

[@evazamtz]

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

Если будет объявлена глобальная переменная xxx, то ничего здесь не остановится и это будет считаться валидным кодом, т.к. в javascript существует автоматическая расстановка точек с запятой.

[@evazamtz]

глобальная

[@Flammar]

Глобальная интереснее и незаметнее;-)

[@Agent_J]

Это не баг, а фича данного метода

var z = 15;
doSomeMath(z, 10);
var xxx;
xxx // Сделать тут чего-нибудь ещё, но не прямо сейчас, а как-нибудь потом
doSomeMoreMath(z, 15);

[@ImEugene]

Добавил в избранное что бы потом комментарии прочесть.

[@norlin]

К слову, способ 2 очень здорово помогает с генерацией кусочков html-кода внутри js (если по каким-либо причинам вам это нужно и вы не используете шаблонизатор):

var action = '/sendForm',
    i18nLogin = 'Введите логин',
    myPrettyForm = [
        '<form action="', action, '" method="POST">',
            '<fieldset>',
                '<input type="email" placeholder="', i18nLogin,'"/>',
                '<input type="submit" />',
            '</fieldset>',
        '</form>'
    ].join('');

А «хак» 1 – это отличнейший заменитель стрёмного медленного switch. Работает сильно быстрее.

[@aplic]

стрёмного медленного switch

Все меняется
case vs if
разницы в производительности нет ни на хроме, ни на фоксе.
Так же я потестировал производительность хака 1 в сравнении с if и case и тоже нет разницы в скорости выполнения.

[@norlin]

А я не с if сравнивал switch, а с поиском по хэшу-объекту.

Т.е., быстрее и проще объявить объект типа

var mySwitch = {
    'case1': function () {},
    'caseN': function () {}
};
// и потом сделать
mySwitch[check]()

Хм, добавил тест: jsperf.com/else-if-case/3
В новых браузерах почти одинаково, но, всё-таки, мой способ чуть-чуть выигрывает. И, да, объект с кейсами вынесен в «предназначенные переменные», т.к. и в реальности вы не будете его создавать много раз, а вот switch и if должны выполняться каждый раз.

[@aplic]

Не-а, не выигрывает. Все эти три варианта в итоге компилируются в одинаковый код. И это правильно, поскольку в основе идентичный алгоритм. Так что if-case-hash сегодня уже выбор по читаемости кода, просто пишите читаемый код, производительность одинаковая.

[@norlin]

В последних версиях ФФ получается абсолютно одинаково, а вот в Хроме – разница есть. В других браузерах последние версии не проверял.

Но в более-менее старых версиях браузеров разница была большая.

[@serf]

В extjs4 шаблоны внутри кода таким образом описаны.

[@NeXTs_od]

Так первый пример можно и короче сделать, но от этого читать легче не станет.

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

[@aplic]

success? obj.start(): obj.stop();

[@NeXTs_od]

"obj[success?'start':'stop']();".length // 30
"success?obj.start():obj.stop();".length //31

однако

"o[success?'start':'stop']();".length // 28
"success?o.start():o.stop();".length //27

ваша чистая победа. не обращайте на меня внимание

[@TheShock]

"s?o.s:o.e".length // 9

я победил. Методы реализованы так:

o = {
  get s () {
    // method start
  },

  get e () {
    // method end
  }
}

Что тоже короче, чем стандартный синтаксис, но вам не кажется это глупостью?

[@aplic]

если уж гнаться за краткостью, то

    var obj = {
        get true() { console.log('start!'); },
        get false() { console.log('stop!'); }
    };

obj[success];
или
o[s];

5 символов я победил. Конструкция obj[success](); даже читаемая.

[@Flammar]

и потом

obj[!0]

или

obj[!1]

[@Flammar]

Зависит от канонов форматирования и длины идентификатора.

[@Flammar]

<занудство>

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

если в функции значение this критично.
</занудство>

[@StreetStrider]

Это не нужно, сработает как и при dot notation.

js > obj = { x: function () { console.log(this); } }
{ x: [Function] }
js > obj.x()
{ x: [Function] }
js > obj['x']()
{ x: [Function] }

[@Deenamo]

Tal Bereznitskey :)
Этот чувак был нереально крут 15 лет назад, когда он разбирал форматы ресурсных файлов EA и клепал редакторы для графики FIFA98 и FIFA99. Целое комьюнити рисовало футболочки, мячики, рекламные щиты… Эх :)

[@the_ghost]

Уже сказали, что точку с запятой можно не использовать?

[@Yanovsky]

Ахахаха) Спасибо, посмеялся.

[@jMas]

Еще один вполне приятный синтаксис:

for (var k in items) if (items.hasOwnProperty(k)) {
   // do something with items[k]
}

[@Ganesh]

Не туда

[@heel]

Сколько же здесь скучных людей. Автор красавчик, интересная подборка.

[@Flammar]

Да, на Javascript можно писать без операторов if, for, while и var… но не факт, что это нужно делать всегда.

[@dtestyk]

и как обойтись без for и while? рекурсия?

[@Flammar]

Да.

[@StreetStrider]

Для пункта 3 я когда-то выковал ещё более хипстерский вариант:
вместо

x = x || defVal;

делаем

x || (x = defVal);

Да, а знаете ли вы про хипстерские декораторы в JS?:)

+memoize
+function longCalculation() {
    ...
}

— github.com/dzautner/JSDecorators

[@zelibobla]

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

[@lotas]

C оператором по-умолчанию надо быть осторожным.
Особенно с булевыми значениями:

 var b = b || false;  // ok
 var b = b || true;  // always true, when b is boolean

[@nickolaym]

Эти шаблонизаторы в две строчки обладают фатальным недостатком. Нет, не тем самым, о котором на лурке сказано, а действительно фатальным.

var tpl = "{alfa} and {beta} sat on the tube";
var txt = tpl;
txt = txt.replace("{alfa}", "A{beta}Z"); // "A{beta}Z and {beta} sat on the tube"
txt = txt.replace("{beta}", "B"); // "ABZ and B sat on the tube

txt = tpl;
txt = txt.replace("{beta}", "B"); // "{alfa} and B sat on the tube"
txt = txt.replace("{alfa}", "A{beta}Z"); // "A{beta}Z and B sat on the tube

Это многократная замена. И, как следствие, зависящая от порядка выполнения подстановок.

Это подобно тому, как printf("{%s}", "[%s]", "hello") вывел бы {[hello]}

Правильный шаблонизатор должен выполнить подстановки так, как будто они произошли все одновременно.
Но для этого нужно особым образом парсить шаблон.
Например, так:

function substitute(tpl, dict)
{
	var f = function(g0, g1, ofs, s)
	{
		if(g1 in dict)
			return dict[g1]; // substitute
		else
			return g0; // leave as-is
	};
	return tpl.replace(/{([^}]+)}/g, f);
}

var s;
s = substitute("{mama} myla {ramu} - {bahama} {mama}", {mama:"MAMA", bahama:"BAHAMA"}); // MAMA myla {ramu} - BAHAMA MAMA
s = substitute("{alfa} and {beta} sat on the tube", {alfa:"A{beta}Z", beta:"B"}); // A{beta}Z and B sat on the tube

Ах, да! Вот и я поучаствовал в «неделе шаблонизаторов» :))

[@StreetStrider]

У вас leave as-is это очень бодрая фича, imo. Позволяет частично определять шаблоны; аналог частичного применения функции.

[@nickolaym]

В общем да, и более того, это функция высшего порядка: в //substitute ведь может прилететь строка, содержащая другой шаблон.

[@Jucks]

Ха! И лишь поиск по вашему Хипстерскому хаку, оператору «XXX », помог мне снова найти вашу статью на Хабре!
Вот в чём ещё заключается уникальная сила Вашего «проприетарного» стиля!!) Браво!

[@dtestyk]

использую ///
теперь и этот комментарий можно найти :)

[@dtestyk]

var method = success ? 'start' : 'stop';

еще можно так:

var method = ['stop','start'][+success];

[@dtestyk]

Если условий несколько, их можно комбинировать:

//switch value
['none','first','second','third'][isFirst*1||isSecond*2||isThird*3]
//binary combine flags
['none','first','second','first and second or third'][isFirst+isSecond*2|isThird*3]