Arrow Functions:

• Provides a more concise syntax for writing functions.
• Does not have its own this, arguments, super, or new.target bindings, which makes them ideal for situations where you want to retain the lexical this value from the surrounding code.

const sum = (a, b) => a + b;

Classes:

• JavaScript classes introduced in ES6 are primarily syntactical sugar over JavaScript's existing prototype-based inheritance and offer a much cleaner and clearer syntax to create objects and deal with inheritance.

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Modules:

• ES6 modules include support for exporting and importing functions, objects, and classes, which greatly enhances code reusability and maintainability.

// file1.js
export const pi = 3.14159;

// file2.js
import { pi } from './file1.js';
console.log(pi); // 3.14159

Template Literals:

• Template literals provide an easy way to create multiline strings and perform string interpolation, facilitating more readable code.

const user = 'Jane';
console.log(`Hi ${user}, welcome back!`);

Destructuring:

• Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is useful for extracting multiple properties from an object or array simultaneously.

const [x, y] = [1, 2];
const {a, b} = {a:1, b:2};

Spread/Rest Operators:

• The spread operator allows an iterable such as an array to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. The rest operator does the opposite, collecting multiple elements and condensing them into a single element.

const nums = [1, 2, 3];
const numsCopy = [...nums]; // Spread as copying an array

function sum(...args) { // Rest as collecting function arguments
    return args.reduce((total, n) => total + n, 0);
}

A traditional function to filter even numbers from an array:

function filterEvens(numbers) {
    return numbers.filter(function(number) {
        return number % 2 === 0;
    });
}

A traditional function to compute the total of an array of numbers:

function computeTotal(numbers) {
    return numbers.reduce(function(total, number) {
        return total + number;
    }, 0);
}

Refactored to use an arrow function:

const filterEvens = numbers => numbers.filter(number => number % 2 === 0);

Refactored to use an arrow function:

const computeTotal = numbers => numbers.reduce((total, number) => total + number, 0);

Maintainability: Smaller, well-defined modules are easier to understand, debug, and update compared to large monolithic code bases. Each module has a clear focus and can be maintained independently of others.

Reusability: Modules allow you to reuse code across different parts of an application or even between different projects. For example, a module handling date and time operations can be reused wherever such functionality is required without duplication.

Namespace Management: Modules help in avoiding global namespace pollution. They encapsulate their variables and functions, exposing only what is explicitly exported. This reduces the risk of naming conflicts across your codebase.

Dependency Management: With modules, it's clear which files depend on which other files, making the structure of projects clearer and helping to ensure that scripts are loaded in the correct order.

Data Module: Holds the user data.

• data.js:

  const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
  export default users;
  

Logic Module: Contains business logic, like a function to find a user by name.

• userOperations.js:

  import users from './data.js';
  
  export function findUserByName(name) {
      return users.find(user => user.name === name);
  }
  

Presentation Module: Handles displaying information in the console or to the DOM.

• presentation.js:

  import { findUserByName } from './userOperations.js';
  
  export function displayUser(name) {
      const user = findUserByName(name);
      if(user) {
          console.log(`User Found: Name - ${user.name}, Age - ${user.age}`);
      } else {
          console.log('User not found');
      }
  }
  

Main Application File:

• app.js:

  import { displayUser } from './presentation.js';
  
  displayUser('Alice');  // Output: User Found: Name - Alice, Age - 25
  displayUser('Bob');  // Output: User Found: Name - Bob, Age - 30
  

Սլաքի գործառույթները.

• Ապահովում է ավելի հակիրճ շարահյուսություն գրելու գործառույթների համար:
• Չունի իր սեփական this, arguments, super, կամ new.targetկապանքները, ինչը նրանց դարձնում է իդեալական այն իրավիճակների համար, երբ ցանկանում եք պահպանել բառապաշարի thisարժեքը շրջապատող ծածկագրից:

const sum = (a, b) => a + b;

Դասեր:

• ES6-ում ներդրված JavaScript դասերը հիմնականում շարահյուսական են JavaScript-ի գոյություն ունեցող նախատիպի վրա հիմնված ժառանգության նկատմամբ և առաջարկում են շատ ավելի մաքուր և հստակ շարահյուսություն՝ օբյեկտներ ստեղծելու և ժառանգության հետ կապված:

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Մոդուլներ:

• ES6 մոդուլները ներառում են գործառույթների, օբյեկտների և դասերի արտահանման և ներմուծման աջակցություն, ինչը մեծապես մեծացնում է կոդի կրկնակի օգտագործման և պահպանման հնարավորությունը:

// file1.js
export const pi = 3.14159;

// file2.js
import { pi } from './file1.js';
console.log(pi); // 3.14159

Կաղապարի բառացիությունը.

• Կաղապարների բառացիները հեշտ ճանապարհ են ստեղծում բազմագիծ տողեր ստեղծելու և տողերի ինտերպոլացիա կատարելու համար՝ հեշտացնելով ավելի ընթեռնելի ծածկագիրը:

const user = 'Jane';
console.log(`Hi ${user}, welcome back!`);

Կործանում:

• Destructuring-ը թույլ է տալիս կապել՝ օգտագործելով օրինաչափությունների համընկնումներ՝ համապատասխան զանգվածների և օբյեկտների աջակցությամբ: Destructuring-ը օգտակար է օբյեկտից կամ զանգվածից միաժամանակ մի քանի հատկություններ հանելու համար:

const [x, y] = [1, 2];
const {a, b} = {a:1, b:2};

Տարածման/Հանգստի օպերատորներ.

• Տարածման օպերատորը թույլ է տալիս կրկնվող, օրինակ՝ զանգվածի ընդլայնումը այն վայրերում, որտեղ ակնկալվում են զրո կամ ավելի արգումենտներ (ֆունկցիայի կանչերի համար) կամ էլեմենտներ (զանգվածի բառացիների համար): Մնացած օպերատորը հակառակն է անում՝ հավաքելով բազմաթիվ տարրեր և խտացնելով դրանք մեկ տարրի մեջ։

const nums = [1, 2, 3];
const numsCopy = [...nums]; // Spread as copying an array

function sum(...args) { // Rest as collecting function arguments
    return args.reduce((total, n) => total + n, 0);
}

Զույգ թվերը զանգվածից զտելու ավանդական ֆունկցիա.

function filterEvens(numbers) {
    return numbers.filter(function(number) {
        return number % 2 === 0;
    });
}

Ավանդական ֆունկցիա՝ թվերի զանգվածի ընդհանուր գումարը հաշվելու համար.

function computeTotal(numbers) {
    return numbers.reduce(function(total, number) {
        return total + number;
    }, 0);
}

Վերափոխվել է սլաքի ֆունկցիան օգտագործելու համար.

const filterEvens = numbers => numbers.filter(number => number % 2 === 0);

Վերափոխվել է սլաքի ֆունկցիան օգտագործելու համար.

const computeTotal = numbers => numbers.reduce((total, number) => total + number, 0);

Պահպանելիություն . ավելի փոքր, լավ սահմանված մոդուլները ավելի հեշտ են հասկանալ, կարգաբերել և թարմացնել՝ համեմատած խոշոր մոնոլիտ կոդերի հիմքերի հետ: Յուրաքանչյուր մոդուլ ունի հստակ ուշադրություն և կարող է պահպանվել մյուսներից անկախ:

Կրկնակի օգտագործման հնարավորություն . մոդուլները թույլ են տալիս վերօգտագործել կոդը հավելվածի տարբեր մասերում կամ նույնիսկ տարբեր նախագծերի միջև: Օրինակ, մոդուլի մշակման ամսաթվի և ժամի գործառնությունները կարող են կրկին օգտագործվել այնտեղ, որտեղ նման գործառույթ է պահանջվում՝ առանց կրկնօրինակման:

Անվան տարածության կառավարում . մոդուլներն օգնում են խուսափել գլոբալ անվանումների տարածքի աղտոտումից: Նրանք ամփոփում են իրենց փոփոխականներն ու գործառույթները՝ բացահայտելով միայն այն, ինչ բացահայտ արտահանվում է: Սա նվազեցնում է ձեր կոդերի բազայի միջև կոնֆլիկտների անվանման ռիսկը:

Կախվածության կառավարում . մոդուլների միջոցով պարզ է, թե որ ֆայլերը որ այլ ֆայլերից են կախված՝ ավելի պարզ դարձնելով նախագծերի կառուցվածքը և օգնելով ապահովել, որ սցենարները բեռնված են ճիշտ հերթականությամբ:

Տվյալների մոդուլ . պահում է օգտատիրոջ տվյալները:

• data.js :

  const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
  export default users;
  

Տրամաբանական մոդուլ . Պարունակում է բիզնես տրամաբանություն, ինչպես օգտատիրոջ անունով գտնելու գործառույթը:

• userOperations.js :

  import users from './data.js';
  
  export function findUserByName(name) {
      return users.find(user => user.name === name);
  }
  

Ներկայացման մոդուլ . Բռնակներ ցուցադրում է տեղեկատվություն վահանակում կամ DOM-ում:

• ներկայացում.js :

  import { findUserByName } from './userOperations.js';
  
  export function displayUser(name) {
      const user = findUserByName(name);
      if(user) {
          console.log(`User Found: Name - ${user.name}, Age - ${user.age}`);
      } else {
          console.log('User not found');
      }
  }
  

Հիմնական հայտի ֆայլ .

• app.js :

  import { displayUser } from './presentation.js';
  
  displayUser('Alice');  // Output: User Found: Name - Alice, Age - 25
  displayUser('Bob');  // Output: User Found: Name - Bob, Age - 30
  

Функции стрелок:

• Предоставляет более краткий синтаксис для написания функций.
• Не имеет собственных this, arguments, superили new.targetпривязок, что делает их идеальными для ситуаций, когда вы хотите сохранить лексическое thisзначение из окружающего кода.

const sum = (a, b) => a + b;

Классы:

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

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Модули:

• Модули ES6 включают поддержку экспорта и импорта функций, объектов и классов, что значительно повышает удобство повторного использования и сопровождения кода.

// file1.js
export const pi = 3.14159;

// file2.js
import { pi } from './file1.js';
console.log(pi); // 3.14159

Литералы шаблона:

• Литералы шаблонов предоставляют простой способ создания многострочных строк и выполнения интерполяции строк, что делает код более читаемым.

const user = 'Jane';
console.log(`Hi ${user}, welcome back!`);

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

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

const [x, y] = [1, 2];
const {a, b} = {a:1, b:2};

Операторы распространения/остановки:

• Оператор расширения позволяет расширять итерацию, например массив, в тех местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива). Оператор rest делает обратное, собирая несколько элементов и объединяя их в один элемент.

const nums = [1, 2, 3];
const numsCopy = [...nums]; // Spread as copying an array

function sum(...args) { // Rest as collecting function arguments
    return args.reduce((total, n) => total + n, 0);
}

Традиционная функция для фильтрации четных чисел из массива:

function filterEvens(numbers) {
    return numbers.filter(function(number) {
        return number % 2 === 0;
    });
}

Традиционная функция для вычисления суммы массива чисел:

function computeTotal(numbers) {
    return numbers.reduce(function(total, number) {
        return total + number;
    }, 0);
}

Рефакторинг для использования функции стрелки:

const filterEvens = numbers => numbers.filter(number => number % 2 === 0);

Рефакторинг для использования функции стрелки:

const computeTotal = numbers => numbers.reduce((total, number) => total + number, 0);

Удобство сопровождения . Меньшие, четко определенные модули легче понимать, отлаживать и обновлять по сравнению с большими монолитными базами кода. Каждый модуль имеет четкую направленность и может поддерживаться независимо от других.

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

Управление пространством имен : модули помогают избежать глобального загрязнения пространства имен. Они инкапсулируют свои переменные и функции, раскрывая только то, что явно экспортируется. Это снижает риск конфликтов имен в вашей кодовой базе.

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

Модуль данных : содержит пользовательские данные.

• данные.js :

  const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
  export default users;
  

Модуль логики : содержит бизнес-логику, например функцию поиска пользователя по имени.

• userOperations.js :

  import users from './data.js';
  
  export function findUserByName(name) {
      return users.find(user => user.name === name);
  }
  

Модуль презентации : управляет отображением информации в консоли или в DOM.

• презентация.js :

  import { findUserByName } from './userOperations.js';
  
  export function displayUser(name) {
      const user = findUserByName(name);
      if(user) {
          console.log(`User Found: Name - ${user.name}, Age - ${user.age}`);
      } else {
          console.log('User not found');
      }
  }
  

Основной файл приложения :

• приложение.js :

  import { displayUser } from './presentation.js';
  
  displayUser('Alice');  // Output: User Found: Name - Alice, Age - 25
  displayUser('Bob');  // Output: User Found: Name - Bob, Age - 30