Javascript for total newbies by examples

This article covers the very fundamentals of the Javascript language to give you a small grasp of how it looks like and what you can do with programming languages. Though we consider only Javascript here.

If you don't know if programming for you at all, you may also take a look at this article.

Practice along the way with me by creating code snippets in Codepen. I don't leave the code snippets as text intentionally, so you can type it yourself and memorize better.

Disclaimer: this is a superficial guide that doesn't explain all the things covered here as well as many details and possible approaches.

Javascript consists of basic building blocks such as variables. They are intended to keep something in mind, to save into memory, to memorize. Let's create the first variables.

Javascript variables

We can save some data in our program now! What about some dynamics, calculations?

A function to add 1 to a number you provide

Meet a function. It's a set of instructions aimed to do something useful to us. In the example above, the function addOneTo adds 1 to a number we provide to it as an argument. Yes, we can pass data to functions. But it's not mandatory. It depends on what we want to achieve. There are many use cases.

How can we see the result of this code execution? Let's write it to the output.

Why do we need to write return inside a function? Thus, our function actually returns the result of execution in the place we called the function. If we don't do that, then the function calculates 1 + number and the result goes to a void. No one will ever hear about the result. What does brackets near a function mean? Like addOneTo() In this way we call or invoke a function. Therefore, it executes and gives us a result. Should we always save the result of a function execution to a variable? No. We can just write console.log(addToOne(1)) and the result will be the same.

We should see 2 that show up in the browser console - the result of the execution. Okay, you got this. What about a more real-world example?

Consider you have data: a list of people with their emails. You need to get only their emails. The list can be changing over time, so doing so manually is not convenient. In this case we need to get acquainted with a new data type - arrays.

Why do you call const a variable? Isn't it a constant? It is a constant, we can't reassign it. Though we can change its content without reassigning. E.g. pushing into an array, changing an object's properties. I'm simplifying this, so calling it a variable. There are a few more ways to make a variable: via let and var

So what about our real-world task? Let's define what the data should look like. We have a list of people. Each of them has an email. Also, there may be other properties like name or age. Our task is to get only a person's email. So, each person isn't a string, right? A number? Nope. An object?

What the object is in Javascript? It's a data type that contains properties or fields related to an entity. As it is in our case.

Getting people' emails

Wow wait! So many new things here! Wait, I'll explain.

The question you may have is do we have any conventions to name a function's arguments? Not really, we have the same naming conventions as for variables.

Why do we provide the array argument to the function if it has an access to people variable above? That's correct, it does. If you want details, read about the Javascript context execution or Scope. In this case, I want to you get used to such a convention - to use local context.

Why array argument has .map ? What is it? array is an object, actually, but don't mind that for now. All the objects have properties, right? So as our array does, but we didn't write it manually. By the way, how do we write object properties, the other way?

Assinging an object's properties

However, Javascript arrays have built-in properties, like map we've seen. The map isn't a number, or string though. It's a function! Yes, object properties can be functions! Alright, what does it do? map is a function that has one argument - another function. Don't leave! Give me a minute, I'll explain.

Passing function as function arguments

See, we pass raw function to the sumOf, but we don't call them while passing, like this: sumOf(fn1(), fn2()). In this case, we would need to rewrite the sumOf function as follows:

Let's return to our map function. It consumes a function (which we also call a callback ). This function(callback) is going to be executed on each element of a given array. In our case, we had people array, so we iterate through each object in the array and execute the function on it. For each person we call a function that has an argument - a current object(person) we iterate.

The next question you may have is what is person.email? In this way we read the person variable, which is an object, for its property email. Then, we return a person's email.

map returns a new transformed array, which we save to emails variable and return.

I know, it's difficult to grasp at the moment all of this stuff. With a practice, it'll be easy, I promise.

But now you know the fundamentals of fundamentals! Yes, not all of them, but that's enough to start practicing immediately. With what things you got acquainted currently:

• Variables. You can tell your program what things to save in memory while executing.
• Functions. You know how to pass variables to functions as arguments, how to return a function's result. Of course, there are a lot of the language instructions to learn, to make the most use of functions. But now you have the basics and can google more narrow examples.
• How to write output to the console via console.log.
• Arrays can contain a lot of different data. The same applicable to objects.
• Objects have properties to be assigned and reassigned if we need so. They also have built-in properties. Like the map we saw for arrays. All the arrays have this property.

Yes, Javascript assists us in creating web pages in case we need interactivity. For example, to change a button color when you hover a mouse cursor on it, or, store a user's data such as email from an input on a page, then send it to a server.

To work with a web page you'll need to learn the DOM part of the Javascript. Let's have an example. Consider a black block on a web page. Once we click on it, it's color will be changed (if it's black, then will become red and vice versa).

Take a look at our main function there - toggleBlockColor. It will be called every time we click on the block.

Change the block color if we click on it

You've seen a boolean variable before (a person that had isEmployed property). It can be either true or false. A new way to declare a variable - let. It's almost the same as const with one big difference - it can be reassigned.

And a new instruction - if statement. It allows us to execute code depending on some condition. The syntax is the following: if (CONDITION) {} where CONDITION is a result of execution that should be a boolean - true or false. In the brackets we write the code we want to execute if CONDITION is true. We may have else block after it, if we want to execute another piece of code if CONDITION is not true.

The algorithm of toggleBlackColor is next:

• If isDefaultColorApplied is true, we change the block color to red. And we reassign isDefaultColorApplied to false. Thus, if we click the block the next time, we'll execute the else part of the code.
• If isDefaultColorApplied is false, we change the block color to black and reassign the variable to true. So the next time we'll change the color to red.

isDefaultColorApplied tells us that the block's default color(black) is currently set. Change the variable name to whatever you think is best describes it.

You got acquainted with:

• if statements. Now you can execute code depending on some condition!
• Some of the DOM part of Javascript, such as document.getElementById that looks for an element by its id on HTML page.
  Also, an element has some callbacks methods such as onclick that executes if we click on the element.
• New kind of variable - let. It can be reassigned.

If you didn't understand something or have questions, don't hesitate to write me on Twitter (DMs are open).