ES6 - Функции

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

function function_name() { 
   // function body 
}

Чтобы принудительно выполнить функцию, ее необходимо вызвать. Это называется вызовом функции. Ниже приведен синтаксис для вызова функции.

function_name()

Пример: определение простой функции

//define a  function 
function test() { 
   console.log("function called") 
} 
//call the function 
test()

В примере определяется функция test (). Пара разделителей ({}) определяет тело функции. Его также называютfunction scope. Функция должна быть вызвана для принудительного ее выполнения.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

function called

Классификация функций

Функции можно классифицировать как Returning и Parameterized функции.

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

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

Ниже приводится синтаксис возвращаемой функции.

function function_name() { 
   //statements 
   return value; 
}

• Возвращаемая функция должна заканчиваться оператором возврата.

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

• Оператор возврата должен быть последним оператором в функции.

Следующий фрагмент кода является примером возвращаемой функции -

function retStr() { 
   return "hello world!!!" 
}  
var val = retStr() 
console.log(val)

В приведенном выше примере определяется функция, которая возвращает строку «hello world !!!» звонящему. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

hello world!!!

Параметризованные функции

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

Ниже приводится синтаксис, определяющий параметризованную функцию.

function func_name( param1,param2 ,…..paramN) {   
   ...... 
   ...... 
}

Example − Parameterized Function

Пример определяет функцию add, которая принимает два параметра n1 и n2и печатает их сумму. Значения параметров передаются функции при ее вызове.

function add( n1,n2) { 
   var sum = n1 + n2 
   console.log("The sum of the values entered "+sum) 
} 
add(12,13)

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The sum of the values entered 25

Параметры функции по умолчанию

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

function add(a, b = 1) { 
   return a+b; 
} 
console.log(add(4))

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

5

Значение параметра по умолчанию будет перезаписано, если функция явно передает значение.

function add(a, b = 1) { 
   return a + b; 
} 
console.log(add(4,2))

Приведенный выше код явно устанавливает значение параметра b равным 2, тем самым перезаписывая его значение по умолчанию. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

6

Для лучшего понимания рассмотрим приведенный ниже пример.

Пример 1

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

<script>
   function addTwoNumbers(first,second = 10){
      console.log('first parameter is :',first)
      console.log('second parameter is :',second)
      return first+second;
   }

   console.log("case 1 sum:",addTwoNumbers(20)) // no value
   console.log("case 2 sum:",addTwoNumbers(2,3))
   console.log("case 3 sum:",addTwoNumbers())
   console.log("case 4 sum",addTwoNumbers(1,null))//null passed
   console.log("case 5 sum",addTwoNumbers(3,undefined))
</script>

Вывод приведенного выше кода будет таким, как указано ниже -

first parameter is : 20
second parameter is : 10
case 1 sum: 30
first parameter is : 2
second parameter is : 3
case 2 sum: 5
first parameter is : undefined
second parameter is : 10
case 3 sum: NaN
first parameter is : 1
second parameter is : null
case 4 sum 1
first parameter is : 3
second parameter is : 10
case 5 sum 13

Пример 2

<script>
   let DEFAULT_VAL = 30
      function addTwoNumbers(first,second = DEFAULT_VAL){
         console.log('first parameter is :',first)
         console.log('second parameter is :',second)
         return first+second;
      }
      console.log("case 1 sum",addTwoNumbers(1))
      console.log("case 2 sum",addTwoNumbers(3,undefined))
</script>

Вывод приведенного выше кода будет таким, как показано ниже -

first parameter is : 1
second parameter is : 30
case 1 sum 31
first parameter is : 3
second parameter is : 30
case 2 sum 33

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

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

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

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  
fun1(5); 
fun1(5, 6, 7);

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

0 
1 
3

Note - Остальные параметры должны быть последними в списке параметров функции.

Анонимная функция

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

Переменным можно назначить анонимную функцию. Такое выражение называетсяfunction expression.

Ниже приводится синтаксис анонимной функции.

var res = function( [arguments] ) { ... }

Example − Anonymous Function

var f = function(){ return "hello"} 
console.log(f())

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

hello

Example − Anonymous Parameterized Function

var func = function(x,y){ return x*y }; 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result) 
} 
product()

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The product : 200

Конструктор функций

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

Ниже приведен синтаксис для создания функции с использованием конструктора Function () вместе с оператором new.

var variablename = new Function(Arg1, Arg2..., "Function Body");

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

Конструктору Function () не передается аргумент, указывающий имя создаваемой им функции.

Example − Function Constructor

var func = new Function("x", "y", "return x*y;"); 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result)
} 
product()

В приведенном выше примере конструктор Function () используется для определения анонимной функции. Функция принимает два параметра и возвращает их произведение.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The product : 200

Рекурсия и функции JavaScript

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

Example − Recursion

function factorial(num) { 
   if(num <= 0) { 
      return 1; 
   } else { 
      return (num * factorial(num-1)  ) 
   } 
} 
console.log(factorial(6))

В приведенном выше примере функция вызывает сама себя. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

720

Example − Anonymous Recursive Function

(function() { 
   var msg = "Hello World" 
   console.log(msg)
})()

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

Hello World

Лямбда-функции

Лямбда относится к анонимным функциям в программировании. Лямбда-функции - это краткий механизм для представления анонимных функций. Эти функции также называютсяArrow functions.

Лямбда-функция - Анатомия

Есть 3 части лямбда-функции:

• Parameters - Функция может дополнительно иметь параметры.

• В fat arrow notation/lambda notation (=>): Он также называется оператором перехода.

• Statements - Представляет набор команд функции.

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

Лямбда-выражение

Это анонимное функциональное выражение, указывающее на одну строку кода. Ниже приведен синтаксис того же.

([param1, parma2,…param n] )=>statement;

Example − Lambda Expression

var foo = (x)=>10+x 
console.log(foo(10))

В примере объявляется функция лямбда-выражения. Функция возвращает сумму 10 и переданный аргумент.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

20

Лямбда-заявление

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

( [param1, parma2,…param n] )=> {       
   //code block 
}

Example − Lambda Statement

var msg = ()=> { 
   console.log("function invoked") 
} 
msg()

Ссылка на функцию возвращается и сохраняется в переменной msg. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

function  invoked

Синтаксические вариации

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

var msg = x=> { 
   console.log(x) 
} 
msg(10)

Необязательные фигурные скобки для одного оператора. Пустые скобки без параметра.

var disp = ()=>console.log("Hello World") 
disp();

Выражение функции и объявление функции

Выражение функции и объявление функции не являются синонимами. В отличие от выражения функции, объявление функции связано с именем функции.

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

Когда парсер JavaScript видит функцию в основном потоке кода, он предполагает объявление функции. Когда функция входит в состав оператора, это выражение функции.

Функция подъема

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

Следующий фрагмент кода иллюстрирует подъем функций в JavaScript.

hoist_function();  
function hoist_function() { 
   console.log("foo"); 
}

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

foo

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

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

Выражение немедленно вызываемой функции

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

Пример 1: IIFE

var main = function() { 
   var loop = function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Пример 2: IIFE

var main = function() { 
   (function() { 
      for(var x = 0;x<5;x++) { 
         console.log(x); 
      } 
   })(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Оба примера будут отображать следующий результат.

0 
1 
2 
3 
4 
Uncaught ReferenceError: x is not define

Функции генератора

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

• Функция может вернуть управление вызывающей стороне в любой момент.

• Когда вы вызываете генератор, он запускается не сразу. Вместо этого вы получаете итератор. Функция запускается, когда вы вызываете следующий метод итератора.

Генераторы обозначаются суффиксом ключевого слова функции звездочкой; в остальном их синтаксис идентичен синтаксису обычных функций.

Следующий пример иллюстрирует то же самое.

"use strict" 
function* rainbow() { 
   // the asterisk marks this as a generator 
   yield 'red'; 
   yield 'orange'; 
   yield 'yellow'; 
   yield 'green'; 
   yield 'blue'; 
   yield 'indigo'; 
   yield 'violet'; 
} 
for(let color of rainbow()) { 
   console.log(color); 
}

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

Рассмотрим следующий пример -

function* ask() { 
   const name = yield "What is your name?"; 
   const sport = yield "What is your favorite sport?"; 
   return `${name}'s favorite sport is ${sport}`; 
}  
const it = ask(); 
console.log(it.next()); 
console.log(it.next('Ethan'));  
console.log(it.next('Cricket'));

Последовательность функции генератора следующая -

• Генератор запускается в режиме паузы; итератор возвращается.

• It.next () возвращает «Как вас зовут?». Генератор приостановлен. Это делается с помощью ключевого слова yield.

• Вызов it.next («Ethan») присваивает значение Ethan имени переменной и возвращает «Какой твой любимый вид спорта?» Снова генератор остановлен.

• Вызов it.next («Cricket») присваивает значение Cricket переменной sport и выполняет последующий оператор возврата.

Следовательно, вывод приведенного выше кода будет -

{ 
   value: 'What is your name?', done: false 
} 
{ 
   value: 'What is your favorite sport?', done: false 
} 
{ 
   value: 'Ethan\'s favorite sport is Cricket', done: true 
}

Note - Функции генератора не могут быть представлены с помощью стрелочных функций.

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

Стрелочные функции, представленные в ES, помогают кратко писать функции на JavaScript. Давайте теперь узнаем о том же подробнее.

ES5 и анонимные функции

JavaScript активно использует anonymous functions. Анонимная функция - это функция, не имеющая имени. Анонимные функции используются во времяfunction callback. В следующем примере показано использование анонимной функции в ES5.

<script>
   setTimeout(function(){
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

В приведенном выше примере анонимная функция передается в качестве параметра предопределенному setTimeout() function. Функция setTimeout () обратится к анонимной функции через 1 секунду.

Следующий вывод отображается через 1 секунду -

Learning at TutorialsPoint is fun!!

Синтаксис функции стрелки

ES6 представляет концепцию arrow function чтобы упростить использование anonymous function. Стрелочная функция состоит из 3 частей:

• Parameters - Стрелочная функция может дополнительно иметь параметры

• The fat arrow notation (=>) - Он также называется оператором перехода

• Statements - Представляет набор инструкций функции

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

Синтаксис

//Arrow function that points to a single line of code
()=>some_expression

ИЛИ

//Arrow function that points to a block of code
()=> { //some statements }`

ИЛИ

//Arrow function with parameters
(param1,param2)=>{//some statement}

Пример: функция стрелки в ES6

В следующем примере определяются два функциональных выражения add и isEven используя стрелочную функцию

<script>
   const add = (n1,n2) => n1+n2
   console.log(add(10,20))

   const isEven = (n1) => {
      if(n1%2 == 0)
         return true;
      else
         return false;
   }
   console.log(isEven(10))
</script>

Вывод приведенного выше кода будет таким, как указано ниже -

30
true

Array.prototype.map () и стрелочная функция

В следующем примере стрелочная функция передается как параметр в Array.prototype.map() function.Функция map () выполняет стрелочную функцию для каждого элемента в массиве. В этом случае стрелочная функция отображает каждый элемент массива и его индекс.

<script>
   const names = ['TutorialsPoint','Mohtashim','Bhargavi','Raja']
   names.map((element,index)=> {
      console.log('inside arrow function')
      console.log('index is '+index+' element value is :'+element)
   })
</script>

Вывод приведенного выше кода будет таким, как указано ниже -

inside arrow function
index is 0 element value is :TutorialsPoint
inside arrow function
index is 1 element value is :Mohtashim
inside arrow function
index is 2 element value is :Bhargavi
inside arrow function
index is 3 element value is :Raja

Пример: window.setTimeout () и стрелочная функция

В следующем примере функция стрелки передается в качестве параметра предопределенному setTimeout() function. ВsetTimeout() функция обратится к стрелочной функции через 1 секунду.

<script>
   setTimeout(()=>{
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

Следующий вывод отображается через 1 секунду -

Learning at TutorialsPoint is fun!!

Стрелочная функция и «это»

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

<script>
   //constructor function
   function Student(rollno,firstName,lastName) {
      this.rollno = rollno;
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
            //creates a new instance of this ,hides outer scope of this
            console.log(this.firstName+ " "+this.lastName)
         },2000)
      }
      this.fullNameUsingArrow = function(){
         setTimeout(()=>{
            //uses this instance of outer scope
            console.log(this.firstName+ " "+this.lastName)
         },3000)
      }
   }
   const s1 = new Student(101,'Mohammad','Mohtashim')
   s1.fullNameUsingAnonymous();
   s1.fullNameUsingArrow();
</script>

Когда анонимная функция используется с setTimeout(), функция вызывается через 2000 миллисекунд. Новый экземпляр“this”создается и затеняет экземпляр функции Student. Итак, значениеthis.firstName и this.lastName будет undefined. Функция не использует лексическую область видимости или контекст текущего выполнения. Эту проблему можно решить, используяarrow function.

Вывод приведенного выше кода будет следующим:

undefined undefined
Mohammad Mohtashim