Concepts You Need to Know If You are a JavaScript Beginner

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:

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

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.