Javascript concepts you must know as a beginner #1

#javascript #webdev #beginners #programming

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

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.

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:

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:

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:

// 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:

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:

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?

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:

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!