In this section, we will introduce important features of functions in JavaScript, as well as three ways to declare a function.
Function Declaration
The declaration of the function, which we talked about all the time before, is called the specification of the language Function Declaration
.
There is no settled Russian translation, such syntax is also called “standard” or “normal” function declaration. A bit further we will look at other options for creating functions.
Let me once again highlight the main meaning of the declaration of the Function Declaration
:
In other words, the declaration of function func(параметры) { код }
tells the interpreter: “create the variable func
, and put a function with the specified parameters and code”.
In this case, func
is not really a “function name”. It is absolutely not tied to the function!
This is the name of the variable into which the function will be placed, and from which it can then be deleted, copied to another variable, and as a result, it will not be possible to call it as func
:
In particular, it is impossible to have a function and a variable with the same name:
In the example above, the variable f
in the first line gets the value - the function, and in the second - the number 5
. As a result, we get a variable with the value f=5
.
Creation time Function Declaration
Functions declared as Function Declaration
are created by the interpreter before executing the code.
Before you execute the first line, the interpreter scans the code, looks for the Function Declaration
in it, and processes them.
Therefore, they can be called before the announcement, for example:
This code will work because The declaration of declaration function sayHi
processed and the function is created before the first line of code is executed.
Let's try, depending on the condition, declare the function in different ways:
Which call will work?
To understand this, remember how functions work.
-
Function Declaration
processed before the first line of code. The browser scans the code and creates functions from such declarations. In this second ad will overwrite the first.
- Further, at runtime, ads are ignored (they have already been processed), as if the code were:
01 | function sayHi() { alert( 'Прошу вас!' ); } ); } |
02 | function sayHi() { alert( 'До 18 нельзя' ); } ); } |
As you can see, the if
construct does not affect anything here. It was not possible to declare a function differently, depending on the condition.
PS This is the correct specification. At the time of this writing, it is followed by all browsers except Firefox.
Function Expression
declaration
There is an alternative syntax for creating functions that solves problems with a “conditional” declaration.
You can create a function and assign it to a variable as the most common value.
This declaration is called Function Expression
and looks like this:
For example:
Such a function can be declared in any expression where a normal value is allowed.
For example, the following array declaration is quite possible:
Unlike Function Declaration
declarations, which are created in advance, before code execution, Function Expression
declarations create a function when execution reaches them.
Therefore, they can be used only after the announcement.
... And so it will be:
Thanks to this property, Function Expression
can (and even should) be used for conditional function declaration:
Function with a call "on site"
Imagine for a moment that we have created a script that does something deliciously stunning with a page. To do this, he, of course, declares his temporary variables and functions.
Our script is so wonderful that we want to give it to other people.
In this case, we would like anyone to insert the script on the page, and the temporary variables and functions of the script do not conflict with those used on it. For example, our script sets the variables a, b
, and if they are already used on the page, there will be a conflict.
To avoid it, our script needs its own separate scope in which it will work.
To do this, use the function with a call "on the spot." Such a function is declared - and immediately called, like this:
Now the internal variables of the script have become local. Even if the variable a
is declared elsewhere on the page, there will be no problems. Our script now has its own, isolated scope.
This practice is widely used in JavaScript libraries so that temporary variables and functions that are used during initialization do not conflict with external code.
A function that is declared this way, and immediately called, has no name. It is not saved anywhere, and therefore cannot be called a second time. But in this case it is not necessary, because the task of such a wrapper function is to create a separate scope for the script, which it did.
Why braces around the function?
In the examples above, there are brackets around function() {...}
. If you write without them - this code will cause an error:
This error will occur because the browser, seeing the function
keyword in the main code flow, will try to read the Function Declaration
, and there is not even a name here.
However, even if you put the name, it will not work either:
The fact is that "on the spot" it is allowed to call only Function Expression
.
The general rule is:
- If the browser sees
function
in the main flow of code, it considers that it is a Function Declaration
. - If
function
goes as part of a more complex expression, then it assumes that it is a Function Expression
.
For this, we need brackets - to show that we have Function Expression
, which, according to JavaScript rules, can be called "on the spot".
You can show it in another way, for example, by putting an operator before a function:
The main thing is for the interpreter to understand that this is Function Expression
, then it will allow to call the function "in place".
The brackets are not needed if this is Function Expression
, for example in such a call:
The function here is created as part of an assignment expression, therefore it is a Function Expression
and can be called "in place". At the same time, since the function itself is not saved anywhere, it will disappear when it is executed, only its result will remain.
Technically, if a function is already defined as Function Expression
, then it can be called "in place" without brackets:
var result = function (a,b) { |
But for reasons of style and readability of the brackets around function
it is recommended to put :
var result = ( function (a,b) { |
Then it is immediately obvious that the function itself is not recorded in result
( result = function...
), but the “on-site call” is in progress. When reading this code, fewer errors.
Total
Functions in JavaScript are values. They can be assigned, transmitted, created anywhere in the code.
- If the function is declared in the main code flow , then it is a
Function Declaration
. - If the function is created as part of an expression, then it is a
Function Expression
.
There are the following differences between these two main ways of creating functions:
| Function Declaration | Function Expression |
---|
Time of creation | Before executing the first line of code. | When control reaches the line with the function. |
You can call before the announcement | Да (because it is created in advance) | Нет |
You can declare in if | Нет (because it is created in advance) | Да |
You can call "on the spot" | Нет (limiting javascript syntax) | Да |
As a general tip, prefer the Function Declaration
.
Compare readability:
2 | var f = function () { ... } |
Function Declaration
shorter and better read. Extra bonus - such functions can be called before they are declared.
Use Function Expression
only where you need it. For example, to declare a function depending on conditions.
Comments
To leave a comment
Scripting client side JavaScript, jqvery, BackBone
Terms: Scripting client side JavaScript, jqvery, BackBone