Современный JavaScript: функции, которые ускорят разработку и cделают код чище

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

Разбираем новые встроенные функции JavaScript и топ лайфхаков от Senior-разработчика.

Группировка объекта в новый по-условию - Object.groupBy()

const cars = [
  {name: "BMW", color: "red", price: 3.5},
  {name: "KIA", color: "red", price: 2.5},
  {name: "Niva Bronto", color: "white", price: 1.2},
  {name: "Audi", color: "black", price: 5.0}
];


const fltColor = Object.groupBy(cars, car => car.color);
console.log(fltColor.red);
/*
  [ 
      { name: "BMW", ... }, 
      { name: "KIA", ... } 
  ]
*/


const fltPrice = Object.groupBy(cars, car => {
  if (car.price < 2) return "cheep";
  if (car.price < 4) return "low";
  return "high";
});
console.log(fltPrice.high);

/*
  [ 
      { name: "Audi", ... } 
  ]
*/

Метод groupBy также работает и с Map.groupBy - для группировки более сложных объектов, где ключ может быть не только строкой или числом.

Доступ к переменным среды без сторонних библиотек

На версии Node.js v21.7.0 или новее теперь можно читать .env файл без установки каких-либо зависимостей с помощью функции process.loadEnvFile()

//.env
API_KEY="some_api_key"

//index.js
process.loadEnvFile();
const apiKey = process.env.API_KEY;

Клонируем сложные объекты за один вызов

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

const user = {
  name: "Иван",
  age: 30,
  skills: ["JS", "Node.js"],
  meta: {
    active: true,
    joined: new Date("2025-01-01")
  }
};

const copy = structuredClone(user);

// Меняем копию
copy.name = "Мария";
copy.skills.push("React");
copy.meta.active = false;

console.log(user.name);   // Иван (не изменился)
console.log(copy.name);   // Мария
console.log(user.skills); // ["JS", "Node.js"]
console.log(copy.skills); // ["JS", "Node.js", "React"]

Сокращение громоздких условий в коде

Иногда вместо условий if или оператора switch удобнее использовать Map():

function getColor(value){
	const colorMap = new Map([
		['red', '#ff0000'],
		['green', '#00ff00'],
		['blue', '#0000ff']
	]);
	return colorMap.get(value) ?? '#000';
}

Отслеживание реферальных ссылок в JavaScript

document.referrer показывает URL, откуда пользователь попал на страницу.

Но если он зашёл напрямую (например, вбил адрес в строку браузера или через прямую ссылку в соцсетях) — document.referrer отдаст пустую строку.

<script>
  const userRef = document.referrer || "прямой переход по ссылке";
</script>

Получение значения типа number без лишних обработок

valueAsNumber — это свойство у <input type="number">, которое позволяет сразу получить значение как число, без дополнительных обработок через parseInt() или Number().

 <input type="number" name="card_number" />
 
 <script>
 const cardNumberInput = document.querySelector('input[name=card_number]');
 if(cardNumberInput){
	 cardNumberInput.addEventListener('input', (event)=>{
		 const currentValue = event.target.valueAsNumber;
	 });
 }
 </script>

Продвинутая работа с выводом лога

Вместо console.log для просмотра объектов используй console.table — вывод будет в виде аккуратной и наглядной таблицы. Идеально для отладки структурированных данных.

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

Работает console.debug также как и обычная функция лога, но её можно легко скрыть в инструментах разработчика, отключив уровень (а по-умолчанию он как раз отключен), что повышает безопасность вывода информации через console.debug

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