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(){}

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.

Now the codeconsole.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.

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:

RESULTS(before click)

RESULTS (after click)

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.

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.

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:

THE RESULTS:

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

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 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 function lessons on their website or freecode curriculum on javascript.Thank you for reading and goodluck on your coding journey!!