Javascript for total newbies by examples
Tags: beginners, javascript, programming
Published: 2021-04-13 13:31:32

---
title: Javascript for total newbies by examples
published: true
description: 
tags: beginners, javascript, programming, newbies
canonical_url: https://metacognitive.me/javascript-for-total-newbies/
//cover_image: https://direct_url_to_image.jpg
---

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](https://codepen.io/). 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.

![img](https://metacognitive.me/content/images/2021/04/_.png)

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

![I'm](https://metacognitive.me/content/images/2021/04/_--1--3.png)

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.

![f](https://metacognitive.me/content/images/2021/04/_--2-.png)

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?

## 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.

![de](https://metacognitive.me/content/images/2021/04/_--3-.png)

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.

![fr](https://metacognitive.me/content/images/2021/04/_--4-.png)

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 access to the 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?

![de](https://metacognitive.me/content/images/2021/04/_--5-.png)

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.

![see](https://metacognitive.me/content/images/2021/04/_--6--2.png)

See, we pass a 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:

![de](https://metacognitive.me/content/images/2021/04/_--7-.png)

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 `person.email` is? 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 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 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 applies 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.

If you didn't understand something or have questions, don't hesitate to [write me on Twitter](https://twitter.com/sergchr) (DMs are open).

[The full article with more explanations + an example with HTML & CSS](https://metacognitive.me/javascript-for-total-newbies/)