Hi, I am Sugandha Joshi, pursuing Web Premium Course. So far, I have learned Photoshop, HTML & CSS, Bootstrap, JavaScript, jQuery. This institute is considered as the best JavaScript training institute in Delhi I am writing this blog on what are JavaScript functions and how functions work.
What is JavaScript?
JavaScript is a dynamic programming language, which follows the camel case setup and is case sensitive. It is very lightweight and commonly used in web pages although it is being used in Node.js which is a run time environment and server-side language.
JavaScript is used to define functionality and declare events across the web pages. This, in turn, responds according to the user’s action at/in a particular runtime.
It does not need any particular sets of compiler or library or anything, all browsers support it and act as it’s a compiler. Sometimes people mix Java and JavaScript. But both are different languages. Java is a server-side language, whereas JavaScript is both servers- side and client- side language.
What are the Functions in JavaScript?
A function in JavaScript is a certain kind of procedure or we can say a block of code that performs a certain task when invoked.
Function declaration here always starts with function keyword in it.
In JavaScript, functions are a first-class object that means functions are quite powerful comparatively other languages where they are not.
In JavaScript function acts as an object which means it has both methods and properties. There are various ways in which we declare a function.
Note:
The function always has parenthesis at the end of its name. This is what makes a function: A Function(). In JavaScript, Function always returns a value if values are passed then probably the result and if not then Undefined. After parenthesis, we start with curly brackets, within which the body of the function is declared.
Example:
function myFunction()
{
//Block of code or body
}
For using Function() one has to be familiar with parameters and Arguments too. From here the confusing part starts. Attention Here!!
The variable which we pass during a function called parameter and the variable we pass during declaration is called argument.
* the variable name is not fixed and is completely dependent on the user’s choice or mood. Yet there are predefined keywords which we can use during the function call passing is this and event.
* ‘this’ and ‘event’ have specific meaning here, it means no other keyword can get the info these keywords would gather.
this:
when we pass this keyword while calling them it will pass the particular info on which function is stated.
For Example:
<img src="img/pic1" onclick="apple(this.src)">
In the above function ‘this.src’ will pass the value of ‘src’ attribute to the apple function.
Example:
function apple(my src)
{
alert(this);
}
This will alert the ‘src’ of that image element when the user will click.
event:
event keyword is used to pass the event. Like “onclick” is an event in JavaScript.
Regular ways to define function
Now there are two ways in which you can create a function or declare a function.
Example:
function abc()
{
//block of code or body
}
This is the most normal and easiest way to define a function.
Example:
var abc = function()
{
//block of code or body
}
Here we are storing a function in a variable and it will be called as similar to that of above it.
var xyz;
if (num === 0)
{
xyz = function(abcd)
{
abcd.make = 'rose';
}// function closes here
}// if closes here
We can also define functions based on condition. Here in the above example if num equals 0 only then this function will run otherwise not.
The typical and Latest way to define a function
Arrow function
It is a new and typical way of declaring a function and is not prescribed to use everywhere. It makes syntax quite small and shortens the line of code but because harder to understand. Usually or mostly it is used in return cases.
Example:
var calli=(h)=>
{
Return ‘hi ${h}’;
}
calli(hey);
//=>:Here this symbol defines that this is a function.
Function Scope
This concept talks about two things Local Variable and Global Variable. The variable defined outside a function can be used anywhere by all the functions. This is called a Global Scope.
The variable defined inside function is accessible to only that particular function no other functions. This is called a Local Scope.
*Same variable can use easily inside diverse functions.
*It is needless to say that one can declare as many functions as he wants inside a particular function. This is called a Nested Function.
How do we call a function?
Ok we discussed everything but all this won’t work useless you call the very function, created.
Either you can call the function in the script like this:
1. In direct calling, the function will be executed as Js will load.
function abc()
{
//body
}
abc();
2. Calling a function through Id, Class or Tag. First store the particular element in a variable then call it.
Example:
<div id="myBox"> </div>
<script>
var mybox = document.getElementById("myBox");
mybox.eventName(function name);
<script>
3. This is one of the easiest ways to do it. The event listener:
<div id="myBox"></div>
<script>
var mybox = document.getElementById("myBox");
mybox.addEventListener(‘event name’, function name);
</script>
Or
You can call a function in HTML with a particular event, on a particular element.
Like:
<div eventname="functionName()"></div>
To conclude we can say that the function is one of the most important parts of the JavaScript. Which no developer can ignore. You literally can’t do anything without the function.
If you want to learn these courses then, feel free to join this JavaScript Institute as the offer the best JavaScript courses in Delhi.
