Javascript Beginners Guide [2024]

1. Introduction: Welcome to JavaScript certified course. In this course, we will start with the basic level. You will learn the programming language, JavaScript, which make webpages alive and we will go mostly impractical. I am not going to dive in theory of JavaScript because you can read that anywhere. We will start directly, we will install our environment and install the required extensions and start programming with Java Script. My name is fairly new and I am going to teach you Java Script and how do you develop with it. I have taught thousands of students in offline and online courses. So for that, let's get started with the JavaScript. I will start with a very simple presentation that I will explain what is JavaScript. And we will see real-world example, how JavaScript is making the websites alive. So this course is created to be certified developer. So at the end of this course, you will have the basic level as a certified developer to be starting at a junior in any company. So if you know already HTML and CSS, you are ready to start with JavaScript. So as we will see here that we are going to learn a JavaScript which makes the webpages alive. So in other words, JavaScript is a programming language and you can write programs with this language. But those programs called as scripts, they are not called as a programs as we know, like in Java or in C Sharp or in any other programming language, we are writing here scripts. So you have to learn this word. So when I tell you, okay, Right For me a script, it mean you can write some small program with JavaScript. And also this program that they can be written directly on the webpages HTML and run automatically when you load the page. So when you open any web page, you will see like some of you in front of you, which is HTML and CSS. And you will see some movement or animation or for example, registeration for a form registration to look in. So this means that these JavaScript is handling all of these operations which can be done and interact with the page between the user and the server. So in that way, you don't need a special preparation for compilation to run the application or to run a JavaScript application. So for that, let's see some live examples. I have prepared some live examples. For example, this one. So here we have some library which is called splicing. This is a JavaScript library which is doing like a slides. So in that way, as you see here, if I have only HTML and CSS and click around, click on these arrows, I will not have any interaction. But when I add JavaScript code to these pages or these elements in the HTML and CSS. I have this animation, so I have a slider where I can display some information to the users, like any website. So this is one of the examples of JavaScript. And also, if you see here that we can build images galleries. So when the user comes and click somewhere, he can see an image or a bigger image of what he clicked. So the user is interacting with the page, and this is interaction comes from the JavaScript. So JavaScript is literally responsible for the interaction between the user and the page. Also, when I want to post a form email password address and all of this interaction, I wanted this book, put this data and click on, sign in on this clicking what is going to happen? I am going to send my data to the server and those data will be stored somewhere. So I cannot be get lost in this, for example, forum or on this shop. So in that case, all of this interaction from the user, which is going to happen on the web-page, is managed by JavaScript. Simply, this is JavaScript, so you don't have to fill your brain with a lot of ideas and a lot of introductions. Let's take this introduction as a basic for our course and we will continue step-by-step to learn how to make programs interacting with the HTML and CSS of the webpages. 2. JavaScript is for Everything Nowadays: Java script today is not only used for developing a websites or making interaction with the user and the webpages. Know, it's used mostly for everything. I am saying that literally like everything. Because for example, you can build a server application and also mobile application, as we will see later. But what is making this language is very unique nowadays. It has full integration with HTML and CSS. So you don't have to care like, Okay, I need to install some extras to integrate with HTML and CSS. No, JavaScript directly works with HTML, CSS with many functions and many comments that you can change in the structure of the HTML and CSS. Also, simple things are done simply what this mean. This means that JavaScript has some already defined methods where it makes your life easy so you can create Arrays, create objects. Of course, you don't know what I am talking about, but all of these information are covered in that language. So it makes your life easy to create simple things with that simple language. And the most important part that all browsers like FileZilla, Google Chrome, and also Internet Explorer or Microsoft Edge. All of them agree together to adapt this language to run on the web pages. So all the browsers is supporting or are supporting this language, and they are enabling JavaScript by default. So in that way, JavaScript is the only browser technology that combines these three things. So for that, JavaScript as well, also allows to create servers, to create mobile application and web application. So for example, there are some frameworks which are written or they support JavaScript language to do some different goals. For example, I can create a server application where I communicate to the database and grab data from the database and send them to the front end or to the webpage where the user can see that data. So for that, normally we were doing using some, another server languages like PHP or dotnet, or another programming languages which are really specialized for the server. But now with JavaScript, you can write JavaScript syntax and create a server application, which is great. And also, you can even create mobile applications using JavaScript. So mobile application works on Apple and also on Android. So in that way, when you write also JavaScript, you will have application working on iOS and also on Android phone. And the technology or the framework which is built over JavaScript to do that is called React Native. And also you can create single-page web applications. For example, better having an installation for like we can say application, you have to install it on every PC. You can create something called web application and this web application that all customers or all users of that application, and they can open it via browser and then work with it. This is called a web application and a famous framework for that is called angular. So as you see, all of this is written or you can write with JavaScript to get a specific target. So you see JavaScript is now everything is doing everything for you nowadays. Server application using Node.JS, mobile application using React Native, and also web applications using Angular or React. And of course, I didn't mention all the frameworks here. I mentioned the most or the most hype. We can say frameworks for doing that with JavaScript. But of course, there are more and more frameworks. You can do them and use them. So to move to the next step with Java Script, you can, after these courses of like the basic level, at the advanced level, you can move them to a server and then you can do or choose some web application framework or mobile application. So in that way, you will be a full-stack developer with one programming language called JavaScript. 3. Setting Up Environment: Writing a code or a programming language, you need an editor for it. Of course, you can use a simplest editor which you have in your operating system, such as a notepad or for example, even ward, or even any editor you have in your, installed in your operating system. But for year 4, JavaScript, there are some editors which make your life easy. So you can have some features which can speed up your coding and productivity. So far that I can start with the simplest editor which you are going to use. For example, there is Notepad Plus, Plus. This Notepad Plus Plus is a very simple editor which helped you with highlighting like some keywords and also opening and closing the ranges of functions and methods as we will see later. And it helps you also to open multiple files in the same time in one window. Of course, Notepad Plus, Plus working on Windows, there are another editors for Mac. We can use them as well. Another editor which is making your life even better and easier is Visual Studio Code. Visual Studio Code is an editor built by Microsoft, and they are using it to build or write multiple programming languages in that editor. So it supports not only JavaScript or HTML or CSS, but even IT support Python, it's support dark, IT support flutter is the support. A lot of languages based on the extensions which you install in that editor as well. There are multiple other editors. For example, like atom. Atom is also very great tool for editing or text editing or even writing a code in some programming language. There is also a sublime. This is also a tool or editor which can organize your file at some common. It will help you to create the files and programs. And also it contains all the highlighting and the coloring of your code snippets. For this course, we are going to install Visual Studio Code. I'm going to put all the links of all of these editors in with this lectures and you can install what you want. But for this course, we are going to use Visual Studio Code because it has multiple features where we can install extra extensions. We'll make like our productivity encoding better, more. So when you want to install, you just click on download Visual Studio code and it will download some zip file. And this zip file, you can open it. Of course on Mac, it will be one single file which is concluding the application itself. And on Windows, you will have also the installation for Windows and also for Linux. So for Windows, you will have an EXE file. And this EXE file you can run the installation process like any program and you will be, or it will be installed on your machine. So after installation of Visual Studio Code, we are going to have this window. So this is Visual Studio Code. I have previous projects, I have them here in recent, and also I have some opening for a file or opening a folder itself. We will see later how we would create the folder structure for a JavaScript project. So we are going to have like the coding in that editor. So for now, if you get this window, you are ready then to start developing with JavaScript. 4. Your First JavaScript Project: Okay, Let's do directly some practical work. I am going to open a folder. So if you have experience with Visual Studio code already, because I assume that you learned HTML and CSS. So I am sure you used before an editor which is called Visual Studio Code. But if you don't use it, I talked about it previously and we have now this window, I will click on open. So I will open not their file but a folder. So this folder will hold for me the structure of the project of JavaScript. So I will click on Open and I will go to my desktop. I have here created a folder which is called JavaScript course. And in this folder, we are going to place our JavaScript project or JavaScript files. So I click on Open and open for me a window. So here you have some notification about do you trust the authors of these files inside this folder? You just have to say, yes, I trust. So now we have empty folder, but we are able now to create files in, inside that folder. How we can create a file. So you can click either on this icon or you can say directly a new file here. But for example, I prefer for you to close this gets started and work always with this file explorer. This is called File Explorer here. So you can always work with your project files directly in the editor. So for that, I'm going to create a file. I will call this file index dot HTML. It's HTML file. It will hold for us the HTML code for our webpage because as I told you, we have a webpage Is contain HTML and CSS, and we are going to control this page and make it alive using JavaScript. So first of all, we need to have an HTML file. Okay? This HTML file is empty. You can't create an HTML code base or the boilerplate of the HTML by typing in HTML or in the editor HTML colon five. So when you put that, then it will generate for you all the boilerplate structure for an HTML page in the editor. This is one of the nice features which is built in inside Visual Studio Code. For that, I'm sure you know already about this quote, about this HTML, because HTML is another language is built to build the look and feel our the UI of the web page or the user interface of the webpage. So let's see how this page looks like in the browser. So first of all, I will right-click on this file and I will say relieve or Reveal in Finder this, you will find it in Mac system or iOS system, but on Windows, you will say Reveal in exploiter. So when I click on this Reveal in Finder, I will have, or it will open for me the normal finder or the window where the file is located. So we double-click, just double-click on this file and it will open with Chrome. But if it's not working, then you can select Open With and with open with, you can select the application which will open this file normally is a Google Chrome. So you need for that a Google Chrome browser, which you can install as well from a browser. So any browser, so you can't have that directly and you can work with JavaScript. I advise you to use Google Chrome because it has a great developer tools. So we are going to debug and compile or read or see the errors of JavaScript when we make a mistake inside the Google Chrome Developer Tools, I will talk about all of this later. So first I open the page. So as you see here, we have it now opened, but it's empty. So let's put something in the body. So here I will say like H1. And inside this one I will put JavaScript page. So we can say here like JavaScript page and I go back to my document, I will refresh, and then I will have here JavaScript page. So here I am refreshing. I'm going to show you, here I refresh. So I have JavaScript page. And for using the developer tools which I told you, you can click on those three dots and then you will have something more tools. And with this more tools, you will see something called Developer Tools. You have another way to open the developer tools can press F2 on your keyboard or you can as well, right-click on this page or this text and right or click on Inspect. So when you click on Inspect, you will have here the developer tools. So the developer tools is actually an unexpected how we have the code of our HTML and I'm sure you know that previously. So now we are going to work with the source and also the console. The console here is going to output for us the JavaScript results inside this console. So in the DevTools you will see something which is called a console. And this console, it's going to hold for you all the information which is output from JavaScript. So when you want to print something or you want to interact with something like for example, when I want to click on this text, I want to see some text here or output. It's like a debugging tool. So you here you debug your code and see what is the output of the JavaScript code, as we will see later. So for that at the beginning, we open something like this, and then we move to our Visual Studio code back. And inside the head tag, we are going to add the script. The script, as I told you, it's a program of JavaScript. As I told you, all the programs which are written with JavaScript, they are called a script. For that, we have to open a new tag, which is called a script. And inside this DAG, we can locate a JavaScript code. One of the JavaScript codes, which is very famous, it's called console dot log. So in that way, the console, it will look for me some data or some text inside the console, which is located in the DevTools as I showed you before. So here, when I write something in the console log and refresh my page, I will see you the result of that or execution of the JavaScript code which is written inside this script. So here I will have a console.log and then I will put, for example, JavaScript project. And then we will save. And then we will go again to our DevTools and refresh the page. And we will see JavaScript project and it's showing us where this console log come from, from which line in which file. So you see it's comes from index.html online nine, and the output is JavaScript project. So here we are. As I told you, we have HTML code, which is inside the body. And also we have a scripts. The script is a JavaScript or the life of the page which is going to interact with this HTML to make some unique stuff which are interacting with the HTML using this small program which is called script. In the language JavaScript, console log is used to debug our application to see where we are having errors, where we are having mistakes, as we will see later. And we will develop step-by-step. 5. Creating a Separated JavaScript File: It's always nice when we have a separated JavaScript code from our application or the HTML page. So for that, we can also cut out all of this code and put it in the separated file. So for that you can create another file which is called, for example, also index.js, which is hold the JavaScript, it has extension dot js. So NodeJS means that this is a JavaScript file. So the editor knows already that inside this file will be a JavaScript code. So for that I will press Enter. After creating this file, I will move this script or this line of code which I wrote with JavaScript to this file. So after saving that and saving this one, we are going to reload our page and reload the application. So when I refresh, I will see that I don't have anything in the console log. So in that way, I need to connect somehow this HTML page with that JavaScript file. So for that, you can remove this script. And then you can type script again. And with this editor you can see like a colon, SRC, like a source. So when you press Enter, you will have also like some attribute which is called source, like where is the source file for this script? Simply, you just say that index dot js is the file where I am having my JavaScript. So let's save and go again to the page and refresh. We will see JavaScript project. It seems that the file index.js in the line 1 has a JavaScript code. So index.js is our JavaScript code for this page. Of course you can put as well inside folder. So here when I create a folder, for example, I call this folder like a JS, and I move index.js inside that folder. So now JS is a folder contain index.js and on the root I have index.html. So after that, we will see that the page cannot see that page. So we can have error here. So it says that get file index.js error, the file not found. So because I said here praying for me, which is on the same level of index.html, there is a file called index.js, but actually it's not on the same level of index.html is in a level of a folder inside js, and then I have index.js. So in that way I can add that folder. So the folder is a same level of index.html on that route. So we have here js and then slash and then index.js. So in that way, the file or the HTML file will know that there is a JavaScript file inside the folder JS. So let's say again, go again to our browser, refresh the page. Nice. We have that file. And when you click on this index.js, you will see that the file is located in the js file or the JS folder, and then you will have index.html. We are going to work with all of this environment later. Now we care only about the console. The practical way of filing or defining the file structure in javascript is normally, or what developers are doing is normally like we have a folder which is called assets. So in this assets you can add your images or scripts or CSS files. So inside this outsets, I'm going to put the JS folder and then you can as well have another folder which is called CSS. And inside the CSS, you can put your styles. So for that, the index.js will be inside the JS folder, which is located inside the assets. So in that way, I had to add here another level which is called assets, which is the folder which is over the js. So if you notice that Visual Studio Code also give you a feature when you type a folder and you put slash, it's automatically navigate or continue. What is the next folder? So the next folder for me is js. So when I put ds and I press Enter, it's automatically added. And then it gives me the next edition, which is the file inside the JS folder. The file is index.js. We have only this file. I will press enter and it will be added in my project or in my HTML page. So for that, we have a folder, assets and index.html. So when we go again to the browser, refresh and we will see that JavaScript project is in the console and our page is working fine. So in that way, we are ready to write a JavaScript code and we can also create multiple files, as we will see later of JavaScript. 6. Naming JavaScript Files: In this lecture, we are going to see how we can name the files of JavaScript. There are many naming conventions and many naming rules where that we can follow to name our JavaScript files. Especially in the case that the file consists of two words, like for example, I will say index JavaScript or index something. I'm going to show you a slide. Where are the naming conventions, which are the developers agreed together to follow to name JavaScript files. There are multiple naming conventions. First one is called camelCase. Camelcase, as you see that we have the first letter of the first word is in the small letter, and then it has then the capital letter of the second word. So as you see here, two words, and the second one has a capital letter. This is called camelCase. There is another naming convention which is called Pascal case, where the first letter of every word is capital. And that is as well a K-Pop case. K-pop gaze is separated between the words with dash and all the words are written in small letters. There is as well snake case, which is combining all of those together, but with underscore separation between the words. So here we have a Pascal snake case. So as you see, capital letter of every word, but they are separated with underscore. And also there is here that for example, Kip up snake case. So this gave up snake gaze. It has instead of dash, we have here underscore. So in that way, you can name your files in that or on those naming conventions. For me, I prefer in simple JavaScript projects to use the K-Pop gaze for naming the files. So as you've seen here, when you go to our Visual Studio Code and we create a as file, I use Always small letters and separate between the words with dash. 7. Code structure: The first statement of JavaScript, which we saw is console.log. And this statement you can write as much as you want of those statements in your code. So for example, I am going to have here console log JavaScript project. You have ascii project. I can have those comments as much or as much as I want. Those statement. They can be separated by semicolon as you see here. So in that way, I will have this console log 3 times when I refresh my page as you see here. But now you can, as well as a, as a code structure, you can put those statements near each other on the same line, but you must always have a semicolon. Otherwise, if it's on the same line, you will get an error. Because this will think that console.log has a rest of their comments, arrest of code, something like JavaScript cannot recognize. So we can't say that the new line in JavaScript is equal to semicolon because this code, as you see here, will work fine without any problem. But when I remove the semicolon, then I will get error. So when I put all of them in the different line, then I will not have any issues as well, so forth that the statements normally in JavaScript, we separate them by line. And it would be always nice to have like the semicolon in our code, like I say, that this statement finished. So now what if I do this? So I am going to have a new line here and then save my code and refresh. We will see that code is still working. This is because also that means that also the new line doesn't mean is ending of statement. So that's why JavaScript sometimes consider this is one statement or a one-block. So that's why I told you it's always nice to use the semicolon to end the statement. And we can have the code more readable when we are going to build multiple blocks of code, we will know what is the meaning of this. Sometimes we will have a lot of operators inside some function. This I call it function by the way. So this function is going to have multiple parameter. This is a parameter by the way. So in that way, I am going to have multiple parameters and I want to put those parameters in multiple lines. This what we will see in the future when we make some progress in the course. But for now, let's understand it like this. Each comment, I am going to put it in a new line. So in this way, I will have a new line for every comment. It doesn't matter how the semicolon has empty spaces between the command and the semicolon itself. Also, it doesn't matter how many lines there are between the comments. Also, there is no way or No problem how many tabs or spaces you have a iteration or you have moved the text or the statement away from the previous statement. All of this will still work as long as we are not doing syntax mistakes. There are some tools which are doing the formatting of JavaScript for me. So for example, if I have multiple spaces here, when I save the file and it will remove those space and also remove those tabs based on the needs or of the syntax of JavaScript. We will see that in the next lecture. 8. Add Extensions to Speed Up Coding Productivity: As I told you, we installed Visual Studio Code because we are able to install some extensions or plugins which make our productivity better. To install extensions with Visual Studio code, you just need to click on this icon here. Then when you are connected to the Internet, you will get list of suggested extensions. So the extensions which we need for our course is our R2. So first one is called prettier. So this plate here is going to format for us the code based on some configuration we are doing. So if you remember, I told you if I put here multiple semi-colons and I mult multiple tabs, it will format the code when I press on Save, and then it will make it more beautiful and more aligned based on JavaScript syntax. So for that, let's install this prettier. So this prettier, it's called prettier code for matter. And then you click on Install, and then this is going to be installed on your machine. There are some instructions going with prettier. So for that we need as well to do all of those configuration to make our code formatted in the right way. So let's close this window and go back to our file. As you see year we made some changes and I need them to be formatted based on prettier plugin. So when we go here to the file list that's close, everything closed the extension. I'm going to format this document. There are multiple ways to format that document that is format on Save, Like for example, when I press on their menu, I will see here on the file list I have Save As or when I save a file in general, then I will have it formatted like when I press Control S. Also there is manual format, like when you don't have to save or format on Save, then you need to configure that in Visual Studio Code, as I will show you later. So first of all, if you want to format this document, you need to press control shift and be like from print. So in this way you will get this command window. This command window has multiple commands you can execute. One of them is Format document. When you don't find it, just type it and you will find the format document. When you press on this Format document, then it would give you the ability to format that document using the default extension. The extension which we have installed is prettier. So prettier is going to format for me this document based on what we have configured in our Visual Studio code. So when I click on Format document, as you see, it's formatted based on JavaScript syntax. Also, that is ability to format on Save. So when you press control S, like when you save the file, then it will be formatted automatically using the prettier. If you are not able to do a formatting on Control S or saving, then you have just go to, go to the Settings. And then in the settings here, you have to select or search for something called format on Save. So you need to be sure that this checkbox is enabled. If not, your file will not be formatted when you save it. So for that, we installed grittier and also we are enabling the save on or format on Save the command or the setting command in Visual Studio code. So in that way, I will be able to format automatically my file when I have arrived code. And also like some mess in the science tax, like not errors, it's different. So when you have mass in the syntax, but you don't have any errors in the JavaScript, then there is no problem, it will be formatted. But when you have a mistake or if for example, I am not going to gloat this one. So when I have here a format, then a format mistake, then I am going to save. And as you see, it's saved, but it's still have error and the file is not formatted. So for that, when you want the fried formatting of the code, you must have all syntax and there are no errors in your code. So for now this is the only extension which we need for our coding in the next levels. So after that, we are going to move to a programming flow and we will see how we can catch errors in the JavaScript and we see what are the errors we have to read. What is the error to analyze it or Google it, or find a solution for the error. 9. Detecting Errors: There are two ways to catch the syntax error in JavaScript. Syntax error, I mean, when I do a mistake, like when there is some mistake in a function, or if I am missing some brackets, or if I am missing some dots. As we will see later. This is called syntax error. And the syntax error can be shown in Visual Studio code directly or in the console of Chrome DevTools. So let's do a mistake, for example, by removing one of those parentheses. So I'm going to remove this one. Okay, I got an error which is live and provided by VS Code and it's saying that one parenthesis is expected. So it means that he expected some like another one, the closing of this one to be closed here before the semicolon. So this is alive, for example, live coding, but some errors cannot be detected. So how we can detect them, for example, I'm going to make a mistake here. So I say console dot L instead of log. As you see that Visual Studio code, they didn't complain totally. But where I can see the error then when you run the application again or the webpage, again, you will see that you have the error in the console. So when I manipulate the page, I will see that console dot L is not a function. This mean that console dot L or this L is not a command, is not, a statement, is not a function that can be called where because it's doesn't exist in JavaScript. So in this way, when I put it back and refresh, then the error is gone. Let's see more details. So when I put the error back and refresh, we will see that console L is not defined on it, not a function. And it shows you where is exactly this error. So it's on the line three of my code. So here I have a line three and it's here. So when you want to see more details, you can click on it. And it will show you in the DevTools exactly the same code which is written here in the file, and also the error itself. So the error is showing you that here is error, mistake that console dot L. Does it exist in JavaScript? So that's why I am detecting that error. As a beginners, we are enough with knowing the way of detecting those errors. We will see in the future, like runtime error or compiling errors, which are coming in more advanced levels. So for now, we detect JavaScript errors in that way, in the console or in Visual Studio Code. 10. Case Sensitivity: Okay, because we were talking about errors in JavaScript, Let's also have another type of error. I separated a lecture for that to be more focused. So most of developers, they have mistakes or typos when they are typing a code which is defined or predefined by JavaScript. So for example, this console is defined already. Some people like as a case-sensitive, they are trying to make, for example, this one, like the SI Console is in capital letter. So when you save this file, of course VS Code, they didn't complain and you run this code or refresh the page, you will get an error. This error says Console is not defined, so there is a case sensitive in JavaScript. So Console with capital letter doesn't exist in JavaScript. It's exist only as a small letter. The same thing here. If I say log or log in capital letter, and I save, then I will see that logo is not a function, it doesn't exist. So in that way, we know that JavaScript is case sensitive language. So when you define a function or do you have a function in some specific way? You cannot change on it. You have to follow exactly the same comments I am tax in like capital letter or small letters of the file to be able to run your project or run your web page based on the Javascript comment. 11. Commenting Code and Notes: In programming in general, it's always to show the other developers, my code, how it look like, so I need to explain it to them. There is also a way that you can explain some functions in your code or some lines of code to the others by placing comments. So for example, let's have some console logs here with different statements. So I will say here that for example, I will define log, the login, like here the login or the user successfully logged in. So, and here I will say login, the login error. So user wasn't able to have a login error. And here log the registration error. So in that case, I will say that for example, I am assuming that I am doing this functions real. But now we are enough with the console log. So now I want to show to the other developers that this is logging the lock, lock-in. This is login the error. This is logging the registration error. So how I can explain somewhere in the code that this is explanation of my next comments or next statement. So that's why we come up with the comments. The comments in the code are the part of the code which are not executable, like when you their program syntax or the one that program sequence goes, then it goes to those comments, but to their comments, not the comments are empty for it. So the compiler doesn't read any comment, doesn't complain about the errors in the comment or everything. So in that way, you can define a comment somehow by slash slash. So I have a comment here and I will say, Hey, here is log, the log in. Also, I say here, here, for example, the look in error. So I can also copy paste the comment. And also I say here the year, the registration error. So in that case, we will have that comments for the developers so they know what is a next line is doing. So I am explaining to the other developers, explaining to my team. So when you refresh, you will not see or do you not see all of those comments because they are not executed? So for example, if I go here and I put slash slash, then this got green. I am not able to see it in the console then, because JavaScript, we'll consider it as a comment and it will not read it as a comment. So when we save and go again, we will see that the first to console log executed, but the third one, no, because it's not executed, because it's a comment. That is also another way to comment multiple lines of code. So you can put here slash and then asterisk. And then you will see that hole called GOT green or not executable. But when you want to close that comment in some line, then you have to put again the asterisk and then slash. So the rest of the code which is going after is getting none commented, and then it can be executable as a normal JavaScript. So in this way, you can get rid of all of this slash slash, slash slash work only for one line, but it doesn't work for multiple lines. To make comments of multiple line, you have to put slash asterisk and then you can close it again. So in that way, you define multiple line comments or one line comments in your code. 12. Understanding var Variables: Most of the time, a JavaScript application needs to work with information. Here are two examples. An online shop, the information might include goods being sold and a shopping cart or a chat application. The information might include users, messages, and much more. So in other words, variable are used to store the information, to store the information of the user which are going in the flow of the application of JavaScript or of the script itself. So let me give you an example. As you see here in this image, we see that the variable, we can consider it as a box. And this box has a name and this name, for example, a message. And inside this box we can put a value like for example, hello. And also after that, you can change that value based on your needs. For example, for this message, you can do whatever you want. You can bring it all. You can do some calculations with it, or you can add it to some comparison. Or do you can, for example, presented on the HTML page. Instead using this value Hello, I can use the box name where I can you want, for example, I want to use it in some function or in some object. So now how we can translate this image to a code. So I will go to our JavaScript file. I am going to define a variable called message and the value of it will be hello. So how we can do that? First, you can use the ward or the keyword in Java clip, which is called lead. So with LED, you can define a variable. So the box name is message. So you can say here that we define the box name. And with equal like value or with the keyboard, you can assign a value to that box. So when I want to assign a value which is now a string, we can say we need to have a double quotation or a single quotation. So normally in advanced JavaScript, or in modern JavaScript, we use only single quotations to define the strings. So I will say here, hello. So in that way, exactly how we implemented in the image, we have a box called message and inside it a string Hello. Normally they define a variables in different way. So they can say let message. And then later they say that message is equal to Hello, As you see here. So in that way, I can also use this message variable different ways. So I can see your message hello, message Hello As much as I want. So now I want to use this variable, so how I can use it. So using this variable, for example, we can use it in the console log. So I can't say console dot log. Instead of adding the string, we can add the variable itself. So I will say here, console log message. So after that, we put semicolon for every bike end of the line. And we save. Let's refresh our page. And we will see that we got here, hello, and it comes with the index j is 15. So we have here on the line 15, the message or the box I put into it in the console. So if I do this, like if I define the variable after, like the assigning of the string, then I will get an error because here the message is not defined yet. The JavaScript is going from up to down. When it going from up to down, it will see like there is a message here, but I am assigning a value. But what is message is something unknown. So first it will search for lead message. So when we save and try again, I will get error like I cannot access message before initialization. So we have to initialize the message first. And then I will get the value of it assigned a value to the message or to their box. And then I can do whatever I want with that box or with that valuable. 13. Changing Variable Value: Also we can change the variable value, like the box value. So as you see in this photo, I can throw this string hello as a value from the box and put another value which is world. So in this way that hello, We'll go to the trash and Ward will come again to that box and it will be stored there. So how we can implement that simply, we can assign with equal, again another string. So I will say here, like message, and then instead of putting like hello, I will put world. So in that way, the message, we'll get this value at the end. So let's try to save and refresh. And we will see that we printed the world. Where is hello? Hello went to the trash after assigning the string word to the message. So in that way, the console log will see the last value assigned to the message variable. And y, because JavaScript flow is going from up to down. So the latest assigned value to the box or to message variable is world. So that's why console log console or logged the world string in the console. 14. Constants: There is another type of data storage or boxes in JavaScript which is called constants. Constants are different from variables that you cannot change the values of them after first initialization. So in that way, I cannot say hello first and then I do world. This will give me an error. So if we say that instead of this, we can say cons to define a constant, then the message will take this value and you cannot again, assign the world to it, we will get an error. Let's try that now. As you see here, first, we have missing initializer enclosed declaration. So in that way, we cannot do it in this way. So we cannot say caused message and go another line to assign the value. We have to do that directly. So I will go here and I will say const message, constant, message is called hello. So we can put here as a string hello. And then we will see if we would get an error here. So let's save that. Again. As you see, we got assignment to a constant variable. This is Type I error, so you cannot do that. So I cannot assign, again to the message box a value which is world like, I cannot change that value like we had in the variable or when we find a box with lead. So when we comment out here or when we remove it. So let's do a comment out. So I commented, so this code will not be executed. And save, refresh again. And we will see that we got Hello without any error. So the difference between lead and constant or variable and constant variable, you can assign any value and the latest value of it will be able, or you will be able to work with it. But with a constant, you can initialize a value only one time, but you cannot change it during the JavaScript flow. 15. Naming Variables and Constants: So what about naming the variables here we used one word which is called message. So there are two limitation on variable names in JavaScript. First one, the name must contain only letter or digits or symbols like dollar and underscore. So this is dollar and this is underscore. So in that way, we have to define the variable with this only or those limitations. And the second rule that the first letter or first conductor of the variable must not be a digit. So it must not be a number, because otherwise you will get a reward like that. So those are the rules of naming variables and constants in JavaScript. So I can say here, for example, message box, this is a variable, or you can define it like this way. Message dollar box. You have a freedom totally. If you are following the rules, also, you can use numbers here or in the middle. You can use numbers. So there is no, any problem using numbers in the middle or at the end of the variable. But what about naming convention? Naming convention normally if you remember, we talked about camelcase and keep up gaze and also the Pascal case. So that common naming convention in JavaScript is CamelCase. So I will say here instead of message box, I will not use, like we can say here, the underscore, which is called Snake case. I will say message box like this. So the camelCase, first letter, small, and first letter or the second word is capital. And of course, I want to mention that it's case sensitive. So message box like this is different from Message Box, which is like this. So you cannot say those are the same because there is case sensitive here and the letters are totally different. So those variables are those two constants are different. Also, there are some words which are reserved by JavaScript, so you cannot use any of that, all those reserved words. For example, one of the Reserve Board, as we will see later, is called return. So you cannot use this word as a variable. Also, you cannot use glass or you cannot use as well function as we will see later because it's a reserved word. So we will see many words which are reserved in JavaScript, which you cannot use as a naming of the variables. So for now, this is the camelcase and we can define the variables with some rules like no number at the beginning, and also only score and dollar sign can be used. 16. Data Types: A value of variable in JavaScript is always off-center and type. So for example, we can say this is a string because we are defining it as a string. Or it can be a number like one example, I have two here, 43. So then in this way that this constant will have a type as a number. There are eight different basic data type in JavaScript. We will cover all of them in general in this course, but we will focus on like additional sections about numbers, for example, and about strings and the main important types. So for example, we have numbers. You can define a number in this way, or you can have a floating number. So all of them, they are defined as a numbers. We will talk about numbers more in detail. Also, we have a strings, as you see here, we define a string as well. We have Booleans, booleans which can be false or true. So in this way, we define the variable with those two keywords, false or true. So in that way, this constant or a variable will have a type which is called Boolean as well. There is the undefined type and also the null type. We will talk all about them in the next sections in more detail. So here I can say that I have message box number. Or we can say like const number. We can define a constant number. And we can have a const Boolean. We can say Boolean like this. And we can have as well a const as a string. So here we can have const string and I need to fix this to be by camel case. So we can have here, like we have it as a string. We can't have the three types here. So let's console log all of them. I will console log the number, I will console log the Boolean, and I will console log as well, the string. So we can have here console log and we remove this, we put console or const string. So let's refresh the page. As you see, the string is always in DevTools as a white, but the number has this violet color. So you can distinguish between the number in that way or if it's a string. So here I am defining the number like string, it's not a number. So if you refresh, you will see it as a white, so it's a string. So in that way you need to distinguish. So this is not a number, is a string because we have those quotations. But in this way it's a number. Also, there are typos are called objects. We will talk more about them in detail and we will see all operations about them. But for now to not make it more complicated, we are enough with those three types, number, Boolean and string. 17. Integers and Floating Numbers: In modern JavaScript, there are two types of numbers, regular numbers and big numbers. The regular numbers are the numbers which we know already. And also there are the big numbers, or we can call them big integers. These big integers with the R comes with a lot of zeros. So for example, I will have here that I can know that for example, I have 1 billion and then 1 billion will come with 900. This it will be implementing a big integer so far that you can use big integer in JavaScript as well. And also normal integers like which are less than, we can say 1 billion. They are always normal or regular integers. But imagine if you want to write, for example, one billion. One billion comes with how many zeros? With nine zeros. So I will have here 123123123. In this way, I will not understand how many zeros or my eyes will not catch how many zeros I have here. So one way to define a big number is two, separate them with underscore. In that way, it will be kept as a number, but they are easier to read. So many member, if you see underscore in the number, that's mean it's not a string, but it's really staying as a number. And it's big number or it can be regular number as well. So let's try this example and refresh our page. And we will see that we console log that number and the underscore removed. So we have the 1 billion normally. So the handling of that variable in JavaScript will be taken as a normal number, even we had here under score. But as a developer, it's easier for me to read that number. Now, there is another way to define a number or define a number with multiple zeros. So for example, I will take this constant and I will give it, for example, different name. We can call it as well, billion. And this billion, it will not be like this, but we can define it in a way like one. And you put E and this E define how many zeros behind or after the one. So I will have here 1, e and then 0 or for example, then it will be only one. And if I want 1 billion, then I will put nine zeros. So in that way, if we console log that number also, so I will put here caused, we can consult low-cost number billion and also the non-motor cons number which we had before. So we can see in the output one billion, one billion, and we will see that like the output in the console log. So when I refresh, as you see, I had here 1 billion as well. Let's put six. So we will save and refresh again. And we will see that it's 1 million, like six zeros. You can put as well here like for example, five and then 56, it mean like I will have 5 million. So in that way I can define a number. You can write the number normally without any separation, like underscore. Or you can write it like with separation to have like more friendly reading. And also you can write it in a short way, like how we have here with the E. So also, if we put what example here, 5.7 or 5.56 zeros, what will happen in your opinion? I think it will be, for example, 5 million and 500000. Here I put 5.5 as a float number, like normally you remember we defined the float numbers as it is. So you see here like five-point, like 555. But if you put, for example here 5.6 and then E, for example, I want three zeros. So I will have 5,600 because the three zeros, or it can say like this one is 5.6 multiplied by 100. So in that way, I can't say that this equal to multiplied by 100 thousand. This operator is multiply. We will see it later. So now if I save, do it again, I will get the same result. So in this way we can define the numbers in JavaScript. There is opposing way that I have to put, for example, like minus here. So if we put here like some minus after the E, then it will be in minus. Let's remove this five, 5.5 and I will have five e minus 6. So when we refresh, Let's try that. We will see that we went in the coma or in the float like under the 0. So in that way, you can define also better than saying I need number 0, 000, 000, 5, know you can say it in this way, five, e minus six, and you will get the same result. It's exactly the same way how you are dividing by 100 in our example or in 1 million. So in this case, I divide 5 by 100000 and in this way I will get 0.005. So this is how we are handling the numbers in JavaScript in this way. So you have all the ways, the optional way or the option to define your numbers as you want. You can declare them really like without any all of those separation. And also you can declare them like this. The floating numbers, as I told you before, we can define floating number easily. So we can say here floating. So the floating number, you can just define a zero-point 85. Or even if you have like, like in a way like for example, 5.5, okay, I need to declare it, but if you have 0.5, you don't have to put the 0. So it's enough to have it like 0 or DOT 5, and it wouldn't be defined as 0.5. But when I save here prettier plugin, which I talked about before, it's changing for me the format and it's making and saying that it's better to declare it like this. Of course, we can change the configuration of prettier, but we are not in that level now. We are just with the basics. We will see later how to configure our editor more efficient way. 18. Numbers Operators: Like a calculator, you can as well do some operations on the numbers. So there are operators in JavaScript. Let's go back to our code. Let's organize it a little bit. So I will keep here that constant number and also const number billion. We put like the console log after every assignment or after every variable. So in that way, we will be easier to change and read those values together. So in that way, I will put as well this one here. So we have console log for everything. So this number floating, we don't need it. So we have variable and constant and we are consoling log it. So now let's do some calculation. So for example, I need to have edition. So in that way, I can define a variable. I can say let, for example, x will equal to five. And also we can have let y, it will be equal to seven. And also we can in that way add X to Y. So in that way we have to say, let z equal to 5 plus 7. Or in that way you can say that actually x plus why? So in that way, it will be replaced by x, the value five, and by y it will be replaced the seven. So after that, we can console log that value. So we can have here let z, and this zed will be logged in here, and it will be the addition between x and y. So if we save, we get here 12, which is great. Also, you can have like directly operation on the numbers. So I can't have here five plus one. And then that is all. It will be 13 because here I have six and the y hat seven. So like 67 is 13. The same thing goes for multiplying. So I will have here instead of plus, I can have here multiply, which is as strict or a star. So you have a star here, then it's multiplication. So when I refresh, I will have here 42 because six multiplied by 7 is 42. So let's remove this one and try again. And we will have 35. So seven multiply or five multiplied by seven, I would have 35 of the value of z variable as well. There is the subtraction, so subtracting x from y will give us also the results. So you just have to put minus instead of multiplying. If you try that and refresh, you will get minus two because five minus seven is minus two. And of course, if you put like here bigger number, so sorry, we can go here again. We put here 15 and then refresh. We will get eight because 16 minus 7 is 8 as well. You will have that dividing method. So you can as well here instead of minus, you can have a dividing. So slash, it mean dividing when you have to type or two numbers, then it will give you the division between those two numbers. So Zed will have X divided by Y. So in this way, I get this result because 15 divided a two by seven. That is also the modulus. So you can have here mod, so percent it give you the result or, or the return, that division remainder. So in that way, I will say here, refresh and then, okay, 15 multiplied or Module 7, it will be like one. So in that way is the rest of the division. Okay, there is also another thing which is called incrementing. So I can increase x somehow without saying like 15 plus one, there is some shortcut. It helps you to do that. So I will say here, let's console log all the numbers. Here I have here console log, console log as well. So here we have x and y and then z. Okay? When I say here x plus, plus like to time and then semicolon, then x will be increased by 15, so increased by one. So I will put here like when I save it again, okay, first is 16, so x console log is 16 because it's added here. So we have addition or plus, plus. And also y is seven, it stayed the same. And zed is a modular population, which is one. So in that way you can increase X and the console log will follow the last changed value on the eggs. So in that way, you will be able to see the result of the last change of that variable. Maybe now I can explain more than constant. So if I say not lead, but I will say const. So x is a constant. Now if I refresh, I will get error assignment to a constant variable on line 27. So here it's like I change the value of x. So the value of the x is really changed. So in that way, I cannot change it because it's constant. So in that way, always when you use these operators, you must use let. The same thing goes for minus, minus. So I will have here minus minus, and then the number will be decreased by one. So 15 minus, minus is 14. So in that way, we have doing like some shortcut for increasing or decreasing the number. That is also the power. You know, in mathematics there is something called power. Let's define a variable, call it a. And this a will have, for example, two and then two multiplies two times, and I will put for example, three. So in this way, I am saying that two is power three. So two multiplied 2 to 3 times 2 multiplied to do multiplied to two again. So let's console log a, so we should get eight. So in that way, we will see that it's acting like a power. So let's save. Okay, we have here eight. So it's like I said, multiply for me to three times. So first two and seconds, and all of them multiplied three times. So we have here the same result, which is eight. So when you do the multiplication 2 times, it's called like a power. So I put here like six, and then I will get 64. So two multiplied by itself, six times. 19. Operator Precedence: Okay, now I have question for you. So I defined a variable B in this way. So I say one plus a, 100 plus 50 multiplied by three. So what will be the result? Is a result of the example above, the same as 150 multiplied by three, or 100 plus 150. So this what we are calling operator precedence. So in this way, I can know which is stronger operator than the other. So let's try that and see the result. When we refresh. I got 250. So the same thing of 150 plus 100. So in that way, I will know that multiplication is stronger than plus. The same thing. Multiplication or division is stronger as well than plus. So this operation will be done first, and then it will be done this one or plus with the 100. So to change this periodicity or this strength, we learned in mathematics that we can use parenthesis. So when I put here one, patent offices are around those operators. So I have here now, 100 plus 50 will be stronger than multiplication. So let's try that. Refresh. I got 450, so 150 multiplied by three. So in this way, I change the periodicity of the operators. So this is called injera clipped or in mathematics, precedence. 20. Checking Number Methods: When you take a variable which is defined as a number and then you put dot, then you will have some comments over that variable. So when I will say here, for example, b dot, then I will get as autocomplete from Visual Studio Code some methods, this square here or this cube shows as a method. So there are multiple methods for the numbers, and also there are methods for the strings and also for other types as we will see later. But as long as we are in numbers section, I'm going to talk about the numbers method now. So first of all, there is to fixed, to fixed, it's doing a rounding for the number. So when I have the number two or 0.9, then it were rounded up and it will make it as one. So let's try that. So I'm going to define a variable. So we can say here, let, and we can give it a name c. And this c will have like 0.9 as an example. So what I say, another variable let the will be C dot fixed. So in this way, I am assigning or giving a command to the C variable to be changed. But the variable will not be changed. But the result of that will be assigned to the, so like the C will stay as it is. It will not be changed, but do fixed. It has a result. And this result will give me a string. And this string will have that, the number which will be one. So when we console log this D, I will go here, take it a console log, and I will console log it here. I will get 0.9 rounded up as a string. Because you see here the output of method is string. We will talk about more thoughts or parameters in more detail. So let's see that in our eyes. So when I refresh, I got here one in line 42. So this one is one, and as you see, it's not violet, it's white. So it means this is a string as we saw before. So to fixed, rounded up the number and change it to the type string. And as you see here, D is a string. If I put the mouse over that variable, there is another method, let's discover it. So we can remove this to fixed and we try another one. It's called two exponential. So in this way, when I call that method, you have to put always this parenthesis. So you have to call that method, as we will see later, we are calling that command on the variable C. So when I save and go again here, you will see that is old, it's 9 minus or e minus 1. So it's like multiplied 9, multiplied by 0.1. In this way, I will get 0.9. We talked about that previously. There are, of course, another methods we can see them discover them, like for example, to press this session, I will talk about it later. And two string also, I'm going to talk about it later. But actually it's converting the number to a string. This is the simplest answer about it. So when I have here C dot two string, then D will have a string value of c. So we will have here, C is, D is 0.9. But if I console log the C number, so I have here to see, as you've seen here, we will have 0.9 in violence Because it's number and this like D got changed to a string and it's also 0.9. So in that way, the output of this method is changing the variable which we are calling. 21. Parsing Strings to Numbers or Opposite: As I told you before, we can also parse the numbers to strings as we see here or as we did here. So C got transferred to a string and assigned to the D valuable, and it's printed here as a string. What if we want to do the oppose it? So I want to change a number as a string to a number. So in a way, like I can't say this C is a number or a string, and I want to see it as a number. To do that we have multiple ways. First, the global way. So I will go here and instead of say seed to do string, I want to see D as a number. So I can put here like capital letter number. It's a keyword in JavaScript. And then I open parenthesis. And then I will say that the value which I want to change to a number. So I will put here either like the string, I put here an Easter egg, like a number. Or I can put the variable which I want to convert because the sea valuable hold the string number 0.9, then I can use it for this method. So I can say here number c. So let's save, and we will see that first locked is a string number and the second is the number. So when we save, we will see that the first one is string number, which is c. And the second number is the, which has a violet color, which is the number. So in this way, I defined or I converted that variable from string to a number. There are another ways also for parsing to a number. One of them, if you know that type or the like, the value of C for example already. So here it's 0.9, so it's a float number. So you can't say here, instead of like number, you can hear say, parse, float. So in this way, I am parsing that number or changing that number using a string to a float. So in this way we will get the same result and what it's changed also to number. Also, if I know that C is an integer number, like I will put here 10, then when I put like for example, parse int, this is integer, like parse this string to int, then I will get it as an integer. So if I have like for example, 0, for example seven, and I am using parse int. So the output of bars end will be number, integer number. It will not be like a float number. This is how the expectation. So I am using or parsing float string to integer. So let's try that. And we will see I got then 0.7. This is the value of the sea as a string. And then I got only 10 for the d. So in that way, It's subtract all of this. 0.7 is subtracted from that string. And it gave me that is old as a 10 only because I said part or parts it. So now if I have this as a parse int and I want to change it to parse float in that way. So I have here an integer as a string. Of course, I want to convert it as a float, so I would get float number. Let's refresh that. And you will see that parse float kept it the same. So when you are always sure about the variable, like if it's float or number, then you can use the proper method for that. Otherwise, you can just use a number and it will help you to avoid parse float and parse a string. Okay, now I am going to do parse float for C, but I will not here put a number, I will put something else, like let's put a string. I will put, for example, apple. Okay? And in this way, when I print that, Let's see what is the result. I got something, none. So D got some resold from parse float as nan, not a number. This 1, 2 we will talk about in the next lecture. 22. NaN Not a Number function: So we saw in the previous lecture how we got none. Like not a number. It's like shortcut for not a number. So in this way that it says that D got some value at parsing value. Of course, even like when you say parse int, you will get the same value. It's none. So the gut a value called None. And this non-value is defined in JavaScript. So it's like this. So it's like a fixed word which is, has a type number, but it's not a number. It's saying that, okay, this variable is not a number. Be careful, don't use it. So in this way, I will know that D is not a number. So in the future, when you want to know if this number or this variable has a value, NAN, like not a number or not, then you can check it. You can check this variable to see if it's really number or not. Because sometimes when you have thousands lines of code, It's really hard to track that number, especially if you are do a lot of parsing on that variable. Also parsing from string to integer or float to an integer, et cetera. So sometimes you lose the control on that variable. So its better way to see if this variable has a number or is it type number or just a string? Now it's easy weekend, see it like we can see that C is a string, of course it's not a number. But of course, as I told you, when you lose control over the variables, then you will know how to check if this C is a number or not. So in that way you can say here is none. So is none is a method for checking if this is a number or not. So when I say like is none for C, then it will check for me if c is a number or not. So D will have one of two values, true or false. Like when it's not a number, like a string, then D will have a true. So in our case when I console log this, I will get a true. So let's try that. As you see, we have here a true because it's really see is not an app bar because it's not stirring number because It's Apple. But when I put here 14 for example, and then I check if it's number or not, or it says is not a number. So in that way, I will get false because c is a number as a string, of course. So here is none is checking a string if it's number or not. So you can check by this command, any variable if it's number or not. So it's exactly the same way as this. So is none. Or 414, like is not a number, then it's false because it's a number. But when I put, for example, any string and refresh, yes, true? It's not a number. The gut that value. 23. String Literal, Function and Syntax: In this section we are going to talk about strings. Strings we saw obliviously that we are printing a string in the console log by defining it between the quotation, single or double quotation. But now let's remove all of this code to have more clean start because I attach this code with the previous section. So at the end of every section, you will see the code which we worked in the whole section. Okay, now I'm going to delete it all. And for strings, there are, as we said, multiple methods to define it or define a string. For example, we can say let x will be in a single two quotation. We can say this is a string. So in that way you can define a string. Also, you can define a string in double quotation, as we said. But here prettier is changing it to double quotation. Because when we save per year per fare that we have that in double quotation. Of course, we can change those configuration. So prettier, we'll consider it as single quotation for the string. There is also another way to define a string, but using a method. If you remember, we used before number method, this number method letting me to convert some string to a number or anything else. So now we can use as well some word with capital letter which is called string. So in that way you can as well defined a string using that method. So I will say here let y, and then I will say this is or weekend, say string. And then we open parenthesis and we have to specify a value. And this value, it's called like for example, the string itself which we want to define. So actually it's the same way exactly. But here is more constructive. And we call this as a constructor way. But of course, the modern way is always to use the equal and directly you can define your string. But here you can say as well, like this is a constructive string. So we can add that. And then Y will have this value as a string as well. So we can say console log. You can put the word log and it will show you in the submissions and you just press Enter and it will add for you the whole sentence. Visual Studio code will take care about it. So we have to put console log x and console log y. And then let's print that value. So we have here, this is a string and this is a constructive string. So all of them the same, exactly the same way of defining a string. For me, I put affair this way, which is defining a string inside quotation, double quotation, or in a single quotation. 24. Multiple Lines in Code Strings Using Back Ticks: In modern JavaScript, there is also possibility to use the back ticks. What I mean, backticks is used to have multi-line of stirring. So here in this case, if I do like this, then I will get an error because I cannot have multiple lines for this string. But there is definitely a great way to do that. So I can switch those quotation with something called back tick, which is this sign. And also you can close it in the same way. So this is a string, will be a string as well, so it will be defined as strings. So here we have a string, but when you press Enter, you will not get any error. Because this is saying that you can have multiple lines string as much as you want. So as you see here, I have, this is a string and I have multiple lines. So it's sensitive for that. It can't see all of these lines. And it's considered that everything between those ticks will be a string. So now let's refresh. And we will see in the console log, it's exactly how we have written it in their code. So for that, it's very beneficial to use the back ticks and also use them for printing longest strings. Especially if you have a very long line of code and you don't want to put them in. For example, like a long line like this, or for example, if I have long line, then I go like this, which is bad for me. So in this way, you can divide your strings to multiple lines and you can have them in the console log like this. So double quotation actually is not sensitive for multiple lines because otherwise you would get an error in JavaScript. But backticks, it sensitive or that. And everything between the backticks is a string. 25. Strings Escape Notations How to Write Quote in a String Variable: Okay, If you want to say like for example, I want to have a double quotation inside the string, like I want to print in the console log double quotation as well. Because if I put here like okay, like weekend, say, John said. And then we want to put double quotation. Otherwise it will be closed like this. So this is wrong and it's giving me error because the double quotation is a closing for this quotation. So you have one of two options. May be, you can put this as a single quotation and close it as a single quotation, then the double quotation here will be considered as a string. So in that way, you will have all of this as a string and you will not get error. But if you want to keep the double quotation, you can escape this double quotation. So it will not be considered as a closing to predation of this. So you just need to put a backslash. So with backslash, you can't say that this quotation or double quotation will not be considered as a closing quotation. So here as well. So the one which is, doesn't have a backslash will be considered as a closing quotation of this. So let's save that and try again. Okay, so here we see that prettier changed it for us as well. So he says that it's better to do it like this, better than having all of these quotations. So in this way, when you want to see it in real, you can disable simply the prettier. So I'm here asked for reload. So I disabled it. I went to extensions and I disabled it. So now, Okay, I save, that is nothing happening is not changing the format. Now. We save, okay, we have the quotations, even they are escape protections. So in that way, you can have the scape letters. So the letters which you need to use inside a strings, and they are a key words, for example. So let's enable prettier again. That's it. It's very simple to enable it. You go to extension and you have it installed and you just click on it and you have disable or uninstall, like you can remove it Totally. So now prettier suggested that this is a better way to define a quotations inside a quotations. So we have it like that. This is gold strings, scape notations. So I have here escaping notations. One of escaping notations also, if you remember, I told you in the previous lecture that we cannot put multiple lines for like strings with quotation. You can do that also escaping quotation. So you can say here instead of this column, for example, I put slash n. So slash n will format me this string with a new line. Let's console log it. And as you see here, I have John said this is a string. So in this way here, n acted like an enter, like a new line. So when you save it like that, so it's all on the same line. So here how you put lines in a normal string without using backticks. So all of that is possible. There are multiple escaping, for example, escape notations, as I told you, multiple of them. For example, there is the one with a tab. So when you put slash t, then it will put this dense as four spaces of like, like a tab. You don't like, it's like when you press tab here. So the same way, exactly. And as well, there are many staff like break space or for example, form lead. There are multiple escape notation. You can Google them and try all of them. 26. Insert Variable or Constant in a String: So let's say that we have a variable called, we can say before X we can give a name like that. A is like we can give it a name, for example, myth. So here we have a string called Smith and also x. So in that way, I want to say that John is a friend of the thymus. So how I can put here like, oh boy, we have here Smith. But how I can put the variable honesty instead of math. So I can say here, john is a friend of a, as you see, it's considered as a string. So when I print it, it's a, so I can say that this is a valuable, not a string. It's very simple. There are also operations on strings like how we have with the number. There is addition, like a plus. And with this plus, you can put a variable after it. So I have here a string, plucks that variable, then it will join those two strings together. So when I say here, I would say John is a friend of myth, but here there is no space. So I need to put space after the off, or you can add another plus ad. You put two quotations or two double quotations and space in them. So in that way, you will have, Joan is a friend of f miss. So with this way, you will have possibility to be able to join. We can say there's strings together. There is also another great way which is modern in JavaScript. And it's really great as a modern JavaScript. And most of people prefer it nowadays. So what is it? So if I changed those two backticks, I switch here to the backticks and then I don't have to put plus a. I can use this form like dollar and then curved brackets, something like that. And here I can put the variable. So inside these brackets, I will have valuable. I can write JavaScript code. So you can put here whatever you want with this JavaScript because you used the backticks with those dollar sign and the curved brackets. So when you save, go here, again, you will have the same result. So it's exactly the same way. So when you repeat it multiple times, it will be the same way. As you see, can put it also at the beginning, anywhere in a string. So with that way is very nice to combine variables with drinks or combine JavaScript strings with JavaScript code. So this is the end of this lecture. I hope you enjoyed it. This is very modern and very nice to use always that way to combine strings. It's better to not use like this plus and then a, no. I prefer to use like the dollar sign and curved brackets. 27. Checking String Methods: Okay, in this lecture we are going to see what are the methods of the strings. If you remember, we had some comments for the number, like changing it to string or changing or it to some specific way or specific format. And we are going to have now the same for the strings. So exactly how we did with a number, we would hear a dot and then we got all the methods which are possible to have for the numbers we can have as well here for the strings, I wouldn't go with the easiest one and then go step-by-step to the bigger one or two, the more heavier one. So first of all, we can have a console log directly of a method of stirring inside the console log like you don't have to create a variable like I can say here. Let length, and then I say x dot length for example. So in this way, I am going to print lengths. You can use the methods directly in the console log. So by the way, this length is giving me that length of this string. So how many letter or letters inside this things? So let's try to print that. And we will see that it has 25 characters in including the spaces. So this is for PX. Also there are another methods. Let's have a console log for them, for each of them. So I will have here x dot. And we can have, for example, char at. So we can have here char add. And when you open parenthesis and you put a number, it would give you that letter in that place of that number. So it would count from 00123. So let's put three, I think we would get n. So when I put three here, give me the char character at the third position. So when I save, go here, I got n. So in this way you can get a specific character from a string. Let's console log something else so you can as well here use the back ticks method. So you can, or you can also use a normal combination. So I can say here that jar at three. So for example, and then I put a plus. So in the output it will be at three, it will be n. So you can put here also column, Sure, like this, okay, job at three is n. So we can name our methods, all of them like this. So let's copy this one and pick up another method. So I can say here as well, x dot concat, x two dot concat, it will concat estimating like it's exactly how we did with this equal. So I will come at this string with another strain. For example, we can say here a variable like this one, myth. So I concat x with a. So we can say here not Jar add, but we say CONCAT. So we save, we refresh concat. John is a friend of myth. So here we had the two times because we had a year already and also we concatenate it with another a. So we got also thymus. So we can add, also hear our own string. So we can have here something like end, like Peter. So we can save, go here. We will say join is a friend of Smith, contact or concat and Peter. So you can also put space here. So x got combined with an Peter. So it's exactly like this way. Okay, Let's move to another method. So let's copy this console log again, another method. So you can say here like x dot index off. And you can give some character. So you can say I want index of or. So it will see the first occurrence of all like here in John and return its value. So we can say here, index off. And then we say Here all and we save index of all. The first occurrence of all is at the position one. So 0, 1. So we have here, John. So let's have here, for example, f trike and have here F. F. So the first occurrence is at the tenth position of f in this X-variable. Remember, I'm using the X variable when you want to see the latest occurrence. So I will go here to console log and I am going to add last index off. So last index of F. Let's see. So here we can replace it as well. And we will see it's 18 because here I have f and here I have f. So in that way, I got at the beginning, first happened or first occurrence, and the second or latest occurrence of f. There is also a great method which is called replace. So we can say replace, replace all F's for me with x. So you can say here, replace. So after that we have, we have to put x dot, replace all f with x. So instead of, John is a friend to will be extra and song as you see here. So Joan is x rent of Smith, and it's changed only the first occurrence as well because this f is unchanged. There is also another method which is called to uppercase. So you can also use or change the sentence to uppercase. So I will say here just to uppercase and you don't have to pass any value for that comment. So we can have here two uppercase of x. So we save and refresh. And we will see two uppercase. And as you see here, it got to uppercase. There are multiple methods of strings. You can check them. They are very easy. I put exactly an example. I attached it. This lecture or in the next lecture with the code which I wrote here. So you can try them by yourself. Most of them, they are easy, but there are some of them we will, we will see later in the next lectures when we talk about arrays and objects, I will attach this cheat sheet for you so you can read it and try things around. Most of them are easy and don't worry, totally. 28. Boolean: I showed you before quickly about Booleans. Also, we can define a boolean variable. Boolean variable can be true or false. So in this way, I'm going to show you how you define this Booleans. Normally Booleans, we can name them in some way like a name with starting with is. So for example, is, for example, we can say is big or small, is, we say is minimized or is capital, or like this. So you can define always the Boolean variable in this way. So let's define a variable I'm going to call it like for example, is checked. So this variable will have is checked. So it can have a true like this or it can have as well false. So it can have one of two values. So in this way, we define a boolean. So they usage of the Boolean will come in conditional, for example, brackets or in conditional. We can say scope, as we will see later. Like when we say like if this variable has a true, then do something else, do something else. So we will see in the future how we are going to work with if statements. And we will know more about Booleans and their usage. For now, boolean is a value or it's a variable which can have one of two values, true or false. 29. How to Check Type of a Variable or Constant: In this lecture, we can see what is the type of variable. So how we can know type of constant or a variable. For example, as I told you before, we will have one thousands of lines of codes. So we will miss in the way, what is a type of the variable because for example, the variable is defined somewhere else in some connected file and we cannot detect it. And sometimes I want to say like what example, if the type of this variable is a Boolean, then do something like this. Or if the variable has a type of string, then do something also. So in that way there is operator called typeof. So let's define a variable. We call it, let's say let. And we can say type of variable like this I variable. And we can give a value for this variable like a string or let's give it another name like to honor to have confusion, I will say my name. So my name I will say for example, fatty. So I will console log here the variable, so I will see what is the type of it. So I will say here, using the keyword which is called type off like one word and all of its small letters. Then you put space, and then you put the variable which you want to know the type. So after that we save. And we will see in the console log after we refresh the type of that variable. So I will refresh and we will see that we got a string. So all console logs past. And also we have this console log on line 26, which is saying that the type of this variable is string. So let's give it like for example, a number so we can change it to a number, refresh, okay, As you see, it's a number that's give it, for example, a value false, like it will be Boolean. So as you see here, we have a Boolean. So let's give it nothing. So we can say just let my name without assigning any value. So let's see what will happen when we refresh. When we refresh, we got something called undefined. So undefined is also type of variables which we are going to talk in the next lecture or in the next lectures about because undefined is something is not initialized. So this variable not initialized with any value, like it doesn't have string, it doesn't have number, and it doesn't have Boolean. So in that way, this variable is undefined. So in general, when you want to check a variable type, you just have to say type of my name. So in that way, you will be able to get or retrieve the type of any variable. Also, you can retrieve type of directly some value like I will say here, my name like this. And when I refresh, I will get it as a string. So either you pass a variable or you can pass directly the value. 30. Null and Undefined: So as we saw before, like when we didn't assign any value to this variable, we saw that it's undefined. The undefined type comes when you don't assign or when the variable doesn't have any initialization. And it's also a type like a string number and also Boolean. So we can say that I can define this variable as undefined like a type of it. Okay? The other subject or the other value which you can give, or the type which you can give to a variable is null. Null is also like nothing, like it's not, doesn't have any value, it doesn't have any type. So null is giving us the feeling that this variable doesn't have any value. And also, like we cannot say type of an eye, I don't expect from it, like I will get a string or I will get a number. So the value null is used normally when you want to assign a variable for nothing. For example, this variable I can say is checked, has a value before and I want to initialize it with nothing. So you have two ways. Like one of them is that you can say that this is undefined, like this is uninitialized or not initialized. Or you can say this is null, like both of them are fine, but the most US and I advise you to use is non-value. Null value is not equal to undefined. Be careful, like if you say that if this equal to this or this undefined equal to null, you will not get through. So they are totally different. So none is everything. What is our type of everything which is not mentioned before? And always refer for nothing or empty or value is unknown. So normally that undefined is reserved as a default initialization value for unassigned things or unassigned variables. So when you define a variable, you will get as undefined. It's better to not assign undefined by yourself. Also, when you want to assign a value which is like it doesn't have any value. Like we can say a variable, it doesn't have any value. It's better to give it a null, not undefined. 31. Nullish coalescing operator: In JavaScript, there is a way like you can give a variable sum value of another value as we saw before. But when this, another variable doesn't have any value, we can give it a default value. So let's explain that. So first of all, I can define a constant and I call it my, for example, name two or the second name. So I will say that this variable is equal to my name. But in a case, my name has a null value. I can say that my name to with get a default value. So how I can do that for now, okay, we can save, we can also do a console log for this variable which I have defined, which is called My Name two. And then we will get, as well as this variable. So we will get in the console null. So we have here null. So now I go on to show that, for example, this has a value, I will say like for example is fatty, again, like my name. So I get here like the type is string and my name is fairly the console log because of assignment of this variable, my name to my name too. Okay, so in that way, when I say Okay, my name, okay, we'll get the same value of that, my name. But I want to say if this one, my name is undefined or not initialized yet, then I can give for my name to some default value. So I will say here to do that, I can put two question marks. And then I gave the default value, which I want. For example, I will say my last name so far, the noaa. So in this way, when I save and my name is undefined, then I will get for my name to this value which is called no. So this is like a knowledge or knowledge check. We can say knowledge coalescing operator. So in that way, my name to get this as default value when my name is undefined. So let's try that. Okay, As you see, this value or this variable is undefined. And it got this value, which is like the second option for after this knowledge operator. So when I give a value to my name, so I will say here Friday, okay, this is now defined. It has a value which is called fatty. We save and refresh, okay, that our variable, my name two, we can say here to have it easier, my name two equal. And we can put here plus just to learn and equal to my name. So let's save. Try again. Sorry, I have here save. So my name two is equal to fatty. But when this is undefined, then I refresh. It got no, because here I have this value or this default value. So take by default this one if this one is not defined or null. So when I give this to null as well, it will pass to default value. So this is very good for initializing variables. When you are not sure that some variable has null or undefined, then you can assign a default value, which will be for sure for that variable. We will see that in more academic or in more advanced subjects, how we will operate all of those things together with ifs and loops. And also in the context of their code. 32. Comparison Operators: We know maybe comparison operators from mathematics and also they are available in JavaScript. So let's assume that we have two variables. I will say here, let a, for example, is a number like two. And also let b is a number like five. So now I can say like a bigger than B or like be bigger than a. So in that way you can define all of those comparison operators also in JavaScript. And also you can check if these two variables are equal to each other. So how we can do that? Let's try to console log again. So that's why IT to the, for example, the console log to see results in front of you. So I will say, for example, a is greater than b. So this will compare for me a with B. If a is bigger than b and it will return the value of true or false. So we can check that in the browser, I refresh, I got false because it's really true that a is not bigger than B, but it's less than. So I can say here is smaller than, so when we refresh, then I will get as a true. So with this signs, you can say that all of those mathematics comparison operators, you can also define them in JavaScript. So also you can say that if a bigger or smaller or equal, like you can say like this, if it's smaller or equal. And also you can say it greater than or equal. So in this way, when a is bigger than b, it will return true. When a is equal to b, it will return true as well. So let's try that. I will give to a eight value. So let's refresh. And you will get a true and also an I put like a as five, then they are equal to each other and I would get as well through. So what if I want, like, for example, let's say, like to show you the other example if a smaller or equal. So I will get through as well because it's equal. So let's give a, like a bigger value. So we can say, or smaller value. So we can say we will get as well through if we give it bigger value, now a is bigger than b, so this condition is not achieved. So I will say here or I will get here false. So in that way you can compare between the variables. What we are missing now is equal only I don't want greater or smaller and equal. So we can say as well, only equal. So only equal when you put that, it's conditional. So it's checking between two variables or two values together. They equal to each other or not. So when I say that is a equals 4 b, no, false. When I put a is equal to b, then I will get a true. So in that way we know that a b equal or not. Okay? I can check as well if it's not equal. So I can say here with not, so this is not, so I say not equal. Exclamation mark means not equal. So in that way, I will say that if a not equal to b, so it will return for me a true, as you see here, I refreshed, I got a true. So let's put them equal to each other. I will put here five. And I got false because they are equal to each other. So here I am requesting if they are not equal or not. So if this way I can say like when I have a valuable or like I can define a conditions in my code sequence. I say if some variable is not equal to some variable, the Zen do something. So this comparison operators, they are used in JavaScript's exactly how we are using them in mathematics. So for that, I want you to train on comparison operators to see in the future how we are going to work deeply with them and make our logic of our programs. So this is with number. What if I have, like, for example, two strings together? So the two words is comparing letter by letter. So I will say here a like as a string. And here I will say z. So I will put here x0. So I will check if a bigger than zed, look, they are strings, so we can check that. So I will save, refresh. I got false. Okay, is equal smaller than b, okay? It's a true. So it's checking also orders of the strings. So if I say like a zed a, E. So we will check if a smaller than B. So it will check letter by letter. So I would say a is smaller than that. So we are done. If a smaller than z, then okay, we are done, but what if they are both a? So I am going to compare a and a are equal, then it will move to the second character automatically and check them together. Z is smaller than e. No, it will give us false. As you see here, it's false, but when I switch those letters, so here are equal, okay, so it doesn't have any value, so it will move to the second letter. It will compare H-I with Zed. So it will check if E is smaller than that, then that's through, it would give us a true. So this is the way how you can compare as well, the strings. Okay? What if I have a and B you from different type? For example, I will say that I have a here as two and here I have it as a number, like one we can say. So here is two as a string and one is as a number. So let's see if the compression work as well. So I will save, refresh. I got false. So a is smaller than b is false. What if I put bigger or greater than? Let's try that. I got through. So in that way, this is equal to something, like I said, a is equal to 2 without a string. So the compression will try to change it to a number and then it compares them together. So in that way, you can also compare different types of viable together. Also, we can say that if a is equal to true and this be equal to one. So you can compare them as well if they are equal to each other. Let's try that. We will see that it's returned for us true. So true is equal to one, but it doesn't equal to 0. So let's try that. Yeah, it's false. So false logically is 0 and also through is one. So in that way, you can see here we have true because false is equal to 0 as we are comparing here. 33. Comparing === and ==: There is something in JavaScript which is called strict equality. Strict equality is a regular equality check. But this regular equality check which we had before like this one has a problem. It cannot differentiate between 0 from falls, as you seeing here, because it's always returning a true. But in the same things happen also when you have empty string. So I have here like an empty string and I want to compare them together, I get through. So empty string is equal to false as well. This happened because the operands of different types are converted to numbers by equality operator. And then empty string is just like false, becomes 200. So the empty string is equal to 0 because it's converted to number as we saw before. So what do we do if we want to really differentiate between the 0 and the false or empty string and the fault or the false. So as strict equality operator, check the equality without type conversion. So in that way, when I put a 3 equals together, I say compare for me the values and also the types. So when I have here with two equals is true, then I will have it now falls because I am comparing as well if a is or has the same type of B. So when I save, I will get false because they are not equal to each other as well when I do with 0. So as you see, I'm still getting false. So its better always to use all of these strict equality in all our programs because then we differentiate between the types. In other words, if a and B are of different type, then this operator or three equals, we're immediately return false without any attempt to convert these two number or the empty string to a number as well. The same thing goes to non-equality. So I have to say like when I want to know if some variable is not equal to another, I need to also strict the type. So I want to know if they are really also not equal as a tied together. So here, it's really true that they are not equal to each other. But if I get here that one operator or one equal, then I will get here false instead of through because they have now, okay, different types, but same values of JavaScript logic. So here I will get a is different than b, I get false. But when I get is a different than b and different type. Yes, it's true. So that's why we are getting all of these values. As I told you, it's better always when you use conversion to compare the type as well. The same thing IS goes to null and undefined if I want to compare the null and undefined. So for example, if we talk before, we said that null is not equal to undefined. So I can say here, let's put equal first. So let's console log that. I will get for that a true, okay, Null is equal to undefined. But as I told you before, null is different type from undefined. They have their own type. So when I put here another equal, then I will get that this is false because now I am comparing the types together. None has a different type from undefined. 34. The Ternary Operator: Do you remember before I told you that we can use comparison operators with a flag with IF statement. Now we have in modern JavaScript like in-line if I want to explain it before the if statement, which is easier to understand and we will understand IF statement easily. So now assume that we have a and B. I will say like again here that we have a has 0 value one, and also B has a value 2. So in that way I'm going to compare them and give a value for a variable which is called C. So I will say that if a bigger than B, then C will have a value, for example, or five. If not, then it will have a value ten. So how we can write that on the code. So I will say here at define a variable which is called c, which is equal to this value, which is comparison result between a and B. So I will say here a bigger than B. Then I put the conditional if, which is question mark after the statement. So I say here the comparison statement, and then I put a question mark. So if this is returning a true, then C will have a value five. If not, then with colon, I will say this value will have 10 or C will have then. So after that, That's console log the c value and let's delete this one. And we will see now that C will get either this value or this value based on the comparison between a and B. So let's save that and try, okay, see, GOT ten. Why? Because a is not bigger than b. So when a is bigger than B, so C will get 5. So I'll put here, for example, 10, then C will get five because it's really bigger than b. So here you can put any conversion operator which we got before. So when I want to say if a equal to b, then c would get that value. So in this way, you can compare or assign a value to a variable based on some condition of another variable. So I would say here for example, if a is equal to 10, then give C as well attend. So let's say or sorry five. So in that way we are doing a conversion and assign value to a variable, initializing it with one of those two variables. So all of those values, remember, we had to question mark, which is like to assign a default value. And also when this, for example, a is undefined. Or we can have this ternary operator. And this ternary operator is like IF statement for competition between two values and giving you the result based on that. It's not only about comparing values. You can say, for example, I have here a variable, we can call it, for example zed. And the zed has a value true. So it has a true like somewhere before in my code. So I say here, okay, check for me, is that if it's true gift to see five, if not, then give it ten. As you see, we get five. But when that is false, then C will get 10. So in that way, you can also define any Boolean inside this operator and check it. So checking this value here or this conversion is returning true or false. So it must return for you, true or false. 35. Logical Operators: In JavaScript we have as well the logical operators like AND, OR and NOT. So if you remember, we talked about NAT. So I can say not something and also not equal or greater than, and we used it mostly with not equal. Also you can use AND operator. So I can say here in our example, like for me, Let's give a zed and let, give a y, and this y will have a true. So I can say here, if zed and why? Like if it's false and a true, then give a value five and also give a value ten when it's false. So let's explain it more clearly and easier. Let's forget about this C and let's remove this console log to not have any confusion or let's commented. So we can comment it out as I told you before. And now we can say, okay, console log for me, like Z and Y. So you can say here AND operator is two ampersand t2 times. And then you can use the AND operator or the end logic. So it will console for me false and true, then it will be false because and is like for example, the logic part for that. So I get here the false. But when I say this zed or like this with columns, two columns, then I will get through because y is true. So this is the logical operators which we have in mathematics. So in that way, you can as well do compressions like when you say when a is bigger than b or y, for example, then you will get through, for example, here we have a is bigger than b, or guessing here, sorry, B. Then we will have here like all y, then it's true. So when we print it a true, but when I say here and already said, then I will get through as well because this part is returning for me a true, then true or false is true. So now let's give, for example, like and so I will say here, like this logic, we can say true and false. We return for me what? False. So the logical operator in mathematics is following that way. And like this and or is like this. 36. Operator Precedence: That is also operator precedence in logical operators. So I can say here like for example, zed and for example, AND, and a bigger than B. So you can have multiple presidents, so a precedence here that AND, OR logical operators are always stronger than the, for example, that conversion operators. So in this way that this will be executed first and then this will be executed first, like a truly resolve or dissolve all the values to true or false, and then the conversion or the logical operator will do the job. So first of all, we resolve all of these conversion operators, and then we do the, for example, the logic for that. So let's have an example which is like more complicated. So I would like to explain it in a values. So I will say here is that is another also true or two. And also y is, we can say 5. So let's combine multiple logic operators. So I will say here, if a bigger than B, and we can say b is bigger than 0. So we can say here be bigger than 0. And also we can have a is bigger than Y. So in that way, we will have dissolve all of those operators. So let's try that. Okay, we got false because B is not true, because it's false because b and z are equal to each other, so they are not through. So when we put this equal like greater than or equal, then this will return true because this is true. And B greater than z is true, and a greater than y is true. So what if now, if I put like different logical operator, like I will put a year or for example, so I put here or like a or bigger than b, or b bigger than 0 and a bigger than b. So when I press Save, prettier that glycogen which we installed, reformatted for me the code to be in this way. So I have here a bigger than B or this operator. So it will resolve this 1 first and then it will compare it with OR. So in this, with this pattern, this is, we made the operator precedence. So we said that resolve for me this fairest and then compare it with using or logical operator with the result of a and B. So you can say as well here if I have a and for example, can say here and a bigger than like for example, eight or six. So as you see, are all resolved first and then, or is taking care about the results of both of those operators. So in this way, you achieve the operator precedence in a way that you can work with it more clear with your coding style. 37. Conditionals Using if: In programming in general, sometimes we need to perform different actions based on different conditions. We saw before that we have some statements which return false and some of them return true. So based on that, I can decide to do something in my code. For example, I will tell you that, okay, if I, the user put wrong password, then I will show him an error message. Or when the user put right password. Then I will let him go to the homepage or to the dashboard of my application. So based on that, you can change the behavior of your, for example, the application, and also the sequence of it. So far that I am going to show you how to build the conditions and change their behavior of your application based on some conditions. So let's assume that we have two variables. First one is called a and we have a value of it like five. And also we have b and the value of it is one. So based on some decision like I want to compare a and B, I will do something based on that comparison. So to do that, we learned before that I can compare a and B with a greater than or smaller than. So with that, we can also decide what to do after the comparison, because a greater than b can return for me true or false based on the values of a and B. So the if statement evaluates a condition in parentheses, and if the result is a true, execute a block of code. So how we can do that? So I can place an if, and I can place those parenthesis. And between those parenthesis, something should be a Boolean, like the result of H would be Boolean True or false. It doesn't matter how many conditions and how many logical condition relation between them you have. So we can start simple, like I will say, if a is bigger than b, then I can do something. Let's use the console log. So I will say here you have to open curly braces, which I told you it will contain the block width executable code. So as I told you, we will place between them, if this condition is true, that we will place in between them like some console log, Let's say I have a console.log. We can say a is bigger than b. So in that way we will see in the console log some logic or some message which says a is bigger than b, in case a is bigger than b really. So let's save that and refresh. And we will see, okay, a is bigger than b. So that tried, but if I put, for example here that Let's say a is 0. So now a is smaller than b, so not bigger. In that case, I will not see anything. So the code or the sequence of the code didn't enter here to execute the console log because if condition is not, for example, valid because this is returning a false as we saw before. So when this return false, then the block will not be executed. The code inside the block. So you can place as much as you want code inside this block. So when this condition is achieved, then all of those will be executed. So let's see that I will pay here or put here four. And then we will see that a is bigger than B and the code got executed inside that block. So as I told you, everything, conditional logical return true or false is here. Even you can set a variable. So I can say here if through, so if a is true, then execute that code. If a is false, then the code will not be executed. So we refresh, we will see the same. So if I put B here as false, then we will see that. Then I have to check B. Then we will see that this code is not executed because this is false. If you say a and B, then you would get false because true and false is false. But if we put, for example, or like how we connected two conditions together, then it's true because true or false is true. So you can do whatever logic you want here to place some specific code based on the logic as I told you, if they user logged in or the login value of variable value is true, then we allow the user to redirect to the dashboard. Otherwise, we don't allow him and we let him or show him some error message that his password is wrong. 38. Truthy and Falsy: What if I pass a number to an F or a string, or false string, or some different number or empty object or anything. Not a Boolean like as I told you, like not a logic. So the result of that is called truthy or falsey. So in this way, JavaScript will handle some specific values as the truth or as false. So let's see what is truthy and faulty. So normally developers falling in mistakes because of that. So I will show you like first, what is the concept? And then I will explain to you how you can fall in a trap or mistake of if truthy and falsy in JavaScript at the Russi value is a value that is considered through when encountered in a Boolean context. So all of the values which are passed to the EF are considered as true as we will see now. So first of all, if I say if true as we saw in previous lecture, okay, this is considered through and it will execute that code. So let's try that. Okay, we have here is truthy. So let's move their console log to the next one. If I put a number between the brackets or the parentheses, what will be considered in this way? So any number, positive or negative is considered as a true. So when you say If number this is, will be transferred to a true value and then it would execute the code inside the, if. Let's try that. Refresh has you see its console logged and this if is executed, so this block is getting executed as well. So also, if you put 0 in a string, then it's considered as a true because any string, not empty string is considered as a true. So when you say if 0 or anything, then it's considered as a true. So let's move this console log. You can move in Visual Studio Code using ALT key and the arrows. So you can use any statement when you put the mouse on it. So Alt key and the arrows up or down, you will move the statement in the line. So this will be in Visual Studio Code. And also you can use Options key in Mac OS. So now I have here placed the console log in the 0, but as a string, not as a number. So when we refresh, we will see that it's executed and we have the console log. But if I put if 0, like this, 0 is considered as false as we saw before. So if we'll transfer that to false and then nothing would be executed here. Let's refresh hockey. We have here nothing. So after that we can go to another tricky part with is like false. So if I put false like this, this will be executed or not. So let's try that. Okay, is truthy, why? Because this is a string, it's not a true or false. It's a Boolean. But when it's Boolean like this, if false, then it will not be executed because the result of if is false. But because this is considered as a string, then it's full string, then it will be transferred to true. It's like falls like any string, nothing else. And as I told you before that any number can be considered as well through the like is true. So we have also the negative number. The same thing goes to the floats. The same thing goes also to negative float number and also the same thing for infinity. I didn't talk about infinity before. Infinity is a number which referred to the infinity like infinite number. So in that way, we have infinity as a minus and infinity positive. So here we have all of them through the because they are considered as a number. Look, I am putting the mouseover and I'm getting infinity is number. Also, we will talk about objects later. So also empty objects, they are considered as truthy. You don't have to care about that. We will see the objects later, but keep in mind that empty objects are also truthy. I will show you that later and remind you about that later. So everywhere is like here, also empty array as well, which is like also array. We will talk about the arrays later as well. Is the similar, like we can say objects, we can put the same. If it's empty array, then it's considered as a truthy creating an object of something or some class, as we will see later, which is called date. We can create a new date of their current time on your PC. This is also considered as truthy. We will see also this later. So all of those are considered as Rosie, the most important part I want you to focus on those two. So when you have falls in the string, it's true. And if you have 0 as an, as a string, it's also true. So I want you to be careful about those points. Also in JavaScript, there is a concept which is called falsy. So as you see here, we have a truthy and we have falsy. So those values which are not Boolean can be considered as a false, for example, falls because it's Boolean, so it's false. Also, null is considered as a false. So when you have if null, then it means this will not be executed. So when I put here a console log inside the if null, this will not be executed. So I can say year, it's falsy, so then it will not be executed. Let's try that. We will see that we didn't get anything. We got only is truthy for new date. But now if I remove it, then we don't have anything. Also considering undefined is also falsy. So if you say if undefined off or if any variable is undefined, then in this case, we will not execute the bracket between the IV. So also going with 0 and minus 0 and not a number and also empty string, all of them considered as a false. So when I have a variable, has a value 0 or minus 0, or undefined or not a number or empty string. Then in this case, we will not execute any of those ifs. So we will not have any code executed inside those brackets of these. So this is a concept of truthy and falsey. I hope you understand it. Of course, we will see later more advanced, for example, experience working with the practical. So you will see how you can consider when you have to say it's falsey, all is truthy. The most important point I want to consider, some people say is like okay, if I have a variable and if I want to say if x, so you have to know what is a value of x to be sure that this if statement, it would be executed or not. 39. if ... else: In this lecture, we are going to talk about if else. So if this not false or if it's not true, then we have another option that we do. Else, like I say, if I don't want to go to, for example, a museum else, I will go to park. So in this way, you have also this logic. So when you say some value, if it's not true, then you can have an else. So let's put here a comment so you can download that code. So I will say here about if else. So in this comment, let's have a variable. I will give it like a value which is true. So I will say let B is At rule. So we can say here at r2. And then I will say if be like if B is true, then execute for me that we can say have a log here, we can put console dot log and we put B is true. This is the simplest example. And then you don't have to say if not B, you can say else, like in any other case, when B or this condition is not achieved, then you can do something else. So I will say console log b is false. So in that way, when you have B is true, it will execute this. If not, it will execute this one. So let's try that. Okay, we have an error. B has already been declared. So if you remember, we have declared this variable here. So let's call this one as a C. So I can go here and give it SE. So you have to be careful about naming your variables to not have any errors. So now we have c is true, right? It's true. But when I put it as false, then, okay, C is false. Let's have another example. So I will say like for example, 20, bigger than three. Okay, let's see. C is true. So the result is true always when this condition achieved or when this is like a true. So we can switch it are bout back. We can say 20 is bigger, so we have all smaller. Then we have C is false because this statement result false. So as a question for you, if I remove here everything, what will be the result? I want you to think about it. So the logic says that, see now doesn't have any value. So what it has, what is a value of z undefined? So in that way, undefined will not be go or it will not be considered as a true. So it will go to false. So let's try that. Okay, C is false. So this is a concept which I told you about truthy and falsey before you have to care about. So when C is not initialized, then it's considered as undefined. So in this way, you can execute the else. So this is the simplest logic of usage between if else, we will see more detail in the future with a practical examples and also with the quizzes. 40. Looping with while: In JavaScript, we need always to repeat some actions. Or in programming in general, you need to repeat some actions to happen until some condition got achieved. So I can't say print for me or console log for me, like from one to ten until some condition is false. So how we can do that? We can use while in JavaScript, there is some keyword which is called while. And this one you can use it. And between some condition. Under some condition, it will keep repeating, repeating, repeating until that condition got executed or got finished. So exactly like if here will be like some condition like I will say 10 bigger than B, then you have to console log something as well, exactly the same. So when this is true, then this will keep executing. It will not be executed one time like if, but it will keep executing until some value or this while is break, until this condition got to broke somehow. So for example, let's give a simple condition. I will say while true. So in this way like we have a true, like while true. So when you save, refresh your page, you will get a lot of console log and be careful of getting unlimited loop. So in this way we will get console log unlimited times. So as you see here, we have almost now 100 wild through is gutting or it's getting repeated. So in this way, you have to be careful to not crash your browser. So let's put here, falls back and refresh the page. Okay, now I cannot refresh because it's really got stuck because I have infinite loop. So I need to close the browser and open it again. So to have a condition or change their condition where the wildlife, it can stop in some time. We can do the following. So we can, for example, define a variable which is called eye. This is normally in programming that AI is used for, like I name is used for repeated things. So in that way you can say while I is, for example, smaller than ten, then you can console log. For example, we can put the eye itself like it will count for us from 1 to 10 somehow or from 0 to ten. But we need to change the value of the eye always. Otherwise, this condition will keep through and also we will enter to infinite, for example, loop. Now I am going to have I plus plus. So if you remember, we said that I plus, plus it, increasing the variable value by one, it's the same exactly how you say like I plus or I equal to I plus one. So it's exactly the same how we did before and we talked about that before. So let's try that now and refresh. Okay, We got 0, 1, 2, 3 until nine. So we saw that this condition got achieved until nine. So when I has a value nine, which is true because nine is smaller than 10, then it will keep console logging. But you can put as well when i smaller or equal to 10. So we can say have then from one to 10 as you see here. So the console log is working fine under some specific condition and it getting repeated multiple times based on some condition During the while. It's better than having console log one. Console log console, log, console log for. You see we saved a lot of line of codes. So with that way, we made a console log one time and then we had the repeated it multiple times using willl. Be careful the most important to not enter to infinite loop. Otherwise, you will break or your crash your program and the browser will get stuck and you have to close it or force closing it The same way you can give, for example, to 10, like I has ten and you can give I minus, minus. And while I is, you can say like you can configure, that. You can configure the condition to be, for example, while I is bigger or equal 0, then we will have minus minus I, that I will have less values. So I will count from ten to 0. So let's try that exactly. We have 10 to 0. So in that way we can consider always that condition when it's true, this will be keeping executing. So now I am going to remove this condition. I will keep just, i. So just as a test for you about falsy and truthy. So now when I save, do you think I will enter to infinite loop or no? So because if you remember, we are going to have minus and it can be minus one, minus two, minus three. But let's see what will happen. Okay, I will save, refresh. Nice. I don't have any infinite loop and I didn't go to minus y. Because if you remember, I told you that if 0 is false, so the eye, when it gets to 0, then this condition will be false and then the while loop will be broken and n, it will stop. So it will not go further than 0 because this condition when the eye is 0 is false. So this is, be careful about falsy and truthy staff, which I talked before. It's very important for you to know exactly what is a behavior of your program is going to do, especially when there are hidden value which you cannot consider like this one. 41. Looping with do : So we saw before that when we are looping in a while that this condition must be appear so the can or the developer can enter to the loop. So in that way, we are going to see if we have a possibility that we can execute a command like we entered to the loop and then we check the condition. So the way to do that is using do while. So it's exactly the same as while, but we are changing it to do while. So the scion tax for that, that I would use a keyboard which is called due, and then you execute the code which you want to do. For example, I want to have this one all. Let's go back to the simple one, which is like, let's say let j or k or not, doesn't matter. You can give any name. So let j is 0 and then you can say console log for me J. And then after that you can check that condition. So we can say, well, we have to not also entered to infinite loop. So we have to say j plus plus. So increase for me that j multiple times until some condition happened. So I will say here while, and then I put my condition Yj is bigger than 10. So in that way, the difference here that we are in a while, in a normal while, we don't enter to the content of the while until we check if this condition is achieved or not. But here in do-while, It will be executed at least one time. So it would go on time inside those brackets and execute that code and then check the condition. So let's try that and save. Go again. We have okay, Let's maybe comment out this year so we don't have to be executed to, so to not see it in the console. This condition got executed only on 0 because we executed 10 is not bigger than 10, so it stopped. So it's executed one time and it stopped. But now if I do here, like while j or 0 is smaller than 10, then it will work. So we have here 0 to nine, exactly the same as while. But the difference is that the execution of the content of the while will be one after achieving the condition if it's true or false, this is in awhile, but in do-while, we are executing the code at least one time. 42. Looping with for: So in JavaScript there is also another type of looping. So we have while, we have the while, and also we have something called for. So let's comment out this to not bother us in the next context. So we have now here the for loop. The for loop is also something like while. Like we have a variable which is I and we have like some condition and also we have the increment, but all of them are in one line. So how I can do that? So I will say here FOR loop. And then with this for I define a variable. I say for example, let k also, I will initialize it with some value. As I told you, we have everything always initialized at the beginning of every loop. And then I say the condition which I want to look for. So I will say k smaller than 10. And then we are adding semicolon between all of these parts so we can define our for loop. So the last part of it is the increment. So you can increase the k like one by one. So we can say k plus, plus. And inside those brackets, we are going to have the code execution. So the code here will be executed 10 times based on this condition which we put, and based on this initialization which we have. So let's try that. And I am going to add a console log also. So we will console log the value which is called k. So let's save that. Okay, the code is formatted by prettier again, so we refresh, we have 0 to nine also saw that condition is achieving based on all of these rules which we put. So initialization. And then a condition and then the increment, you can increase as well the K to be two times. We can increase k as much as we want, so we can increase it by two. So you can say k is equal to previous k plus 2. So it will increase two-by-two, two steps. So it will count 02468. So until that K, it get 10. So this condition not achieved and it will not console log it here. So you can have a shorter concept here. So you can say k plus equal to two. So it's shorter, like get the previous k value and then add two to it. So again, it's will be the same. It's something like a plus, plus. Okay, Now, another question that came up. So can I add more conditions here? Like if you remember, we were doing with the IFS multiple conditions or in general we were using the AND operator AND OR operator. So in this way you can also add some conditions. But when this condition it gets broken, then the for loop will stop. So I would say, for example, I will say when K, we can say and k is equal to five. So it will print for me like 02 and then four, but it will not, for example, increase more than, for example, more than five. Because in that way, k, when it's equal to 0 or it's equal to five, then this rule is true. But after that, it's not achieved. Or we have to say that it's smaller. So when it's equal, it's already broken because k at the beginning is 0 and this condition is not achieved. So let's try that. Okay, we don't have any output. So when I say, okay, k is smaller than five, then I have 0, 2, and 4. So this condition must be always true. When it's false, then the loop will stop. So it's oppose it of having like some, we can say conditions which is like, okay, I went when this condition is not achieved, I was skipped number five. No, it will break exactly when this condition is false. When you want to skip number five. In that way you have to put an if statement inside. Let's see how we can do that. So I will do here, like let's put it back to plus, plus. We don't have plus two. And then I will remove this condition and also the end operator. And here between the brackets, I can add another if so, you can write if statements inside for loops. Also, this happened with while and do. So you can the same, you can put if statement inside another statements. So now I will say, if we can say k is equal to five or not equal to five, then do a console log for me. So the values will be printed for k except number 5, as we will see now. So we have here 0, 1, 2, 3, 4, and 6. So we skipped the number 5 in this way. But if you put here that, okay, when k is not equal to five, then it will stop at the five. So we can have, we are going to miss the rest of the loop, which is 6, 7, 9, or 8 and 9 because this condition gets broken. So the for loop will stop immediately. 43. Break and Continue: So we learned before that when the condition is false, then the loop is going to be broken and we go out of this context. So for that, but we can also force the exit even this condition is true. So we can use some keywords which are defined in JavaScript, which is called a break. So you can as well a break this loop, even this condition is still true. So we can't do that. So for example, I am going to make, for example, a prompt which is like showing like some pop up on the page of like this, our webpage and asking the user to enter a number. And we will read this number from the user. And we are going to add the sum. So after we finish the SMS or when the user doesn't put any value, then it will show up the summary or the sum value of the numbers which the user put so far that we can use also the while loop. And we are going to use the break when there is or when the user doesn't put any value. Before that, I want to explain to you with a small example about the break. So if you remember we were breaking the rule or the loop when there is some condition not achieving. So we can copy the same this example and comment out this console log to not have multiple console logs here, so we can keep one always. So I have here let k, or you can have another one, which we can call x. And this x is smaller than 10 x plus, plus. And we can say like instead of like, for example, not equal, I can say like when x is equal to five, then keep console logging and then break. Then we will break the rule. So we can have here like it, of course print only five because when x only five, we can put this console log out. And we will see that how we are breaking that role. So the keyword break is going to stop the for loop even this condition is achieved like we can say it's true. So we have here like X, when it has five, it will break the loop. Even. X has value five, and this condition is like five, smaller than ten is true. So we can see that in real. So we have here and error K is not undefined. So we can have he had some error because here we didn't define it as a K, we have defined it as x. So I will repeat it. So I will have 0, 1, 2, 3, 4, 5, and then break it the dense continue to 10. This is the reason that I have a break here when X value has five. Before I showed you that we are skipping five as well. So we continue from 0 to 10, but we skipped five. Here. We can do the same. So you don't have to put if x not equal to five, then okay, continue or breaks. So we can use a keyword called continue. So with this key word that we are saying for the for loop, okay, Continue and gone. Don't console log anything and skip the code which is after the if statement. So before we had the console log before. To see the real achievement of this continue, we will see that it will also continue the looping the number, but it will skip the five. So let's see that now I will save and then I will see okay, 0. And then I skipped the five. This is happening because when I say continue, the rest code will not be executed when the value of x is five. So it will ignore everything under. So in that way, we are skipping when the IKS has a value five. It's exactly the same way when I say if k is not equal to five, then okay, keep console logging. But when it's equal to five, then it will not console log because this short or this condition doesn't have any true value, so it will be false. So now let's go to our example. Okay, I will have here console log. I will comment it out. I am commenting them out. You can activate them when you download the code from this section and you can try by yourself. But I am commenting them out to not have them in the console and we get confused with the other example. 44. Practical Example Numbers Accumulator : Okay, now let's have a practical example. So example of that, I am going to use infinite loop. Okay, don't be shocked. I am going to use infinite loop, but I'm going to break it somehow. So the example, we are going to have a numbers accumulator. So we are going to ask the user to put numbers until he press Cancel or he pressed or put empty value, then this loop will be broken and we will display for him the summary or the accumulator value of the numbers which he input before. So let's try that now. First of all, I need a variable which is called sum. So this sum, you can name it anything. So it will start from the euro and it will have our accumulation value. But before I go more in detail, I want to show you how I can get a value from the user. So getting a value from the user, you can say, for example, let value and you can give it any name. And we are using a keyword in JavaScript, which is called a prompt. And this prompt will display in the browser some pop up and asking the user to put some value. So what is the message you want to display for the user? You can put here any string. So I want to say like enter the number or enter a number. And then the second parameter, it will be like by default, an empty string, like we don't have an empty string. So you can put it as 0 or as empty string. And then you can console log the value which is entered by the user. So let's try that now. And I am going to save, run the application. As you see, this page says enter a number. So we can put a number like five, 55. And I get here and error console is not a function, okay, we have to put console.log not only console. So we save again, run again our application. And we will see here, okay? And then we see the value is printed here, but it's not a violet, so it's a string as you see here. So we are receiving from this prompt the number as a string or anything as a string. So here we can change this value like by casting it all, converting it, if you remember, we put before like number like this, and we are casting this value. So after that, when have we have this prompt? I can put here 555. And I got it as a violet which indicate the DevTools that this is a number. There is another way to convert two number you can use instead of number and put it in brackets or parentheses. You can use a plus, the plus behind the value or behind a string. We'll convert that number or this string to a number. So let's try that again. I will put here a number and then, Okay, I have it as a number. But if we put, let's say another thing. Like we can put string normal stream letters and we will get none, not a number as you see here. So let's do our example. So I have here a summary. I am going to define a while loop. And this while loop is always true. So we will have infinite loop inside, but we are going to break it somehow. So first of all, I am going to get the value from the user. So I will say here value, and then I am getting this value. And we need to change this value, which is returned from the user to a number. So I put a plus here. It's exactly how we did before here. Like we got the value is a string and we changed it to a number. But you can put here the plus directly. So after that, we are going to check if the value is not none. And if the value is not empty string. And if the value, for example, undefined when the user is pressing Cancel, then we are going to break this while, and then we are displaying the accumulator value, do they use? So here I'm going to have an if and this if first we are checking this value if it's none or not. So I'll be careful to not put the value is equal to none. Like we cannot achieve that. It's always become are coming as a false. So if you remember, we had a comment which is called ease none, and then I put the value inside it. So this will return true or false when this value is not a number. Also, we can use or like to have more condition, like the value when the user, for example, put 0, for example. Because if you remember, we said that when we are converting an empty string to a number, it will return for us 0. So when the user doesn't put anything, it will return for us 0. Okay, Now, when this, one of these conditions is true, like it's not a number and value is 0. Then I will say break, break this loop and go out from it, and then do the summary. So if this true, then it will go out of the loop. But when it's not true, we will skip this part and then we are going to have summary is equal to the previous summary which we had before in the loop before, like when I get first prompt and the second prompt or second pop up, then I'm summarizing, accumulating the values which are entered by the user. So I will say here, accumulate for me the value. So summary is all summary plus the value. And then at the end we can outside of the loop, like as you see here, while and outside of the while, I can console log the summary or the sum value, accumulated value, which comes from the user, which he import the values from the browser. So let's save that. Try it here. Okay, It's asking me to enter a number. I will put two. I put another two. I will put another two. So now we have six. Now I will not put anything. Okay, I got six here. So the summary is six because I send to the user or ice and empty string, it's changed to a number. And then this number is 0. So it broke the rule. So let's try again, but we will put a string. So I will say here 20 to 22, and then I will put a string. So converting a string, we'll define for me not a number. So then it will break the loop, and then I will have 44. So while this is a true, I will still see the prompt, which is like doing for me the pop-up and I am getting, putting number until I put wrong value, or I get, or I put a 0. So this way the summary will be accumulated. You can also, you don't have to say console log. You can print the summary. So you have a pop-up as well to the user because the user cannot open the console. So we can see as a popup, the end of the summary or the end of this loop. So we can use a keyword which is in JavaScript called alert. It will also show a popup, but only with a message like with okay, like you don't have to enter any value, like how we have with a prompt. So I will put here, like we can say, backticks, we have here back ticks. And I will put summary is, and then I will put the value of their sum so we can have here sum. So let's save that. Tried again. I put 22, 33, 44, and then I will put 0. And then I got another prompt summary is 99. And then I press Okay, the application continue executing the code sequence which is under that. So for that, you have to know that breaking the while when it's always through is very important. And also we have achieved and layered multiple staff life like prompt and also alert. And we used the break to break that loop. 45. Why Do We Need Functions: In this section we are going to talk about functions. So the first lecture of this section is why do we need functions? Quiet often we need to perform a similar action in many places of the script. Let me show you an example. So in this example, I want to show you the usage of the functions. So if you assume that you are asking the user to have to enter the age through their prompt, which we saw in the previous section. So I am going to get the age and then I'm going to do some logic over it. So when the age is smaller than 60 and I am going to display two messages, one of them like tiled, and he is not allowed to drive a car. And also when it's between 16 and under 18, then he can drive the car with his parents. Also when he is like, for example, bigger or we can say here, like bigger than 18, then we are going to allow him do a drive a car and he is an adult. So in every time I am displaying two messages for the same or four different string. So let's try this example now for example, we have here we entered the age, let's say again, okay, so enter your age. So I will put here my age like 23. Okay. You are adult. I got first message hand, you are allowed to drive a car. So every time I refresh the page, I put some age and then I will get to prompt messages based on the logic which I have created here. But as you see that we have a lot of like we can say, repeated code. So we can make a function which hold for me those two calls, like in one. So in that way, I will use one line just to call that function. And then I will use alerts or some parameters where I can reduce my code and pass them to their function and display different messages. So how we can do that? I'm going to equate this video, of course, I will explain in detail about functions, but I will show you why we need them. So as you see here, I have defined a function. Of course we will see the context of the function. The function is doing two things like alerts. First text and alert second text. And then in every comparison or in every logic, I am calling this function. So before we had like six of these alerts, 121212, but here now we have only two alerts and three calls, so we reduce their code. So imagine if you had here a lot of code and logic and you are using it in many places. So defining a function which is executing in many places like this code will get executed in different places better than repeated everywhere. It's better to create a function of it. So the same way it will do for you, the same job. So we are going to have less code and more understandable or more reference to our original code which will be detailed and wrapped in a function. In this section, we are going to talk in detail about the functions, how we can use them, how to define parameters, and how we call them and create callbacks and use them efficiently in JavaScript. 46. Practical Example Numberse Acumulator: Okay, now let's have a practical example. So example of that, I am going to use infinite loop. Okay, don't be shocked. I am going to use infinite loop, but I'm going to break it somehow. So the example, we are going to have a numbers accumulator. So we are going to ask the user to put numbers until he press Cancel or he pressed or put empty value, then this loop will be broken and we will display for him that summary or the accumulator value of the numbers which he input before. So let's try that now. First of all, I need a variable which is called sum. So this sum, you can name it anything. So it will start from the euro and it will have our accumulation value. But before I go more in detail, I want to show you how I can get a value from the user. So getting a value from the user, you can say, for example, let value and you can give it any name. And we are using a keyword in JavaScript, which is called a prompt. And this prompt will display in the browser some pop up and asking the user to put some value. So what is the message you want to display for the user? You can put here any string. So I want to say like enter the number or enter a number. And then the second parameter, it will be like by default, an empty string, like we don't have an empty string. So you can put it as 0 or as empty string. And then you can console log the value which is entered by the user. So let's try that now. And I am going to save, run the application. As you see, this page says enter a number. So we can put a number like five, 55. And I get here and error console is not a function, okay, we have to put console.log only console. So we save again, run again our application. And we will see here, okay? And then we see the value is printed here, but it's not a violet, so it's a string as you see here. So we are receiving from this prompt the number as a string or anything as a string. So here we can change this value like by casting it or converting it. If you remember, we put before like number like this, and we are casting this value. So after that, when have we have this prompt? I can put here 555 and I got it as a value let, which indicate the DevTools that this is a number. There is another way to convert two number you can use instead of number and put it in brackets or parentheses. You can use a plus, the plus behind the value or behind a string. We'll convert that number or this string to a number. So let's try that again. I will put here a number and then, Okay, I have it as a number. But if we put, let's say another thing. Like we can put string, normal string of letters and we will get none, not a number as you see here. So let's do our example. So I have here a summary and I am going to define a wild loop. And this while loop is always true. So we will have infinite loop inside, but we are going to break it somehow. So first of all, I am going to get the value from the user. So I will say here value, and then I am getting this value. And we need to change this value, which is returned from the, like the user to a number. So I put a plus here. It's exactly how we did before here. Like we got the value as a string and we changed it to a number. But you can put here the plus directly. So after that, we are going to check if the value is not none. And if the value is not empty string. And if the value, for example, undefined when the user is pressing Cancel, then we are going to break this while. And then we are displaying the accumulator value, do they use? So here I'm going to have an if and this if first we are checking this value if it's none or not. So be careful to not put the value is equal to none. Like we cannot achieve that. It's always become are coming as a false. So if you remember, we had a comment which is called ease none, and then I put the value inside it. So this will return true or false when this value is not a number. Also, we can use or like to have more condition, like the value when the user, for example, put 0, for example. Because if you remember, we said that when we are converting an empty string to a number, it will return for us 0. So when the user doesn't put anything, it will return for us 0. Okay, Now, when this, one of these conditions is true, like it's not a number and value is 0. Then I will say break, break this loop and go out from it and then do the summary. So if this true, then it will go out of the loop. But when it's not true, we will skip this part and then we are going to have summary is equal to the previous summary which we had before in the loop before, like when I get first prompt and the second prompt or second Popup, then I'm summarizing, accumulating the values which are entered by the user. So I will say here, accumulate for me value. So summary is all summary plus the value. And then at the end we can outside of the loop, like as you see here, while and outside of the while, I can console log the summary or the sum value, accumulated value, which comes from the user, which he import the values from the browser. So let's save that. Try it here. Okay, It's asking me to enter a number. I will put two. I put another two. I will put another two. So now we have six. Now I will not put anything. Okay, I got six here. So the summary is six because I sent to the user or isn't empty string, it's changed to a number. And then this number is 0. So it's broke the rule. So let's try again. But we will put a string. So I will say here 20 to 22, and then I will put a string. So converting a string, we'll define for me not a number. So then it will break the loop, and then I will have 44. So while this is true, then I will still see the prompt, which is like doing for me the pop-up and I am getting, putting number until I put wrong value or I get, or I put a 0. So way the summary will be accumulated. You can also, you don't have to say console log. You can print the summary. So you have a pop-up as well to the user because the user cannot open the console. So we can see as a popup, the end of the summary or the end of this loop. So we can use a keyword which is in JavaScript called alert. It will also show a pop up, but only with a message like, okay, like you don't have to enter any value, like how we have with a prompt. So I will put here, like we can say backticks, we have here backticks. And I will put summary is, and then I will put the value of their sum so we can have here sum. So let's save that. Tried again, I put 22, 33, 44, and then I will put 0. And then I got another prompt summary is 99. And then I press Okay, the application continue executing the code sequence which is under that. So for that, you have to know that breaking the awhile when it's always through is very important. And also we have achieved and layered multiple styles like prompt and also alert. And we used the break to break that loop. 47. Function Basics: Defining a function is really easy. We can use the keyword which is called function. So with function keyword, you can define a function and give it any name based on the naming variables which we had before. So for example, I will have a function which is called SHO message. And then you have to put parenthesis. And those parenthesis, you are going to have parameters inside them. We will talk about that later. And then the coat context of this function is going to be between those curly brackets. So in this way, we will have inside the statements which we saw before, like how we put some code inside if or inside for loop or a while loop. So I can say for example, console log for me a message, I am a function. And you can also add another thing like for example, alert, alert message to the user. I can say I am a function from alert. So we have here like two comments inside this function, okay, when I execute my JavaScript code, I don't see anything. Even in the console. There is nothing. So we've i1 to execute this code, I need to call a function. I need to call that function which I wrote. So how we can call that function? First of all, you need to have a name of the function, which is SHO message. And then when you want to call it, you have to put those parentheses. And then it will require for you some parameters as we will see later. So actually, the alert is a function because I am calling this function here with a message. Also console.log. Log is a function because I am calling this function with those parenthesis parameter. Our function doesn't have any parameter, so we are calling it like this. Let's save retry our application. And we will see I am a function from alert, the alert executed, and I have a code or a string inside the console log. So in that way, I call a function. This is a basic declaration. We will see in the next lecture more complicated stuff using parameters and also defining the functions in different ways. 48. Function Parameters: For every function, you can add some parameters, as I told you before. So for example, I can define a variable between those parenthesis, which will be called parameter, and you can give it any name you want. So for example, I was say message. So the message in the calling of the function will be replaced with something which you are going to call. And also you are using this message variable inside your function. Only you can use it, you cannot use it anywhere outside. So in that way, I can say that SHO message and then I can put here console log for me, like we can say here, back ticks, like the bossed message is. And we put here like some valuable context and we will call the message valuable. So in that way, when I call the function SHO message, I can pass any string I want. So for example, I can say I am parameter. So in this way, we will see the console log I am function alert and also I am function from alert. And then I will see a console log the past message is iambic pentameter because I called SHO message parameter, which is called message, and I used it here. So let's try that. Okay, I am function from alert. I got also in the console log. Let's press Okay. The past message is I a parameter. So in that way, it's very great that I am able to have a dynamic function. I can, I can call this function multiple times but with different goal. So for example, I would say he called one. And here I will say Goal 2. And I am parameter and for example, I am, you can't put your name for example. So in that way, I am calling this function multiple times, but with a different message, so it will be replaced here. So let's try that. Okay, I am function from alert. This is the first goal, by the way. And I am function from alert, it is a second goal of the message. So we have the past message is gold one, I am parameter. And then I got I am function from alert. And then I got the second goal. So to explain it more, Let's remove this stuff. So here, like console log or comment them out. Console log, I am a function alert eigenfunction from alert. Let's remove them. So now I am going to call only the console log with this string. So in this way, I will go to the past message is goal 1 and goal 2 because I called it two times with different parameters. So as much as you want, you can call this function and change these parameters inside. And you will have exactly the same behavior, but with a different string because we are replacing the string message with the value which is passed with the function parameter. So as you see here, we are calling them all. 49. Default Parameters Values: So we saw in the previous lecture that we can pass parameters to functions. And this parameter can be called and it will be replaced by the parameter value which is passed in the calling of the function. Okay, let's assume that I am not passing any parameter. So now I will call shore message without the parameter message. So I removed everything between those parenthesis. So when I try to call this function without this parameter, Let's try that. I will get the past message is undefined. So the message value, the message parameter value, is undefined because I didn't pass any parameter here. Of course, with JavaScript or with modern JavaScript, you can have a default value for this message when there is no any past parameter here. So to do that, I can just define equal here. And I can say default message. So this default message will be a default value for the message parameter and it will be replaced here. So in that case, when I don't pass any parameter, then I will get a default message in steed of undefined value, as you see here. So now when I pass a value to this message or to the call of the function, I can say, for example, I am show function. So the message, the past message is I am sure function. So let's refresh that. And you will see that the default value got ignored. It's taking the goal or the value which comes by the call. So in that case, that gone parameter has more periodicity than the message or the default value here. So in that case, you can always pass a default message or the default parameter without having the undefined value of the parameter when we call the function without parameters. 50. Returning a Value from Function: The most important usage for the functions is doing some calculation or doing some operations and returning some values. So when you pass some parameter, you can do some operations on them. Let's have very simple function which we can call like some operation. So some function or some operation. So I will define a function like as we saw before. We'll call it sum. And this sum will have two parameters. One is x and the other is y. And then this operation or this function, is going to calculate the summary of x and y. And then I can use it anywhere in my code without saying always X and Y, X plus Y, X plus Y everywhere. So in that way, you can use this function to calculate for you anything. Of course, I am having here a very simple example. Of course there are many, many, many complicated functions that they can do a lot of job for you, especially if you are calling them multiple times in your code. So I will say here with the keyword return, then X plus Y. So in that way, I am going to return from the sum X and Y, X plus Y. So I'm going to return x plus y. So we can use this function by defining a variable. We can say zed and this zed, it's going to call this function because it has a return value. So before that we can do, for example, a call directly for the sum. So i've, I say here some, and then I give two numbers because here I have two parameters. I can say five plus 10. Okay? So now I have sum of 5 plus 10. So in that way, when I execute my application, okay, I don't have anything and I am not using actually the function. So the function is returning some value. So this value, I have to know it, so I have to use it somewhere in my code. So that of course the retail value will be 15, so I can store it in some variable. I can say here, let zed for example, and it will call the function and the return will be assigned to Z. So to be sure, we can also use a console log to see the value of debt. So let's save, refresh, and we will see that we got 15. So the value of Z is 15 after summarizing these two values, so sum called this function and then the function return, this value with the keyword return can return the values after operations on the parameters. Of course, you can't return anything. You can say. You can combine it with a string. You can combine all you can do a Boolean or anything. So you can also have another function. We can call it greater than. So I will say here function. And this function will be called greater than exactly the same naming way. So the naming of variables is always followed as well with the functions. So I am using here that CamelCase. So in that way, I will have here x and y. Also, we can have here the brackets and I was a year return x greater than y. So I will have in return Boolean, like Boolean value. It can be true or false because I am returning like this condition logic. So let's call this function on z. And let's see, okay, it's false because five is not greater than 10. So in that way you can use the functions, and I can use this function anywhere in my code multiple times based on my needs. 51. Naming Functions: Functions are actions, so their name is usually is a verb. It should be brief, accurate as possible, and describe what the function does so that someone is able to read the code and get the indication of what this function does. So normally we prefix that are functions with some verb which express what it's going to do that function, for example, I can say show some or calculate some, check something. Sure, sure, like some object or create an object. So you can use some variables or some verbs as a beginning of every function. So I'm going to show you some examples like how we had before. So those functions, which I have here, I copied them. So I have here show message, it shows a message, get age, so it return the age of some like person. Also CalcSum, It's calculate some summary of valuables. So you don't have to call it like some on me, but you can say calc sum. In this way. The other developer will understand it like, Okay, this function is calculating some variables. Also, create form, check permission. So all of those things should be followed when you are naming a function. And as I told you before, you can name them using the camel case. So you have capital letter of every word in this sentence. Of course, you have unlimited or like NOL limitation for how long the name of the function. But it's better to be like short and accurate as much as possible. 52. Function Expressions: In JavaScript, there is also another science tax for defining a function. So I'm going to put this on comments do not have errors. And I am going to create a function. So this function, we can call it say hello. So the function defining that function, you don't have to use a keyword function and then give the name and parameters. You can define a function as a variable. So I would say here maybe let, can give the name of the function like say hello. And then it's equal to. And then you can say that I have a function or this variable will be a function. And then you can define the code which you want aside it. So for that you can say alert. For example, we can say hello, JavaScript. So in that way, when I call this function, it's exactly the same way how we are calling the functions normally. So I will say here, after that, say hello, and I will call it like this with the parentheses. Exactly the same way how we are calling normal functions. And also the parameters will come here. You can pass parameters as well for those values. So we can as well call it so we can test it. So we say hello JavaScript, and it's called immediately. So when I don't call it and I have this variable, then nothing is called. So the variable actually is changed to be a function, is deed of a variable. So it doesn't have like a type, like a number or a string, it has a function type. But let's for example, like we have to console log this function or this variable. Like we can say, say hello, what do we will have in the console? So let's go. Hi again. You see we got the function code. We didn't have the goal of the function. We didn't have the, exactly the same sentence which we had in the pop up here in the prompt. But when you call the function, let's see what will happen. We have the function and we have undefined. So that way, because this function is not returning anything. So this is a difference between calling the function or just saying the name of the function. So in that way, we can put into the function content like in the console log, we can call it. And we will get undefined when this function doesn't have any return value. But look, for example, ivory turn by some return, return from say, hello function. So we can see that, okay, it will be called. We will have the alert and then we will have in the console log the return, the return from say hello. Let's write that. As you see here, we didn't get undefined because this function is returning a value. When I remove those parentheses, again, I got the function code printed. So this is a difference between calling a function and defining a function or calling the function without any parenthesis. So we get the function code. And also here is a way to define a function without having this syntax. So this is called function declaration, and also this is function declaration, but it's called also functions expressions. 53. Arrow functions: In modern JavaScript, there is even more easier way to have or define a function. So as we saw before, do we define a variable and we give it a name like a function, and then we have the content of that function. So let's see the other way. The other way is called a row functions. So the basic of that we can say define a function. We can say, say hi, and with this say high, it will be not a function like this. So we can just define the parenthesis and we are not using the function keyword. And then you draw an arrow. How you draw an arrow, you can say equal and the greater than. So in this way you have the arrow function and the content of the function will be between the curly braces. So in that way, I can say hi directly. I will say here console.log and then say, or I will say I have string, say hi. So after that you can call this function normally, like any function. So we call it here. And then, okay, Say hi, the function is called. So this is a way of defining the arrow functions. Of course you can pass parameters as well. So say hi, and we can say name. And this name, you can pass it as well here. So I will replace this with backticks. And then we can have here say hi to. And then we put the variable here. So say hi, and then we put the name. So here I will put here java script. So in the call it will replace the name parameter with this parameter inside this console log. So when I call that function, I said, Say hi to JavaScript and it is a parameter which I bust and it's replaced here. So in that way, you can also define a functions. And most of the people are using these nowadays. So as well, when you define a variable, you can copy the function. So I can say hi to, for example, or say hi, copy. Like we can define a function call, it's a high copy and it will be say hi, say hi. So when I call, say Copy, then I will copy exactly the same content of this function. So in that way, you can have a different name of the function, but the same content of another function. So with that, I can say here as well JavaScript. So I will have it two times, one from the original function and the second from the copy its function. So you can assign function to function, so they will have the same behavior and the same return value as well. So let's remove those calls. I am going to have like a function which is returning directly a value. So of course you can return a value like how we saw before. For example, I have to have some, get some and then, or like we can say get double. And then with this get double, I will have a function. And this function, I will pass like some number, and this number will be returned, or this function will return for me, then number multiplied by two, like I am getting the double of this number. So now I am going to check this function. I will pass a number like four. And then we can console log it. So I can say here console dot log this function directly, that call of this function. So it will return for me 8. So as you see here, we have eight. So in that way, okay, I return a value and using that function so we can as well with modern JavaScript to get rid of this return. Like you can return a value if your example or your function is returning, or it's consisting of one line. So in that way, you don't need any of these curved braces. You just have to have like a row function. And then you have the return value without the keyword return. So because that our function, I discovered that it's returning only or it has only one line. It doesn't have multiple lines. Some functions, they have, they do more operations, they have multiple lines. So in that way, you are forced to use this curved places. And also you have to put return as a keyword as well. If you need a return. But with one line function, it's better to have it like this. So better than all of these lines. You can have everything in one line. So as you see here, I am consoling and logging this function with some value which is passed in the parameter. So I will get exactly the same value. So in that way, you can define the function easier and simpler in the sequence of your code. 54. Function Closures and Scope: In JavaScript, there is a concept which is called a closure or function's scope or a block scope. So what does it mean? So for example, let's assume that we have a function which is called Show Text. And inside this function, I am defining a variable which is called text. So if I have here like some goal of this function or usage of this variable. So then this, it will be available, the variable will be available as long as it's inside the function, because I define that variable inside the function. But when I use variable outside of this function, then I am going to get an error that this variable is not defined because it's defined here inside the scope of this function and it's not available outside. So a variable which is declared inside a function is only visible inside that function, so we cannot see it outside of that function. This is called a local variable. A local variable inside that function. Let's try this code. As you see, I got an error. Text is not defined because this variable in this line is not defined. As you see here, alert text is defined inside the function, so anybody outside cannot see it. So in that way you have to distinguish always between local variables and outer variable. Let's define an outer variable. So I will say you let username for example, and I will give it a name, John Smith or just John. So in that way, I can use, of course, the outer variable inside a function. So we can use that. No, any problem with. So when I remove, for example, this ion JavaScript, I put plus like I want to combine this function or this text with some variable, then this variable will be available inside that function. So I will not get that error. And I would get an alert when I call it. Let's try that. Okay, we still have the error because we have that error here, so I will skip it, commented out. Okay, As you see, the code got executed because I need to call it in that way I have saying SHO message. So I was calling different function. I need to call the show text. So when we try, Okay, hello, I am Joan, and Joan is a variable which is defined outside of this function. So in that way, I can be able to use the variable inside any function when it's public. But when the variable is in, inside the function, I cannot use it anywhere outside of that or of the scope of that function. And those type of variables which they are defined in the sequence of the JavaScript file. They are called global, like they are not defined inside any scope. So this is a global variable. The whole application or the whole JavaScript application functions or another variables another files can access to that variable. But here, like a function or this text is not accessible outside. So it's called a local variable. 55. Immediately Invoked Function Expressions (IIFE): So before we were seeing that we are calling the function by calling its name again and again every time I need to call it. So there is a way to call the function immediately, which is called like IIFE immediately invoked function expression, which is a JavaScript function that runs as soon as it's defined. So we don't have to repeat the sequence of this calling of this function, like the name of this function if we want to name it or call it directly. So the wave to do that, we just need to remove this call. And then you have to surround this function totally with parentheses. So I have here the open parenthesis, and then I'm going to close it. And then you call this function immediately because as I told you, we call a function with parentheses without them, we are just printing the context of the function. So after that, we save, do it. As you see directly, it's called like defined and cold. So if you are defining a function and you are calling it directly, you don't need even the name for that. So you can just use it and call it immediately only if you are calling it somewhere else, then okay. You can't give the name. So you can also get rid of the name if you are going to call the function immediately and only one time. So this is called i e immediately invoked function expression. 56. Functions Callbacks: In this lecture we are going to talk about function callbacks or callback functions. But before I want to add for you like more feature about JavaScript interaction with the user we saw before, alert and also prompt. That is also something called Confirm. So with this confirm, you can display a message to the user, JavaScript asking him if it's okay or no. So you can have like for example, Ru, like for example, all we can say like that. So when you call this method, okay, we have this prompt because we called it before. And now, are you old? We got here okay. And cancel. So in that way you can say, Okay, then this confirm method or confirm function will return for you at through, and when it's cancel, it will return for you false. So we can use this function and example or as example in our callback functions. So let's go there. So first of all, I want to define a function. So function, it will say like the name of it, ask question. So this question will be like yes or no question. So I will have here that question by itself as a parameter. And then we are going to have this function directly. And we are going to ask the user about like some, like the question itself. So we can say here like let variable, like we can say answer, and this answer will return or we'd get the value from the confirmation message, which will appear on the browser and the user will press OK or Cancel. So the last question will be the question as a parameter which we have here, which will be passed to the function call, and then we will get an answer. So after that, you can say like if answer, like if he answered orbit or let's give it a name like is. Okay. Okay. So we can have is okay. So if he pressed Okay, Then we are going to do something else. We are going to do something else. So let's have a console log here like dust. I can say we use you. Agreed. Or we can replace it with alert as well. So we can have here alert is deed, and also we will have another alert. We say you canceled the execution. So in that way, when I call this function with some specific question, I will say here, are you old? Then? We will have first our message which has before. And then are you old? Then when I press Okay, I will set our eye will get you agreed because I pressed OK. Let's refresh again and we will press Cancel. So you cancel the execution. Okay, Now, if I want to have like, like imagine that I am passing another parameter which will be a function call. So this for me is a valuable, so I use that variable inside the code. Okay, nice. So when I say here like yes, as a parameter it's a variable. And also I define another variable which is called No. Nice. So when I say here, instead of yes, or instead of this alert message, I put yes and I put parentheses after it. Then I have to expect from the parameters of this function that the S is a function as well. So in that way, I am saying that this parameter is a function call back as well. No. So we have here No as well. So those callbacks will be executed based on sequence of the function. But where are those functions defined? If you remember, those are parameters. So I need to have here as well parameters which are function. So in that way, those functions are useless. They don't have any code inside them. Only when I pass those parameters. Because if you remember, I told you this is string will be replaced by question and it will be used in the function inside it as the parameter question. The same thing goes for the function parameter. So I need to define two functions. So let's define them fast. So I will say here I have two functions. One function is called shore, ok, and other is called Show cancel. So now we are going to pass those parameters or those functions to the parameters of this function. So I will say here, the first parameter will be yes. So when yes, I will say, Sure, Okay. When it's no, I will say Show, cancel. So in that way, this yes will be replaced by show, okay? And then it will be executed. So this is the way, remember that we are passing only the function. We are not passing the call of the function. As you see here. I don't have here paranthesis. So that's why, because I am passing that function to be replaced here. And then it will be called directly. It's like I am doing here, like showing okay, at either place it here directly. So this is the callback function. This is a callback function and this is a callback function. So you can use or walk with your callback functions easily. We will see them in many places in the future when we are going to do a real projects or in other courses of mine that I am doing a real-world projects. So you can see that we are using the gold bags heavily, especially from the libraries, especially if I am using a library. And this library has a lot of functions which are having some like parameters as a callbacks. So in JavaScript, you need to consider also the variable or the parameter can be normal variable, all function as well. 57. Object Syntax: In the previous lectures, we learned that we can define multiple types of variables. And those variables, they can be string or a number, or a boolean or any other types which we saw before. So those divs or those variables, we call them primitive because the value contained only a single thing, be for example, a string or a number or whatever. But today we are going to talk about a new type, type which is called object. And this object can hold multiple of all of these divs, which I mentioned before. And with this object, you can handle with it multiple data in one variable. Like I am putting all of this information in one variable. So how we can define an object? Let's define an object which is called person. So to define the object, we have to use the curly braces or the curly brackets. So in that way, inside this object, you can define the keys. Keys of that object which will contain multiple values. Like it can say here that we have a name. We have as well, age, and also we have is married. But of course the syntax is not like this. I'm going to explain it more. So we can imagine that the object is a cabinet, a cabinet with sine trials. Every piece of data is stored in its file by that key. So when I want to open this cabinet and find a file, I can say, give me the file which has key called age. And then I opened the file and then I check that value. Exactly like this object. This object is a cabinet contain multiple keys. I want the key of the name or Q1 or Q2. I take the file and then I check what is inside it, I will find a value. This value can be a string or a number, or a boolean, or any other values. So we can define an empty object by doing just this. So this person is empty object. All you can say as well, not like this, but you can say new object in that way. So this object now is empty, but we need to assign some values to it. And this what we will see in the next lecture. 58. Object Properties: After we grab a file, we define it by key. As I told you, we can call that in JavaScript as a properties. So you can define a properties directly in an object using like some keywords or the key which you want to assign. For the example which we have here, we can say that we have name and we can with colon define a value or assign a value to that key or to that file. We don't use equality sign, but we use the column. The assigning of value of property of object is done like that. So for example, I will give a name here, so I will put here my name. And I also have a key which is called like I can give my age and also I can give as well my status. So if I am married or not, so I can put here false or a true. So this is object, and I can use this object now anywhere in my application as one variable. So I can also do a console log to it. So when you do a console log for an object, you will get the following. So when I save, I will go to the light, to the browser, and then I will open the DevTools with F2. And I will see here that I got an object and this object contains age, is married, and name. And also we can access only some specific properties. So I want to console log that age of this person. So I can just separate the person with a dot so I can put dot. And then I would get in autocomplete these options like it's a properties of that object. So we have age, is married and name. So when I put age and I am console log it. So then I will get in the value here. So it's like I define a variable only one valuable age, and I am using it in object, not as a single variable, so no need for that, and our code will still work. Also, we can add properties, not initialization of the object. So here I have the variable and the name of the variable and then the object sign and I have the key and the value. But I can also do like directly assigning a key with a value to that object. So I can't say here person, and then I put dot. Okay, I got here is married name but I don't get, for example, anything else which I want. So for example, you can add that property for you. So I can say is admin for example. So I can have here is admin and I put it as a false. So now let's try to like console log this person. So when I press Save and again, again load, then I will see that is admin is added to that properties. It's exactly like I did here. Like for example, I added is admin and I did false. So it's exactly the same way this, so I can delete that as well. And then I will get the same result. So there are multiple ways to add properties to the object. One of them is like by directly adding that key and a value. And the second, we call this property or this operator as dot notation. So I am having a dot notation on the object to access its properties. 59. Removing Object Properties: After defining an object property, we can delete it easily by using delete keyword. So for example, I added here is admin. I can delete it, it very easily. So I just say Delete. And then I say person dot is admin. So in that way, it can be deleted at, in the console log. We will not see it anymore after we added it. So let's save, refresh. And as you see, we don't have is admin here. So in the way you can add properties to the object and also you can delete them totally. 60. Property and Value Existence Checking: Of course, after you became a very good developer, you will have a very long code and you will define a lot of objects in your project. And maybe somehow you need to check if there is some property inside the object or not. There are multiple ways to see if there is a party or a key in the object. So for example, I would say here like, I want to check if there is a property in the person called last name. So when I tried to console log lastName, then I would get undefined because I don't have that property. Of course we didn't get any error here. But also, you can check if there is property inside the object by using a method after the dot notation, which is called has own property and with has own property, you can say the property name. For example, I will say last name. And based on that, you will get through or false. Okay. It doesn't have this property, but let's put that we have name for example. So when I console log this value, person adult has property or has own property, I have true. So in that way you can use it if conditions. So you can say if a person has a property, has a name, then we can do like something. If not, we can add it may be. So for that, when you are deleting and adding properties to objects during the code sequence, or maybe in some for-loops or, or, or some external source is updating your object, then you need to check if the property is there or not. So with that way, you can check that. There is also another way that you can check a property if it's there or not by saying with a key in. So we can say like name in or we have to put it like in a string so we can say name in, and then we say person. So if there is name in person, then it's we're returned for me, true. So we can't be sure of that by doing the following. So I have here, like let's put it back. So to keep for you the example, I'm going more down. So we can comment out this console log. So I can say here that okay, Let is exists. So I can have here like name. Of course you have to put it inside a strain, like the key should be in a string like this. The same thing goes for has own property. We must have it in a string with single quotation or double quotation. It doesn't matter. So we can say name in person, and then we console log the exist. So let's try that and see if we get true or false. So when we refresh, okay, I got through. So let's put, for example, last name and we refresh. It's false. So exactly the same way. So has all property and key with in keyword and the object name. You can check if the key or a property exist in that object or not. 61. Practice Functions and Objects: Okay, if we remember, we talked about functions. So if you see here that we have created a person by doing this. So if I want to create another person, let's give a name for this as a person 1, then I need to have Person 2. And then I will repeat again the same properties. We can wrap that in a methods. So we can have a function or a method which create for me a person so far that we can define a function. So I can say const, we can say, or let, doesn't matter. Let create a person. And with this creates person, it will be a arrow function. With this arrow function, it will take parameter like name, age, and also like is, Matt it. So with that way we cans see if this is possible to create a user with a function or not. So I will have here fix. So inside this method, I will say here constant in new person. And this new person will have a properties. And the first property is name. And this name will be like the name which I have assigned. I have passed in the parameters age and I can have like age like this and is married. I can have it also is matted like this. So after that, I return with this function, a new person. Okay, for so forth that we can call that method easily for creating users. So I will say here or creating person. So I always say person, one will be create person. And this person will have name like John. And he has age 22 and he is married, I will say false. And also I can create another person, person two. And this will have creative person as well. And he will have name Smith. And then a will have like 25. And he is married. So for that, I created two persons in this way. So let's console log those two persons. So I will get this one. And then I will go here and I say person one, console log for me, Person 1 and console log for me, person two. So after that we save, we refresh. And we will see that we have really two persons and to objects like this, because our function created for us a method or creating for us and object, and it returned it as we saw in the function's return values. So for that, we can make this method even smaller. So you don't have to define a constant. You can just delete all of this constant, delete all of this return, and directly say, I want to return an object like this. So I can return an object. And you would get exactly the same value because I am returning and object with keys and properties. And also, if you have the parameters of this method has the same name of the object properties, you can also remove them. So you can just say like this. So the values will be assigned automatically to the key of that property. So he is a parameter, has a name, the parameter has the same name of the object, property, person name. So when you refresh, you'll get exactly the same values. Let's make it even simpler. We can also remove this returned. So you just have to say return for me like this. So as you see, we got an error. So if you want to return the object directly, you have to like surrounded with parenthesis. So we have here parenthesis and then we save, refresh, we got the same value. So as you see here, our function, it was like this. And it got like this. So it's very short and easy to use. So for that, I would always do recommend that I create a method for creating an objects. And this what we will see in more advanced step about creating objects using constructors. So I'm gonna put like the code before as I showed you. So you can't have always, like keep in memory that how it was before and it's after. So we can't have here like before. And create peer person. I can call this method before and we have it like after. So in that way, you will never forget how we were trying to shortcut this method easily. 62. Object Methods: Objects are usually created to represent entities of the real-world, like users, person's orders, cars, et cetera. So in the real-world, the user can act like, for example, select something from the shopping cart, login, logout, et cetera. Actions are represented in JavaScript in the object by functions in the properties. So we can add also functions as a properties to the object as well. So imagine that we have a car, and this car has properties like name, model, weight, and color. And also it has like some values for every property. Also the GAR can have methods like start, derive, break, and stop. Also, we can have another car from different brand and it can start in different way, drive in different way, and break in different way. So for that, we can as well-defined, uh, properties as a methods in the objects. Let's see how we can do that. So I am going to have an object here. I am calling it like car one. And in the car one, it will be an object. I will open the brackets and then I will give like brand for this god, it will be fiat, exactly how we had in the example. And it has like color. So we can say that color is red. And also we can say speed. Can, for example, it can go to a 120 kilometer per hour. And also we can add more properties. So one of the properties we can have as well is a function. So I can say like for example, start slow, this is, God was going to start. So I can't say here function like this. So you can define a function. And if you remember, we learned that we can also have a functions like row methods. So we can have as well here like some function like this arrow method and we can define it like that. So here I need to put the comma. So in that way, start will be a method where it can do something. So I can say console log, just like that. And I say car is starting. So we can say that. Also we can have a break. And we can give also a function, a row function, and we say console.log. And as well we say car is breaking. All you can as well-defined another method. So as you see here, I am separating them between coma because they are properties at the end of that object. So I can also create another like type which can be stop. And we can have also like a function. And this function will have like some also input or properties or parameters. We can't have it without parameters. And we can have also like a console log the car stopped. So in that way, I can directly reach those method by calling the object with dot notation. And then I can access that method and I can't call it. So now the object is defined, but we can also use it. So I can say here, console.log or I can't just say here, got one dot start. So after the coiling, so you see, I am calling this method. So I save, go again to our browser. I get car is starting. So exactly like that. So I can call a method in an object like this as well. We can have a methods like set speed for example. And this method can have, we can say properties as well. So I can have here speed. And then I can say that this speed is going to console log for me that current speed. So I can hear, have the GAR speed is, and then we can use a plus or you can say, see, I use a backticks, doesn't matter. And we can put here the speed property. So I can say here as well, card one. And then set speed, as you see it's autocomplete. I can see everything. And I can have here 262. So after that I refresh. I will say Godspeed is 262. So exactly the same way how we are defining methods, but all of those methods belong to this object only. I cannot access those methods like this. So I cannot say start because they belong only to that object so nobody else can access them. So only when you call the object with dot annotation, and then you call that method. Don't forget those parenthesis because you are calling a method. So this is exactly how console log works. So here is the answer. So I have here a console and console is object. And it has many methods like log table time. And we have one of them is look and is log is communicating internally with the browser. And for example, we pass a string to it, and then we have it printed here. So also console is an object and it contains also its own properties. So exactly the same way. So we define an object has some properties and also methods. 63. Using this: It's common that sometimes I need inside those methods to access some properties which are in the same object. So for example, I want to say like the current Godspeed is 220, so I don't need to pass any property. So we can, for example, let's keep this method. Use another example like the color. So I can say here, we can say Get color or print car color. So I want to access inside this method the property which is called color. So I need to console.log property. So I cannot say here color. Because if I go and call this method, so I will say here starts at speed and we can say car 1 dot print, car color. Save, go here. Okay, everything is printed, but I said colour is not defined. So this operator or this property is not defined because it's inside this method. So to access that color, which is this one inside the same object, then I can use a keyword which is called this. So I can say this like this, the object, I mean, this is equal to the object. So it's like parents, I'm going one level up like this level, not inside the scope. So I say this dot color. So we save. And we don't have the error anymore, but we are getting undefined. This is because I used the arrow function. So the arrow function, when I have it like this, I have this dot color as undefined. But when you use the keyword function like this, so we have, we can remove this part and say, Okay, I have function, then I can retrieve this color. So, okay, now I have it as red. So, okay, what? I want to use a row function because they are more beautiful. So then in that way you don't have to use like this keyboard, you can use a name of the object directly. So inside the object of itself, you can use also the name of the object. So you can say card 1 dot color. So instead of having undefined now, we will have as well that red. So this way you can access the properties of the object inside the methods of the object. So I showed you now in this example, multiple ways to define a functions with parameter, without parameter, and how you can access all of those properties inside one object. So remember, if you want to use this keyword, you have to have a normal function definition. Without a raw function. 64. Object References and Copying: Okay, in this lecture we will see how we can clone or copy objects. So if you remember, we were defining like variables. We say card 1 is equal like to their type. We can say Fiat. And then we are copying guard one to another variable by saying, let guard t2 is equal to 1. So simply both of those, Gawain and cartoons, they have same value. Okay, the difference now in object when I am defining two objects and I am cloning to each other that they are referring to the same memory slot in your PC or in your memory. Here, when we are variables like a string or a number, let's say the pyramid leaves type, which we talked about before. That string numbers, boolean, which are simple in JavaScript, they are having for the variables different locations in memory. So I will explain that with example. So let's assume that we are going to change the value of cartoon to be BMW. And then I am going to console log guard one and console log cartoon. In the case here we have, we will have guard one will be Fiat and B2 will be BMW. Let's see that. So I will refresh, go to console. I have Fiat and BMW, but in objects, it's totally different. I will show you an example. So for example, I am going to change this object or this variable to be an object. And it will have a field called name. And this name will be yet. And also I will do the same for God to, but I will assign cartoon or car to car 2 exactly the same way. And then I am going to change that guard to dot name, as we saw before, how we were changing the name of value of some key or property in an object. And I will give it, like we can say BMW, like this. So let's see what will happen when I console log R1 and R2. So before we saw that they are different, but now as you see, both of them has BMW. So that mean that objects are referring in JavaScript to the same memory plays or same memory block in the memory when you are assigning them to each other. So as you see here, we have two objects. They are referring to the same memory slot. So I have user and admin, and they are copied from each other exactly how we have here. So you can say for example, this is user and this is like we have admin and we have assigned the user to the admin. And in that way, I will say admin has name and also the, I'm going to console log this user and also admin, it's exactly the same result. So as you see here, the artifact in bows to the same memory slot. So when we are cloning the object, we have to be very careful. Imagine if you are working with some big program and you clone some object somewhere. Do you change a value of some object and the other GOT changed. So you have really to be careful when you are cloning and objects. So there are multiple ways to clone the objects in the right way without having this problem or this issue. The easiest way that I delete this clone. And I say that, okay, I have now empty object. Now admin is totally a new object. And then if I want to clone the user object, I would say admin dot name is equal to user.name. So in that way I guarantee that I clone that object. Okay, we save, of course we change the admin name and we tried it. Okay, now they are different. What if I have multiple properties? Like for example, I have here a year and then I have to say, okay, admin dot year is equal to user dot year. So in that way it's a little bit tricky because you need, for example, if you have 22 or 30 properties for every object, then you have to do it or clone it one by one. This is not a right way. We will see later how we can clone the object in a proper way so it doesn't affect the objects which is originally glowed from. So for example, I'm going to show you another way. So we have here this admin. And now we can use some object property, which is called object dot. And then we can have exactly the same copy of the user without changing the, for example, having the same memory reference. So for that, you have to use the keyword object with a capital letter and then assign. And then you have to specify the target. For now that target is empty. So we can have here empty object because admin at the beginning is empty and as you remember, we have dried away, which is empty to have a new reference in the memory, not the same as the user. And then you have to put the object which you want to clone. So in that way, we have admin with the same properties but in different reference or different place in the memory. So we have then admin dot name. You can change it, and then you can put BMW like this. And then we save, try again. And we will see that they have same properties, but different because we change admin name and it didn't affect the original which we cloned from, which is called user. So now the cloning is happening on different locations in the memory, not on the same location, but this way also has some trouble, as we will see in the next lecture, how we can fix a problems which we can have or phase during merging or for example, cloning the objects. 65. Shallow and Deep Object Cloning: Okay, we are going to talk about shallow cloning and deep cloning of the objects. So first of all, if I have a constant, we can call it God one and discard one is an object. It has some properties like name, we can say like Fiat. And also it has another property like color. With this color we can say like it's red. And for that I am going to define another constant. I will call it R2, and this cartoon will have equal to G21. So in that way, I, when I change the property of cartoon, like we can say that color and it will be, for example, the blue. In that case, when I console log both cars, then I go to the console, check it. Okay, I will see that both cars got to blue. So the solution for that, because they are both referring to the same memory slot in your memory. So when you have this problem, you can do just simply object dot assigned. And then we have open and empty object, which is the new one, and then the object which we are going to clone from. So in that way, when I refresh, I will see that the first object kept the color and the second is changed without affecting the first object. So the problem which happened to asset that we have a shallow clone, so we have two objects, they are referring exactly to the same memory slot. With this way, we did a deep clone. So we separated the object two from each other and I clone them. And then I have a space or a memory slot for each object. So I have a freedom to change the cloned object and do whatever I want without affecting the original object. Of course, we can use also for cloning the spread operator. So you can have like a open curly braces and then you report card 1. And then in that way you will have the same result. So three dots or spread operator is going to handle that object, dot assign. But this one is not complete. We didn't solve the complete problem. Let's say, for example, I have another object inside the car one, so we can call it as a parts. So this parts for example, it has another properties like wheel, like we'll size, we can say it will be 22 and also the glass mark. So we can say the glass brand, we can say the axon. So in this way, okay, I clone this object, I copy them, okay, they have the same. So I'm going now to change like the car tool. I'm going to change the wheel to be different size. So I would say car too, dot parts dot, and then I will put the wheel to be, for example, 16. So in that way, when I open and both of them, I will see that they got the same issue. So I have the same problem with object. So it's like I have also the same memory slot, but where, because this is a new object and this new object has a memory slot. And when I am assigning object to object, I am assigning only the root level. So the root level is different in the memory, not the same, but the object inside this object is referring same memory slot, which is different from both of two. But here it's referring to the same because I clone them. So to solve this issue, we are going to have the deep cloning. The deep cloning can be done in different ways. One of them is using some library, which is called low dash. And this library is actually doing the following. For example, I will have the split operator. I'm going to clone like that God one. And then I will give like cartoon dot parts. I am also cloning that object. So sorry, I have to remove this const. So I am cloning also the subbed objects in the same way. So in that way, this low dash is going to do this. So imagine if you have a lot of nested objects, then it would be a headache for you. So you need definitely the deep learning. So as you see here, I have different values. So you need the like the, the, we can say that deep cloning to be done by some library. And this library, it's called low dash, as I told you, you just need to go to low dash.com. I am going to use the CDN copy, which is a copy in there. So let's go there and we copy the one or the link which has low dash dot main.js. So we can copy the URL. And of course you can be sure that if you have it already, so it's working fine. So the file which we copied, this one which contain the library. So after that you can go to your file and say that I want to import a new script. So this script will be the same link which you have copied. So it will be like I have a script and then my index.js script. So in that way you have to make sure that this script is coming before you're working script. So we have index.js, which is this one which we are working on now. And then before that we copy the script which we have copied for low dash dot js. So in that way you will be sure that this library, it can be called inside your index.js. So let's go there and remove this part, and we are going to use a deep clone. So in this way, I call the low Dash library using underscore. And underscore dot its objects because underscore is object which contains the library, I say Clone deep method in that way. And then I assign the object which I want to clone. So in that way I save and then I have changed value already. And then we refresh. We will see that, okay, fiat, we add both of them yet, but the first object is not having the same value of the cloned object. So that way I have the cloned object chain the values without having any troubles or influence on the original object. This is called a deep cloning, not a shallow cloning. So when we do a deep cloning, we are creating objects from original object but in different place in memory, not in the same reference. And the most important also for the nested object, as I mentioned in the problem before. 66. Using The Spread Operator Merging Objects: In the last videos we saw that we can clone the object but not deep clone with using the split operator. The operator has also another benefit which is merging objects together. So for example, I am going to have another, like I will change their cars to and I'm going to give it a new property. So we can say, like I have to say top speed. So we can say this property is top speed 230, okay? And from cart one and cart to, I want to create one object which contains the properties from carbon 1 and also property of guard too. So you can't do that very simply and easily. So we can have in the way also the spread operator. So I will define here a car 3. And this galaxy will be a clone from God one, and also a clone from cartoon. So in that way, you can merge objects together. So let's print all of the cards. So I will say here that I have also the guard three. So let's see now, okay, As you see, we have yet, which is the original car, car, one with bards, and the second car which has only top speed property. And the third guard, it will contain the parts and name and color which are related to car one. And also the top speed, which is related to their car too. 67. Constructor Functions: So before we were defining the object in this way that we are using those braces and then we are creating the properties of the object. Also Esau, another way that we can create a function which is having like two parameters and returning the object and I create the new object using that method. There is a third way, which is called a constructor function. That constructor function, normally it get the same name of the target objects. So for example, we have student one, student two, but we have now a student. So this function, it's a normal function. And you can say a student with a capital letter, and then you can pass parameters to this object or to this function, which will be the age and the average. So now this function is going to have these properties. So I say this dot name or this dot average is equal to the past parameter, which is called average. And also I do the same for the age. So we have also these dots, age for the age of the student. Okay, now we have this function. It's similar to this, but yeah, let's say how we can create the third student. The third students can be created in a way by saying students three. And then I will use the keyword which is called a New. And with this new, I will say create for me a student. And this student will have parameter. So the first parameter will be, for example, 60, which will contain the average and also the age. So for example, we would have 14. So after that we can console log this object. And we can say that students three is for me a new object which is created. So as you see, it has now this way, so it has saying that okay, I have a new object. This object has a name, and this object is having two properties, like age and average. Let's console log student too and see what is the output. So we have here like console log and we will have here a student too. So in that way we will see directly we have the object without having a name of the object. So this is called a constructor function or constructor function, which is giving me the ability to create objects for a specific type. For us, this student is like a type. So the main goal as well of using or the constructor is to implement re-usable objects creation code. So we have different wave or creation. And this student for us is like a type and it has ability to create a lot of students objects without having this type of code or this one or for example. And also it's easier to understand and read in the console that I know. Okay, this student has a type or type of this object or this constructor, which is called student. 68. Garbage Collection: As we saw before, that defining an object is taking a space in the memory. So we have this object which is called user, and it has object memory or a slot in the memory with the permissive type, which is string, and it has a name. The memory management in Java script is performed automatically add invisibly to us. So for that is very important that to know that every object you define is taking a place in the memory. Every variable, every constant and every let, you are saying it's taking place in the memory of the browser and also on the machine of the client who is opening the website and using JavaScript code. So you have to know as well, like when I say user is equal to null, that there is something called in JavaScript at garbage collector. And this garbage collector is collecting the object or the memory slots or deleting them or free them in the way that there is, nobody is referring to that memory slot. So in that way, the JavaScript is going to take care of that and delete or free that memory slot, because now we lost the reference to that object. To explain it more in detail, let's assume that we have also another variable or another object, which is called admin. And this admin is same copy of the user, like they are referring to the same place in the memory. So in that way, when I say admin is user, so both of them, they add a fairing to the same slot. Okay, when the user is null, then is still one reference by admin. In that way, JavaScript want delete this object or it will not refreeze that space in the memory. That's because that admin, it is still referring to that memory slot. So you don't have to care about like how I can delete this valuable from memory when I deleted totally or when I use this null. No, don't worry, JavaScript is going to free the memory for you when you say that object is equal to none. 69. Math Object: In JavaScript, there are already defined objects which you can use them and they have some methods and also some properties which have fixed values. For example, one of them is math. This math was capital letter. It has a lot of methods like when the dot notation you can go and you can see all those operations. So to use them, for example, I can define a variable. I call it like for example log or we can say x, ok, x, and then x is math dot. And then you can say power round sign and all of this like operation in mathematics. So let's take one of those examples. So I will say here, like we can have, we can say cosine of, for example, put 45, the cosine of 45, of course we can put console.log and then we say x. And after that we refresh. Okay, this is the cosine of the like eggs. So all of these operations, they are available here in math library. So here there is log, and also the log has this value. So all of these operations, as I told you, available in this math library. So in different ways, like you can see the documentation about them. So first of all, you need to put like the method and then you put the mouse in Visual Studio Code and you will see what is the parameter. So here you need to pass a number and it says here, like return the square root of a number. So here is the explanation of it. So far that I would say this one, okay, I have all of this. So in that way you can use all of these operation in mathematics where you are going to use them in your code, for example, you can also use some rounding operations. So rounding operation, it will ask for a number and it will round the variable somehow, order number somehow if it's a float type. So for example, this one, it were rounded to lower level when it's this smaller than five and it will round it up when it's bigger than five. So as you see here, it's rounded to 43. Many operations in this math, you can take a look at them and read about them and you see if you want to use them in the future or not. 70. Date Object: In JavaScript as well, there is object PUT is called date. So you can define a date and assign it to some variable. For example, I will say here date and this date you can use a keyword which is called a new date. We talked about that before. So you can create a new object of a date. So let's console log now this date variable, so we can say here lead, date and console log. So let's refresh. As you see we have here October Tuesday and the foil, like format date. There are a lot of operations on this object. Now this is object, as you see, it's object called date. And this date object it has inside it a lot of methods like as you see here. One of them like get set milliseconds or get hours, get milliseconds, get minutes, get month. So let's try get month, get month is as a method and it will return for me a number. So I am recording now this course in, we can say in October. So I will get here nine. So this date object contains multiple methods. One of them like for example, we have to get, get hours, get hours. It will give you the current hours on your local machine. So in that way, you can display the current time in the browser for the user based on his local time on his machine. So in that way, I will say date dot get hours, I refresh and I get 20 because now I am recording at 20. So in that way you can do a lot of things with it. So you can create or create object date and also use it in multiple places to display information about the date to the user. So this object is also predefined in JavaScript and we can use it as well. You can take a look to all methods one by one by just clicking on it. And then you can read, get the second of a date object using local time as you see here. So this is the brief description about the date. You will see later when you have some project and you, and you would see the quizzes in this course, you can create a lot of things with the date object. 71. What is an Array?: In this section, we are going to learn about arrays. Maybe you are wondering, what is this box of chocolates? This box of chocolate is an array, or we can call it a matrix. The matrix in mathematics is row of values, which they have multiple or one-dimension. And in every dimension, I store some data. And those data may be, can be the same or they are different. So the array, normally they are, for example, objects, but they are, or they don't have keys. So the key for us somehow is an index, like I can start numbering from 0123, etc. So here is a matrix or the arrays, because objects allows you to store keyed collection of values, as I said, but quiet often, we find that we need an ordered collection where we have the first, second, third element and so on. For example, we need that to store a list of something like users, goods or HTML elements or CSS elements. It's not convenient to use objects here because it provide no methods to manage and order of the elements. We cannot insert a new property between existing ones. So I want to have some ordered elements because as you see before, that the object, they have gave some keys and properties, but those keys are not ordered in a specific order. They can be in different orders. So for example, if I consider this as an object and I want to insert some data here between this chocolate and this one. I want to put a white chocolate. This is not possible in objects, but with arrays. We can do that. In the next lecture, we are going to see how we can write an array in JavaScript. 72. Array Syntax: There are two syntaxes of creating the array. For example, I will say let array, this is a variable name, and then I will say a new array. As we saw before that we can define objects with new keyword and array is an object, but it's implementing an array. Also, another way to define an array is using the keyword array and like the square brackets. So with the square brackets, you can define an array as well. Always we are using the second one, which is this one. So normally when you want to define array, you can say that I have array, for example, of cars. And I will say here let cars. And the first element of the car, you can define here string or a number or anything. So I can say, for example, I have yet, I have as well BMW. I have, for example, like weekend, say Mercedes. So in this way, you can have an array of cars, but as you see here, we don't have keys. So the array element, they are numbered like starting from 0. So that element 0 is string fiat. The element one is a string, BMW, et cetera. We can get an element by its number in square brackets. So for example, I will say console dot log. Or you can use alert as well, no problem. So I can say here cards. And with those guards, I can access with the square brackets, the first element, for example. Or I can access the second element, or I can access the third element. So the counting is always starts from 0. So let's try that and refresh. We got here an error because I used the array let multiple times. So we can say here array 1 and array 2. So you cannot define the same variable name two times. So in that way I will see that I got for that when I change it to one, I got BMW. So this is how we are working with arrays, or this is the syntax of array. Of course we can replace as well the element of array, so I can say cars. And then I specify which element, let's say the second one, which is BMW. I can't change it with another type of cars like Jaguar. So in that way, it will be changed to another array. So I can also console lock that. So I have here guards one and I'm going to console it. So first it was BMW and then it's changed to Jaguar. 73. Multi dimensional Arrays: You can also in JavaScript defined matrixes or multi-dimensional arrays. But JavaScript doesn't provide the multi-dimensional array natively. However, you can create a multi-dimensional array by defining an array of elements where each element is also, is another array, like here in our example, Fiat will be also array. Bmw will be also an array. So let's have an example. So I would give like lead activities. And these activities will be, as you see array. And I can go to a new line and I will say, like the first element of this array will be also array. So I will say here like work and the work is like nine hours. And then I will have like food like we can say, or eat, like you can say, let's say like eat is better. So with eat, I have one hour. And also then I have, for example, like exercise. So I can say here like I will use, for example, two hours for exercising. And we can say sleep. We'll be on example, seven hours, etc. So now this activities are stored as array of arrays. So when you want to console log this array, so let's have here console log and we'll console log the activities. And when I refresh, I would get here the array. And in every member of this array, there are array, array to, to, to like two elements of every array. So when you open it, you will see that 0, the first index is work and nine. And when you open this one, you will see also array with 01 indexes. So in that way you can, you work with multi-dimensional arrays. I will give you now a new tricks. So you can console log this arrays in, for example, in the DevTools with a beautiful way. So you can say console dot table. So with this console dot table, it will console it for you in a beautiful way. As you see here, we have here the index, and we have the first item of the array and also the second item of the array. So every array is consoled as a table or as a row in the table. So if you want to get a specific element from multi-dimensional array, you can also use the console log. So here instead of table, we can say console log. And then you specify the first array or first dimension, which will be like first element, I mean this one. And then I will say, give me the second element of the first array. So I will get like nine because this is the second one. So here is first and this is the second one. So when we refresh, I will get here nine. And also when I put 0, then I will get work. This is because that I am accessing array of arrays. Also the same for third dimension, four dimensions, etc. So you can also make this work as array. You can have unlimited depth of arrays. 74. Adding Elements to Array: You can add elements to the array easily by using two ways. One of them is like you can assign directly to the fruits like we have here, an apple, orange, and plump. You can't just say, for example, like I want fruits. And you can just say that I want in the third element, like in the fourth element, sorry. So we have 0, 1, 2. And then I will say in the third element which is not exist like not till now. So I can put, for example, banana. So after that you can console log it and you will see that this element banana is added the array. So we can say here fruits and then reject it. And we will see that the item got added. So you just need to add the index. Where do you want? So if you skip some numbers, like for example, I have here 0, 1, 2, and then the third. So let's put you'd like six, what will happen? So when we refresh, we will see that there are directly those elements. But it says here in the console it gave us note that there are empty three places. But here in the array you see directly that we have the array with those indexes. So no problem with that as well. You just need to remember the index of banana. There is another way to add elements to the array. So if for example you can say fruits and then you put dot because now fruits is an array and this array like behind the scene is object and it has its own methods. So as you see here, we have methods for this array, as we will see later, one of them is called bush, so you can push element to that array. So for example, I would say Melbourne. So after that, when I refresh, I will see that apple, orange, banana and Milan is got added. So with Bush, you can add elements to the array as well. 75. Removing Array Elements: We saw before that we have element to push to the array so we can push or add element to the array by using the push method. But if you want to remove element from the array, you can use a method which is called pop. So with pop, you can just call it and then it will remove the last element from the array. So as you see here, we will save and we will refresh. Okay? And we will see that Mellon got removed. So if we see here like this is before and this is after. So after that, this is before and this is after. So the Milan got added and then got removed from the elements. Now to remove an element from the array in a specific location. As you see, the pop is removing only from the end of the array, like only the latest element, like here. In our case it was melon. But if I want to use or to remove plumb, for example, there is a method which is called splice. So with this applies, of course I'm going to just comment out those just to understand the example to not make changes on the array. So now our array has four elements, apple, orange, plum, and banana, which we added here. I want to remove plum. There is a method as well in the arrays which is called splice. And with the suppliers, you can specify from where you want to start to remove. For example, I want to remove a plum, so I say 012 the second. So in this way here in case of counting of arrays, it's the third element, but the index is two. So now I will say like how many elements I want to remove from that index and after. So if you want to remove multiple, you can say I want to remove the plum and banana, but if you want to remove only plum, I specify that I want to remove only one element from that index. So let's see what will happen now. If I refresh, I will get apple, orange, banana. I didn't get the plum. So from that index, from the third index, which is two in the counting, then I remove one element. If you want to remove more, you just say for example two. So in that case I remove plum and banana. So let's save and it got removed. So if you want to remove any element from a specific place, you just put the index of the element and count of it. And then the element will get removed and it will update the array. 76. Printing Array Elements Using For Loop: As you see here, we are doing a console log for the array, all of it. And it's printing for us all the members, but they are printed as array. So let's say that I want to handle the data inside this array. For example, I have array of numbers and I want, for example, to see like the double of every number. So I will going, or I will go here to comment out this. And I will define a new array. And I will say like lead numbers. And these numbers will have like 12 or let's say from like different number 24 and 36 and 42 for example. And now I want to loop over all of those numbers. Be careful you have here two separate with comma, not with dot. So the separation between the array element is with comma. And as I told, you can specify any type of the array here. So you can say here numbers, booleans, and you can have, for example, functions. It doesn't matter. So now I am going to a print or I want to print array or numbers, all of them in the console, but I want double of them for example. So we can handle the data inside the array using for loops or any type of loops. But the easiest way is to use a for loop. So for loop, as you see here when you select for loop here. So Visual Studio code will create for you and array all of it. All of the elements of the array which you need, or all of the members of the for loop which you need to print or handle array element. Or you can write it by your hand. I am going to write it by my hands. So I will say here four and then I will say let i, and then this I will, for example, be that length of the array. So like smaller of the length of the array. So if you see that there is a property which is called length, and this length were returned for me. How many elements inside this array? So after that, I will say I and then plus, plus. And after that I will open curly braces. And then I will say, okay, console log for me the array like this numbers. And then I will use as index, not a number, like how we saw before, 0, 1, 2, I will use I. So I is going to increase from 0 until the length of that array. So after that, if we have this number, so let's try to print it like this. I don't get anything, anything in the console because we need to initialize the eye. So as you see, sometimes you do mistakes, but you have to learn from your mistakes. So I have here missing the zeros that I must initialize the value variable ie. So then when we refresh, okay, I got 24, 36, 42, but separated not as an array as we saw before. So now I can do any operation on those array items. So I will say here like double them, multiply by two. So then I will get the double of those array items. So in that way, I will assume that the numbers dot length is returning for me, not one or two, the latest index, but it will return three elements. So it will return three. So when I say exactly equal, so it will not go to three. So it will go 012, which is exactly what I need for this array. So you have to be careful that this one is smaller than, exactly not smaller than or equal. Otherwise, you would get an error or none saying that the latest element of the array doesn't exist because we are counting to three and there is no like fourth element here, which is the third index. 77. Shallow and Deep Array Cloning: As we talked about object before, that copy of the object is always referencing to the same memory slot. The same thing goes for the array. I will give you an example. So I am going to copy this array. So I will have like lead numbers, copy and this number is copy. I will assign to it numbers. So in that way, numbers copy is going to have copy or we can have same data of the numbers. So when I want to change, or let's first like console log this to make sure that it's really having the same numbers or the same elements inside the numbers. So when I save, refresh, okay, I have array like twenty four, thirty six, forty two. Okay, now I am going to console log also here, the first array, like the numbers, I will say here. Numbers. Like you can also combine that. So you can say numbers array. And then you have to say here like space. And then you put this like dollar sign and close the back tick. So after that, you will be able to call the member or the member of that array. So after that, we can do the same for the other elements. So we can have here also by Arctic. And we will say numbers, copy and copy. I will have dollar sign and curly braces and then back tick. So now I will have in the console log two arrays, 24, 36, 42, the same. They are both that same. So now I am going to change the first element of the numbers copy. So I will go here and say the first element of numbers copy, change it for me to be like ten. Okay, we save, we refresh. We will see that both of them got 10. So exactly with objects like we have the same reference to the same memory slot of those arrays. So we cannot copy the arrays like this, especially if I want to do some operations on that array. Of course you can use this operation, but you have to know that you are really changing an array which will effect original array. So the same way with the objects, you can use the cloning or we can say the spread operator. So you can just use the brackets like this, not the curly braces, but the brackets because here we have array and then the three dots. And then after that you put the name of the original array. So when we refresh now, we will see that we have 24 for the original array and then for the new array or the copied array as you see here, because we change the first element of it. So this is one of the ways for like cloning arrays together. There is another way like using for loops. For example, I would say like I can define an empty array like this. And then I will make a for-loop. And with this for loop, I can say that numbers copy is equal to, like we can say numbers copy I or index because here I defined the loop already or the iterator will be index. I will say like number index or number copy index is the numbers index. So after that we will fill that array. So here we have to put the length of the numbers array. So we save, refresh as you see here, we have as well in new array, this breed operator which I showed you before, is doing this job. So we can have remove this and use the easy way and the modern way of cloning arrays together. So like this is the best way. So always when you want to clone an array and you want to change on it, then use this breed operator. You don't have to use the arrays, which I told you before, or like the, like the equal operation which I told you before here, that it's totally wrong because it's going to change the original array. And as I showed you, if you have nested arrays, as I told you before here, like we have array of arrays, then you have what you need to use, the clone deep, which comes from the underscore or low dash array. So here the low Dash library is providing you with a clone deep method. And this clone method you can say like what you want to clone. So I want this array or numbers. And in that way, it will make for you a new copy without affecting the original array. If the cloned array got changed values. 78. The Spread Operator is Also Used for Merging Arrays: And use also this breed operator to merge arrays together as we did with the object. For example, I have two arrays, names one and names2. Let me define a third array, which will be the marriage between name1 and names2. So I will have here names three, and then I will give it like the merge will be the spread operator that I will put three dots names, 13 dots named Stu. So in that case, we will have the marriage between those arrays. So I will console log the names three to see the result. So when I have now this marriage between those arrays, we will have, that is all, both of them are in one array. As you see, I have six elements. So this is the way or the easiest way to marriage arrays in JavaScript. 79. Reversing and Sorting Arrays: When we explore the methods from JavaScript arrays, we will see the multiple methods and helpful methods for us. So for example, I am going to use now are like a method which is called reverse. So the names three here we have like joint from both arrays here, names one and names2. So if I say name, this re like this. And then I put a method which is called a reverse. Then we will see that this array got reverse, like the firstname will be Val and then Annie, and then Sunday RAM is Julia and John. So when we console log before and after, we will see that difference. So now I have here the original Joan Julia ROM is Sandy, and the second is the reverse, the opposite of it like from the end to the start or hear from start to the end. So in that way you can reverse array. You can also sort the array. So by using like the sort method. So you can say here that sort. And then with this dot sort, you can have like some compassion array. All you just say sort like this. I will comment out this. And then you will see that all array is sorted. So we have John, Julia ROM as before, and now it's sorted by letter, as you see here. Like the first letter is a and then j, and then our S, and then vowel at the end. So the sorting comes by letters. If you have numbers than the sorting will come by numbers. So those great methods, you can use them directly in JavaScript on arrays to do those operations like reverse and sort an array. 80. Finding Array Elements: One of the methods of arrays is finding some elements by name. For example, I want to have like, I want to search for some name and then I will get it in the array from the array. So in that way you can say like I have names, three, again, find, so we find method. You can find some elements in the array. So the easy way here, it's like, it's not that hard because you know the elements and you can just specify the index. But the find method has also some callbacks. So you can also specify some condition like on the, on the search inside the array. So this callback, as you remember, we called them in the functions and we define something called like the callback. And they are functions inside as a parameter of some function. So to have that, we can use this like find and we can define another function as a callback. And we will get here like a value. Of course you can name that anything we want. And then is this will be an arrow function. And inside this arrow function, you need to return a condition, that condition which will have the evaluation for finding. So for example, I want to have the value to be equal to like Annie for example, like this. So after that you have not like equal like this, but you have to have a true or false like this value. After loping in the array, it will loop. It will go one by one. Is John like equal to Ani? No, Juliet equal to any no, no, no. And then Ani equal to Annie. Yes. And then it will return it for you. But this fine, it will return array. So this array, we have to assign it to another variable. So I will say here let like found name to be equal to this one. So I will console log the found name. So and then we will see that it will return for us only E10. So let's refresh. Return is Annie as you see here. So the find method is finding a specific array item under some condition. So let's say for example, if you remember, we have defined, like all we have seen a method inside the string which is called start with. So if some string start with, for example, the J letter, then it will return for us, like the array which is containing Joan and Julia, because this is true. So when the value is returning or equal to start with with j, then it will return for me true. So whenever it through, then it will store that value or that result in the name. So we can call this as a found names because we will find now multiple names. Let's refresh. Go here. And as you see, we have the first element. So in that case, that find method is finding only the first occurrence of some item. So when I have first through here, then it will stop. And it will return for me only the first occurrence or only the first true result, which comes from that condition. If you want to use another way or return, they're all names, then you have to use another method which is called filter. And this filter is going to return for me all the items which start with a J letter. So as you see here, we have Joan and Julia. So in other words, filter is returning for us and array, but find is returning for us only one value. And this only one value returned only after the first occurrence of the valid condition or a true condition which we specified here. And return the element which is found, which is achieving that condition. So you will have to distinguish between finding and filter. Filter is returning all occurrences after or under some condition. But find is returning only the first true or the first occurrence of the condition with that value. 81. Iteration Using Array: If I want to handle every value from specific array, if you remember, we were doing with for loop, as you see here. But there is another way to do that which is easier and more effective and more performance using for each, for each is also a defined method in the arrays in JavaScript where do you can loop over the array elements. So let's have an example. So I am going to loop over the names three, again, like we have here, Define Names one, names2 and remarried them. So I will have here may names three, and I will use a method which is called for each. In the same way, these for each, we'll have a callback. And this callback, you can use the value by value. So the value will return here, like every element like weekend say here. Like more clear name, we can say name. So we have here names. So I will loop by name, by name for each name, and then I can use that name for whatever I want. So I will say here console.log, that name as well. So when we refresh, you see Our, okay, I printed the array first, which is here. And then I put in the ID, name by name for each is doing their job. Also you can do or type the index. So you can say here a comma as another parameter and say index. And with the index you can consolidate console log it as well. So you can use the index of that array. As you see, I have the index and the value which is a string. So in that way you can loop over the array with different way. We're using the foreach. 82. Change Array Using Array: What if, for example, I want to have some changes on some array. For example, I want to replace Joan with this one. So as you see here, like I can do a change on the array and return a new array which contain the changes. So far that I can loop over, for example, the name is 3, which is marriage between names and one, and names2. So we can loop over it and find Joan and replace Joan with that ghost. So far that I am going to have here names three. And then I will use a method which is called map. So with map, you can do whatever you want with the elements. You can change them. You can like do some operation on specific elements based on some like values. So or some condition. So for example, of course it will have the same callback function. And this callback function, you can do with it like here. You can have the gold back. And then it will do for you like you can do the following. So for example, I want to say if name is equal to Joan, like this. So when I will find some Joan, then you have to say name is equal to this one. So you can just put as a string. So of course I copied this emoji from the internet. So now we have if these array or this array, when it's looping and find Joan, then it will replace him with this value. As you see, I use the same variable, name, name and name. Now we can console log the array after the change. So I will say here, names, city, again, console for me the names of three. So let's refresh. As you see, nothing changed here because we need to assign, again that this map is returning for me a new array that changed array. So for this map, I have to say name three, or I can define a new array. We can call it names for. And this names for, I can console it. So in that way, I will have the changed name three array and assigned two names for. So let's do that. So I got here everything undefined. Why? Because this map method, you must do a return. So after you do some operation on that name or that like element, as I told you, map is also looping on in the array. So after doing some operation, you have to return it. So the return of the name. So as you see here, everything inside this call back, I have here this function, the parameter. And then I open braces, and then I have here the if condition. I do some operation on the name, I changed it to ghost, and then I return it. So the return will be for this function. So map will receive that return and then save it in its new array. So after that, you will not get that undefined. So you have always to make sure that you are returning the element, which is doing some operation. So of course, I didn't return the name, like inside if because if I return it only inside, if you will see that I, okay, I got first value, but the rest are undefined because I didn't return it outside of the F. So as I told you, the map is looping as well. So when the name is John, then it's returning the name but not work, but when their name is not, don't, then it's giving undefined. So it's better. In any case, at the end, remember to return the past value or the callback value at the end of the call back of the map function. I would like to note here that of course, for each is not doing that job for you because for each is returning void, it doesn't return a new array. If you do a looping and change some value and do a return. But map is returning a new array, as you see here, it's returning array of strings. So like because here we have the strings array, of course it's carried their numbers or anything. So as you see here, when you want to loop over items in array, okay, use for each. But if you want to change the array under some condition, then use map. Don't use map for looping inside the array. Of course it's correct. But it's better to use all functions which they are specified for. 83. Exploring Array.reduce: Let's assume that we have array of numbers. I call this array like reduced numbers. So in that way, I want to have the sum of those numbers. Of course you can do that manually using accumulation and for loops or for each. But it's better as well to use some method which is already defined in JavaScript. So I will define here a variable, I will call it sum. And this sum, I am going to use a method inside the array which is called reduced. So this method is behaving like accumulator. So it will have two parameters. The first parameter will be accumulator, and the second parameter will be the current number, exactly like with the name. It will loop over the names and then it will do something with that accumulator. So with accumulator, you can do some operation like you have to get the sum. So you can have the previous value of this accumulator plus the reduced number, like every number. So when you have that, so it will go, It's going to have the previous value plus the current value. So first loop, it will be like 10 and this accumulator will be 10 and 10. And then second round, this will be ten and this 20. So after that it will combine 20 and that then, so we will have therapy. So after that we will have 30 and here we will have like the 30 as well. So as you see here, when I do this operation and return to the sum, then I will get the value. Let's have a console log as well. So I will have here console log, I get 100. So of course you can do any operation like for example, I will do this and then I will get multiplied all of those array members. So to understand this more, I'm going to show you every consequence of this accumulation. I am going to brand the accumulation and I'm going to print the reduced number or the current value. So you can rename this to be easier for you. We can call it current value. So here the current value to use numbers, we replace all of this. So let's console log this as well. And we will see now, so the accumulation, so we have here the accumulation and here the current value. So let's see what will happen. Okay? So the first occurrence happen like the accumulation has then, and then the current number got 20. So it takes first, second number, as you see here. So it takes this and this. And after that, it do some operation or both of them and save the value or the result of that in the accumulator again. So in the new accumulator, we will have the multiplication between 130, between 10 and 20. So as you see here, we got here 200. The second iteration of that accumulator. Like you can as well do like this. You have to make sure that you have exactly the same way of like to understand the 12. So we have here. So as you see, sorry, we don't have the plus here. So as you see here, first accumulator is ten, and then the current is 20. So I got the first value, I multiply them, then the accumulator got 200 because this is multiply 10 by 220. And then the current is 30, which is the third element of the array, and then multiply them together, I get 6000. So the same way how it's behaving. So you just have to think that this is a previous value and this is the current value. And the return value is affecting the accumulator. So you can do whatever you want with that reduce. I hope you understand it. So if you have like any problem with that, just do this example and you will understand what is going on inside that reduce. 84. Exploring Array.some: We are exploring in this section or the methods of the arrays. So for example, there is another method which is called sum. And this sum method where it tests whether the atleast one of the elements in the array achieving some condition or passes some condition test. And if yes, it will return for us a true. So let's try that. So I am assuming that I have this array reduced numbers and I am going to loop over it using some. So with this sum, as you see here, we can have a callback function and it will contain the, for example, the current number. And of course it will loop over all the numbers. And then you can say, I want to return the number or the current number, which is equal to 10. So when it's equal to ten, or any number is equal to 10, then it will return for it, for me true. So it will say here like let's sum. So this sum we can consolidate and we can see here xm. And then we remove the comment, we refresh. So as you see, we have a true because one of the numbers has 10. But if I change it to, for example, 212, I don't have 12 in this array. Let's save. And now that is all it will be assigned to some. So we can have here false. So as you see that, it's like when do we want to find some element or to figure out some elements exist in the array or not. You can use this sum method. Or even as well. You can say if there is some odd number, for example, here we have all of them even. So in that way you can say just the current number, like mod two is not equal to 0. So we can try that. So let's save again. And we will see that false. No, because there is no, any number is odd. But most of them or all of them, they are even numbers. So we get through. So you can do any operation here. For example, search for some name or search for like some specific value inside the array, specific object, etc. So far that you can use that method. 85. Exploring Array.every: So in the previous lecture, we saw that if some of the elements achieve this function or this method or this condition, then it will return for us true. But now we are going to check every elements. So every item of the array must achieve that condition. So I'm going to put this example here, commented out to see that is all of the last work. So we can put here, I can call it every, so every element of this array must achieve that condition. So the method is every, it's exactly the same syntax. It's going to have a callback, which is array function and then or arrow function. And then it will return for me the condition which will be achieved or not. And check this with every, so let's check that now. And as you see that all elements of this array are even. Okay, so now let's check another condition. So for example, I want to say, sorry, here, I want to say that all elements are smaller than 30. So let's say current number than 30. Okay? This is false because not all of them or therapy or smaller than 30 because there we have 40. But when I put 60, for example, okay, All of them are smaller than 60. So we save or refresh, as you see it's true. So all of the elements must achieve that condition. So this is called Every. But if one at least achieve that condition, this is called sum. So they are totally opposite.