hello guys welcome to the next blog on JavaScript tutorial for beginners in this blog we will discuss about using functions in JavaScript so first of all what is a function a function is a block of code which performs some particular task and why do we use it we use functions to reuse our code because it's doing some function and if we want to apply this particular task again and again in our code then functions is the most beneficial thing to do so let's see how we can use functions in JavaScript so first of all what I'm going to do is I'm going to add the script tag inside my body just keep in mind that you need to add the script tag inside your body element okay and in here first of all let's see how functions prototype looks like so this is how you declare a function you need to use a keyword called function and then you give the function name and then in these brackets you can provide some parameter they can be none or they can be one or two or many parameter you can provide any number of parameters in a function like this and inside the curly braces comes the body of the function okay so let's apply this logic to create a function inside our JavaScript element or script element so this is the function keyword and then comes your function name so for example we want to print something so I can just write print message it's the name of the function and for example I don't want to give any arguments so it's taking no argument from here and by using this function what I want to do is for example I want to print some message when I call this function okay so create our h1 element here and in here what I want to do is I want to add an attribute which is called ID and I can name my ID anything for example demo ok and now there is a function in JavaScript which is an inbuilt function which is document then there is function called get element by ID and what it does is it takes the element by ID so our element is h1 here and the ID is demo right so we need to give here the ID of our element which we need to affect from this function ok and then there is a function one more function which we can call here which is called inner HTML ok is equal to and then I can give any message or anything to this element using this assignment operator so for example I can just write hello and then there is a term called that calling a function so once you create a function you also need to call it and how you call it for example I created this function and I just want to call it just below this function declaration here so just write the name of the function and those brackets here and then give this semicolon and save your code and refresh your web page and it will give you your message using this h1 tag ok so this is how a function will work now I told you that function can take some parameters here so for example I create a second function which I named it as ad here and what it does is it takes two parameter for example num1 and num2 ok these parameter names are given by the user so it can be anything X or Y or number one or number two or number one or number two it's on new what parameter name you want to give here okay and instead of printing anything here I will just return from this function right so what I am going to return just use a keyword called return and then for example I want to return the addition of these two numbers so just write num1 plus num2 okay and what it's going to do is whatever parameter you give here it takes these two parameters and add these two numbers which you give here and returns the addition using this function okay so let's see how we can use it so I'm going to use this document dot get element ID something like this and after this print message call I can call this here document dot get element ID and for example I'm going to add one more header element here and in here I'm going to give the name to my ID for the second h1 tag for example some okay so this is the ID of my h1 element and I can pass this some ID here and instead of using hello world here I can directly call this function which is add and I can passed two numbers here for example 100 and 200 okay because it's taking two numbers here right so save your code and refresh your webpage and now it gives you hello world which is from our first function and it's gives you the addition of two numbers which is 100 plus 200 which is 300 right now remember I told you that by using function it makes you easy to perform a particular task again and again okay so in here we are adding 100 and 200 but for example I want to add some other numbers so I create one more h1 element and the ID name I change it to someone and here also I replace it by someone and here I want to add for example thousand and two thousand okay and save your code and refresh it and it gives you thousand plus two thousand which is three thousand here okay so notice here we are using the same function but we are passing different parameters here right so we are reusing our code in a way okay so whenever you want to reuse your code you may want to consider function now for example I have two strings so you can concatenate two strings using this plus operator right so for example I have two strings like hello world and save your code and refresh your web page it will give you hello world right so you are using the same function to concatenate two string using a function so in this way you can use functions in JavaScript so once again I'm going to repeat the terms we have used one is the function keyword whenever you declare a function use function keyword then a name then these are called parameters here this is called the body which you write inside these curly braces you can return the result by using this keyword called return and then return your result now whenever you want to execute this function it's called calling a function right so you're calling this add a function here and whenever you give some real values as a parameter they are called arguments okay so that's it for functions in JavaScript I hope you have enjoyed this blog
0 Comments