Concepts You Need to Know If You are a JavaScript Beginner
Tags: javascript, beginners, webdev, programming
Published: 2021-03-30 18:09:52

JavaScript is undoubtedly a **must have** if you want to become a web developer. That's because it allows you to create web apps which interact with users. 

So, if you're a JavaScript beginner, I'll tell you some basics to get into context and **make your learning curve smoother**. This way you'll understand the background instead of doing a copy-paste of code.

## Variables: types, initialization and declaration
A variable is a representation somewhere in memory that stores a value. You can declare and initialize a variable in just one code line:
```
var x = 5;
```
Alternatively, you can first declare the variable and then initialize it (with more than one line):
```
var x;  // Declaration
x = 5;  // Initialization
```

### `var` vs `let` vs `const`
Before ECMAScript 6 (2015), the only way to declare a variable was using `var`. But now you can use `let` and `const`. The main differences have to do with scope, re-assignation and hoisting.

To put it simple, `var` has global/function scope, that's to say, you can access to this variable from anywhere in your code, except if you declared it in a function. Function scope means you can access your variable just inside the function itself. 

`let` and `const` have block scope, that means you can access to them just in the block code they are declared. You can understand it better after analyzing this table:
![Comparison var, let, const](https://pbs.twimg.com/media/EeVw-DOXgAAMtKk?format=jpg&name=900x900)

I suggest you using `let` or `const` rather than `var`.

## Functions 
A function is a **block of code that perform a task**. They're useful when writing web apps since they make code more readable. As a JavaScript beginner, you have all you need to understand functions.

In general, every function in all programming languages have a name, arguments to input and a result to output. By the way, there're functions that don't need arguments to be invoked. 

The syntax of a JavaScript function is as follows:
```
function func_name(arg1, arg2, arg3){
     //code to be executed
}
```
Where:
- `function` is the reserved word to declare a function.
- `func_name` is your function name. You can name it however you want, but I recommend a name that makes sense to you.
- `arg1`, `arg2`, `arg3` are the function's arguments. You can require as many as you want (or zero).
- The line `//code to be executed` makes reference to the logics of your function.

Now let's see an example of a function that returns the addition of two numbers:
```
//Declaring the function
function esSuma(num1, num2){
     return num1 + num2
}

//Executing the function
let x = esSuma(3, 4)     //You assign the function to a variable
console.log(x)          //It prints 7
```
### Arrow Functions
A new way to declare functions is __arrow functions__. As you advance as a developer, you'll see that arrow functions are **easy to read** and, sometimes, more adequate than the normal ones.

This is the syntax of an arrow function.
```
const x = (arg1, arg2) => {
     //Code to be executed
}
```
I'll be explaining the use of arrow functions and normal functions in other post (coming soon).

## Scope
[Scope](https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript#:~:text=Scope%20in%20JavaScript%20refers%20to,declared%20inside%20of%20a%20block) in JavaScript is how accessible a variable is. There are basically two types: Local Scope and Global Scope.
### Local Scope 
You can access your variable just inside the block code or function it's declared. For example in a function:
```
//Here you can't access your y

function hola() {
     let y = 3
     console.log(y)
}

//Here you can't y
//y is considered to have function scope as well
```
In the same way, in a block code:
```
//Here you can't access x
{
     let x = 5
}

//Here you can't access x
```
Notice that I declared `x` using `let`. If I did the opposite, using `var` you could access the variable outside the block code. It turns out that `var` declares a global variable.

### Global Scope
In this case you can access your variable wherever in your code. For example:
```
let w = 9

{
     //Here you can access w
}
```
As you read before, if you declare a variable using `var`, you create a global variable.
```
var q = 1

//q is a global variable
```
## Arrays
Arrays are a type of variable developed to store multiple variables of multiple types. They're useful when you need to store many values related to a single variable.

For instance, imagine you're managing a group of people:
```
let people = ['Axel', 'Diego', 'Sofia', 'Valeria']
```
As you can see, the syntax of an array is:
```
let arrayName = [item1, item2, item3 ...]
```
You can modify arrays using [methods](https://www.w3schools.com/js/js_arrays.asp).
## Objects
Objects are representations of real life things into code. So an object has properties (its characteristics) and methods (things the object can do). Let's create an object called `axel`:
```
let axel = {
    height: 183,
    country: 'Ecuador',
    profession: 'Developer',
    returnInfo: function () {
        return this.height + ' ' + this.country + ' ' + 
        this.profession
    }
}
```
In this example, properties are `height`, `country` and `profession`. You can access them using dot (.) notation:
```
axel.country
//Expected output: 'Ecuador'

axel.profession
//Expected output: 'Developer'
```
On the other hand, `returnInfo` is an especial property that has a function as value. That's why it's a method. You can invoke this method:
```
axel.returnInfo()

//Expected output: '183 Ecuador Developer'
```
### Why did we use `this` while coding the element method?
`this` makes reference to the object itself. So we are considering `height`, `country` and `profession` of `axel`. It's an important word to take into account.

### Generating Object Templates
What if you have to create too many many objects of the same type? Creating 'manually' each of them is not efficient. So, to solve this problem you can use Object Templates.

Basically you create a function and, from this function, you create your objects.
```
function Usuario(height, country, profession) {
    this.height = height,
    this.country = country,
    this.profession = profession
    }
}
``` 
Now lets create an object using `Usuario`:
```
let juanito = new Usuario(176, 'Uruguay', 'Designer')
```
`juanito` is created and you can access its properties:
```
juanito.country
//Expected output: 'Uruguay'

```

These were some concepts you need to understand to make your **learning path more productive**. Basics of JavaScript are essential for every web developer.

If you're a JavaScript beginner and you think it's a lot of information, don't give up. You can master this and acquire more knowledge as time passes by. **I challenge you to become a JavaScript Ninja**. This is the beginning.

If you liked this post, **you can subscribe**. I'll continuously update blogs that may help you in your career as a developer.