Лучшие советы и рекомендации по JavaScript, которые сделают вас лучшим, гибким и быстрым разработчиком.

Ежегодный опрос разработчиков stackoverflow.com показал нам, что JavaScript является самым популярным и используемым языком программирования в мире. Это связано с его большой гибкостью в большинстве возможных вариантов использования. Таким образом, нет никаких сомнений в том, что изучение JavaScript в настоящее время является почти обязательным. Вот 10 лучших советов и приемов по JavaScript, которые сделают вас лучшим, более гибким и быстрым разработчиком на этом невероятном языке. Готовы ли вы стать лучшим программистом JavaScript? Давайте начнем.

  1. Используйте тройное равенство (===) вместо двойного (==)

Почему? Почти все другие языки программирования используют двойной знак равенства. JavaScript отличается. Оператор == выполняет автоматическое преобразование между типами операндов, поэтому он может сказать, что они одинаковы, даже если это не так. С другой стороны, === проверяет, совпадают ли операнды. Например, вот некоторые из выводов по такой логике:

[10] === 10 // false
[10] == 10  // true
[] == 0     // true
[] ===  0   // false
'' == false // true 
'' ===false // false

Таким образом, может быть полезен оператор ==, когда вы получаете ввод, который является строкой, и вы хотите проверить, совпадает ли он с заданным целым числом. Во всех остальных случаях строгий оператор === намного лучше и надежнее. Итак, убедитесь, что вы используете правильную проверку на равенство.

2. Создайте самовызывающуюся функцию

Если вы хотите создать функцию и сразу же вызвать ее, есть очень простой способ, к тому же очень лаконичный. Зачем вам вызывать функцию сразу после того, как вы ее определили? Это очень полезно во время тестирования кода, а также когда вы хотите немедленно вызвать фрагмент кода, который вы только что написали. Итак, для этого вам нужно поставить две скобки после закрытия последней фигурной скобки и поместить все необходимые аргументы внутри. Вот пример кода:
(function(a,b){return result;})(10,20)

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

3. Пишите комментарии в коде

Комментарии — очень важная часть кода. Новички часто спрашивают, почему. Комментарии не выполняются интерпретатором, и они считают, что это пустая трата места. Правда в том, что комментарии жизненно важны для создания хорошего кода и улучшения его читабельности. Подумайте: сегодня среда, и вам больше не хочется кодить. Вы можете написать комментарий, в котором вы указали, где вы остановились, поэтому в понедельник вы сможете перезапустить правильно. Затем, если вы напишете несколько сложных и хитрых фрагментов кода, комментарии могут помочь вам в будущем вспомнить мотивацию написания этого кода, а также почему именно таким образом. Код также является первой документацией кода, который вы пишете, и почти невозможно работать в групповом проекте, большом или маленьком, без комментариев, чтобы другие люди знали, что вы должны были написать. Если вы пойдете проверять проекты с открытым исходным кодом, такие как React, вы заметите, что в кодовой базе, вероятно, больше комментариев, чем кода. Итак, вам нужно прокомментировать ваш код. Кроме того, неиспользуемые части кода можно закомментировать, чтобы вы могли повторно использовать их в будущем, если они вам понадобятся (это почти программный мем). Вот синтаксис однострочных и многострочных комментариев:

//this is a single line comment

/*this is a multi-line comment*/

4. Создайте массив чисел, упорядоченных от 0 до max в одной строке

Может быть полезно иметь массив со всеми числами от 0 до максимального числа, соответствующего длине массива. Это может быть полезно, когда вам нужен отсортированный массив, что не является обычной ситуацией. В любом случае, вот код:

let numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;)

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

5. Добавить массив в другой массив

Эта функция полезна. Вы можете думать, что у вас есть свой массив с данными, но через вызов API (интерфейс прикладного программирования) вы получаете новый массив, и вам нужно слить их вместе. Как это сделать? Лучше не использовать медленный, дорогой и некрасивый цикл, когда есть невероятно простая и мощная функция:
Array.prototype.push.apply(array1, array2);

Тогда массив1 будет равен массиву, полученному путем слияния этих двух. Невероятный.

6. Очистите массив правильным способом, а также менее затратным

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

array = [];

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

array.length = 0;

Таким образом, длина массива равна 0, и интерпретатору не нужно ничего удалять и перезаписывать. Он будет делать это только тогда, когда есть эффективное изменение, делая только половину операции, которая в противном случае необходима.

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

Это однострочная альтернатива проверке if, которая работает так же, лучше выглядит, а также более эффективна в пространстве кода. Но что такое тернарный оператор? Является операцией с тремя операторами. Первое – это условие. Если это условие истинно, значением выражения является второй оператор, в противном случае — третий. Вот пример кода с пояснением:

value = condition ? trueCase : falseCase;

value = 4 > 3? "four is bigger" : "three is bigger";

Таким образом, если четыре больше трех (истина), значение переменной имеет значение "four is bigger", иначе "three is bigger" . Так что в таком случае первый вариант.

8. Сопоставить функцию с массивом

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

elevation = [1,2,3,4].map(function (val) {  
    return val * val;  
}); 
// output : [1, 4, 9, 16]

9. Используйте Try-Catch вне цикла

Лучше вложить цикл внутрь try-catch, чем наоборот. Вот почему становится дешевле один раз проверить условие перед началом итерации, чем делать это до начала выполнения. Это вызовет проблемы, а также потребление ресурсов впустую. Итак, вот код, которого следует избегать:

let obj = ['foo', 'bar'], i;  
for (i = 0, len = obj.length; i <len; i++) {  
    try {  
        // code
    }  
    catch (e) {   
        // code  
    } 
}

И вот что вы должны использовать:

let obj = ['foo', 'bar'], i;  
try { 
    for (i = 0, len = obj.length; i <len; i++) {  
        // code 
    } 
} 
catch (e) {   
    // code 
}

10. Используйте let, а не var

Это не повлияет напрямую на ваш код, но пусть это намного эффективнее, а также более современно. Пусть заблокировал размах. Это означает, что если вы определите с помощью let внутри функции, эта переменная будет существовать только внутри этой функции. Таким образом, в других функциях вы можете создавать разные переменные с одинаковыми именами. С var вы не можете, потому что он имеет область видимости. Это означает, что если вы создаете переменную с помощью var, вы не можете использовать это имя переменной в других случаях, внутри функций. Это может раздражать. Все другие языки программирования, как правило, имеют заблокированные переменные области видимости, в том числе потому, что переменные области действия приводили к созданию множества ошибок и проблем, которые трудно обнаружить. Итак, избегайте этого:

var num = 3;

И сделайте это:

let num = 3;

Заключение

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

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

Спасибо за прочтение.

Здесь есть еще несколько других статей, связанных с Javascript:

Фреймворки JavaScript:



Java против JavaScript:



Реагировать против углового:



Брендан Эйх:



Полный стек JavaScript:



Python против JavaScript:



Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.