[JS] In-Depth Guide to JavaScript Functions and Their Uses
Tags: javascript, webdev, beginners
Published: 2022-01-26 11:55:03

> Reference
_Codecademy._ Retrieved from https://www.codecademy.com/

***

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, you must define it somewhere in the scope where you wish to call it.

***

## Function Declaration

Function _declarations_ are used to create named functions. These functions can be called using their declared name. Function declarations are built from:

* The `function` keyword.
* The function name.
* An optional list of parameters separated by commas enclosed by a set of parentheses `()`.
* A function body enclosed in a set of curly braces `{}`.

```javascript
function add(num1, num2) {
  return num1 + num2;
}
```

***

## Calling Functions

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.

```javascript
// Defining the function
function sum(num1, num2) {
  return num1 + num2;
}

// Calling the function
sum(2, 4); // 6
```

***

## Parameters and Arguments

Inputs to functions are known as _parameters_ when a function is declared or defined.  Parameters allow functions to accept input\(s\) and perform a task using the input\(s\). We use parameters as placeholders for information that will be passed to the function when it is called. It is possible to define a function without parameters. 

![](https://images.velog.io/images/joyact/post/862b3d92-b2cd-467b-b9cc-d75693fca98d/1.JPG)

When calling a function that has parameters, we specify the values in the parentheses that follow the function name. The values that are passed to the function when it is called are called _arguments_. Arguments can be passed to the function as values or variables.

![](https://images.velog.io/images/joyact/post/43371dff-a32c-4b2d-8c96-b893b7981d21/2.JPG)

***

##  `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.

```javascript
// 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;
}
```

***

## Function Expressions

Function _expressions_ create functions inside an expression instead of as a function declaration. They can be anonymous and/or assigned to a variable. Unlike function declarations, function expressions are not hoisted so they cannot be called before they are defined.

![](https://images.velog.io/images/joyact/post/36a50afd-5c84-4f90-a040-94d39a293740/3.JPG)

***

## 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.

```javascript
// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function() {
  return 'BOOM!';
}
```

***

## Arrow Functions \(ES6\)

Arrow function expressions were introduced in ES6. These expressions are clean and concise. 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 `return` keyword.

```javascript
// Arrow function with two arguments 
const sum = (firstParam, secondParam) => { 
  return firstParam + secondParam; 
}; 
console.log(sum(2,5)); // Prints: 7 

// Arrow function with no arguments 
const printHello = () => { 
  console.log('hello'); 
}; 
printHello(); // Prints: hello

// Arrow functions with a single argument 
const checkWeight = weight => { 
  console.log(`Baggage weight : ${weight} kilograms.`); 
}; 
checkWeight(25); // Prints: Baggage weight : 25 kilograms.


// Concise arrow functions
const multiply = (a, b) => a * b; 
console.log(multiply(2, 30)); // Prints: 60 
```

***

## Default Parameters

One of the features added in ES6 is the ability to use _default parameters_. Default parameters allow parameters to have a predetermined value in case there is no argument passed into the function or if the argument is `undefined` when called.

```javascript
function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!
```