Javascript следующего поколения

Функции

• пусть и const
• Стрелочные функции
• экспорт и импорт
• Классы
• Параметры распространения и отдыха
• Разрушение
• Литералы шаблонов
• Функции массива
• Асинхронный код

пусть и const

разрешить

Ключевое слово let используется для объявления переменной блочной области, что означает, что переменная доступна только внутри блока, в котором она была объявлена. Блок определяется фигурными скобками {}

let можно переназначить другим значениям, но нельзя повторно объявить.

if (true) { 
   let x = 10;
   x=15; //reassigned
   console.log(x); // outputs 15 
} 
console.log(x); // Uncaught ReferenceError: x is not defined
let y= 5;
let y= 10; // Error: Identifier 'x' has already been declared

константа

Ключевое слово const используется для объявления константной переменной, что означает, что после того, как ей присвоено значение, ее нельзя переназначить. Как и let, он также имеет блочную область видимости.

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

const PI = 3.14;
PI = 3; // Uncaught TypeError: Assignment to constant variable.

if (true) {
  const x = 10;
  console.log(x); // outputs 10
}

console.log(x); // Uncaught ReferenceError: x is not defined

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

Стрелочные функции — это сокращенный синтаксис для создания функций в JavaScript. Он обеспечивает более лаконичный и выразительный способ записи функциональных выражений.

Syntax
(parameters) => { statements }

• Параметры: список входных параметров функции, заключенный в круглые скобки. Если функция не принимает параметров, скобки можно опустить или использовать пустую пару скобок().
• Стрелка: толстая стрелка =›, отделяющая параметры от тела функции.
• Тело функции: набор операторов, которые выполняются при вызове функции. Если функция состоит из одного выражения, фигурные скобки {} и ключевое слово return можно опустить.

// Function with no parameters
const greet = () => console.log('Hello!');

// Function with one parameter
const double = x => x * 2;

// Function with multiple parameters
const add = (x, y) => x + y;

// Function with multiple statements in the body
const printMessage = (name, message) => {
  console.log(`${name}: ${message}`);
};

Функции со стрелками имеют некоторые отличия в поведении от обычных функциональных выражений, например, как они обрабатывают ключевое слово this. Однако в большинстве случаев их можно использовать взаимозаменяемо с обычными функциями.

Преимущества:

• Краткий синтаксис: стрелочные функции имеют более лаконичный синтаксис, чем традиционные функции, что упрощает чтение и запись кода. Обычно для них требуется меньше кода и меньше символов, чем для традиционных функций, что помогает снизить вероятность ошибок.
• Неявный возврат. Функции со стрелками автоматически возвращают результат выражения или инструкции внутри тела функции без необходимости использования ключевого слова return. Это может помочь уменьшить объем кода, необходимого для написания функции, и сделать код более читабельным.
• Лексический this: стрелочные функции захватывают значение this из окружающей области, а не создают собственное this значение. Это может помочь избежать путаницы и ошибок при работе с thisв объектно-ориентированном программировании.
• Нет привязки this: функции со стрелками не связывают свои собственные this, поэтому значение this внутри функции совпадает со значением thisза пределами функции. Это может помочь упростить код и сделать его более понятным.
• Неявное связывание this: функции со стрелками наследуют значение this из своей лексической объемлющей области, что упрощает доступ к значению thisиз родительских функций или методов.

экспорт и импорт

В JavaScript операторы exports и imports используются для определения и доступа к модулям, которые являются автономными частями. кода, который можно повторно использовать в нескольких файлах и проектах.

экспорт:

Оператор exports используется для определения того, какие части модуля должны быть доступны для использования вне модуля. Его можно использовать для экспорта функций, переменных и объектов, а также классов, интерфейсов и других типов кода.

// math.js
const add = (x, y) => x + y;
const subtract = (x, y) => x - y;

exports.add = add;
exports.subtract = subtract;

В этом примере функции добавить и вычитать определены в модуле math.js, а функция Оператор >exports используется, чтобы сделать их доступными для использования за пределами модуля.

импорт:

Оператор imports используется для доступа к частям модуля, которые были экспортированы с помощью оператора exports. Его можно использовать для импорта функций, переменных и объектов, а также классов, интерфейсов и других типов кода.

// app.js
import { add, subtract } from './math.js';

console.log(add(1, 2));      // Outputs 3
console.log(subtract(5, 3)); // Outputs 2

В этом примере функции добавить и вычесть импортируются из модуля math.js с помощью import, а затем используются в модуле app.js.

Классы

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

class MyClass {
  constructor(param1, param2) {
    this.property1 = param1;
    this.property2 = param2;
  }

  method1() {
    // Method implementation
  }

  method2() {
    // Method implementation
  }
}

В этом примере класс MyClass определяется с помощью конструктора, который принимает два параметра и присваивает их свойствам класса property1 и property2. Класс также включает два метода, method1 и method2, которые можно вызывать для экземпляров класса.

• Чтобы создать экземпляр класса, вы можете использовать ключевое слово new:

const myObj = new MyClass('value1', 'value2');

Это создаст новый экземпляр MyClass со свойствами property1 и property2, для которых заданы значения value1 и . значение2 соответственно.

• Классы в JavaScript также могут наследовать свойства и поведение других классов с помощью ключевого слова extends:

class MySubClass extends MyClass {
  constructor(param1, param2, param3) {
    super(param1, param2);
    this.property3 = param3;
  }

  method3() {
    // Method implementation
  }
}

В этом примере класс MySubClass расширяет класс MyClass и добавляет новое свойство property3 и метод method3. Ключевое слово super используется для вызова конструктора родительского класса и передачи аргументов param1 и param2. Экземпляры MySubClass будут иметь доступ к методам и свойствам, определенным как в MyClass, так и в MySubClass.

Распространение и остальные параметры

В JavaScript параметры распространения и остатка — это способы работы с массивами и объектами, упрощающие написание более чистого и лаконичного кода.

Оператор спреда:

• Синтаксис расширения используется для «распространения» элементов массива или объекта в другой массив или объект.
• Он обозначается оператором ….

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

console.log(arr3); // Outputs [1, 2, 3, 4, 5, 6]

В этом примере синтаксис расширения используется для объединения массивов arr1 и arr2 в новый массив arr3.

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

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // Outputs { a: 1, b: 2, c: 3, d: 4 }

В этом примере синтаксис распространения используется для объединения объектов obj1 и obj2 в новый объектobj3.

Остальные параметры:

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

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // Outputs 10

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

Разрушение

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

Уничтожение с помощью массива

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a); // Outputs 1
console.log(b); // Outputs 2
console.log(c); // Outputs 3

В этом примере синтаксис деструктурирования используется для извлечения значений массива arr и присвоения их переменным a, b и с.

Уничтожение с помощью объекта

const obj = { a: 1, b: 2, c: 3 };

const { a, b, c } = obj;

console.log(a); // Outputs 1
console.log(b); // Outputs 2
console.log(c); // Outputs 3

В этом примере синтаксис деструктурирования используется для извлечения значений свойств объекта obj a, b и c и назначить их переменным с теми же именами.

const obj = { 
  a: 1, 
  b: { 
    c: 2, 
    d: 3 
  }
};

const { a, b: { c, d } } = obj;

console.log(a); // Outputs 1
console.log(c); // Outputs 2
console.log(d); // Outputs 3

const name = "John";
const age = 25;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message);//My name is John and I am 25 years old.

const multiline = `
  This is a
  multiline
  string.`;
console.log(multiline);

  This is a
  multiline
  string.

const str = 'hello';
const arr = Array.from(str);
console.log(arr); // Output: ['h', 'e', 'l', 'l', 'o']

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(num => num % 2 === 0);
console.log(evenNumber); // Output: 2

const numbers = [1, 2, 3, 4, 5];
const evenNumberIndex = numbers.findIndex(num => num % 2 === 0);
console.log(evenNumberIndex); // Output: 1

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(num => num % 2 === 0);
console.log(hasEvenNumber); // Output: true

const numbers = [2, 4, 6, 8, 10];
const areAllEvenNumbers = numbers.every(num => num % 2 === 0);
console.log(areAllEvenNumbers); // Output: true

const numbers = [1, 2, 3, 4, 5];
const includesThree = numbers.includes(3);
console.log(includesThree); // Output: true

const myPromise = new Promise((resolve, reject) => {
  // Do some asynchronous operation
  setTimeout(() => {
    const randomNum = Math.floor(Math.random() * 10);
    if (randomNum < 5) {
      resolve(randomNum); // fulfilled state
    } else {
      reject('Number is greater than or equal to 5'); // rejected state
    }
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result); // Output: A number less than 5
  })
  .catch((error) => {
    console.error(error); // Output: Number is greater than or equal to 5
  });

async function getData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

getData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers);