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.
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?
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?
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 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?
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).