03.06.2024 в 18:14

Изучение современных возможностей JavaScript: ES6 и далее

Как вы, возможно, уже знаете, JavaScript — это интерпретируемый, мультипарадигмальный язык программирования высокого уровня, соответствующий спецификации программирования ECMAScript. Его синтаксис основан на языках Java и C — многие структуры из этих языков применимы и к JavaScript.

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

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

ES6 (ECMAScript 2015)

В синтаксисе ES6 реализовано множество возможностей, но в рамках этой статьи мы рассмотрим несколько ключевых.

1. let и const

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

function num() {

for(var i = 0; i < 5; i++) {
        console.log(i)
    };
};
num()
0
1
2
3
4  //Output

Мы изменим приведенный выше код, добавив console.log(i) за пределами блока, и посмотрим, что он выведет.

function num() {

for(var i = 0; i < 5; i++) {
        console.log(i)
    };
    console.log(i)
};
num();
0
1
2
3
4
5  //Output

В цикле for console.log(i) по-прежнему выводит значения 0 - 4. После завершения цикла i все еще доступен вне области видимости, которая выводит 0 - 5 перед проверкой и выходом из условия.

Объявление var не соблюдает область видимости блока, то есть i остается в области видимости даже после завершения цикла. В этой ситуации лучше использовать ключевое слово let для более эффективного кода.

function num() {

for(let i = 0; i < 5; i++) {
        console.log(i)
    };
};
num();

Если console.log объявлен вне области видимости блока цикла for, в консоли будет разобрана ошибка и выведено сообщение ReferenceError.

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

let x = 2;
x = 1;

console.log(x);

1 //Output

Если заменить let на const, в консоль будет выведена ошибка.

const x = 2;

console.log(x);
2 //Output

x - это константа.

2. Объекты

С точки зрения объектно-ориентированного программирования, когда функция находится внутри объекта, мы называем этот объект Method.

//ES5

const personalInfo = {
    name: 'Michael Unah',
    gender: 'Male',
    address: function () {
        return {
            city: 'Abuja',
            country: 'Nigeria',
        };
    }
};
console.log(personalInfo.name);
console.log(personalInfo.address());
console.log(personalInfo.address().city);

Используя этот синтаксис, мы пишем меньше кода.

//ES6

const personalInfo = {
    name: 'Michael Unah',
    gender: 'Male',
    address () {
        return {
            city: 'Abuja',
            country: 'Nigeria',
        };
    },
};
console.log(personalInfo.name);
console.log(personalInfo.address());
console.log(personalInfo.address().city);

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

//ES5

const tasks = [
    { id: 1, isActive: true },
    { id: 2, isActive: true },
    { id: 3, isActive: false }
];
const activeTasks = tasks.filter( function(tasks) {
    return tasks.isActive;
}); 
console.log(activeTasks);

Это делает код более чистым и уменьшает количество шума в нем.

//ES6

const tasks = [
    { id: 1, isActive: true },
    { id: 2, isActive: true },
    { id: 3, isActive: false }
];
const activeTasks = tasks.filter(tasks => tasks.isActive);
console.log(activeTasks);

4. Array.Map()

В ES6 появился новый метод под названием map. Он используется для вывода списка элементов.

const colors = ['red', 'green', 'purple'];
const items = colors.map(colors => `<li>${colors}</li>`);

console.log(items);

5. Деструктуризация объектов

//ES5

const address = {
    street: 'Saburi 1',
    city: 'Abuja',
    country: 'Nigeria'
};
const street  = address.street;
const city = address.city;
const country = address.country;

console.log(street);
console.log(city);
console.log(country);

//ES6

const address = {
    street: 'Saburi 1',
    city: 'Abuja',
    country: 'Nigeria'
};
const { street: st, city: cy, country: ct} = address;
console.log(st);
console.log(cy);
console.log(ct);

6. Оператор разброса

//ES5

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = first.concat(second);
console.log(combined);

//ES6

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined);

7. Шаблонные литералы

//ES5

let firstName = 'Michael';
let lastName = 'Unah';
let fullName = firstName + ' ' + lastName;

console.log(fullName);

//ES6

let firstName = 'Michael';
let lastName = 'Unah';
let fullName = `${firstName} ${lastName}`;

console.log(fullName);

Шаблонные литералы также можно использовать для определения свойств объекта.

const personalInfo = {

address() {
        return {
            city: 'Abuja',
            street: 'Saburi 1',
            country: 'Nigeria'
        };
    },
};

const myAddress = `${ city.address() } ${ street.address() } ${ country.address() }`;
console.log(myAddress)

8. Классы

class Product {

constructor(name, price ){
        this.name = name;
        this.price = price;
    };
    displayProduct(){
        console.log(`product: ${this.name}`);
        console.log(`price: $${this.price}`);
    };
};

const product1 = new Product('shirt', 20);

product1.displayProduct();

До появления классов ES6 классы не поддерживались в старых версиях JavaScript. Объектно-ориентированное программирование осуществлялось с помощью функции конструктора и свойства прототипа.

9. Ключевое слово this

Ключевое слово this даёт ссылки на объект, выполняющий текущую функцию.

const product = {

name: 'Airforce 1',
    price: '$200',
    priceTag() {
      console.log(`${ this.name }: ${ this.price }`)
    },
};
product.priceTag();

10. Промисы

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

const myPromise = new Promise((resolve, reject) => {

// Simulating an asynchronous operation using setTimeout
    setTimeout(() => {
        const success = true; // Simulate a successful operation
        if (success) {
            resolve('Operation was successful!');
        } else {
            reject('Operation failed.');
        }
    }, 1000);
});  

// Using the Promise

myPromise
    .then((message) => {
        console.log(message); // Output: Operation was successful!
    })
    .catch((error) => {
        console.error(error);
    });

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

11. Асинхронные функции

async await были введены в ECMAScript 2017(ES8). Эти ключевые слова позволяют писать асинхронный код, который выглядит синхронным, что облегчает его чтение и сопровождение. Они построены на основе промисов и помогают упростить работу с асинхронными операциями.

Используя async await, мы можем сделать наш код похожим на синхронный.

// A function that returns a promise

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched successfully!');
        }, 1000);
    });
}

// An async function that uses await

const getData = async () => {
    try {
        const result = await fetchData(); // Waits for the promise to resolve
        console.log(result); // Output: Data fetched successfully!
    } catch (error) {
        console.error(error);
    }
}

// Calling the async function
getData();

Заключение

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

Источник:

Exploring Modern JavaScript Features: ES6 and Beyond | by Michael Unah | Jun, 2024 | Medium

#JavaScript #React

Войти на сайт