JavaScript Functions | JavaScript Functions Explained |JavaScript Tutorial For Beginners|Simplilearn

hey guys welcome back to another video by simply law in today's video we are going to learn all about JavaScript functions in a previous videos will cover topics like JavaScript arrays and loops if you're new to this topic I suggest you go through these topics before all right so before jumping in let's go ahead and look at what's in store for us first we're going to learn what exactly JavaScript functions are then we look at JavaScript function expressions then the function constructor self invoking functions functions as values functions as objects arrow functions generate a function and the predefined functions also don't forget to subscribe to our channel and hit the bell icon to never miss an update moving on to our first topic what are JavaScript functions so basically a function is a group of reusable code which can be called from anywhere in your program right when you have a piece of code that you want to execute repeatedly in your entire program it makes more sense to define it once and call it over and over right it makes the code more efficient and readable this also helps programmers write modular codes so this is the syntax you make use of the function keyword followed by which you mention the name of the function the name of the function is completely your choice next you mentioned the parameter list and within curly braces you can define the function now the function body is basically the code that is executed every time the function is called so let's go to our vs code editor and sure it created a folder called demo functions within which have created an HTML file called functions dot HTML alright and now I've just stabbed in the initial code now let's create a function so when we say script within which I use the keyword that is function keyword and now I give the name for my function I say my underscore function and the function takes a parameter say value now this function basically returns the square of the digit all right so within which I say document dot get element by ID the ID is demo and now it just displays value into value all right so the function basically displays the square of the number now outside the function let me call the function does my function let me pass the value 5 all right now let's save this and execute it so let me go back to my file and here we go it displays the value 25 so this was a simple function which took a value a digit as a parameter and then returned the square moving on to the next concept function expression now what we learnt previously was function declaration but a function can also be defined as an expression now this is what the syntax looks like now here the function is created and assigned to the variable explicitly like any other value the meaning remains the same that is you create the function and store the value that it returns into a variable and in our case it's X right so let's go to our BS code and let me help you understand this better so now I create another function and here I say let x equals let's use a simpler function so I just mentioned function and within curly braces I display an alert message and I have display a message saying hello all right now after that to display the message what we can do is let me just copy this output code you place it here and here what we're going to be displaying is the value X right now since it consists of a function you will have to type the curly braces now this is crucial for its execution all right so let me save this and then execute execute this and here you go it says the site says hello so we've successfully executed the piece of code we can also assign this variable X to another variable and then call that variable instead right we can say let y equals x and instead of calling X here we can simply call Y let me save it and then let me refresh the page and there we go it still displays a message hello all right so this is one of the ways of defining a function that is as an expression moving on to a next concept function constructor now JavaScript functions are defined using the keyword function right now functions can also be defined using a JavaScript built-in function now this is the basic syntax so here we've created a function called my function and we've used the keyword new after which we abuse the constructor function and inside we provide the parameter list after that the return value next you can call the function here right so let me just go back to my vs goal and now Hemme just made changes to the same piece of code here I create a function say my underscore function okay all right let me just change the name to my function all right and then here I use the keyword new and the function constructor that is function within which I'm passing all the parameters so I have a P I'm going to return the sum of the digits all right and now while calling the function let me just store the value in a variable say X let's call the function that is my function with the parameters two and three all right and now let me display it so I'm just gonna copy this and I want to display the value of x right all right so let me save this and execute it if you refresh the page it displays the sum that is five to make it more readable let me just display another message here let me just say the sum is alright let me save it and then refresh the page it says the sum is fine all right now this is how you make use of the function constructor next up we learn about self invoking functions now as the name suggests these functions are invoked automatically without being called now previously when we learned about function expressions we saw that parentheses were crucial so you have to add parentheses around the function to indicate that it is a function expression so here is a syntax video so what we've done is we've made sure we've enclose entire function within parentheses so let me help you with that let's go back to our vs code and let me create another script and here let me create the function within the parentheses on save function it's not taking any parameters instead it is going to alert for message so let me say hello welcome all right after which we are going to call the function so again with to mention the parentheses let's save this and execute so when we refresh the page it says hello welcome so we will call the function rather it got invoked by itself so these are self invoking functions now let's go ahead and look at functions as values now in JavaScript a function is basically a value so we can deal with it as a value now here is a simple syntax now if you closely look at the syntax you might think that this is same as function expressions well no in this case what we do is we first define the function and then we assign it to a particular variable but in the case of expressions the function definition was defined during the initialization of the variable right and also we have to specify the parenthesis in order to call the function so to help you understand this better let me go back to our vs code and here let me just erase this and let's define a function that returns the product of two digits so let me just call it product which takes two parameters then say a and B within which we return the value a into B alright now after this let's create another variable say y equals function for an solve the new with functions product so product of two and five alright so this basically returns us ten right so let me just copy this display this on our package ensure I change the message to the product and here let me change it to Y so let's see if there's an executed so let me refresh the page and here you go you can see the message the product distant now what we can do is you can make alterations to this now say I want to multiply the value with five again right so basically this returns ten and that value is multiplied by five so let me save this and refresh our page and there we go pitter turns and there we go it is placed fifty so this is how you can make use of functions as values moving on to the next topic functions as objects now JavaScript functions are a special type of objects called function objects now a function includes a string which holds the actual code that is the function body of the function the code is literally just a string although not recommended you can also create a function with the help of the function constructor I will show that you little later on but for now let's look at the syntax now here we have a variable called body which basically consists of the function body it's enclosed in double quotes and that's a mistake please ignore it alright so next we have variable function name so here we create a function using the keyword new and then we pass a parameter list and the body basically tells us what the function returns all right next we have an alert message to call the function so let me just show how this is executed back in a waistcoat let me create another function and let's say the function returns the area of a circle right so let me just create a body variable which returns so the area of a circle is PI R square so we make use of dot pi into radius into radius right so it's basically PI R square up to which let's see where circle and here let's create a function using the new keyword function and then here we pass the value that is the radius and then the body and so basically this is the definition of our function so let's use alert to display the area so we say alert of a circle or five all right let me save this and execute it so when you refresh the page it displays the area of the circle so this is how you can use functions as objects moving on to our next concept arrow functions now functions can be written more compactly and more precisely with the help of arrow functions all right now arrow function expressions are ill-suited as methods and they cannot be used as constructors now also while using arrow functions using const is a safer option because a function expression is always a constant value so this is the syntax now you can only omit the return keyword within the curly braces if the function is a single statement so this is the syntax first you provide the name of the function with an equal to sign followed by the argument list and later you make use of this arrow icon and define the expression so this is basically nothing but this so let's go back to the vs code and check for ourselves so let's create another function and here let me say Const my func equals now say we want it display the product of three digits so let me just pass ABC my parameters and we make use of this icon which indicates that this is an arrow function within which I say return a into B into C all right now let me just assign this to a variable hey let me say product because we've used X here and then let me call my function that is my funk and pass the value to 3 and so forth all right so let's display the product so let me just copy this code and here let me say the product of the three digits is and let me say product here so that is what is being used here right alright so let me save this and execute it all right first it displays the area of the circle all right and then we say okay and there we go it displays a message the product of the three digits is 24 so let me do one thing let me just comment this out okay let me save it and then execute it again it is displaced this all right so this is how we can make use of arrow functions moving on let's look at the generator function now regular functions typically return only one value right on a single value or sometimes even nothing but a generator function can return multiple values and the speciality is that it can do it so on demand alright how to create a generator function we make use of an asterisk so an asterisk indicates that the function is a generator function so here you can see that we have a function followed by a Stix and we created a function called generator sequence so here you can see we have the Aztecs after the keyword function followed by the name of the function right but the main method of a generator function is the next method when this method is called it basically runs the execution until the nearest yield value all right or the nearest yield statement then the function execution pauses and the yielded value is returned to the outer code all right so the result of the next method is always an object with two properties it has a value property which is basically the yielded value answer it has the done property which displays true if the function code is finished or false if it's otherwise so let me show it execution for a clearer understanding so let's go back to a BS code ensure let's create the generator function let's save function Astra's generate function all right now within which I make use of the keyword yield and I say yield 1 first followed by yield tool when finally I make use of return which indicates the termination so I say return 3 all right now we make use of a variable C generator and assign it to the generator function that is generate funk and now I create another variable say 1 which will basically return the value when I call the next function so here I say generator dot next okay so whatever generator dot next returns it stored in one so to display the message I say alert and now I'm going to make use of a method called Jason dot stringify all right so basically this method converts a JavaScript object or a value to a JSON string all right so within which I'm going to say one that is this alright so now let me save this and execute it let me refresh the page and there you go here it returns two properties value and done it says value is one and done is false right it is false because we haven't reached the return statement yet so what we can do is to display the rest let me just copy these and display it one by one so this and sure let me say two and this three then we'll copy this okay I say - then I say three all right so let me save this and then execute it so when i refresh the page it says one and false after which again it says two and false [Music] and finally when it displays three it returns true for the done property that means we reach the end of the function definition so this is how you make use of a generator function now let's move on to our last topic that is predefined functions now JavaScript has many built-in functions all right now here are a few of them we have eval parse int pass float escape and unescape so let's go through one by one all right first up is eval now this basically evaluates a string and returns a value all right so to help you understand this better let me go back to our vs code and now let me just create another file and let me call it predefined functions dot HTM alright I have just copied the initial code all right so for eval the syntax is eval within which I say expression all right now this is the general syntax so what this eval does is that it evaluates the expression and if the result is not a string the result is just returned and if the result is a string it is taken to be a JavaScript program and evaluated so let me show you how it's done so first let's create three variables all right let's call them X and initialize it to five then Y with six and then let Z be seven all right now let's just displays the result on the console so say console dot log eval oh let me see X plus y alright octave which I against a console dot vlog of eval upset here since the expression is a string this gets evaluated and sure since it's not a string it just returns the value set and here since it is not a string it just returns the value of said so let me save this and then execute it all right so let me just check our console you you there you go it evaluated the expression and added the two values that is X&Y and returned 11 while Z is returned as it is right this is what a band does next up is parse it now as an in suggest it parses a string argument and returns an integer of the specified radix or base and the syntax basically includes the keyword parse and the string within parenthesis parsefloat on the other hand passes a string argument and returns a floating-point number again the syntax has the keyword parsefloat along with the string within parentheses next up is escape now this returns the hexadecimal encoding of an argument and on the other hand an escape returns the ASCII string for the specified value so with that we come to the end of this video I hope you found it helpful if you have any doubts or queries let us know in the comment section below so I'll see you guys in the next session until then keep learning and stay tuned to simply learn hi there if you liked this video subscribe to the simple learn YouTube channel and click here to watch similar videos Dinard up and get certified click here

Channel: Simplilearn

Views: 4,997

Keywords: javascript functions, javascript functions explained, javascript functions tutorial, javascript functions advanced, javascript functions with parameters, javascript functions tutorial for beginners, javascript functions practice, what are javascript functions, javascript functions for beginners, how to create javascript functions, functions in javascript, functions in javascript for beginners, learn javascript, javascript basics, javascript, simplilearn javascript, simplilearn

Id: 2vbr9f7OVMY

Length: 24min 56sec (1496 seconds)

Published: Sun May 17 2020