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.
Top comments (9)
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.
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.
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).
Thanks, Giuseppe. ✌️
Sure, it's ok. 👍🏽
Well explained, easy to understand. I love it.
I'm a real begginer in js. Thanksnso much for this post.
simple and thx
✌️