FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Variables and Functions

Variables and functions are important concepts for every programming language. You’ll get a crash course on how variables and functions work in this lesson.

If you’d like to learn JavaScript in more depth, try checking out one of the courses linked below.

Related Links

2.1 Variables and Functions

In these first few lessons, we're going to go over the fundamentals of JavaScript, because JavaScript is a very important part of web development. It is not the most important part, but it is very high up on the list. You won't find a website that doesn't use JavaScript, and if you do it's a site that nobody uses. Now we aren't going to go in depth by any stretch of the imagination. JavaScript is a very complex topic and it requires a lot of time. I will, however, have some links in the lesson notes. Links to resources here at Tuts+ and links to written resources. They are shameless plugs for two of my books. So after you take this course and you want to learn more about JavaScript, you'll know where to go. So here in our code editor, let's go to File, let's create a new File and we are going to save it as First.js. Now the first thing we are going to do is execute a function. A function is a piece of code that does something. In this case we are going to execute a function called alert. Now, if we were going to run this code in the browser, this would pop up a little dialog box that displays a message. And then it would have an OK button, that's what the alert function does. So, we start with the name of the function, and then in order to execute, or call this function we use a pair of parentheses, an opening and closing parentheses. Now many functions require something from us and in the case of the alert function, it needs the message that we want to display. So we are going to what's called, pass a value to this function. We do that by passing something in between the opening and closing parentheses. In this case, it's our message. So we are going to use a pair of double quotes and, inside the quotes, we're going to say hello world. Now what we have just created is called a string. A string is nothing more than just text. Another way to think about it is a string of characters. Like we have a character of h-e-l-l-o, space, and so on and so forth. A string is a bunch of these characters strung together. So here we have called a function called alert. We are passing it, a string value that says hello world. So if we were to run this within the browser we would see a dialog box pop up. And it would say hello world. And then we could click on OK and the dialog box would go away. Now the whole reason why we write programs is to work with data. And in the case of this line of code, we have just one piece of data. And that is our hello world message. Now a lot of times we want to store our data in memory so that we can reference that data any time that we need to, throughout our code. And when we do that with something called a variable. A variable is just a box of memory that we can store stuff in. So let's create a variable. We do so with the var keyword. Now, a keyword is a very special word in JavaScript, that has a very specific purpose. And we can only use it for that purpose. In the case of var, that means that we want to create a variable. So we start our line of code with var followed by space and then the name of our variable. Now we want this to be meaningful because every time that we use this variable we need to know what it means just by its name, that makes our code much easier to read. So let's just call this message. So we have var message = and then whatever value that we want it to contain. In our case it is that hello world message. Now you can create a variable without assigning it a value. To do that you have just var followed by message and then a semi-colon. And this is what we call a variable declaration statement. Now a statement is a single line of code, it doesn't have to be a line of code. Later on we will find more complex statements. But in the case of our code here, we have two statements. The first is on line one where we declare our message variable. The second is on line three where we call the alert function. But let's add a third statement here. We have declared our message variable. Now we can use it. We can say message = and then our value of hello world. And this is what we call an assignment statement. We are assigning a value to a variable. So we can declare a variable, then we can assign that variable a value. And then we can use that variable wherever we want to use that value. Now a lot of times, if we already know what we want to assign a variable, we'll just go ahead and assign that value whenever we create the variable. So in this case we are declaring, as well as initializing our message variable. And by doing all of that in line one, we don't need this code on line three. So we will get rid of that, and we are back to our two statements. Now this piece of text here, that begins with these two slashes, this is what we call a comment, this is not a JavaScript code that executes. It is in fact ignored by the JavaScript engine. Instead this is just pieces of text that are there for our benefit. We can add comments to our code so that whenever we need to revisit something that we wrote six months or a year ago, if we wrote comments for that code, then we can very easily know what's going on. Now as you gain experience you're going to find that some code doesn't need a comment. The code that we write should be self-explanatory, but there are times when it's not and in those cases, comments are very useful to have. So we have created a variable. We have then used that variable by passing it to the alert function. Now we can write our own functions and in fact, a lot of times we want to do so because there are some things that we want to do multiple times. Like for example, if we wanted to say hello world ten times within our application, we don't want to just copy and paste this code and use it in all of those times. That just doesn't make a whole lot of sense. Instead, we can write our own function. And it could be called, say hello world, and we could call that function anytime that we wanted to execute this code. So whenever you want to create a function, you start with the function keyword, this is a word specifically for creating a function. And after the function we have the name that we want that function to be. So we will sayHelloWorld, we follow the function name with a pair of parentheses. And then a pair of curly braces. And we want the code that we want to execute within that function, inside of the opening and closing curly braces. So now anytime that we want to sayHelloWorld, we can call our function. We can sayHelloWorld, we call our function with the pair of parentheses and there we are saying HelloWorld. And then any other time we wanted to sayHelloWorld, we just call that function. So the purpose of a function is to make it easier to reuse code. Any time that we need to execute the same statements multiple times, it makes sense to wrap those statements within a function so that we can call it wherever we need to. So in this lesson you learned about two very important things. You learned about variables, which allows us to store data within memory and you also learned about functions, which allows us to reuse code. Now in the next lesson we are going to look at something else that is very important to JavaScript and that is objects. Objects are a very special type of value that we can use to organize the data that we are working with within our applications.

Back to the top