Javascript сокращения для уменьшения кода

Xo66uT

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

Инкремент/Декремент/Умножение/Деление

Вместо:

growCount = growCount + 1;
shrinkCount = shrinkCount - 1;

Намного проще и красивей написать:

growCount ++;
shrinkCount --;

Для сложения\вычитания\умножения\деления

growCount += 100; //увеличиваем переменную growCount на 100
shrinkCount -= 2; //уменьшаем переменную shrinkCount на 2

moreCount *= 5; // умножаем переменную moreSweets на 5
lessCount /= 3; // делим переменную lessApple на 3

Условный оператор.

Следующая конструкция, знакомая многим из других языков программирования экономит сразу несколько строк кода. Было:

if(myAge > legalAge) {
    canDrink = true;
}
else {
    canDrink = false;
}

Стало:

var canDrink = (myAge > legalAge) ? true : false;

Заполнение ассоциативного массива.

Многие привыкли делать это следующим образом:

var language = new Array();
language['Language Name'] = 'Javascript';
language['Type'] = 'Object-oriented';
language['Framework'] = 'jQuery';
language['Other'] = 'Improve Usability';

Javascript же предлагает следующую конструкцию:

var language = {
    'Language Name' : 'Javascript',
    'Type' : 'Object-oriented',
    'Framework' : 'jQuery',
    'Other' : 'Improve Usability'
};

Значение переменной по умолчанию.

Вместо много-строковой конструкции:

function displayValues(limit) {
    var length;
    if(limit) {
        length = limit;
    } else {
        length = 10;
    }
}

Можно просто написать:

function displayValues(limit) {
    var length = limit || 10;
}

Если функции не было передан параметр limit, то length будет равен значению по умолчанию — 10
Для того, чтобы переменная length получила значение 10 должны быть выполнены следующие условия limit =

  • false
  • 0
  • null
  • undefined
  • empty string

Во всех остальных случаях переменная length будет равна переменной limit .

Продолжение следует…

6 thoughts on “Javascript сокращения для уменьшения кода”

  1. Насчет удобства чтения категорически не соглашусь. Особенно для малоопытных разработчиков или тех, кто вынужден метаться от одного языка к другому, такие сокращения могут показаться сложными, или как минимум они усложнят чтение кода. А на поддержке чаще всего сидят как раз малоопытные мечущиеся разработчики, но сделать надо всегда быстро. Более верно использовать обфускаторы перед выкаткой на продакшн, а разработческую версию держать максимально понятной и хорошо документированной.

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

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

  4. Многие привыкли делать это следующим образом:

    var language = new Array();
    language[‘Language Name’] = ‘Javascript’;
    language[‘Type’] = ‘Object-oriented’;
    language[‘Framework’] = ‘jQuery’;
    language[‘Other’] = ‘Improve Usability’;
    Javascript же предлагает следующую конструкцию:

    var language = {
    ‘Language Name’ : ‘Javascript’,
    ‘Type’ : ‘Object-oriented’,
    ‘Framework’ : ‘jQuery’,
    ‘Other’ : ‘Improve Usability’
    };

    а ну-ка ну-ка в чем там сокращения?

  5. // var language = new Array();
    // language[‘Language Name’] = ‘Javascript’;

    В JavaScript нет ассоциативных массивов. Либо неупорядоченный список (хеш) либо индексированный массив.
    Интерпретатор не ругается на такое потому что массив в js унаследован от объекта, когда вы через for…in пройдетесь по этому «массиву» вас ждет сюрприз касаемый порядка расположения элементов.
    Свойство .length также покажет 0.
    Тут большая разница с PHP и другими языками.

    А вот создавать объекты так:
    var language = {
    ‘Language Name’ : ‘Javascript’,
    …
    };

    Это правильно.

    По поводу условного оператора:
    var canDrink = (myAge > legalAge) ? true : false;
    Зачем так когда достаточно так?
    var canDrink = myAge > legalAge;

    В отличие от операторов || и && операторы сравнения возвращают всегда булево значение

Comments are closed.