Блочные привязки

Исторически то, как функционируют объявления переменных, было сложным аспектом программирования на JavaScript. В большинстве языков программирования на основе C переменные (или привязки) создаются в месте объявления. Однако в JavaScript это не так. Где фактически генерируются переменные, определяется тем, как они объявляются, а ECMAScript 6 предоставляет опции для упрощения управления областью действия.

Объявления Var и поднятие

Независимо от того, объявлена ​​ли переменная в начале функции, она считается локальной областью видимости; если он объявлен вне функции, он считается глобальным. В качестве иллюстрации-

function getValue(condition) {
 if (condition) {
 var value = “Red”;
 return value;
 } else {
 // Value doesn’t exist
 return null;
 }
 // Value doesn’t exist
}

Как мы видим, переменная объявлена ​​в конце функции. Это позволяет получить доступ к значению переменной из состояния else, но доступ возвращает неизвестное значение, поскольку значение переменной не инициализировано в блоке else; он инициализируется только в предложении If.

Объявления блочного уровня

Объявления на уровне блока определяют переменные, недоступные за пределами области действия определенного блока. Объемы блоков разрабатываются следующим образом:

  1. Внутри функции
  2. Внутри блока (обозначается символами { и })

Пусть декларации

Синтаксис объявлений let и var идентичен. Вместо объявления var вы можете использовать let. И если вы сделаете это, имейте в виду, что охват переменной останется в пределах текущего блока, так как var поднимается на вершину функции, а let — нет. В качестве иллюстрации-

function getValue(condition) {
 if (condition) {
 var value = “Red”;
 return value;
 } else {
 // Value doesn’t exist
 return null;
 }
 // Value doesn’t exist
}

Константные объявления

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

var maxLength = 30;
let maxLength = 40; // Syntax error

Связывание блоков в циклах:

В большинстве случаев разработчики хотят, чтобы область видимости переменных внутри циклов for в JavaScript была на уровне блоков. Для этого мы должны использовать let not var, так как var поднимается.

for (var i = 0; i < 10; i++) {
 process(items[i]);
}
console.log(i); // i is still accessible here

Вне цикла i доступен благодаря использованию var.

for (let i = 0; i < 10; i++) {
 process(items[i]);
}
console.log(i); // i is not accessible here — throws an error

Вне цикла i недоступен из-за использования let. В результате будет выброшена ошибка.

Глобальные привязки блоков

Как мы уже знаем, let и const отличаются от var. Когда var используется в глобальной области видимости, глобальный объект получает новое свойство (окно в браузерах). Это означает, что вы можете использовать var для перезаписи существующего глобального, например:

// in a browser
var expression = “Hello!”;
console.log(window.expression); // “Hello!”
var x = “Hi!”;
console.log(window.x); // “Hi!”

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

// in a browser
var expression = “Hello!”;
console.log(window.expression == expression); // “Hello!”
var x = “Hi!”;
console.log(window.x); // “Hi!”
console.log(“x” in window); //False

Значения параметров по умолчанию в ECMAScript 6

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

function add(x, y = 12) {
 // x=0 because of default value
 return x + y;
}
console.log(add(23, 4)); // 27
console.log(add(34)); // 46

Работа с безымянными параметрами

Функции JavaScript не накладывают ограничения на количество передаваемых параметров. Вы всегда можете указать меньше или больше параметров, чем указано явно. Значения параметров по умолчанию указывают, когда функция может принимать меньше параметров, и ECMAScript 6 стремился улучшить ситуацию, когда передается больше параметров, чем указано. Более ранние версии JavaScript не поддерживали использование безымянных параметров в функциях, но ES6 добавляет параметр rest, чтобы упростить использование безымянных параметров. Параметр rest принимает массив из любого количества аргументов.

function checkArgs(…args) {
 console.log(args.length); // 2
 console.log(arguments.length); // 2
 console.log(args[0], arguments[0]); // a a
 console.log(args[1], arguments[1]); // b b
}
checkArgs(“a”, “b”);
// 2
// 2
// a a
// b b

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

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

let values = [35, 54, 65, 100];
// equivalent to
// console.log(Math.max(35, 54, 65, 100));
console.log(Math.max(…values)); // 100

Функции блочного уровня

Хотя объявление функции внутри блока (функция на уровне блока) технически было синтаксической ошибкой в ​​ECMAScript 3 и более ранних версиях, все браузеры поддерживали его. К сожалению, поскольку каждый браузер, поддерживающий синтаксис, вел себя по-разному, считается лучшей практикой избегать объявления функций внутри строк (лучшей альтернативой является использование функционального выражения).
ES6 поддерживает функции блочного уровня, которые могут быть подняты выше. функцию или в глобальную область. Например:

if (true) {
 console.log(typeof doSomething); // “function”
 function doSomething() {
 // …
 }
 doSomething();
}
console.log(typeof doSomething); // “function”

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

Стрелочная функция — одна из самых интригующих новых функций в ECMAScript 6. Как следует из названия, стрелочные функции — это функции, описанные с использованием нового синтаксиса, включающего «стрелку» (=›). Однако стрелочные функции ведут себя значительно иначе, чем стандартные функции JavaScript, во многих важных аспектах. В ES6 мы можем писать функции в стиле сортировщика, который называется стрелочной функцией. Кроме того, его легче читать и писать, чем стандартный вызов функций. Например:

var x = (value) => value;
// effectively equivalent to:
var x = function (value) {
 return value;
};
var sum = (num1, num2) => num1 + num2;
// effectively equivalent to:
var sum = function (num1, num2) {
 return num1 + num2;
};
var getName = () => “Harry”;
// effectively equivalent to:
var getName = function () {
 return “Harry”;
};