DevGang
Авторизоваться

Лучшие хаки JavaScript: От новичка до гуру кода (Начало)

JavaScript — это язык, который лежит в основе современного веб-разработки. Он позволяет создавать интерактивные веб-сайты, приложения и игры. 

В этой статье мы раскроем секреты JavaScript, которые помогут вам стать более эффективным и опытным разработчиком. 

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

1 Замена `var` на `let` и `const`

Использование `var` в разработке приводит к ошибкам и непредсказуемому поведению, тк имеет функциональную область действия.

Применение `let` и `const` с блочной областью видимости позволит эффективно решить эту задачу.

let count = 0;
const PI = 3.14;

`let` и `const` помогают предотвратить ошибки, связанные с областью видимости, и гарантируют, что переменные доступны только в пределах того блока, в котором они определены.

2 Параметры по умолчанию

При написании кода можно столкнуться с риском, при котором функции дают сбой, если аргументы не указаны.

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

function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"

Этот способ определяет, что функция имеет разумные значения по умолчанию, предотвращая ошибки и делая код более надежным.

3 Шаблонные литералы

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

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"

Многострочные строки и строки со встроенными выражениями упрощаются шаблонными литералами.

4 Деструктурирующее присваивание

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

const user = { name: 'Jane', age: 25 };
const { name, age } = user;
console.log(name, age); // "Jane" 25

Здесь приведен пример легкого извлечения свойства из объектов и элемента из массивов в отдельные переменные.

5 Стрелочные функции

Традиционные функции могут быть излишне длинными и не всегда корректно работают с контекстом `this`. Стрелочные функции => предлагают более лаконичный синтаксис и гарантируют правильную привязку `this`.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

Благодаря стрелочным функциям вы получаете краткий синтаксис для выражений функций и гарантию, что `this` лексически связан.

Если вы предпочитаете традиционные функции, то наша статья поможет вам понять, как стрелочные функции могут упростить ваш код.

6 Spread оператор (…)

Объединение массивов или объектов может быть трудоемким. Оператор распространения ... (spread operator) —  удобный способ для простого объединения массивов и объектов.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = […arr1, …arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Оператор spread позволяет вам распределить элементы массива или объекта по другому массиву или объекту.

7 Остаточные параметры (...)

Работа с неопределенным количеством аргументов в функциях может быть нетривиальной. Остаточные параметры ... (rest parameters) предоставляют простой способ сбора всех аргументов в массив, делая работу с ними проще.

function sum(…args) {
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

При том, что операторы rest и spread имеют одинаковый синтаксис, выполняют они противоположные задачи. Rest собирает несколько элементов в единый массив, в то время как spread раскладывает массив на отдельные элементы, как мы видим в приведенном примере.

8 Короткое замыкание

Написание условных выражений может быть многословным. Используйте вычисление короткого замыкания (&&) для написания кратких условий.

const isLoggedIn = true;
const user = isLoggedIn && { name: 'Jane', age: 25 };
console.log(user); // { name: 'Jane', age: 25 }

Вычисление короткого замыкания упрощает условные выражения с помощью логических операторов && (И) и ||`(ИЛИ).

Хотите глубже разобраться с замыканиями и узнать, как их использовать в коде? Переходите по ссылке - там вас ждет подробная статья!

9 Опциональная цепочка (?.)

Доступ к глубоко вложенным свойствам может привести к ошибкам, если какая-либо часть цепочки имеет значение "null" или "undefined". Используйте необязательную цепочку для безопасного доступа к вложенным свойствам.

const user = { profile: { name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"

Необязательное объединение в цепочку обеспечивает безопасный доступ к вложенным свойствам, без проверки каждого уровня на наличие `null` или `undefined`.

10 Оператор нулевого слияния (??)

Использование || для предоставления значений по умолчанию может привести к неожиданным результатам, если значение равно 0 или ””. Используйте объединение нулевых значений (`??`) для предоставления значений по умолчанию только в случае null или undefined.

const user = { name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0

Объединение нулевых значений позволяет задать значения по умолчанию только для `null` или `undefined` значений.

11 Сокращение свойств объекта

Присвоение переменных свойствам объекта может быть повторяющимся. Используйте сокращение свойств для упрощения создания объекта.

const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }

Сокращение свойств упрощает создание объектов, автоматически используя имя переменной в качестве имени свойства.

12 Динамические имена свойств

Создание объектов с динамическими именами свойств может быть многословным. Используйте вычисляемые имена свойств для динамического создания свойств объектов.

const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

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

13 Массив map(), filter() и reduce()

Итерации по массивам для преобразования, фильтрации или накопления значений могут быть повторяющимися. Используйте `map()`, `filter()` и `reduce()` для общих операций с массивами.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

Эти методы массивов обеспечивают функциональный подход для работы с массивами,  делая код более лаконичным.

14 Строка includes(), startsWith() и endsWith()

Проверка того, содержит ли строка подстроку, начинается ли она с нее или заканчивается ею, может быть многословной. Используйте `includes()`, `startsWith()` и `endsWith()` для более простых проверок строк.

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

Эти строковые методы предлагают простой и понятный способ проверки наличия, начала или конца подстроки.

15 Деструктуризация массивов и объектов в параметрах функций

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

const user = { name: 'Jane', age: 25 };
function greet({ name, age }) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet(user)); // "Hello, Jane! You are 25 years old."

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

Мы поделились с вами несколькими приемами для создания чистого и правильного кода. Надеемся, вы примените их в своих проектах! Но это только начало! Оставайтесь с нами, и мы продолжим раскрывать секреты программирования.

Мы предлагаем вам продолжить свое путешествие по миру JavaScript и раскрыть все его тайны! В частях Продолжение и Заключение этого цикла вы найдете еще больше полезных советов и приемов, которые помогут вам создавать элегантный, эффективный и чистый код. 
Переходите по ссылке, чтобы узнать больше и продолжить свое обучение!

Источник: https://medium.com/@codewithashutosh/45-javascript-super-hacks-every-developer-should-know-5f1ee3c1d380

#JavaScript #Начинающим
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу