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.
We can save some data in our program now! What about some dynamics, calculations?
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.
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.
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.
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?
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, 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:
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
mapwe 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 (DMs are open).
The full article with more explanations + an example with HTML & CSS
Top comments (0)