In this 3-minute introduction, I'm going to answer four frequently asked questions about JavaScript. What is JavaScript, what can you do with it, where does JavaScript code run and what is the difference between JavaScript and ECMAScript. So let's start with the first question. What is JavaScript? JavaScript is one of the most popular and widely used programming languages in the world right now. It's growing faster than any other programming languages and big companies like Netflix, Walmart, and PayPal build entire applications around JavaScript. And here's the average salary of a JavaScript developer in the United States. That is $72,000 a year. So it's a great opportunity to get a good job out of learning JavaScript. You can work as a front-end developer or a back-end developer or a full stack developer who knows both the front end and the back end. Now, the second question. What can you do with JavaScript? For a long time, javascript was only used in browsers to build interactive web pages some developers refer to javascript as a toy language but those days are gone because of huge community support and investments by large companies like Facebook and Google these days you can build full-blown web or mobile apps as well as real time networking applications like chats and video streaming services command-line tools or even games here's an example a third question where does JavaScript code run javascript was originally designed to run only in browsers so every browser has what we call a JavaScript engine that can execute JavaScript code for example the JavaScript engines in firefox and chrome are SpiderMonkey and v8 in 2009 a very clever engineer called Ryan Dahl took the open-source JavaScript engine in chrome and embedded it inside a C++ program he called that program node the node is a C++ program that includes Google's v8 JavaScript engine now with this we can run JavaScript code out of a browser so we can pass our JavaScript code to node for execution and this means with JavaScript we can build the backend for our web and mobile applications so in a nutshell JavaScript code can be run inside of a browser or in node browsers and node provide a runtime environment for our JavaScript code and finally the last question what is the difference between JavaScript and Eggman script well ECMO script is just a specification javascript is a programming language that confirms to this specification so we have this organization called a comma which is responsible for defining standards they take care of this Eggman script specification the first version of Eggman script was released in 1997 then starting from 2015 ACMA has been working on annual releases of a newest specification so in 2015 they released a kimono script 2015 which is also called ECMO script version 6 or es6 for short this specification defined many new features for JavaScript alright enough theory let's see javascript in action so every browser has a JavaScript engine and we can easily write JavaScript code here without any additional tools of course this is not how we build real-world applications but this is just for a quick demo so open up Chrome right click on an empty area and go to inspect now this opens up chrome developer tools here select the console tab this is our JavaScript console and we can write any valid JavaScript code here so type this console dot log put a single code here and then hello world another single code to terminate close the parentheses and add a semicolon at the end now as you go through the course you're going to understand exactly what all this means for now don't worry about it so now I'll press ENTER and you can see the hello world message on the console we can also write mathematical expressions here for example two plus two we get four or we can do something like this alert practices single coat yo enter and here's an alert in the next lecture I'm going to talk about setting up your development environment for writing JavaScript code in order to write javascript code you need a code editor there are various code editors out there including Visual Studio code or yes code sublime text atom and so on out of these my favorite is Visual Studio code that you can download from code that Visual Studio comm it's a very simple lightweight cross-platform and powerful editor so if you don't have Visual Studio code on your machine go ahead and download it the other thing I wanted to install is note you can download note from nodejs org now technically you don't necessarily need know to execute JavaScript because as I explained before you can execute JavaScript code inside of a browser or EndNote but it's good to have node on your machine because we use that to install third-party libraries and also later in this section I'm going to show you a preview of node so pause the video now and download Visual Studio code as well as note once you're done come back continue watching to create a new folder call that J s dash basics the name doesn't really matter we just want to have a folder for writing all the code in this course now drag and drop this folder into visual studio code okay we've got this folder open let's add a new file here index dot HTML now you don't really need to know HTML in order to take this course but if you want to be a front-end developer you should know your HTML well now in this file I want you to type an exclamation mark and then press tab this generates some basic HTML boilerplate we don't really care about any of this code here we're gonna use this as a host for our JavaScript code you're gonna see that in the next lecture so save the changes now open the extensions tab here here in this box search for live server so live server is a very lightweight web server that we're going to use to serve our web application so install this then you will have to restart Visual Studio code when you're done go to the Explorer tab right click index.html and select open with live server this will open up Chrome or your default browser and point it to this address that's where our web application is served from now currently we have an empty page now to make sure that everything is working properly let's go back to visual studio code here in the body section let's add an h1 press tab and type hello world now save the changes back in the browser we can see this page is refreshed automatically and we've got the hello world heading here in the next lecture you're going to write your first JavaScript code all right now we're ready to write our first Java Script code in order to write JavaScript code here we need a script element there are two places where we can add a script element we can add it here in a head section or in the body section the best practice is to put the script element at the end of the body section after all the existing elements so here after h1 I'm gonna type script and press tab this is our script element now why did I say that as a best practice you should put this script element here well there are two reasons for that one reason is that the browser parses this file from top to bottom so if you put this script element here in the head section you might have a lot of JavaScript code there so your browser may get busy parsing and executing that JavaScript code and it won't be able to render the content of the page so this will create a bad user experience your user looks at your web page it's white or blank while your browser is busy parsing and executing your JavaScript code so that's reason 1 the second reason is that almost always the code that we have in between script elements needs to talk to the elements on this web page for example we may want to show or hide some elements so by adding the code here at the end of the body section we'll be confident that all these elements are rendered by the browser now there are exceptions to this rule sometimes you're using third-party code that has to be placed in the head section but these are exceptions as I told you before as a best practice you should add your JavaScript code at the end of the body section now here we're gonna write the same code that you wrote in the last lecture console dot log hello world but we're going to talk about this in a little bit more detail what we have here is a statement a statement is a piece of code that expresses an action to be carried out in this case we want to log a message on the console all statements in JavaScript should be terminated by a semicolon what we have here in between single codes is called a string a string is a sequence of characters now in JavaScript we also have this notation we can add two slashes and this represents a comet so here we can add some description to our code and this description is ignored by the JavaScript engine it's not executed it's purely for documenting the code when you wanna explain to other developers why you have written this code this way you don't explain what the code does because that should be clear in the code itself so here I don't want to write something like logging something on the console that's so obvious in the code right instead we want to explain why's and a house so for this demo I'm just gonna add a simple comment this is my first JavaScript code now save the changes back in the browser we need to bring the console back up so right click somewhere and go to inspect or alternatively you can use a shortcut that is alt command an eye on Mac or alt control eye on windows that brings up the console tab if the console tab is not immediately visible make sure to select it here and here you can see the hello world message now while we can easily write javascript code in between the script element in a real-world application you have thousands or even millions of code we don't want to write all that code in line here we want to extract and separate our JavaScript code from our HTML code let me give you a metaphor think of your house in your bedroom you have your bed and your clothes you don't store your clothes in the kitchen this is what we call separation of concerns we have the same principle in programming so we want to separate HTML which is all about content from JavaScript which is all about behavior how should your web page behave what should happen when we hover our mouse over a given element maybe something should pop up maybe something should be hidden so we use JavaScript to implement behavior so open up the Explorer window add a new file cut in index the j/s now back in index dot HTML cut all this JavaScript code here and then paste it in index J s now in this simple application we have a single file a single javascript file in a real world application we have hundreds or even thousands of JavaScript files later in the course you will learn how to combine these files into a bundle and serve that bundle to the client now save the changes back in index.html now that all our JavaScript code is in a separate file we need to reference that file here so let's add an attribute here SRC which is short for source and set it to index that j/s so this tells the browser that our JavaScript code is now in index that is save the changes back in the browser you can still see the hello world message and that confirms that our code is still working in the next lecture we are going to execute this code in node so in the last lecture we executed this piece of JavaScript code inside of a browser in this lecture I'm going to show you how to run the same code in node so I'm assuming that you have installed node on your machine if not head over to node.js org and download the latest version of node now if you're on Windows open up command prompt if you're on Mac open up terminal and head over to the folder you created earlier now in this folder we run node and pass the name of our javascript file that is index dot JSON c node is a program that includes google's v8 JavaScript engine we can give it a piece of JavaScript code and it will execute that code for us just like how we can execute some JavaScript code in a browser so node is a runtime environment for executing JavaScript code now let me show you a tip here in vs code we have an integrated terminal so you're gonna have to explicitly open up a separate terminal window so here on the top under the View menu look we have integrated terminal note the shortcut here that's the shortcut for mac and windows you're gonna have a different shortcut so select this and here's our integrated terminal pointing to the same folder where we created our files so you don't have to explicitly navigate to this folder and here we can run node indexed at j/s as well now in this course we're not gonna work with node anymore because node is a complex separate topic in fact I have a comprehensive course about node with 14 hours of content so once you finish this course if you want to learn node you can always look at my note course well hello it's mahshar thank you for watching my javascript tutorial I just wanted to quickly let you know that this tutorial is part of my complete JavaScript course where you can learn about all the essential concepts in JavaScript the course is packed with lots of exercises and solutions and by the end of watching the course you will also receive a certificate of completion in case you're interested you can find a link in the video description and if not that's perfectly fine continue watching as the next section is coming up let's start this section by a discussion of variables which are one of the most fundamental concepts in JavaScript and any other programming languages in programming we use a variable to store data temporarily in a computer's memory so we store our data somewhere and give that memory location and name and with this name we can read the data at the given location in the future here is a metaphor think of the boxes you use to organize your stuff you put your stuff in various boxes and put a label on each box with this you can easily find your stuff right a variable is like a box what we put inside the box is the value that we assign to a variable that's the data and the label that we put on the box is the name of our variable now let's see this in code so here in index Jas I'm gonna declare a variable now previously in the old days before es6 we use the VAR keyword to declare a variable but there are issues with var as you will find out later in the course so going forward from es6 the best practice is to use the lead keyword to declare a variable now we need to give this variable a name or an identifier and this is like the label we put on a box so I'm gonna call this name and finally we need to terminate this declaration with a semicolon now let's log this on the console and see what we get so console that log name once again we need to terminate this statement with a semicolon save the changes and here in the console we see undefined so by default variables that we defined in JavaScript their value is undefined now we can optionally initialize this variable so I'm gonna set this to a string which is a sequence of characters like Marsh note that I'm using single quote you can also use double quotes different developers have different preferences but it's more common to use single quotes for declaring strings in JavaScript now when we save the changes instead of one we see Marsh on the console so here in this example we have declared a variable called name and we have set that to this value to this string now we have a few rules for naming these variables here are the rules first is that they cannot be a reserved keyword so in JavaScript we have reserved keywords let is one of them you also have if else VAR and so on now you don't have to memorize this list if you try to use one of these names you're gonna get an error for example if I change this to if notice red underline this is indicating that this is not a valid identifier okay so revert it back now the second rule is that they should be meaningful we want to have meaningful names like meaningful labels I've seen developers using names like a or PE or a one or I don't know X these variable names do not give us any clue what is the purpose of these variables what kind of data are restoring at that memory location so always use meaningful and descriptive names okay now back to name the third rule is that they cannot start with a number so we cannot have a variable like one name but again going back to the second rule why would you want to call it variable one name it's meaningless right so always use meaningful names the fourth rule is that they cannot contain a space or - so if you have multiple words you need to put them together here is an example let's imagine we want to declare a variable called first name so first name and note that here I'm using camel notation so the first letter of the first word should be lowercase and the first letter of every word after should be uppercase this is what we call camel notation which is the convention we use in JavaScript to name our variables another thing you need to know about these variable names is they are case-sensitive so if I declare another variable call it first name but make the F uppercase these two variables are different but as I told you before if you stick to camel notation you wouldn't end up with a variable name like this and finally the last thing you need to know about these variables is that if you want to declare multiple variables there are two ways to do this you can declare them on one line and separate them using a comma so first name and then last name now in this case I have not initialized either of these variables they're both undefined I can optionally initialize one or both of them so I can set this to Marsh and I can leave last name undefined or set it to my last name Hammad on e but the modern best practice is to declare each variable on a single line so we terminate this first declaration with a semicolon and declare the second variable on a new line that's the modern best practice next we're going to look at constants alright now let's declare a variable called interest rate so let interest rate and we set this to 0.3 now this is the initial value we can always change that later so we can set interest rate to let's say 1 now if you log this on the console of course we're going to see the new value right so save the changes and here's one on the console however in a real-world application there are situations that we don't want the value of a variable to change because otherwise it's going to create all kinds of bugs in our application in those situations instead of a variable we use a constant so the value of a variable as the name implies can change but the value of a constant cannot change so here if we change let to Const now interest rate will be a constant so when I save the changes you're going to see an error in the console on line 3 where we reassign interest rate so let's have a look save the changes and here's the error uncut type error assignment 2 constant variable we can see this error happen in index dot JSP but if you click here you can see the line in code where this error occurred so we cannot reassign a constant all right now back to the console so here's the best practice if you don't need to reassign constant should be your default choice otherwise if you need to reassign a variable use let so you have learned how to declare and initialize a variable now you might be wondering what are the kind of values that we can assign to a variable well you have seen strings but we have more types basically in JavaScript we have two categories of types on one side we have primitives also called value types and the other types we have reference types in this lecture we're going to focus on primitives and you're going to learn about reference types later in the course now in the category of primitives we have strings numbers bully ends undefined and not let's look at each of these in action so here we have a variable called name which is set to your string what we have here is what we call a string literal that's just a fancy name for a string now let's declare a variable and set it to a number so let H be set back to 30 and by the way I'm not 30 years old but don't tell anyone okay so this is what we call a number litora now let's declare a boolean a boolean can be either true or false so let is a proved to be true this is what we call a boolean literal and we use this in situations where we want to have some logic for example if the order is approved then it needs to be shipped so the value of a boolean variable can be true or false and by the way note that both true and false are reserved keywords so they cannot be variable names ok now you have seen undefined before so I can declare another variable first name if we don't initialize it by default its value is undefined but we can also explicitly set this to undefined but that's not very common in contrast we have another keyword that is not so let me declare another variable and set this to no we use null in situations where we want to please heed me clear the value of variable for example you may want to present the user with a list of colors if the user has no selection you want to set the selected color variable to know in the future if the user selects a color then we're going to reassign this variable to a color like red and then if they click red again perhaps we want to remove the selection so we set this back tool not so we use norm in situations where we want to clear the value of a variable so these are the examples of primitives or value types we have strings numbers boolean's undefined and no now in es6 we have another primitive that is symbol and you're going to learn about that later in the course one thing that separates JavaScript from a lot of programming languages is that javascript is a dynamic language what do they mean by dynamic well we have two types of programming languages static languages or dynamic languages in static languages when we declare a variable the type of that variable is set and it cannot be changed in the future in a dynamic language like JavaScript the type of a variable can change at runtime let's see this in code so back in the example from the last lecture we have declared this name variable and we have set that to your string so the type of name is currently a string but it can change in the future let's take a look so here in the console we can execute some JavaScript code we have this type of operator and with that we can check the type of a variable so after that we add the name of the variable in this case our name variable so note that the type of name is a string now if we reassign name to a different value like a number and check its type look the type is now changed to a number this is what we call a dynamic language so unlike static languages the type of these variables will be determined at runtime based on the values that we assigned to them now let's take a look at a few more examples of the type of operator and by the way note that type of is another reserved keyword so you cannot have a variable called type off so we can clear the console by pressing ctrl + L so now let's take a look at type of age it's a number now if you change age to a floating-point number and I know it doesn't make sense but let's just stick to this for this example thirty point one and then look at type of age it's still a number so in JavaScript unlike other programming languages we don't have two kinds of numbers we don't have floating-point numbers and integers all numbers are of type number now let's look at the type of he's approved it's a boolean as I told you before what about the first name let's have a look type of first name it's undefined and that's funny because the value of this variable is undefined but this type is also undefined what does this mean well earlier I told you that we have two categories of types we have primitives or value types and reference types in the primitive types category we have strings numbers boolean undefined and no so undefined is actually a type but is also a value in this example because we have set first-name to undefined as a value it's type is also undefined okay now what about selected color let's have a look so type of selected color the type of this variable is an object what is an object that's the topic for the next lecture so you have seen all the primitive types in JavaScript now let's take a look at the reference types in the reference types category we have objects arrays and functions in this lecture we're going to explore objects and you will learn about arrays and functions later in this section so what is an object an object in JavaScript and other programming languages is like an object in real life think of a person a person has name age address and so on these are the properties of a person you have the same concept in JavaScript so when we're dealing with multiple related variables we can put these variables inside of an object for example here we have two variables name and age they're highly related they are part of the representation of a person so instead of declaring two variables we can declare a person object and then instead of referencing these two different variables we can just reference the person object it makes our code cleaner so let's see how we can declare a person object we start with let or Const if we don't want to reassign the person object and set it to an object literal so this syntax we have here these curly braces is what we call an object literal now between these curly braces we add one or more key value pairs so the keys are what we call the properties of this object in this case we want this person object to have two properties or two keys name and age so we add name here that's the key then we add a colon and after that we set the value so maash now we add a comma and add another key value pair age 30 so now we have a person object with two properties or two key value pairs name and age and with that we don't need these two variables now this lock person on the console so that log person save the changes so here's our personal object again note the object literal syntax so we have curly braces and in between them we have one or more key value pairs and these are the properties of the personal object now there are two ways to work with these properties let's say we want to change the name of this person so we need to access the name property there are two ways the first way is what we call the dot notation so we add the name of our object in this case person dot now you can see its properties we have age and name so we can change the value of name to John now we can use the dot notation to also read the value of a property so here on line 10 instead of login the person object we can log its name property save the changes and in the console we get John the other way to access a property is using bracket notation so bracket notation so instead of dot we use square brackets and we pass a string that determines the name of the target property so single or double quotes but single quotes are more common the name of the target property is name so we can change that to a same Mary again when reading that we can use the dot notation or the bracket notation if we save the changes now we get Mary on the console now you might be asking which approach is better dot notation or bracket notation well as you can see dot notation is a bit more concise it's shorter so that should be your default choice however bracket notation has its own users sometimes you don't know the name of the target property until the runtime for example in our user interface the user might be selecting the name of the target property in that case at the time of writing code we don't know what property we're going to access that is going to be selected at runtime by the user so we might have another variable somewhere else like selection that determines the name of the target property that the user is selecting and that can change at runtime with this we can access that property using the bracket notation in a dynamic way so we pass selection here and we get the same result okay now if this is confusing don't worry you're going to see this again in the future as you gain more experience with JavaScript for now just stick to the dot notation because that's cleaner and easier next we're going to look at arrays sometimes in your applications you might be dealing with a list of objects for example the list of products in a shopping cart or the list of colors the user has selected in situations like that you use an array to store that list let me show you how so here I'm gonna declare another variable called selected colors note that I'm using a meaningful name I don't have SC or some other weird name selected colors now we can initialize this and set it to an empty array so these square brackets are what we call array literal and they indicate an empty array now we can initialize this array and add a couple of items like red and blue let's Lock this on the console so console the log selected colors save the changes so here's our array with two elements we can expand that note that each element has an index and that determines the position of that element in the array so the index of the first element is zero and the index of the second element is one so if you want to access an element in an array we use this index here's how for example let's say you want to display the first element in this array you use the square brackets and then specify the index save the changes and now we have red now earlier I told you that JavaScript is a dynamic language so the type of variables can change at runtime the same principle applies to our arrays so the lengths of arrays as well as the type of objects we have in an array are dynamic they can change so aligned - we initialize this array with two elements right now on line 3 we can add another element to this array so the array will expand so let's say selected colors of 2 that means the third item in this array is going to be green now let's display this array on the console so we have an array with three elements so the length is dynamic it can change also the type of objects we have in this array is dynamic so unlike other programming languages where every item or every object in the array should have the same type in JavaScript we can store different types in an array so we can make the last element a number save the changes now we have two strings and a number so the objects in the array as well as the size of the array are dynamic now technically an array is an object so just like the personal object we defined in the last lecture it has a bunch of key value pairs or properties that we can access using the dot notation let me prove that to you so here on the console let's look at the type of selected colors so the type of this array is an object so an array is an object in JavaScript so here on line 4 we can look at the properties of this array or this object using the dot notation look these are all the properties defined in arrays in JavaScript so every time we declare an array using square brackets that array will automatically receive these properties we didn't explicitly define them they're just somehow magically inherited from somewhere else we're going to learn about that later when we talk about prototypes now in this lecture we're going to look at one of these properties that is the length property this property returns the number of items or elements in an array so save the changes you can see we have three elements in this array now later in the course we have a comprehensive section about arrays you'll learn about all kinds of operations we can perform on arrays for now all I want you to take away is that an array is a data structure that we use to represent a list of items in the category of reference types you have learned about objects and arrays now let's take a look at functions functions are one of the fundamental building blocks in JavaScript a function is basically a set of statements that performs a task or calculates a value let me show you a couple of examples so I'm going to declare a function using the function keyword now we need to give it a name let's call that greet after that we need to add parentheses that's part of the syntax for declaring functions and then curly braces now what we have here inside the curly braces is what we refer to as the body of this function and this is where we add all these statements to define some kind of logic in our application for example the logic for this function should be to display a message on the console so here we can add console the log hello world now note that here we have a statement so we terminated with a semicolon but when we are declaring a function we don't need to add semicolon at the end because we are not declaring it like a variable like this okay this is a function declaration right so now we have a function we can call this function like this so we add the name of the function and parentheses again and then semicolon to indicate that this is a statement save the changes now we have hello world on the console but that's pretty boring what would we do this let me show you how to make this more interesting our functions can have inputs and these inputs can change how the function behaves so let's say instead of displaying hello world we want to display the name of the person here like hello John so we can add a variable here in between parentheses we refer to this variable as a parameter so this greet function has one parameter called name and essentially name is like a variable that is only meaningful inside dysfunction so inside of this function we can work with this name variable but it will not be accessible outside of this function the name is an input to this function so instead of displaying hello world we can display hello then add a plus here to concatenate two strings so we can add name after now when calling the great function we need to pass a value for the name variable or name parameter more accurately so we can pass John here now we refer to this as an argument so John is an argument to the greet function a name is a parameter of the greet function it's one of the things that a lot of programmers don't know they don't know the difference between a parameter and an argument so a parameter is what we have here at the time of declaration but the argument is the actual value with supply for that parameter okay now let's save the changes so we have hello John now we can reuse this function but with a different input so we can copy this line here and change on to Mary save the changes now we have two different messages on the console now a function can have multiple parameters so here we can separate parameters using a comma so let's add another parameter like last name now we can change our console not blog add a space here and then display the last name now when calling this great function we should pass another argument for the last name right but let's see what happens if we don't do this so I'm gonna save the changes see what we got hello John undefined because as I told you before the default value of variables in JavaScript is undefined so because we did not pass a value for the last name by default it's undefined so I'm gonna pass another argument here we separate them using a comma John Smith and we don't need the second call to the greet function save the changes now we have hello John Smith now there is a cleaner way to write this code on line three all these concatenations are kind of ugly they're getting in the way later in the course I'll show you how to use template literals to clean up this code for now don't worry about it let's look at another example of a function so this function we have here is performing a task so performing a task is task is to display something on the console but sometimes our functions might calculate something so here is an example of a function that calculates a value so again function let's call this function square this function should take a parameter let's call that number now we need to calculate the square of that number that is number times number just basic math right now we need to return this value to whoever is calling this function for that we use the return keyword that's another reserved keyword so you cannot have a variable called return okay now instead of calling the greet function let's call the square function so square we pass two now this returns a value so we can use that value to initialize a variable for example we can declare another variable called number and set it to a square of 2 and then we can display that on the console save the changes so we get 4 now in this particular example we don't necessarily have to declare a separate variable if all we want to do is to display the square of 2 on the console we can exclude this variable declaration and simply pass square of 2 to console.log so when the JavaScript engine execute this code first is going to call this function it would get a value and then pass that value to console dot lock let's save the changes and look we still get 4 now I have a question for you how many function calls do you think we have in this code we have to function costs square of two is one function call let me delete this temporarily but consult that lock is also another function call right because here we have parentheses so recalling the log function which is defined somewhere and passing an argument we can pass a simple string like hello or we can pass an expression that expression can be a call to another function like square of two okay so this is the basics of functions again later in the course we have a comprehensive section about functions for now all I want you to take away is that a function is a set of statements that either performs a task or calculate and returns a value a real world application is essentially a collection of hundreds or thousands of functions working together to provide the functionality of that application hi there it's me mosh again you seem to be very enthusiastic about learning JavaScript so I want to congratulate you for your determination for learning if you want to learn more from me I highly encourage you to enroll in my JavaScript course you can watch this course online or offline as many times as you want at your own pace the course comes with plenty of exercises and solutions and you will also receive a certificate of completion by the end of watching the course in case you're interested the link is in the video description have a great day and I hope to see you in the course