Functions | Bondar Academy
Course: JavaScript for Testers
Module: JavaScript Fundamentals
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore the concept of functions in JavaScript, which allow us to encapsulate reusable logic in our code. Functions help avoid code repetition by enabling us to call the same block of code from various places in our application. Types of Functions Declarative Function: Defined using the function keyword, followed by a name, parentheses, and curly braces. Example: function hello1() { console.log("hello1"); } Anonymous Function: Lacks a name and must be assigned to a variable. Example: const hello2 = function() { console.log("hello2"); }; Arrow Function: A concise syntax introduced in ES6, also an anonymous function. Example: const hello3 = () => { console.log("hello3"); }; Function Parameters and Return Values Functions can accept arguments and return values. For instance, a function that prints a name can be defined as: function printName(name) { console.log(name); } To return a value, use the return keyword: function multiplyByTwo(number) { return number * 2; } Importing Functions Functions can be organized in separate files and imported into other JavaScript files. Use the import keyword to bring functions into your current file: import { printAge } from './helpers/printHelper.js'; Alternatively, you can import all functions from a file: import * as helper from './helpers/printHelper.js'; This lesson provided a foundational understanding of functions in JavaScript, including their types, usage, and how to import them from other files.
Video Transcript
In this lesson, we will talk about functions. So function is the mechanism in JavaScript language when you can take the certain pieces of the logic of your code and put it into the reusable component. And then you can call your function from the different places inside of your application and get access to that source code. So you don't need to repeat your code again and again. You just call the function that perform a certain operation for you. JavaScript has multiple types of the function and I will show you some of them that we will use later in this class. So let's get into it and create our first function. So let's start with the function example. The very first example is declarative function. So function starts with keyword function and then we provide the name of the function. Let's say the name will be hello1. Then we provide the parentheses and curly brace. So that's the body of the function. And inside of the body of the function, we put our code that we want to run. Let's say we want to print to the console, console log, and we want to print a message, hello1. Now the function is created and in order to call this function, we just need to invoke it. And we type the name of the function. We see it's displayed in the dropdown. So let's say hello1 and parentheses. That's it. Function is ready to be executed. And that's it. Function is working. Our function printed the world hello1. And if we want to use it again, we just simply call this function again and it will print two hello1 messages for us. But we are not copy pasting the code. All right. Okay, I'll remove this. The second example of the function is called anonymous function. The difference between anonymous and declarative is this function simply doesn't have the name. So we make a function and then parentheses and curly brace. But in order this function to work, we need to assign the result of this function to certain variable. And let's say we create a variable, call it hello2 equals to function. So we have a function. We don't have a name. We have a parentheses and body of the function. And the rest is pretty much all the same. So we put the code that we want to run inside of this function. Let's say we want hello2. And then we simply call this function and execute it. And here we go. We have hello1 and hello2. The difference between declarative function and anonymous function, that declarative function can be called in the beginning of the file, even if the function declared in the file a little bit later on. So let me do this. And I run this and you see it's still working. Hello1 and hello2. But it will not work with anonymous function. If I will take this and put before we declared anonymous function and try to run it, we see the error. Hello2 is not a function. Simply because hello2 is unknown for the JavaScript what it is about. It's undefined. So it will not work. Okay, I revert everything back. Keep this as is. So as a reminder, declarative function can be invoked at any moment in time. So another example of the syntax is also called ES6 function syntax, or it's also called arrow function. This is example of anonymous function, but with ES6 syntax. So let me say variable hello3. Then I assign the function to this variable and the body of the function will be built through the arrow. So in this example, I don't even need to type the function keyword over here. I just provide the parentheses and this is the definition of the function. And inside of the curly braces, I put the body of the code that I want to execute, hello3 and the rest is the same. I simply call this function and it will work. Execute it and see we go. Hello1, hello2, hello3. What else you can do with the functions? You can pass the arguments into the function. Okay, function with arguments. So let me create another function and let's say we want to create a function that will print the name, print name. That's the function body. And then we want to print any name we pass into this function to the console. So I declare the parameter of the function and I call this parameter inside of the function name. And then I can use this parameter inside of the function, console.log, and I call this parameter inside of the function name. And you see right now it became highlighted. So if I delete it, it is grayed out. It means that it's declared, but never used. But if I use it inside of the function, now it is highlighted. If it is highlighted, it means that this parameter is used. And then I can pass the argument into the function and our function will actually work. So I called print name function and then pass the name that I want to print. Let's say John. And then I run it and see that John is printed or Mike, and I run it and Mike is printed. You can use as many arguments inside of one function as you want. And you need to separate those arguments by comma. So let's say name, and the second argument will be last name. And I want to print the last name as well. Name plus space plus last name. And then I put the second argument into the function. Let's say Smith, print name, Mike Smith. And I run this function and we see that it is printed. So now this function becomes a fully reusable. We have a certain code that is not dependent on the hard-coded data and using the parameters of the function, we're just passing the code parameters of the function. We're just passing the arguments inside of the function to invoke a certain operations inside of the function. So, and this function is just doing a certain operation. But also we can create a function that will make a certain operation and then return the result of this operation to us. How to do that? So function with return. Let's say we want to create a function that will multiply the number by two. Multiply by two. And we put the number as the parameter of the function. And then we write our code. I create the variable result equal number, multiply by two. And after this simple math operation, I want to return this result of the function. That's it. Function is ready. Now let's use it. So I call this multiply by two. Let's say I will pass the argument five. And then we know that our function will return this result back to us. But how to use it? We need to assign the result of this function to a certain variable. So let's create a certain variable and call it, let's say, my result. Equal to multiply by two. And let's print this result to the console. Console.log my result. And we run it. And here we go. We see 10 is printed to the console. This function can perform a simple math operation, can give us a result, and then we can use with this result whatever we want. Now, in order to use this function, we just call it and provide the argument that we want to multiply by two. Let's say if we put 20, multiply by two, we see the result printed out as 40. Okay, now all that looks pretty good, right? But what's the benefit? What's the benefit of creating the function and calling the function right away in the same JavaScript file? And here's the thing. You can keep your functions in one place, but call them from the other place. And in this way, you can organize your code the way you like it. So let me show you how to do that. Let's say we create a new folder and call this folder as helpers. And inside of this folder, let's create a new file. And let's assume you want to create a helper file that will print different things for us to the console. And we call it print helper. And now inside of this print helper, let's create a first function and let's call it print age, for example. And parameter will be age. And console.log will be age, okay? So that's the simple function. And now from our class, let's just import this function and use it. How to do this? One way of importing functions, import function. One way of importing function is using the keyword import. Then we need to provide the name of the function that we want to import, which is print age. And we provide a path from where we want to import it from. And we see VS Code gives us a hint that we have a helpers folder slash printer helper.js. That's it. And now we can call our function, print age, call it five and run this function. Okay, we see the error, cannot use import standard outside of the module. We need to make a quick fix inside of the package.json and add one more settings here, which is type module. And this should work. Okay, and oh yeah, and one more thing, we need to add a keyword export. Because we need to export function first before this function can be used outside of this JavaScript file. And run it one more time. And here we go. Now it is working fine. So we printed five to the console, just calling this function inside of the lesson 8.js, importing this function from the printer helper. And the second way how you can import the function is import everything. So, the syntax would be import star as, and we provide the object, how do we want to import the entire JavaScript file? And let's say we call it as helper from, and the same syntax, helpers.printerhelper.js. And then to use it, we call our helper.nc. We have in the dropdown a highlight of which functions are available inside of our helper. The function which is available is printH. We call the printH and let's say, put it 10 and run this function. And here we go. 10 is printed into the console. All right, so this was a quick introduction to the functions in JavaScript. And let me quickly summarize what we did in this lesson. So functions can be declarative and anonymous. Declarative function start with the keyword function, provide the name of the function, parentheses, and then inside of the curly braces, you provide the code that you want to put inside of the function. Anonymous function does not have a name. That's why it's called anonymous. And you need to assign the result of this function to the variable. And then you can call this variable as the result call the function. Another syntax is called the arrow function, which is used also anonymous function, just the fat arrow syntax. And inside of the curly braces, you put the code of the function and then call it. Also, you can provide as many arguments to the function as you want. The values that you use inside of the parentheses of the function call the parameters of the function. And the values that you pass into the functions are the argument of the functions that are passed into the function and used inside of the function. Also, function can return a certain results for you. For this, you have to use a keyword return to return the result. And after that, assign this result to the variable or use the result of this function for anything else. And you can import the function into the different Java classes. For that, you need to export this function first with a keyword export. And then you call import name of the function and provide the relative path to the function location. And then you simply call this function and use it. Also, you can import all the functions from the JavaScript using import start as, provide the name of the object, how you want to use this function. And then through the dot notation, you call the function inside of the file. All right, that's it guys. And see you in the next lesson.