Modern JavaScript Tutorial #2 - Syntax Basics & Types

Key Takeaways

all right there my friends so now we have our coding environment all set up hopefully you've got V s code installed on your computer and that package live server because we're going to be using this to preview our pages in the browser I've already gone ahead and right click and gone to open with live server so we can preview the website right here there's nothing there at the minute but that's because we have no content in the page but if we had an h1 over here that says page title save that and view over here now we can see that okay so what I'd like to do now is show you how to add JavaScript to a web page and where we have that JavaScript so first of all we're where do we add JavaScript to an HTML page well we can add it anywhere between the head tags or anywhere between the body tags so for example I could come beneath the title and add some JavaScript right here now the first thing to do is create a script tag like so and we place our JavaScript between those tags so I could say something like alerts and then hello world semicolon and I don't expect you to understand what this means at the minute this is just some random JavaScript to demo where to place it on your page okay but if I save this now then this script is gonna run and this thing right here this alert function this creates a popup on the screen so if I save it go to the browser we see that pop-up hello world we press ok and the rest of the page loads now placing the script inside a head that's absolutely fine you can do that but in some cases it's going to cause some loading issues so 99% of the time if you're adding javascript to a page I would do it not here but instead at the bottom of the body tag just before the closing body tag right there place that in and scoot it back if I save this it's gonna do exactly the same thing we see the pop-up okay and then the page loads okay so this is fine when you have a small amount of JavaScript but if you have a large amount of JavaScript with different functions and it goes on and on and on in this page then it would be better to somehow externalize that JavaScript and put it in a separate file then just link to that file from the HTML page this is a bit like when you do CSS right if you wanted to you could add a load of CSS in the head in some style tags but most of the time when we have a lot of CSS instead we do a link tag and link to an external CSS file so that's what I'm going to do most of the time inside this course probably 99.9% of the time in fact so I'm going to comment this out and instead I'm going to link to an external file so I'll create that file first of all right click over here go to new file and we'll call this sandbox j/s so all JavaScript files have this dot j/s extension that's important so now we can link to this file from index let's come down here we still need our script tags right here this time we say sauce is equal to and then the path to this file so it's just sandbox es ok so now we have that linked top if we write some JavaScript code inside this file it's going to run that when we load this page in the browser now over here we don't need to do any more script tags the script tags are right here okay so we can just write our JavaScript directly in this file now so I could do exactly the same thing alert then hello world and then close that off with a semicolon save and come over here and it does exactly the same thing okay so this is how we're going to be working in this series in this course we're going to be linking to our scripts from the bottom of the body tag to an external file now there's one more thing I'd like to mention and that is that in JavaScript we use semicolons like this to mark the end of a statement so this right here this is a JavaScript statement and this semicolon is marking the end of it it's like a full stop at the end of a sentence is our way of ending a line of code that does something imagine having a book and that book had no full stops or periods then you would not know when to take a breather right so that's the case in JavaScript as well this marks the end of a particular statement now technically in a lot of cases if you forget your semicolon then the code will still work and it's not gonna give you an error they're not required a lot at the time so if I delete that and save then preview this in the browser everything still works right now there are some developers who don't use them at all but in some cases if you don't use them then you will get an error and I think especially when you're first starting and you don't know the language that well or why you would be getting an error it's always a good habit to get into to add your semicolons at the end of a statement okay and we'll talk more about this as we go along in the course so anyway there we go that's how we add JavaScript to a web page so then for this course I'm using Google Chrome as my browser of choice hopefully you are too it comes with some developer tools and a console which will really help us a lot when working with JavaScript now you can open up the tools panel by pressing f12 inside your browser and that opens on the console tab right here so the console is like a sandbox area in a browser which we can use to test JavaScript code we can print out values and basically just play around in it so I could type some JavaScript code directly inside here and just press ENTER to run it for example we'll do alert again alert and just say hello and then press ENTER and it's going to run that JavaScript for us so it's a nice little area to play around with some code when we're learning now we can also log things to the console this thing right here from our JavaScript file so say for example I wanted to output some kind of value over here in the console when this javascript file is run I can do that I can do that by just saying console dot log and then in parenthesis what I would like to log to the console so for example I could just say one and then end this statement with a semicolon save it and come over here and we can see this one value over here now if we wanted to add something else we could just come below and say console dot log and then - and this is going to run in order because JavaScript runs from top to bottom so it's going to log this first then this so if we save that and preview we can see one then - now don't get too hung up about what this all means like dot right here and this log function and the console don't worry too much about it just yet we're going to cover all this kind of stuff later on just know that this is a function right here that we can use to log out values to the console and that is really going to help us when we're learning the language so for the first few chapters of this course while we learn the building blocks of the language we'll be using this console to test our code and see some results and then later in the course when we've learned all of the basics we'll move on to manipulating content in the browser itself in a webpage and other cool things too now if you're not using Google Chrome then shame on you but most likely the browser that you have has some kind of console in Firefox you can open this by pressing ctrl + Shift + K and in Internet Explorer use f12 to open up the dev tools then hit the console tab at the top to see the console okay so now we know how to use this console over here and how we can log to the console from our JavaScript file in the next video I want to move on and talk about sort of the most basic concepts in the language variables and constants so then one of the most fundamental things in JavaScript is this notion of variables and what variables do is give us a way to store a value like a name or a number or an email and then use that value whenever we want to later on in the file now there's a few different ways we can make a variable the first way to create one is by using the let keyword so that would look something like this we say let's then the variable name for example age and we set that equal to something so I'm going to set it equal to 25 then we end this with a semicolon okay so you can think of this as saying let this variable called age equal to the value of 25 now this value is now stored in memory and we can access it later on using this variable name so I could just come down here and I could say console.log and then the age variable which is what we called it and that's going to log this to the console so if I save and check it out in a browser we see 25 okay all right then let's do another example I'll say let Year equal to cero one night and we're going to save that and we want to log this to the console as well now I could duplicate this on to the next line but in one console log statement we can actually output several values and we do that by separating them with a comma so I could just say age comma then year and that's going to output both of these values sort of a save now preview we can see 25 then 2019 okay so this let keyword right here creates us a variable and if we want to override the value of those variables later on we can do so I could come down here and I could say H is now equal to 30 and what that's going to do is look at where we initially defined age grab that value and update it so the age is now equal to 30 we don't have to say let anymore we just take the variable that's already been defined and change the value so now if I say console dot log and then age underneath hopefully we should see 25 to begin with then we reset the value of the variable then this should be 30 so save it and preview and we see 25 201 9 and then 30 cool okay then so what if we wanted to create a variable but we don't want the value of that variable to be able to change well in this case we'd use a different keyword than let we'd use the Const keyword so let's now do another variable but this time use Const and this creates as a constants we still give this a name so I'll call this points for example and set it equal to something I'll say 100 and this creates a variable much in the same way as the let keyword does and we can log it to the console so I'll say console dot log and then points and we're still going to see that over here we can see 100 but now if I try to override this value the same way we did with this then it's not going to let me you've icy points who's now equal to something else like 50 save it then we get an error over here we see assignment to constant variable we're not allowed to do that we use a constants if we don't want this value to be overridden by mistake any point okay so something that's going to stay the same throughout the whole program now both of these key words Const unless they are fairly new additions to the JavaScript language there's a modern way to create variables and they're what I would recommend using almost 100% of the time now I will generally use let if I think I might change the value of the variable at some point or sometimes when I know that I don't want to change or overwrite the value of a variable I'll use Const instead but there is another older keyword that we can use to create variables too and that's is the VAR keyword okay so before let and Const came about this is what we'd use now I'm just going to do a quick demo and show you this so I'm gonna say var then name this variable score and set it equal to 75 then I'm gonna say console dot log school so this should still work and exactly the same way I'm gonna get rid of this thing where I try to override the value of points so we don't get the error save it and down here we can still see that school okay 75 so this right here this VAR keyword this is the older way to create variables before let and Const came about now you still will see some developers use this but in this course because we're doing a modern JavaScript course I'm just going to be using Const and let okay I just wanted to let you know about that that older way of creating them so then when we give our variables either let or comments down here different names these are the names of the variables there are a few different constraints first of all there can't be any spaces we can't say something like my space age okay it has to be one complete word typically if we want to use two or more words in a variable we use something called camelcase which is something like this my and then we start the next word with a capital letter my age and it's called camelcase because it looks like the hump in a camel's back alright so that's the first constraint we can't use spaces now the second one of variables can taine only letters numbers underscores or dollar signs but they can't start with a number they can start with any of those other things that just said underscore or dollar for example but they can't start with a number so I can't say 5h notice we get that squiggle line okay and finally there's also some reserved key words in JavaScript that we can't use for variables because they're used for other things for example let and Const so I couldn't create a variable that's called Const right that won't work because this is a reserved keyword in JavaScript for creating constants so what I'm going to do is leave a document attached to this lecture which is going to outline all of those different reserved keywords so you can check those out for yourself so that's just a few constraints when we're naming these variables also when you do name things try to make the name meaningful so that if another developer looks at your work they would say yeah I understand what this is meant to represent okay so one last thing in this video I'd like to show you and that is comments so say for example I want to make some kind of comment in this code for another developer when they come to read this file I could do that I could say something like this log things to console and that right here is grayed out this is a comment and it's a one-line comment and I did that by adding two forward slashes at the start so when JavaScript runs this file it's not going to run any comments I can also use these to comment out certain things like this if I just want to test something with a console log but then don't use it later on I can comment it out and now this is not going to run so that's how to do a single line comment using double forward slash I can also do a multi-line comment by saying forward slash and then asterisks and then we need to close this off at the end of the comment like so and we can place it somewhere else we could place it up here and then all of this is commented out as well okay so that's just a couple of ways to comment things out also there is a keyboard shortcut I could highlight something I want to comment out and press ctrl and /and it's going to comment those out I can do the same thing to uncomment those as well all right now there is just one final thing a promise in this video I want to tell you about and that is when we're using modern JavaScript techniques like let's and Const and other things in the future they might not work in 100% of browsers out there old browsers like Internet Explorer 11 and things like that they don't support a lot of the modern features so I would strongly suggest that you use something like Google Chrome as your browser for this course in one of the last chapters we are going to look at supporting all browsers using things like bubble but for now I would recommend using something like Google Chrome for the rest of this course okay then so we've seen how to store different data or values in variables we saw that in the last video but at the minute all of those different values were just numbers we did things like an age a year or points or a school they were all numbers right and that is just one data type in JavaScript now in JavaScript we work with many different data types the 7 in total they're all listed here and they all have their own unique properties and the things that they can do so we're going to have a quick run-through of all of them now but as we go into the course we'll be looking at each one in much more detail and using them all as we go through them so then first of all numbers we've seen them in action already things like 1 2 3 100 or 3.14 even decimals like this they are all of the number type the next one right here this is a string and strings are basically a series of characters in single or double quotes like a sentence or some kind of email like this okay the next one billions over here they are a special logical true or false value not in quotes they're not strings and we use these for evaluating conditions now this next one null over here this is a way that we can explicitly say that a variable has no value so we could create a variable but set it equal to null to say that that variable doesn't have a real value yet okay now it's closely related to undefined here but the difference is one defined is a type that's given to variables automatically by the browser that have not yet been defined so these are both empty values but this one right here no we explicitly set to a variable this one is automatically given to variables when they're not yet defined does that make sense okay so the next type this object thing right here these are more complex data structures which can have multiple different properties and functions meaning they can perform various different things now a lot of javascript is based around using objects and there are many different object types or types of objects built into the language which we can use out of the box there's a whole subset of built-in object types like arrays dates object literals in fact you might hear the same everything in JavaScript is an object which is a huge simplification but it stems from a source of truth but don't worry about that now there will be a whole chapter on objects later on in the course and we will look at all the different types of objects we can use in JavaScript as well things like arrays and dates and object literals okay and finally symbols they are a new addition to the JavaScript language which are closely linked to objects too so we're going to discuss them more later in the course rather than now so for the rest of this chapter we're going to be looking at these different types of data strings numbers null undefined and boolean z' we'll also have a quick look at arrays which fall under the object type down here it's a type of object with its own unique properties but we use them all the time in JavaScript and they're quite simple to learn which is why I'm covering them in this chapter now a variable which we've already seen can hold any data type be it a string a number null boolean and object etc we don't have to explicitly say what type of variable it will store on what type of data it must all and we can override a variable with a different type too meaning if we make a variable and store a string in it to begin with we can override it later on if we use the let keyword that is with a number okay so we can change the type of variables and for that reason javascript is known as a loosely typed language in contrast to a strongly typed language like Ruby or Python now I don't want you to feel overwhelmed with all the different types I think you have to remember them all don't focus on that because the more you code with JavaScript is gonna come naturally to you over time and we're going to be referring back to this type chart anyway throughout the course to reinforce your understanding of them the last thing I want to do is scare you off so as long as we have that idea of tights simmering in the background that is more than good enough for now so then the first data type I want to explore in more depth strings so we use strings to store letters numbers or other characters and we could use them to store something like a name or an email address or something like that so what I'll do is just log to the console a simple string so I'm going to say console dot log and remember we store strings in either single quotes or double quotes now they behave the same way doesn't matter which one you use but if you open with a single quote you close it with a single quote if you open with a double you close it with a double I generally use single quotes for Strings but sometimes you might see me use double quotes if I needs it so I'm just gonna say hello world and put my semicolon on and save this and we should see this logged to the console now we don't see the quotes right here but that doesn't matter over here we add quotes to make a string okay so then we can also store strings inside variables so I could say let email equal to some kind of string for example Mario that's the net Ninja code at UK and now that is stored in this email variable so if I wanted to I could log this to the console by saying console dot log and then email so if I save this we should see both of those things now logged it to the console cool okay then so imagine we have two strings and we wanted to join them together well that is called concatenation so concatenation is just a fancy word for joining things together so if we have two variables for example let's first name equal to Brandon and then we'll say let last name equal to Sanderson what I want to do is join these two different strings together now I can say let full-name equal to first name plus last name so this is string concatenation we use a plus sign to concatenate one string to another string in other words to join one string to another string so if I say console dot lock full name now then we should see this in the console now if we take a look over here we can see Brandon Sanderson book there's no space in between the two names so what we could do is concatenate after the first name a string which is just a space then we concatenate the last name so were concatenate in three different things here the first name then a string which is just a space then the last name so now if we save this we can see Brandon Sanderson with a space in between okay so we can do this kind of thing so we can also extract a single character for our string that we have stored for example of this one by using square bracket notation so I'll show you what that means I'm just gonna say console dot log first of all then we're going to take the full name and say for example I want the first letter in that name then I can use square brackets and I pass in 0 now we pass in 0 because javascript is a zero-based language meaning it counts from zero up rather than one up so in JavaScript this is position zero the first letter the second one is position one then two then three so forth okay so zero actually gets meet the first character so this is why we use square brackets after a string to get a single character in a particular position so this should get me B and we should see that in the console cool now if I wanted to change this to another I could say two and that should get me the a because 0 1 2 so if I save it preview we see okay so that's how we get a single character using this square bracket notation on a string now a string also has methods and properties now one such property is the string length so we could say something like this console.log and find the length of the string that is how many characters are inside the string by saying full name dot length and that gets us the length of this string right here so if I save we see 17 and if we were to count the characters which I'm not going to do we would find that the 17 characters and this right here this is one of them at space okay so that's the length property and final extremes has several different functions associated with them now these functions are called methods and there is a technical difference between functions and methods but you're going to hear them used interchangeably so basically a function is a snippet of code which performs some kind of specific task a method is just a function that's associated with a particular object or datatype and we're going to discuss the technical differences later on but the two words essentially mean the same thing so if I say method or function it both mean that we're performing some kind of function that does something and a string has several methods several functions that can do things okay so for example we have a method call to uppercase and what that does is take the string and it turns it so that all the letters are uppercase so I could say something like console.log we do the string we want to use the method on so full name then we say dots and we say to upper case so this is the method name so when we have properties we say dot and then the property name but this isn't a function this is just a property of the string it's not actually performing some kind of snippet of code to do something it's just finding out a property of the string this down here see what the case this is a method a function which actually does something it takes our full-name and it turns it to uppercase so because this is a method what we do is add brackets or parentheses on the end of it so whenever you see something like this dots and then some kind of name and then parentheses it means that this is a method of whatever we're using it on okay in this case it's a string method so if we save this now we're going to see that it's going to take our full-name our string and it's going to turn it to uppercase and then we're going to log that to the console so we can see now Brandon Sanderson in all uppercase okay now throughout other methods as well I'm going to show you another and this time what I want to do is store the results inside a variable so I'll say let result equal to full name dot to lower case okay now what this does is the opposite it takes the full name and it's going to turn it to lowercase but instead of logging this to the console like we did up here what we're doing is actually taking the value that this gives back to us and we're storing it in a value called result a variable okay then what we could do is use this later on for now we are just going to log this to the console console dot log I just wanted to show you that we can store the values that are returned to us right here so I can say results like so save it and we can see this in the console now it's all lowercase before up here normally it's started with a capital both names but now it's all lowercase now I want to make one thing clear these methods right here they don't actually alter the variables themself the original variable this full name so if I was to log out the full name as well we're gonna see that it's still going to be Brandon Sanderson like this capitalized so if I save it preview in a browser we can see that we get this one right here Brandon Sanderson with just a capital letter at the start of each name so these methods they do not actually alter the original value that we use them on now some methods do alter the original value and some methods don't so these are just cases where they don't alter the original value now sometimes we can use methods which expect us to give them a certain value so for example I'm gonna use another method down here but before I do that I'm going to say let index equal to the email I remember that email value was this thing up here we said email is equal to Mario at the net ninja code at UK so I'm creating a variable called index I'm setting it equal to e mail dot index off so this is a method and it's going to find the index of a certain character inside this string so by index I mean the position so what I want to do is tell it to find the index of the at symbol okay so I can pass in as a string in quotes the @ symbol to this method now this thing right here this is called an argument but you might also hear them being called parameters including what I talked about them because there are easy words to get mixed up but technically speaking when we pass a value into a method like this this is an argument okay so what that's going to do is find the index of this inside that string email and it's going to return that value to us which were then storing inside this variable so now if I say console that log and then the index like so I'm gonna save it come over here and we can see five now if we count though zero for the first position then one then two then three then four then five okay so it gets us that index so then the takeaway points here are that strings are a series of letters or numbers and by the way we can add numbers in here you know that's a valid string any kind of character we want to in here that's absolutely fine these just all go inside quotes so strings are a series of letters numbers and characters in quotes they have properties like the length and we use dot notation to get those properties they also have methods which are the same kind of thing as functions the built-in snippets of code that do things for us and we denote methods and call them by using these parentheses at the end of them so strings have methods as well as properties and we're going to explore some more string methods in the very next video all right then my friends so we've already seen a few basic string methods in the last video and remember methods are just functions that belong to a specific object or object type now let's have a look at some more methods so first of all I'm going to create a new variable called email and set that equal to Mario that's the net ninja code at UK and let's spell this correctly okay so now let's use some methods on this variable right here so the first one I'm going to show you is called last index off now I'm going to store the results in a variable called result and set this equal to e mail dot or last index of so we're using this method on the email which is the string and this method finds us the last index of a particular character in that strings so for example say I want to find the last instance of I don't know something like n then we pass that in there as a string right the string is the argument that's going to find us the position of the last n it comes across inside this string which is this so the position of this end so now let's come down here and say console dot log or results just to see if this works and we'll preview this in a browser and we can see 14 let's just quickly count 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 spot-on okay so that works all right let me comment this out and let's move on to the next one so next I'd like to do a method called slice and what slice does is essentially slice a section from the string so let's do this we'll say let results this time equal to the email which is the string dot slice and inside we pass in two arguments this time not just one like we have been doing up here now two arguments now the first argument is where we want to slice from so if we want to slice from the beginning we say position 0 the next argument is where we want to slice 2 so if we want to slice to position 10 we say position 10 and if we save that we're still logging out the result which is this over here so let's save it for you in a browser and we can see this okay so it slices that section from 0 to position and it logs that to the console now when we do it here so let's change this to 5 and we should just get the first five letters which is Marriott cool so remember the first argument is where we go from the second argument is where we go to ok so we could do this if we want you to from 2 to 5 and we get something like real alright so the next one I would like to show you is similar to slice and we'll set results equal to this so let me solve equation and what we're going to be doing with this is making a substring from this it's a very much like slice but the two arguments represent something slightly different so the first one is still the start position so if I say 0 I'm saying start from position 0 but this time the second argument is how many characters we want to go along so if I say 10 then it's going to get us the first 10 right which is the same as 0 to 10 here but if I say 4 to 10 then it's going to go from position 4 and it's going to carry on 14 so I'm gonna save this now and let's view this in a browser and now we can see it goes from position for up to position 14 it gets 10 characters ok so that's the difference between these two methods ok so let's move on to the next one I'll say let's result equal to email and this time we'll use a method called replace now what replace does is replace a certain character in the string with another character so it takes two arguments I'm going to say m and if I pass in the second argument to be W then what it's going to do is find the first M inside this string and replace it with a W now the first M is right here so let's save this and test it and we can see now we get worio at the net ninja so it's replaced that first M cool okay now so let's do another example of this method what I'm going to do is say this time let results equal to email don't replace and we're going to replace this time n with W so what you think is going to happen here because we have several ends we have this one this one and this one well if I save it let's have a look and we can see Mario Arts the wet Ninja code at UK so it's only replaced the first n right here so that's what this replace function does when we just pass it in a simple string like this it replaces the first one it comes to with this we can use this with regular expressions to do something a little bit different but since we've not touched on those yet we'll leave that for later now there are some other string methods that I do want to show you but we're going to be looking at those as we carry on through the course ok then so now we've seen strings in more detail let's shift our focus now to another data typing JavaScript that is numbers so we have also briefly seen numbers in action when we looked at variables we did things like storing age or a year or a score in a variable and they were all numbers weren't they now we could use numbers for various things in JavaScript like an age or a school or how many up votes a blog post might have for example or to perform some kind of calculation so there's loads of uses for numbers in JavaScript so let's have a look at them in action first of all I'm going to create two variables I'm going to use the Lett for the first one and this is called radius and that's set equal to 10 now I'm going to create a constant called pi because I don't see myself changing this I don't want to change it it's a constant and that is 3.14 so pi is a special value in maths used to calculate the area of a circle and the radius is just the radius of the circle so we have those two variables which are both numbers let's just unlock them to the console so we'll say console dot log and then we want the radius and also PI so let's save that and see if it works there we go 10 and 3.14 so these are both numbers this is a whole number this is a decimal number but they're still both numbers the same data type in JavaScript okay so then what can we do with numbers well we can do all the typical math operations so let me just write these down first of all math operators and that is a plus - multiplication which is an Asterix a division which is a forward slash then we have double asterisks which means ^ and then we have percentage which gets as a remainder so let's have a look at some of these first of all I'm gonna console dot log and I'm just gonna say ten divided by two okay now we don't need these spaces that I've just put in there I've done that so it's easier to see and this should get us five right and it does it performs that calculation and then spits out the result so that's pretty simple now what if we do something like this I'm going to say let result equal to the radius which we have at the top it's ten and I'm going to use the percentage three so what this does is get us the remainder of a calculation it takes the radius divide it by three and then gives us the remainder which should be one so let's log this to the console console dot log and we want to log out the results variable that we just created right here which is storing the result of this calculation it should be one that is the remainder and it is one cool okay so now let me comment this out and in fact I'll comment this one out as well unless do another this time we'll say let's results equal to the PI which is 3.14 times the radius to the power of two so that is the formula for working out the area of a circle so saying the result is PI R squared this is the square bit to the power of two okay so it's the radius times the radius so let's save that and we'll log it out the result and this is the area three one four which makes sense okay cool so that's some simple examples now I want to talk about something that you probably already know about but just in case you don't I'm going to go through it and that is the order of operation now this is something you might learn about in school at some point and it just dictates how we perform calculations when they get a bit more complex the order of operation in what order we do these bits of the calculation first so you might have heard of this big mass let me just type this out and this is the idea we perform the calculation said first of all we do any brackets then any indices which are these things there then any division then multiplication then addition then subtraction so say for example we had some kind of complex formula which is something like this we'll say let results equal to and we'll say five times and then in brackets ten minus three and then we'll do to the power of two so it's not over the complex but this right here dictates in what order we perform this calculation so first of all be brackets we perform the bracket calculation so 10 minus 3 is 7 then indices which is this so then we square it so 7 squared is 49 then division well we don't have it then multiplication which is this thing over here so we say 5 times 49 which is 245 so that should be the result so let's log this to the console and see if we're right 2 4 5 cool now let me just comment this out and what I'm going to do now is create a new variable and we'll say let likes equal to 10 now imagine this is the number of likes a particular blog has now what if we wanted to add 1 to this likes variable well we could do something like this we could say likes is now equal to likes plus 1 and if we log out likes console dot log likes then we should see 11 right so we do 11 but there is a shorthand version of this in JavaScript an easier way to do this is by saying likes plus plus and that adds 1 to the likes so if I comment out the first one then this will run and it would still add 1 to the like so we should still see 11 and we do so that is a shorthand operation there double plus and it's the same as adding 1 like this now the same can be done for - inga like so if I comment this out I could say likes - - and that takes 1 so it should be 9 and we get 9 cool now what if we wanted to add 10 well we could do the same think up here we could see likes is equal to likes plus 10 this time but an easier way to short hand way is by saying likes is plus equal to 10 so what that does plus equal is take the current value and add on this value so it's going to take the 10 and add on 10 and if we console out the like so console dot log likes save it and we do that's wise now so let's delete one of them we should see this in the console we see 20 cool and the same is true for other things like minus or times or divide so let's do some other examples I'm going to comment this out and this time I'm going to say likes and minus equals 5 so it takes 5 away from it so let's save that and we get 5 left that's right I'm also going to do a couple more examples so we'll say likes and we'll say x equals 2 so that is going to take this value and times it by 2 which is 20 and we get 20 and then final it let's do divide so we'll say likes divide equals 2 and that takes the value 10 and divide it by 2 so we should be left with 5 and we are cool so this here this is all shorthand notation it's stuff we can do the long wait like this we say likes equals 2 likes times 2 or plus 2 or whatever but this is the quicker way of doing it right here and when it's just 1 we can use plus plus and minus minus okay so that's going to speed things up when we're doing little calculations in the future all right so just a couple more things I want to talk about first of all is not a number or none for short so it looks something like this and a n stands for not a number and we get this value when we try to do something that doesn't make sense some kind of calculation that doesn't result in a number for example if I log to the console 5 over hello that just doesn't make any sense whatsoever right we can't do that in real life and if we do that in JavaScript we'd get none or n a n it's not a number and we can do something else we could say console the log and we'll say five times hello and log this to the console and we get not a number surprise surprise okay so that's one little thing if you get that it means you've tried to do some kind of calculation that doesn't result in a number and you've probably made some kind of error along the way okay now the final thing I'd like to show you is how to concatenate numbers so you know like we said with strings we can concatenate them with a plus sign well we can do a similar thing with numbers if we're trying to add some kind of number into a string we can do that so let me give you an example I'm gonna say let result equal to the blog has and then a space and I'm going to concatenate this with a number this thing right here likes so plus likes then I'll concatenate with another string space likes so this should say the blog has ten likes and it should result in each string so it takes the ten and it adds it into the string and it creates one big gigantic string well not gigantic but you get the point one big string based on all this so if I now say console.log the results we should get that let me have you in a browser the blog has ten likes okay now this is fine but if we were to do this with a few different numbers and we had quite a big string then this would quickly get pretty messy when we're trying to concatenate too many variables with a string now fortunately there is a new way to do this using template strings and we're going to see that in the very next video ok then so in this video I don't want to introduce another data type I want to take a sidestep and talk about a slightly different version of a string and that is a template string and what a template string lets us do is inject variables into the string without having to exit out and using the plus sign to concatenate them so what I've done is create three variables right here a title author and likes they represent a blog post and what I'd like to do is create one big string we which contains all of these different variables at some point now I'm going to show you the concatenation way and the template string way and you can decide which one you prefer I much prefer the template string way by the way another name for these template strings is a template literal okay so first of all let's do the concatenation way so I'm going to create a variable called result and set it equal to a string now to begin with it's going to say the blog called and then we need to exit out of the string so you can catenate the title so plus title then back into a string and we'll say by then out of the string and we'll say the author and then back into the string and we'll say has and then out of the string we want the likes and then finally plus likes like so I'm just going to press control B and that hides the tree over here for us so we have more room and now this is a gigantic string containing all of these different variables the blog called title which is this by author which is mario has 30 likes okay so know is how many times we have to come out of the string to concatenate something then back into the string then out then in then out etc this is very very messy but it still gets the job done if I say console dot log and then results we should still see this in the console correctly the blog called BES reads of two or one nine by mario has 30 likes so this works fine it just looks a bit messy and it's hard to maintain so then let's have a look at the template string way remember the job of a template string is to allow us to inject variables directly into the string without coming out of it and having to concatenate with plus signs like this so again we'll say let results equal something now this time we don't use single quotes we don't use double quotes we use backticks and on a standard keyboard that should be in the top left below the escape button and then looks something like this right here okay little backticks so this is how we create a template string just like we create a normal string using normal quotes like this a template string is created using backticks okay so then inside here we can say something like the blog called and I'm just gonna put title here we'll come back to this and we'll say by author again we'll come back to that has likes likes okay so what we really want to do is replace these things right here in capitals with the actual variables now previously we had to come out with a string and use the plus sign to concatenate them but in a template string to output a variable all we do is dollar sign and then curly braces open and close and then we put the name of the variable inside those curly braces so for example title and it should have a different color now we'll do the same with author so dollar curly braces and then author which is the name of the next variable then likes so let's do dollar sign curly braces likes and this should all work and I think that looks a lot better we don't have to come out of the string and concatenate anything we just embed the variables directly using this kind of syntax and it reads a lot better too so let me now consult log the results to the browser and save it and we get exactly the same result this don't works so I much prefer this way especially when there's many different variables if it was just one variable and it looks something like this first bit concatenation is absolutely fine and I might do that in the future for something like this but when we have a lot of variables and definitely going to be using it template strings now then a good use case for template strings is to create HTML templates so say for example we have some kind of dynamic content that we got back from a database and we want to create an HTML template with that content embedded inside it then output it to the browser somewhere well we could use a template string for this so we could say something like let HTML equal to backticks this is a template string and then what I'm going to do is enter onto a new line now then I'm going to just create some h2 I'm going to say h2 and then I'm going to output the title inside the h2 for the blog so we'll do our dollar sign curly-braces then close off the h2 underneath that we'll do AP tag and inside the P tag we want to say bye and then the author so we'll output that and then close off the P tag and then finally underneath that we can say spun on inside here will say this blog has and then we want to output the likes so dollar kill de bracy's likes and then likes and then close off oops it's a span tag like so now that if we were to log this to the console we should see all of that HT mastering so if I save it and preview over here in a browser we can see this HTML string now and we've created that pretty easily using this template string and injecting this dynamic content okay so later on what I'm going to show you how to do is take something like a template like this and output it to the browser somewhere for now we'll just use the console but later we'll see how to output it to the browser but this is just one use case of using template strings okay they're my friends so far we've seen two different data types numbers and strings now I'd like to talk about arrays which aren't a new data type in themselves they fall under the object data type right here okay so we typically use arrays to store collections of things in like a collection of strings or a collection of numbers something like that so let's do a few different examples I'm going to create a variable called ninjas and I'm going to set it equal to a new array and the way we do this is by using square brackets okay this is array syntax now inside this array I want to have maybe three different strings three different names that are all ninjas so I could create the first one I'll say Shan then I want to add another so I do a comma and I say Ryu then another so I say comma and then suddenly now I don't need a comma after the last one but if I wanted to add another I just come and separate them all like that so that they're my friends is an array with three elements or three values inside it we've stored all of those three values inside one single variable so you can probably see already why these are useful for storing collections of data that relate to each other okay so let's see what happens if we log this to the console console dot log ninja's okay save that and view it and we can see this right here this array cool alright then so what if we wanted to get just one of these items well we could use square bracket notation so I could say number one inside and we did this kind of thing with strings when we wanted to get the first position in a string or the seventh position in a string this is me saying I want to get the first position in the array and by first I don't mean the actual first I