Day 7 of 30 of JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2024-05-03 12:35:28

Hey reader:).Hope you are doing well. In the last post we have seen that how loops are used in JavaScript ,in this post we are going to see how functions are defined in JavaScript. So let's get started.

## What are Functions?
A function in programming is like a set of instructions that you can use over and over again to perform a specific task.
For example , suppose we need to add given set of numbers so we can define a function for this purpose and use it whenever we need it.

Syntax for JavaScript Functions ->
`function my_fun(parameter 1,parameter 2){
     //code
}`
This is general syntax of JavaScript function and this function will be executed whenever it is called.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voq3ghsgelbobq6y4qc5.png)
So we can see that we have defined a function for adding list of numbers and given list of numbers as argument here ,this `add` function is intended to return sum of numbers which we are recieving in `sum1 and sum2` variables.
So here we can clearly see that functions enables code reusability and making code concise and easy to understand.

But wait this is not single way to define functions in JavaScript. We have different ways to define a function -:

`const my_fun=function(parameter){
    //code
}`
This is generally a **function expression**.
Function expressions in JavaScript are a way to define functions as values and assign them to variables. 

Functions defined in this way are said to be anonymous because here function itself doesn't have a name.We have stored this function in the my_fun variable so that we can use this variable to call this function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chbdde49cb2lc3okzudf.png)

## Function Hoisting

Hoisting is a term in JavaScript that describes how the language moves variable and function declarations to the top of their containing scope during the compilation phase, before the code is actually executed.

In simpler terms, imagine you're making a to-do list. Before you start writing down tasks, you might decide to list out all the categories like "work," "home," and "personal." That's kind of what hoisting does with your code – it lists out all the variables and functions at the beginning, even if you've written them later in your code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwxw0dor7unepg83dhau.png)
This code runs without any error, despite the square() function being called before it's declared. This is because the JavaScript interpreter hoists the entire function declaration to the top of the current scope.
**But this doesn't work with function expressions.**

## Function Scope
**Function scope** refers to the visibility and accessibility of variables and functions within a specific function.

1.Local Scope: Variables and functions declared within a function are considered to have local scope. This means they can only be accessed from within that function. They are not visible to code outside of the function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyhnsigr0kfiqvxq9z91.png)

2.Nested Scope: Functions can be nested within other functions, creating nested scopes. Inner functions have access to variables declared in outer functions, but the reverse is not true.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7wabl6k0ye7vp2944l9.png)

3.Lexical Scope: JavaScript uses lexical scoping, which means that the visibility of variables and functions is determined by their location within the code. This is also known as "static scope" because it's based on the structure of the code at the time of writing, not at runtime.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rskjtuwy338o71t45975.png)
So here you can see that `globalVar` is available throughout the program because it is globally declared.

## Function Parameters
Parameters are the arguments we give to a function to perform some task. We can also pass another function as argument here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ee6tptg918xj0zbmfx4.png)
So here we can see that we have passed `greetingFunction()` as argument to `greet()` function and because of this `greet` function here becomes **Higher Order Function**.

> Higher-order functions are functions that can take other functions as arguments and/or return functions as their result. 

Now there are two special kinds of parameter syntax: default parameters and rest parameters.

1. Default Parameters ->If no values are assigned to arguments then they take `undefined` as their default values.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4hfvulqxatyq5g3mraz.png)
It is better to assign value to parameters outside or within function.

2. Rest Parameters ->You can pass infinite number of arguments to functions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5vwvzknnsjcrxvdq2v0.png)
So here we are using spread operator (...) to pass number of arguments to function. **We will study about Spread Operator in upcoming posts.**

The arguments of a function are maintained in an **array-like** object.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe271fg3jthx9k4s5v48.png)

So this is it for this post in the next post we will discuss about Arrow functions and function invocation. Till then stay tuned and don't forget to like my post and follow me:)