9 полезных сокращений в синтаксисе JavaScript

Базовые возможности, которые уменьшат код и увеличат быстродействие.

06 февраля 20183 минуты8406

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

Большинство из описанных далее сокращений очень простые, но от этого не менее эффективные. Если вы только в начале пути JavaScript-программиста – запоминайте, пригодится.

Децимальные числа

Когда работаешь с числами, постоянно сталкиваешься с невероятным количеством нулей после значимой цифры. В JavaScript есть способ их упразднить, заменив физические символы на их количество. Таким образом, число 20 000 000 будет выглядеть как 2e7. Аналогичным образом 37e4 – это 370 000.

Инкремент и декремент

Казалось бы, базовая операция, которая у всех должна быть доведена до автоматизма. Но нет, все ещё смотришь код и встречаешь

x = x + 1;

Никто не запутается, если написать вместо этого x++, так что не стоит игнорировать экономию 2 символов. Уменьшение на единицу выглядит аналогично.

Умножение деление, сложение, вычитание

Впрочем, в обязательный список использования надо добавить не только уменьшение или увеличение переменной на единицу, но и любые арифметические операции с числами:

x+=4; эквивалентно x = x + 4;
x-=4; эквивалентно x = x – 4;
x*=4; эквивалентно x = x * 4;
x/=4; эквивалентно x = x / 4;

Указание позиции символа

Метод charAt() является одним из наиболее часто употребляемых в JavaScript. Он возвращает символ по указанной позиции в скобке. То есть если вам надо узнать 5-й символ строки – пишем:

myString.charAt(4); // в charAt символы считаются от нуля.

Однако есть запись куда проще, и вы наверняка о ней знаете:

myString[4]

Множественное объявление переменных

Если вам надо создать несколько переменных, вовсе не обязательно растягивать запись на несколько строк. К примеру, так:

var i;
var j=1;
var k="Hello!";
var l;
var m=false;

Достаточно воспользоваться разделением запятой и записать всё это в одну строку:

var i, j=1, k="Hello", l, m=false;

В результате вы получаете существенную экономию места. Если боитесь потерять в читаемости – необходимо упорядочить переменные по алфавиту, это сократит время при поиске значений.

Ассоциативные массивы

Если вы хотите создать массив с известными значения, вы просто пишете:

var myArray = ["A", "B", "C"];

Это простейший случай, когда по умолчанию ключами к каждому слову являются номера позиций, то есть 0, 1, 2 соответственно. Однако в JavaScript у вас есть возможность создавать ассоциативные массивы – здесь ключ может принимать любое значение. Так как порядка в этом случае нет, многие новички начинают создавать пары ключ-значение так:

var myArray = new Array();
myArray["BigCity"] = "Moscow";
myArray["CultCity"] = "Saint Petersburg";
myArray["WarmCity"] = "Sochi";
myArray["FarCity"] = "Vladivostok";

Но вы можете с легкостью избежать множественного копирования имени массива, применив аналогичную запись:

var myArray  = {
 "BigCity": "Moscow",
 "CultCity": "Saint Petersburg",
 "WarmCity": "Sochi",
 "FarCity": "Vladivostok"
}

При объявлении в фигурных скобках записываете все пары ключ-значение через двоеточие, а разделяете пары запятыми.

Объявление объекта

Описанную форму записи можно применять не только к созданию ассоциативных массивов, но и к описанию объекта. Давайте вспомним, как это принято записывать:

var myObj = new Object();

myObj.name = "Sean Connery";
myObj.placeOfBirth = "Edinburgh";
myObj.age = 86;
myObj.wasJamesBond = true;

То же самое можно записать при объявлении в фигурных скобках, но в отличие от ассоциативных массивов для параметров не используются двойные кавычки:

var myObj = { name: "Sean Connery", placeOfBirth: "Edinburgh", age: 86, wasJamesBond: true };

Тернарный оператор

Классическая конструкция тернарного оператора:

условие;
что происходит, если условие выполняется;
что происходит, если условие не выполняется.

В коде это выглядит так:

if( age >= 21) {
 var message = "Allowed";
} else {
 var message = "Denied";
}

Эту запись можно уместить в одну строку, сократив её на несколько символов:

var message = age >= 21 ? "Allowed" : "Denied";

Проверка существования

Ещё одна популярная операция – проверка переменной, была ли она объявлена, присвоено ли ей значение. Сделать это можно так:

if( typeof myVar !== "undefined" && myVar !==  "" && myVar !== null && myVar !== 0 && myVar !== false  ) {
 console.log("The myVar variable is defined AND it's not empty AND not null AND not false.");
}

В тех случаях, когда надо выполнить проверку по всем этим пунктам, код можно сильно сократить:

if( myVar ) {
 console.log("The myVar variable is defined AND it's not empty AND not null AND not false.");
}

К сожалению, в такой записи вы не можете проверять какие-то дополнительные условия, только изменение состояния переменной со значения по умолчанию. Но можно проделать обратную операцию, узнав соответствие одному из условий:

if( !myVar ) {
 console.warn("The myVar variable is undefined (OR) empty (OR) null (OR) false.");
}

Так вы проверяете, что переменная или не была объявлена, или пустая, или нулевая, или ложная.

Использование этих простых преобразований позитивно скажется не только на коде, но и на ваших профессиональных скиллах. Главное, разберитесь, где они уместны, и не злоупотребляйте – это принесёт вам +1 к профессиональной карме.

frontend_developer, javascript

Нашли ошибку в тексте? Напишите нам.

Чтобы завершить регистрацию, подтвердите свою почту!