JavaScript: The Advanced Concepts ES6++(2022) | Jayanta Sarkar | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript: The Advanced Concepts ES6++(2022)

teacher avatar Jayanta Sarkar

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

34 Lessons (5h 11m)
    • 1. Introduction

      3:49
    • 2. Difference between let and var and const in javascript

      8:21
    • 3. Template Literals

      6:49
    • 4. Arrow function in es6

      5:42
    • 5. Rest operator in javascript

      9:51
    • 6. Spread operator in javascript

      8:40
    • 7. Destructuring Array Tutorial

      8:33
    • 8. Destructuring objects in javascript

      5:20
    • 9. Oop

      12:32
    • 10. OOP Introduction Tutorial

      12:32
    • 11. Inheritance

      15:38
    • 12. Modules Intro

      4:53
    • 13. Modules in javascript

      15:06
    • 14. Promise introduction

      6:11
    • 15. Promise Method In Javascript

      9:57
    • 16. Promise all

      14:36
    • 17. Json Intro

      7:09
    • 18. Ajax introduction

      10:13
    • 19. Ajax in javascript

      10:23
    • 20. Fetch API Tutorial

      20:38
    • 21. Async Tutorial

      5:09
    • 22. Await Tutorial

      11:25
    • 23. Advance Javascript Symbols

      13:47
    • 24. Iterators Intro

      3:42
    • 25. Javascript Iterators Part1

      8:17
    • 26. Javascript Iterators part 2

      5:38
    • 27. Generators Intro

      2:22
    • 28. Generators Tutorial

      15:25
    • 29. Strict Mode

      7:47
    • 30. Error Handling Tutorial

      16:25
    • 31. Exercise 1 Intro

      4:05
    • 32. Exercise 1 With Solution

      11:13
    • 33. Exercise 2 With Solution

      4:44
    • 34. Exercise 3 - Removes non printable ASCII characters from a given string

      4:14
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

26

Students

--

Projects

About This Class

Turn yourself into a highly demanded software engineer and developer by following this tutorial on JavaScript ES6. As one of the most highly paid languages, learning ES6 will open so many jobs and opportunities for you.

This course features a ton of diverse content, so you’ll learn ES6 in a stimulating, informative.

Filmed tutorials will get you typing code yourself. And these videos will make sure to explain the reason behind each new line and keyword.

Perfect course to learn and explore JavaScript - for beginners or anyone who wants to learn more about JavaScript.

Source Code is included to get you started quickly

You will learn modern JavaScript from the very beginning, step-by-step. I will guide you through practical and fun code examples, important theories about how JavaScript works behind the scenes, and beautiful and complete projects.

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

There will be lots of quizzes on the JavaScript syntax we have just covered. The goal of this course is to move slow and allow these concepts and syntax to sink in through repetition.

You will also learn how to think like a developer, how to plan application features, how to architect your code, how to debug code, and a lot of other real-world skills that you will need on your developer job.

By the end of the course, you will have the knowledge and confidence that you need in order to ace your job interviews and become a professional developer.

Meet Your Teacher

Hello, I'm Jayanta.

After graduating and holding a degree in "information technology," my professional career began, starting web development and graphics design career in 2018, I never stopped learning new programming skills .

I  learn web development and graphic design skills in Arena Animation. But my most of the skills are self-taught skills. As a self-taught developer and graphics designer, I had the chance to work with meaning of local IT companies to build their websites and train their employee on web programming.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

19. Ajax in javascript: So you can see side-by-side, I open my Visual Studio Code editor and I open my browser using Live Server extension. And I already created an HTML file in my directory. And I want to load a text file in my index.html phi using Sx. So I create a text file named test.txt inside content directory. And you can see inside this text file, I write some text. Hello, I am text file. So I'm going to load this file in my index.html file using asics. First I'm going to create a paragraph tag and our IDs. And inside this paragraph I'm going to type. Here we load data. And now I'm going to create a button. So whenever we click the button, it bring all the text from takes dot TXT file and print inside the paragraph tag. And our button name is clique. And I'm going to use onclick event. Instead on clique, I'm going to use a function, load data. Inside this function, we are going to create our asics. And if I said this file, you can see my browser, it pink, our static data. So at first I'm going to create a script tag. And inside the script tag, I'm going to create a function named load data. So as I told you earlier, first, we need to create an object using XML HTTP request class. So I'm going to take a variable which is x HTTP equal to new XML HTTP request class. You can take any name for your variable. Then I'm going to open my object. So I'm going to use x http dot append function as a parameter. First we need to declare our method. And I'm going to use GET method. And then we need to declare which file I want to access. Mean our file path. First I'm going to type our folder name, then slash test.txt. And then we need to send Boolean parameter. If you want to use synchronized mode, then you need to prove it. So I'm going to pass through to send this request. I'm going to use another method, dot sin x http dot sin from hair. Our request will send to the server. If we send request to server, a response will come from there. So to check this response, I'm going to write some code. At the same time. We will also take our status stage. For this. I'm going to take my object name dot. I'm going to use a method on ready state change. And then I create a function, something like that. The function will continuously run whenever on ready state change its value. And inside this function or need to check response has came on not when our registered will. It would be for its mean, we get our response. So I'm going to run a condition inside this function. If instead the roundness is this dot ready state equal to, equal to four and this dot status equal to, equal to 200. This mean our object. We already learn about it. Just remember one thing, which server response, ready state, and the exact file which we want to access is available in the server or not. For check the status. We use dot status. And if the status is 200, its mean the file is available in our server. And inside the function, I want to show you the exact response in my console, console.log and said they don't resist these dot response TXT. Using df.head response takes property. We can print the server response in our console. Let me explain it once again. First, I create a button in my estimate page and assignee function on this button named load data. They integrate this function inside my script tag. And inside the function. First I create an object named HTTP. Using this object, we can send a request to our server. And I wanted to send request for test.txt file. And using cin method, we send our request. And then I use onreadystatechange property, could shake server status. And who in solver status match with four. Then inside this console it print the text. So let's save the file. And I'm going to click the button and you can see me console it, print all the text from our Takes dot TXT file. And if I change anything in our text file. So I type hello world and said this file, you can see in my browser, it automatically reload our browser because we are using Live Server and this file is connected with our server. And if I click this button, you can see the updated content. So you can see which we had requested from the server. It is working properly. And if you want to show these messages in your webpage, Norton console, then you need to use document method. I'm going to comment out this console.log line and type document dot get element by ID. Inside the roundness is, I'm going to provide our paragraph ID. Demo. Dot innerHTML equal to this dot response to x t. And if I save this file and click on this button, you can see it printed text in our browser. Using inner HTML method, we can change HTML content. Insight is HTML tag, but the cushion is if we receive error of status, then hold. For these, we need to create another elseif condition. So I'm going to duplicate this IEP condition and change if we LC if our status is 400 four and I don't want to show 400 four messages to my client. So instead the inner HTML, I'm going to say it, not phone. If the textFile not available in our server, then it's going to print, not phone. And I'm going to save this file. And click the button. You can see it written our file contained because this file is available in our server. But if I change our fine line and I'm going to change my final text, text1 dot TXT and simplify and back to my index.html page. And if I click on this button, you can see in my browser it print, not found, but inside my console, it print 404. So you can sit condition for different type of HTTP response. And if I change the filename, text TXT and tried to print this content in our browser. You can see this time it print our contained. And now I want to show one thing with our console tag. There is another tag name network. When we work with as x, It's in response in our XHR tag, x mean XML HTTP response. You can see in response to get a file from a server name text one dot TXT, and its server status is 200. It's the asics request. So the type is XHR and effective on the TXT file. You can see the preview and also you can see the response, and also you can see the timing. Here. You can see how long it took two came from the server. And if you click on the header, you can see the URL request method gate status code, okay? And also you can see my remote address. This was normal text, but in actual life, we use JSON data. For practice purposes, we can retrieve peg JSON data. There are lots of websites who can provide fig JSON data. And I'm going to use this website JSON placeholder. And if you scroll down a little bit, you can see Resource option. I'm going to use post-data. It's provided us a 100 demo data, something like that. There's also a dummy data. And now I want to show all of these post in our website. For this, I'm going to copy holy URL. And I'm going to pass this URL in our open method. And I'm going to save this file. And I back to my index file. And I'm going to open my console once again. Let's open the Network tab. And I'm going to show my XHR status. And now I'm going to click the button. And you can see it print our all posts in my browser. And you can see it print out all the posts in my browser. And also you can see finally, post status to a 100 type XHR file size 717 KV, and response time six, 24 millisecond. And you can see lots of data in our browser, but cannot understand it properly. And I'm going to print it in our console. And I'm going to just uncomment this console.log line. And I don't want to print all the data in our browser. I just want to print in our console. And I'm going to set this file. Let's hit the click button. Now you can see in our console it print all the data very well formatted. You can see different titles, different ID, etc. So using asics, without refreshing our page, we can retrieve data from our server. And last thing I want to say, you can see it's a long method. It can complicate our code. So most of the developers using jQuery to run as it's otherwise, developer use a new method name Fitch, which is introduced in JavaScript ES6 version. So in the next video, we're going to learn about Fetch API. Thanks for watching this video. Stay tuned for our next tutorial. 20. Fetch API Tutorial: Hello friends, nice to see you back. In this tutorial, we are going to learn a new method name fetch. In our previous video, we learned a new feature in JavaScript, which is asics, and also in learn a new method, XML HTTP request. Using this method, we can use as x in JavaScript, it's several utilities advantage because we need to write some line of unnecessary cool to solve this kind of problem, JavaScript introduce a new method in JavaScript ES6 version. Fitch. We can do everything with fetch method, what we did in our object's method. Similarly, we can create crude application, which server? If you want to insert data in a server, then you can. Similarly, we can update, read, and delete data. It is quite fast as compared to XML HTTP request, and also it is very lightweight. Let me show you this index. First we need to type fetch method, fetch, then use round brushes. Then you need to provide the file, but it may be just some file, txt file, PHP file, or maybe Python file, or any kind of server side language file path. And visibly our fetch method return a promise and we already learned about it. When we return promise, it may be successful, either fail for success, we use then function with promise. Similarly, we're going to use then function with Fitch, as I told you during promise method. When we use the function, we do our further or in it. If our fist returns successful, we do our further work inside the then function. But the strange thing is this then function returns another promise. So once again, it written the function in set D, then function, we create another function, something like that. And this function going to receive response from server, whatever data or URL returns. We said this data in our response variable. In our case, our variable name is function, but you can take any name of IIT. I take response because we receive response from the server and also enumerate print this response in our document. We return our response, something like that. Return response. And they're using dark data. That is not a function or method, determines what kind of data we received from the server. It may be text format or it may be JSON formatted. If it written text, then we use dot txt. And if it return JSON, then we use dot JSON and we send this data in another then function, something like that. You can see once again I use the int function. So whatever our first then function return, we use it in our next function. And you can see in our new then function, we create another function. Similarly we can create another video. We'll name result. So we are going to use our final result in this function if you want to print it in your console, yes, you can. And similarly, we can use it in our dopamine. So this is our success part of our promise, but we need to also handle this failure per. Suppose, whatever we've seen in our URL, there is an error in our code. Otherwise, the file does not exist in our server. In that case, it's written error and we already know to handle this error, we need to use catch function. So I'm going to use the same cash method, something like that. Dot catch inside the catch. We need to create a function. Then you can take your own variable name. In my case, I use arrow. Then you can print the error in your console. Otherwise you can print this error in your estimate structure. Our fish method work with server. So always we need to use Live Server. And if you know PHP, then you can use XAMPP or web server. Otherwise, you need to download the extension in your code editor. So I recommend you to use Visual Studio code editor. Here you can see I opened my wave editor and I create a STL file, index.html. And I open this file in my browser using web server extension. And I'm going to open my console in my browser. In this video, we are going to read a text file using fetch method. And you can see in my directory, I create a folder named contain an inset, this content folder. I already created a text file. And in this text file I type some dummy text. So I want to read these text file in our HTML page. For these, I'm going to type script tag inside our body tag. And now I'm going to use our method Fitch. And inside the curly braces who need to provide the path of our text file contain slash, takes dot TXT. Whenever this file cin data, in response to retrieve this data, we need to use the function dot, then inset down resists. I'm going to create another function, will receive our response in this function. So I'm going to create a variable named response. You can take any name for this variable. But the fact is we work on ES6 version, so we can use arrow function. So I'm going to convert this function into an arrow function. First I remove function keyword, then I use arrow sign inside the curly braces. Whatever response we get from our server, we'll just return. But first I want to print in our console what we get from our server console.log inside the round braces response. And if I said this file, you can see my console. We get a lot of things. Process server as a response. You are ill body header status code and we already know if our server's response is successful, then our status code would be 200. These are not very useful information. We just want to access our main content, our file written text. So we need to use another method to retrieve the text response dot text. And if I save this file, you can see my console or promised it fulfilled. And our promise result is our texts contain. So our main function return a promise. And now I'm going to return the text because our den function return a promise. And now I'm going to create another function, utter disdain function. So I'm going to copy the function. And I'm going to call this function right behind on this function. And whatever our first then function return to store this value. I'm going to create another variable in our new then function data. And now I'm going to print this data in our console, console.log inside the round versus data. And if I set this file, now you can see in my console, it print our exec contained. What do you want to exist from our server? What do we want to access process server? Not only that, we can print in our browser, document.write inside the down resist data. And if I set this file, you can see my browser. It print the file data in our browser, and we can make our code more smaller. Basically, we use arrow function, so we don't need to write return statement for this. So I'm going to remove it and make it a one liner. And we are going to follow the similar stuff for a second then function. And if I set this file, you can see the same result. If we use fetch method in our arrow function, then just only to write one line of code to retrieve data from the server. Harrowing retreat normal text from our server. Now I want to retrieve JSON data from server. For these, I'm going to use fake data. So I open a new tab, fig JSON data. And I'm going to use this website, just some place holder. You can use any website. But most of the time I like to use this website. And if I scroll down little wheat and the hair, you can see how we can use fig JSON data with Fetch API. And if you scroll only till wheat, you can see some JSON resource. And this time I'm going to access user data. And if I click on it, you can see 10 users data. You can see their name, their ID, their email, their addresses. It's a fake data. So I'm going to use these data. You can see in my browser this JSON data is well organized because I use JSON Viewer extension. Maybe in your reserve, it is not well prettified. So I suggest you download this extension and I'm going to copy this URL. And I'm going to replace our local file path with this URL. So now we turn to exist, it just inFile. So we need to use response dot JSON method. And I want to print out JSON file in my console, console.log inside the parentheses data. And if I said this slide, you can see my console. We get 10 record as an object. And if I open it, you can see the same information. Name, username, email, user address, user phone number, user website, etc. So using API, we can retrieve JSON data. And if you work with PHP file, similarly it provides JSON data. And as I told you earlier, when we run fetch method, it's not mean it's always returns success. It's also can return a 0 if i not available in server. Sometimes I run naught response to resolve this kind of problem. Use cash method. So I'm going to use dot catch. And we already learned about catch in our previous videos. Inside the dome Russes. I'm going to take a variable name. And I'm going to use arrow function. And in my console I'm going to print our error. If I said this fine, you can see my console there is no error because our request or successfully. But if I change the URL path and I'm going to remove you from user. Now there is no final name. Ser is in that server. And if I save this file, you can see there is an error. You don't get any proper message, but just it show 404 means fine, not found. And if I show you the network section and you can see the final name, SER is status 400 four typhus, which and also you can see size n response time. And now I want to print this data in our document means in our browser. For these, we need to use forming loop. So I'm going to remove this console.log section and I type curly brace inside the curly brace. And I'm going to use for-in loop for INSEAD their own Russes version a in data. Then inside their own resists document.write a. What do you think? Is it going to print all the document at once? No. Let's run the code. You can see it printed ten numbers, 0 to nine. And once again, I'm going to show you the console, console.log data. And if I run this code, you can see my console. Oops, I give some silly mistake. We need to write this console.log section outside the for loop. And if I run this code, you can see it's written and object. But inside the object there are ten more objects, 0123456789. So we need to print their values to get proper result. To retrieve this value, we're going to use a variable value. It means object CHI. So inside the round brushes I'm going to type data. And inside the viruses, I'm going to pass the key variable. And if I said this file, you can see in my browser It's sprint object, object, object. Because there are more object inside this object, we cannot print object like this. We need to define exact object key. Suppose I want to print object name. So instead the document.write function, I'm going to use template string method inside the back ticks, dollar sign and curly brace. And I'm going to pass data n square braces. And then I use B attack for break the line. First I declare our index, then we need to declare our exit key. So I type dot name. And if I said this file, now you can see my browser, all the username. And if you want to print user email with their name, I'm going to type dash, dash. And I'm going to do to get the school. And they replaced them with their immune. And if I save this file, now you can see in my browser it print username and their e-mail also. You can see my console. Similarly, you can use all the key to retrieve particular data. And you can see inside the opposite 0, there is another object, name, address. And now you decide to print user city from the address. In that case, first unit to use address, keyword dot address. And once again, you need to use dot to specify the exact query. And I only want to retrieve city from the address bar. So I type dot city. And if I save this file, now you can see in my browser it print username with their city. So in that way, we can print data in a table. If you notice, heroin, retrieve JSON data from online server. And we also retrieve JSON data from local file. Let me show you the example. If I show you my current working directory, you can see there is the folder name contained. And inside the content folder, I already create a JSON file, names to the main.js and an inset this JSON file, I already insert some data, student name, student age, and their city. And now I want to repeat this local data using Fetch API. So first I'm going to change our file path contained slash or filename, student dot JSON. So first I'm going to stop this for loop. So I'm going to comment out this because keys different. First, I want to show the data in our console. If I save this file, you can see my console. We receive to data. And you can see our student details. And our keys are name, age, and city. And if you want to show the data using for loop, and once again, I'm going to enable this for loop. And I don't need to address section, so I'm going to remove it. And I just want to print student name and their city and even save this file. You can see the result in our browser. It print student name and their city. And if you want to show dynamic illnesses on your browser, you can. Instead the cash method, I'm going to type document.write can't fetch data. And I'm going to change our file, but I'm going to remove is from student. And if I save the file, you can see in my browser it print our catch function message can't fetch data. And if I show you my console, you can see is print 400, four minutes fine, not found. So I hope now you understand how it's org. In this video, we are going to learn how can we insert data in server using Fetch API. For that, we need to provide server-side file, but maybe PHP file, python file or dotnet file. With that, we pass some parameter. So I use comma and I use curly braces. And inside the curly braces, we use some properties and they have some different values. Our first property is method. As I told you earlier, we have different method to retrieve data and sin data. And if you want to insert data, they don't need to use post method. But for Jason, we have some more method. Why do we need to insert data to our server? We need to use post method. But if you want to update server data, then you need to use poop. And if I want to delete server data, then we need to use delete method. And you just want to read data, then you need to use GET method. And thens come our second property, which is body. Inside the body, we pass those data, which we have to insert. In our server and it can be different, maybe a stable from data, JSON data, or takes data. And then we need to pass our header. We need to declare the formate. However, we want to send data to the server through the body. I just want to say Content-Type. For these, we need to type a keyword content type. And then you need to type application slash data format. In our case, JSON, it's mean whatever data we seen from our body, it's a JSON formatted data. Suppose we don't want to send JSON data. I wonder send estimate from data. In that case, we need to use different content type. Application slash x hyphen www hyphen, sm hyphen URL encoded. If you want to send from data directly, then you need to use this method. So let me show you the practical. And now I'm going to insert data to our server using Fetch API. And you know, we don't have any real database. So I'm going to use fig JSON data. So I'm going to use our old oocyte named Jason place holder. And if I scroll down a little bit, you can see, you can see a link named guy. Inside this link, you can get the code that you can use to send data to server using Fetch API. If you want to read data, then you need to use the school. And if it's cold own little wheat, you can see an option creating a resource. So using this code, we can insert data in our live server through Fetch API. And you can see the header content type, method post, and you can see another function named JSON dot stringify. What is the meaning of B? However, data we get from our user is a JavaScript object and we cannot save JavaScript object directly to JSON file. So we use the function JSON dot stringify. It, convert the JavaScript object into a JSON data. And we already know, if we tried to say in JSON data, then you need to declare our content type application json. So I'm going to use this whole cold. So I select and copy it. And inside this script tag, I'm going to overwrite the code. So using this file, I'm going to insert new data to our server. And you can see our silver, but in our URL section. And either save the file and back to the page. And you can see in the console it written the data. What do we insert in our server? You can see ID1 001, title if w and user ID one. This is the response for server. It's a dummy data, so it's not going to save permanently. But this is the exact method we should follow when we try to insert data in server using Fetch API. It's a fake data. If I change the title, hello world and save the code, you can see an error in our console. It is not 400 four. This offset provided AMO file. So we cannot add different data to their server. We can use this wave settling for practice purpose. But if we use our own PHP code or any other server side language, then we can save the data in that server. Not only that, you can create the object outside the body tag. Let me show you. So I'm going to copy the object contained. And outside the Fetch API, I'm going to create a variable var OBJ. Obj equal to, uh, create a JavaScript object using sim key and value. And inside the body section, I'm going to convert this JavaScript object into a JSON data. So JSON dot stringify inside the Congress's OBJ. And if I said this file, you can see the response in our console. So I hope now it's clear for you what is fetch method and how we can use. And if I back to the JSON placeholder guide, you can see updating resource metal just you need to change your method name foo, and you need to follow the similar step. That's it. And for delete data, just unit to use delete method. And in your URL, you need to provide the exact index number. You can see post slash one. I hope you enjoyed this video. Thanks for watching this video. See you on the next tutorial. 21. Async Tutorial: Hello friends, nice to see you back. In this tutorial, we are going to learn two new features of JavaScript as scenes and await. Let's try to explore what is as things function as we make normal functions. In our case, taste. If I type a stinky word before the function keyword, then it will becoming a scene function. But the cosine is, what is the difference between a normal function and the cosine function? A scene function always return a promise. And we learn about promised in our previous videos. And we know promised return two type of function, result and reset. Based on these, we do our further work. If it resolves, then he call then function and if our promise is rejected, then automatically call catch function. So our function works like promise, it may be resolve or reject. Similarly, we can call the function for resolve and we can call catch function for respect. Now the question is, why do we use the SUM function? Since we already have the promise method? If you remember, there is a little complication in our Promise method. Every time we need to declare reserve or reserve function in promise result, this kind of complication, JavaScript introduce a scene function. It is very easy to operate. Just unit to type async keyword before the function keyword. And you don't need to change in your function. And I want to tell one thing, our promise function introducing JavaScript ES6 version and a cosine function introducing JavaScript ES 2017 version from hair. You can understand why JavaScript introduce a scene function. The answer is simple to result promise complication. All the things that we could do inside the promise method we can do in a scene function. So without wasting your time, Let's get to the Visual Studio Code editor. Here you can see side-by-side, I opened my Visual Studio Code eater and I open my browser using Live Server extension. And they already created STL file name index.html. First I'm going to create a script tag. Inside the script tag, I'm going to create a normal function, function taste. And this function going to return a string, hello world, let's call the test function. And I wanted to call this function in my console, console.log inside the parenthesis test. Let's save the file. You can see in the console it print hello world. There is nothing new here. It's basically a normal function. Let's convert the function into a cosine function. For these, we need to type a async keyword before the function keyword. Now this is not a normal function. This function only work on asynchronous mode means in our background. And if I save this file, you can see my console. It return a promise. You can see Admin console, promise result, helloworld, promise state fulfilled. So now it's here for you. If we use async keyword before the function, it should return a promise and we already know we can use then our catch function with promise. Let's see. So I'm going to comment out this line and then I'm going to call this function test. In our cosine function, we don't need to use result or is it function? We can directly call the main function. And inside the then function, I'm going to create an arrow function. Whatever this function return. And if it runs successfully, Our then function called automatically. And instead the then function, we can print our return value, console.log inside the parenthesis result. And we need to create the result variable as parameter to store will result. You can take any name. And if I save this file, you can see in the console it print hello Are, there is various methods to create a scene function in JavaScript, we can create a scene function with normal arrow function. Let me show you. First I'm going to take a variable named taste, late taste equal to. And this is our f function. So this is another way to create a scene function. If I save this file, you can see my console. It's written helloworld, its mean, its work properly. And if I wanted to fitting in arrow function, yes, I can. For these, we don't need to type function keyword. And then I use equal to n greater than sign. And you know, if there is single statement in our arrow function, then you can delete these curly braces and we can make it one-liner. And also we can remove this return keyword. And if I said this file, you can see it's sort properly. So you can see how small our function has become. Let's try to understand what is accurate method. 22. Await Tutorial: Hello, you can see once again, I opened my Visual Studio Code editor and my Chrome browser. And I already create an async function named taste, which is empty. So first I'm going to print a statement outside the function console.log inside the parenthesis, one colon message. It's mean, this is our first message. Here. We are going to understand however IT function or and I'm going to copy the same message and paste it inside the function. And I'm going to duplicate it to time. And also I'm going to change their ID 2, 3, and 4. So first it going to paint our message one statement. Then it going to call our function taste, which is the ES6 function. Then it print out three statements inside the function. And once again, I'm going to print in our console and other messes, messes file. If I set this file, you can see in my console it print all the messages serially. Message one, message two, message three as, as four masses 5, from 2 to 4. They are all from a scene function. And now I'm going to type Everett method. Before the message three, I already told you what is the meaning of await, wait, and complete the job until this work is done, complete our, another work didn't return to our EBIT function and check, is it finished or not? If finished, then it print messages for. So I'm going to save this file once again. And you can see it's changed our sequence. You can see first it print messages one. Then I call our function taste, which is a cosine function. So it print his first statement, two. Then it print, it messes when masses three. But I also declare our function to wait. As long as it is waiting, the message outside the taste function will be printed. So after three, it Sprint 5, not full. As soon as the job is done, It's came back again to check is it worked properly or not? If it works properly, then print messages for. So in that way, our EBIT method or in our ethene function, if we try to run aerate method without asking function, then it's returned arrow. And now I'm going to show you what is the actual use of aerate method, where and why we use aerate method whenever we tried to face data from the server, then we need to use that method. So here I'm going to use method and we learned about it in our previous video and hair, I'm going to fetch a JSON data, and I already created JSON file in my current working directory. Let me show you. Here you can see I create a folder named contain. And instead this folder, you can see a JSON file name student dot JSON. And we have three records in our file, name, age and city. It suggests and form it. Also you can retrieve fig just on data from a website, let's say only for testing purpose. So lives back to the index.html file. And now I'm going to use the fetch method. So first I'm going to create a variable and I'm going to remove this line, Kahn's response equal to fetch. And instead the fetch method, I'm going to pass my URL contained slash student dot json. So before this fist function, I'm going to use our method, await its mean. I told my function to wait and fetch the complete data from our JSON file until the process complete, it's run our next codes. As soon as all work is over, it's returned to the exit function and continue with next lines. We know our fetch method, return a promise. So I'm going to create a variable. But first I'm going to remove this line. Cons student equal to. And once again, I'm going to use Everett method response dot JSON. And we'll learn about in our previous video, basically our fetch method, return JSON or text format. So in response, we get JSON file. So we need to use dot JSON. And I'm going to return all the data which I retrieved from the JSON file, written student and a return student view. And we know our async function, return a promise. So first it's going to print the message one, and then it's going to run my function taste. It's the async function. So it's going to print message to. After that, we are asking to wait here up to our first function. I'm going to print another message, masses three. And also I'm going to create a variable for our function call late x equal to taste. And I wanted to print this response in our console. So I'm going to type console.log inside the round braces x. Let's set the code. You can see in my console. As you can see, first it print message one. And then we call our function test. So it's print message to. And then it told me to wait. Here, I'm going to fetch data from server. It's jumped out of this function and started working on masses for. So you can see me console section, it print for up to two. And when Mrs. Ford is complete, we call our x variable. So it's going back to the cosine function and it get a response from server. And you can see it print our response as a promise. And you can see we have two array in our promise. And our promise is fulfilled after complete the promise section ten, it print our masses. Three. In that way, we use a think and Everett method with our fetch function. And now I'm going to remove all the extra messages. So I'm going to remove all the console section. Now it's looking pretty simple. First two generic function for our fish content. It will keep waiting until the data comes from the server. And we told our response to wait once again. So I use another method, then we return our result. If I save this file, you can see my console. As a result, we get a promise. And we have two array in our promise because in our JSON file we have tourism. And as you know, we can use the in and catch function with promise method. So first I'm going to remove the console section, and also I'm going to remove this variable x. So first we call our test function. If it return promise successfully, then we are going to use then function. And inside the then function, I'm going to create a arrow function. And also I'm going to create catch method upload that dot catch inside the parentheses. I'm going to create another arrow function. If there is an error in our function, then automatically it run catch function. And now I'm going to save student record in a variable. And our variable name is Ari is data means response data. And I'm going to bring this value in our console. Console.log RE is data. And if there is an error in our code, our cash method going to print another message, error message. So I'm going to create another variable error. So the error function, I'm going to print console.log and r2. So first we call our cosine function test and it return a promise, a promise is fulfilled, then it run, then function. And if there is an error in our function, it automatically run catch function. And if I set this file, you can see me console, it returns an array. And if I open this array, you can see it provide JSON object. And if I change file path, so I'm going to remove is from student and said this file. You can see in my console it print an error for 0 for inspiring not found. So it run our catch method and print the error. Now let's see how we can convert so many lines in a one line. I just want to make it a one-liner. So first I'm going to comment out all this line. Mainly we are focused on fetch an accurate method. So I'm going to return inside the parentheses. I'm going to call a witness. And I want to return JSON format. So I use dot JSON function. So we make it a one liner. If I save this file, you can see in the console, similarly, it return an array and we have two JSON object inside this array. So here you can see I convert three line of code into a one-line. Let's talk about our last topic, Error handling. Basically, we handle our error using catch function. There is a drawback using catch function. When we call test function every time we need to use cash method to handle the error. So I don't want to use every time. So there is a shortcut to handle it. So I'm going to uncomment all the lines and comment out this returns section. Basically we use trier catch to handle this error. So inside the function, we use try catch block. In our next video, we will learn more about try or catch. Inside the try block, we type our whole code. So I'm going to move this code inside the try block. Its mean, we are trying to school. If it weren't properly, then it return. And we can access these then function. And if there is an error in this try-block, then it's automatically run catch block, and inside the catch block, we print our error. So I'm going to move this error message in this block, and I'm going to remove the cash method. And also we need to declare the error variable, instead the error block. So whenever we call test function, then we don't need to type catch method to handle the arrow. And if I set this file, you can see in the console we can access our data successfully. And if I create an error inside my function, so I'm going to change the responsibility. Rd is doubled to PO NSC. And you can see there is no variable Nim risk 22 points. And we know it's going to return an error. In that case, it will run our catch block. And if I save this file, you can see an error in my console. It prevent reference error. Risk 22 points is not defined at taste because we do not define this variable in our function and also print another message is undefined. So you can see how we can handle error using try your catch block. It is pretty similar. We'd try except condition in Python. If there is an error in our try-block, then it automatically jump to the catch block and it print our error message. And I'm going to resolve this problem and save this file once again. And now it's worked pretty fine. If you want to print this result in your Documents section, you can you can use for loop for that. So I hope now it's clear for you what is asking and Eric method and how we can use it with our fetch method. Thanks for watching this video. See you soon. 23. Advance Javascript Symbols: Hello friends, nice to see you back. In this tutorial, we are going to learn about symbol. We already know about datatype in JavaScript, especially we have seven type of datatype, string, number, Boolean, array, object, null, and undefined. But a new datatype has been added to this list, which is symbol. And in this video, we are going to learn about symbol. But before we learn about symbol, let's take an overview to our old datatypes. Suppose I have a variable named a leafy assent is variable. And inside the double quotes or single quotes, if I provide any value, then we call it a string. And it doesn't matter. Is it alphabetic or numeric? It's been a data type is string. Similarly, if we assign a numeric value without quotes, then we call it number datatype. But if I provide poor false without condition, it's mean, it's a Boolean data type. But if I add multiple value in our a variable, then we can use array data type. For this, we need to use square braces and then we can use multiple value. But if I want to add key envelope prayer, then we can use object datatype for and if I assign null to this variable, then we call it null data type. And if we do not defend any value to this variable, in that case, we can call it undefined. I know if you are in this course, you already know about it. Just, I want to revise once again. But in this video, we are going to understand a new datatype for symbol. When you want to use symbol datatype, you need to take variable and you need to assign with the symbol method. And remember, S should be capital and we need to use round versus after that. And instead this symbol, we can place any value. It may be numeric value or StringBuilder, something like that. And we call this string symbol identifier or description. And it's always a unique value. I wanted to say we cannot assign the same value to other symbol. Suppose I take another variable, b, and I'm going to provide the same value. As you can see, a and B variable below is same. Maybe you can think their value is same. So if we try to compare them, it should return true. But this is not going to happen. If you compare this two variable, it's written faults. They are villi looks him, but they are not same because symbols are unique. And if we try to compare it, it read and false when you need to use unique value to our pogrom. In that case, we can use symbols. So let's start the practical and try to explore more about symbols. Here you can see I opened my Visual Studio Code editor, and they also create a stable file. And I open this STL file using Live Server extension in this browser. First I'm going to type script tag. Inside the script tag, I'm going to create a symbol. So I'm going to create a variable. Late. Id equal to S should be capital symbol. Let's bring this symbol in our console. So I'm going to type console dot log inside the parentheses ID. If I save this file, you can see my console. It print. It's a symbol. And I'm going to assign an identifier to the symbol. So I'm going to type hello. It may be string, maybe number, whatever. And if I said this file, you can see me console is print hello. And if I show you the datatype, so I'm going to duplicate this line. And I want to print type of ID. And if I said this file, you can see it's 3D symbol. Symbols mean one unique value. Let's try to prove it how it is a unique value. So I'm going to duplicate this line and change the name id2. You can see looking sim, and they are always Sim. But if I compare this two variable, it's written false. Let's compare it. Id equals 3 goes to Id2. If I save this file, you can see it written false. Its mean, these two variables values are not same. It's look pretty similar, but it is not same. But if we use string, let me show you that. So I'm going to duplicate this line and I'm going to change the name is TR one and STR 2. Now they are string NOT symbol. So I'm going to remove this symbol keyword. And also I'm going to remove this one. And now I'm going to compare this to value. So inside console.log section, I'm going to type is T, R1 and STAT2. And I'm going to comment out this one. If I save this file, you can see it written true, because in that case they are not symbol, they are string. And two variables values are same. They are not unique value. One thing, remember, we cannot use symbol value directly in our document. Let me show you that. So I'm going to remove this lines. I don't need this lines for now. And also I'm going to remove these lines. As I say, we cannot print symbol value in our document if I tried to print. So I'm going to use the LR, LR inside the parenthesis. I'm going to print id. If I run this code, it is written error. So I'm going to save this code. And you can see TIE Fighter. And also it print cannot convert a symbol value to a string. If you want to convert symbol, we'll interesting, then you need to use some method to convert symbol value into a string. Let me show you that. So we need to use toString method, id dot toString. Using this method, we can convert symbol variable into a string. If I said this file, now it's sort of properly. You can see in my LR symbol hello. So we need to use toString method to convert symbol into a string. And then we can use this symbol value in our document. And if you want to see the exact value of symbol, then you need to use a different method. In that case, we do not use toString method some to remove it. And I'm going to type id dot description. It's not a function, so do not use round resists. It is just a simple method. So if I said this file, you can see my alert section. Now it is just print Hello means our message. In the next plot of this video, I'm going to show you how can we use symbol into an object. Hello friends, nice to see you back in this video, we are going to use symbol inside the object. So I'm going to remove these lines and I'm going to create a new symbol, late h equal to symbol. For now it's empty. And then I'm going to create an object. So I'm going to take a video of a limb for object late user equal to inside the curly braces. Here I'm going to create the object. And we know we need to use Anki to create an object or first object keys name. And its value is add one. And our second object is class, and it is class tin. And now I want to use this symbol as a key. In that case, first only to use square braces. And then we need to type symbol variable h and we need to provide value. So I'm going to type 25 is a numeric value. When do we need to use symbol as the key inside the object? Then you need to use square braces. And inside the square braces, we need to provide symbol variable. Let's try to print this object inside the console. So I'm going to type console dot log inside the parenthesis, our object name, user, user semicolon to end this line, if I save this file, you can see in my console, it's print the object for our first video, it's spring named second value, it's spring class. But for our third value is Sprint symbol. And we do not provide any discretion to our symbol. If you want, then you can as a symbol value, I'm going to type H. If I said this file, this time it print symbol H. And there is another method to use symbol in our object. So I'm going to remove it. And also I removed this coma. And now I'm going to use this symbol in this object. So outside the object, first I'm going to type object name, user. And inside the square braces I'm going to take symbol variable name h equal to, and I'm going to assign a value 23. So this is the another way we can use symbol with object. So if I save this file, you can see my console, it print out proper value. And as you know, if you want to see the exit value of any key, you can just even need to type user dot plus. If I said this file, you can see it's written the exit value plus 10. And if I want to show the symbol value, we cannot use this method. Let me show you if we try. So I'm going to duplicate this line and I'm going to choose this variable name H. And if I said this code, you can see it prints undefined. Plus is our key, edges is our key. But it worked with class. Then why it is not work with H? If we want to show exit single value, in that case, we don't need to use dot. We need to use square braces. So we need to move this variable inside the square business. If I said this quote, You can see now it's returning the result. So you need to remember for normal data type, we can use dot, but for simple data type, we need to use square braces. As you know, we can print every object, key, or value using for-in loop. So let's use for-in loop and tried to print every key in our console. So I'm going to type four inside the parentheses. Lit key. In user. It wasn't means our object name. Then inside the curly braces, console dot log inside the parenthesis key. If I run this code, it going to print student name, username, user class, but it is going to skip, usually is because it is a symbol. So I'm going to save this file. Now you can see my console, it print name class, but it doesn't print H key. So it's sprint only two key name in class. But if I duplicate this line and try to insert another key name gender, and his gender is male. So I'm going to type mill. If I set this file, you can see it print 3D from our object named class and gender. But it scape H key because it's a symbol. So we cannot use symbol inside the for in loop. And you need to remember it always. And you know why we use JavaScript object. Because we'll convert JavaScript object into a JSON object and tried to send data to the server. And if I tried to convert this user object into a JSON, once again escape this value. Let me show you this. You can see we have four value in our object name class, age and singer. So first I want to remove this. I don't need this for loop. And now I'm going to convert this object into a JSON file. So I'm going to use console dot log inside the parentheses, I'm going to use JSON string. You read method JSON dot stringify. Inside the parentheses, I'm going to provide our object name, which is user. If I said this file, you can see it return a JSON object. But if you notice edge value is missing. But if I just print this object in our console, let's see. Some remove this parenthesis. And if I said this file, you can see, you can see my console symbol will. But in my JSON object there is no single value. So you need to remember whenever we use Symbaloo in our object, a cannot use this value in our foreign loop. And also we cannot convert this into a JSON object. And if you really want to convert it, then we need to convert this symbol value into a string. As I told you earlier, we use a description method to convert this thimble into a string and then you can convert it into a JSON object. We do not directly convert symbol into a JSON object. So basically, this is our new datatype. Symbol. Symbols mean unique value. It is rarely used. I hope now it's clear for you what is the multi-layer type. Thanks for watching this video. 24. Iterators Intro: Hello friends, welcome back. In this video, we are going to learn about iterators. Suppose I have a variable and we store the array in this variable. Our variable name is a, and I save different types of animals name in that array. And now I want to tie overseeing ADA will one-by-one. And we can do it very easily using loops like while loop, the while loop for loop for loop, partying. For each and map. Help of these loops, We can try reversing these Arabella traversing mean travel to cow. We can travel to dog. Then you can travel to cat. If we want to print their value, we can, and also we can use it anywhere else. If we want to try, we're seeing this for loop. Then you need to type four inside the parentheses. We need to declare a variable, and we need to assign this variable with 0 because our array index start from 0. And then you need to check if I is less than adapalene, then print this message. And also we need to increment each one by one. So we type I plus plus, we already know about it. Similarly, to get the same result, we can use while loop. So I hope you already know about it. So all the loops are used for traversing, but a new name has been added to this list. With the help of iterators method, we can traversing this era of a loop. But the cushion is we already have lot of loops to do that work. Then why we need to iterators? What is the difference between iterators and other loops? We don't have a complete control with other loops. Once I run this loops, it going to print all the value of our array. Otherwise, we need to use IEP condition to extract exact value. But in iterator methods, we have full control of drivers seeing we can print whatever value we want. Suppose first I'm going to print our first animal, cow. And then I type other line of codes. And now I want to print the third value cat. In that case, we can use iterator method. So let me show you the basic syntax of iterator function. Suppose I want to traverse this array. So first we need to take a variable, and then we need to use a JavaScript function, single.php iterator. And we learn about symbol in our previous video. Symbol is it unique datatype? I iterator means I want to Trivers all the value from this array. So using this method, we can assign all the revenue in V variable. And then if we want to print any value, just want you to type next method, B dot next. It's going to print the first value up at a cow. Similarly, if I wanted to print their next value, dog and cat, who need to call the same function once again, b dot next. For our second call it written dog, and for our third call it return cat. The main benefit is if I print our first value, cow, then we can do our other lineup quotes. And now I want to print the list animal, cat. Then we can do it very easily using this iterator function. Not only that, we can use iterator which stream, and also we can use it with objects. So let's start the practical and tried to understand what is iterator. 25. Javascript Iterators Part1: Here you can see I opened a WAV reader, Visual Studio Code editor, and a creator STL file index.html. And I open this file in my browser using Live Server extension. First I'm going to type script tag. First. I'm going to create an array inside the script tag, late num. And inside the array, I'm going to add numeric values. And I'm going to type going T, 40 and 60. And now I want to print this value in my console. So I'm going to type console dot log inside the parentheses, our variable num and semicolon. To end this line. If I save this file, you can see my console, it print our array. And if I open this array, you can see an option protocol. If I click on it, you can see some methods. These methods are all related to area. And if I scroll down, retrieve it, you can see a function single.php iterator. So I'm going to use these one. Using these, we can travel every value in our array. Means we can iterate our values. So let's do it. So I'm going to check this function inside my console. But first I'm going to type typhus. And I'm going to use this function with num array. Then inside this Kerberos is symbol dot iterator. Here I'm going to check the new function type. So I use typeof. And if I save this file, you can see in my console it print is a function. So using this function, we can iterate our array for these first going to take a variable. So I'm going to remove this console line. And I'm going to create a variable late. And our variable name is ITER. And obviously we don't need the type of function, so I'm going to remove it and upload the square root is, is we need to use round brushes. Means function sign because it's a function. And I'm going to call this function here. And whenever I call this function, it's going to store the value in this variable. And I'm going to print this value in my console. Console dot log inside the parenthesis, iter and semicolon to end this line. And if I said this slide, you can see it return an array. And if I open this array, you can see, and if I open this put option, you can see a function f. Next. Next is a function. And using this next function, we can read every value in our array. So let's do it. So after ITER, I'm going to type dot next and also need to type around resist because it's a function. So using this method, we can print our first value. And if I said this file, you can see it says return an object and we get a two key. First one is, the second one is done. In value. We get our first value 20, but in done its return false. What does that mean? It's mean when we use iterator. And if we print an array inside this function, and if there isn't inside this array, every time it's going to return false. You can see after 20, there is another value for p, r i delta function. Know that, that is another value after 20. That's why it return false. Let's call this function to time. So I'm going to look at this line to time. And if I set this file, now you can see in the console, and you can see it print out value, then it prints false. And one secondary print our third value, and it prints false. But if I call this function once again, and if I save this file, you can see our Willie's undefined. You can see there is no fourth value in our array, so it's spring undefined. And inside the done, it's written true because there is no value left to print. So it's written true. And remember, we have full control on it. Suppose I want to skip the first video in our areas. So I'm going to remove this console.log section. And if I said this file, you can see it keeps our first value and it print our second value, 40. And I'm going to remove this line for now. I don't need this line. And if we wanted to scale our second value, then to remove this line, and you need to call this function once again. And if I set this file, you can see it print out third video only. So whenever we call the next function, it's going to iterate the next value from our array. If we use first-time, then is going to iterate our first value. And similarly, if we call this function once again, they need going to iterate our second value. So you have total control on it. And if I pinned messages between them, so I'm going to type console dot log. Inside the parentheses. I'm going to type the string hi and semicolon to end this line. And I'm going to duplicate this line port time. If I said this file, you can see my console. It's not going to affect our iteration. So the benefit is whenever we check the iterator value, we can. But if we use for loop or any other loop, obviously they don't need to print all the way at once. But using iterator function, we can use any value when we want. As you can see, it's the general object value. And we get two key from IT, value and done. And if we want to see the value directly, yes, we can. So I'm going to remove all of these. And upper next, I'm going to type dot val. And if I said this file, you can see it directly print out value 60. It's the object. So we can print their value using the method. Similarly, we can check done key property. If I duplicate this line and change DOT done. And if I set this file, if certain true. Why it's written true, because we call our next function for time. And there is no fourth value in our array. That's why it's written true. And if I remove any function and then save the file. And you can see this time is written false and it returns false for our third iteration. Suppose if we have 300 value in our array, then obviously we need to create a loop for that. We can create our own loop. Otherwise, we can use a do while loop or a while loop. So let's see how it's work. We don't need to change anything. And I'm going to store this value in a variable. So I'm going to tie late and our variable name is result. And I'm going to remove this line. And I'm going to create a while loop. So I'm going to use a while loop. And I run this while loop until the W1 property return true. So inside the parentheses, I'm going to type not result dot done. It's run the while loop until the value is true. So I used NOT operator. And inside the loop I'm going to print the value. So console log inside the parentheses. I'm going to type result, torque, value and semicolon to end this line. So in that way, we can print out all the value in our console. And as you know, we need to increment our while loop to get the next result. So I'm going to copy this line and I'm going to paste it here. As a result, it's going to iterate our next 40. So if I save this file, you can see in the console it print out all the Vedas, no matter how much will we have it going to print all the values. So in that way, we can use iterator function inside the while loop. And also we can use this iterator function, which string or object. So in the next part of this video, we are going to see an example with stream. Thanks for watching this video. 26. Javascript Iterators part 2: One second, I'm back to my Visual Studio Code editor. And now I'm going to run iterator function with string. So I'm going to duplicate this line. And I'm going to come into this previous one. And I'm going to assign a string value to this variable. So I'm going to remove this one and I'm going to type hello world. And I don't need to change anything in my code. So if I said this file, you can see in my console, it's been all the character. And you can see it spring to hear. Because after l, We need to use another L character for helloworld. That's why it's skipped one character. So we can print one by one character from our string and also each count space. So in that way, we can use iterator function with stream. In our last example, I'm going to show you how we can create our own iterator function. So first I'm going to remove this line and then I'm going to uncomment this one. Now I'm going to read all the values, but I'm going to use an iterator method. I'm going to create my own iterator. And I'm going to remove all these line. And here I'm going to create my own function. And our function name is number. And whenever I call this function, I'm going to pause these Adi. So I'm going to create the function named number. Function number, whatever value I seen as an argument to get the value, we need to create a variable. In our case, air means LA, because I'm going to pass array as an argument. So first inside the curly braces, I'm going to take a variable there. Next num equal to 0. For i iteration purpose, we need this variable because we know our first index of air is 0 and litter, I'm going to increment this variable and this function going to return a value. So I'm going to type return. And then I use curly braces. And it's going to return a function. And we can take any name for this function. So I'm going to type next. And in the next function, I'm going to return another value. And hair I create function instead this function. And inside the curly braces, I want to return, if you remember, our iterator function, return an object. And inside the objects each return value and done. So similarly, I'm going to return an object for keyword. I'm going to type video, and I'm going to return whatever array I gate. So I'm going to type a doubler. And inside the square braces, I'm going to increment this variable. So I'm going to copy this variable and paste it here. And I use, and I use plus plus sign to increment it. And our next property is done. And here I'm going to pass false. Now I want to call this function in my console. So I'm going to type console dot log inside the parenthesis iter dot, and our function name is next. So if I said this file is going to print our first value, 20. So if I said this file, you can see my console, it's written an object and its print out 20, done falls and always 20. And now I'm going to call this function three times. So I'm going to begin this line, Putin. And if I save this file, you can see my console. It print out three different venues. But if I call this function for time and save this file, it's returned undefined. But the problem is, but the problem is done written faults. But only to Rican crew as like our iterator function return. For these, we need to move this returns section inside the heap condition. So here I'm going to create a condition E and also I'm going to create else condition else. And inside the if condition, I'm going to check the w1 value. So inside the if condition, I'm going to type II next num value less than array.length. It's mean if next num value less than add Kotlin, then inside the if condition is going to return this result. And in our else part will need to return done true. So I'm going to copy this line and paste it here. And I'm going to remove this video section and said done with Lou, true. That's it guys. If I save this file, you can see, oops, I did some silly mistake. I type it wrong spelling for Lynn z th, if I said this file. Now you can see in the console for this three value, it written faults. And there is no fourth value in our array. So it's written to. So now it's clear for you how we can create our own iterator function. We basically use it if we want to control the iteration and if we want to just print the error value, yes, we can just need to type dot value. If I set this file, you can see the exact value 20. So this is our own function, which act like an iterator function. But as you can see, only to use multiple line up quotes to get the result. But if we use iterator function, then single line of code is enough to get the result. So in the next video, we are going to learn about generators. Thanks for watching this video. 27. Generators Intro: Hello friends, nice to see you back in this tutorial, we are going to learn a new future about modern JavaScript generators. Suppose we have a function named demo and inside the function and types and multiple statements like message one, message two, message three. Whenever we need to call the function, just need to type the function name, demo. And then it's going to print all the statement one-by-one in our console. But the problem is we have no control in this function. If I call this function, it's going to print all the messages. But I want to control all these tapes. When I need to print first messes, I can and when we need to print out hardness is only then I can do that. And if I want to print our first messes and authored Genesis, and I wanted to escape our second message. Then we can do eat, but we can do eat in our normal function. To solve this kind of problem, JavaScript ES6 version introduce a new feature, name generator. Generators visually a function just only to follow a different way to create it. When you create a function and take IF function name, we need to use star sign before the function name. Now it's a generator function. Now we can control all the statements inside the function. If you want to stop any statement, you can, but we need to use a special keyword name, something like that. It's mean bombs. At declare our function when it calls this function, is going to pause our statements. If we don't call this statement, is not going to be executed. Let's see how its work. So first, we need to call the function. We need to create a variable, and then we need to assign this function with this variable. You can see from our first statement, we use ie, its mean. From our first statement, we pose our code. If we want to see the message one who need to use next function, a dot next. We learned about it in our previous video. We can print this statement in a document or a console. It is up to you. And this function going to return a value, masses one. So this function going to print our first l value. Similarly, if we want to see the second value, we need to use next function once again. And if you want to see the third value, we need to follow the similar process we already learned about it in our previous video. Now you understand the benefits of using a generator. We have total control of our statements. So let's start the practical and see how it's work. And I'm going to show you different examples. 28. Generators Tutorial: Here you can see side-by-side, I opened my Visual Studio Code editor, and I also open my browser using Live Server extension. And I already created an STL file, index.html. So first I'm going to create a script tag. Inside the script tag, I'm going to create a normal function. So I'm going to type function. So I'm going to type function. And you can take any name for this function. I'm going to take gin for generator. And inside the function, I'm going to print two statement told dot log message one and console.log message to. So normally we can create our function like this. And whenever we need to call the function, just wanting to type function name, gin. And that's it. And if I said this file, and you can see in the console, it prints out all the statement message1 and message2. We have no control Harryette. To control this function, we need to convert this function into a generator function. So we need to use star sign before the function name. Like this. In that way, we can convert this function into a generator function. If I call this function, it is Don't going to print any messages in our console. Let me save the file. Here you can see it do not print any messages in the console because now it's not a normal function, it's a generator function. And if I said degenerative function into a variable, something like late a equal to gin and return this function in our console. So I'm going to type console dot log inside the parenthesis a. And if I said this file here, you can see it's written something. And if I open this dropdown, It's a generator. And if I open this janitor option is preferred some function. Next function and function throw function. So using this method, we can do our father job. Mostly, we use next function. So let's use this function. A dark. Next. If I save this file, now it's going to print out statements. Let's save the file. Here. You can see it being done messages, message1 unnecessary unless it print value undefined and done to its mean, there is no value after messes 2. But we already don't have any control in our lines. So we can use il function to control the statements. So I'm going to use in function upward this message one, ie. And I'm going to send a message ID number 1. And also I'm going to call this L function after Nessus through ELT number Qu. So when he called this function, it's going to print our first masses. Then you just run the ij, then it pause our code and stop executing other goods. So let me save this file. If I said this side, you can see it print out a message one, and then our return an object. And here you can see it's written to value. One is done and another one is bigger than 0 is false. And insert the value it written our masses it number one. And we already know debt. Why done we'll return false. Because there is another message in our function. That's why it return false. If there is no messages in our function, then incident true. We already learned about it in our previous videos. So now I'm going to call this next function once again. So I'm going to duplicate this line and sit this cool. Here you can see it's print our message to. And if I call this function three times and 75 is three times undefined. And in Danville, is return true because there is no third masses in our function. And if I remove all the code and also remove the message and then set the score, it's return undefined. It's mean if there is a no value in the industry done undefined. But if I assign any value, in our case m1 main message one, and then save the file. Here you can see in blue is written M1. Now I need my code back, so I'm going to press Control Z it, and save the file. For better understanding, I'm going to remove these messages. And if I said this file, and you can see is print L1 and L2. And if you get an undefined because there is no third value for a. So I'm going to create another field in our function. So I'm gonna do we get this line. And in number 3, if I satisfied, now it's return false. And now I want to print L1 and L3. I wanted to escape IL-2. So for these, we need to call this function outside the console. So I'm going to type a dot next function. And if I said this file here you can see is print L1 and L3. So in this way, we can control this function. We can execute any particular section using generators. And as I told you in my previous video, if you want to print this value directly, just unit to use dot-dot-dot. Value. And if I save this file, you can see it print. You can see it's print out messages directly. But what if we have 300 yield in our function? In that case, we can use for loop. Let me show you that. So I'm going to remove this lines. And I'm going to type four inside the parentheses, late value of a. Then inside the loop, console, dot log inside the parenthesis value. If I said this file, you can see my console. It printed out all the 0s, no matter how many easy-to-use in our function. And now I'm going to show you a new method, how we can use it in a different way. For these, I'm going to remove these lines. And I'm going to take a variable late result equal to I store it in a result variable. So we need to send the elite value for these. I'm going to remove this line and I'm going to type a dot next. So whenever I call the next automatically it called generator function. And I'm going to do bigger this line. And I'm going to pass the value 300. Now this value set to V IL value, and we pass the value in a result variable. And also I'm going to print this in my console. So I'm going to type console dot log inside the parenthesis. I'm going to use template string method. So I'm going to type backticks inside the back ticks. I'm going to type result, colon, dollar sign. Inside the curly braces. I'm going to pass this variable result and semicolon to end this line. So if I said this file, you can see my console. It's written 300. Basically, I'm going to sit individually outside to the function. In our normal function, we send value as a parameter. And then we create are going serve to set the value in a variable. And if I use a dot next function to time and send value as a parameter, it going to set the value as the yield value. Not only that, we can calculate our value, I want to multiply this value with tin star pin. So if I said the file, you can see my console, it written 3000. Not only that, we can send multiple values. So I'm going to do we get this line and I'm going to send four hundred and six hundred. But if I said this file, it going to return only one result because we use it only for one time. So I'm going to say this file here, you can see it's written our previous result, 3000. To get the result, we need to create an array. So I'm going to remove this line and I'm going to use square braces. And inside this square root is we need to type II. And we need to type it three times because, because we pass in our next function. So I'm going to type comma, comma E. So for 300 it going to use this one. And for 400 it, we're going to use these, again, E and 4600. It going to use party. So if I said this file, it's going to return an array. Let's save it. Here you can see it's written all the result as an adult form. But if I send another blue, so I'm going to duplicate this line. Here. You can see we just use three in our array, so it's going to return nothing. If I save this file, you can see there is no changes. And now I want to see the third il, value for these. We need to type for these just wanting to use square braces. And inside the service is we need to pass the air in number 2 because our air is start with 0. So for our third array, we need to plus 2. If I save this file, is going to return only 3600. So in that way, we can check particular individual. And obviously we can pass string value inside the next function. And now I want to pass single-view with field, And I also wanted to pass any value with E. So I'm going to remove this line. And I'm going to type in here, I'm going to type 44. And in our next field, I'm going to pass an array inside the square braces. I'm going to pass PHP comma, python, JavaScript. And now I want to read their value for these. I don't need this line. And I'm going to, and I'm going to move this line inside the console. So I'm going to type console dot log inside the parentheses. Inside the parentheses, I'm going to pass a dot next. And then semicolon to end this line. And I'm going to duplicate this line. Or first next function for our first field and our second next function for our second deed, which is an array. So if I said this file, you can see me console it, written our first value 44 and also intrude on our airy. And if I open this array, you can see it has three values. Php, Python, and JavaScript. In our generator function. When we use multiple eels, we can take single value, we can take array, and also we can use objects. So we can use any type of value within this time I want each Arabic blue came separately. So I'm going to use stuff sign here. So if I said this file, it going to return our first Arabic blue HB. And if we want to see the second era value, we need to call this function. Once again. If I save this file here you can see our secondary, we do Python. And for our third value, we need to call again. Here you can see it's written JavaScript. But if I call this function, once again, is going to return undefined. So we can print out of a loop differently. Just would need to use star sign with it. In our next example, I'm going to use e with spread operator. So I'm going to remove these lines and also remove this one. In our first, I'm going to type PHP. In our second, I'm going to type Python. In our 30. I'm going to type Java in our fourth field. I'm going to type HTML. And it is enough for this example. And now I want to print the first value in our console. So I'm going to type console dot log inside the parentheses, a dot next. And I want to bring their value directly. And I want to print the value directly. So I'm going to use dot value semicolon to end the line. If I said this side, you can see it's sprint only PHP. But for the remaining values, we can use spread operator. So I'm going to do to get this line. And he said the console.log section, I'm going to type square braces. And inside the square root is, I'm going to write three dots. We learn about spread operator in our previous video. So I'm going to explain it here. Housework. Then I type or variable name a. If I save this file. Here you can see it print all the remaining il value in an array. We know spread operator written array. But if I call this line Putin and satisfying it, going to return our first two values and remaining two values is written array. Because we use spread operator. There is another function that we can use with generators, which is written. Let me show you this. So I'm going to remove this line and I'm going to type a dot written function. Hair if first call our next value mean PHP. And then he call our written function. If we use written, it stopped executing our other eels. And also we can send messes with the return. So I'm going to type in. So if I save this file here, you can see it print out first way to PHP. Then is written end means our written message. And also print true. And we already know when it's written true. If there is no other in this function, then Institute and true. Let me show you. If I tried to print this next function up top the return and said this code, it return undefined. But you can see my function, there are other fields. It's mean is not going to execute other lineup quotes because we use Rican function. When we call written function, it cannot read the next quotes. The main benefit using return function is when we have to stop our code middle of the execution, then we can use Rican function. So I hope now it's clear for you what is generator and why and how we use it. Thanks for watching this video. See you in the next tutorial. 29. Strict Mode: Hello guys, welcome back. In this tutorial, we are going to learn a new feature about JavaScript, which is strict mode. Normally when we type JavaScript code, there maybe syntax error in the code. Normally we ignored it. Also eat do not provide any error messages to our browser. But we get the effect later. And as I told you, browser do not provide any error message. So it's very difficult to rectify this kind of error. Let me show you a example. As you can see, x equal to 42, heretic a variable name x, and assign a value 42. And then I'd been this variable in a console and it going to print 42 in our console. But if you notice there is an error in our code when they assign the variable view, we do not provide the declaration time. I wanted to say this variable types should be var, late or cons. And our browser also not going to return the error. So there are many syntax error that we miss out on, and it is very difficult to rectify. To resolve this problem, JavaScript came out a new feature, strict mode, just only to type a simple statement top of the code, something like that. Inside the quotation. Use strict. And then you can type your JavaScript. Cool. This command going to send a strict messages to our browser, is going to tell our browser if there isn't syntax error in our code. Cindy error messages and stop execution. Cool. So now you understand why it is very useful. We can rectify our mistake with that. So let's start the practical and see how it's working. Here you can see side-by-side, I opened my Visual Studio Code editor and I open my browser using Live Server extension. And they also create STL file name index.html. So first I'm going to create a script tag, and now I'm going to create a variable, but I'm done going to provide declaration type AX equal to 42. And now I'm going to save this file and I'm going to show you my console. Here. You can see there is no error in our console. So I'm going to type console dot log inside the parenthesis, our variable x. If I said this file, you can see my console. It printed our value properly. But there is a syntax error in our code. We do not declare it is var, const or late. To solve this kind of problem, JavaScript introduce strict mode. For this, we need to type quotation. And inside this quotation only to type, use strict and semicolon to end this line. That's it. And remember, always you need to provide it top. If I save this file. Now you can see my console, there is an arrow. X is not defined, line number 11. But if I use there and then save the file, arrogance is Sprint autism and there is no arrow. Let me show you another example for this. We need to create a function. So I comment out this line and I'm going to create a function. Function. And our function name is hello. Inside the curly braces, I'm going to take a variable, but I'm going to declare the variable b equal to 30. And also I'm going to remove this var keyword. If I save this file, you can see. And also I'm going to comment out you street. And if I said this file here, you can see there is no error in our console. But if I turn on the strict mode and said this file, you can see the arrow x is not defined. So I'm going to type their hair VAR. And if I said this slide once again, you can see there is no error in our console. But you can see we do not provide declaration type for this variable. So I'm going to call this function hello. If I save this file, here, you can see b is not defined. Now it show the arrow. But if I type there and said this file, you can see that is no error in our console. So here you can see our new strict mode organ function and it also work on outside the function. And by mistake, if you type entity in your code, which is don't follow the JavaScript rule and regulation, then if so the arrow, not only that, we can use strip method inside the function. So I'm going to move inside this function. If I remove this word and save this file. Now this method only work on inside the function, not outside the function. Let me show you if I said this file here, you can see there is no eroding our console. But as you can see, we do not use var keyword, particular this variable. But if we do not use declared inside the function and then set the code, you can see the error now. Now you can see the arrow. It will be checked only those code, which is below then you Street. And now I'm going to show you another example which is also related to function. For now, I'm going to remove this lines. I don't need this lines. And I'm going to pass some parameter in this function. And our first parameter is a comma, b comma. And our third parameter is also be iOS sim parameter for our third parameter. And I'm going to move this industry outside the function. And for now, I'm going to comment out this. And now inside the function I'm going to add is through value. And I want to print this in my console. So I'm going to type console dot log inside the parentheses, a plus b plus b and semicolon to end this line. And when he called this function, I'm going to pass three different value for this function, 5, 10, 15. That's it. We know if we sum these three variable is going to return 30. But if I said this file, you can see my console. It return 35. It's written a wrong result, 35, because we use our second parameter twice. That's why it's written 35. And also you don't provide any error in our console. It's a very complex problem. So whoever this kind of problem, we can use strict method. So I'm going to uncomment it and I'm going to save this file. Here. You can see me consume. It, prints syntax error. Duplicate parameter will not allow for this context. Our street method provide proper error message. But if I comment out our strict method and save this file, then it's not provide any error message. And also it provides wrong value. To resolve this problem, we need to use prefer variable name C. Now. So I'm going to change here C. And if I comment out this one and save this file. Now you can see there is no error in our console and it's also written the exit value. So heavy you can see using strict mode, we can find the error in our code, basically syntax error. And I suggest you always use strict mode for your code. Just include the line first and then type your code. That's it. Thanks for watching this video. 30. Error Handling Tutorial: Hello friends, good to see you back. In this tutorial, we are going to learn about error handling. You already know we can check JavaScript error in browser console. But sometime is very complicated to understand it. Sometime all the arrows are shown at the same time. And it is very difficult to rectify all the error at once. So to handle this kind of error, we have a special method in JavaScript, try and catch. And we already learned about in our previous videos. Whatever code we want to do here, we post all the code inside the try block. If there is an error inside the try block, then immediately redirect to catch block. And we can show any message inside our catch block. So without wasting your time, Let's start the practical. As you can see, side-by-side, I opened my Visual Studio Code editor and they also open Chrome browser using Live Server extension. First I'm going to type script tag inside the head tag. So inside the script tag first I'm going to type some randomly text. This text is not a variable or not the JavaScript function or not a JavaScript matter. If I save this file, it going to return an error. Here you can see a reference error. This is not defined, but sometime and also very complicated to understand. For these, we can use try-catch methyl group. So first I'm going to type, try. With that. We need to type catch. Inside the try block. We can type any code. So I'm going to print a message inside the console. Console dot log inside the parentheses. I'm going to type start and semicolon to end this line. And I'm going to duplicate this line. And I'm going to type in and then give a space between these two message. And if error, of course, then inside the class block, I'm going to send a message console dot log inside the parenthesis arrow. So if there is an error in this try block, then automatically run catch block. If I said this slide here you can see there is no error. Once again, between these two message, I'm going to type similar random text. If I save this file. Now you can see my console. First it print our start message, and then you sprint our error message. If there is an error in single line, then you stop executing other codes and automatically run catch method. Let me show you another example and I'm going to convert it into a function. As you can see, we do not declared this function. And if I said this file, you can see it's written the same error. First it execute our first message. And whenever he tried to run the function, and then it's found, we do not declare this function. So it stops executing other codes and start executing catch block. So similarly, we can print this error messages in our document. And now I want to see the exact error in our documents. We still don't know where his armies stickies. I wanted to print this exact error in my console. For these, I'm going to take parenthesis inside the catch block. After the catch and interdependencies, I'm going to take a variable, in our case E IRR. So whatever error it's written going to store in this variable. And if we want, we can print our error in these wells or, or console. So under Type II dollar, if I said this fine. Now you can see the error message. This is not defined or do not define these blah, blah, text. With that, we can see the exact line number. So in that way, we can understand the error bitter. And also we can handle our error one by one. It's not going to throw all the error at once. And I want to say one more important thing about try-catch. It work synchronously. If we use setTimeout function, it is not going to work properly. Let me show you this. So I went to remove these lines. And inside the try block, I'm going to use setTimeout. And inside the setTimeout function, I'm going to create an anonymous function. And then I use curly braces. And I want to delete this function for once again. So inside this function, I'm going to provide some error somewhere in num text. Let's increase the delay time 3 second. Now you can think when we run this code, it going to check this one up to three. So again, if there is an error, it's going to redirect catch block. No, it's not work like that. When they're in the scope. In this case, it only work at all as soon as, quote start running. And it will come in, try block and hair and hair. This function going to check that it has to run up to 3 second. Then the code after setTimeout function that will start running. If I said this file here, you can see it not showing the proper error messages from the cache block. So our try-catch method not work synchronously, but we can use try and catch block inside the setTimeout function. So I'm going to move this try and catch block inside the setTimeout function. So I'm going to cut this portion and move it inside the setTimeout block. And also need to move this guest portion. And inside the try block, I'm going to provide a arrow. And when we run our script, in that case, a practice again, it going to show us the exact error in our console. So let me show you that I'm going to save this file and we need to wait for 3 second. Now you can see the error in our console. This is not defined. It's a reference error. So we need to use try and catch block inside the sit timeout function. Otherwise it's not work. Also, we can show the error message is separately. For these, I'm going to remove setTimeout function. For now. I don't need this. And inside the catch block, I'm going to type arrow dot name. And I duplicate this line. And now i, and now I want to print an error message. Error message. We can print exact error messages differently. If I said this file here you can see arrow name reference error, an error message bla. Bla is not defined. And if you want to see arrow name an error message together, then we can use stack. I wrote dot stack. If I said this file. Now you can see arrow Name error message at once. Using arrow dot stack, we can print a row name error message together. And if you want to print error messages are named differently, you can. The most important line is message will just want to know what is the exact error. So we can comment out both of the lines and just we can print the message. And if I remove this comment here you can see reference interval. Now the question is, what is the reference error? And now I'm going to tell you how many types of error are there in JavaScript. Hello can see seven difference error in JavaScript. Our first error is evil error. This error occur when we use eval function. It's not a very important Arrow. Vince come range error. It's occur when we use a steel mill wrench attribute. If error came through the range attribute, then we can show the error using range error function. Our main and important arteries reference error, if I call it a variable or a function which is not defined in our code, then it's written reference error, then scum syntax error. It is the most basic and important error when you use loops or conditions, typing mistake is the basic problem for beginner. Some timing for good to UNCLOS, curly braces, quotations, etc. In that case, syntax error occur. Thins gum, type error. As you know, there are various type for variable, boolean, number, string, etc. These are predefined types by mistake, user type, different type of input, then type arrow course, our next enrollees, URI. This error occurred when we pass URL in the URL bar. If you type any wrong method to pass URL in the URL bar, then URI arrow course. And our lowest error is aggregate error. And they told about this error in our Promise method video. When we use all method in promise, if there is an error, then we use aggregate error. When we use try catch method in JavaScript, we can show these arrows. Let's start the practical. For this. First, I'm going to remove all the methods. If different error occurs. For these, we can print different messages. So we can use IEP condition for that IV inside the parentheses, our error instead of reference error. For this, we can show different message. So inside the console, I'm going to type reference arrow. You can show any proper message here. And now I'm going to bring different messages for Type II error. So we'll type LCP inside the parentheses. I'm going to copy this line and change reference error with type error. And inside the curly braces, I'm going to print console dot log inside the parentheses type error. If our error is instance of type error, then it's going to print this message. So we can create different elseif condition for different error. And at last I'm going to create else condition is inside the parentheses console dot log unknown arrow. And if I save this file. Hello can see is spin to reference arrow. And if type error occurs, then it print these masses. Otherwise it print unknown arrow. If we want to get data from the server as a JSON from, then we use try and catch. Let me show you this. So I'm going to remove all of the school. And inside the try block, I'm going to take a variable late JSON, and I'm going to assign it damages and data for this variable. And we already learned about in our previous video. As a property, I'm going to take name inside the level course. Name, colon inside the double quotes will add one. And similarly, I'm going to take another property, h. It's the numeric value, and age is 24. It's a numeric value, so we don't use quotation. Its adjacent permanent. Assume that we get this data from the server. For these, we can use fetch method or adjuncts. It's ribbon on you. So first we need to convert this data into a JavaScript object. So I'm going to take a very even late user and I'm going to use a JSON method, JSON dot parse. And inside the parentheses, I'm going to provide the variable in JSON. Basically JSON.parse function going to convert JSON object into a JavaScript object. And similarly, we have opposite function, JSON dot stringify. And it convert our JavaScript object into a JSON data. If we want to convert the server data into an object, then we need to use JSON.parse function. And if we want to pass data to the server, then we'll convert the JavaScript object into a JSON data using JSON dot string if it methyl. And now we can read the data from the user variable. So I'm going to print the data in my console. Console dot log inside the parentheses, user dot. And if there is an error in our code, I'm going to print this arrowed in my console, console.log err. And also I wanted to print student h. So do we get this line USA dot h? That's it. Before I said this file will need to move this JSON code inside the quotation. Otherwise, it's at like in JavaScript object. If I said this file, hurricane, see student name and one, and is age 24. If there is an error in server or the JSON file, then we can show the proper message using try and catch block. Suppose there is an error in the JSON file, so I'm going to remove one quotation. Now the JSON format is not correct. And if I said this file here you can see there is an error in line number 14, syntax error, unexpected token in decent at position 16. It's cannot read the a, it expected equitation, not the a character. That's why it's written the arrow. And if you show your own messes, yes, you can. For this, we can throw a error messages from the try-block. Let me show you. But first, I'm going to resolve this JSON file. And now I'm going to create a condition. If instead the parentheses, if we do not receive username in JSON format. Inside the if condition, I'm going to throw a message. We'll use a different method. Throw new error. Thus it and interdependencies, I'm going to show a message, incomplete data, and our messages, no name. And I'm going to move this line below the IEP condition. And now I'm going to remove the name from the JSON data. And if I save this file, arrogance see incomplete data, no name, and upper print the error message. It stopped executing our code. When we throw the error message, it automatically redirect to the catch block and print the message in our console. At last, I wanted to show you one thing with try and catch block. We can use another block. Finally, basically it's optional. If we use finally block, no matter what, it's going to execute. Physically, I wanted to see if there's an error in our code. It stopped executing other code in a try block, but it cannot stop executing finally block. Let me show you console dot log. Inside the parentheses, I'm going to print a message. No matter what I'm going to print. If I save this file, hesitancy, first it print our error, incomplete data, no name, and Vinny print no matter what I'm going to print. And if I resolve the error, name and one. And if I said this file, you can see it print student name and one also it prints current age 24. And then it jumped into the finally block and print, no matter what, I'm going to print it, not going to check that is an error or not, this block will execute. So finally, method run in every case, I hope now you understand why we use try and catch block and how we can handle errors in our code. Thanks for watching this video. 31. Exercise 1 Intro: Hello guys, welcome back. This is our first exercise related advanced JavaScript. And I will give you the problem statement. And this is our problem statement. Write a JavaScript program to convert an array of objects to a comma separated value min CSV file, strings that contain only specified columns. Suppose you create some JavaScript object and we create an array with that object. Every object have their different poverty and some properties are similar to each other objects. So you need to specify only those column means only those property you want to extract as CSV data. Let me show you the example. Suppose you have a table, something like this. And this table has three column name, age and height. In our first row will have a student named Edwin, and he's age is 23, and he forgot to provide his height. Similarly, we have student names me, he's 21 years old, and he's the height is 5.7 feet. And our third student is anyhow, and he forgot to provide her age and height. And our first student is alone. He also program to provide his name and age just to know about his height. Nothing else. Every table row is a different object of JavaScript, something like that. And you already know how objects are made in JavaScript. As you can see, there are three type of property in object's name, age and height. But I want to extract only name and age. And I wanted to convert them into a CSV data. But I wanted to make this process dynamically. Suppose I want to extract name and height, then just only to pass name and height as parameter. And we are able to extract all the data about student from these objects. If we extract name and age, hell can see it's going to return result like this from our first row. It going to return, add one and his age. This again draw it going to return Smith and his age. And from the third row is going to provide third student name, neon. But there is no x value in this column. So we need to fill these lengths space with double quotation. And the same thing happen for our next student. Here you can see he forgot to provide his age and also he forgot to provide his name. So I need to fill these places with double-quotes. So first we need to convert this group of objects into adding. So I need to use square braces and we need to use comma between these objects to convert it into an array. And also I'm going to give you the solution. Use a radar prototype.js main function. And inside the parentheses it to pause delimiter, to combine all the names in columns to create the first row. And then you need to use map function. And you need to use a reduce function to create a row for each object. Then submitting non-existing value with the industry and only mapping values in columns. And once again, use the join function to combine all the row into a stream. And we need to take the delimiter as third argument for the function. And the default value of delimiter is a comma. Let's see, the flowchart is going to clear all of your doubts. You can take any function name. Then inside the function, you need to use three parameter. First you need to pass an array which contain student object. Then you need to purchase columns means the header of the table, which column you want to extract from the table. And then you need to assign this delimiter parameter with comma because it's going to separate your columns and the rest will be understood. Only when we do the exercise. Let's see what we need to know about advanced JavaScript to do this exercise. First, usual knowledge about template string method. And then you should have knowledge of spread operator and also you should knowledge up arrow function. Using these, we will complete the exercise. So let's start the practical and see how we can complete this exercise. 32. Exercise 1 With Solution: Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using like Server extension. And I already created a SQL document in my current working directory. And now I'm going to use script tag. Script inside the script tag. First I'm going to call a function inside my console.log section. So let's call the function console dot log. Inside the parentheses. Our function name is CSV table, CSV and the scope table. And inside the function, I'm going to pause to parameter as a form of array. So I'm going to use square braces. Basically, I want to create a object array. So inside this square root is, is, I'm going to create some object. So I use curly braces. And inside the curly braces, I'm going to type our first object property name. Name is Edwin coma, age age is 23. Basically, I'm going to send student name and student age. In the next object. I'm going to send student name. And student name is Smith and his age 21. With that, I want to pass student height, and this height is 5.6 feet. So this object has three property and three value. Our next, I'm going to provide another object which have only one property name. And the student name is Nathan. And we don't have any information about anyhow, just we know her name, her age in order height. And similarly, we're going to post another object. So I use coma and inside the curly braces. And also the student has one property only h and he's edges 33 and he forgot to provide his name. So this is the first parameter I want to send as an array and for our selected columns then I want to say in another airy as in parameter. So inside the square root, this is our first column is name. Similarly, our second column is age. Oops, there is a mistake. It should be capital. This string should match with this one. Otherwise, it's not going to work. It's mean, I want to show student name and age column in my CSV document if the student name is available, it going to provide the name. If not, then it leave that place. Then as you can see, we don't have forced student name. So in that case is going to provide only student age. And in the name section, it going to provide blank. So we're mainly going to extract cool property from this object table, name and age. If you want to extract student height, yes, you can. In the Parameters section, we need to provide the height as in parameter, something like that. Now we are able to extract student name and height as CSD from. But without Smith, that is no student who have height property. So I'm going to use H property. That said, hey, I didn't read this CSV table function. I just call the function, and now I'm going to create this function. So let's create the function we are working with ES6 version. So basically I'm going to create a arrow function and I'm going to use constant, variable cost. And our function name is CSV, underscore table equal to inside the parentheses. I'm going to buzz three parameter in this function. As the first parameter, I'm going to pass an array arr. As a second parameter, I'm going to pass array, which is column. So I'm going to use column as parameter name. And our third parameter name is delimiter, which is basically used for separation purpose. And I want to separate this view using coma. So inside this single quotation, I'm going to provide coma. That's it. And now I'm going to use the arrow sign equal to greater than. And I forgot to use Command between parameters name. So I'm going to type a comma. After that, I'm going to use square braces because basically I'm going to pass the array as a parameter. So I'm going to use square braces and I'm going to use join function dot join. Because I want to convert this array into a comma separated value stream. That's why I use join. So whatever array I'm going to return inside the square root is, is it going to convert them into a string? That's it. And inside the parentheses, I'm going to use backslash n for new line character and semicolon to end this line, this newline character, create a new line between two objects. Otherwise it's very difficult to understand the columns. So basically it going to divide every array object between new line, then inside the square braces. Now I'm going to type my cool. As you know, these are my columns, which I want to extract from this objects. And we need to divide this column by comma. So once again, we need to use join function. So I'm going to use column perimeter, columns, dot join inside the parentheses and I want to divide by comma. So I'm going to use delimiter variable. So I copy this medieval name and paste it here. That's it. And if you want to separate the value using desk sign, you can just, you need to replace the comma with dash. Nothing special. So in our first table row, I want to print our columns name, name, and age. Then I'm going to use comma because it's an array. And we can divide a revolution using comma. There's nothing special and Ardern function going to convert this array into a string. As you can see, I'm going to pass the array as an argument. So we cannot use this parameter variable directly. For these, we need to use spread operator. So I'm going to type three dots, its mean, now it's spread operator. And so now I can use this in my code. If we directly send array as an argument, we need to use split operator to operate this array. And now I'm going to use map function, MAP inside the parentheses. But before we do our further code, Let's talk about map function. What is my function? F function physically working like loops, like for loops, forming loops, etc. But there is a difference between a basic loop and map loop. Basically, it's work with arrays. If we want to manipulate an array and one to create a new array, then we need to use malfunction. It Don't going to change the existing array, but it can calculate the existing array. It can create a new area. To use this map function, we need to create another function inside this math function. So I'm going to create a arrow function inside this map function. And our function name is OBJ, object equal to greater than four arrow sign. And inside this arrow function, I'm going to create another arrow function. Here you can see we have a function named object. And I want to run this function for every values of array. For this, we need to use reduce function. And I want to combine the aviary object view and I want to create a single value. So I'm going to use columns dot-dot-dot reduce function. So I'm going to type columns dot, radius inside the parentheses. I'm going to pause to parameter SCC and key. And this is our, another arrow function. I'm going to use equal to greater than sign. This reduce function, going to create row for each object. And now I want to submitting nonexistent value with empty string and the only mapping values in columns. So first I'm going to use template string method. So I'm going to type back ticks. So first I'm going to use dollar sign. Then inside the curly braces, I wanted to print this parameter ACC. And once again, I'm going to use dollar sign and curly braces. And inside the curly braces. Now I'm going to use competition operator to check the columns when, if the data are not exist, tinges print blank condition. And if exist, then just use comma delimiter. I know the condition is very streaky. So first I'm going to use our logical NOT operator means exclamation sign, a scc dot length. And now we need to use a comparison operator which act like else-if condition. So I'm going to use ternary operator. So I'm going to type question mark. If the condition is true, there is going to print only quotation. Means if there is a novella in this variable, there is going to print quotation. Otherwise it's going to print comma is delimited variable. So I'm gonna copy this delimiter variable and paste it here. Oops, there is a mistake. Need to move all the stuff inside the curly braces. So I got this code and paste it here. So this is our one condition. Here. We said condition for value. Now we need to set condition for object key. So I'm going to use double quotes inside the back ticks. First I'm going to use dollar sign, and then I'm going to use curly braces. And now I'm going to check if there is no value in this key, then is going to print blank quotation. Otherwise, it's going to print the key value. So inside the curly braces, I'm going to use logical NOT operator once again. Then I'm going to use and then I'm going to call object function OBJ. And inside the square braces, I'm going to call key parameter. And once again, I'm going to use ternary operator. If there is no key value, then just print a blank condition. And if there isn't, then just print the object key OBJ, inside the square braces key, and outside the backticks. Comma, blank quotation. Jeff's it. So finally, it's finish. If I save this file and show you my console. Here you can see in the console, in our first row, we have two column naming age. And from our second row, it going to print student name and their age. And 123 years old, Smith, 21 years old. And they have forgot to provide her age. So, so according to this condition, it lead that place blank, and our next student forgot to provide his name. That's why you can see only condition in his name position. So we successfully extract our object property and convert them into a CSV data. And now I want to see student name and their height. So I'm going to replace h with height. If I said this file here, you can see student names and their height. And there is only one student who provide his height, and he is Smith. So we dynamically can extract every object value from the object. Basically, we use this method to extract JSON data from the server and convert into a CSV data. If you want to extract JSON data and convert them into CSV file permit, you can use this process. First. You need to convert these JSON data into an object. And you know the process, how we can convert the JSON data into an object. It's a very good exercise if you want to understand advanced JavaScript. Thanks for watching this video. See you in the next exercise. 33. Exercise 2 With Solution: Hello guys, Good to see you back. Once again, I am back with a new exercise which is related to JavaScript ES6 version. So let's see the problem statement. Write a JavaScript program to convert a specified number to an arid desert. As you can see in the image. Suppose you pass a number 1, 2, 3, and you need to create a function which can convert this number into adding. And this function going to convert every defeat of the number into a array item. So let's see how we can solve this problem. First, we need to convert the number into a string using spread operator to build a new array. Then we need to use array.length map function and parse in function two towns from each value into an integer. It's a very easy and simple exercise. It's not a very difficult one. So let's see the flowchart and try to understand how we can create the solution. First, we need to declare a variable, in our case, digitize. And then I use arrow function. And this function takes one argument as a number. And then we need to convert the number into a string using spread operator because we need to build a new array. And then you need to use a map function and parse in function to transform each value. When in teaser, Let's see what kind of advanced JavaScript we need to create the solution. We need to use template string method, and we need to use spread operator. With that, we need to use arrow function. I know it's not a very difficult exercise, but it's going to enhance your productivity little bit. So let's solve the problem. Hey, it's time to create the solution. Here you can see side-by-side, I opened my visas through code editor and my brother using Live Server extension. So first I'm going to type script tag. And inside the script tag, I'm going to create a variable named digitize. For this, I'm going to use constant cons digitize. It's not only a variable is also a function. So I want to convert it into an arrow function equal to inside the parenthesis. I'm going to pass one argument, which is small in Min number. And then I'm going to use arrow sign. And also I'm going to call the function before I create the function, let me call the function console dot log. Inside the parentheses. I'm going to call the function, and our function name is digitize. Inside the parentheses, I'm going to pass the arguments. Means a number, and the number is 621. It's a three digit number. And now we need to convert this number array of disease. So first, we need to convert this number into a string. So to convert this number interesting, we need to use spread operator. Let me show you inside the square braces, I'm going to use spread operator means three dot. And now I'm going to use template string method. So I use backticks and inside the back ticks, I'm going to use dollar sign. And inside the curly braces, I'm going to pass the number, which I want to convert into a stream in. So we convert this number into an eddy. And now we need to run a loop with this array. But as you know, there is a function name Men nim map, which is specifically work with arrays. So I'm going to call this function dot map. And inside the map function, we need to create another function. And this function going to return another Eddie. So I'm going to take a variable which is i. I means every item in this array. And also I'm going to use arrow function once again. And then I'm going to use another function which can convert string into a number which is precent. So I'm going to type int, and inside the parentheses, I'm going to pass I. That's it. First we are going to convert this number into a string. And then we use math function with this add-in. And we know malfunction work like in loop, like for loop, while loop, etcetera. And then a convert every item of the string into a number using frist in function. So if I said this file here, you can see in my console it convert the number into a array. I hope you liked this exercise. Thanks for watching this video. 34. Exercise 3 - Removes non printable ASCII characters from a given string: Hello guys, welcome to our new exercise. This is Exercise 3. And our problem statement is write a JavaScript program to remove non-printable characters from the given stream. Now the question is, what is non-printable characters? Here you can see a string and this string full-width. And this string full-width, non-printable is CWI characters. So you need to write a program which can remove all these non-printable characters and return only the printable characters. Let me show you the example. Here you can see the same string on your screen. And you need to write a program which can found non-printable A-S-C-I-I characters. As you can see, our first seven character is non-printable character. And then you can see some printable character. And then once again, you can see non-printable character. So we need to found this character and remove the character from the space. And then we need to return the only printable character from the string, something like that. So I hope you've got the problem. This is not a very difficult exercise. Just unique to use string dot replace function with a regular expression. Remove non-printable A-S-C-I-I characters. And as you know, we are working with ES6 version. That's why you need to use JavaScript arrow function. It's not a very difficult one. You can try your own way, otherwise, you can follow my solution. So let's jump into the Visual Studio Code, the heater, and tried to understand how its work. So at first, I'm going to create an HTML document, index dot HTML. And they create a basic HTML structure. And then I'm going to turn on my word wrap. So fast. I'm going to type script tag outside the body tag. New type script. At first, inside this script tag, we need to create a function. To create our function, I'm going to use constant, variable. So I'm going to type const. And our function name is removed. And I'm going to use arrow function for this example. Remove equal to STR, arrow sign. Stl means our stream. This is our parameter. And then we need to use Replace function with the stream. So I'm going to type STR dot, replace inside the parentheses in this function as the first parameter, we need to provide all the non-printable characters. So I already copied the characters and I'm going to paste it here, comma. So whenever our function found this kind of character in our string, it going to remove it. So in our second parameter, I'm going to pause just a single quotes. And then I press semicolon to end this line. And now I'm going to call this function in my console. So I'm gonna type console, console dot log inside the parentheses. I'm going to call the function which is removed. And then inside the parentheses, I'm going to pass a stream with non-printable characters inside the single quotes. I'm going to pass the stream. As you can see, the string field with non-printable A-S-C-I-I characters. As you can see, our string contents, some non-printable character also contain some printable characters. So let's open the HTML document using web server. So here you can see side-by-side, I opened my Visual Studio code reader and my browser using Live Server extension. And if I turn on my developer option in my browser and then jump into the console section. Here you can see the result. Our function, successfully remove non-printable a CIA characters and print Google I-N-C using regular expression and replace function was successfully removed this characters. I hope you like the solution. So thanks for watching this video. Stay tuned for our next exercise.