Лучшие хаки 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Эти методы массивов обеспечивают функциональный подход для работы с массивами, делая код более лаконичным.
Подробное руководство по использованию функций map(), filter() и reduce() с примерами.
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
