Функции в JavaScript

Функция (в общем случае) — это отношение между элементами, при котором изменение в одном элементе влечёт изменение в другом.

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

Функции позволяют не повторять один и тот же код во многих местах программы и являются основными «строительными блоками» программ. Языки программирования позволяют программисту использовать как встроенные функции (например, alert(message), prompt(message, default), confirm(question)), так и создавать свои.

Функция:

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

Процедура - это функция, которая возвращает пустое значение (при этом выполнение кода процедуры непосредственно сказывается на выполнении программы).

Метод - это функция, которая является свойством объекта.

Важно отличать вызов функции от вызова метода:

для вызова метода необходим объект, которому принадлежит вызываемый метод (object.functionProperty() или object['functionProperty']()), а для вызова функции — нет (expression()).

Замечание

В JS любая процедура на самом деле является функцией без return: если опустить return, функция всё равно неявно возвращает undefined и остаётся функцией.

[свернуть]

В JavaScript любая функция - это объект, и следовательно, ею можно манипулировать как объектом, в частности:

передавать как аргумент и возвращать в качестве результата при вызове других функций (функций высшего порядка);
создавать анонимно и присваивать в качестве значений переменных или свойств объектов.

Примеры

// Копирование функции *************************************

function sayHi() { // объявляем функцию
console.log( "Привет" );
}
let func = sayHi; // копируем (теперь функция может быть вызвана с помощью обеих переменных sayHi() и func())
func(); // Привет (вызываем копию - работает)
sayHi(); // Привет (тоже работает)

// Функция как свойство объекта ***************************

let obj = { doSomething : function(){} };

// Копирование функции *************************************

function sayHi() { // объявляем функцию

console.log( "Привет" );

}

let func = sayHi; // копируем (теперь функция может быть вызвана с помощью обеих переменных sayHi() и func())

func(); // Привет (вызываем копию - работает)

sayHi(); // Привет (тоже работает)

// Функция как свойство объекта ***************************

let obj = { doSomething : function(){} };

[свернуть]

Хорошим тоном в программировании является правило: одна функция – одно действие.

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

Хранение функций в JS

В JavaScript функции могут храниться тремя способами:

в переменной:
- let fn = function doSomething() {};
  
  1
  
  let fn = function doSomething() {};
в объекте:
- let obj = { doSomething : function(){} };
  
  1
  
  let obj = { doSomething : function(){} };
в массиве:
- arr.push(function doSomething() {})
  
  1
  
  arr.push(function doSomething() {})

Объявлять функции в JavaScript можно с помощью синтаксиса:

"function declaration";
"function expression".

Объявление функции (Function Declaration)

Для создания функций используется её объявление, например:

function name([param1, param2, ..., paramN])  {
  statements
};

function name([param1, param2, ..., paramN]) {

statements

};

где

function - ключевое слово;
name - имя функции;
(paramN) - список параметров (аргументов) в круглых скобках через запятую (может быть пустым) ;
{statements} - инструкции или исполняемый код функции (определение функции или «тело функции»), внутри фигурных скобок.

function sayHello(firstName, lastName) {
  console.log(`Hello, ${firstName} ${lastName}`);
}

sayHello("Alex", "NAV"); // Hello, Alex NAV

function sayHello(firstName, lastName) {

console.log(`Hello, ${firstName} ${lastName}`);

}

sayHello("Alex", "NAV"); // Hello, Alex NAV

Разбор примера

function - ключевое слово;
sayHello - имя функции;
(firstName, lastName) - список параметров в круглых скобках через запятую (может быть пустым) ;
{console.log(Hello, ${firstName} ${lastName});} - код функции («тело функции»), внутри фигурных скобок;
sayHello("Alex", "NAV") - вызов функции с передачей параметров (аргументов).

[свернуть]

Таким образом, объявление функции, кроме имени функции, содержит список имён и типов передаваемых параметров (аргументов), а также тип возвращаемого функцией значения.

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

Выбор имени функции

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

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

Например, функции, начинающиеся с :

"show" - обычно что-то показывают;
"get…" – возвращают значение;
"calc…" – что-то вычисляют;
"create…" – что-то создают;
"check…" – что-то проверяют и возвращают логическое значение, и т.д.

Примеры таких имён:

showMessage(..) // показывает сообщение
getAge(..) // возвращает возраст (в каком либо значении)
calcSum(..) // вычисляет сумму и возвращает результат
createForm(..) // создаёт форму (и обычно возвращает её)
checkPermission(..) // проверяет доступ, возвращая true/false

showMessage(..) // показывает сообщение

getAge(..) // возвращает возраст (в каком либо значении)

calcSum(..) // вычисляет сумму и возвращает результат

createForm(..) // создаёт форму (и обычно возвращает её)

checkPermission(..) // проверяет доступ, возвращая true/false

Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код, и какое значение она может возвращать.

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

Например, во фреймворке jQuery есть функция с именем $. В библиотеке Lodash основная функция представлена именем _.

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

[свернуть]

Объявление функции (Function Expression)

Существует ещё один синтаксис создания функций, который называется Function Expression (Функциональное Выражение). В данном случае ключевое слово function может использоваться для определения функции внутри выражения (при этом функция может являться анонимной, т.е. может не иметь собственного именования).

Синтаксис:

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {
statements
};

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {

statements

};

где

name - имя функции, является локальным для её тела и может быть опущено (в таком случае функция является анонимной);
paramN - имя аргумента, передаваемого в функцию;
statements - инструкции (программный код), составляющие тело функции.

// Функциональное выражение, возвращающее значение с помощью оператора return

var square = function(x) {
  return x * x;
};
console.log(square(4)); // 16

// Функциональное выражение, используемое в качестве процедуры

let sayHi = function() {
  console.log("Привет");
};
sayHi(); // Привет
console.log(sayHi);  // выведет код функции (это не вызов функции, т.к. нет ())

// Функциональное выражение, возвращающее значение с помощью оператора return

var square = function(x) {

return x * x;

};

console.log(square(4)); // 16

// Функциональное выражение, используемое в качестве процедуры

let sayHi = function() {

console.log("Привет");

};

sayHi(); // Привет

console.log(sayHi); // выведет код функции (это не вызов функции, т.к. нет ())

Особенности использования функциональных выражений:

Если необходимо сослаться на текущую функцию внутри тела этой функции, то нужно создать именованное функциональное выражение. Имя будет локальным (только для тела функции, её области видимости).
Переменная, которой присвоено функциональное выражение, будет иметь свойство name, содержащее имя функции, и которое не изменяется при переприсваивании другой переменной:
- для анонимной функции значением свойства name будет имя переменной (неявное имя);
- если имя функции задано, то будет использовано имя функции (явное имя).
При объявлении функции синтаксисом "function expression" "поднятие" или "всплытие" функции JavaScript (hoisting) не работает.

Примеры

Отсюда...

Пример использования ссылки на текущую функцию внутри тела этой функции:

var math = {
  'factit': function factorial(n) {
    console.log(n);
    if (n <= 1) {
      return 1;
    }
    return n * factorial(n - 1);
  }
};

math.factit(3) //3;2;1;

var math = {

'factit': function factorial(n) {

console.log(n);

if (n <= 1) {

return 1;

}

return n * factorial(n - 1);

}

};

math.factit(3) //3;2;1;

Пример использования неявного и явного имени функции:

var foo = function() {}
foo.name // "foo"
var foo2 = foo
foo2.name // "foo"

var bar = function baz() {}
bar.name // "baz"

console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // Uncaught ReferenceError: baz is not defined

var foo = function() {}

foo.name // "foo"

var foo2 = foo

foo2.name // "foo"

var bar = function baz() {}

bar.name // "baz"

console.log(foo === foo2); // true

console.log(typeof baz); // undefined

console.log(bar === baz); // Uncaught ReferenceError: baz is not defined

Пример ошибки при "поднятии (всплытии)":

console.log(square(4)); // TypeError: square is not a function

var square = function(x) {
  return x * x;
};

console.log(square(4)); // TypeError: square is not a function

var square = function(x) {

return x * x;

};

[свернуть]

Параметры (аргументы) функции

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

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

Аргумент функции — это значение, которое передаётся в функцию (указывается в скобках ) при её вызове.

// Объявление функции sayHello с параметрами firstName, lastName
function sayHello(firstName, lastName) { 
  console.log(`Hello, ${firstName} ${lastName}`);
}

sayHello("Alex", "NAV"); // Вызов функции sayHello с аргументами "Alex", "NAV"

// Объявление функции sayHello с параметрами firstName, lastName

function sayHello(firstName, lastName) {

console.log(`Hello, ${firstName} ${lastName}`);

}

sayHello("Alex", "NAV"); // Вызов функции sayHello с аргументами "Alex", "NAV"

В примере выше в функцию sayHello передаются два параметра: firstName и lastName. Когда функция вызывается, переданные значения копируются в локальные переменные firstName и lastName, которые затем используются в теле функции.

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

Синтаксис "оставшиеся параметры"

Синтаксис оставшихся параметров функции позволяет представлять неограниченное множество аргументов в виде массива.

function(a, b, ...theArgs) {
  // ...
}

function(a, b, ...theArgs) {

// ...

}

Если последний именованный аргумент функции имеет префикс ..., он автоматически становится массивом с элементами от 0 до theArgs.length в соответствии с актуальным количеством аргументов, переданных в функцию.

function myFunс(a, b, ...moreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("moreArgs", moreArgs);
}
myFunс("один", 2, "три", "четыре", 5, "шесть"); 
// Вывод в консоль: 
// a, один 
// b, два 
// manyMoreArgs, [три, четыре, пять, шесть]

function myFunс(a, b, ...moreArgs) {

console.log("a", a);

console.log("b", b);

console.log("moreArgs", moreArgs);

}

myFunс("один", 2, "три", "четыре", 5, "шесть");

// Вывод в консоль:

// a, один

// b, два

// manyMoreArgs, [три, четыре, пять, шесть]

Отличия оставшихся параметров от объекта arguments:

оставшиеся параметры включают только те, которым не задано отдельное имя, в то время как объект arguments содержит все аргументы, передаваемые в функцию;
объект arguments не является массивом, в то время как оставшиеся параметры являются экземпляром Array и методы sort, map, forEach или pop могут непосредственно у них использоваться;
объект arguments имеет дополнительную функциональность, специфичную только для него (например, свойство callee).

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

[свернуть]

Особенности использования параметров (аргументов) функций JavaScript:

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

Особенности использования аргументов различных типов:

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

Пример

Отсюда...

function myFunc(theObject) { 
theObject.make = 'Toyota'; 
}
var mycar = {make: 'Honda', model: 'Accord', year: 1998}; 
var x, y; 
x = mycar.make; // x получает значение "Honda" 

myFunc(mycar); 
y = mycar.make; // y получает значение "Toyota" (свойство было изменено функцией)

function myFunc(theObject) {

theObject.make = 'Toyota';

}

var mycar = {make: 'Honda', model: 'Accord', year: 1998};

var x, y;

x = mycar.make; // x получает значение "Honda"

myFunc(mycar);

y = mycar.make; // y получает значение "Toyota" (свойство было изменено функцией)

[свернуть]

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

См. также ES6 значения по умолчанию: базовый пример

Если параметр не указан, то его значением становится undefined:

function sayHello(firstName, lastName) {
  console.log(`Hello, ${firstName} ${lastName}`);
}

sayHello("Alex"); // Hello, Alex undefined

function sayHello(firstName, lastName) {

console.log(`Hello, ${firstName} ${lastName}`);

}

sayHello("Alex"); // Hello, Alex undefined

В вызове не указан параметр lastName, поэтому предполагается что lastName=== undefined.

Если мы хотим задать параметру функции значение по умолчанию, то мы должны указать его после =:

function sayHelloDefault(firstName = "Default", lastName = "Default") {
  return `Hello, ${firstName} ${lastName}`;
}

let res_4 = sayHelloDefault();
let res_5 = sayHelloDefault(null);

console.log(res_4); // Hello, Default Default
console.log(res_5); // Hello, null Default

function sayHelloDefault(firstName = "Default", lastName = "Default") {

return `Hello, ${firstName} ${lastName}`;

}

let res_4 = sayHelloDefault();

let res_5 = sayHelloDefault(null);

console.log(res_4); // Hello, Default Default

console.log(res_5); // Hello, null Default

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

В параметрах по умолчанию можно использовать значения предыдущих (расположенных левее в списке) параметров.

Использование объекта arguments функции

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

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

arguments[i]

1	arguments[i]

где i — это порядковый номер аргумента, отсчитывающийся с 0.

К первому аргументу, переданному функции, обращаются arguments[0]. Получить количество всех аргументов можно, используя свойство arguments.length.

Объект arguments функции является псевдо-массивом, в котором есть пронумерованные индексы и свойство length, к нему применимы некоторые методы массивов, например, for .. in. Однако он не обладает всеми методами массивов.

ВАЖНО! Никогда не называйте параметр arguments: он будет иметь приоритет над объектом arguments, который доступен для каждой функции.

С помощью объекта arguments вы можете вызвать функцию, передавая в неё больше аргументов, чем формально объявили принять. Это очень полезно, если вы не знаете точно, сколько аргументов должна принять функция. Вы можете использовать arguments.length для определения количества аргументов, переданных функции, а затем получить доступ к каждому аргументу, используя объект arguments.

Примеры использования объекта arguments

Функция, которая конкатенирует несколько строк:

function myConcat(separator) {
var result = '';
var i;
for (i = 1; i < arguments.length; i++) {
result += arguments[i] + separator;
}
return result;
}

myConcat(', ', 'red', 'orange', 'blue'); // возвращает "red, orange, blue, "
myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // возвращает "elephant; giraffe; lion; cheetah; "
myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');

function myConcat(separator) {

var result = '';

var i;

for (i = 1; i < arguments.length; i++) {

result += arguments[i] + separator;

}

return result;

}

myConcat(', ', 'red', 'orange', 'blue'); // возвращает "red, orange, blue, "

myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // возвращает "elephant; giraffe; lion; cheetah; "

myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');

Использование for ... in для объекта arguments

function func() {
for (value in arguments){
console.log(value);
}
}
func(1, 2, 3); // 1 // 2 // 3

function func() {

for (value in arguments){

console.log(value);

}

func(1, 2, 3); // 1 // 2 // 3

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

function changeCollection() {
for (let i = 0; i < arguments.length; i++) {
if (Array.isArray(arguments[i]) === true) {
arguments[i] = arguments[i].slice(1);
}
}
return Array.from(arguments);
}
console.log(changeCollection([1, 2, 3], [4, 5, 6])); // Array [ (2) [2,3], (2) [5,6] ]

function changeCollection() {

for (let i = 0; i < arguments.length; i++) {

if (Array.isArray(arguments[i]) === true) {

arguments[i] = arguments[i].slice(1);

}

return Array.from(arguments);

}

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

[свернуть]

Как и с обычными массивоподобными объектами для преобразования объекта arguments в обычный массив можно использовать метод Array.from() или оператор расширения ( ... ). Если последний именованный аргумент функции имеет префикс ..., он автоматически становится массивом с элементами от 0 до arguments .length в соответствии с актуальным количеством аргументов, переданных в функцию:

function myConcat(separator) {
  console.log(arguments[1] + separator + arguments[2]);
  console.log(Array.from(arguments));
  console.log([...arguments]);
}

myConcat(' : ','first','second') // вызов функции выведет в консоль:
// first : second
// (3) [" : ", "first", "second"]
// (3) [" : ", "first", "second"]

function myConcat(separator) {

console.log(arguments[1] + separator + arguments[2]);

console.log(Array.from(arguments));

console.log([...arguments]);

}

myConcat(' : ','first','second') // вызов функции выведет в консоль:

// first : second

// (3) [" : ", "first", "second"]

function sayHello(firstName = "Default", lastName = "Default", ...arguments) {
  console.log(`Hello, ${firstName} ${lastName}`); // Hello, null first
  console.log(`Hello, ${firstName} ${lastName} и остальные ${arguments}`); // Hello, null first и остальные 3,78
  console.log(...arguments); // 3 78
  console.log([...arguments]); // Array [3 78]
}
sayHello(null, "first", 3, 78);

function sayHello(firstName = "Default", lastName = "Default", ...arguments) {

console.log(`Hello, ${firstName} ${lastName}`); // Hello, null first

console.log(`Hello, ${firstName} ${lastName} и остальные ${arguments}`); // Hello, null first и остальные 3,78

console.log(...arguments); // 3 78

console.log([...arguments]); // Array [3 78]

}

sayHello(null, "first", 3, 78);

Переменные в функциях JavaScript

Локальные переменные - это переменные, объявленные внутри функции, видны только внутри этой функции. Код вне функции не имеет доступа к её локальным переменным.
Внешние переменные - это переменные, объявленные вне функции (например, во внешней функции при вложенности функций). Функция обладает полным доступом к внешним переменным и может изменять их значение.
Глобальные переменные - это переменные, объявленные снаружи всех функций. Глобальные переменные видимы для любой функции (если только их не перекрывают одноимённые локальные переменные).

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

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

Алгоритм использования переменных в функции:

Ищется локальная переменная (если она объявлена внутри тела функции).
Внешняя переменная используется, только если внутри функции нет такой локальной.
Если одноимённая переменная объявляется внутри функции, тогда она перекрывает внешнюю.

Примеры

Функция использует только локальную переменную:

let x = 10; // внешняя (или глобальная) переменная

function foo() {
let x = 20; // объявление внутренней (локальной) переменной функции с помощью ключевых слов let, var или const
console.log(x);
return x; // для получения значения x вне функции
}

foo(); // 20 (вызов функции)
console.log(x + foo()); // 30 (10 + 20 = 30)

// ИЛИ *************************************************************
let userName = "Alex";

function showMessage() {
  let userName = "Olga"; // инициируем локальную переменную
  let message =
    "Привет, " + userName + " (изменение внешней переменной (имени) функцией)";
  console.log(message); // Привет, Olga (изменение локальной переменной (имени) функцией)
}

console.log(userName + " (перед вызовом функции)"); // Alex (перед вызовом функции)
showMessage(); // Привет, Olga (изменение локальной переменной (имени) функцией)
console.log(userName + " (после вызова функции)"); // Alex (после вызова функции)

// ИЛИ *******************************************************

function showMessage() {
let message = "Привет, я JavaScript!"; // локальная переменная
console.log( message );
}

showMessage(); // Привет, я JavaScript!
console.log( message ); // ошибка "ReferenceError: message is not defined", т.к. локальная переменная вне функции не видна

let x = 10; // внешняя (или глобальная) переменная

function foo() {

let x = 20; // объявление внутренней (локальной) переменной функции с помощью ключевых слов let, var или const

console.log(x);

return x; // для получения значения x вне функции

}

foo(); // 20 (вызов функции)

console.log(x + foo()); // 30 (10 + 20 = 30)

// ИЛИ *************************************************************

let userName = "Alex";

function showMessage() {

let userName = "Olga"; // инициируем локальную переменную

let message =

"Привет, " + userName + " (изменение внешней переменной (имени) функцией)";

console.log(message); // Привет, Olga (изменение локальной переменной (имени) функцией)

}

console.log(userName + " (перед вызовом функции)"); // Alex (перед вызовом функции)

showMessage(); // Привет, Olga (изменение локальной переменной (имени) функцией)

console.log(userName + " (после вызова функции)"); // Alex (после вызова функции)

// ИЛИ *******************************************************

function showMessage() {

let message = "Привет, я JavaScript!"; // локальная переменная

console.log( message );

}

showMessage(); // Привет, я JavaScript!

console.log( message ); // ошибка "ReferenceError: message is not defined", т.к. локальная переменная вне функции не видна

У функции есть доступ к внешним переменным:

let x = 10;
function foo() {
  x = 20; // без let, var или const функция изменяет глобальные переменные! НЕ рекомендуется!
  console.log(x); // выводим в консоль значение x = 20
  return x; // возврат значения x = 20 функцией
}
foo(); // вызываем функцию - изменяем значение внешней переменной
console.log(x + foo()); // 40 (20 + 20 = 40)

// ИЛИ *************************************************************

let userName = "Alex";
function showMessage() {
  userName = "Olga"; // изменяем значение внешней переменной
  let message =
    "Привет, " + userName + " (изменение внешней переменной (имени) функцией)";
  console.log(message); // Привет, Olga (изменение внешней переменной (имени) функцией)
}
console.log(userName + " (перед вызовом функции)"); // Alex (перед вызовом функции) 
showMessage(); 
console.log(userName + " (после вызова функции)"); // Olga (после вызова функции)

let x = 10;

function foo() {

x = 20; // без let, var или const функция изменяет глобальные переменные! НЕ рекомендуется!

console.log(x); // выводим в консоль значение x = 20

return x; // возврат значения x = 20 функцией

}

foo(); // вызываем функцию - изменяем значение внешней переменной

console.log(x + foo()); // 40 (20 + 20 = 40)

// ИЛИ *************************************************************

let userName = "Alex";

function showMessage() {

userName = "Olga"; // изменяем значение внешней переменной

let message =

"Привет, " + userName + " (изменение внешней переменной (имени) функцией)";

console.log(message); // Привет, Olga (изменение внешней переменной (имени) функцией)

}

console.log(userName + " (перед вызовом функции)"); // Alex (перед вызовом функции)

showMessage();

console.log(userName + " (после вызова функции)"); // Olga (после вызова функции)

[свернуть]

Вызов функции

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

sayHello("Alex", "NAV"); // Вызов функции sayHello с параметрами ("Alex", "NAV")

function sayHello(firstName, lastName) {
  console.log(`Hello, ${firstName} ${lastName}`);
}

sayHello("Alex", "NAV"); // Вызов функции sayHello с параметрами ("Alex", "NAV")

function sayHello(firstName, lastName) {

console.log(`Hello, ${firstName} ${lastName}`);

}

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

Область видимости функции:

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

Функции JS расположены в области видимости, если они уже определены выше по коду, но функции вида "function declaration" могут быть подняты ("поднятие" или "всплытие" - hoisting), также как в примере выше (вызов функции расположен в коде выше, чем её объявление).

ВАЖНОЕ замечание ("поднятие" или "всплытие" функции JavaScript (hoisting))

"Поднятие" или "всплытие" функции JavaScript (hoisting) работает только тогда, когда объявлении функции использует синтаксис function funcName(){} ("function declaration").

При объявлении функции синтаксисом "function expression" "поднятие" или "всплытие" функции JavaScript (hoisting) не работает.

Код ниже работать не будет!

console.log(square(4)); // TypeError: square is not a function

// Вызов функции синтаксис  <span style="color: #ff0000;">"function expression"</span>
var square = function(x) {
  return x * x;
};

console.log(square(4)); // TypeError: square is not a function

// Вызов функции синтаксис <span style="color: #ff0000;">"function expression"</span>

var square = function(x) {

return x * x;

};

[свернуть]

Рекурсивный вызов функции

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

Пример

Функция рекурсивного вычисления факториала:

function factorial(n) {
  if ((n === 0) || (n === 1))
  return 1;
  else
  return (n * factorial(n - 1));
  }
  
console.log(factorial(5)); // 120 (результат вычисления 5!)

function factorial(n) {

if ((n === 0) || (n === 1))

return 1;

else

return (n * factorial(n - 1));

}

console.log(factorial(5)); // 120 (результат вычисления 5!)

Функция перебора элементов массива:

const myArr = [
  [1, ["one", "two"], 4],
  [5, 6],
  [7, 8, [9, 0]],
];

function iterationЕlements(arr) {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    if (Array.isArray(arr[i])) {   // проверка элемента на тип Array
      iterationЕlements(arr[i]);   // рекурсия iterationЕlements(arr)
    }
  }
}

const myArr = [

[1, ["one", "two"], 4],

[5, 6],

[7, 8, [9, 0]],

];

function iterationЕlements(arr) {

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

if (Array.isArray(arr[i])) { // проверка элемента на тип Array

iterationЕlements(arr[i]); // рекурсия iterationЕlements(arr)

}

[свернуть]

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

Вызов функционального выражения по месту (IIFE)

Подробнее...

Когда функция (как выражение) обернута в пару ( ), мы можем вызвать эту функцию, добавив еще одни () в конце, например:

( function foo(){ .. } ) ()

Первая окружающая пара ( ) делает функцию выражением, а вторая () - выполняет функцию.

// Вызов функции по месту 
var a = 2; 

(function foo() { 
  var a = 3; 
  console.log(a); // 3 
})(); // сразу после объявления вызов на исполнение (вызов по месту) 

console.log(a); // 2

// Вызов функции по месту

var a = 2;

(function foo() {

var a = 3;

console.log(a); // 3

})(); // сразу после объявления вызов на исполнение (вызов по месту)

console.log(a); // 2

Этот шаблон настолько в ходу, что существует термин для его обозначения: IIFE (Immediately (немедленно) Invoked (вызываемое) Function (функциональное) Expression (выражение)).

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

var a = 2;

(function IIFE() {
  var a = 3;
  console.log(a); // 3
})();

console.log(a); // 2

var a = 2;

(function IIFE() {

var a = 3;

console.log(a); // 3

})();

console.log(a); // 2

Другой вариант традиционной формы IIFE:

( function(){ .. } () )

Эти две формы идентичны по функциональности. Какую из них предпочесть — всего лишь ваш стилистический выбор.

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

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

var square = function(x) {
  return x * x;
};
console.log(square(4)); // 16

// ИЛИ ************************************

function sum(a, b) {
return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

var square = function(x) {

return x * x;

};

console.log(square(4)); // 16

// ИЛИ ************************************

function sum(a, b) {

return a + b;

}

let result = sum(1, 2);

alert( result ); // 3

Функция возвращает другую функцию

let val = 7;
function createAdder() {
  function addNumbers(a, b) {
    let ret = a + b;
    return ret;
  }
  return addNumbers;
}
let adder = createAdder();
let sum = adder(val, 8);
console.log("Example of function returning a function: ", sum);

let val = 7;

function createAdder() {

function addNumbers(a, b) {

let ret = a + b;

return ret;

}

return addNumbers;

}

let adder = createAdder();

let sum = adder(val, 8);

console.log("Example of function returning a function: ", sum);

Разберем исполнение этого кода:

Строка 1. Мы объявляем переменную val в глобальном контексте выполнения и присваиваем число 7 этой переменной.
Строки 2-8. Мы объявляем переменную с именем createAdder в глобальном контексте выполнения и назначаем ей определение функции. Строки 3-7 описывают указанное определение функции. Но на данный момент тело этой функции не выполняется. Мы просто сохраняем определение функции в этой переменной (createAdder).
Строка 9. Мы объявляем новую переменную с именем adder в глобальном контексте выполнения. Временно переменной adder присваивается undefined.
Строка 9. Скобки () указывают, что нужно выполнить или вызвать функцию с именем createAdder, которая была создана на шаге 2:
1. вызов функции createAdder (теперь мы находимся в строке 2);
2. создается новый локальный контекст выполнения, мы можем создавать локальные переменные в новом контексте выполнения;
3. движок добавляет новый контекст в стек вызовов. Функция createAdder не имеет аргументов, перейдем прямо к ее телу.
Строки 3-6. У нас есть новое объявление функции. Мы создаем переменную addNumbers в локальном контексте выполнения (это важно, addNumbers существует только в локальном контексте выполнения). Мы сохраняем определение функции в локальной переменной с именем addNumbers, и переходим к строке 7.
Строка 7. Мы возвращаем содержимое переменной addNumbers. Движок ищет переменную с именем addNumbers и находит ее: это определение функции. Таким образом, далее:
1. возвращается (return addNumbers;) определение функции addNumbers, т.е. всё что находится в скобках в строках 4 и 5;
2. удаляется локальный контекст выполнения из стека вызовов (переменная addNumbers больше не существует;
3. определение функции addNumbers все еще существует, оно возвращается из функции и присваивается переменной adder (это переменная, которую мы создали на шаге 3).
Строка 10. Мы определяем новую переменную sum в глобальном контексте выполнения. Временное значение undefined. Далее нужно выполнить функцию, которая определена в переменной с именем adder и которая принимает два параметра:
1. переменная val, которую мы определили на шаге 1, она представляет число 7;
2. число 8.
Теперь мы должны выполнить эту функцию. Определение функции обозначено строками 3-5. Новый локальный контекст выполнения создан. В локальном контексте создаются две новые переменные: a и b. Им соответственно присваиваются значения 7 и 8, так как это были аргументы, которые мы передали функции на предыдущем шаге.
Строка 4. В локальном контексте выполнения объявлена новая переменная ret.
Строка 4. Выполняется сложение содержимого переменной a и содержимого переменной b. Результат сложения (15) присваивается переменной ret.
Переменная ret возвращается из этой функции. Локальный контекст выполнения уничтожается, он удаляется из стека вызовов, переменные a, b и ret больше не существуют. Возвращаемое значение присваивается переменной суммы, которую мы определили на шаге 9.
Мы выводим значение суммы на консоль.

[свернуть]

Ещё примеры с разбором...

Особенности директивы return:

Директива return может находиться в любом месте тела функции.
Код в теле функции после директивы return не выполняется.
Как только выполнение доходит до этого места, функция останавливается, и значение возвращается в вызвавший её код.
Возможно использовать return и без значения, что приведёт к немедленному выходу из функции.
Результат функции с пустым return или без него – undefined.
Вызовов return может быть несколько.

Примеры

function sayHello(firstName, lastName) {
  if (!firstName || !lastName)
    return console.error("Не введены параметры функции");
  return `Hello, ${firstName} ${lastName}`;
  // после return код не выполняется
  console.log("Hello, world!"); // выдаст подсказку 'unreachable code after return statement', код выполнен не будет
}

let res = sayHello("Alex", "VAN");
let res1 = sayHello("Alex", "NAV") + "!";
let res2 = sayHello() + "!";

console.log(res); // Hello, Alex VAN
console.log(res1); // Hello, Alex NAV!
console.log(res2); // Будет выведена ошибка "Не введены параметры функции" и затем "undefined!"

function sayHello(firstName, lastName) {

if (!firstName || !lastName)

return console.error("Не введены параметры функции");

return `Hello, ${firstName} ${lastName}`;

// после return код не выполняется

console.log("Hello, world!"); // выдаст подсказку 'unreachable code after return statement', код выполнен не будет

}

let res = sayHello("Alex", "VAN");

let res1 = sayHello("Alex", "NAV") + "!";

let res2 = sayHello() + "!";

console.log(res); // Hello, Alex VAN

console.log(res1); // Hello, Alex NAV!

console.log(res2); // Будет выведена ошибка "Не введены параметры функции" и затем "undefined!"

Несколько вызовов директивы return:

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('А родители разрешили?');
  }
}

let age = prompt('Сколько вам лет?', 18);

if ( checkAge(age) ) {
  alert( 'Доступ получен' );
} else {
  alert( 'Доступ закрыт' );
}

function checkAge(age) {

if (age > 18) {

return true;

} else {

return confirm('А родители разрешили?');

}

let age = prompt('Сколько вам лет?', 18);

if ( checkAge(age) ) {

alert( 'Доступ получен' );

} else {

alert( 'Доступ закрыт' );

}

[свернуть]

Никогда не добавляйте перевод строки между return и его значением!

Для длинного выражения в return может быть заманчиво разместить его на нескольких отдельных строках, например так:

return
(some + long + expression + or + whatever * f(a) + f(b))

1 2	return (some + long + expression + or + whatever * f(a) + f(b))

Код не выполнится, потому что интерпретатор JavaScript подставит точку с запятой после return. Для него это будет выглядеть так:

return;
(some + long + expression + or + whatever * f(a) + f(b))

1 2	return; (some + long + expression + or + whatever * f(a) + f(b))

Таким образом, это фактически стало пустым return.

Если мы хотим, чтобы возвращаемое выражение занимало несколько строк, нужно начать его на той же строке, что и return. Или, хотя бы, поставить там открывающую скобку, вот так:

return (
some + long + expression
+ or +
whatever * f(a) + f(b)
)

return (

some + long + expression

+ or +

whatever * f(a) + f(b)

)

Свойства функций

Функция — это объект, поэтому она может иметь свои собственные свойства, например name, length или методы toString(), bind(), apply() и call().

let log = function logMessage(message) {
  console.log(message);
};
console.log(log.name); // logMessage
console.log(log.length); // 1
console.log(log.toString());
// function logMessage(message) {
//   console.log(message);
// }

let log = function logMessage(message) {

console.log(message);

};

console.log(log.name); // logMessage

console.log(log.length); // 1

console.log(log.toString());

// function logMessage(message) {

// console.log(message);

// }

Один комментарий к “Функции в JavaScript”

WERANCE:

30/05/2021 в 20:47

Спасибо большое!

Войдите, чтобы ответить

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.