Основная концепция JavaScript: ES6, Function #JS Tutorial part3

JavaScript ES6/ES2015

Новые функции в ES6

• Ключевое слово let
• Ключевое слово const
• Стрелочные функции JavaScript
• Класс JavaScript
• Обещание JavaScript
• Символ JavaScript
• Значения параметров по умолчанию
• Параметр покоя функции
• Array.find()
• Array.findIndex()
• Новые свойства номера
• Новые числовые методы
• Новые глобальные методы

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

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

function getValue(condition){
  if(condition){var value = 'blue'; return value}
  else{ return null}
}

За кулисами движок JavaScript изменяет функцию getValue, чтобы она выглядела следующим образом:

function getValue(condition){
  var value;
  if(condition){value = 'blue'; return value}
  else{ return null}
}

Декларация ценности поднимается наверх. Значение переменной на самом деле по-прежнему доступно из предложения else. При доступе из предложения else значение переменной будет неопределенным, поскольку оно не было инициализировано, а инициализируется только в предложении If.

Объявления на уровне блоков:

1. Внутри функции
2. Внутри блока { \\code block }

Объявления Let
Синтаксис объявления let аналогичен синтаксису var. В основном вы можете заменить var на let для объявления переменной, но ограничение — только текущий блок кода. Вот пример:

function getValue(condition){
  if(condition){let value = 'blue'; return value}
  else{ return null}
}

Без повторного объявления:

Если идентификатор уже был определен в области видимости, то использование идентификатора в объявлении let внутри этой области приведет к возникновению ошибки. Например:

var count = 30;
let count = 40;

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

var count = 30;
if(condition){
   let count = 40;
}

Постоянные объявления:

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

const maxItems = 30;
константное имя;

Константы против объявлений Let:

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

if(condition){
  const maxItems = 5;
}

Объявление const вызывает ошибку, если оно сделано с идентификатором, который является уже определенной переменной в той же области. Неважно, была ли переменная объявлена ​​с помощью var или let. Например, рассмотрим этот код:

var message = 'Hello!';
let age = 25;
const message = 'Goodbye!';
const age =30;

Попытка присвоить константу ранее определенной константе вызовет ошибку как в строгом, так и в нестрогом режимах:

const maxItems = 5;
maxItems = 6; //throw error

Это не выдавало ошибку в случае let. В качестве примера ниже:

let maxItems = 5;
let = 6; //throw error

пусть maxItems = 5;

пусть = 6; // выдает ошибку

Объявление объектов с помощью Const:

Объявления const для объектов не препятствуют модификации объектов. Например:

const person = {
 name:'Rasel};
person.name = 'Greg';
// throws an error
person = {
 name: 'Greg'
};

** Просто помните: const предотвращает модификацию привязки, а не модификацию связанного значения.

Временная мертвая зона:

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

if (condition) {
 console.log(typeof value); // ReferenceError!
 let value = 'blue';
}

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

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

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

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

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

В этом примере переменная i существует только в цикле for.

Функции в циклах:

Характеристики var делают создание функций внутри циклов проблематичным, потому что переменные цикла доступны из-за пределов цикла. Рассмотрим следующий код:

var funcs = [];
for (var i = 0; i < 10; i++) {
 funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
 func(); // outputs the number '10' ten times
});

Он выводит число 10 десять раз подряд. Переменная i имеет значение 10 после завершения цикла, поэтому при вызове console.log(i) это значение печатается каждый раз.

Чтобы решить эту проблему, разработчики используют немедленно вызываемые функциональные выражения (IIFE) внутри циклов, чтобы принудительно создать новую копию переменной, которую они хотят перебрать, как в этом примере:

var funcs = [];
for (var i = 0; i < 10; i++) {
 funcs.push((function(value) {
 return function() {
 console.log(value);
 }
 }(i)));
}
funcs.forEach(function(func) {
 func(); // outputs 0, then 1, then 2, up to 9
});

**К счастью, привязка на уровне блоков с помощью let и const в ECMAScript 6 может упростить этот цикл.

Пусть объявления в циклах:

На каждой итерации цикл создает новую переменную и инициализирует ее новым значением с тем же именем, что и раньше. Рассмотрим пример:

var funcs = [];
for (let i = 0; i < 10; i++) {
 funcs.push(function() {
 console.log(i);
 });
}
funcs.forEach(function(func) {
 func(); // outputs 0, then 1, then 2, up to 9
})

Для получения дополнительной информации об этом факте также следуйте этому примеру:

var funcs = [],
 object = {
 a: true,
 b: true,
 c: true
 };
for (let key in object) {
 funcs.push(function() {
 console.log(key);
 });
}
funcs.forEach(function(func) {
 func(); // outputs 'a', then 'b', then 'c'
});

В этом примере цикл for-in показывает то же поведение, что и цикл for. Каждый раз в цикле создается новая привязка клавиш, поэтому каждая функция имеет свою собственную копию ключевой переменной. В результате каждая функция выводит разные значения. Если бы var использовалась для объявления ключа, все функции вывели бы «c».

Объявления констант в циклах:

Спецификация ECMAScript 6 явно не запрещает объявления констант в циклах; однако существуют различные варианты поведения в зависимости от типа используемого вами цикла. Для обычного цикла for вы можете использовать const в инициализаторе, но цикл выдаст предупреждение, когда вы попытаетесь изменить значение. Например:

var funcs = [];
// throws an error after one iteration
for (const i = 0; i < 10; i++) {
 funcs.push(function() {
 console.log(i);
 });
}

В этом коде переменная i объявлена ​​как константа. Первая итерация цикла, где i равно 0, выполняется успешно. При выполнении i++ возникает ошибка, потому что он пытается изменить константу.

С другой стороны, при использовании в циклах for-in или for-of константная переменная ведет себя так же, как и переменная let. Таким образом, следующее не должно вызывать ошибки:

var funcs = [],
 object = {
 a: true,
 b: true,
 c: true
 };
// doesn’t cause an error
for (const key in object) {
 funcs.push(function() {
 console.log(key);
 });
}
funcs.forEach(function(func) {
 func(); // outputs 'a', then 'b', then 'c'
});

Циклы for-in и for-of работают с const, потому что инициализатор цикла создает новую привязку на каждой итерации цикла, а не пытается изменить значение существующей привязки (здесь ключ — это a, b и c).

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

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

// in a browser
var RegExp = 'Hello!';
console.log(window.RegExp); // 'Hello!'
var ncz = 'Hi!';
console.log(window.ncz); // 'Hi!'

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

// in a browser
let RegExp = 'Hello!';
console.log(RegExp); // 'Hello!'
console.log(window.RegExp === RegExp); // false
const ncz = 'Hi!';
console.log(ncz); // 'Hi!'
console.log('ncz' in window); // false

Эта возможность делает let и const намного более безопасным для использования в глобальной области видимости, когда вы не хотите создавать свойства для глобального объекта.

Функции JavaScript

Что такое функция?

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

• Функции сокращают повторение кода в программе. Функция позволяет выделить часто используемый блок кода в один компонент. Теперь вы можете выполнять ту же задачу, вызывая эту функцию в любом месте вашего скрипта, без необходимости снова и снова копировать и вставлять один и тот же блок кода.
• Функции значительно упрощают поддержку кода. Поскольку функцию, созданную один раз, можно использовать много раз, любые изменения, сделанные внутри функции, автоматически внедряются во все места, не затрагивая несколько файлов.
• Функции облегчают устранение ошибок — Когда программа разбита на функции, в случае возникновения ошибки вы точно знаете, какая функция вызвала ошибку и где ее найти. Поэтому исправлять ошибки становится намного проще.

В следующем разделе показано, как определять и вызывать функции в ваших сценариях.

Определение и вызов функции

Объявление функции начинается с ключевого слова function, за которым следует имя функции, которую вы хотите создать, затем круглые скобки, например (), и, наконец, поместите код вашей функции в фигурные скобки {}. Вот основной синтаксис объявления функции:

// Defining function
function sayHello() {
    alert("Hello, welcome to this website!");
}
 
// Calling function
sayHello(); // 0utputs: Hello, welcome to this website!

Как только функция определена, ее можно вызвать (вызвать) из любого места документа, введя ее имя, за которым следует набор круглых скобок, например sayHello() в приведенном выше примере.

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

Добавление параметров к функциям

Вы можете указать параметры, когда вы определяете свою функцию для приема входных значений во время выполнения. Параметры работают как переменные-заполнители внутри функции; они заменяются во время выполнения значениями (известными как аргументы), предоставленными функции во время вызова.

Функция displaySum() в следующем примере принимает два числа в качестве аргументов, просто складывает их вместе, а затем отображает результат в браузере.

// Defining function
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Calling function
displaySum(6, 20); // 0utputs: 26
displaySum(-5, 17); // 0utputs: 12

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

// Defining function
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Calling function
showFullname("Clark", "Kent"); // 0utputs: Clark Kent
showFullname("John"); // 0utputs: John undefined

Значения по умолчанию для функциональных параметров ES6

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

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}
sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

В то время как до ES6 для достижения того же нам нужно было написать что-то вроде этого:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}
sayHello(); // 0utputs: Hello, Guest
sayHello('John'); // 0utputs: Hello, John

Возврат значений из функции

В результате функция может вернуть значение сценарию, вызвавшему функцию, с помощью оператора return. Значение может быть любого типа, включая массивы и объекты.

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

// Defining function
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Displaying returned value
alert(getSum(6, 20)); // 0utputs: 26
alert(getSum(-5, 17)); // 0utputs: 12

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

// Defining function
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Store returned value in a variable
var all = divideNumbers(10, 2);
 
// Displaying individual values
alert(all[0]); // 0utputs: 10
alert(all[1]); // 0utputs: 2
alert(all[2]); // 0utputs: 5

Работа с функциональными выражениями

Синтаксис, который мы использовали ранее для создания функций, называется объявлением функции. Существует еще один синтаксис для создания функции, который называется функциональным выражением.

// Function Declaration
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Function Expression
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

После того, как выражение функции было сохранено в переменной, эту переменную можно использовать как функцию:

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // 0utputs: 15
 
var sum = getSum(7, 25);
alert(sum); // 0utputs: 32

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

declaration(); // Outputs: Hi, I'm a function declaration!
function declaration() {
    alert("Hi, I'm a function declaration!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Hi, I'm a function expression!");
};

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

Функция объявления синтаксического анализа JavaScript перед выполнением программы. Следовательно, не имеет значения, вызывает ли программа функцию до того, как она будет определена, потому что JavaScript за кулисами поднял функцию на вершину текущей области видимости. Выражение функции не оценивается, пока оно не будет присвоено переменной; поэтому он все еще не определен при вызове.

Понимание области действия переменной

Однако вы можете объявить переменные в любом месте JavaScript. Но расположение объявления определяет степень доступности переменной в программе JavaScript, то есть, где переменная может быть использована или доступна. Эта доступность известна как переменная область.

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

// Defining function
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Outputs: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined

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

var greet = "Hello World!";
 
// Defining function
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Outputs: Hello World!
 
alert(greet); // Outputs: Hello World!