JavaScript Functions
Learn how to create reusable blocks of code using functions, parameters, return values, function expressions, arrow functions, and best practices.
Reading Time
24 min
Lesson
Lesson 10 of 48
What are Functions?
A function is a reusable block of code that performs a specific task. Instead of writing the same code multiple times, you can define it once and call it whenever needed.
Why Use Functions?
- Avoid duplicate code
- Improve code readability
- Make code reusable
- Simplify debugging
- Organize large applications
Function Declaration
A function declaration defines a named function using the function keyword.
Function Declaration Example
Console Output
Click “Run” to see the console output here.
Function Parameters
Parameters are variables listed in the function definition. They receive values when the function is called.
Parameters Example
Console Output
Click “Run” to see the console output here.
Return Statement
The return statement sends a value back to the caller and immediately exits the function.
Return Example
Console Output
Click “Run” to see the console output here.
Default Parameters
Default parameters allow you to provide fallback values when no argument is passed.
Default Parameter Example
Console Output
Click “Run” to see the console output here.
Function Expressions
A function can also be assigned to a variable. This is called a function expression.
Function Expression Example
Console Output
Click “Run” to see the console output here.
Arrow Functions
Arrow functions provide a shorter syntax for writing functions and are commonly used in modern JavaScript.
Arrow Function Example
Console Output
Click “Run” to see the console output here.
Implicit Return
When an arrow function contains only one expression, the return keyword can be omitted.
Implicit Return Example
Console Output
Click “Run” to see the console output here.
Function Scope
Variables declared inside a function are accessible only within that function.
Scope Example
Console Output
Click “Run” to see the console output here.
Callback Functions
A callback is a function passed as an argument to another function. It executes after a specific task is completed.
Callback Example
Console Output
Click “Run” to see the console output here.
Function Types
| Type | Description |
|---|---|
| Function Declaration | Named function using function keyword |
| Function Expression | Function stored in a variable |
| Arrow Function | Short syntax introduced in ES6 |
| Callback Function | Function passed to another function |
Common Mistake
Calling a function before it is defined works only for function declarations. Function expressions and arrow functions are not hoisted in the same way.
Hoisting Example
Console Output
Click “Run” to see the console output here.
Best Practices
Keep functions small, give meaningful names, avoid duplicate logic, use parameters instead of global variables, and return values instead of printing whenever possible.
Summary
Functions are one of the core building blocks of JavaScript. They make code reusable, modular, and easier to maintain.