JavaScript Functions

JAVA SCRIPT BASICS

Java script Functions

(00:00)

Hello guys welcome to our series Java script. In our last segment we saw loops like for, while, do...while, and two more loops provided by Java script are for…in and for…of. I hope you have practiced all the five loops. During practical or during our segments if you have any questions and queries tell us about it on forums.learnvern.com we will revert back with solutions to your questions and queries.

We are going to learn about function in Java script in our today’s segment. We have already seen some basic functions in our previous segments like how to create these functions. We saw at very basic level, but from this segment onwards we are going to see the use of the function, why function is useful, and we are also going to see multiple ways of using function.

So let’s start with function, guys understanding function is little difficult, so I request you guys to study functions with full concentration. We all have already seen basic functions in C, or python and Java. During you college time or any course which you have done regarding C in that also basic functions are taught to us. But here we are going to see why functions are used? And in Java script which different types of functions are used? I request you to pay full attention in this segment.

First we will see what is function? So what exactly is function, if we have a piece of code, some lines for executing those we have two methods, by simply writing in our sublime text when our script will run then automatically code will also be executed. But why do we write function? When we want our piece of code to execute at specific time or when the piece of code is requested for execution then only it should get executed so in that case we use function.

Let’s say I write some function, we need to call that function, until and unless I call the function the code written in function is not executed. So if I am creating a function and I am not calling it, then script will keep on running but code written in my function will not be executed as I am not calling the function. So calling function is also very important.

Java script functions are used to perform operation, means to perform some specific operations. We can call Java script function many times to reuse the code. Means if I have written a piece of code and I don’t want to use it only once but whenever the function is called, code should be executed. In that case we write our piece of code in that function, so whenever need arises I can call my function and my code can be executed. Again if after some time I need to execute the code then again I will call that function, execute the code and return back.

This is our way that how we can execute our existing code again and again by calling it. Now you might have the question that we already saw loops? If I have to execute a piece of code again and again then I can also use loop. But in loop we have some limitations, if you execute loop once and then you came outside by breaking loop then again how you will execute it? then to again execute it you will have to call it again, so here functions come in picture, if some piece of code is written, after executing it once we have some other work which needs attention, but whenever necessary we need to execute that piece of code, in that case functions are different from loop.

(04:33)

Loops perform iteration at same time whereas functions perform iteration when required. Here some advantages of functions are given- first is code reusability, means yes the code which is written once can be used again and again, how? Whenever we call the function same code will be executed, so here we are writing code once and using it again and again, this is our code reusability.

Next is less coding, means if I have written 4 lines in my function and during my program I have to execute that code 5 to 6 times, for that I don’t have to write that code 4 into 5 i.e. 20 times, I’ll write only one time means I have written my 4 lines now I will call it again and again through function. If I am not creating function then 20 lines are adding in my program, but if I am performing this through function then my 20 lines will be converted in 4 lines.

So here what is easy for us, less coding, means we are performing our task in less line, so here code becomes reusable and second coding also becomes less, so these are advantages of function. Here in function we will see syntax and example, first we will see how syntax is written? Here you can see function then name of function, here function is keyword like for, while, do while etc. similarly function is keyword here.

After function, function’s name, whatever name we wish to give, in parenthesis we have to pass arguments, here we have passed argument in array but here it is not necessary that you pass array only, you can as many arguments as you want. So if in function you need parameters than pass arguments but if you don’t need parameters then there is no need to pass arguments.

We will consider two example, one in which we need to pass parameters, and one in which we don’t need to pass parameters. So once function has been given name and parameter then in curly braces we will add whatever code we want to execute. Here a note is given, Java script functions can have 0 or more parameters. Either there will be no parameters or there may be more than zero, if parameters are not there then zero and if it is available than more than 1.

Here we have an example of message pop-up, so we will perform this through function, how? When clicked on a button our function should be called and our message should be shown. So we will do this through sub lime text, here html(13 seconds gap) here we are not going to pass parameters, that’s why we have given this name, save (12 seconds gap) her we will write function without parameter, this is our program, in this we have to create a function which can be executed on click of a button.

It is not necessary we have to execute it on click of a button we can do it without clicking on button also, but to show that as many time as we will click the button our function will be called that’s why we are introducing button. So in html portion we will write button outside script, now what do we want in our button? So let’s say in button firstly I want, in input type will be equal to button, I don’t need name, when I click this button my function should be called so for that on click event, onclick event we conducted in html course, when we click it some event will be fired, so at onclick what I have to do? I want to call a function, so in script function, which function will I write? Function let’s say showMe, whenever you create a function, function is defined by parenthesis, if there are parameters then we will add them in parenthesis if we don’t have parenthesis then we will not add, so currently we don’t have so will not keep here anything I will keep it empty.

(09:48)

So in showme I want to show a message that this button has been clicked, let’s say name of button is value alert, means alert will be written on button. Whenever I click on this button a alert box should be displayed, so here will come alert( 8 seconds gap) on showme will be called on click, if I don’t add showme on onclick then my function won’t be called, I want to perform task on showme that’s why I will add this onclick, save this and reload and you can see alert Is appearing, as soon as I click this I can see alert box on screen, what is written in alert box? Alert button is clicked, okay, now I will again click this again box will appear, as many times as I am clicking this button the box is appearing.

Now the function in which I have written code I have written it only once, so write it once and repeat it again and again. So how many times am I using it? I am using it as many times as many times I am clicking the button, so if I have to execute again and again any piece of code or in this case alert box, so in order to call it again and again I have written here in this function that on call the alert box should show up, so this was advantage of function and why functions are so useful.

So this was example of function without parameters, now if I go back to our slide we can see an example of function with parameter, here we have generated a cube, in place of cube we can also generate square. So let’s say I want to create such program in Java script that whatever value I pass I want its square to be generated. So for that what will I do? Currently I will make it little static, as many times I click button, square of the number should be generated.

(12:21)

So I will copy this and place and this is my function with parameters, so save function with parameters, o this is my button and now what I have to do on this button? Let’s say I have to show something on this button, like some message, so here what will I do? In alert instead of showme what function do I want to call? That whenever this button is clicked that many times square of 2 should appear on screen. means(14 seconds gap) so here what have we written?

Value of power of 2 is means whatever value of 2 into 2 is, we are calculating here. So value of power of 2 is then I have given question mark. So the answer should appear on my alert box, 2 into 2, so here I will create a function, function calculate, now what do I have to pass here? Whatever I will pass from here, in this, I want to calculate square of the number which I will write here and return it. So what will I do? Return, okay let’s say I am getting a number here, let’s name it as num, so I want return here that number’s square, so return number into number and semicolon.

So here what is happening? Right now I have not given any value in calculate, so the value which I will keep here will be considered as parameter for the given function. So the variable which I have taken for this function’s parameter is num, so what is getting returned? Num into num means whatever number I will receive as parameter, that number’s two times multiplication will take place, that number will be multiplied with itself only, means after multiplication that number will be returned.

So here I am passing 2, save and instead of return what can we write? Alert as we have to show this also. Let’s say I write alert, number into number, okay, reload and what are we getting? 4, means what is power of 2? So it is 4. I will again click this value of power 2 is? Again I am getting 4. So let’s say I will change the number from 2 to 5, here also I will change it to 5, so value of power 5 is? 25 so 5 into 5 is 25, so actually this is our square not power, okay so square of 5 is 25.

Again if I have to pass 6, here we are doing for show purpose, in actual we have to change value here where we have passed function. Let’s say I write here 6, square of 6 is, save and reload, what are we getting? 36. So here what have we done? We have created a function with parameter, in which we are accepting something as parameter and answer of that accepted value is shown in pop-up or alert box, here num is our parameter.

What is the difference between this example and previous example? We have seen two examples like with parameter and one without parameter. You can make as per your requirement and move further in web designing. Now comes example with a return value, means we have to create a function in which we can return something, we can show something.

So let’s say in my dome, my window I have to show something. What I have to show? I will show that with help of return value. Let’s say here we take function with return value, okay, save function with return value so in this what will we do? We will return something through function. Till now the functions which we saw nothing was returned in that, you can see from here the function is getting called, and we are showing a alert message, that’s it and here also we are calling this function and here alert is showing.

But we are not coming back to our first place, from where this function is called after performing a calculation or operation, so for that what we have to do? We can also pass the return value, return value means, when we perform a operation, we return that operation’s answer or whatever is generated through that operation we return that, or we don’t return anything, so we get return values in these three form.

In number we are returning something, or in string we are returning something or it is void, returning void means returning nothing. So here you can see we have called a function written in one script from another script, in that we have simply written document.write and called the function, means we are showing in our window, means whatever return value we are getting through this function getinfo we are showing that.

 I will here from this program, html, example of function with return value, in script save it as function with return value. So this is our function with return value, so in this we will create a function, let’s say my function is function info and in that I don’t have to do anything, I have to return our value, I will return “hello this is learnvern”, that’s it. So whenever I will call this function this statement will be printed, so let’s say from this only through document.write info, we will call it, means through document.write what am I showing? Here whatever is showing that, so save and reload, what am I getting? Hello! This is learnvern.

So here I have returned something, what have I returned? Means whenever we call this function this function is returning us a string, our string is “hello! This is learnvern” and this is showing in document because we have shown this through document.write. now let’s say here only I will create one more function, function generate some and here I will not give any parameter, return num plus 5, means whatever number I will get it will be returned by adding 5. Now here document.write br tag and here we will call this function, generate some and let’s say I pass 50 in that, so what am I getting? I am getting 55.

Means as soon as I called this function, 5 was added to the number and that value is returned. So here in total I have created two functions, one with name info which is returning me a string and second with name generate some, that is returning me what? Whatever number I am giving it is returning me by adding 5. So this was function with return value, whenever we are taking some return in function we will get return value, means function will return us something, this is called function with return value.

Till here we have seen function with parameter, function without parameter, and function with return value. After this we will see how object works in function? What is function with object? In functions with object there are some in built functions in Java script, which Java script has given us as facility and how we can work through it. so whatever functions we saw till now were normal functions, in other programming language also functions work in same manner. In next segment we are going to see other functions and how they work with object.

Thank you.

(video duration-22 minutes 54 seconds)