JavaScript Variables & JavaScript Data Types explained | JavaScript Tutorial #2

Key Takeaways

in this video we will look at the basic building blocks of JavaScript first we'll look at Java scripts five datatypes and then I will show you what variables are and when you need them [Music] note that this two building blocks are the same for whatever programming language you learn so if I was doing a Java tutorial the concepts will be the same the difference is in the syntax and this is a good thing because I like learning natural languages when you learn one programming language it will be much easier to learn another one so with that said let's dive right in now the simplest way to start writing JavaScript is directly into the browser since as I mentioned in the previous video all modern browsers are able to interpret JavaScript and come packaged with so-called developer tools so open either Firefox or Chrome browser on your laptop if you don't have these browsers installed I suggest you install them because using browsers like Internet Explorer to run an execute JavaScript is not a good idea so I would download either Firefox or Chrome and in your browser right click somewhere on the surface and select inspect if your browser is in your native language then it would be called something else but it should translate to inspect and when you click that you see something like this and this space right here is called developer tools and here you should see a console tab and when you click on it you get this space where you can write JavaScript directly in the next video I will show you all the different places where you can write an execute JavaScript and which one you will usually use as a developer but in this video we're gonna use the browser console so that I can demonstrate some simple examples so the first data type that we're going to talk about is numbers obviously when you're writing an application you need numbers some of the examples are you tube displays number of subscribers for each channel or number of likes for each video or how many videos one has when you search something on web application like Google for example you usually see total hits etc so these are all use cases where you need numbers and these examples use whole numbers but for example when you have an online shop where you need to display prices prices obviously won't be whole numbers always but rather decimal numbers with send precision also Amazon ratings right they can be four point five for example and in JavaScript their own data types for whole numbers and for decimal numbers the whole number data type is called integer and these are numbers like 0 300 minus 45 so positive negative numbers they're all integers and decimal numbers have a data type of decimal and again they are positive or negative or zero so zero point zero ninety point 777 - fifty point five they're all decimals the second data type is string the way I like to explain what string is is basically everything you see on your keyboard so obviously all the letters no matter what language they're in but also the special characters like m % % + - and also the space character on a keyboard also have numbers and numbers are characters or strings also so how does JavaScript know whether you mean a number like integer or decimal like 5 for example or a character 5 it knows it using quotes so you tell JavaScript that you're using string by using quotes it could be single quotes or double quotes so these single characters or any combination of them is a string so let's say couple of examples so 3 in quotes is a string a with louts letters from non English alphabets combination of letters and numbers special characters like an email or in password and also an empty space character is also a string so just to mention here so difference between character and string so character is basically just one letter or one number one special character and string is a character or a combination of multiple characters so these are all strings and this single keys are characters another data type in programming languages is boolean now to understand this let's say you enter wrong password when logging into your application usually you get a message saying you provided a wrong password or you accidentally enter wrong credit card number when buy tickets or invalid email address when registering so in the background developers write JavaScript code that validates whether the information that you provided is wrong or right or correct and to express that wrong or correct state boolean are used so word true Express is correct state and false expresses wrong state so again just like with numbers you can write a simple string false with quotes and JavaScript know that you mean a string without quotes it will be a boolean expression false that's how JavaScript can differentiate between those two in addition to that true/false can also be used for simple yes/no situations like is the apartment on Airbnb available to book on this date yes no there will be true or false in boolean terms or is user logged in depending on whether logged in or not you will see different web page that's a boolean expression is it a premium user true/false also boolean expression etc another data type is array that expresses lists think of applications that display lists of the same kind of data like lists of friends on Facebook or lists of apartments on Airbnb or lists of comments for your Instagram picture lists have their own data types in all pro in languages in JavaScript it's datatype is an array for example list of friends names will look like this will be an array there's an array that includes multiple names and now the syntax of the array that encloses square brackets so that's how JavaScript knows or can interpret that it's dealing with an array or you could also have a list of ratings for Amazon products for example so this will be an array with numbers as you see array contains other data types so here we have list of strings and here we have numbers and in JavaScript you can mix different data types inside an array here we have integers and decimals in one array you can also write an array like this we have string integer and boolean expression and the last data type in JavaScript is an object now in the Amazon review for example you don't just see a list of ratings you also see the author's name next to the rating and text they wrote in addition so you need all this information grouped in one item in the array you express that using object data type so a single rating object will look like this and note the syntax of curly braces so as we saw array was expressed using square brackets an object is written using curly braces so that syntax is important so the JavaScript understands what data type you're writing another example is an apartment object on Airbnb which will include all the attributes it has like location price ratings description availability images etc so an object for that information will look something like this just with more information inside and here you see that the syntax highlighting of the browser is also helping to see that strings boolean's and numbers are colored in different way meaning that javascript understands the difference between them so as I see object has key value pairs so that you know which value stands for what so all this author named user twelve rating five these are key value pairs where the key basically describes what the value stands for and the name of that key is totally up to you you decide what that's going to be also you can use any data type as a value inside of an object so here we have a string integer boolean and array as a value and you can also use another object as a value inside of an object and finally we'll go back to the ratings you will have multiple rating objects so a list of rating objects so the final list of these rating objects will look like this so it will be an array with square brackets and we have a bunch of objects that are comma separated now this is probably the most complex structure you will deal with most of the time so it shouldn't get much more complex in this now we saw all these data type example values but how do you use them to write a so-called logic in JavaScript the simplest use case is some basic addition subtraction etc for numbers you can use simple arithmetic from elementary school to calculate basic things and here I will use the chance to break this common misconception and you have to be super good at math to learn programming which is completely hundred-percent wrong I've been a software engineer for many years and I have worked in a lot of different projects and I have barely used anything more advanced than simple arithmetic Slyke plus minus multiply and divide when writing web applications so in JavaScript you can do all of this you can do subtraction multiply divide and you can also combine them just like you would with a calculator and of course you can do the same with decimals some real-life use cases for these basic arithmetic are for example when you add multiple items to your shopping cart or Amazon you see the sum and you also see the price break down which is the item prices plus shipment costs or when you have product ratings based on all the individual ratings you display the average rating or on uber for example you see the distance from pickup locations to the destination in kilometers or miles and in minutes all these are simple calculations which are possible in JavaScript now obviously all these operators are meant for numbers but there is a case where we can use the plus operator for string datatypes so what will happen if I write string 12 plus string 12 so we get 1212 so what happened here is that JavaScript knows that these two are strings and node numbers and instead of adding them it handles them as strings by gluing them to each other any programming that's called string concatenation and no you don't have to remember that word just so you know that there are weird names for simple things in programming the same way you can glue a string to any other data type so you can do bla 212 and the number will also turn into a string so to say or you can do the same with boolean values because Java Script interprets that as you want to create another string out of these two values and this examples probably don't make much sense but in the next section of this video I will show you some more real-life examples why this concept is actually very important to understand the concept of variables think about the following scenario you change your username on facebook so obviously your changed username is displayed on your profile but also all the comments that you wrote before the name change should now appear with your new username and also in all your friends lists your new username will appear right so this means if you had Facebook code where your username is written in all those different places so you have your username in the profile section you have your username in comment one comment two etc and in all your friends lists write written directly as is or let's consider another example think about online shop each product has a price and it's displayed in a list in the products own detail page and maybe also in combination to other products so if the store now offers a discount and the price changes obviously the price should be updated in each location where it's displayed so again in code it will look something like this obviously this is not a valid JavaScript code but just to give you an idea so somewhere in one javascript file you have the list of products where the product price is directly written as is and you'll have the same in detail page section of the product and combination now when the user name on products changes and those two scenarios all these variables need to be overwritten which means that you will have to go and change the price here and here and here and same with the user name change it in all places where it's used now that would be absolutely in convenient considering applications are so dynamic and things change a lot so that's where variables come in so instead of writing the actual value in ten different places you write the value once and then reference it ten times from ten different places and that reference to the actual value is called a vary and you give variables a name that makes sense for that value so for example product a price equals 50 so now you create a reference for the value 50 which is called product a price or user name equals a p-- user a so you take the actual value which is string and create a reference to it but in addition to that you should also let JavaScript know explicitly that this random name that you just came up with is a variable and you do that using VAR keyword this and remember keywords are words that have special meaning to JavaScript and because of that if you noticed the coloring or the highlighting of the world changed once I added var in front of it so now JavaScript knows yeah this is a variable keyword and this is the name of that reference or variable or the same with product a price variable and in code it will now look like this so first you'll create that reference somewhere like this and then in all the locations or all the places in JavaScript code where you need that value that actual number value you use the reference instead of the actual value so you have your text and the reference to the number in all those different locations and here you know the plus operator that I showed you earlier this is an example of string concatenation meaning string is glued to another value and this is where this concept is very useful so when you run or execute this line what happens is that JavaScript in the background replaces this reference with the actual value so when I execute this I see product a price 50 and this is a real example where plus operator with strings is actually very important and you will use this a lot because you will use variables a lot in order to make this variable concept stick more let's consider additional use cases first consider multi-language applications on most applications you can select a preferred language and see all your navigation buttons etc in your language now if application supports ten languages obviously developers don't create ten different websites instead the same text is translated in ten different languages and reference using variables and depending on which language the user selects the correct reference is used in the second use case which is very important is user input so when you sign up for a web application you need to enter your name last name email password these are all user inputs so what you input in the application as a developer when you when you prepare that code for future usage you don't know what these values are gonna be because users can enter anything but what you know is the name of the variables that will reference these values and this way you can use the actual values without even knowing what they are now if you want to practice these concepts so that you can remember them better in the description of this video I will link some websites where you can do practical exercises on the JavaScript concepts that I explained in my videos