Объявление и применение функций в JavaScript

Комментарии: 0

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

Объявление функции

Объявлением функции называется указание названия, параметров и исполняемого тела. Поместив объявление в JavaScript переменную оно становится выражением функции.

// Объявление
function function_name() {};
// Выражение
var function_name = function() {};

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

function_name(); //вызов сработает
function function_name(){};

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

function_name(); //вызов НЕ сработает
var function_name = function(){};

Неотложные функции

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

Есть два наиболее распространенных синтаксиса:

(function optional_function_name() {
  //body
}());

(function optional_function_name() {
  //body
})();

Могут всречаться и другие способы:

// Другие способы
!function() { /* ... */ }();
+function() { /* ... */ }();
new function() { /* ... */ };

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

var page_language = (function () {
  var lang;
  // Код для получения языка страницы
  return lang;
})();

Методы

Когда функция является свойством объекта, она называется методом.

var calc = {
  add : function(a,b){return a+b},
  sub : function(a,b){return a-b}  
}
console.log(calc.add(1,2)); //3
console.log(calc.sub(80,2)); //78

«add» и «sub» являются методами объекта «calc».

А вот интересный пример передачи параметра вложенной функции.

function add(a){
  return function(b){return a+b;}
}
console.log(add(1)(2)); // Результат 3

Возвращаемая анонимная функция — это метод функции «add».

Конструкторы

Если добавить перед функцией ключевое слово «new», то получим конструктор. Он позволяет создавать экземпляры объекта, что является основой объектно-ориентированного программирования. Рассмотрим пример с созданием экземпляров «Фрукт».

function Fruit(){   
  var name, color; // наименование и цвет
  this.getName = function(){return name;};
  this.setName = function(value){name=value};   
  this.getColor = function(){return color;};
  this.setColor = function(value){color=value}; 
}
 
var apple = new Fruit();
apple.setName("Шафран");
apple.setColor("Красный");
 
var orange = new Fruit();
orange.setName ("Валенсийские апельсины");
orange.setColor ("Оранжевый");
 
console.log(orange.getName()); // "Валенсийские апельсины"
console.log(apple.getName()); // "Шафран"
console.log(orange.getColor()); // "Оранжевый"

Стрелочные функции стандарта «ES6»

Стандарт «ES6» привнес в js новый синтаксис объявления функций. За свой вид такой подход получил название «Стрелочные функции».

Стандарт «ES6» поддерживается только новыми браузерами.

// Было
var sing = function(){ console.log('singing...') };
// Стало
var sing = () => { console.log('singing...') };

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

// Было
setInterval(function () {
  console.log('message')
}, 1000);
// Стало
setInterval(() => console.log('message'), 1000);

Функции-генераторы в «ES6»

Еще одно новое определение функции из стандарта «ES6» — функция-генератор. Она способна остановить и продолжить выполнение.

function *function_name(){}

Функция-генератор создаёт итератор (повторитель). Метод итератора «next» используется для выполнения кода внутри функции-генератора до тех пор, пока не будет достигнуто ключевое слово «yield». Затем значение после слова «yield» возвращается и выполнение приостанавливается.

Если ключевое слово «yield» не достигается, то происходит возврат значения «undefined» и выполнение итератора дальше не происходит.

function *randomIncrement(i) {
 yield i + 3;
 yield i + 5;
 yield i + 10;
 yield i + 6;
}
var itr = randomIncrement(4);
console.log(itr.next().value); //7
console.log(itr.next().value); //9
console.log(itr.next().value); //14

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