INTRO INTO FUNCTIONS IN JAVASCRIPT
Tags: javascript, beginners, codenewbie
Published: 2020-08-22 00:46:01

# WHAT IS A FUNCTION

**Function** is an important concept in javascript as it forms a fundamental foundation on which you  program your code to run. A **function** comprises of statements enclosed in block of codes that runs by performing a specific tasks that you've programmed into it. 

Functions enables you to use code repeatedly without having to type the code individually anytime you want to use it.

### A FUNCTION SYNTAX:

-Firstly, you start with writing in the keyword of 'function' e.g  `function`

-Then you follow with the name of the function adding parantheses at the end of the name e.g `myFunction();`

-Parameters can be added into the parantheses, it is optional. 

-lastly, you add curly braces to the syntax. e.g `function myFunction(){}`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ydb9pxk8joou006d6x7w.png)
### NOTE: 

>The function name is allowed to contain digits, underscores, and dollar signs also.

The most used syntax of naming a function is joining one lowercase name to another name but  this with a capitalized first letter in it,this method of writing is called the **camel case** method. 
Example. 
`function alertUser(){}`.

>This is a widely used convention that makes the name of your functions or variables more readable and neat when you're going through your code

>In a case where there are more than one parameters in the brackets, it is seperated using a comma.

>The name of the function is case-sensitive 

>The curly brackets is used to contain the block of codes that is to be run by the function 


### LETS WRITE SOME CODES...

As we noted earlier, the codes that you intend to execute should be put into the curly braces.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zsrkzgq0nvtpmhj3yv85.png)
Now the code`console.log()` has been used to output a value on your browser console, but for this to work, the **function** needs to be *called upon* or **invoked**. 

This activates the code in the **function**. A **function** by default is initially stored in memory by javascript, but needs to be **invoked**(called) in order to retrieve the saved data of the function from the memory, and activate the set of codes that are in it to be used.

You do this by writing the name of the code outside the function, that is outside the curly braces of the function including its brackets in the name, and then ending it with a semi-colon.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/23hlq2qnc3qpbdaiilck.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3x9xvmfae09r82a67p7e.png)

### NOTE:


>The brackets has to be added to the name of the function in order to invoke it.

>A function can also be invoked when an 'event' occurs e.g when you click a button on a page. 

**An Example Of A Click Event**:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0buu17ue5rcbv58b1swn.png)

#### RESULTS(before click)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qyksx48l8o8253dokttz.png)

#### RESULTS (after click)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/21l85e0jm743y2roau2n.png)



## PARAMETERS AND ARGUMENTS

**Parameters** and **arguments** are like a *name to value pair* respectively but this way is different from the ones you might have used in other areas of code.

**Parameters** are like input variables(reservoirs or containers) that recieve values from arguments, and are constant initially until arguments(values) are passed into them. 

**Arguments** are the values that are given to the parameter variable to be used in the program.

### NOTE:

 Parameters accept any name format that is given to it, that is you can name it whatever and however you want.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qv9og1v4nzuymun4wt4.png)
Here it can be seen that the parameter has been put into the brackets(`stack`) and the block of code is me using a `console.log` to output a string value and then concatenating(using the + operator to join two values together) it with the parameter '`stack`'. 

Then the function has been called outside of it using its name, inside the brackets of the function name, the argument which now holds the string value of '`front-end developer`'.

 When this function is **invoked** and it gets executed, the value of the argument is passed into the parameter variable which is  then used when it is concatenated with the string value in the `console.log` output.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/es6wdstd695bjjfg568c.png)

### USING MORE THAN ONE PARAMETERS AND ARGUMENTS

Now, in a case where you intend to use more than one parameters in your function code, these are the steps to follow

-You simply put in the parameter in the function name brackets separating it from the other with a comma and so on.

-The arguments should also be separated with a comma and should be placed in the order of the parameters that they are being passed into
#### THE CODE:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/syh71wofqi332cwab60d.png)

#### THE RESULTS:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yg6hkjdea7qje83olnjt.png)


### SOME DEFAULT ACTIONS:

In a case, where a function is invoked with more parameters than arguments in a code, then after executing the code and setting the arguments(value) to the parameters, pair by pair, then the remaining argument(s) without a parameter to be passed into will be set to '**undefined**'.

**EXAMPLE**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e0i6648n7e7vy1p0vkbv.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qpi7cgai9ztz45hprrm.png)

From the code and result shown, you'll notice that i used an ES6 syntax to write in the values of the strings and the variables(parameters).

 If you are not yet familiar with ES6, i'll recommend checking out this [Dev Ed]( 
   https://m.youtube.com/watch?v=WZQc7RUAg18 ) youtube tutorial.

 Back to the topic, from the code above, three parameters(name, age, hobby) have all been defined in the function, but there are only two corresponing arguments ('Hakeem', 19)available to be passed into them. 

Therefore, when the values of the arguments have been passed into the recieving parameters(name, age), the remaining parameter(hobby), gets set to the default data of 'undefined', and gets outputed as so, because there isnt any available value to be passed into it.

## Conclusion

This is just a brief and basic introduction into the concept of a  function in javascript. There is more to it than this so if you intend to go in deeper and understand the whole concept, i would recommend you checking out the [w3schools](https://www.w3schools.com/js/js_function_definition.asp) function lessons on their website or [freecode] ( https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions) curriculum on javascript.Thank you for reading and goodluck on your coding journey!!