Javascript concepts you must know as a beginner #1
Tags: javascript, webdev, beginners, programming
Published: 2022-07-19 12:58:01

Here we are going to learn some Javascript concepts that I think all Juniors must know before thinking about upgrading their skills and learning more complex stuff, if you dominate this ones, you'll sure ready to go on.

---

Index

- Var, let and const
- Values VS References (primitive and objects)
- Conditionals

---

### Var, let and const

Simply put, these are ways to define the behavior and the scope of a variable. `Var` was the usual way to declare a variable, `let` and `const` came after and they are the standard way nowadays. 

The problem with `var` is that you can access that variable almost inside every part of your app, and sometimes that lack of limits is unwanted, could take you to rare situations to debug. So it's not recommended.

The `let` keyword is used to declare a variable that can change its content anytime, i.e.:

```javascript
let name = 'Will';
console.log(name) // 'Will'
name = 'Mike'
console.log(name) // 'Mike'
```

The `const` keyword is more strict in that sense, you can't change the value of this one, except some cases like with an array and a plain object that may seem that you can add things to this arrays and new properties to the objects and it shouldn't happen, it's not really what's happening. `const` is to prevent further assignments but in some cases you are allowed to change the contents of it.

```javascript
const price = 100
// trying to assign another value to it
price = 200
// Will throw: Uncaught TypeError: invalid assignment to const 'price'
```

This error will not happen to the contents of objects like arrays and plain objects, you can change their content. Understanding why and how to prevent this to happen is beyond the scope if this post.

Last things good to know about:

- The `let` and `const` variables has a scope.
- They can be declared with the same name inside another scope.

---



### Values VS References

If you know that there are primitives and object types, you have to know that primitives are passed by value while objects are passed by reference.



**By value**

This means that when a primitive has a value, and if you assign that value to another primitive, they will have copies of each other, totally disconnected, remember the 'disconnected' thing. When I mean 'a copy' I'm saying that in memory, where all our data is saved, will exist different places with the information, even if it's the same.

Even if we try to make like a copy of `one`, it will be unaffected by the changes made to `otherNumber`:

```javascript
let one = 1;
let otherNumber = one;

// Sum some quantity to the otherNumber variable:
otherNumber = otherNumber + 10;

// Logging the contents:
console.log(one); // 1
console.log(otherNumber); // 11
```



**By reference**

We will see now that non primitives like objects and arrays is the exact opposite in a way. When you assign values to an object, make 'a copy' and modify the original object, you will see the changes in the new copy:

```javascript
let person = { name: 'Dustin' };
let newPerson = person;
// Changing the first object:
person.pet = 'Demogorgon';
// Logging the newPerson object:
console.log(newPerson); // { name: 'Dustin', pet: 'Demogorgon'}
```

Variables in Javascript hold 'values' that are references on memory for everything that is a non primitive. It's useful to re-read the last sentence, and if it doesn't make sense yet, I promise it will do if you dig into it by yourself.

**Tip**: You have to remember this differences when comparing things, even if you compare two exact equal arrays with the same content, know that Javascript will not compare by default their values but their reference values, and they will be different. For comparing the values of arrays and objects, I encourage you to investigate further.

---

### Conditionals

It's useful to have a way to make decisions in certain scenarios. Conditionals are ways to create reactions to some logical comparison that evaluate to `true  ` or `false` values.

The simple if statement:

```javascript
// Ask the user his/her age and save it to the 'age' variable
let age = prompt('How old are you?')

// Make a conditional check:
if (age > 30) { 
	alert('You can be a part of the group!');
}
```

This means that if the variable `age` is greater than the number 30, this condition evaluates to `true`, so it executes the block of code contained in curly braces. If not, the entire block is ignored.

**Tip**: It's nice to understand that every value in Javascript has a `falsy` and `truthy` values, and it could be used in your favor:

```javascript
let zero = 0;
let one = 1;

if (zero) {... // '0' is falsy

if (one) {... // '1' resolves to truthy
```

What if we want more conditions to be evaluated? We can do it with an **else** clause:

```javascript
if (year === '2020') {
	alert('That was two years from now');
} else {
	alert('The year value is not 2020');
}
```

In the above example, we assume that if the value assigned to `year` is '2020', the first block of code will be executed. In other cases, the second code block is like a fallback action for the failed first comparison.

More cases to check?

```javascript
if (age < 18) {
	alert('You are not allowed to drive');
} else if (age <= 21) {
	alert('You may get a license to drive');
} else if (age <= 30 ) {
	alert('You can drive and enter to a bar');
} else {
	alert('You are more that thirty years old')
}
```

Another nice way to check things is with the **ternary** expression:

```javascript
let isAllowedMessage = age > 21 ? 'You are allowed' : 'You need to be 21 or older'
```

if `age > 21` evaluates to `true` then the part after the '?' is returned. If it's `false` then the part after the colon will be returned. A nice way to make a simple conditional check. Be careful about this simplifications, seek for code readability always.

When if else chain may get out of control with a lot of conditions, a `switch statement` could be use for better readability, go and learn about different ways to check conditions, you will be using them everyday at work.

---

Thanks a lot for reading so far, this things will help you becoming a more robust developer. Always try to understand the basics of anything you want to learn. Strong fundamentals facilitates complex concepts to be understood easily.

If you want to recommend this post to a friend or coworker that you think could help, I'll be happy to help!

**Let me know what you think in the comments!**