DEV Community: Teresa Holfeld

Arrays and Loops

Teresa Holfeld — Sun, 22 Nov 2020 14:05:52 +0000

One of the reasons why humans created computers is that they will do hideous, repetitive tasks without complaining. They can process tons of data where we as humans would die of boredom for doing the same thing over and over again.

Imagine that you are an employee of a very successful software business. The software you sell has about 10,000 customers, and they all pay a yearly subscription fee for the software licence. Now your boss, for economic reasons, decides that the company will switch to a different bank account. Your job now is to notify each and every customer about this by email. Bummer.

Imagine you had to do that by hand: go through the list of 10,000 customers and email each about that change. You would probably quit your job. 😅 Fortunately, you can use programming languages for exactly this type of tedious task. In repetitions (or loops, as we call them) lies the true power of programming.

In this article, I won’t show you how you can email 10,000 people automatically (mind you!), but I will show you how to use JavaScript to handle data in the form of lists (i.e. arrays). You will learn how to create arrays, how to access them, and how to iterate through them. This is one of the most important concepts that you need to learn in order to become a programmer.

All examples of this blog post are published here. For the best learning experience I encourage you to create your own Repl on repl.it and try all steps yourself.

Doing the same thing over and over again: Loops

Let’s say, your task was to write the words “I will use loops for repetitions” and print it out on the console 20 times. How would you go about that? You could of course write 20 of these lines:

console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")
console.log("I will use loops for repetitions")

With copy-and-paste this is doable. But you guessed correctly: there’s an easier way to do it.

JavaScript has a so-called for loop that is exactly made for this type of repetitive task. You can use it to repeat a task for a certain number of times.

In our example, a for loop would look like this:

for (var i = 0; i < 20; i++) {
  console.log("I will use loops for repetitions")
}

Much nicer, isn’t it? Short and concise. 😊

You need to write the line that is repeated only once, and the repetition is done automatically.

Let’s dissect the for loop and understand all of its parts.

for (...) {
  ...
}

The for keyword signals the program: this is a loop—do this for … repetitions.

Everything that goes inside the curly brackets {} will be repeated.

var i = 0;

Here we create a variable i. This is a helper variable.

It is usually called i because it is the variable for the index.

With every time the loop is repeated, i will increase.

Note: i starts at 0, not at 1. In programming, we always start counting at 0. We will talk about this in more detail a little later.

i < 20;

This statement says: repeat as long as i is less than 20.

We will see what this means when we look at the next statement:

i++

This means: increment (increase) i by one. It is the same as saying i = i + 1.

📝 For your cheat sheet:

i++ is the same as i = i + 1.

Knowing this, we can now have another look at the complete for statement:

for (var i = 0; i < 20; i++) { ...

So the whole statement is saying:

First, create a variable i which should have an initial value of 0.
Then the loop should repeat as long as i < 20.
And for each iteration, i gets incremented by 1: i++.

So in the first iteration, i is 0, in the second iteration it is 1, in the third iteration it is 2 and so on, and it stops if the condition i < 20 is not fulfilled anymore. Meaning: if i is 20 it stops executing.

To make this visible, we can modify the console log a bit and also print out i:

for (var i = 0; i < 20; i++) {
  console.log("I will use loops for repetitions " + i)
}

This now prints:

I will use loops for repetitions 0
I will use loops for repetitions 1
I will use loops for repetitions 2
I will use loops for repetitions 3
I will use loops for repetitions 4
I will use loops for repetitions 5
I will use loops for repetitions 6
I will use loops for repetitions 7
I will use loops for repetitions 8
I will use loops for repetitions 9
I will use loops for repetitions 10
I will use loops for repetitions 11
I will use loops for repetitions 12
I will use loops for repetitions 13
I will use loops for repetitions 14
I will use loops for repetitions 15
I will use loops for repetitions 16
I will use loops for repetitions 17
I will use loops for repetitions 18
I will use loops for repetitions 19

You can see here that for every repetition, or iteration, as we call it, i is incremented, and it stops just before i is 20.

💡 In programming, a repeated execution in a loop is called an iteration.

Go ahead and play around with the numbers in your program.

👩‍💻 As an exercise, try printing out the numbers from 1 to 100. (Careful, there’s a little caveat here!) You can see the solution here.

Loops are not necessarily about numbers. You usually want to iterate through other data, like a list of strings or similar.

Let’s have a look at a different example then: we have a list of names and want to print them all out. For that we need an array.

Storing Data in a List: Arrays

In my previous article we had a look at the different data types that JavaScript provides you with. In addition to integer, string, boolean and so on JavaScript has another data type that lets you save lists of data: the array.

An array is basically a list of values. While we said you can imagine a variable like a box that has something inside, you can imagine an array as a shelf with a number of compartments that have something inside.

This is an array of strings. You can see it as a variable that stores a number of string values.

In JavaScript you would create an array like this:

var greetings = [ "Hi", "Hey", "Hola", "Moin", "Hello" ];

Let’s look at another example.

We want to save a list of names, so we could do it like this:

var names = [ "Teresa", "Eva", "Jonas", "Helder", "Clemens" ];

This will create an array of 5 elements: the 5 string values "Teresa", "Eva", "Jonas", "Helder" and "Clemens". The array is saved in a variable called names – this is now the name of the array that we can use to get its content.

For getting one particular name, we need to use the array name and the index, like:

console.log(names[2])

What is the index? The index is the position of the element in the array.

You can try out what happens if you use it like this. What is the output? (It should be “Jonas”). Also try putting in other numbers and see what happens. Do you get how it works?

☝️ Beware: indices start at 0!

One thing that is very important to remember: the indices of arrays start at 0. This means the first is 0, the second is 1, the third is 2 and so on.

This is how things work in the world of programming. 🤷‍♀️ It’s called: zero-based numbering, if you want to look it up. It’s so peculiar to non-programmers that this is the source of many jokes and memes, like this:

Let’s get back to our array with the names in it and print out each name using its index:

console.log("Name 1:", names[0]);
console.log("Name 2:", names[1]);
console.log("Name 3:", names[2]);
console.log("Name 4:", names[3]);
console.log("Name 5:", names[4]);

This should give you an output like this:

Name 1: Teresa
Name 2: Eva
Name 3: Jonas
Name 4: Helder
Name 5: Clemens

You see here that for the first element we use the index 0, for the second index 1 and so on. I’m sure you get it by now. 😉

Now what happens if you try to access an array element at a position that doesn’t exist? Let’s say at position 19? Let’s try it out!

console.log(names[19]);

This gives us this as an output:

undefined

No wonder, right? The array has only 5 elements, the last of which has the index 4. So the element at index 19 (the 20th element) is undefined.

To practice this and make it more clear, let’s create an array of integers, that hold the numbers 15, 3, 28, 2, 6, 17, 3, 29, 8, 9, 0, 10, 31, 5, 4.

var numbers = [15, 3, 28, 2, 6, 17, 3, 29, 8, 9, 0, 10, 31, 5, 4];

💡 Arrays can hold any data type.

(It can also be mixed, but we won’t look at that now.)

And now we want to print all values.

We know how to access elements in an array now: with the array name and the brackets [] with the index inside. Let’s do it!

console.log("Number 1:", numbers[0]);
console.log("Number 2:", numbers[1]);
console.log("Number 3:", numbers[2]);
console.log("Number 4:", numbers[3]);
console.log("Number 5:", numbers[4]);
console.log("Number 6:", numbers[5]);
console.log("Number 7:", numbers[6]);
console.log("Number 8:", numbers[7]);
console.log("Number 9:", numbers[8]);
console.log("Number 10:", numbers[9]);
console.log("Number 11:", numbers[10]);
console.log("Number 12:", numbers[11]);
console.log("Number 13:", numbers[12]);
console.log("Number 14:", numbers[13]);
console.log("Number 15:", numbers[14]);

This should give us an output like this:

Number 1: 15
Number 2: 3
Number 3: 28
Number 4: 2
Number 5: 6
Number 6: 17
Number 7: 3
Number 8: 29
Number 9: 8
Number 10: 9
Number 11: 0
Number 12: 10
Number 13: 31
Number 14: 5
Number 15: 4

Fair enough, I use the index to access a number in the numbers array like numbers[index] and I get the number.

But now we have a tedious task: We have 15 lines of code that are all very similar. And you guessed completely right: we can use loops here to make this simpler!

Looping Through Arrays

As you remember from above, for loops look like this:

for (var i = 0; i < 20; i++) {
  // do something
}

Here we repeat the loop 20 times. We use i as our index, and go from 0 to 19 (we repeat the loop as long as the condition i < 20 is met), and increment i by one (i++) for every iteration.

Now we could use i here as the index for accessing our numbers array, like numbers[i].

Let’s try that!

for (var i = 0; i < 20; i++) {
  console.log(numbers[i]);
}

Ok, so what exactly are we doing here?

We have a for loop, where we use i as a variable for the index.

In the first iteration, i is 0. So the console.log is called like: console.log(numbers[0]);

And numbers[0] gives us 15.

In the next iteration, i is 1. So it’s like using numbers[1]. And it prints 3 - the value at position 1 (the second value) of the array.

In the next iteration, i is 2, so it’s like using numbers[2]. This gives us 28, because this is the element at index 2.

And so it goes iteration by iteration until it stops after i was 19.

The loop should give you an output like:

15
3
28
2
6
17
3
29
8
9
0
10
31
5
4
undefined
undefined
undefined
undefined
undefined

Hold on, why does it print five times undefined in the end? 🧐

You see, we said that the loop should repeat until i < 20. So it also calls numbers[15], numbers[16] and so on until numbers[19]. And since our array has only 15 elements (the last index is 14), these values are undefined.

But there is a way to loop through an array and avoid running outside of the array and having accidental undefined values.

In JavaScript, you can get the length of an array in this way:

numbers.length

If you put this in console.log() this will give you: 15. Because we have 15 elements in the array. Unlike the index, this count starts at 1, just as you are used to counting. 😉

Remember: you can get the length of an array by using the array name, then a dot, and then length. For our other array, names, this would be names.length.

So how does this numbers.length help us with our loop?

We can put it there instead of the 20:

for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

This gives us the output:

This stops right after the last element, because numbers.length is the limit where we want to stop. This way we have no unwanted undefined values anymore. 🎉

This is common practice for iterating through arrays. Make sure you put that into your notes.

This way of looping through an array also has another advantage: We can add elements to our array, and it will still work.

Try this:

numbers.push(25);

This will add a number 25 to the numbers array at the end of the array.

You use the array name, a dot, and then push, brackets () and inside you put the element to add to the array: arrayname.push(element), generally speaking.

Now our element has a new value at index 15: console.log(numbers[15]) is now giving you 25 instead of undefined. And if we wanted to iterate through our array again, we could do that just as before, no changes:

for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

This should give us the output:

Cool! It included the new element at index 15. 😁

Doing the same, just differently: While Loops

There is also a different kind of loop, the while loop:

var counter = 0;
while (counter < 12) {
  counter++;
  console.log(counter);
}

The while loop is a bit of a minimized version of the for loop. It executes whatever is in the curly brackets {} as long as the condition is met, in this case counter < 12.

The programmer has to do the work of creating the variable (counter), and incrementing the variable (counter++, you remember: it’s the same as saying counter = counter + 1).

While loops are usually used for different use cases, and used much less than for loops. You can for now stick with for loops. But with this, you will also recognize what a while loop is if you see one.

If you are courageous enough, you can try to replace the for loop from above (that loops through the list of numbers) with a while loop. Can you do it?

If you made it until here: congratulations! You now know how to use arrays and loops. This is a huge step in your journey to becoming a programmer!

As always, remember: skill comes with practice. Understanding loops can be a mind-bending experience if you see them for the first time. But every time you create a new loop and use it to iterate through an array, it will get easier. Until one day it’s become so natural that you don’t even need to think about it anymore.

To get you started in this direction, you can practice with an exercise: create an array of integers, say, the age of your closest 10 friends or family members. Loop through this array and print each age with console.log(), but when you do that, add a 😀 if the number is even, and a 🤨 if the number is odd.

Remember: You can find out if a number is even (i.e. divisible by 2) by using the modulo % operator.

You can look up the solution here.

Thanks for reading! If you liked it, press the heart ❤️ or the unicorn 🦄 and share it with your friends. If you got stuck somewhere, leave a comment. I’m a coding school teacher, and I'm always happy to help you learn! 😊

Functions, Parameters and Return Values

Teresa Holfeld — Sun, 08 Nov 2020 15:08:13 +0000

This is my blog post series that explains the core concepts of programming to beginners. 💁‍♀️

In my previous blog post I showed you how variables work in JavaScript, what data types are, and how the different operators work.

In this blog post, we will have a look at functions. You will learn how you can build functions in JavaScript, how you can pass data to them and get data back.

Let’s dive right in! 🏊‍♀️

Let’s have a look at this example:

var age = 19;

// Can we have a soda?
if (age > 1) {
  console.log("Here you go!")
} else {
  console.log("Not old enough, sorry.")
}

// Can we have a beer?
if (age >= 18) {
  console.log("Here you go!")
} else {
  console.log("Not old enough, sorry.")
}

// Can we have wine?
if (age >= 18) {
  console.log("Here you go!")
} else {
  console.log("Not old enough, sorry.")
}

// Can we have wodka?
if (age >= 21) {
  console.log("Here you go!")
} else {
  console.log("Not old enough, sorry.")
}

You can always look up and run the examples of this blog post here. We would suggest that you create your own Repl at repl.it and do all the examples yourself. Learning by doing is the best method for learning to code.

You can see that we repeat a code snippet multiple times. These lines are repeated twice:

if (age >= 18) {
  console.log("Here you go!")
} else {
  console.log("Not old enough, sorry.")
}

and two other blocks are very similar.

We can actually put this repeated code snippet into a block. This block then gets a name, and we can use it wherever we need. This is called: a function.

Functions

If we take above example and put the duplicated code snippet into a function, it will look like this:

function canWeDrinkThis() {
  if (age >= 18) {
    console.log("Here you go!")
  } else {
    console.log("Not old enough, sorry.")
  }
}

The function keyword tells us: Here comes a function!

Then there’s the name of the function (canWeDrinkThis). You can name it however you like.

The name of the function is followed by an opening and closing bracket ().

And then the opening curly bracket { signals: here comes the code block! It ends with the closing curly bracket }, which signals that this is the end of the code block.

Inside the curly brackets goes the code snippet that the function is supposed to do.

Now this is only the “definition” of the function. We call it the function declaration.

What does this mean? It means that we just defined what the function is going to do.

In order to actually run the function, so that our code snippet is executed and does something, we need to call it:

canWeDrinkThis()

You call the function by using the function name and brackets (). This is the function call.

This is important to remember: You first declare the function, then you call it. It is important that you know the difference between function declaration and function call. If this is a bit confusing, hang on. It will get more clear with practice.

The function gets only executed when you call it. You can, in fact, call it multiple times, and it will get executed multiple times. Try it:

canWeDrinkThis()
canWeDrinkThis()
canWeDrinkThis()

What happens if you run this? It gets called three times, so you will have three console outputs.

This is a bit like creating a recipe: When we declare the function, it is like we write the recipe down on a sheet of paper. When we call the function, it is like we are actually cooking the dish of the recipe.

Now with recipes, there’s usually a list of ingredients at the beginning: the things that go into the meal that you are about to cook. Functions have a similar concept: parameters.

Function Parameters

A function parameter is data that goes into a function: the input of a function.

We also call function parameters params.

If you look at our first example you see: we have four blocks that are very similar. The only thing that changes is the age threshold for each beverage. We could make our function more flexible to take this into account, by using parameters. We can pass the minimum age for a beverage into the function as a parameter.

This would look like this:

function canWeDrinkThis(minAge) {
  if (age >= minAge) {
    console.log("Here you go!")
  } else {
    console.log("Not old enough, sorry.")
  }
}

Here, minAge is the minimum age that is allowed for a beverage. It is passed as a parameter.

For beer, for example, the minAge would be 18. We put that number inside the brackets () when we call the function:

canWeDrinkThis(18)

And similarly, we could call that function for the other beverages:

canWeDrinkThis(1)   // Soda
canWeDrinkThis(18)  // Beer
canWeDrinkThis(18)  // Wine
canWeDrinkThis(21)  // Wodka

Everything that starts with two slashes // is a comment, it is ignored and will not be executed.

So what is happening here? The function is getting called four times in a row, once for each beverage. The minimum age for the beverage is passed as a parameter: 1 for soda, 18 for beer, 18 for wine, and 21 for wodka. So we have 4 output messages, that should be something like this:

Here you go!
Here you go!
Here you go!
Not old enough, sorry.

It would be nice to see in the output what beverage it is, right? We can do that by passing the name of the beverage as parameter as well. We then use it in the console.log("...") text, like this:

function canWeDrinkThis(beverage, minAge) {
  if (age >= minAge) {
    console.log("Here you go! Have a " + beverage)
  } else {
    console.log("Not old enough for " + beverage + ", sorry.")
  }
}

What happens here is: we define an additional parameter called beverage.

This parameter is then treated as a variable in the block of the function.

If you don’t remember variables, check out the previous blog post where we covered them.

In the console.log statements, we use the variable beverage and put it into the output text.

As we learned above, this is just the function declaration. We also need to call it. Let’s call the function once for each beverage:

canWeDrinkThis("Soda", 1)
canWeDrinkThis("Beer", 18)
canWeDrinkThis("Wine", 18)
canWeDrinkThis("Wodka", 21)

This should give an output like this:

Here you go! Have a Soda
Here you go! Have a Beer
Here you go! Have a Wine
Not old enough for Wodka, sorry.

We now have one console log for each output with the beverage name.

Parameter Data Types

As you remember from my previous blog post, variables have data types, e.g. integer (number) or string (text). The same is true for parameters. Parameters are just like variables that are put into functions.

In the function call

canWeDrinkThis("Beer", 18)

you can see that we pass parameters of different data types: First, the beverage name – as a string. Second, the minimum age for the beverage – as an integer.

In the function declaration you need to be a bit conscious about the data type, because you don’t see it. It just shows the parameter name:

function canWeDrinkThis(beverage, minAge) { ...

Therefore you need to keep in mind how you use the parameter in the code of the function.

In our case, beverage is used later in the code as a string:

  console.log("Here you go! Have a " + beverage)

And minAge is used as an integer:

  if (age >= minAge) { ...

So we need to make sure that when we call the function, we pass the right data type at the right place. In this case: first a string, then an integer.

canWeDrinkThis("Beer", 18)

This is nothing to worry about, you just need to be careful that you pass the right data types into the function at the right place.

Return Values

Functions can have a return value. What does that mean?

It means we can make a function return something. In other words, we can get an output from the function.

Look at this example:

function isOldEnough(age, minAge) {
  var oldEnough = age >= minAge;
  return oldEnough;
}

This function returns true or false, because it has a return value:

return oldEnough;

Here, oldEnough is the variable that we created one line before.
With return, we give it back: we say that the output of the function should be whatever oldEnough is (true or false).

So if we call the function, we get a value back, and can, for example, save this value in a variable:

var canDrink = isOldEnough(19, 18);

isOldEnough(19, 18) is the function call – we call our new function here with the parameters age (19) and minAge (18).

Then we save it in a variable: var canDrink.

You can print it on the console to see the value:

console.log(canDrink)

This should print true in the console.

You can play around with it, change the numbers that you pass into the function, and see how the result changes.

Putting it all together

Let's wrap up what we learned so far and apply everything to the first example of this article.

First, we are going to write down our function declarations. We will need 2 functions:

isOldEnough(age, minAge) that returns true or false
canWeDrinkThis(beverage, minAge) that makes our console output

So here they go:

// Function declarations

function isOldEnough(age, minAge) {
  var oldEnough = age >= minAge
  return oldEnough
}

function canWeDrinkThis(beverage, minAge) {
  var oldEnough = isOldEnough(age, minAge)
  if (oldEnough) {
    console.log("Here you go! Have a " + beverage)
  } else {
    console.log("Not old enough for " + beverage + ", sorry.")
  }
}

You see here that I am already calling the function isOldEnough() in the function canWeDrinkThis(). And yes, of course you can make a function call inside a function declaration. This is common practice and it is how you use functions, basically.

Now there are two lines of code that we could make even shorter:

// ...
  var oldEnough = isOldEnough(age, minAge)
  if (oldEnough) {
// ...

This would be the same as writing:

// ...
  if (isOldEnough(age, minAge)) {
// ...

You see what I did here? I skipped creating a new variable oldEnough, and used the function directly in its place in the if (...) brackets. We replaced the variable with the function call.

This is possible, because the function has a return value. We know the return type of our function is true or false, so if we put this in the if (...) clause, this works.

Note: If the function would return something different, like a string or an integer, we couldn't use it in the if (...) clause.

This means: If the function has a return type, I can treat a function call just the same way as a variable. This is suitable if I call it only once and don't need to save the value for re-usage. In our case, it makes the function one line shorter. And shorter is always better. 😊

So we call the function isOldEnough() now in our other function canWeDrinkThis(), but one important thing is missing: we also need to call the function canWeDrinkThis().

We want to do this once for each beverage:

// Function calls

var age = 19;

// Can we have a soda?
canWeDrinkThis("Soda", 1)
// Can we have a beer?
canWeDrinkThis("Beer", 18)
// Can we have wine?
canWeDrinkThis("Wine", 18)
// Can we have wodka?
canWeDrinkThis("Wodka", 21)

This is giving you the output you want:

Here you go! Have a Soda
Here you go! Have a Beer
Here you go! Have a Wine
Not old enough for Wodka, sorry.

As a summary, here is what the whole program should look like now:

// Function declarations

function isOldEnough(age, minAge) {
  var oldEnough = age >= minAge
  return oldEnough
}

function canWeDrinkThis(beverage, minAge) {
  if (isOldEnough(age, minAge)) {
    console.log("Here you go! Have a " + beverage)
  } else {
    console.log("Not old enough for " + beverage + ", sorry.")
  }
}

// Function calls

var age = 19;

// Can we have a soda?
canWeDrinkThis("Soda", 1)
// Can we have a beer?
canWeDrinkThis("Beer", 18)
// Can we have wine?
canWeDrinkThis("Wine", 18)
// Can we have wodka?
canWeDrinkThis("Wodka", 21)

Nice, isn't it? 😊

Much shorter and no unnecessary code duplication anymore! ✨

You can look up the solution code here. Feel free to run it and play around with it.

Well done! If you followed the tutorial, you should be able to write functions, tell a function declaration from a function call, pass parameters to functions, and let a function return a value.

This is not easy. If you have the feeling that you didn’t quite get 100% of it, stay patient. Play around with the functions you have, and get some practice. Everything will get more clear and easy with practice.

As an exercise, you can make the function canWeDrinkThis(...) return true or false and print it on the console. You can look up the solution for this exercise in our Repl here.

I hope this tutorial helped you understand functions. Were you able to follow? If yes, press the heart ❤️ and share it with a friend who also wants to learn coding. And if not, leave a comment and ask your question. Thanks for reading, and happy coding! 👩‍💻

JavaScript: Variables, Data Types and Operators

Teresa Holfeld — Sat, 31 Oct 2020 17:58:25 +0000

So you want to learn how to code. But what is a good way to start? There are plenty of options: courses, books, games, some even targeted at children. Yes, Children! If a child can do it, how hard can it be, right?

In this post, I show you the fundamentals you need at the beginning. These fundamentals are mostly the same for any programming language. All programming languages use the same principles: variables, logical operators, decisions, loops and functions. Once you understand these, you will begin to think like a coder.

Coding has, in fact, more to do with logical thinking than with math. For learning to code it’s even more of an advantage to have an affinity for languages. Sure, math skills are relevant for some fields of computer science, but more in the academic realm of data science or machine learning. In their day to day work, programmers usually don’t use more than basic arithmetics. Which supports our claim: even a child can learn programming.

Let’s take a look at the most basic coding concepts: variables, data types and operators. For demonstration purposes, we will use JavaScript, because it is a widely used language. However, these concepts apply to any other language as well. For showing you the fundamentals, it wouldn’t matter which language we used here. This characteristic is called language agnostic.

💡 The word ”agnostic” is derived from ancient Greek for “not knowing”. Hence, language agnostic means “not knowing the specific language”.

Here, the irrelevant programming language in our examples is JavaScript.

Hello World!

You can follow the code examples of this article on repl.it. Repl.it is an online editor and does not require installation. You can also start your own cloud editor by choosing JavaScript in the footer of the homepage. This is what the user interface looks like:

On the left is the input field where we’ll write our JavaScript code. On the right, you’ll see the output. Clicking on the green “run” button at the header’s center will run the program. Try it out by typing the following line into input:

console.log("Hello World!");

This is what should appear in the output on the right:

If it looks like this, you did it right. You might wonder what this green undefined is, but simply ignore it for now.

With this short line, you ran the Hello World program. It’s what a programmer always does at the beginning to test a programming language. Check out the Hello World programs of other languages in the extensive Hello-World Collection.

Variables

After we have tested our repl.it editor with the Hello World program, we now define our first variable:

var myname = "Teresa";
console.log(myName);

Running this short command will output Teresa on the right.

You can think of a variable as a box. You put something into the box (in this case Teresa) and label the box (in this case myName). Each time a command (in this case console.log) uses the variable (myName), it’s as if it would use the variable’s content (Teresa). To practice, change the variable’s content or name and see what happens!

You can also join multiple pieces of text together:

var text = "Hello my name is " + "Teresa";
console.log(text);

The output now shows: Hello my name is Teresa. The box of variable text now consists of the text Hello my name is Teresa. The plus sign + in the middle joins both texts together. Note the space after is. Without it, variable text would mistakenly be "Hello my name isTeresa".

In programming languages, texts are called strings. This has to do with a text being a string of characters being put together. A string can have any length, i.e. any number of characters. The content of variable text (Teresa) has a length of 6, because it consists of 6 characters.

String variables can also be joined with other variables:

var myName = "Teresa";
var text = "Hello my name is " + myName;
console.log(text);

This is where it gets interesting. You can change the content of the variable myName, which you may have used several times in your code. With this little change in the variable, the name changes throughout your output. Practice by changing the variable’s content in various ways and check what this does to your output.

The keyword var says: this is a new variable we are creating. Then, at console.log you won’t write out var because the variable already exists.

Data types

A data type is the type of content of a variable. You already know one: string. A string basically is a text, a string of characters put together.

There are other data types as well. You can, for example, use numbers as variables:

var number = 5;
console.log(number);

The variable number here has the content 5. Running the command console.log with the variable will show 5.

This sort of number is called integer. Integers can be positive or negative. You can try it with a negative number: put a negative sign - before 5 and run your code.

You can use decimals, too:

var floatNumber = 2.14;
console.log(floatNumber);

In programming this is called a floating point number, or short float.

Previously, you were using the plus + sign to join strings together. You can also use it to join strings with integers or floating point numbers. You will probably easily recognize what the output of this is going to be:

var myName = "Teresa";
var age = 32;
var text = "My name is " + myName + " and I am " + age + " years old";
console.log(text);

There is one more data type which is very important: true or false. In logic, a statement can be either true or false. This data type is called boolean.

var canCode = false;
console.log(canCode);

Instead of false you could also write true. Try both and see how this changes the output.

Of course you can also join strings with booleans:

var myName = "Teresa";
var canCode = true;
var text = myName + " can code: " + canCode;
console.log(text);

So, why do we have variables? Let’s see what we can do with them, and have a closer look at operators.

Arithmetic Operators

Operators are special characters that we can use in programming languages to do certain operations. There are arithmetic operators like plus +, minus -, multiply *, and divide by /. Then, there are also so-called logical operators, which we’ll explain shortly.

By the way, we already used two operators:

var text = "Hello my name is " + myName;

The equality sign = and the plus sign +. The equality sign = is an assignment operator. It means that the content on the right (in our case: "Hello my name is " + myName) is assigned to the variable on the left (in our case: var text).

The plus sign + is also an operator. But here it is not an arithmetic operator. With strings, + is used as a concatenation operator, which joins several strings or strings and numbers together to form one long string.

With numbers, you use the plus sign + as arithmetic operator. It will add one number to the other. Similarly, you can use the operators minus -, multiply *, divide by /, and modulo %. We will explain what modulo % does in a bit (it does not mean percentage).

Let’s first try them with two integers:

var a = 12;
var b = 5;
console.log("The sum is ", a + b);

The output will be: The sum is 17. The + adds the two integers. In the same way, - subtracts an integer from another. Let’s take our two variables a and b:

var a = 12;
var b = 5;
console.log("The difference is ", a - b);

This is easy, isn’t it? The output will be: The difference is 7.

For practice, try this with *, multiplication. Of course you need to adjust the sentence to read “The product is “. The correct result should be 60. And what do we get by dividing, /, the two?

var a = 12;
var b = 5;
console.log("The quotient is ", a / b);

The result is 2.4. It has a decimal point, so it’s a float! You can also assign the result of the operation to another variable. We’ll call it “ratio”.

var a = 12;
var b = 5;
var ratio = a / b;

The quotient of a and b is a float, so the variable ratio is of the data type float as well. Operations with floats work in the same way as integers. Try it out by changing variables a and b to floats.

That’s much harder to calculate in your head, and we start to see how doing this with a programming language can be of much help. Computers are much better at arithmetic than humans. Experienced programmers usually leave that to the computer. All they need to know is how to express these calculations in their programming language.

The % sign is called modulo. The modulo operator is a bit special. You use it to calculate the remainder of a division.

var a = 12;
var b = 5;
var modulo = a % b;
console.log("The modulo is ", modulo);

In our example, the result is 2. How did we get there? Well, 12 / 5 = 2 with remainder 2. The number 5 fits 2 entire times into 12, and leave 2 not accounted for. The result of the modulo operator is always the remainder. If we changed our variable a to 13, we would get modulo 3.

Conditional Statements and Relational Operators

At some point, you’ll want to create statements which run on conditions. Maybe you have already heard of if-else statements. This is how it works:

var userAge = 21;
if (userAge >= 18) {
 console.log("Have a Beer!");
} else {
 console.log("Have a Soda!");
}

We verify the user’s age. Is the value of the userAge variable greater or equal than 18? If it is, show the toast “Have a Beer!”. If their age is less than 18, meaning the condition is not met, show the toast “Have a Soda!”.

We need the keywords if and else as well as the curly brackets following the keywords. Is a condition met, the program runs the statement in brackets after if (…). Is the condition not met, the program runs any statement after else. Try it out by playing with the value of the userAge variable.

Let’s take a closer look at what’s in the round brackets after the if: userAge >= 18. >= is a relational operator. It means greater or equal than. The other relational operators are:

==    equal to
>=    greater than or equal to
<=    less than or equal to
>     greater than
<     less than
!=    not equal to

The result of a relational operator is either true or false, therefore a boolean. You can save it to a variable as well, which then is of the data type boolean. You will see this if you create a variable comparing a and b:

var a = 12;
var b = 5;
var result = a == b;
console.log(result);

The output is false. This proves our variable result is of the boolean data type.

You can always use variables to store intermediate results. In the if-statement, you can then use this variable. We could write our beer-soda-example like:

var userAge = 21;
var isOldEnough = userAge >= 18;
if (isOldEnough) {
 console.log("Have a Beer!");
} else {
 console.log("Have a Soda!");
}

An if-statement can contain an operation (userAge >= 18) or a variable (isOldEnough). If you use a variable in the if-statement, the variable has to be a boolean. Otherwise, it won’t work.

Logical operators

When writing if-else-statements, we can logically concatenate several conditions. Let’s say in our example, we wanted a teenager, 16 and older, to be allowed to drink beer when a parent is with them. We would express it like this:

var userAge = 17;
var withParentalGuidance = true;
if (userAge >= 16 && withParentalGuidance) {
 console.log("Have a Beer!");
}

The else-command is omitted here for better focus. We’ve concatenated the two conditions (userAge >= 16) and (withParentalGuidance) with an AND-operator (&&). In total, there are three logical operators:

&&    AND
||    OR
!     NOT

The !, you’ve already seen as != (not equal to). AND and OR operators are placed between the two conditions to be concatenated (as shown in our example). It is slightly different with the NOT operator which is placed before the condition to be negated.

With NOT, a statement is logically reversed:

if (!isOldEnough) {
 console.log("Have a Soda!");
} else {
 console.log("Have a Beer!"); 
}

You can concatenate as many conditions as you like. Brackets aren’t always necessary, but they help–especially at the beginning–to better understand the logic.

Let’s further specify our example from before. If someone is older than 18 OR older than 16 AND with a guardian, they get a beer:

if ((userAge >= 18) || (userAge >= 16 && withParentalGuidance)) {
 console.log("Have a Beer!");
}

When reversing a condition with a NOT operator (!), keep in mind to also reverse any relational operator (>=). For our example (userAge >= 18) is the same as !(userAge < 18).

if (!(userAge < 18) || (userAge >= 16 && withParentalGuidance)) {
 console.log("Have a Beer!");
}

We turned greater or equal than (>=) into less than (<), but not into less or equal than as we want the condition to hold true if userAge is exactly 18.

The opposite of >= is <

The opposite of <= is >

Put the other way around:

The opposite of < is >=

The opposite of > is <=

If we now want to define that 16 and 17 year olds are allowed to drink beer with their parents’ permission, but only up to a maximum of 2 beers, how would we express that? It leads us to an additional statement: else if.

if (userAge >= 18) {
 console.log("Have a Beer!");
} else if (userAge >= 16 && withParentalGuidance) {
 console.log("Max 2 beers!");
} else {
 console.log("Have a Soda!");
}

You may write many more else-if-statements than one, but we’ll leave it at that for now.

To practice, try writing a program that has 3 variables and gives an output of the greatest of these three variables. We give you a hint: Within an if you can nest another if into curly brackets:

if (...) {
 if (...) {
   ...
 } else {
   ...
 }
} else {
  ...
}

I prepared the solution to this exercise on repl.it. For any question, join our Slack and ask away. If you have, post a link to your code, so I can help you better.

This has been quite a bit of information! Great job at staying with us! Review the individual operators step by step until you are able to apply them on your own. I will build on this in another post where I’ll discuss loops and functions.

Btw, I run a coding school in the north of Germany, called Hamburg Coding School. We teach a classroom course there where we cover exactly these topics: Learn to Code. Even if you can't participate locally, feel free to join our Slack and say hi! 👋😊 We welcome and help everyone there.