ā¹ļø Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.1 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://javascript.info/function-basics |
| Last Crawled | 2026-04-14 14:46:47 (3 days ago) |
| First Indexed | 2017-03-31 19:06:04 (9 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Functions |
| Meta Description | null |
| Meta Canonical | null |
| Boilerpipe Text | Quite often we need to perform a similar action in many places of the script.
For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else.
Functions are the main ābuilding blocksā of the program. They allow the code to be called many times without repetition.
Weāve already seen examples of built-in functions, like
alert(message)
,
prompt(message, default)
and
confirm(question)
. But we can create functions of our own as well.
Function Declaration
To create a function we can use a
function declaration
.
It looks like this:
function
showMessage
(
)
{
alert
(
'Hello everyone!'
)
;
}
The
function
keyword goes first, then goes the
name of the function
, then a list of
parameters
between the parentheses (comma-separated, empty in the example above, weāll see examples later) and finally the code of the function, also named āthe function bodyā, between curly braces.
function
name
(
parameter1
,
parameter2
,
...
parameterN
)
{
// body
}
Our new function can be called by its name:
showMessage()
.
For instance:
function
showMessage
(
)
{
alert
(
'Hello everyone!'
)
;
}
showMessage
(
)
;
showMessage
(
)
;
The call
showMessage()
executes the code of the function. Here we will see the message two times.
This example clearly demonstrates one of the main purposes of functions: to avoid code duplication.
If we ever need to change the message or the way it is shown, itās enough to modify the code in one place: the function which outputs it.
Local variables
A variable declared inside a function is only visible inside that function.
For example:
function
showMessage
(
)
{
let
message
=
"Hello, I'm JavaScript!"
;
// local variable
alert
(
message
)
;
}
showMessage
(
)
;
// Hello, I'm JavaScript!
alert
(
message
)
;
// <-- Error! The variable is local to the function
Outer variables
A function can access an outer variable as well, for example:
let
userName
=
'John'
;
function
showMessage
(
)
{
let
message
=
'Hello, '
+
userName
;
alert
(
message
)
;
}
showMessage
(
)
;
// Hello, John
The function has full access to the outer variable. It can modify it as well.
For instance:
let
userName
=
'John'
;
function
showMessage
(
)
{
userName
=
"Bob"
;
// (1) changed the outer variable
let
message
=
'Hello, '
+
userName
;
alert
(
message
)
;
}
alert
(
userName
)
;
//
John
before the function call
showMessage
(
)
;
alert
(
userName
)
;
//
Bob
, the value was modified by the function
The outer variable is only used if thereās no local one.
If a same-named variable is declared inside the function then it
shadows
the outer one. For instance, in the code below the function uses the local
userName
. The outer one is ignored:
let
userName
=
'John'
;
function
showMessage
(
)
{
let
userName
=
"Bob"
;
// declare a local variable
let
message
=
'Hello, '
+
userName
;
//
Bob
alert
(
message
)
;
}
// the function will create and use its own userName
showMessage
(
)
;
alert
(
userName
)
;
//
John
, unchanged, the function did not access the outer variable
Global variables
Variables declared outside of any function, such as the outer
userName
in the code above, are called
global
.
Global variables are visible from any function (unless shadowed by locals).
Itās a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data.
Parameters
We can pass arbitrary data to functions using parameters.
In the example below, the function has two parameters:
from
and
text
.
function
showMessage
(
from
,
text
)
{
// parameters: from, text
alert
(
from
+
': '
+
text
)
;
}
showMessage
(
'Ann'
,
'Hello!'
)
;
// Ann: Hello! (*)
showMessage
(
'Ann'
,
"What's up?"
)
;
// Ann: What's up? (**)
When the function is called in lines
(*)
and
(**)
, the given values are copied to local variables
from
and
text
. Then the function uses them.
Hereās one more example: we have a variable
from
and pass it to the function. Please note: the function changes
from
, but the change is not seen outside, because a function always gets a copy of the value:
function
showMessage
(
from
,
text
)
{
from
=
'*'
+
from
+
'*'
;
// make "from" look nicer
alert
(
from
+
': '
+
text
)
;
}
let
from
=
"Ann"
;
showMessage
(
from
,
"Hello"
)
;
// *Ann*: Hello
// the value of "from" is the same, the function modified a local copy
alert
(
from
)
;
// Ann
When a value is passed as a function parameter, itās also called an
argument
.
In other words, to put these terms straight:
A parameter is the variable listed inside the parentheses in the function declaration (itās a declaration time term).
An argument is the value that is passed to the function when it is called (itās a call time term).
We declare functions listing their parameters, then call them passing arguments.
In the example above, one might say: āthe function
showMessage
is declared with two parameters, then called with two arguments:
from
and
"Hello"
ā.
Default values
If a function is called, but an argument is not provided, then the corresponding value becomes
undefined
.
For instance, the aforementioned function
showMessage(from, text)
can be called with a single argument:
showMessage
(
"Ann"
)
;
Thatās not an error. Such a call would output
"*Ann*: undefined"
. As the value for
text
isnāt passed, it becomes
undefined
.
We can specify the so-called ādefaultā (to use if omitted) value for a parameter in the function declaration, using
=
:
function
showMessage
(
from
,
text
=
"no text given"
)
{
alert
(
from
+
": "
+
text
)
;
}
showMessage
(
"Ann"
)
;
// Ann: no text given
Now if the
text
parameter is not passed, it will get the value
"no text given"
.
The default value also jumps in if the parameter exists, but strictly equals
undefined
, like this:
showMessage
(
"Ann"
,
undefined
)
;
// Ann: no text given
Here
"no text given"
is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible:
function
showMessage
(
from
,
text
=
anotherFunction
(
)
)
{
// anotherFunction() only executed if no text given
// its result becomes the value of text
}
Evaluation of default parameters
In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter.
In the example above,
anotherFunction()
isnāt called at all, if the
text
parameter is provided.
On the other hand, itās independently called every time when
text
is missing.
Default parameters in old JavaScript code
Several years ago, JavaScript didnāt support the syntax for default parameters. So people used other ways to specify them.
Nowadays, we can come across them in old scripts.
For example, an explicit check for
undefined
:
function
showMessage
(
from
,
text
)
{
if
(
text
===
undefined
)
{
text
=
'no text given'
;
}
alert
(
from
+
": "
+
text
)
;
}
ā¦Or using the
||
operator:
function
showMessage
(
from
,
text
)
{
// If the value of text is falsy, assign the default value
// this assumes that text == "" is the same as no text at all
text
=
text
||
'no text given'
;
...
}
Alternative default parameters
Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
We can check if the parameter is passed during the function execution, by comparing it with
undefined
:
function
showMessage
(
text
)
{
// ...
if
(
text
===
undefined
)
{
// if the parameter is missing
text
=
'empty message'
;
}
alert
(
text
)
;
}
showMessage
(
)
;
// empty message
ā¦Or we could use the
||
operator:
function
showMessage
(
text
)
{
// if text is undefined or otherwise falsy, set it to 'empty'
text
=
text
||
'empty'
;
...
}
Modern JavaScript engines support the
nullish coalescing operator
??
, itās better when most falsy values, such as
0
, should be considered ānormalā:
function
showCount
(
count
)
{
// if count is undefined or null, show "unknown"
alert
(
count
??
"unknown"
)
;
}
showCount
(
0
)
;
// 0
showCount
(
null
)
;
// unknown
showCount
(
)
;
// unknown
Returning a value
A function can return a value back into the calling code as the result.
The simplest example would be a function that sums two values:
function
sum
(
a
,
b
)
{
return
a
+
b
;
}
let
result
=
sum
(
1
,
2
)
;
alert
(
result
)
;
// 3
The directive
return
can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to
result
above).
There may be many occurrences of
return
in a single function. For instance:
function
checkAge
(
age
)
{
if
(
age
>=
18
)
{
return
true
;
}
else
{
return
confirm
(
'Do you have permission from your parents?'
)
;
}
}
let
age
=
prompt
(
'How old are you?'
,
18
)
;
if
(
checkAge
(
age
)
)
{
alert
(
'Access granted'
)
;
}
else
{
alert
(
'Access denied'
)
;
}
It is possible to use
return
without a value. That causes the function to exit immediately.
For example:
function
showMovie
(
age
)
{
if
(
!
checkAge
(
age
)
)
{
return
;
}
alert
(
"Showing you the movie"
)
;
// (*)
// ...
}
In the code above, if
checkAge(age)
returns
false
, then
showMovie
wonāt proceed to the
alert
.
A function with an empty
return
or without it returns
undefined
If a function does not return a value, it is the same as if it returns
undefined
:
function
doNothing
(
)
{
/* empty */
}
alert
(
doNothing
(
)
===
undefined
)
;
// true
An empty
return
is also the same as
return undefined
:
function
doNothing
(
)
{
return
;
}
alert
(
doNothing
(
)
===
undefined
)
;
// true
Never add a newline between
return
and the value
For a long expression in
return
, it might be tempting to put it on a separate line, like this:
return
(
some
+
long
+
expression
+
or
+
whatever
*
f
(
a
)
+
f
(
b
)
)
That doesnāt work, because JavaScript assumes a semicolon after
return
. Thatāll work the same as:
return
;
(
some
+
long
+
expression
+
or
+
whatever
*
f
(
a
)
+
f
(
b
)
)
So, it effectively becomes an empty return.
If we want the returned expression to wrap across multiple lines, we should start it at the same line as
return
. Or at least put the opening parentheses there as follows:
return
(
some
+
long
+
expression
+
or
+
whatever
*
f
(
a
)
+
f
(
b
)
)
And it will work just as we expect it to.
Naming a function
Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does.
It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes.
For instance, functions that start with
"show"
usually show something.
Function starting withā¦
"getā¦"
ā return a value,
"calcā¦"
ā calculate something,
"createā¦"
ā create something,
"checkā¦"
ā check something and return a boolean, etc.
Examples of such names:
showMessage
(
.
.
)
// shows a message
getAge
(
.
.
)
// returns the age (gets it somehow)
calcSum
(
.
.
)
// calculates a sum and returns the result
createForm
(
.
.
)
// creates a form (and usually returns it)
checkPermission
(
.
.
)
// checks a permission, returns true/false
With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns.
One function ā one action
A function should do exactly what is suggested by its name, no more.
Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two).
A few examples of breaking this rule:
getAge
ā would be bad if it shows an
alert
with the age (should only get).
createForm
ā would be bad if it modifies the document, adding a form to it (should only create it and return).
checkPermission
ā would be bad if it displays the
access granted/denied
message (should only perform the check and return the result).
These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually theyāre not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.
Ultrashort function names
Functions that are used
very often
sometimes have ultrashort names.
For example, the
jQuery
framework defines a function with
$
. The
Lodash
library has its core function named
_
.
These are exceptions. Generally function names should be concise and descriptive.
Functions == Comments
Functions should be short and do exactly one thing. If that thing is big, maybe itās worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but itās definitely a good thing.
A separate function is not only easier to test and debug ā its very existence is a great comment!
For instance, compare the two functions
showPrimes(n)
below. Each one outputs
prime numbers
up to
n
.
The first variant uses a label:
function
showPrimes
(
n
)
{
nextPrime
:
for
(
let
i
=
2
;
i
<
n
;
i
++
)
{
for
(
let
j
=
2
;
j
<
i
;
j
++
)
{
if
(
i
%
j
==
0
)
continue
nextPrime
;
}
alert
(
i
)
;
// a prime
}
}
The second variant uses an additional function
isPrime(n)
to test for primality:
function
showPrimes
(
n
)
{
for
(
let
i
=
2
;
i
<
n
;
i
++
)
{
if
(
!
isPrime
(
i
)
)
continue
;
alert
(
i
)
;
// a prime
}
}
function
isPrime
(
n
)
{
for
(
let
i
=
2
;
i
<
n
;
i
++
)
{
if
(
n
%
i
==
0
)
return
false
;
}
return
true
;
}
The second variant is easier to understand, isnāt it? Instead of the code piece we see a name of the action (
isPrime
). Sometimes people refer to such code as
self-describing
.
So, functions can be created even if we donāt intend to reuse them. They structure the code and make it readable.
Summary
A function declaration looks like this:
function
name
(
parameters
,
delimited
,
by
,
comma
)
{
/* code */
}
Values passed to a function as parameters are copied to its local variables.
A function may access outer variables. But it works only from inside out. The code outside of the function doesnāt see its local variables.
A function can return a value. If it doesnāt, then its result is
undefined
.
To make the code clean and easy to understand, itās recommended to use mainly local variables and parameters in the function, not outer variables.
It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect.
Function naming:
A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns.
A function is an action, so function names are usually verbal.
There exist many well-known function prefixes like
createā¦
,
showā¦
,
getā¦
,
checkā¦
and so on. Use them to hint what a function does.
Functions are the main building blocks of scripts. Now weāve covered the basics, so we actually can start creating and using them. But thatās only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. |
| Markdown | EN
- [ARŲ¹Ų±ŲØŁ](https://ar.javascript.info/function-basics)
- [ENEnglish](https://javascript.info/function-basics)
- [ESEspaƱol](https://es.javascript.info/function-basics)
- [FAŁŲ§Ų±Ų³Ū](https://fa.javascript.info/function-basics)
- [FRFranƧais](https://fr.javascript.info/function-basics)
- [IDIndonesia](https://id.javascript.info/function-basics)
- [ITItaliano](https://it.javascript.info/function-basics)
- [JAę„ę¬čŖ](https://ja.javascript.info/function-basics)
- [KOķźµģ“](https://ko.javascript.info/function-basics)
- [RUŠ ŃŃŃŠŗŠøŠ¹](https://learn.javascript.ru/function-basics)
- [TRTĆ¼rkƧe](https://tr.javascript.info/function-basics)
- [UKŠ£ŠŗŃŠ°ŃŠ½ŃŃŠŗŠ°](https://uk.javascript.info/function-basics)
- [UZOŹ»zbek](https://uz.javascript.info/function-basics)
- [ZHē®ä½äøę](https://zh.javascript.info/function-basics)
We want to make this open-source project available for people all around the world.
[Help to translate](https://javascript.info/translate) the content of this tutorial to your language\!
[](https://javascript.info/)
[BuyEPUB/PDF](https://javascript.info/ebook)
[Tutorial map](https://javascript.info/tutorial/map)
Light themeDark theme
Share
1. [Tutorial](https://javascript.info/)
2. [The JavaScript language](https://javascript.info/js)
3. [JavaScript Fundamentals](https://javascript.info/first-steps)
October 14, 2022
# Functions
Quite often we need to perform a similar action in many places of the script.
For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else.
Functions are the main ābuilding blocksā of the program. They allow the code to be called many times without repetition.
Weāve already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well.
## [Function Declaration](https://javascript.info/function-basics#function-declaration)
To create a function we can use a *function declaration*.
It looks like this:
```
```
The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, weāll see examples later) and finally the code of the function, also named āthe function bodyā, between curly braces.
```
```
Our new function can be called by its name: `showMessage()`.
For instance:
```
```
The call `showMessage()` executes the code of the function. Here we will see the message two times.
This example clearly demonstrates one of the main purposes of functions: to avoid code duplication.
If we ever need to change the message or the way it is shown, itās enough to modify the code in one place: the function which outputs it.
## [Local variables](https://javascript.info/function-basics#local-variables)
A variable declared inside a function is only visible inside that function.
For example:
```
```
## [Outer variables](https://javascript.info/function-basics#outer-variables)
A function can access an outer variable as well, for example:
```
```
The function has full access to the outer variable. It can modify it as well.
For instance:
```
```
The outer variable is only used if thereās no local one.
If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored:
```
```
Global variables
Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*.
Global variables are visible from any function (unless shadowed by locals).
Itās a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data.
## [Parameters](https://javascript.info/function-basics#parameters)
We can pass arbitrary data to functions using parameters.
In the example below, the function has two parameters: `from` and `text`.
```
```
When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them.
Hereās one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value:
```
```
When a value is passed as a function parameter, itās also called an *argument*.
In other words, to put these terms straight:
- A parameter is the variable listed inside the parentheses in the function declaration (itās a declaration time term).
- An argument is the value that is passed to the function when it is called (itās a call time term).
We declare functions listing their parameters, then call them passing arguments.
In the example above, one might say: āthe function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`ā.
## [Default values](https://javascript.info/function-basics#default-values)
If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`.
For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument:
```
showMessage("Ann");
```
Thatās not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isnāt passed, it becomes `undefined`.
We can specify the so-called ādefaultā (to use if omitted) value for a parameter in the function declaration, using `=`:
```
```
Now if the `text` parameter is not passed, it will get the value `"no text given"`.
The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
```
showMessage("Ann", undefined); // Ann: no text given
```
Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible:
```
```
Evaluation of default parameters
In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter.
In the example above, `anotherFunction()` isnāt called at all, if the `text` parameter is provided.
On the other hand, itās independently called every time when `text` is missing.
Default parameters in old JavaScript code
Several years ago, JavaScript didnāt support the syntax for default parameters. So people used other ways to specify them.
Nowadays, we can come across them in old scripts.
For example, an explicit check for `undefined`:
```
```
ā¦Or using the `||` operator:
```
```
### [Alternative default parameters](https://javascript.info/function-basics#alternative-default-parameters)
Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
```
```
ā¦Or we could use the `||` operator:
```
```
Modern JavaScript engines support the [nullish coalescing operator](https://javascript.info/nullish-coalescing-operator) `??`, itās better when most falsy values, such as `0`, should be considered ānormalā:
```
```
## [Returning a value](https://javascript.info/function-basics#returning-a-value)
A function can return a value back into the calling code as the result.
The simplest example would be a function that sums two values:
```
```
The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above).
There may be many occurrences of `return` in a single function. For instance:
```
```
It is possible to use `return` without a value. That causes the function to exit immediately.
For example:
```
```
In the code above, if `checkAge(age)` returns `false`, then `showMovie` wonāt proceed to the `alert`.
A function with an empty `return` or without it returns `undefined`
If a function does not return a value, it is the same as if it returns `undefined`:
```
```
An empty `return` is also the same as `return undefined`:
```
```
Never add a newline between `return` and the value
For a long expression in `return`, it might be tempting to put it on a separate line, like this:
```
```
That doesnāt work, because JavaScript assumes a semicolon after `return`. Thatāll work the same as:
```
```
So, it effectively becomes an empty return.
If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows:
```
```
And it will work just as we expect it to.
## [Naming a function](https://javascript.info/function-basics#function-naming)
Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does.
It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes.
For instance, functions that start with `"show"` usually show something.
Function starting withā¦
- `"getā¦"` ā return a value,
- `"calcā¦"` ā calculate something,
- `"createā¦"` ā create something,
- `"checkā¦"` ā check something and return a boolean, etc.
Examples of such names:
```
```
With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns.
One function ā one action
A function should do exactly what is suggested by its name, no more.
Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two).
A few examples of breaking this rule:
- `getAge` ā would be bad if it shows an `alert` with the age (should only get).
- `createForm` ā would be bad if it modifies the document, adding a form to it (should only create it and return).
- `checkPermission` ā would be bad if it displays the `access granted/denied` message (should only perform the check and return the result).
These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually theyāre not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.
Ultrashort function names
Functions that are used *very often* sometimes have ultrashort names.
For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.
These are exceptions. Generally function names should be concise and descriptive.
## [Functions == Comments](https://javascript.info/function-basics#functions-comments)
Functions should be short and do exactly one thing. If that thing is big, maybe itās worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but itās definitely a good thing.
A separate function is not only easier to test and debug ā its very existence is a great comment\!
For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`.
The first variant uses a label:
```
```
The second variant uses an additional function `isPrime(n)` to test for primality:
```
```
The second variant is easier to understand, isnāt it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*.
So, functions can be created even if we donāt intend to reuse them. They structure the code and make it readable.
## [Summary](https://javascript.info/function-basics#summary)
A function declaration looks like this:
```
```
- Values passed to a function as parameters are copied to its local variables.
- A function may access outer variables. But it works only from inside out. The code outside of the function doesnāt see its local variables.
- A function can return a value. If it doesnāt, then its result is `undefined`.
To make the code clean and easy to understand, itās recommended to use mainly local variables and parameters in the function, not outer variables.
It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect.
Function naming:
- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns.
- A function is an action, so function names are usually verbal.
- There exist many well-known function prefixes like `createā¦`, `showā¦`, `getā¦`, `checkā¦` and so on. Use them to hint what a function does.
Functions are the main building blocks of scripts. Now weāve covered the basics, so we actually can start creating and using them. But thatās only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features.
## [Tasks](https://javascript.info/function-basics#tasks)
### [Is "else" required?](https://javascript.info/function-basics#is-else-required)
importance: 4
The following function returns `true` if the parameter `age` is greater than `18`.
Otherwise it asks for a confirmation and returns its result:
```
```
Will the function work differently if `else` is removed?
```
```
Is there any difference in the behavior of these two variants?
solution
No difference\!
In both cases, `return confirm('Did parents allow you?')` executes exactly when the `if` condition is falsy.
### [Rewrite the function using '?' or '\|\|'](https://javascript.info/function-basics#rewrite-the-function-using-or)
importance: 4
The following function returns `true` if the parameter `age` is greater than `18`.
Otherwise it asks for a confirmation and returns its result.
```
```
Rewrite it, to perform the same, but without `if`, in a single line.
Make two variants of `checkAge`:
1. Using a question mark operator `?`
2. Using OR `||`
solution
Using a question mark operator `'?'`:
```
```
Using OR `||` (the shortest variant):
```
```
Note that the parentheses around `age > 18` are not required here. They exist for better readability.
### [Function min(a, b)](https://javascript.info/function-basics#function-min-a-b)
importance: 1
Write a function `min(a,b)` which returns the least of two numbers `a` and `b`.
For instance:
```
```
solution
A solution using `if`:
```
```
A solution with a question mark operator `'?'`:
```
```
P.S. In the case of an equality `a == b` it does not matter what to return.
### [Function pow(x,n)](https://javascript.info/function-basics#function-pow-x-n)
importance: 4
Write a function `pow(x,n)` that returns `x` in power `n`. Or, in other words, multiplies `x` by itself `n` times and returns the result.
```
```
Create a web-page that prompts for `x` and `n`, and then shows the result of `pow(x,n)`.
[Run the demo](https://javascript.info/function-basics)
P.S. In this task the function should support only natural values of `n`: integers up from `1`.
solution
```
```
[Ctrl + āPrevious lesson](https://javascript.info/switch)[Ctrl + āNext lesson](https://javascript.info/function-expressions)
Share
[Tutorial map](https://javascript.info/tutorial/map)
## [Comments](https://javascript.info/function-basics#comments)
read this before commentingā¦
- If you have suggestions what to improve - please [submit a GitHub issue](https://github.com/javascript-tutorial/en.javascript.info/issues/new) or a pull request instead of commenting.
- If you can't understand something in the article ā please elaborate.
- To insert few words of code, use the `<code>` tag, for several lines ā wrap them in `<pre>` tag, for more than 10 lines ā use a sandbox ([plnkr](https://plnkr.co/edit/?p=preview), [jsbin](https://jsbin.com/), [codepen](http://codepen.io/)ā¦)
#### Chapter
- [JavaScript Fundamentals](https://javascript.info/first-steps)
#### Lesson navigation
- [Function Declaration](https://javascript.info/function-basics#function-declaration)
- [Local variables](https://javascript.info/function-basics#local-variables)
- [Outer variables](https://javascript.info/function-basics#outer-variables)
- [Parameters](https://javascript.info/function-basics#parameters)
- [Default values](https://javascript.info/function-basics#default-values)
- [Returning a value](https://javascript.info/function-basics#returning-a-value)
- [Naming a function](https://javascript.info/function-basics#function-naming)
- [Functions == Comments](https://javascript.info/function-basics#functions-comments)
- [Summary](https://javascript.info/function-basics#summary)
- [Tasks (4)](https://javascript.info/function-basics#tasks)
- [Comments](https://javascript.info/function-basics#comments)
Share
[Edit on GitHub](https://github.com/javascript-tutorial/en.javascript.info/blob/master/1-js/02-first-steps/15-function-basics)
- Ā© 2007ā2026 Ilya Kantor
- [about the project](https://javascript.info/about)
- [contact us](https://javascript.info/about#contact-us)
- [terms of usage](https://javascript.info/terms)
- [privacy policy](https://javascript.info/privacy) |
| Readable Markdown | Quite often we need to perform a similar action in many places of the script.
For example, we need to show a nice-looking message when a visitor logs in, logs out and maybe somewhere else.
Functions are the main ābuilding blocksā of the program. They allow the code to be called many times without repetition.
Weāve already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well.
## [Function Declaration](https://javascript.info/function-basics#function-declaration)
To create a function we can use a *function declaration*.
It looks like this:
```
```
The `function` keyword goes first, then goes the *name of the function*, then a list of *parameters* between the parentheses (comma-separated, empty in the example above, weāll see examples later) and finally the code of the function, also named āthe function bodyā, between curly braces.
```
```
Our new function can be called by its name: `showMessage()`.
For instance:
```
```
The call `showMessage()` executes the code of the function. Here we will see the message two times.
This example clearly demonstrates one of the main purposes of functions: to avoid code duplication.
If we ever need to change the message or the way it is shown, itās enough to modify the code in one place: the function which outputs it.
## [Local variables](https://javascript.info/function-basics#local-variables)
A variable declared inside a function is only visible inside that function.
For example:
```
```
## [Outer variables](https://javascript.info/function-basics#outer-variables)
A function can access an outer variable as well, for example:
```
```
The function has full access to the outer variable. It can modify it as well.
For instance:
```
```
The outer variable is only used if thereās no local one.
If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored:
```
```
Global variables
Variables declared outside of any function, such as the outer `userName` in the code above, are called *global*.
Global variables are visible from any function (unless shadowed by locals).
Itās a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data.
## [Parameters](https://javascript.info/function-basics#parameters)
We can pass arbitrary data to functions using parameters.
In the example below, the function has two parameters: `from` and `text`.
```
```
When the function is called in lines `(*)` and `(**)`, the given values are copied to local variables `from` and `text`. Then the function uses them.
Hereās one more example: we have a variable `from` and pass it to the function. Please note: the function changes `from`, but the change is not seen outside, because a function always gets a copy of the value:
```
```
When a value is passed as a function parameter, itās also called an *argument*.
In other words, to put these terms straight:
- A parameter is the variable listed inside the parentheses in the function declaration (itās a declaration time term).
- An argument is the value that is passed to the function when it is called (itās a call time term).
We declare functions listing their parameters, then call them passing arguments.
In the example above, one might say: āthe function `showMessage` is declared with two parameters, then called with two arguments: `from` and `"Hello"`ā.
## [Default values](https://javascript.info/function-basics#default-values)
If a function is called, but an argument is not provided, then the corresponding value becomes `undefined`.
For instance, the aforementioned function `showMessage(from, text)` can be called with a single argument:
```
showMessage("Ann");
```
Thatās not an error. Such a call would output `"*Ann*: undefined"`. As the value for `text` isnāt passed, it becomes `undefined`.
We can specify the so-called ādefaultā (to use if omitted) value for a parameter in the function declaration, using `=`:
```
```
Now if the `text` parameter is not passed, it will get the value `"no text given"`.
The default value also jumps in if the parameter exists, but strictly equals `undefined`, like this:
```
showMessage("Ann", undefined); // Ann: no text given
```
Here `"no text given"` is a string, but it can be a more complex expression, which is only evaluated and assigned if the parameter is missing. So, this is also possible:
```
```
Evaluation of default parameters
In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter.
In the example above, `anotherFunction()` isnāt called at all, if the `text` parameter is provided.
On the other hand, itās independently called every time when `text` is missing.
Default parameters in old JavaScript code
Several years ago, JavaScript didnāt support the syntax for default parameters. So people used other ways to specify them.
Nowadays, we can come across them in old scripts.
For example, an explicit check for `undefined`:
```
```
ā¦Or using the `||` operator:
```
```
### [Alternative default parameters](https://javascript.info/function-basics#alternative-default-parameters)
Sometimes it makes sense to assign default values for parameters at a later stage after the function declaration.
We can check if the parameter is passed during the function execution, by comparing it with `undefined`:
```
```
ā¦Or we could use the `||` operator:
```
```
Modern JavaScript engines support the [nullish coalescing operator](https://javascript.info/nullish-coalescing-operator) `??`, itās better when most falsy values, such as `0`, should be considered ānormalā:
```
```
## [Returning a value](https://javascript.info/function-basics#returning-a-value)
A function can return a value back into the calling code as the result.
The simplest example would be a function that sums two values:
```
```
The directive `return` can be in any place of the function. When the execution reaches it, the function stops, and the value is returned to the calling code (assigned to `result` above).
There may be many occurrences of `return` in a single function. For instance:
```
```
It is possible to use `return` without a value. That causes the function to exit immediately.
For example:
```
```
In the code above, if `checkAge(age)` returns `false`, then `showMovie` wonāt proceed to the `alert`.
A function with an empty `return` or without it returns `undefined`
If a function does not return a value, it is the same as if it returns `undefined`:
```
```
An empty `return` is also the same as `return undefined`:
```
```
Never add a newline between `return` and the value
For a long expression in `return`, it might be tempting to put it on a separate line, like this:
```
```
That doesnāt work, because JavaScript assumes a semicolon after `return`. Thatāll work the same as:
```
```
So, it effectively becomes an empty return.
If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows:
```
```
And it will work just as we expect it to.
## [Naming a function](https://javascript.info/function-basics#function-naming)
Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and describe what the function does, so that someone reading the code gets an indication of what the function does.
It is a widespread practice to start a function with a verbal prefix which vaguely describes the action. There must be an agreement within the team on the meaning of the prefixes.
For instance, functions that start with `"show"` usually show something.
Function starting withā¦
- `"getā¦"` ā return a value,
- `"calcā¦"` ā calculate something,
- `"createā¦"` ā create something,
- `"checkā¦"` ā check something and return a boolean, etc.
Examples of such names:
```
```
With prefixes in place, a glance at a function name gives an understanding what kind of work it does and what kind of value it returns.
One function ā one action
A function should do exactly what is suggested by its name, no more.
Two independent actions usually deserve two functions, even if they are usually called together (in that case we can make a 3rd function that calls those two).
A few examples of breaking this rule:
- `getAge` ā would be bad if it shows an `alert` with the age (should only get).
- `createForm` ā would be bad if it modifies the document, adding a form to it (should only create it and return).
- `checkPermission` ā would be bad if it displays the `access granted/denied` message (should only perform the check and return the result).
These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually theyāre not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.
Ultrashort function names
Functions that are used *very often* sometimes have ultrashort names.
For example, the [jQuery](https://jquery.com/) framework defines a function with `$`. The [Lodash](https://lodash.com/) library has its core function named `_`.
These are exceptions. Generally function names should be concise and descriptive.
## [Functions == Comments](https://javascript.info/function-basics#functions-comments)
Functions should be short and do exactly one thing. If that thing is big, maybe itās worth it to split the function into a few smaller functions. Sometimes following this rule may not be that easy, but itās definitely a good thing.
A separate function is not only easier to test and debug ā its very existence is a great comment\!
For instance, compare the two functions `showPrimes(n)` below. Each one outputs [prime numbers](https://en.wikipedia.org/wiki/Prime_number) up to `n`.
The first variant uses a label:
```
```
The second variant uses an additional function `isPrime(n)` to test for primality:
```
```
The second variant is easier to understand, isnāt it? Instead of the code piece we see a name of the action (`isPrime`). Sometimes people refer to such code as *self-describing*.
So, functions can be created even if we donāt intend to reuse them. They structure the code and make it readable.
## [Summary](https://javascript.info/function-basics#summary)
A function declaration looks like this:
```
```
- Values passed to a function as parameters are copied to its local variables.
- A function may access outer variables. But it works only from inside out. The code outside of the function doesnāt see its local variables.
- A function can return a value. If it doesnāt, then its result is `undefined`.
To make the code clean and easy to understand, itās recommended to use mainly local variables and parameters in the function, not outer variables.
It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect.
Function naming:
- A name should clearly describe what the function does. When we see a function call in the code, a good name instantly gives us an understanding what it does and returns.
- A function is an action, so function names are usually verbal.
- There exist many well-known function prefixes like `createā¦`, `showā¦`, `getā¦`, `checkā¦` and so on. Use them to hint what a function does.
Functions are the main building blocks of scripts. Now weāve covered the basics, so we actually can start creating and using them. But thatās only the beginning of the path. We are going to return to them many times, going more deeply into their advanced features. |
| Shard | 59 (laksa) |
| Root Hash | 11327735004675034659 |
| Unparsed URL | info,javascript!/function-basics s443 |