JavaScript ES6 - пишіть менше, робіть більше

JavaScript ES6 надає новий синтаксис та нові чудові функції, щоб зробити ваш код сучаснішим та читабельнішим. Це дозволяє писати менше коду і робити більше. ES6 знайомить нас з багатьма чудовими функціями, такими як функції стрілок, рядки шаблонів, знищення класів, модулі ... та багато іншого. Давайте подивимось.

const і нехай

const- це нове ключове слово в ES6 для оголошення змінних. constє потужнішим за var. Після використання змінна не може бути перепризначена. Іншими словами, це незмінна змінна, за винятком випадків, коли вона використовується з об'єктами.

Це дійсно корисно для націлювання на селектори. Наприклад, коли у нас є одна кнопка, яка запускає подію, або коли ви хочете вибрати елемент HTML у JavaScript, використовуйте constзамість var. Це тому, що varє "піднятим". Завжди переважно використовувати, constколи не хочуть перепризначати змінну.

У наведеному вище коді constне зміниться і не може бути перепризначений. Якщо ви спробуєте надати йому нове значення, воно поверне вам помилку.

letможе бути перепризначено та прийняти нове значення. Він створює змінну змінну .

letте саме, що constв тому, що обидва заблоковані. Це означає, що змінна доступна лише в межах її обсягу.

Функції стрілки

Функція стрілки справді чудова і робить ваш код більш читабельним, більш структурованим та схожим на сучасний код. Замість використання цього:

Використовуй це:

Як бачите, функція стрілки здається більш читабельною та чистою! Вам більше не потрібно буде використовувати старий синтаксис.

Крім того , ви можете використовувати функцію Стрілка з map, filterіreduceвбудовані функції.

Функція карти зі стрілками виглядає mapчіткішою та читабельнішою, ніж у ES5. За допомогою ES6 ви можете писати коротший та розумніший код. Ви можете використовувати те саме з filterі reduce.

Шаблонні літерали

Шаблонні літерали або рядки шаблонів досить круті. Нам не потрібно використовувати оператор плюс (+) для об'єднання рядків або коли ми хочемо використовувати змінну всередині рядка.

Старий синтаксис:

З новим синтаксисом ES6:

Так просто! Це справді величезна різниця між старим синтаксисом та ES6. Під час гри зі струнами буквальний рядок у ES6 виглядає більш організованим та добре структурованим, ніж ES5.

Параметри за замовчуванням

Коли я працюю в PHP, я зазвичай використовую параметри за замовчуванням. Вони дозволяють визначити параметр заздалегідь.

Отже, коли ви забудете написати параметр, він не поверне невизначену помилку, оскільки параметр уже визначений за замовчуванням. Отже, коли ви запускаєте свою функцію з пропущеним параметром, вона прийме значення параметра за замовчуванням tі не поверне помилку!

Подивіться на цей приклад:

Наведена вище функція повертає невизначену, оскільки ми забули дати їй другий параметр age.

Але якщо ми використовували параметр за замовчуванням, він не повернеться невизначеним, і він буде використовувати своє значення, коли ми забудемо призначити параметр!

Як бачите, функція повертає значення, хоча ми пропустили другий параметр. Тепер із параметром за замовчуванням ми можемо обробити помилку заздалегідь.

Деструкція масиву та об'єкта

Знищення полегшує присвоєння значень масиву або об’єкта новій змінній.

Старий синтаксис:

З синтаксисом ES6:

У ES5 ми повинні присвоїти кожне значення кожній змінній. За допомогою ES6 ми просто розміщуємо наші значення у фігурних дужках, щоб отримати будь-які властивості об’єкта.

Примітка:якщо ви призначите змінну, яка не ідентична назві властивості, вона повернеться невизначеною. Наприклад, якщо ім’я властивості таке, nameі ми присвоюємо його ausernameзмінна,він повернеться невизначеним.

Ми завжди повинні називати змінну так само, як і ім’я властивості. Але у випадку, якщо ми хочемо перейменувати змінну, ми можемо :замість неї використовувати двокрапку .

For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.

Import and export

Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.

If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?

It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.

For example, we have two files. The first is named detailComponent.jsand the second is namedhomeComponent.js.

In detailComponent.jswe are going to export the detail function.

And if we want to use this function in homeComponent.js,we will just use import.

If we want to import more than one module, we just put them within curly brackets.

So cool, isn’t it?!

Promises

Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!

If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: resolve and reject to handle an expected error.

Note: the fetch function returns a Promise itself!

const url="//jsonplaceholder.typicode.com/posts";
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Now if you log your console it will return an array of data.

Rest parameter and Spread operator

The rest parameters are used to get the argument of an array, and return a new array.

The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?']; const Func=(...anArray)=>{ return anArray; } console.log(Func(arr)); //output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Classes

Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.

To create a class, use the class keyword followed by the name of the class with two curly brackets.

Now we can access the class methods and properties using the new keyword.

class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// said

Для успадкування від іншого класу використовуйте extendsключове слово, за яким слідує ім’я класу, від якого потрібно успадкувати.

Ви можете дізнатись більше про Класитут.

ES6 має інші дивовижні можливості - ви можете вивчити їх тут.

Висновок

Сподіваюся, вам, хлопці, ця стаття виявилася корисною, і я сподіваюся, що я зміг представити вам деякі функції ES6. Якщо так, підпишіться на цей поштовий список, щоб дізнатись більше про теми інтерфейсу. Дякую за ваш час.

До речі, нещодавно я працював із потужною групою інженерів програмного забезпечення для одного зі своїх мобільних додатків. Організація була чудовою, і продукт був доставлений дуже швидко, набагато швидше, ніж інші фірми та фрілансери, з якими я працював, і я думаю, що можу чесно рекомендувати їх для інших проектів. Напишіть мені електронного листа, якщо хочете зв’язатись - [email protected]