The “FIRST-CLASS” citizens of JavaScript: FUNCTIONS Part 2
Tags: functions, functiondeclaration, coding, javascript
Published: 2023-04-30 03:37:38

**Handy Articles for Beginners: Functions Part-2**

Welcome to the Part-2 of my Functions Series. In this post, I will explain 3 common ways of writing functions. 
[click here for Part-1](https://dev.to/bouquet/everything-about-the-first-class-citizens-of-javascript-functions-2d38).

**1. Function Declaration**
This is the most common way to write functions. We use the keyword “function” that is followed by the name of the function, pair of parentheses that accommodate parameters, and the curly braces holds the function body.



```javascript
function divide(number1, number2) { 
   return number1 / number2;
}
divide(90, 15);
// 6
```


```javascript
function sayHello() {
  console.log("Hello!");
}
```

```javascript
function addNumbers(x, y) {
  let result = x + y;
  return result;
}
```

HOISTING
When we write our function with the function declaration, we can invoke our function before or after our function. This is called HOISTING and it is a privilege comes from using the 'function' keyword when creating a function.


```javascript
greet("Anna");

function greet(name) {
    console.log('Hello, ' + name)
}
// Hello, Anna
```


![Hoisting example console screenshot.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmn6dlbmhvkwrqc7utvo.png)


**2. Function Expression**
Function expression involves defining a variable and assigning a function to that variable. This way of writing function is very useful to pass a function as an argument to another function.

```javascript
const sayHello = function() {
  console.log("Hello!");
};
sayHello()
//Hello!
```

```javascript
const divideNumbers = function (number1, number2) { 
   return number1 / number2;
}
divideNumbers(8, 2)
//4
```

**-Xtra info-** My variable divideNumbers has a value of an anonymous function. An anonymous function is a function without a name. It's a handy tool that programmers use to make their code more flexible and reusable (we create anonymous function on the fly, all the time). The syntax of an anonymous function is:

```javascript
function (){ 
   function body
}
```


The function that is assigned to a variable also known as a function definition. I want to add an important note here. As you see, the function definition of my variable divideNumbers has the 'function' keyword. So, do you think if I try to invoke divideNumbers before function expression, will it work? 

![Screenshot of trying to invoke divideNumbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uou6tg65pepf67kezmid.png)

No, it will not work! 
Why? The function here is a function definition that is assigned to a variable. I didn't invoke my function. I invoked my variable, to make my function definition to do the work, in this case dividing two numbers. 

Remember;
HOISTING is a privilege comes from using the 'function' keyword ***when creating a function***. We didn't create an independent function, we created a variable and assigned a function to that variable. This is the main difference between function declaration and function expression. 


**3. Arrow Function Expression**
This function writing is a shorthand way to define a function using the => arrow notation. Arrow function expression is especially useful when you want to create an anonymous function or when you need to use a concise syntax. 

Syntax of arrow function expression:

```javascript
const divideNumbers = (number1, number2) => { 
   let result = number1 / number2;
   return results;
}
divideNumbers(8, 2)
//4
```

If your arrow function has only one line, you can remove the curly braces {}. You can also remove the word 'return' because arrow function will return the value automatically if the function is one line.

```javascript
const functionName = (parameter1, parameter2) => parameter1 + parameter2;

const divideNumbers = (number1, number2) => number1 / number2;
```

If your arrow function has only one parameter, you can remove the parentheses ().

```javascript
const greet = name => console.log("Hello, " + name);


const addTwo = number => number + 2;
```