A JavaScript Refresher Tutorial: Basics

Introduction

Whether you’re preparing for your next JavaScript interview, or just trying to restore your JavaScript knowledge for some reason. This JavaScript refresher tutorial is for you.

In this first part of the tutorial, we’re going over the fundamental basics and building blocks of JavaScript.

But…Before, we jump into more details, let me tell you something…This tutorial makes part of my FREE FOREVER online course, “Learn JavaScript from Scratch”. It teaches you JavaScript from the basics to more advanced topics…You can continue reading this blog post to get a general overview then you might come back here to take the course and continue your journey. That’s cool, isn’t it?

Learn JavaScript from Scratch for FREE

This course will teach you modern core JavaScript from the basic fundamentals to advanced topics. It is intended to make you learn JavaScript from scratch apart from its use for frontend/backend development or whatever. It aims mainly to give you an opportunity to build a solid foundation to become a better JavaScript developer no matter

Comments in JavaScript

To enhance the readability of your programs, you need to use comments in your code. Comments in programming are a sort of description you add to your code that allows humans to better understand it. Therefore, the tasks of maintaining and debugging the source code would be easier for them.

Comments in JavaScript are ignored by the interpreter. There are two types of comments you can add to your code: single-line comments and multi-line comments.

Single-line Comments

You can use a single-line comment to comment out an entire line. Use two forward slashes // to begin commenting.

// I am a signle-line comment...Who are you?
console.log("Hi! it's me");  // I am another single-line comment...

Note that any text there is between the two forward slashes // and the end of the line is going to be ignored (Not executed). Additionally, you can also use a single-line comment to comment after a line of code.

Multi-line Comments

On the other hand, you can use a multi-line comment to comment out a large text description on multiple lines. Use /* to begin the comment, and */ to end it.

/*
Line one...
Line two...
Line three...
You can add as much as you want here...
..
.
*/

Still, whatever lives between /* and */ is not executed.

Data Types in JavaScript

Every programming language out there has its own classification of the different kinds of data we can use in programming. In JavaScript, there are seven (07) primitive data types and objects.

Primitive Data Types

Primitives are the most basic in-built structures. In fact, they are represented at the lowest level of JavaScript implementation. Moreover, they are not objects. Thus, they don’t have methods or properties.

Primitive data are immutable which means that they cannot be changed. However, make sure to not confuse a primitive itself with a variable assigned a primitive value ( A variable could be reassigned to a new value).

The seven primitive data types in JavaScript are:

string
number
bigint
boolean
symbol
undefined
null

// string: a sequence of characters representing a text - surrounded by single (') or double (") quotes
console.log("I am a text");
console.log('I am another text');

// number: any number, including numbers with decimals - occupies 64 bits in computer memory
console.log(2022);
console.log(12.04);

// bigint: any large number. it exceeds the safe integer limit for numbers (Number.MAX_SAFE_INTEGER)
// created by appending n at the end of the number
console.log(90071992547409910n);

// boolean: a logical data type that can evaluate to "true" or "false"
console.log(1 === 2); //output: false
console.log(typeof(true)); //output: 'boolean'

// symbol: unique identifiers
console.log(Symbol('a') === Symbol('a')); //output: false - even though the two symbols are created with th same string 'a'

// undefined: it is assigned automatically when a variable is declared and not assigned a value
var foo;
console.log(foo); // output: undefined

// null: can be explicitly assigned to a vriable to represet 'no value'
var bar = null;
console.log(bar); // output: null

Objects

Objects, on the other hand, can be seen as a collection of properties. In other words, an object in JavaScript is a collection of key-value pairs. You can set a property value to any type of data (Primitive or even objects). Indeed, this allows you to create more complex data structures.

var person = {
  'name' : 'AB',
  'familyName': 'CD',
  'age': 34,
  'contact': {
    phoneNum: '0660000000',
    address: 'Random Street, 11/90, Hassi Bahbah - Djelfa, Algeria'
  }
}

In this example, “person” represents an object. ‘name’: ‘AB’ represents a key-value pair where “name” is the key (property) and “AB” is the value set to it.

You know what?

Except some of the above mentioned primitives, almost everything else in JavaScript is an object!
fun-fact

JavaScript has got many standard ready-to-use built-in objects. You can find an exhaustive list of them here. Moreover, objects are also at the core of the object-oriented programming paradigm, so if you want to know more about that, there will be an entire tutorial dedicated to that in the future. Just stay tuned!

Operators in JavaScript

In this section, we’re going to have a look at the most common operators in JavaScript. So, we’ll see the most common arithmetic operators, comparison operators, logical operators, and assignment operators. However, you can see the full list of operators in JavaScript on the MDN documentation.

Arithmetic Operators

Arithmetic operators allow you to perform certain arithmetic operations on operands. The main arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).

// Addition
console.log(2 + 1); // output: 4
// other operators can be used in the same way

Another useful arithmetic operator is the modulo operator (%). In fact, it returns the integer remainder of dividing two operands.

 // Modulo
console.log(10 % 3); // output : 1

You can also use the increment operator (++) to add one and the decrement operator (--) to substruct one to an operand.

var num = 10;

// increment
num++;
console.log(num); //output: 11

// the decrement operator is used in the same way

Comparison Operators

Comparison operators allow you to compare operands and return a logical value (true or false). The main comparison operators are: equal (==), not equal (!=), greater than (>), greater than or equal (>=), lesser than (<), lesser than or equal (<=).

// equal
console.log(3 == 3); //output: true

// In the same way for th other comparison operators...

Sometimes, you’re meant to use strict equal (===) or strict not equal (!==) to check equality on both the values and the type of values.

console.log( 3 == '3'); // output: true - JavaScript does implicitly a type conversion to peform th comparison
console.log( 3 === '3'); // output: false - no type conversion is done on strict equality.

Logical Operators

Logical operators are mainly used with boolean values, and return a boolean value. There are three types of logical operators:

Logical AND (&&): returns true if both operands evaluate to true. Return false otherwise.
Logical OR (||): returns true if either operand evaluates to true. Return false otherwise.
Logical AND (!): returns true if its single operand evaluates to false. Return false otherwise.

var a = true, b = false;
console.log(a && b); // output: false
console.log(a || b); // output: true
console.log(!b); // output: true

Assignment Operators

We’ve been using the assignment operator in its most basic form (=) in our previous examples. This operator allows you to assign the value of its right operand to its left operand. Yet, the most basic form of the assignment operator can be combined with arithmetic (or logical) operators to give compound operators as in the following example

var a = 1; // simple assignment
a += 4; // same as: a = a + 4;
console.log(a); // output: 5

Variables in JavaScript

A variable in programming is a sort of container for data. In fact, these containers live somewhere in the computer’s memory. Therefore, for our programs to access them and for readers to understand them, they are usually labelled with descriptive names.

Creating Variables

In some previous example codes, we’ve already used one way of creating a variable in JavaScript. Indeed, we’ve used the keyword var. Nevertheless, there are two other different ways to create variables in JavaScript using the keywords let and const.

Before the release of the ES6 version of JavaScript, we were meant to declare variables in this way

var myRandomVariable = 123;

Where var is the keyword used to create the variable, myRandomVariable is the name of the variable, = is the assignment operator, and 123 is the assigned value.

Note that,

Variable names cannot start with a number.
Variable names are case-sensitive.
Variable names cannot be the same as JavaScript keywords.

In 2015, ES6 introduced two other ways of creating variables in JavaScript: using let and const keywords.

let canBeChanged = "123";
const cannotBeChanged = true;

canBeChanged = "456";
console.log(canBeChanged); // output : "456"

cannotBeChanged = false; // Uncaught TypeError: Assignment to constant variable.

When you use let to create your variable, you’re signalling to JavaScript that it can be changed (reassigned) along the time. Contradictorily, when you use the const keyword, the variable cannot be changed. Therefore, JavaScript throw an error on line 7 telling us that we couldn’t assign a new value to the variable cannotBeChanged.

Variable Hoisting in JavaScript

I want you to have a look at the following example code

console.log(foo); // output: undefined
var foo = 123;

Note that we’re using the variable foo even before it’s declared. How’s this possible? This is due to the concept of hoisting.

Hoisting in JavaScript refers to moving all variable declarations with the var keyword to the top of the current execution context and assigning undefined to them by default. Additionally, it refers also to moving all variable declarations with the keywords let and const to the top of the current block instead without initializing them with any value. You have to note that the beginning of a current block is defined by the nearest opening curly bracket ({), and its end by the nearest closing curly bracket (}).

Now, let’s tweak the above example a little bit

console.log(foo); // output: Uncaught ReferenceError: Cannot access 'foo' before initialization
let foo = 123;

Because we are declaring the foo variable with the let keyword, we’re not allowed to use it before its initialization (Despite the fact that it has been hoisted as well).

Control Statements in JavaScript

Control statements allow you to control the flow of your program. In fact, there’re two types of control statements in JavaScript: Conditional and Iterative.

Conditional Statements

You can use conditional statements to allow your program to execute a certain action according to the truthfulness of a given condition. There’re multiple conditional statements in JavaScript.

“if statement”: executes the block of code if the given condition is truthy (evaluates to true).
“if…else statement”: executes the else block of code if the given condition is falsy (evaluates to false)
“else if statement”: starts a new test if the previous condition is false.
“switch statement”: the value of the evaluation of the switch expression is compared to a series of case statements. Then, the block of code of the first successful match will be executed.

if/if..else/else if Statements Example

Let’s have a look at the following example,

// if...else 
const age = 20;
if(age >= 18){ // This block is going to be executed since 20 >= 18 evaluates to true
  console.log("You're allowed.");
}else {
  console.log("Sorry! You're not allowed.");
}

// else if 
const grade = "C";
if(grade === "A"){
  console.log("You're doing great");
}else if(grade === "B"){
  console.log("You're doing not bad");
}else if(grade === "C"){ // This block is executed since it evaluates to true
  console.log("You can do better");
}else {
  console.log("can't tell");
}

Switch Statement Example

In the above code, we can rewrite the else if example using a switch statement. Let’s do it…

// switch statement
const grade = "C";
switch (grade){
    case "A":
    	console.log("You're doing great");
    	break;
    case "B":
    	 console.log("You're doing not bad");
    	break;
    case "C": // this block is going to be executed since it matches the evaluation of the switch expression
    	console.log("You can do better");
    	break;
    default: // in case there's no match the default block is executed
    	console.log("Can't tell");
    	break;
}

Note that in a switch statement a strict comparison between the switch statement evaluation and the cases values is made.

The Conditional Ternary Operator

Once more, we could make the if…else statement in the first example above a more concise version. Indeed, we could have used the conditional ternary operator instead.

// conditional ternary operator
const age = 20;
console.log(age>=18 ? "You're allowed." : "Sorry! You're not allowed."); // output: "You're a

As you might have already noticed, the conditional ternary operator takes in three operands: a given condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and then finally an expression to execute if the condition is falsy. In the example above, “You’re allowed.” is going to be printed to the console since the condition is fulfilled.

Iterative Statements: Loops

As a programmer, you might need to use loops in your programs to repeat an operation over and over again. So, a loop is a programming tool that repeats a block of code until a specific condition (often called a stopping condition) is met.

In JavaScript, there’re different types of looping statements.

for statement: repeats until the stopping condition evaluates to false.
while statement: repeats as long as the condition is truthy.
do…while statement: the block of code executes at least once no matter before repeating it and testing over the condition.
for…in statement: iterates over all the properties of an object.
for…of statement: iterates over all the values of an iterable object.

To better understand how to use each one of these looping statements, let’s have some examples…

for/ while Statements Example

// Objective: Want to print numbers from 0 to 10 to the console.

// First solution: using a for loop
for (let i = 0 /*initial expresion*/; i <= 10/*condition*/; i++/*increment expresion*/){
  console.log(i);
}

// Second solution: using a while loop
let j=0;
while(j <= 10){
  console.log(j);
  j++;
}

In the above example, our objective is to print numbers from 0 to 10 to the console. In the first solution, we’re using a for loop that is going to repeat logging the value of “i” until the stopping condition “i <= 10” evaluates to false. Note that the for loop defines two elements: the initial expression which is the starting point and the increment expression which prepares for the next iteration.

In the second solution, we’re using a while loop to solve the problem. We’re, first, declaring a variable “j” initializing it with the value “0”. Then, setting a condition “j <= 10” for our while loop. Inside the while loop, we’re incrementing the value of “j” to prepare the next iteration. We won’t stop iterating until “J > 10”.

If you try both solutions on your end, you’ll see that numbers from 0 to 10 will be printed to the console.

do…while Statement Example

Sometimes, in certain scenarios, you would like your program to run a specific code once before looping. In this case, you would use a do…while statement.

// Objective: Whistle once first, then clap five times after!

// Solution: using a do...while loop
let i=0;
do{
  if(i===0){
    console.log("Whistle");
  }else{
    console.log("Clap!");
  }
  i++;
}while(i<=5)

In the example above, we wanted to write a code to “Whistle once first, then clap five times after!” ( I know seems to be ridiculous as an example, but bear with me for a while 😉 ). So, to achieve that, we used a do…while statement. Indeed, It runs the block of code once and checks if “i===0”. If it does it will print “Whistle”, then go over testing the condition and running the block of code 5 other times ( Printing “Clap!”) since “i” gets incremented at each iteration.

for…in/ for…of Statements Example

Now, it’s time to see the last two statements, the for…in and the for…of statement. Have a look at the following example,

// Objective: list all the object's properties and their values.
const person = {
  name:'AB',
  age: '34',
  country: 'Algeria'
}

// Solution: using for...in loop
for (const key in person){
  console.log(key + ' : ' + person[key]);
}

// Question: is it possible to use the for...of statement instead?

In order to list all the properties and their values of the person object, we used the for…in loop to iterate over all the keys. At each iteration, we printed the key-value pair.

The question now is: is it possible to use the for…of statement instead?

The answer is: no. Indeed, the for…of statement can be used only on iterable objects which are generally arrays and all their variants.

// Objective: list all the colors in the array "colors"
const colors = ['Black','White','Blue','Green','Red'];

// Solution: using a for...of statement
for( const color of colors){
  console.log(color);
}

In this example, we’re listing all the colours in the array “colors”. In fact, since “colors” is an array which means it’s basically an iterable object, we used the for…of statement to loop over it and print the color at each iteration.

Functions in JavaScript

Functions are one of the essential building blocks that every programmer should know how to use them. Indeed, a function is a chunk of reusable code that can be used over and over again. Moreover, using functions allows you to decompose complex problems into smaller bits for better maintainability and error debugging.

In JavaScript, there’re three ways to define a function,

Function declaration
Function expressions
Arrow functions

Let’s see each one of them one by one…

Function Declarations

Functions declarations, also known as function definitions, are set using the keyword “function” followed by the name of the function and a list of parameters enclosed in parentheses (). For example,

// function declaration
function sayMyName(name){
  console.log(name);
}

//invoking the function
sayMyName("AB");
sayMyName("CD");
sayMyName("EF");

Note that to invoke the function, you have to use the name of it and we pass the arguments enclosed in parentheses. Furthermore, you can call the function as much as you want.

Function declarations, as we’ve already seen with variables, are also hoisted.
Info

Function Expressions

In the same way, function expressions use the keyword “function“. However, the name of the function is omitted in this case. In fact, If we omit the name of the function, then it becomes an anonymous function.

Let’s replicate the same above example using function expressions instead.

// function expession
const sayMyName = function (name){
  console.log(name);
}

//invoking the function
sayMyName("AB");
sayMyName("CD");
sayMyName("EF");

Now, you might ask yourself, why would you use function expressions?

Actually, one of the most useful cases to use a function expression is when you need to pass a function as a callback. Let’s see the following example to illustrate this…

// function expession
const sayMyName = function (name){
  console.log(name);
}

// function declaration: taking an array of some people' names and the a callback to  say their names
function saySomePeopleNames(people, cb){
  for(const person of people){
    cb(person);
  }
}

const ppl = ['AB', 'CD', 'EF'];
// invoking the function
saySomePeopleNames(ppl, sayMyName);

Running the above code would print the names in the “ppl” array. This is due to the fact of passing sayMyName function expression as an argument to be called back, then invoking it in line 9 at each iteration over the “ppl” array.

Arrow functions

Arrow functions, on the other hand, are a shorter version of function expressions. However, they defer from them in two main ways: they are always anonymous, and they don’t have their own binding to this.

// function expession
const sayMyName =  (name) =>  console.log(name);

//invoking the function
sayMyName("AB");
sayMyName("CD");
sayMyName("EF");

Using an arrow function, we were able to write the same function sayMyName in just one line of code. Note that we’re not using curly brackets because we have got only one instruction in the body of the function.

Scope in JavaScript

The scope is another important concept in programming. In JavaScript, scope refers to the visibility (accessibility) of variables and functions in certain parts of the code.

There are three different types of scopes in JavaScript: block scope, function( a.k.a local) scope, and global scope.

Let’s have a look at the following example…

// global variables
var a = 1;
let b = 2;
const c = 3;
//----------

function foo(){
	if(1){ // always true
      console.log(a);
    }
  console.log(b);
}

function bar(){
	foo();
}
console.log(c); // output: 1
bar(); // output: 1 2

From the above example, we can say that variables a,b, and c are globally scoped. We’re defining them at the very top level and accessing them from anywhere. Moreover, functions foo() and bar() are defined globally. So, we were able to access them from anywhere.

When a variable or a function is visible everywhere (globally), we’re talking about the global scope.

Now let’s move and look at the following example,

function foo(){
  //local variable
  var a = 'a';
  
  function bar(){
    console.log('Hi!');
  }
  
  if(1){ // always true
    console.log(a);
  }
  bar();
}

foo(); // output: a Hi!
console.log(a); // Uncaught ReferenceError: a is not defined

From line 15, we could say that the variable a and the function bar() are accessible within the function scope. However, from line 16, we can conduct that they’re only visible within the function and not outside it.

When a variable or a function is accessible only within the scope of the function, we’re talking about the local scope.

Now, let’s see this example,

function foo(){
  
  if(1){ // always true
    // block scoped variables
    let a = 1;
    var b = 2;
    console.log(a);
    console.log(b);
  }
  
  console.log(b);
  console.log(a);
}

foo();
/* output :
1
2
2
Uncaught ReferenceError: a is not defined
*/

The output after invoking the function foo() on line 14 proves that the variable a is accessible only within the current block (if block in this case) which is defined by the nearest opening curly bracket { and the nearest closing curly bracket }.

When a variable is defined with the keywords let or const, it’s accessible only within the current block. So, in this case, we’re talking about the block scope.

But, how comes that the variable b is declared within the if block at the same level as variable a, yet it’s still accessible outside it?

Do you remember? Because of the mechanism of hoisting, variables declared using the var keyword are moved to the top of the current execution context scope, which is in this case the function scope. Therefore, variable b is available everywhere within the function.

Conclusion

Here we are at the end of the first part of this JavaScript refresher tutorial. We’ve seen the most essential basics of JavaScript in this blog post from how to add comments to your code, to how to use the different main structures of JavaScript. We’ve also had a good grasp of some crucial concepts like scope and hoisting.

In the next parts of this tutorial, we will try to dig deeper and see some advanced JavaScript.

If you have any questions, please, use the comments section below.

Enjoy 🙂

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

A JavaScript Refresher Tutorial: Basics

Introduction

Learn JavaScript from Scratch for FREE

Comments in JavaScript

Single-line Comments

Multi-line Comments

Data Types in JavaScript

Primitive Data Types

Objects

Operators in JavaScript

Arithmetic Operators

Comparison Operators

Logical Operators

Assignment Operators

Variables in JavaScript

Creating Variables

Variable Hoisting in JavaScript

Control Statements in JavaScript

Conditional Statements

if/if..else/else if Statements Example

Switch Statement Example

The Conditional Ternary Operator

Iterative Statements: Loops

for/ while Statements Example

do…while Statement Example

for…in/ for…of Statements Example

Functions in JavaScript

Function Declarations

Function Expressions

Arrow functions

Scope in JavaScript

Conclusion

Related

Data Structures and Algorithms Free Course

Learn JavaScript from Scratch for FREE

Leave a ReplyCancel Reply