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

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

Существует три способа объявления функции: Function Declaration, Function Expression и Named Function Expression.

Function Declaration (сокращённо FD) – это "классическое" объявление функции. В JavaScript функции объявляются с помощью литерала функции. Синтаксис объявления FD:

Литерал функции состоит из следующих четырёх частей:

Простой пример:

Function sayHi() { alert("Hello"); }

Встречая ключевое слово function интерпретатор создаёт функцию и затем присваивает ссылку на неё переменной с именем sayHi (переменная с данным именем создаётся интерпретатором автоматически).

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

Alert(sayHi); // function sayHi() { alert("Hello"); }

Function Expression (сокращённо FE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления FE:

Function (параметры) { инструкции }

Простой пример:

Var sayHi = function () { alert("Hello"); };

Функцию FE иначе ещё называют "анонимной функцией ".

Named Function Expression (сокращённо NFE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления NFE:

Function идентификатор (параметры) { инструкции }

Простой пример:

Var sayHi = function foo() { alert("Hello"); };

Объявления FE и NFE обрабатываются интерпретатором точно так же, как и объявление FD: интерпретатор создаёт функцию и сохраняет ссылку на неё в переменной sayHi.

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

Function sayHi() { alert("Hello"); } var sayHi2 = function () { alert("Hello2"); }; var sayHi3 = function foo() { alert("Hello3"); }; sayHi(); // "Hello" sayHi2(); // "Hello2" sayHi3(); // "Hello3"

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

// Вызов функции до её объявления в коде верхнего уровня foo(); function foo() { alert("Вызов функции foo() в глобальной области видимости."); // Вызов функции до её объявления в области видимости функции bar(); function bar() { alert("Вызов функции bar() в области видимости функции."); } }

Функции, объявленные как FE или NFE, создаются в процессе выполнения кода, поэтому их можно вызывать только после того как они объявлены:

// sayHi(); // Ошибка. Функция sayHi ещё не существует var sayHi = function () { alert("Hello!"); }; sayHi();

Функции, объявленные внутри блока, находятся в блочной области видимости:

// foo(); // Ошибка. Функция не объявлена. { foo(); // 1 function foo() { console.log(1); } } foo(); // Ошибка. Функция не объявлена.

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

(function sayHi(str) { if (str) { return; } sayHi("hi"); // Имя доступно внутри функции })(); sayHi(); // Ошибка. Функция не объявлена

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

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

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

Function foo(callback) { return callback(); } foo (function() { alert("Hello!"); });

Этот пример наглядно демонстрирует принцип действия обратного вызова.

Another essential concept in coding is functions , which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command - rather than having to type out the same code multiple times. In this article we"ll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters.

In JavaScript, you"ll find functions everywhere. In fact, we"ve been using functions all the way through the course so far; we"ve just not been talking about them very much. Now is the time, however, for us to start talking about functions explicitly, and really exploring their syntax.

Pretty much anytime you make use of a JavaScript structure that features a pair of parentheses - () - and you"re not using a common built-in language structure like a for loop , while or do...while loop , or if...else statement , you are making use of a function.

We"ve made use of functions built in to the browser a lot in this course. Every time we manipulated a text string, for example:

Var myText = "I am a string"; var newString = myText.replace("string", "sausage"); console.log(newString); // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made

Or every time we manipulated an array:

Var myArray = ["I", "love", "chocolate", "frogs"]; var madeAString = myArray.join(" "); console.log(madeAString); // the join() function takes an array, joins // all the array items together into a single // string, and returns this new string

Or every time we generated a random number:

Var myNumber = Math.random(); // the random() function generates a random // number between 0 and 1, and returns that // number

We were using a function!

Note : Feel free to enter these lines into your browser"s JavaScript console to re-familiarize yourself with their functionality, if needed.

The JavaScript language has many built-in functions to allow you to do useful things without having to write all that code yourself. In fact, some of the code you are calling when you invoke (a fancy word for run, or execute) a built in browser function couldn"t be written in JavaScript - many of these functions are calling parts of the background browser code, which is written largely in low-level system languages like C++, not web languages like JavaScript.

Bear in mind that some built-in browser functions are not part of the core JavaScript language - some are defined as part of browser APIs, which build on top of the default language to provide even more functionality (refer to this early section of our course for more descriptions). We"ll look at using browser APIs in more detail in a later module.

One thing we need to clear up before we move on - technically speaking, built in browser functions are not functions - they are methods . This sounds a bit scary and confusing, but don"t worry - the words function and method are largely interchangeable, at least for our purposes, at this stage in your learning.

The distinction is that methods are functions defined inside objects. Built-in browser functions (methods) and variables (which are called properties ) are stored inside structured objects, to make the code more efficient and easier to handle.

You don"t need to learn about the inner workings of structured JavaScript objects yet - you can wait until our later module that will teach you all about the inner workings of objects, and how to create your own. For now, we just wanted to clear up any possible confusion of method versus function - you are likely to meet both terms as you look at the available related resources across the Web.

You"ve also seen a lot of custom functions in the course so far - functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our random-canvas-circles.html example (see also the full ) from our loops article , we included a custom draw() function that looked like this:

Function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = "rgba(255,0,0,0.5)"; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); } }

This function draws 100 random circles inside an element. Every time we want to do that, we can just invoke the function with this

rather than having to write all that code out again every time we want to repeat it. And functions can contain whatever code you like - you can even call other functions from inside functions. The above function for example calls the random() function three times, which is defined by the following code:

Function random(number) { return Math.floor(Math.random()*number); }

We needed this function because the browser"s built-in Math.random() function only generates a random decimal number between 0 and 1. We wanted a random whole number between 0 and a specified number.

You are probably clear on this by now, but just in case ... to actually use a function after it has been defined, you"ve got to run - or invoke - it. This is done by including the name of the function in the code somewhere, followed by parentheses.

Function myFunction() { alert("hello"); } myFunction() // calls the function once

You may see functions defined and invoked in slightly different ways. So far we have just created a function like so:

Function myFunction() { alert("hello"); }

But you can also create a function that doesn"t have a name:

Function() { alert("hello"); }

This is called an anonymous function - it has no name! It also won"t do anything on its own. You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked:

Var myButton = document.querySelector("button"); myButton.onclick = function() { alert("hello"); }

The above example would require there to be a element available on the page to select and click. You"ve already seen this structure a few times throughout the course, and you"ll learn more about and see it in use in the next article.

You can also assign an anonymous function to be the value of a variable, for example:

Var myGreeting = function() { alert("hello"); }

This function could now be invoked using:

MyGreeting();

This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:

Var anotherGreeting = function() { alert("hello"); }

This function could now be invoked using either of

MyGreeting(); anotherGreeting();

But this would just be confusing, so don"t do it! When creating functions, it is better to just stick to this form:

Function myGreeting() { alert("hello"); }

You will mainly use anonymous functions to just run a load of code in response to an event firing - like a button being clicked - using an event handler. Again, this looks something like this:

MyButton.onclick = function() { alert("hello"); // I can put as much code // inside here as I want }

Some functions require parameters to be specified when you are invoking them - these are values that need to be included inside the function parentheses, which it needs to do its job properly.

Note : Parameters are sometimes called arguments, properties, or even attributes.

As an example, the browser"s built-in Math.random() function doesn"t require any parameters. When called, it always returns a random number between 0 and 1:

Var myNumber = Math.random();

The browser"s built-in string replace() function however needs two parameters - the substring to find in the main string, and the substring to replace that string with:

Var myText = "I am a string"; var newString = myText.replace("string", "sausage");

Note : When you need to specify multiple parameters, they are separated by commas.

It should also be noted that sometimes parameters are optional - you don"t have to specify them. If you don"t, the function will generally adopt some kind of default behavior. As an example, the array join() function"s parameter is optional:

Var myArray = ["I", "love", "chocolate", "frogs"]; var madeAString = myArray.join(" "); // returns "I love chocolate frogs" var madeAString = myArray.join(); // returns "I,love,chocolate,frogs"

If no parameter is included to specify a joining/delimiting character, a comma is used by default.

Let"s talk a bit about scope - a very important concept when dealing with functions. When you create a function, the variables and other things defined inside the function are inside their own separate scope , meaning that they are locked away in their own separate compartments, unreachable from inside other functions or from code outside the functions.

The top level outside all your functions is called the global scope . Values defined in the global scope are accessible from everywhere in the code.

JavaScript is set up like this for various reasons - but mainly because of security and organization. Sometimes you don"t want variables to be accessible from everywhere in the code - external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.

For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:

greeting(); // first.js var name = "Chris"; function greeting() { alert("Hello " + name + ": welcome to our company."); } // second.js var name = "Zaptec"; function greeting() { alert("Our company is called " + name + "."); }

Both functions you want to call are called greeting() , but you can only ever access the second.js file"s greeting() function - it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in first.js .

Keeping parts of your code locked away in functions avoids such problems, and is considered best practice.

It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures - in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats - a lion or tiger would feel terrible inside the penguins" watery, icy domain. At worst, the lions and tigers might try to eat the penguins!

The zoo keeper is like the global scope - he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.

Let"s look at a real example to demonstrate scoping.

Статья в разработке!

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

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

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

Как организовать выполнение некоторой задачи в JavaScript с использованием функций? Чтобы это выполнить обычно поступают так:

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

В результате такая программа становится более структурированной. В неё более просто вносить различные изменения и добавлять новые возможности.

Операции с функцией в JavaScript можно разделить на 2 шага:

• объявление (создание) функции.
• вызов (выполнение) этой функции.

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

// объявление функции someName function someName() { alert("Вы вызвали функцию someName!"); } JavaScript - Синтаксис объявления функции

Функции такого вида в JavaScript называются function declaration statement . Кроме этого вида в JavaScript ещё различают функции function definition expression и arrow function expression .

Составление имени функции выполняется по тем же правилам, что и имя переменной. Т.е. оно может содержать буквы, цифры (0-9), знаки «$» и «_». В качестве букв рекомендуется использовать только буквы английского алфавита (a-z, A-Z). Имя функции, также как и имя переменной не может начинаться с цифры.

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

Набор инструкций , заключенный в фигурные скобки - это код функции , который будет выполнен при её вызове .

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

// вызов функции, приведённой в предыдущем примере someName(); JavaScript - Синтаксис вызова функции

Функции в JavaScript являются объектами. В JavaScript вообще всё является объектами, кроме шести примитивных типов данных. А если функция является объектом, то ссылку на неё можно сохранить в переменную.

// объявление функции someName function someName() { alert("Вы вызвали функцию someName!"); } var reference = someName;

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

Reference();

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

// вызов функции sayWelcome с передачей ей двух аргументов sayWelcome("Иван", "Иванов"); // ещё один вызов функции sayWelcome с двумя аргументами sayWelcome("Петр", "Петров");

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

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

// объявление функции sayWelcome, которая имеет два параметра function sayWelcome (userFirstName, userLastName) { // инструкция, выводящая в консоль значения параметров «userFirstName» и «userLastName» console.log("Добро пожаловать, " + userLastName + " " + userFirstName); }

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

Например , вызовем функцию из примера, приведённого выше, без указания одного и двух параметров:

// вызов функции sayWelcome и передача ей одного аргумента sayWelcome("Петр"); // Добро пожаловать, undefined Петр // вызов функции sayWelcome без передачи ей аргументов sayWelcome(); // Добро пожаловать, undefined undefined

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

// объявление функции function outputParam(param1, param2, param3) { console.log(param1 + "; " + param2 + "; " + param3); } // вызовы функции outputParam с передачей ей разного количества параметров outputParam("Дождь","Снег","Туман"); // Дождь; Снег; Туман outputParam(17); // 17; undefined; undefined outputParam(24,33); // 24; 33; undefined outputParam(); // undefined; undefined; undefined

Другой способ обратиться к аргументам внутри функции – это использовать специальный объект arguments . Доступ к аргументам через arguments выполняется точно также как к элементам обычного массива, т.е. по их порядковым номерам. Таким образом, argument - позволит получить первый аргумент, arguments – второй аргумент и т.д.

// объявление функции sum function sum(num1, num2) { /* num1 или arguments – получить значение 1 аргумента num2 или arguments – получить значение 2 аргумента */ var sum1 = num1 + num2, sum2 = arguments + arguments; return "Сумма, полученная 1 способом равна " + sum1 + "; сумма, полученная 2 способом равна " + sum2; } /* выведем результат функции sum в консоль 7 - первый аргумент (к нему можно обратиться как по имени num1, так и с помощью arguments) 4 - второй аргумент (к нему можно обратиться как по имени num2, так и с помощью arguments) */ console.log(sum(7,4));

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

Кроме получения аргументов, объект arguments позволяет также узнать их количество. Выполняется это с помощью свойства length.

Перебрать аргументы , переданные функции, можно, например, с помощью цикла for или for...of .

// объявление функции sum function sum() { var i = 0; console.log("Вывод всех аргументов с помощью цикла for"); for (i; i < arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);

Функция, выводящая в консоль все переданные ей аргументы и их количество:

// объявление функции function myFunction () { var i; console.log("Количество переданных параметров = " + arguments.length); // переберём все параметры с помощью цикла for for (i = 0; i < arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");

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

// объявление функции var myCalc = function() { // переберём все параметры с помощью цикла for var i, sum = 0; for (i = 0; i lt; arguments.length; i++) { sum += arguments[i]; } // возвратим в качестве результата сумму return sum; } //вызов функции (вывод в консоль) console.log(myCalc(4, 20, 17, -6));

В результате, посредством объекта arguments можно реализовать в теле функции:

• проверку количества переданных аргументов;
• обработку какого угодного количества параметров.

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

Function mainF(p1, p2) { function childF() { console.log("p1 = " + p1 + "; p2 = " + p2); } childF(); } mainF(3, 5); // p1 = 3; p2 = 5 mainF(4, 7); // p1 = 4; p2 = 7

Начиная с версии ECMAScript 2015 (6) параметру функции можно задать значение, которое он будет иметь по умолчанию.

Например , установим параметру «color» значение по умолчанию, равное «#009688»:

Function setBGColor(color = "#009688") { document.body.style.backgroundColor = color; } setBGColor(); // цвет фона будет равен #009688 setBGColor("red"); // цвет фона будет равен red

До ECMAScript 2015 задать параметру значение по умолчанию можно, например, было так:

Function setBGColor(color) { color = color !== undefined ? color: "#009688"; // устанавливаем color значение по умолчанию, равное "#009688" document.body.style.backgroundColor = color; }

Если при вызове функции ей передать аргументов больше, чем у неё есть параметров, то получить оставшиеся можно с помощью, так называемых оставшихся параметров (rest patameters) . Данная возможность в языке появилась, начиная с ECMAScript 2015.

// ...nums - оставшиеся параметры, к которым можно обратиться в данном случае по имени nums function doMath(mathAction, ...nums) { var result = 0; nums.forEach(function(value) { switch (mathAction) { case "sum": result += value; break; case "sumCube": result += value**3; break; case "sumSquare": result += value**2; break; deafult: result = 0; } }) return result; } console.log(doMath("sum", 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

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

Функция в JavaScript всегда возвращает результат в вне зависимости от того, используется ли оператор return или нет.

// функция, возвращающая результат function sayWelcome (userFirstName, userLastName) { if ((!userFirstName) || (!userLastName)) return "Добро пожаловать, анонимный пользователь"; else return "Добро пожаловать, " + userLastName + " " + userFirstName; } // объявление переменной person var person; // присвоить переменной person результат функции sayWelcome person = sayWelcome("Иван","Иванов"); // вывести значение переменной в консоль console.log(person); //Инструкция, которая выведит в консоль результат работы функции sayWelcome console.log(sayWelcome("Петр","Петров")); //Инструкция, которая выведит в консоль результат работы функции sayWelcome console.log(sayWelcome("Сидоров")); JavaScript - Функция с проверкой параметров

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

// 1. функция, не возвращающая никакого результата function sayWelcome (userFirstName, userLastName) { console.log("Добро пожаловать, " + userLastName + " " + userFirstName); } // попробуем получить результат у функции, которая ничего не возвращает console.log(sayWelcome ("Иван", "Иванов")); // 2. функция, содержащая оператор return без значения function sayDay (day) { day = "Сегодня, " + day; return; //эта инструкция не выполнится, т.к. она идёт после оператора return console.log(day); } // попробуем получить результат у функции, которая содержит оператор return без значения console.log(sayDay("21 февраля 2016г.")); JavaScript - Получить значение у функции, которая ничего не возвращает

Такой же результат будет получен, если для оператора return не указать возвращаемое значение.

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

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

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

• Для того чтобы проверить передан аргумент или нет, используйте условие с проверкой его значения на undefined .
• Для проверки количества переданных аргументов функции используйте свойство объекта arguments length .
• Чтобы узнать тип переданного значения аргумента используйте операторы typeof или instanceof .
• Для работы с переменным числом аргументов, используйте объект arguments .
• Начиная с версии ECMAScript6, Вы можете указывать значения по умолчанию для аргументов.

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

//объявление функции, которая изменяет цвет заднего фона элементов function setBgColor(bgColor,elements) { //если параметр elements при вызове не указан if (elements=== undefined) { //то приравнять его значение "div" elements = "div"; } //получить все элементы elements = $(elements); //перебрать все элементы и установить им указанный цвет заднего фона elements.each(function(){ $(this).css("background-color",bgColor); }); } /*Вызвать функцию setBgColor, указав один параметр. Т.к. 2 параметр не указан, то данная фукция изменит цвет заднего фона у всех элементов div.*/ setBgColor("green"); /*Вызвать функцию setBgColor, указав 2 параметра. Т.к. 2 параметр задан, то данная функция изменит цвет заднего фона только элементов button.*/ setBgColor("#ff0000","button");

Произведём некоторые изменения в вышепредставленном коде. А именно, укажем для второго параметра значение по умолчанию:

//объявление функции, которая изменяет цвет заднего фона элементов //параметр elements имеет значение "div" по умолчанию function setBgColor(bgColor,elements = "div") { //получить все элементы elements = $(elements); //перебрать все элементы и установить им указанный цвет заднего фона elements.each(function(){ $(this).css("background-color",bgColor); }); } //вызвать функцию setBgColor, указав один параметр setBgColor("green"); //вызвать функцию setBgColor, указав 2 параметра setBgColor("#ff0000","button");

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

// описание функции function countCal(sex, height) { // параметры: sex (пол) и height (рост) var result; if ((sex === 0) || (sex === "man")) { result = (height - 100) * 20; } else if ((sex === 1) || (sex === "woman")) { result = (height - 105) * 19; } if (result) { // arguments - уровень активности if (arguments) { result *= arguments; } console.log("Количество ккал для нормальной жизнедеятельности: " + result); } else { console.log("Неверно указаны параметры"); } } /* вызов функции и передаче ей 2 аргументов (1 - "man", к нему можно обратиться с помощью имени sex и arguments; 2 - значение 185, к нему можно обратиться с помощью имени sex и arguments) */ countCal("man", 185); /* вызов функции и передаче ей 3 параметров, хотя в описании функции присутствуют только 2 (получить значение 3 параметра в данном случае можно только как arguments) */ countCal(0, 185, 2);

Рекурсия – это вызов внутри тела некоторой функции самой себя.

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

Function fact(n) { if (n === 1) { return 1; } return fact(n-1) * n; } console.log(fact(5)); // 120

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

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

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

// вызов функции alert alert("Некоторый текст"); JavaScript - Вызов функции alert

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

Var add = function(arg1, arg2) { var sum = arg1 + arg2; return sum; } var result = add(5, 2); //result теперь 7

То есть функция, во-первых, не имеет имени. Во-вторых, она присваивается переменной, но не просто присваивается, а тут же идет ее тело. Лично у меня, до этого писавшего на таких языках как VB, C++, подобное объявление вызывало недоумение и непонимание, как это устроено и зачем вообще так писать.

Я привык к "классическому" объявлению функции и ее вызову, вот так:

Function add(arg1, arg2) { var sum = arg1 + arg2; return sum; } var result = add(5, 3); //result теперь 8

И вот здесь как раз мы подходим к особенностям функций в Javascript. Для простоты понимания представьте себе, что функция в JS - это обычное значение, как, например, число или строка. Вы же можете записать в переменную result число 5? Или что-то более сложное, вроде массива, а потом вывести это на экран? Можете. Так вот, если представить, что функция - это обычное значение, пусть и весьма сложной структуры, то первый способ объявления уже не кажется чем-то невероятным.

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

Var a = 5; var b = a; alert(b); //выведет 5

Обычное дело. А теперь взгляните вот на этот код:

Var add = function(arg1, arg2) { var sum = arg1 + arg2; return sum; } var calcSum = add; alert(calcSum(5, 6)); //выведет 11

Начинаете уже догадываться? Поскольку функция - как переменная, мы можем "размножать" ее посредством обычного присваивания в другие переменные, превращая их так же в функции. Теперь calcSum тоже умеет складывать два числа. Однако код

Var calcSum = add(1, 1); //calcSum теперь равно 2, это не функция, а переменная с числом alert(calcSum(5, 6)); //ошибка

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

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

Var calcFact = function fact(val) { if (val == 1) ? val: val * fact(val — 1); //вычисление факториала с помощью рекурсии } alert(calcFact(4)); //выведет 24

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

Возможно, вы задаетесь вопросом "Хм, интересная возможность! Но какое преимущество у этого способа? Есть ли ситуации, когда без этого не обойтись или это хотя бы более удобно, чем обычное объявление?". Не возьмусь утверждать, что есть ситуации, где без такого подхода обойтись нельзя, но пример, где он уменьшает количество кода, привести могу. Допустим, вам нужно поприветствовать человека в зависимости от времени суток:

Var date = new Date(); var hello = (date.getHours() < 12) ? function() {alert("Доброе утро!")} : (date.getHours() < 18) ? function() {alert("Добрый день!")} : function() {alert("Добрый вечер!")}; hello();

Как видите, функции крайне простые, с одной-единственной командой alert.

Если бы мы решили пойти "классическим путем", то пришлось бы писать три отдельные функции, а потом вызывать их в условии проверки времени:

Function goodMorning() { alert("Доброе утро!"); } function goodAfternoon() { alert("Добрый день!"); } function goodEvning() { alert("Добрый вечер!"); } var date = new Date(); (date.getHours() < 12) ? goodMorning() : (date.getHours() < 18) ? goodAfternoon() : goodEvning();

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

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

Function add(a, b) { return a + b; } var calcSum = add; calcSum(5, 5);

Уже нельзя. Поэтому в нашем примере, если все-таки понадобится приветствовать гостя не единожды, нам придется каждый раз дублировать вот этот фрагмент:

(date.getHours() < 12) ? goodMorning() : (date.getHours() < 18) ? goodAfternoon() : goodEvning();

А в первом случае достаточно будет написать всего лишь hello(); и результат будет тот же.

Я рассказал вам про интересную особенность функций JS и привел примеры. Таким образом вы увидели, что способы вызова функций в Javascript не ограничиваются одним-единственным видом. Даже если вы и не сможете сразу найти применение этим возможностям в ваших проектах, то хотя бы будете знать, что такие возможности есть. И когда подвернется действительно удачный случай, то сможете сократить объем кода и избежать лишней путаницы и ошибок.!

Статья в разработке!

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

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

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

Как организовать выполнение некоторой задачи в JavaScript с использованием функций? Чтобы это выполнить обычно поступают так:

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

В результате такая программа становится более структурированной. В неё более просто вносить различные изменения и добавлять новые возможности.

Операции с функцией в JavaScript можно разделить на 2 шага:

• объявление (создание) функции.
• вызов (выполнение) этой функции.

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

// объявление функции someName function someName() { alert("Вы вызвали функцию someName!"); } JavaScript - Синтаксис объявления функции

Функции такого вида в JavaScript называются function declaration statement . Кроме этого вида в JavaScript ещё различают функции function definition expression и arrow function expression .

Составление имени функции выполняется по тем же правилам, что и имя переменной. Т.е. оно может содержать буквы, цифры (0-9), знаки «$» и «_». В качестве букв рекомендуется использовать только буквы английского алфавита (a-z, A-Z). Имя функции, также как и имя переменной не может начинаться с цифры.

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

Набор инструкций , заключенный в фигурные скобки - это код функции , который будет выполнен при её вызове .

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

// вызов функции, приведённой в предыдущем примере someName(); JavaScript - Синтаксис вызова функции

Функции в JavaScript являются объектами. В JavaScript вообще всё является объектами, кроме шести примитивных типов данных. А если функция является объектом, то ссылку на неё можно сохранить в переменную.

// объявление функции someName function someName() { alert("Вы вызвали функцию someName!"); } var reference = someName;

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

Reference();

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

// вызов функции sayWelcome с передачей ей двух аргументов sayWelcome("Иван", "Иванов"); // ещё один вызов функции sayWelcome с двумя аргументами sayWelcome("Петр", "Петров");

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

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

// объявление функции sayWelcome, которая имеет два параметра function sayWelcome (userFirstName, userLastName) { // инструкция, выводящая в консоль значения параметров «userFirstName» и «userLastName» console.log("Добро пожаловать, " + userLastName + " " + userFirstName); }

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

Например , вызовем функцию из примера, приведённого выше, без указания одного и двух параметров:

// вызов функции sayWelcome и передача ей одного аргумента sayWelcome("Петр"); // Добро пожаловать, undefined Петр // вызов функции sayWelcome без передачи ей аргументов sayWelcome(); // Добро пожаловать, undefined undefined

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

// объявление функции function outputParam(param1, param2, param3) { console.log(param1 + "; " + param2 + "; " + param3); } // вызовы функции outputParam с передачей ей разного количества параметров outputParam("Дождь","Снег","Туман"); // Дождь; Снег; Туман outputParam(17); // 17; undefined; undefined outputParam(24,33); // 24; 33; undefined outputParam(); // undefined; undefined; undefined

Другой способ обратиться к аргументам внутри функции – это использовать специальный объект arguments . Доступ к аргументам через arguments выполняется точно также как к элементам обычного массива, т.е. по их порядковым номерам. Таким образом, argument - позволит получить первый аргумент, arguments – второй аргумент и т.д.

// объявление функции sum function sum(num1, num2) { /* num1 или arguments – получить значение 1 аргумента num2 или arguments – получить значение 2 аргумента */ var sum1 = num1 + num2, sum2 = arguments + arguments; return "Сумма, полученная 1 способом равна " + sum1 + "; сумма, полученная 2 способом равна " + sum2; } /* выведем результат функции sum в консоль 7 - первый аргумент (к нему можно обратиться как по имени num1, так и с помощью arguments) 4 - второй аргумент (к нему можно обратиться как по имени num2, так и с помощью arguments) */ console.log(sum(7,4));

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

Кроме получения аргументов, объект arguments позволяет также узнать их количество. Выполняется это с помощью свойства length.

Перебрать аргументы , переданные функции, можно, например, с помощью цикла for или for...of .

// объявление функции sum function sum() { var i = 0; console.log("Вывод всех аргументов с помощью цикла for"); for (i; i < arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);

Функция, выводящая в консоль все переданные ей аргументы и их количество:

// объявление функции function myFunction () { var i; console.log("Количество переданных параметров = " + arguments.length); // переберём все параметры с помощью цикла for for (i = 0; i < arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");

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

// объявление функции var myCalc = function() { // переберём все параметры с помощью цикла for var i, sum = 0; for (i = 0; i lt; arguments.length; i++) { sum += arguments[i]; } // возвратим в качестве результата сумму return sum; } //вызов функции (вывод в консоль) console.log(myCalc(4, 20, 17, -6));

В результате, посредством объекта arguments можно реализовать в теле функции:

• проверку количества переданных аргументов;
• обработку какого угодного количества параметров.

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

Function mainF(p1, p2) { function childF() { console.log("p1 = " + p1 + "; p2 = " + p2); } childF(); } mainF(3, 5); // p1 = 3; p2 = 5 mainF(4, 7); // p1 = 4; p2 = 7

Начиная с версии ECMAScript 2015 (6) параметру функции можно задать значение, которое он будет иметь по умолчанию.

Например , установим параметру «color» значение по умолчанию, равное «#009688»:

Function setBGColor(color = "#009688") { document.body.style.backgroundColor = color; } setBGColor(); // цвет фона будет равен #009688 setBGColor("red"); // цвет фона будет равен red

До ECMAScript 2015 задать параметру значение по умолчанию можно, например, было так:

Function setBGColor(color) { color = color !== undefined ? color: "#009688"; // устанавливаем color значение по умолчанию, равное "#009688" document.body.style.backgroundColor = color; }

Если при вызове функции ей передать аргументов больше, чем у неё есть параметров, то получить оставшиеся можно с помощью, так называемых оставшихся параметров (rest patameters) . Данная возможность в языке появилась, начиная с ECMAScript 2015.

// ...nums - оставшиеся параметры, к которым можно обратиться в данном случае по имени nums function doMath(mathAction, ...nums) { var result = 0; nums.forEach(function(value) { switch (mathAction) { case "sum": result += value; break; case "sumCube": result += value**3; break; case "sumSquare": result += value**2; break; deafult: result = 0; } }) return result; } console.log(doMath("sum", 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

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

Функция в JavaScript всегда возвращает результат в вне зависимости от того, используется ли оператор return или нет.

// функция, возвращающая результат function sayWelcome (userFirstName, userLastName) { if ((!userFirstName) || (!userLastName)) return "Добро пожаловать, анонимный пользователь"; else return "Добро пожаловать, " + userLastName + " " + userFirstName; } // объявление переменной person var person; // присвоить переменной person результат функции sayWelcome person = sayWelcome("Иван","Иванов"); // вывести значение переменной в консоль console.log(person); //Инструкция, которая выведит в консоль результат работы функции sayWelcome console.log(sayWelcome("Петр","Петров")); //Инструкция, которая выведит в консоль результат работы функции sayWelcome console.log(sayWelcome("Сидоров")); JavaScript - Функция с проверкой параметров

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

// 1. функция, не возвращающая никакого результата function sayWelcome (userFirstName, userLastName) { console.log("Добро пожаловать, " + userLastName + " " + userFirstName); } // попробуем получить результат у функции, которая ничего не возвращает console.log(sayWelcome ("Иван", "Иванов")); // 2. функция, содержащая оператор return без значения function sayDay (day) { day = "Сегодня, " + day; return; //эта инструкция не выполнится, т.к. она идёт после оператора return console.log(day); } // попробуем получить результат у функции, которая содержит оператор return без значения console.log(sayDay("21 февраля 2016г.")); JavaScript - Получить значение у функции, которая ничего не возвращает

Такой же результат будет получен, если для оператора return не указать возвращаемое значение.

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

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

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

• Для того чтобы проверить передан аргумент или нет, используйте условие с проверкой его значения на undefined .
• Для проверки количества переданных аргументов функции используйте свойство объекта arguments length .
• Чтобы узнать тип переданного значения аргумента используйте операторы typeof или instanceof .
• Для работы с переменным числом аргументов, используйте объект arguments .
• Начиная с версии ECMAScript6, Вы можете указывать значения по умолчанию для аргументов.

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

//объявление функции, которая изменяет цвет заднего фона элементов function setBgColor(bgColor,elements) { //если параметр elements при вызове не указан if (elements=== undefined) { //то приравнять его значение "div" elements = "div"; } //получить все элементы elements = $(elements); //перебрать все элементы и установить им указанный цвет заднего фона elements.each(function(){ $(this).css("background-color",bgColor); }); } /*Вызвать функцию setBgColor, указав один параметр. Т.к. 2 параметр не указан, то данная фукция изменит цвет заднего фона у всех элементов div.*/ setBgColor("green"); /*Вызвать функцию setBgColor, указав 2 параметра. Т.к. 2 параметр задан, то данная функция изменит цвет заднего фона только элементов button.*/ setBgColor("#ff0000","button");

Произведём некоторые изменения в вышепредставленном коде. А именно, укажем для второго параметра значение по умолчанию:

//объявление функции, которая изменяет цвет заднего фона элементов //параметр elements имеет значение "div" по умолчанию function setBgColor(bgColor,elements = "div") { //получить все элементы elements = $(elements); //перебрать все элементы и установить им указанный цвет заднего фона elements.each(function(){ $(this).css("background-color",bgColor); }); } //вызвать функцию setBgColor, указав один параметр setBgColor("green"); //вызвать функцию setBgColor, указав 2 параметра setBgColor("#ff0000","button");

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

// описание функции function countCal(sex, height) { // параметры: sex (пол) и height (рост) var result; if ((sex === 0) || (sex === "man")) { result = (height - 100) * 20; } else if ((sex === 1) || (sex === "woman")) { result = (height - 105) * 19; } if (result) { // arguments - уровень активности if (arguments) { result *= arguments; } console.log("Количество ккал для нормальной жизнедеятельности: " + result); } else { console.log("Неверно указаны параметры"); } } /* вызов функции и передаче ей 2 аргументов (1 - "man", к нему можно обратиться с помощью имени sex и arguments; 2 - значение 185, к нему можно обратиться с помощью имени sex и arguments) */ countCal("man", 185); /* вызов функции и передаче ей 3 параметров, хотя в описании функции присутствуют только 2 (получить значение 3 параметра в данном случае можно только как arguments) */ countCal(0, 185, 2);

Рекурсия – это вызов внутри тела некоторой функции самой себя.

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

Function fact(n) { if (n === 1) { return 1; } return fact(n-1) * n; } console.log(fact(5)); // 120

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

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

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

// вызов функции alert alert("Некоторый текст"); JavaScript - Вызов функции alert