The Easy Way: The Basics — Javascript & Variables & Functions
Javascript is a programming language that is used on the web. Developers use Javascript coupled with HTML to create dynamic and interactive webpages. In this article we will be talking about variables, functions, and how they work together. This is a very basic overview, but the focus is to understand the core principles of Javascript the easy way. First, we are going to learn about what variables are and how they can be used. Then we will talk about functions. Throughout this article I’ll be providing examples that you should test in your IDE (integrated development environment). You can use whichever IDE you prefer; I prefer Repl.
Variables
Variables are used to store data. So, think of variables like a container. It holds something, and could be anything. Something very important to note is that only one value can be placed in a container at one time unless it is encapsulated in an object. Later I will explain exactly what I mean. Lets start simple.
In Javascript, you have to declare a variable. You can declare a variable in three different ways, but the way we will learn today is ‘var’. When var is placed before a word, and when that word is followed by a semicolon, you have just declared a variable. Lets take a look at how this looks
Quick: Semicolons let the program know when you’re done with a statement. It’s like periods to a sentence. It’s important to note that semicolons are unnecessary with functions and return statements. Semicolons after variables are mandatory and it is the only way the program recognizes that you have declared a variable. Alright lets get back to it
var myVariable;Variables are used to store data so we can use it at a later time. Variables make code cleaner, and it also helps us understand what’s going on inside of our code. So, now that we understand what a variable is, lets actually do something cool now. Lets add two numbers together using Javascript. We can do this a few ways and we will, but first, lets do this in one line of code.
var addMe = 3 + 3;Understand? Good job. You’ve just wrote your first functional line of code. Now, what we just did was pretty cool — but what would be better is if we could see this in our console. For this next example, we will be using console.log().
Quick: Console.log() is a function that allows us to see outputs of our code. You simply call it, passing it an expression or variable and then in the console you’ll be able to see the returning value of whatever expression or variable you entered.
Example:
console.log(3+3) // returns 6console.log(addMe) // returns 6
What if we logged the first variable we created ‘myVariable’ what do you think will happen? Well, since the container is empty, it will return undefined. Undefined means a variable has been declared but a value has yet to be assigned. Theres something else like undefined in Javascript called ’Null’. Null and undefined generally mean the same thing on the surface, but the difference is null is an object so it has a value where undefined does not have any value. I know we haven’t discussed objects yet, but trust me, we will get there and it will make a lot of sense.
Now that we have learned what variables are and a simple way we can use them in our functions we are about to create. Lets move on to functions.
Functions
A function is an object that returns something. Functions are composed of statements called the function body. There are a few ways to declare a function, but we will use the most simple for now, which is just writing function and then a word followed by a parenthesis, alligator brackets, and a semicolon. Like this:
function myFirstGame(){};
In order to retrieve the contents of a function, you must first call it. In the example above, we declared a function. In the next example, we will call a function.
myFirstGame(); // output : (what’s your guess?)You’ve just called the myFirstGame function. Try logging myFirstGame() to the console. You’ll see that it returns undefined. This is because functions are like containers themselves, and right now the container is empty. There are other circumstances for why a function might return undefined — but for now lets focus on the simplest example which is an empty function.
So, you’ve logged myFirstGame to your console and got undefined. Lets do something a little more meaningful with myFirstGame.
function myFirstGame(){console.log(‘Hello from the other side..’);};
Now, we have something in our function. What do you expect the output to be? You’re probably scratching your head after seeing this function return undefined. You’re probably thinking “there’s something there, so it’s not empty”. Remember, a function is an object that returns something. In order for your function to return something you must explicitly state ‘return’ in your code.
function myFirstGame(){return ‘Hello from the other side..’;};
Now call your myFirstGame function.
myFirstGame(); // output : ‘hello from the other side’Great job :) Is it making a little more sense? Now, lets do something a little more meaningful. Between the parenthesis, you can have parameters. Parameters are placeholders for values being passed into the function. Lets first see how our function look with parameters
function myFirstGame(message){return ‘Hello from the other side..’};
Now, lets log this to the console. You’ll notice that nothing has changed, but lets make it more dynamic. What if every time we called this function we wanted it to return a message? The way it is written now, it will always return the same message. We can make this more dynamic by using the message parameter to transport our data into the function. For example:
function myFirstGame(message){return message;};
The way the function is now, it will always return whatever is passed into the message parameter. We can pass values into the message parameter by calling the function and then passing in a value between the parenthesis like so
function myFirstGame(message){return message;};myFirstGame(‘Hello from the other side…’); // output : ‘hello from the other side’
We can also use the addMe variable we created earlier and pass that into the function like this
function myFirstGame(message){Return message;};myFirstGame(addMe); // output : 6
You’ve officially created your first program. I hope you learned something and are now a step closer to being the javascript programmer you want to be. In the next article, you will create your first computer game — Rock, Paper, Scissors. You will enter either rock, paper, or scissors, and the program will also make a choice. The program will determine the winner of the two. Follow me to stay updated with new posts, and give me a clap if you enjoyed the post :)
