In the last tutorial, you learnt about the basics of numbers and strings in JavaScript. In this tutorial, you'll learn about variables, arrays and objects. Let's get started!

Variables

An important concept in programming is variables. Variables are used to store values.

The word 'variable' means 'can change'. It is used because variables can store many different types of values and can change their value many times.

A good analogy for the variable is a box. You can imagine the name of the variable as the label on the box, and the value of the variable as what's stored inside it.

Creating a variable in programming terms is called declaring a variable. Let's declare our first variable!

> var x = "My first variable!"
< undefined

var is shorthand for variable. You should read the above statement as "Assign the value "My first variable!" to a (new) variable named x."

Also you may have noticed, storing our sentence in a variable from the console doesn't just return our sentence right away, but instead gives us undefined which means there was nothing to return.

So how do we know what value is actually stored in the variable? Simply name of the variable on the console:

> x
< "My first variable!"

Yippee! Your first variable! :)

Of course, variables can be anything — numbers too! Try this:

> var n = 4
< undefined
> var s = "Hello"
< undefined
> s.repeat(n)
< "HelloHelloHelloHello"

Remember we said all expressions in JavaScript evaluate to a single value? The result of evaluating a variable is simply the value stored inside it. So, the step-by-step breakdown of evaluating the above expression would be:

> s.repeat(n) 
> "Hello".repeat(n)  <—- JavaScript looks up the value stored in variable "s"
> "Hello".repeat(4)  <—- JavaScript looks up the value stored in variable "n"
> "HelloHelloHelloHello"

You can always change the value stored in a variable:

> var s = "Commonlounge"
< undefined
> s
< "Commonlounge"
> s = 12842
< 12842
> s
< 12842 

You don't need to put var before the variable name everytime you change its value. It's no longer required once you've declared the variable. In fact, it's not even necessary to use it while declaring a variable. But, it's a good practice to do so to make it clear when you are declaring new variables vs re-using an existing one. There's another reason to do this related to variable scope, which you will learn about later in this course.

When you store a new value in a variable, the old value gets tossed out. This means we can't get back to "Commonlounge" again, unless we stored it in some other variable. For example:

> var x = "Commonlounge"
< undefined
> var y = x
< undefined
> y
< "Commonlounge"
> x = "David"
< "David"
> x
< "David"
> y
< "Commonlounge"

Above, when we did var y = x, y now has the value "Commonlounge" inside it. Then we updated the value of x to "David", but y is unchanged.

You can also use a variable to assign value to itself.

> var name = "Commonlounge"
< undefined
> name = "Hello " + name + "!"
< "Hello Commonlounge!"
> name
< "Hello Commonlounge!"

When you do name = "Hello " + name + "!", you are asking JavaScript to evaluate the expression "Hello " + name + "!", and store the result in name.

Here's another example:

> var a = 5
< undefined
> a = a * 3
< 15
> a
< 15
> a = a * a
< 225
> a
225

Awesome, right?

But, what if we used the wrong name? Can you guess what would happen?

> var website = "https://www.commonlounge.com"
< undefined
> webcite.length
< Uncaught ReferenceError: webcite is not defined
    at <anonymous>:1:1

We get an error called ReferenceError. It means that the variable name that we are referring to, has not been defined yet. If you encounter this error later, check your code to see if you've mistyped any names.

Another fun thing to do:

> var name = prompt("What is your name?")
< undefined
> alert("Welcome, " + name); alert("Bye bye, " + name);
< undefined

Here we used semicolons to indicate the end of one instruction and beginning of the next. This way you can type multiple instructions in a single line.

Play with this for a while and see what you can do!

Arrays

Beside strings and integers, JavaScript has all sorts of different types of objects. Now we're going to introduce one called Array. An array is just a list of values.

Creating an Array

There are two different ways to create an array - new Array() or []:

> new Array()
< []
> []
< []

You can use either of the above to create an empty array.

You can specify the number of elements in the array by using the new Array() method.

> new Array(0)
< []
> new Array(100)
> (100) [empty × 100]

The console returns two things: the first number in parentheses, is the length of the array and it is followed by the contents of the array.

Yes, this array is empty. Not very useful, right?

Let's create an array of some ball games. We don't want to repeat ourselves all the time, so we will put it in a variable, too:

> var ballgames = ['basketball', 'tennis', 'cricket', 'football', 'baseball']
< undefined
> ballgames
< (5) ["basketball", "tennis", "cricket", "football", "baseball"]

All right, we have an array!

Accessing array elements

If you want to access the first number, you can do this by using indices. An index is the number that says where in an array an item occurs. Programmers prefer to start counting at 0, so the first element in your array is at index 0, the next one is at 1, and so on. Try this:

> ballgames[0]
< "basketball"
> ballgames[2]
< "cricket"

As you can see, you can access different elements in your array by using the array's name and the element's index inside of square brackets.

What happens if you provide an index which is out of bounds?

> ballgames[-1]
< undefined
> ballgames[100]
< undefined

JavaScript just returns undefined.

Modifying / Updating Arrays

Updating a value inside the array is quite straightforward:

> ballgames[2] = "volleyball"
< "volleyball"
> ballgames
< (5) ["basketball", "tennis", "volleyball", "football", "baseball"]
> ballgames[2] = "cricket"
< "cricket"
< ballgames
> (5) ["basketball", "tennis", "cricket", "football", "baseball"]

You can use the .push(item) and .pop() functions to add an element to an array and remove the last element from an array, respectively.

> ballgames.push("volleyball")
< 6
> ballgames
< (6) ["basketball", "tennis", "cricket", "football", "baseball", "volleyball"]
> ballgames.pop()
< "volleyball"
> ballgames
< (5) ["basketball", "tennis", "cricket", "football", "baseball"]

Playing with Arrays

What else can we do with it arrays? Let's see how many values there are in the array. Can you guess which attribute you should use for that? You know this already!

> ballgames.length
< 5

Yes! ballgames.length can give you a number of objects in the array. Handy, right? Maybe we will sort it now:

> ballgames.sort()
< (5) ["baseball", "basketball", "cricket", "football", "tennis"]

Maybe we want to reverse that order? Let's do that!

> ballgames.reverse()
< (5) ["tennis", "football", "cricket", "basketball", "baseball"]

Note that both sort and reverse modify the array ballgames.

We can also concatenate two arrays.

> var othergames = ["archery", "boxing"]
< undefined
> ballgames.concat(othergames)
< (7) ["tennis", "football", "cricket", "basketball", "baseball", "archery", "boxing"]

This shows the concatenated array. But, does it store the changes?

> ballgames
< (5) ["tennis", "football", "cricket", "basketball", "baseball"]

Nope! Notice the difference between concat vs sort or reverse.

How do we store the concatenated array in a new array called games?

> var games = ballgames.concat(othergames)
< undefined
> games
< (7) ["tennis", "football", "cricket", "basketball", "baseball", "archery", "boxing"]
> ballgames
< (5) ["tennis", "football", "cricket", "basketball", "baseball"]

Now let's say you want to a string with the values in ballgames separated by a space.

> ballgames.join(" ")
< "tennis football cricket basketball baseball"
> ballgames
< (5) ["tennis", "football", "cricket", "basketball", "baseball"]

.join(<separator>) joins the items inside the array separated by the parameter passed to it.

Everything we described above works for JavaScript arrays with numeric values, with the exception of .sort(). JavaScript can sort arrays with string values easily. But for numbers we need to do something more. The .sort() function takes as a parameter, a comparison function, which is used to do compare two values and decide which one is smaller. For strings, JavaScript has a pre-defined comparison function which sorts them alphabetically. For numbers we need to define our own comparison function. You'll learn about creating your own functions later in this course.

JavaScript Objects as Dictionaries / Maps

Dictionaries are similar to arrays, but you access values by looking up a key instead of a numerical index. A key can be any string or number.

Creating an Object

The syntax to define an empty object is:

> {}
< {}

You just created an empty object. Hurray!

Now, try writing the following (try substituting your own information, too):

> var participant = {
    'name': 'Commonlounge', 
    'country': 'Canada', 
    'favorite_numbers': [7, 42, 92]
}
< undefined

With this command, you just created a variable named participant with three key–value pairs:

• The key 'name' points to the value 'Commonlounge' (a string object),
• 'country' points to 'Canada' (another string),
• and 'favorite_numbers' points to [7, 42, 92] (an array with three numbers in it).

Accessing elements

You can access the content of individual keys in the following ways:

> participant['name']
< "Commonlounge"
> participant.name
< "Commonlounge"

See, an object is similar to an array. But you don't need to remember the index – just the name.

Both of the above listed ways work. In this tutorial, we will use participant['name'] syntax, and this is the preferred syntax to use. But in general, either syntax works.

What happens if we ask JavaScript the value of a key that doesn't exist? Can you guess? Let's try it and see!

> participant["invalid_key"]
< undefined

JavaScript just returns undefined if the key is invalid.

When should you use an object instead of an array?

When should you use an object or an array? Well, that's a good point to ponder. Just have a solution in mind before looking at the answer in the next line.

• Do you just need an ordered sequence of items? Go for an array.
• Do you need to associate values with keys, so you can look them up efficiently (by key) later on? Use an object.

Modifying / updating objects

Objects, like arrays, are mutable, meaning that they can be changed after they are created. You can add new key–value pairs to an object after it is created, like this:

> participant['favorite_language'] = 'JavaScript'
< "JavaScript"
> participant
< {name: "Commonlounge", country: "Canada", favorite_numbers: Array(3), favorite_language: "JavaScript"}

You can use the delete command to delete an item in the object. Say, if you want to delete the entry corresponding to the key 'favorite_numbers', just type in the following command:

> delete participant['favorite_numbers'] 
< true
> participant['favorite_numbers']
< undefined
> participant
< {name: "Commonlounge", country: "Canada", favorite_language: "JavaScript"}

As you can see from the output, the key–value pair corresponding to the favorite_numbers key has been deleted.

You can also change a value associated with an already-created key in the object. Try this:

> participant['country'] = 'Germany'
< "Germany"
> participant
< {name: "Commonlounge", country: "Germany", favorite_language: "JavaScript"}

Objects vs Dictionaries

In many programming languages, dictionaries and Objects are two separate things. In JavaScript, Objects are directly used to implement dictionaries as described above. However, this also means that (a) you can do more with JavaScript Objects than we have described above - you'll learn about JavaScript Objects used as full-fledged Objects later in the course. Above, we have describe how JavaScript dictionaries functionality is achieved in JavaScript using Objects, and (b) some things that should be easy to do with dictionaries is not so easy to do in JavaScript. For example, finding out the number of key-value pairs in the dictionary, or finding the list of all keys in the dictionary.

Summary

Awesome! You know a lot about programming now. In this last part you learned about:

• variables – names for values that allow you to code more easily and to make your code more readable
• arrays – collections of values stored in a particular order
• objects as dictionaries – items stored as key–value pairs

Excited for the next part? :)