Functions are one of the fundamental building blocks in JavaScript. A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution. In order to use a function, it must be defined somewhere in the scope in which it will be utilized.
Function Declaration
A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:
- The name of the function.
- A list of parameters to the function, enclosed in parentheses and separated by commas.
- The JavaScript statements that define the function, enclosed in curly braces,
{ /* … */ }.
Ex:
1 2 3 | function sum(number1, number2) { console.log(number1 + number2); } |
Calling Functions
Defining a function does not execute it. Defining it names the function and specifies what to do when the function is called.
Functions can be called, or executed, elsewhere in code using parentheses following the function name. When a function is called, the code inside its function body runs. Arguments are values passed into a function when it is called.
Ex:
1 2 3 4 5 6 7 8 | // Defining the function function sum(num1, num2) { return num1 + num2; } // Calling the function console.log(sum(2, 4)); // Output 6 |
Note:
If multiple arguments, or a variable number of arguments, are required a function can use a rest parameter to pass an array of values.
Function expressions
While the function declaration above is syntactically a statement, functions can also be created by a function expression.
Ex:
1 2 3 4 5 | const square = function (number) { return number * number; }; console.log(square(4)); // 16 |
Function Hoisting
Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope. Hoisting applies to variable declarations and to function declarations. Because of this, JavaScript functions can be called before they are declared:
1 2 3 4 5 | myFunction(5); function myFunction(y) { return y * y; } |
Note:
Functions defined using an expression are not hoisted.
Optional Arguments
In JavaScript functions will run whether or not they have the intended number of arguments. If more than the number required are submitted, the function will use the required number and ignore the rest. If fewer arguments are provided than required, the other values will be set to undefined.
1 2 3 4 5 | console.log(sum(2, 4, 8)); // Output 6 console.log(sum(2)); // Output NaN |
Default Values
Functions can also be defined with default values for one, or all of the parameters. If no arguments are passed the default values are used, if arguments are included they will override the default values.
1 2 3 4 5 6 7 8 | // Defining the function with default values function sum(num1 = 6, num2 = 1) { return num1 + num2; } // Calling the function console.log(sum(8)); // Output 9 |
Return Keyword
Functions return (pass back) values using the return keyword. return ends function execution and returns the specified value to the location where it was called.
A common mistake is to forget the return keyword, in which case the function will return undefined by default.
1 2 3 4 5 6 7 8 9 | // With return function sum(num1, num2) { return num1 + num2; } // Without return, so the function doesn't output the sum function sum(num1, num2) { num1 + num2; } |
Arrow Functions
The syntax for an arrow function expression does not require the function keyword and uses a fat arrow => to separate the parameter(s) from the body.
There are several variations of arrow functions:
- Arrow functions with a single parameter do not require
()around the parameter list. - Arrow functions with a single expression can use the concise function body which returns the result of the expression without the
returnkeyword.
Arrow function with no arguments:
1 2 3 4 5 6 | const printHello = () => { console.log('hello'); }; printHello(); // Output: hello |
Arrow function with a single argument:
1 2 3 4 5 6 | const checkWeight = (weight) => { console.log(`Baggage weight : ${weight} kilograms.`); }; checkWeight(25); // Output: Baggage weight : 25 kilograms. |
Arrow function with two arguments:
1 2 3 4 5 6 | const sum = (firstParam, secondParam) => { return firstParam + secondParam; }; console.log(sum(2, 5)); // Output: 7 |
Concise arrow function:
1 2 3 4 | const multiply = (a, b) => a * b; console.log(multiply(2, 30)); // Output: 60 |
Anonymous Functions
Anonymous functions in JavaScript do not have a name property. They can be defined using the function keyword, or as an arrow function. See the code example for the difference between a named function and an anonymous function.
1 2 3 4 5 6 7 8 9 | // Named function function rocketToMars() { return 'BOOM!'; } // Anonymous function const rocketToMars = function () { return 'BOOM!'; }; |
