Хорошие практики в JavaScript: используем ES6

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

В этой статье я не буду говорить о объявлении переменных с помощью let и const так как уже писал об этом ранее. Так же не будет затронута тема модульности с использованием import и export. И так начнем

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

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

Своего this у стрелочной функции нет как и arguments и super.

Стрелочные функции идеально подходят для обработки обратного вызова (callback)
Пример:

() => {
fetch("example.com").then(response => {
//делаем что то с response например вызовем response.json() для парсинга тела ответа в JSON.
})
}

В данном примере response будет передан первым параметром в функцию и доступен по имени. Для передачи нескольких параметров или вызова без параметров используются скобки () => {...}; (a,b,c) => {...};

Так же использование стрелочных функций позволит избавиться от сохранения контекста в переменную (var _this = this) с которым нам так долго приходилось мириться. Теперь же использование стрелочной функции как метода объекта позволяет нам обращаться к this который будет указывать на наш объект, а не на замыкание метода.

Работа с абстрактными объектами

Объект не являющийся экземпляром какого либо класса принято называть абстрактным. Абстрактные объекты часто используются в JavaScript, в ES5 мы не имели иного интерфейса для работы с объектами но ES6 предоставил нам альтернативу в виде классов.

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

• Computed property names:
  Пример:

() => {
let i = 0;
let a = {
['foo' + ++i]: i,
['foo' + ++i]: i,
['foo' + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3
}

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

• Spread оператор

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

() => {
let obj1 = {
foo: "foo"
bar: "bar"
};
let obj2 = {...obj1};
//obj2 в данном случае имеет все те же свойства что есть у obj1 но при этом obj2 является независимым объектом (obj1 === obj2 //false)
}

С помощью спред оператора можно не только банально скопировать объект но и дополнить его объединить 2 объекта в третий, что является альтернативой Object.assign();
Пример:

() => {
let a = {foo: "foo", bar: "bar"};
let b = {...a, ...{bar: "bar2", baz: "baz"}};

console.log(a, b);
// a = {foo: "foo", bar: "bar"}
// b = {foo: "foo", bar: "bar2", baz: "baz"}
}

Так же спред оператор можно применять к массивам и строкам
Пример:

() => {
let arr = [1,2,3];
let str = "JavaScript";
let arrStr = [...arr, ...str];
// arrStr = [1,2,3,"J", "a","v","a","S","c","r","i","p","t"];
}

Деструктуризация

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

() => {
let a = {foo: "foo", bar: "bar"};
let {foo, bar} = a;
//foo == "foo"
//bar == "bar"
}

Классы

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

Синтаксис классов довольно прост

class AwesomeClass{
constructor(params){
super();
}
awesomeMethod(){}
}

Давайте подробно разберем каждую строчку.

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

Метод constructor вызывается при объявлении экземпляра класса и может использоваться для установки первоначальных значений используемых классом.

Метод super вызывает конструктор родительского класса от которого данный класс был унаследован.

awesomeMethod является методом класса, после метода не нужно использовать запятую как это требуется в абстрактных объектах. This внутри метода будет ссылаться на экземпляр объекта класса.

На этом все, в этой статье я уделил внимание лишь малой части функционала который мы получили с ES6, так что настоятельно советую Вам обратиться к документации, я же постарался обратить Ваше внимание на самые интересные (как по мне) и часто используемые возможности.

Спасибо большое что дочитали до конца и надеюсь эта статья помогла Вам.

Не забудьте подписаться на канал что бы не пропустить свежие публикации