DEV Community

Cover image for Concepts You Need to Know If You are a JavaScript Beginner
Axel Yaguana
Axel Yaguana

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can first declare the variable and then initialize it (with more than one line):

var x;  // Declaration
x = 5;  // Initialization
Enter fullscreen mode Exit fullscreen mode

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

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In the same way, in a block code:

//Here you can't access x
{
     let x = 5
}

//Here you can't access x
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

As you read before, if you declare a variable using var, you create a global variable.

var q = 1

//q is a global variable
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

As you can see, the syntax of an array is:

let arrayName = [item1, item2, item3 ...]
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

Now lets create an object using Usuario:

let juanito = new Usuario(176, 'Uruguay', 'Designer')
Enter fullscreen mode Exit fullscreen mode

juanito is created and you can access its properties:

juanito.country
//Expected output: 'Uruguay'

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (9)

Collapse
 
shyclown profile image
Roman Moravcik • Edited

Variable declared with "var" does not have global scope, it is function scoped.

// global scope was declared when you did not use var, I think nowdays you get error
x = 5; // global scope
var x = 5 // function scope
let, const x = 5 // block scoped

One more... thing since you touched the arrow functions and "this" I think you should explain the difference between arrow functions and normal functions.

Collapse
 
axlyaguana11 profile image
Axel Yaguana

Hi, Roman.

Yes, you're right. var has function scope, not global at all. When you declare var into curly braces you can access the variable outside the block code, and it could be misunderstood. But definitely, it's FUNCTION SCOPE.

I think I need another post to explain differences between arrow and normal funtions.

Thanks for your feedback. I really appreciate it.

Collapse
 
gturitto profile image
Giuseppe Turitto

Nice, simple article, these are the basic concepts that need to be understood by a beginner. Once these concepts are understood they need to understand Branch statements "conditional operator" vs "if" vs "switch/case", and Loop statements, "For" vs "While".

I will share this article with my mentees (a couple of them are real beginners).

Collapse
 
axlyaguana11 profile image
Axel Yaguana

Thanks, Giuseppe. ✌️

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
axlyaguana11 profile image
Axel Yaguana

Sure, it's ok. 👍🏽

Collapse
 
raq_dev profile image
RAQ DEV

Well explained, easy to understand. I love it.
I'm a real begginer in js. Thanksnso much for this post.

Collapse
 
burgercousin profile image
Pentium_4

simple and thx

Collapse
 
axlyaguana11 profile image
Axel Yaguana

✌️