Class and Methods | Bondar Academy
Course: JavaScript for Testers
Module: JavaScript Fundamentals
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored the concept of classes and methods in JavaScript, which help organize code into reusable components, similar to functions. Creating a Class A new class is created using the class keyword followed by the class name in PascalCase . For example: class CustomerDetails {} Defining Methods Inside the class, methods can be defined with the following syntax: methodName() {} For instance, to create a method called printFirstName : printFirstName(firstName) { console.log(firstName); } Using the Class To use the class methods outside of the file, you need to: Export the class. Import the class in another file using import . Create an instance of the class with new . Example of creating an instance: const customerDetails = new CustomerDetails(); Calling Methods After creating an instance, you can call methods like so: customerDetails.printFirstName('Steve'); Refactoring and Documentation For cleaner code, you can refactor by exporting an instance directly. Additionally, you can add annotations for methods using: /** * Description of the method * @param {string} lastName */ This enhances code readability and provides useful information in IDEs. Summary Classes and methods in JavaScript provide a way to abstract and organize code. Use the class keyword, define methods, and manage instances effectively to improve code structure.
Video Transcript
In this lesson, we will talk about class and methods. Class and methods is another way how you can organize your code and make it more reusable, putting your code into the reusable components, similar to a functions. Class and methods has a slightly different syntax compared to the functions, but also has a certain advantages that you can use in your application. So let's get into it. So let me open the print helper.js that we created before and I create a new class. So a new class in JavaScript is created by the keyword class and then we provide the name of our class with a capital case. Let's say we create a class, CustomerDetails, curly brace, and this is the body of the class. Inside of the class, then we can create our methods. Let's say we create a method and call it printFirstName. Parenthesis and curly braces. So this is the basic syntax. This is how we create a class, capital case, and method. We just provide the name of the method, parentheses, and curly braces. Inside of the method, we can put the code that we want to execute. For example, just console.log and any text that we want to run. So if we want to print the name, let's make a parameter for our method. And we put a firstName parameter and we will call this parameter inside of the console.log. Now, how to use the methods inside of the class outside of our print helper? So the approach is very similar. First of all, we need to export this class so it will be visible to other files in JavaScript inside of our project. Then let me create a new file right here, I call it lesson9.js. And then I need to import my customer details. You can see that VS Code immediately give me a hint which class is available with this name, and I click Enter and VS Code creates an import for me. Then I need to create an instance of this class. So I create a variable. I call it also CustomerDetails, and it should be lowercase. And I can give any name, by the way. It's not necessary, it should match the name of our class. It can be anything. And then I use a keyword new and provide CustomerDetails class. That's it. So now we created an instance of the class. Now variable CustomerDetails becomes our object. And using this object, we can call a method from this class. So I simply call CustomerDetails, and I see the method is available. PrintFirstName. Click on this, and it's ready to be used. Now I provide the argument. Let's say I provide name Steve, and we can run this code. Okay, sorry, I didn't put .js to my path of the file where my class is located. Run it again, and here we go. We have a Steve printed to the console. So the same way I can create the second method, and let's say I call it PrintLastName. PrintLastName, and parameter will be LastName. I use it right here, and the same way, now I can call it user my object CustomerDetails. And we see that LastName is available, and we can put Steve Smith. And I run it, and we can see Steve Smith is printed to the console. Another way how you can refactor this and organize is to remove the constructor from the body of the file where you call your methods, and put it back into the place where you keep your class. And then we remove the export from the class, but we add export Constant CustomerDetails as new CustomerDetails. And here, instead of importing the entire class, we just want to import CustomerDetails instance of our class and use it. Here we go, it's working again, and as you can see right now code looks much cleaner. The implementation is hidden here in the print helper inside of the class. We have our methods that do certain job for us. But inside of the lesson9.js, we're just calling our object and invoking the method that can do something for us. One more thing that you can do is to provide a little more annotations in Visual Studio Code about the method description, what it can do. You can do something like forward slash, double star, and then it creates a section where you can provide a certain description to the method. This method will print the last name. And you can tell, for example, what type of data you expect. Let's say we expect string to be passed as an argument for this method. And then we can go back to our main file where we call this method. We hover over and look, we have a pop-up that has a description. This method will print last name. So this is very handy and convenient to make notes and better description of what this method is about, what is created for and how to use it. Let's quickly summarize what we did in this lesson. So class and methods is another form of abstraction in the JavaScript that can be used to organize your code. To create the class in JavaScript, you need to use a class word, then the name of the class file with the capital case and curly braces. Inside of the class, you put your methods, just methods name in the camel case and provide parameters to your method if needed. Then you need to either export the instance of the class, creating it with the keyword new. Or you can export the entire class and then create the instance of your class in the file where you want to use it. Either way works just fine. And then in the file where you want to use your methods, you just call the object which represents the instance of the class and call the methods from this class to use it. All right, that's it guys and see you in the next lesson.