Functions In JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-03-22 16:56:16

## Functions

Functions are important, vastly used, reusable code blocks, or just a piece of code that you can use again and again.

Functions accept parameters as variables, which makes them even more useful based on the Value Accepted by it as a parameter.

Parameters in functions can be of any data type, ranging from a simple integer, an array, or even an Array full of Arrays!

### Ways to declare a function

There are several ways to declare a function. Something they all have in common is Parentheses `()` and Curly Braces `{}`

You can accept a parameter in a function just by writing it inside the Parentheses.

All the code executed by the function is contained within the curly braces.

1) The Classic Way

```javascript
function sayHello () {
    console.log("Hello Dev!")
}
```
2) Function contained in a variable

```javascript
const sayHello = function () {
    console.log("Hello Dev!")
}
```
3) The ES6 way; Arrow Functions

```javascript
const sayHello = () => {
    console.log("Hello Dev!")
}
```

The javascript ES6 version introduced many amazing features to the language but one of the most useful was Arrow Functions. 

They have a few differences from Normal Function, which we'll talk about in an upcoming post.

They're just functions stored in a variable but do not use the "function" keyword. Assign a pair of Parentheses to a variable and make an arrow `=>` to determine that it's an arrow function and continue with curly braces as normal.

_Note: Arrow Functions can't be used in any version before ES6_ 

### Calling (Running) a function

To call a function, first declare it in your code.

(Here, we'll use the arrow function we declared a while ago.)

```javascript
const sayHello = () => {
    console.log("Hello Dev!")
}
```

We have our function declared!
Now, to call it anywhere within our file, we just need to mention the function name with parentheses.

```javascript
sayHello()

// This prints out "Hello Dev!"
```

### Accepting Parameters

To make our function use parameters provided by the user, we just need to name them within the Parentheses.

Let's make a simple arrow function that squares a number provided as a parameter and prints it to the console.

```javascript
const square = (num) => {
    console.log (num * num)
}

// We mentioned "num" within the Parentheses of our function to denote that we need a parameter for "num".

// Notice how we don't use any quotation marks though we've never declared "num"

// To call this function, we'll simply name it with parentheses, but within the Parentheses, we can provide a value that will be given to "num"

square(5) // returns 25.

// We can have multiple parameters like this:

const person = (name, age, city) => {
    console.log(`
        Name: ${name}
        Age: ${age}
        City: ${city}
    `)
}

// We can provide values to multiple parameters like this:

person("Josh", 21, "London")
```

The above example returns:

```
Name: Josh
Age: 21
City: London
```
_Note: While printing the name, age, and City provided by the user, we used something known as Template Literals, more posts on that topic soon!_

We need to provide all possible parameters, We could just possibly add 2 parameters and it'll be considered as the first 2 parameters declared in the function body.

If we only want to provide the 1st and 3rd parameters, we can skip the 2nd parameter like this:

```javascript
person("Mike", ,"Paris")
```

This will return:

```
Name: Mike
Age: Undefined
City: Paris
```

### Nested Functions

We can create new functions inside of other functions but functions are block-scoped, i.e. You can only refer to the function within the function you declared it and not anywhere else in your code.

> Hope you learned something useful today! Peace Out ✌️