🕷️ Crawler Inspector

EN - [ARعربي](https://ar.javascript.info/function-expressions) - [ENEnglish](https://javascript.info/function-expressions) - [ESEspañol](https://es.javascript.info/function-expressions) - [FAفارسی](https://fa.javascript.info/function-expressions) - [FRFrançais](https://fr.javascript.info/function-expressions) - [IDIndonesia](https://id.javascript.info/function-expressions) - [ITItaliano](https://it.javascript.info/function-expressions) - [JA日本語](https://ja.javascript.info/function-expressions) - [KO한국어](https://ko.javascript.info/function-expressions) - [RUРусский](https://learn.javascript.ru/function-expressions) - [TRTürkçe](https://tr.javascript.info/function-expressions) - [UKУкраїнська](https://uk.javascript.info/function-expressions) - [UZOʻzbek](https://uz.javascript.info/function-expressions) - [ZH简体中文](https://zh.javascript.info/function-expressions) 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) January 22, 2025 # Function expressions In JavaScript, a function is not a “magical language structure”, but a special kind of value. The syntax that we used before is called a *Function Declaration*: ``` ``` There is another syntax for creating a function that is called a *Function Expression*. It allows us to create a new function in the middle of any expression. For example: ``` ``` Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`. As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*. Please note, there’s no name after the `function` keyword. Omitting a name is allowed for Function Expressions. Here we immediately assign it to the variable, so the meaning of these code samples is the same: “create a function and put it into the variable `sayHi`”. In more advanced situations, that we’ll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous. ## [Function is a value](https://javascript.info/function-expressions#function-is-a-value) Let’s reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable. We can even print out that value using `alert`: ``` ``` Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes its execution, but JavaScript is not like that. In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string representation, which is the source code. Surely, a function is a special value, in the sense that we can call it like `sayHi()`. But it’s still a value. So we can work with it like with other kinds of values. We can copy a function to another variable: ``` ``` Here’s what happens above in detail: 1. The Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`. 2. Line `(2)` copies it into the variable `func`. Please note again: there are no parentheses after `sayHi`. If there were, then `func = sayHi()` would write *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself. 3. Now the function can be called as both `sayHi()` and `func()`. We could also have used a Function Expression to declare `sayHi`, in the first line: ``` ``` Everything would work the same. Why is there a semicolon at the end? You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not: ``` ``` The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it’s not a part of the function syntax. The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it’s also there for a function assignment. ## [Callback functions](https://javascript.info/function-expressions#callback-functions) Let’s look at more examples of passing functions as values and using function expressions. We’ll write a function `ask(question, yes, no)` with three parameters: `question` Text of the question `yes` Function to run if the answer is “Yes” `no` Function to run if the answer is “No” The function should ask the `question` and, depending on the user’s answer, call `yes()` or `no()`: ``` ``` In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that’s another story. **The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** The idea is that we pass a function and expect it to be “called back” later if necessary. In our case, `showOk` becomes the callback for “yes” answer, and `showCancel` for “no” answer. We can use Function Expressions to write an equivalent, shorter function: ``` ``` Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that’s just what we want here. Such code appears in our scripts very naturally, it’s in the spirit of JavaScript. A function is a value representing an “action” Regular values like strings or numbers represent the *data*. A function can be perceived as an *action*. We can pass it between variables and run when we want. ## [Function Expression vs Function Declaration](https://javascript.info/function-expressions#function-expression-vs-function-declaration) Let’s formulate the key differences between Function Declarations and Expressions. First, the syntax: how to differentiate between them in the code. - *Function Declaration:* a function, declared as a separate statement, in the main code flow: ``` ``` - *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the “assignment expression” `=`: ``` ``` The more subtle difference is *when* a function is created by the JavaScript engine. **A Function Expression is created when the execution reaches it and is usable only from that moment.** Once the execution flow passes to the right side of the assignment `let sum = function…` – here we go, the function is created and can be used (assigned, called, etc. ) from now on. Function Declarations are different. **A Function Declaration can be called earlier than it is defined.** For example, a global Function Declaration is visible in the whole script, no matter where it is. That’s due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an “initialization stage”. And after all Function Declarations are processed, the code is executed. So it has access to these functions. For example, this works: ``` ``` The Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it. …If it were a Function Expression, then it wouldn’t work: ``` ``` Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late. Another special feature of Function Declarations is their block scope. **In strict mode, when a Function Declaration is within a code block, it’s visible everywhere inside that block. But not outside of it.** For instance, let’s imagine that we need to declare a function `welcome()` depending on the `age` variable that we get during runtime. And then we plan to use it some time later. If we use Function Declaration, it won’t work as intended: ``` ``` That’s because a Function Declaration is only visible inside the code block in which it resides. Here’s another example: ``` ``` What can we do to make `welcome` visible outside of `if`? The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility. This code works as intended: ``` ``` Or we could simplify it even further using a question mark operator `?`: ``` ``` When to choose Function Declaration versus Function Expression? As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared. That’s also better for readability, as it’s easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more “eye-catching”. …But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we’ve just seen an example), then Function Expression should be used. ## [Summary](https://javascript.info/function-expressions#summary) - Functions are values. They can be assigned, copied or declared in any place of the code. - If the function is declared as a separate statement in the main code flow, that’s called a “Function Declaration”. - If the function is created as a part of an expression, it’s called a “Function Expression”. - Function Declarations are processed before the code block is executed. They are visible everywhere in the block. - Function Expressions are created when the execution flow reaches them. In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. So we should use a Function Expression only when a Function Declaration is not fit for the task. We’ve seen a couple of examples of that in this chapter, and will see more in the future. [Ctrl + ←Previous lesson](https://javascript.info/function-basics)[Ctrl + →Next lesson](https://javascript.info/arrow-functions-basics) Share [Tutorial map](https://javascript.info/tutorial/map) ## [Comments](https://javascript.info/function-expressions#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 is a value](https://javascript.info/function-expressions#function-is-a-value) - [Callback functions](https://javascript.info/function-expressions#callback-functions) - [Function Expression vs Function Declaration](https://javascript.info/function-expressions#function-expression-vs-function-declaration) - [Summary](https://javascript.info/function-expressions#summary) - [Comments](https://javascript.info/function-expressions#comments) Share [Edit on GitHub](https://github.com/javascript-tutorial/en.javascript.info/blob/master/1-js/02-first-steps/16-function-expressions) - © 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)

In JavaScript, a function is not a “magical language structure”, but a special kind of value. The syntax that we used before is called a *Function Declaration*: ``` ``` There is another syntax for creating a function that is called a *Function Expression*. It allows us to create a new function in the middle of any expression. For example: ``` ``` Here we can see a variable `sayHi` getting a value, the new function, created as `function() { alert("Hello"); }`. As the function creation happens in the context of the assignment expression (to the right side of `=`), this is a *Function Expression*. Please note, there’s no name after the `function` keyword. Omitting a name is allowed for Function Expressions. Here we immediately assign it to the variable, so the meaning of these code samples is the same: “create a function and put it into the variable `sayHi`”. In more advanced situations, that we’ll come across later, a function may be created and immediately called or scheduled for a later execution, not stored anywhere, thus remaining anonymous. ## [Function is a value](https://javascript.info/function-expressions#function-is-a-value) Let’s reiterate: no matter how the function is created, a function is a value. Both examples above store a function in the `sayHi` variable. We can even print out that value using `alert`: ``` ``` Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes its execution, but JavaScript is not like that. In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string representation, which is the source code. Surely, a function is a special value, in the sense that we can call it like `sayHi()`. But it’s still a value. So we can work with it like with other kinds of values. We can copy a function to another variable: ``` ``` Here’s what happens above in detail: 1. The Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`. 2. Line `(2)` copies it into the variable `func`. Please note again: there are no parentheses after `sayHi`. If there were, then `func = sayHi()` would write *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself. 3. Now the function can be called as both `sayHi()` and `func()`. We could also have used a Function Expression to declare `sayHi`, in the first line: ``` ``` Everything would work the same. Why is there a semicolon at the end? You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not: ``` ``` The answer is simple: a Function Expression is created here as `function(…) {…}` inside the assignment statement: `let sayHi = …;`. The semicolon `;` is recommended at the end of the statement, it’s not a part of the function syntax. The semicolon would be there for a simpler assignment, such as `let sayHi = 5;`, and it’s also there for a function assignment. ## [Callback functions](https://javascript.info/function-expressions#callback-functions) Let’s look at more examples of passing functions as values and using function expressions. We’ll write a function `ask(question, yes, no)` with three parameters: `question` Text of the question `yes` Function to run if the answer is “Yes” `no` Function to run if the answer is “No” The function should ask the `question` and, depending on the user’s answer, call `yes()` or `no()`: ``` ``` In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that’s another story. **The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** The idea is that we pass a function and expect it to be “called back” later if necessary. In our case, `showOk` becomes the callback for “yes” answer, and `showCancel` for “no” answer. We can use Function Expressions to write an equivalent, shorter function: ``` ``` Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that’s just what we want here. Such code appears in our scripts very naturally, it’s in the spirit of JavaScript. A function is a value representing an “action” Regular values like strings or numbers represent the *data*. A function can be perceived as an *action*. We can pass it between variables and run when we want. ## [Function Expression vs Function Declaration](https://javascript.info/function-expressions#function-expression-vs-function-declaration) Let’s formulate the key differences between Function Declarations and Expressions. First, the syntax: how to differentiate between them in the code. - *Function Declaration:* a function, declared as a separate statement, in the main code flow: ``` ``` - *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created on the right side of the “assignment expression” `=`: ``` ``` The more subtle difference is *when* a function is created by the JavaScript engine. **A Function Expression is created when the execution reaches it and is usable only from that moment.** Once the execution flow passes to the right side of the assignment `let sum = function…` – here we go, the function is created and can be used (assigned, called, etc. ) from now on. Function Declarations are different. **A Function Declaration can be called earlier than it is defined.** For example, a global Function Declaration is visible in the whole script, no matter where it is. That’s due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an “initialization stage”. And after all Function Declarations are processed, the code is executed. So it has access to these functions. For example, this works: ``` ``` The Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it. …If it were a Function Expression, then it wouldn’t work: ``` ``` Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late. Another special feature of Function Declarations is their block scope. **In strict mode, when a Function Declaration is within a code block, it’s visible everywhere inside that block. But not outside of it.** For instance, let’s imagine that we need to declare a function `welcome()` depending on the `age` variable that we get during runtime. And then we plan to use it some time later. If we use Function Declaration, it won’t work as intended: ``` ``` That’s because a Function Declaration is only visible inside the code block in which it resides. Here’s another example: ``` ``` What can we do to make `welcome` visible outside of `if`? The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility. This code works as intended: ``` ``` Or we could simplify it even further using a question mark operator `?`: ``` ``` When to choose Function Declaration versus Function Expression? As a rule of thumb, when we need to declare a function, the first thing to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared. That’s also better for readability, as it’s easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more “eye-catching”. …But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we’ve just seen an example), then Function Expression should be used. ## [Summary](https://javascript.info/function-expressions#summary) - Functions are values. They can be assigned, copied or declared in any place of the code. - If the function is declared as a separate statement in the main code flow, that’s called a “Function Declaration”. - If the function is created as a part of an expression, it’s called a “Function Expression”. - Function Declarations are processed before the code block is executed. They are visible everywhere in the block. - Function Expressions are created when the execution flow reaches them. In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. So we should use a Function Expression only when a Function Declaration is not fit for the task. We’ve seen a couple of examples of that in this chapter, and will see more in the future.