DEV Community: Badreddine Boudaoud

JavaScript Execution Context & Hoisting

Badreddine Boudaoud — Wed, 22 Nov 2023 15:29:50 +0000

Whether you’ve just started learning JavaScript or have some experience, you might have, at least once, searched for how JavaScript works behind the scenes. If so, you might have come across terms like “execution context” and “hoisting,” two topics that are closely related to each other.
Today, you’ll grasp both of them through the most straightforward explanations you’ll ever encounter.

Introduction

JavaScript is an interpreted, single-threaded language that processes one command at a time. To understand how JavaScript scripts are executed, it’s essential to comprehend the concept of execution context and hoisting.

Execution Context

The execution context is the environment created when running JavaScript code. There are two types of execution contexts: Global execution context and function execution context. The global execution context represents the global scope, it’s created when JavaScript first runs. The function execution context is created whenever a function is called.

Execution Context Phases

1. Creation Phase

During this phase, the global object is created, the this keyword is generated and linked to the global object, and functions and variables are allocated memory and stored (variables are set to undefined).

2. Execution Phase

In this phase, the code is executed line by line, and a new execution context is created whenever a function is called.

Let’s understand it with an example.

var x = 3;
function getSquare(n) {
   var square = n ** 2;
   return square;
}
var theSquare = getSquare(x);

console.log(theSquare);

Creation Phase:

Line 1: Allocates memory for the variable x and initializes it with the value undefined.

Line 2: Allocates memory for the function getSquare() and stores the entire code within it.

Line 6: Allocates memory for the variable theSqureand and initializes it with undefined.

Execution Phase:

Line 1: Sets the variable xto the value 3.
Line 2: Skips the function getSquare() as there is nothing to execute.
Line 6: Initiates a new execution context (function execution context) as the function is called.
Creation Phase (function execution context):

Line 2: Allocates memory for the variable nand initializes it with undefined.
Line 3: Allocates memory for the variable square and initializes
it with undefined.
Execution Phase (function execution context):
Line 2: Assigns 3 to the variable n.
Line 3: Calculates and assigns the result to the variable square.
Line 4: Returns to the global execution context.

Line 6: Assigns the returned value of squareinto the variable theSqure.

Now if we console log the output(line8) we will get the following:

What if we console log the output before all the code?

console.log(theSquare);

var x = 3;
function getSquare(n) {
   var square = n ** 2;
   return square;
}
var theSquare = getSquare(x);

The output is undefined

You might wonder why the default value for variables is set to undefined. This is a result of the creation phase during the execution context, as discussed earlier. In this phase, variables, including theSqure, are allocated memory with an initial value of undefined.

Similarly, if you attempt to console log the variable x before its initialization, you will also get undefined.

console.log(x);
var x = 3;

Understanding the execution context and its creation phase simplifies grasping the concept of hoisting.

Hoisting

Hoisting is frequently described as the interpreter moving variable and function declarations to the top of their scope before code execution. However, now that you understand the creation phase of the execution context, you realize that this explanation is a simplification to help conceptualize the behavior.

Example1

Variable hoisting

console.log(x);
var x = 2;
console.log(x);

In this example, even though we console log before the variable x is declared and assigned a value, it doesn’t result in an error. Because of hoisting the variable x in the first console log outputs undefined (Allocates memory for the variable x and initializes it with the value undefined).

Example2

Function hoisting

console.log(getCube(2));

function getCube(x) {
   return x ** 3;
}
console.log(getCube(2));

Here, the function getCube() is called before its declaration in the code. Because of hoisting the entire function gets stored(Allocates memory for the function getCube() and stores the entire code within it.), allowing it to be invoked before its actual placement in the code.

It’s crucial to distinguish between function declaration and function expression.

console.log(getCube(2));

var getCube = (x) => {
   return x ** 3;
};
console.log(getCube(2));

In the code, getCube() is invoked before it is declared. Due to hoisting, the variable declaration(var getCube)is hoisted, but the function definition ((x) => { return x ** 3; })is not. So, when the first console log is encountered, getCube() is still undefinedat that point, and trying to invoke it as a function will result in a TypeError.

At this juncture, you may notice that we opted for using varfor variable declarations instead of let or const. Why this decision? Simply put, it's to enhance comprehension of the example. While let and constare block-scoped and also hoisted, variables declared with them are not accessible before initialization—unlike variables declared with var, which are hoisted and stored in memory as undefined during the creation phase of the execution context.

The rationale behind the inaccessibility of variables declared with let and const before initialization lies in what is known as the Temporal Dead Zone (TDZ).

Temporal dead zone (TDZ) is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value

A simple diagram to illustrate the difference between the var and let lifecycles

Conclusion

Whether you’re just starting out with JavaScript or have considerable experience, a thorough understanding of execution context and hoisting is paramount. Delving into the mechanics of how JavaScript functions behind the scenes not only enhances your workflow but also becomes a valuable time-saving skill.

JavaScript ‘this’ keyword’s binding rules

Badreddine Boudaoud — Sun, 17 Sep 2023 22:37:03 +0000

The ‘this’ keyword in JavaScript can be perplexing for many developers, and I, too, struggled with it for quite some time. If you’re one of those developers eager to grasp how ‘this’ works, you’re in the right place. By the end of this article, you’ll have a clear understanding of ‘this’. So, let’s get started!

Introduction

What is the ‘this’ keyword in JavaScript?

In JavaScript, the ‘this’ keyword refers to the object being executed in the current context, in other words, The ‘this’ keyword refers to different objects depending on how it is used.

What does the ‘this’ keyword allow you to do?

The ‘this’ keyword allows you to reuse functions with different contexts. In other words, it enables you to determine or specify which object should be the focus of the context when invoking a function or a method. For example, when you have multiple objects with the same properties and a single function, ‘this’ allows that function to work with all of your objects.

Binding rules

1. Global object binding

A. ‘this’ In the global context

If the ‘this’ keyword is not inside a function or an object, it refers to the window(global) object.

Example:

console.log(this);
console.log(this === window);
window.firstName = "Badreddine";
console.log(this.firstName);

As mentioned earlier, in the global context, ‘this’ refers to the window(global) object. In the example above, the first line logs the window object, and the second line logs true.

To illustrate further, we create a variable “firstName” on the window object and assign it the value “Badreddine”. Since ‘this’ refers to the window (global) object, the fourth line will log the value “Badreddine”, which is the value of the “firstName” property on the global (window) object.

Output:

And it’s the same output whether it’s in strict mode or default mode.

B. ‘this’ in a regular function

‘this’ inside a regular function, when ‘this’ is used without any specific context, it still refers to the window object.

Example1:

function regularFunction() {
    console.log(this);
}

regularFunction();

Output:

In strict mode, ‘this’ in a regular function is undefined.

Example2:

"use strict";
function regularFunction() {
    console.log(this);
}

regularFunction();

Output:

Example3:

var firstName = "Badreddine";
function regularFunction() {
   const firstName = "Badr";
   console.log(firstName);
   console.log(this.firstName);
}

regularFunction();

In the example above we declare two variables with the same name, one inside the function and another one outside, what would be the output?

Output:

The first log (fourth line) will output “Badr”. However, the second log (fifth line) will output “Badreddine”, and that’s because ‘this’ in regular function refers to the window(global) object as we said earlier.

Just one thing to add: if the outside “firstName” variable was declared with let or const, the output would be undefined, as shown below.

Example4:

const firstName = "Badreddine";
function regularFunction() {
   const firstName = "Badr";
   console.log(firstName);
   console.log(this.firstName);
}

regularFunction();

Output:

And that’s because variables declared with var are added as properties of the global (window) object, unlike variables declared with let and const, which are not.

2. Implicit Binding

Implicit binding occurs when you invoke a function using dot notation, in those cases, we need to check the object adjacent to the method at invocation time. In simple words look at the function invocation, the object on its left is what ‘this’ refers to.

Example1:

const infos = {
   firstName: "Badreddine",
   job: "Frontend Developer",
   msg() {
      console.log(`Hi my name is ${this.firstName}, I'm a ${this.job}`);
   },
};

infos.msg();

In the example above we create an object “infos” with two properties and one method, then we invoke the “msg” method using infos.msg().

Output:

The output is as expected, ‘this’ refers to the object on the left of the function invocation(“infos”).

Example2:

function infosMsg(obj) {
   obj.msg = function () {
      console.log(`Hi, my name is ${this.name}, I'm a ${this.job}`);
   };
}

const badreddine = {
   name: "Badreddine",
   job: "Frontend Developer",
};

const ali = {
   name: "Ali",
   job: "Backend Developer",
};

infosMsg(badreddine);
infosMsg(ali);

badreddine.msg();
ali.msg();

In the example above we create a function “infoMsg” that takes one parameter, “obj”. Inside the function, we add a new method called “msg” to the “obj” parameter.

Then, we create two objects, “badreddine” and “ali”, and called the “infoMsg” function for both objects.

Finally, we invoke the “msg” method on both objects.

Output:

The output is as expected: when the method is called with the “badreddine object, ‘this’ refers to the “badreddine” object, and when it’s called with the “ali” object, it refers to the “ali” object.

3. Explicit Binding

Explicit binding occurs when we use call(), apply(), and bind() methods on a function. It’s called explicit because we explicitly specify the value of ‘this’.

The three methods are predefined JavaScript methods used to control the value of ‘this’, and they can accept additional arguments alongside the context(value of ‘this’) as the first argument.

A. call() method

The call() method can take ‘this’ as the first argument, followed by an unlimited number of arguments.

Example:

const infos = function (techOne, techTwo, techThre) {
   console.log(
      `Hi, my name is ${this.name}, I'm a ${this.job}, I use ${techOne}, ${techTwo} and ${techThre}`
   );
};

const me = {
   name: "Badreddine",
   job: "Frontend Developer",
};

const technologies = ["React", "TypeScript", "Tailwind"];

infos.call(me, technologies[0], technologies[1], technologies[2]);

In the example above we create a function “infos” which takes parameters, an object “me” and an array “technologies”.

We use the call() method on the “infos” function to invoke it. The call() method takes the “me” object as its first argument, which sets the value of ‘this’ inside the “infos” function to the “me” object. The subsequent arguments (technologies[0], technologies[1], and technologies[2]) are passed as arguments to the “infos” function.

Inside the “infos” function, “this.name” and “this.job” now refer to the properties of the “me” object

Output:

B. apply() method

The apply() method can take a ‘this’ argument followed by an array of unlimited elements.

The difference between call() and apply() methods is how arguments are passed to the function. call() accepts arguments as individual parameters, while apply() accepts arguments as an array.

Example:

const infos = function (techOne, techTwo, techThre) {
   console.log(
      `Hi, my name is ${this.name}, I'm a ${this.job}, I use ${techOne}, ${techTwo} and ${techThre}`
   );
};

const me = {
   name: "Badreddine",
   job: "Frontend Developer",
};

const technologies = ["React", "TypeScript", "Tailwind"];

infos.apply(me, technologies);

In the example above we create a function “infos” which takes parameters, an object “me” and an array “technologies”.

We use the apply() method on the “infos” function to invoke it. The apply() method takes “me” object as its first argument, which sets the value of ‘this’ inside the “infos” function to the “me” object. The second argument (technologies) is an array that will be spread as arguments to the “infos” function.

Inside the “infos” function, “this.name” and “this.job” now refer to the properties of the ‘me’ object.

Output:

C. bind() method

The bind() method can take ‘this’ as the first argument, followed by an unlimited number of arguments.

The difference between call() and bind(), is that call() immediately invokes the function, while bind() returns a new function which you can call it later.

Example:

const infos = function (techOne, techTwo, techThre) {
   console.log(
      `Hi, my name is ${this.name}, I'm a ${this.job}, I use ${techOne}, ${techTwo} and ${techThre}`
   );
};

const me = {
   name: "Badreddine",
   job: "Frontend Developer",
};

const technologies = ["React", "TypeScript", "Tailwind"];

const newFunc = infos.bind(me, technologies[0], technologies[1], technologies[2]);
newFunc();

In the example above we create a function “infos” which takes parameters, an object “me” and an array “technologies”.

Then we create a new function “newFunc” and initialize it with the returned function(the bind() method on the “infos” function). The bind() method takes “me” object as its first argument, which sets the value of ‘this’ inside the “infos” function to the “me” object. The subsequent arguments (technologies[0], technologies[1], and technologies[2]) are passed as arguments to the “infos” function.

Finally, we invoke the “newFunc” fonction

Inside the “infos” function, “this.name” and “this.job” now refer to the properties of the “me” object

Output:

4. The new keyword

When you call a function with the new keyword in JavaScript, a new instance of the constructor is created, and ‘this’ keyword within the constructor function refers to the instance being created. Additionally, any properties and/or methods defined within the constructor will be assigned to that newly created instance.

A. function constructor

A function constructor is a regular JavaScript function that is used to create objects.

Example:

function Developer(name, job) {
   this.name = name;
   this.job = job;
   this.msg = function () {
      console.log(`Hi my name is ${this.name}, I'm a ${this.job}`);
   };
}

let me = new Developer("Badreddine", "Frontend Developer");
me.msg();

In the example above we define a constructor function called “Developer” that takes two parameters “name” and “job”.

Within the constructor, we use the ‘this’ keyword to assign values to the properties of the object being created (“this.name” and “this.job”). This allows us to initialize each instance of Developer with specific values for name and job.

Additionally, we define a method named “msg” within the constructor.

Then we create a new instance of the Developer object by calling new Developer(“Badreddine”, “Frontend Developer”). This instance is stored in the variable “me”.

Finally, we invoke the “msg” method on the “me” object.

Output:

B. class

a class in JavaScript is essentially a syntactic way of defining constructor functions introduced in ES6.

Example:

class Developer {
   constructor(name, job) {
      this.name = name;
      this.job = job;
      this.msg = function () {
         console.log(`Hi my name is ${this.name}, I'm a ${this.job}`);
      };
   }
}

let me = new Developer("Badreddine", "Frontend Developer");
me.msg();

In the example above we define a class called “Developer” using the “class” keyword. This class serves as a blueprint for creating developer objects. Inside the Developer class, we define a constructor method using the “constructor” keyword. The constructor method takes two parameters, “name” and “job”, representing the name and job title of a developer, and it is automatically called when you create a new instance of the class.

Within the constructor method, we use the ‘this’ keyword to assign the provided name and job values to the object being created.

Additionally, we define a method called “msg” within the constructor method.

we create a new instance of the Developer class by calling new Developer(“Badreddine”, “Frontend Developer”). This instance is stored in the variable me.

Finally, you invoke the “msg” method on the “me” object.

Output:

5. Arrow Functions

The arrow function is another way to create functions introduced in ES6. When you use ‘this’ with an arrow function, it would refer to the surrounding lexical context and that’s because it does not have its own context. The lexical context could be a parent function, a global context, or any enclosing scope where the arrow function is defined.

Example1:

const infos = {
   firstName: "Badreddine",
   msg: () => {
      console.log(`Hi, my name is ${this.firstName}`);
      console.log(this);
   },
};

infos.msg();

In the example above we create an object “infos” with a “firstName” property set to the string “Badreddine”.

Inside the “infos” object, we define a method “msg” using an arrow function syntax.

We call the “msg” method on the “infos” object.

Output:

Now, here’s what happens when we run this code:

The first log attempts to access “this.firstName”. However, since arrow functions inherit the ‘this’ value from their surrounding lexical scope, and there is no outer function or scope that defines ‘this’, ‘this’ refers to the global object (window). Therefore, “this.firstName” will likely be undefined.

The second log logs the ‘this’ object, which will typically be the global object (window).

Example2:

const infos = {
    firstName: "Badreddine",
    msg() {
       let logMsg = () => {
          console.log(`Hi, my name is ${this.firstName}`);
          console.log(this);
       };
       logMsg();
    },
 };

 infos.msg();

In the example above we create an object named “infos” with a “firstName” property set to the string “Badreddine”.

Inside the “infos” object, we define a method “msg”.

Inside the “msg” method, we define a nested function called “logMsg” using the arrow function syntax and we call it.

Finally, we call the “msg” method on the “infos” object.

Output:

Now, here’s what happens when we run this code:

The “logMsg” arrow function is called within the “msg” method.

Inside the “logMsg” function:

The first log attempts to access “this.firstName”. Since arrow functions inherit the ‘this’ value from their surrounding lexical scope (in this case, the “msg” method), “this.firstName” refers to the “firstName” property of the “infos” object.

The second log logs the ‘this’ object. Again, ‘this’ inherits the value from the surrounding lexical scope, which is the “msg” method. Therefore, it refers to the “infos” object.

Conclusion

Recap of key points about ‘this’ in JavaScript.
Alone, in a global context ‘this’ refers to the global(window) object, whether it’s in strict mode or default mode.
In a regular function when ‘this’ is used without any specific context, in default mode, ‘this’ refers to the global(window)object, but in strict mode it’s undefined.
In the implicit binding cases, ‘this’ refers to the object on the left side of the function at invocation time.
In the explicit binding cases, ‘this’ refers to the value you explicitly specify.
In an arrow function, ‘this’ does not have its own context, so it would refer to the surrounding lexical context.

Value type vs Reference type in JavaScript

Badreddine Boudaoud — Thu, 30 Mar 2023 23:20:23 +0000

Introduction

JavaScript is a dynamic, loosely typed language that allows developers to create and manipulate variables with ease. One of the fundamental concepts in JavaScript is the difference between reference and value types. Understanding the difference between these two types is crucial for writing efficient, bug-free code.

Primitives vs Objects

In JavaScript, variables can be assigned values that are either primitives or objects(non-primitives). Understanding the difference between primitive and object(non-primitive) values is essential to understanding value and reference in JavaScript.

Primitive values are simple, immutable values that are not objects. There are six primitive data types in JavaScript: string, number, boolean, null, undefined, and symbol. When a primitive value is assigned to a variable, the variable holds a copy of that value.

On the other hand, objects are values that can hold a collection of key-value pairs, methods, and other objects, (in JavaScript arrays and functions are also objects). When an object is assigned to a variable, the variable holds a reference to the memory location where the object is stored.

Value vs Reference examples

1- When a variable is assigned a value type, the variable holds a copy of the value.
Example 1

let a = 5;
let b = a;
a = 10;

console.log(a); // Output: 10
console.log(b); // Output: 5

In this example, the variable a is assigned the value 5. The variable b is then assigned the value of a, which means that b also has the value of 5. When a is then assigned the value 10, the value of b remains unchanged because b has a copy of the value of a, not a reference to a.

Example 2

let str1 = "hello";
let str2 = str1;
str2 = "world";

console.log(str1); // Output: "hello"
console.log(str2); // Output: "world"

In this example, str1 holds the string value “hello”, and when we assign str1 to str2, str2 holds a copy of the value of str1. When we then assign str2 the value “world”, str1 is not affected, because str2 holds a separate copy of the value.

2- When a variable is assigned a reference type, changes to the object will affect all variables that reference that object. For example:

Example 1

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr1.push(4);

console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]

In this example, arr1 is assigned a reference to an array containing the values [1, 2, 3]. arr2 is then assigned the same reference as arr1. When arr1 is then modified by pushing the value 4 onto the end of the array, the change is reflected in arr2 because both variables hold a reference to the same object in memory.

Example 2

let obj1 = { name: "Alice", age: 30 };
let obj2 = obj1;
obj2.age = 31;

console.log(obj1); // Output: { name: "Alice", age: 31 }
console.log(obj2); // Output: { name: "Alice", age: 31 }

In this example, obj1 holds a reference to an object with properties name and age. When we assign obj1 to obj2, obj2 holds a copy of the reference to the same object in memory. When we then change the value of the age property of obj2, obj1 is also affected, because both variables hold a reference to the same object in memory.

When to Use Value Types vs Reference Types

Now that we understand the difference between value and reference types in JavaScript, let’s explore how to use them effectively in our code.

Value types are useful when you want to create a copy of a variable without affecting the original value. This is especially important when you are working with primitive data types such as numbers, strings, and Booleans.

Reference types are useful when you want to create a variable that refers to the same object or array in memory. This is especially important when you are working with complex data types such as objects and arrays.

However, it is important to be careful when working with reference types. If you make changes to a reference type variable, it will affect all other variables that reference the same object or array in memory. This can lead to unexpected behavior and bugs in your code.

conclusion

knowing the difference between value and reference types in JavaScript is crucial for writing effective and efficient code. By understanding when to use each type, you can avoid bugs and ensure that your code behaves as intended. By keeping these concepts in mind, you can write cleaner and more maintainable code.

Eight(8) ES6(ECMAScript 6) features that you need to know before learning React

Badreddine Boudaoud — Tue, 28 Mar 2023 00:39:50 +0000

Introduction

ES6, also known as ECMAScript 2015, is the sixth version of the ECMAScript language specification. ECMAScript is a standardized scripting language specification on which many programming languages, including JavaScript, are based. ES6 was a major update to the language, introducing several new features and syntax enhancements that made JavaScript more powerful, flexible, and easier to use.

ES6 Features

React is built using JavaScript, and many of the features used in React are features of ES6. Here are some ES6 features that are particularly useful to know before learning React:

1- let and const

ES6 introduced two new ways to declare variables in JavaScript: let and const. These are block-scoped variables that have a different scope than variables declared with var.

The main difference between const and let is that const variables are read-only, meaning their value cannot be reassigned once they are declared, whereas let variables can be reassigned.

Here is an example to illustrate the difference between const and let:

let favoriteColor = “blue”;
const age = 25;

console.log(favoriteColor); // Output: "blue"
console.log(age); // Output: 25

favoriteColor = "green";
// age = 26; // This will result in an error because age is a constant and its value cannot be reassigned.

console.log(favoriteColor); // Output: "green"
console.log(age); // Output: 25

In this example, we declare a variable called favoriteColor using let and initialize it to “blue”. We also declare a constant called age and initialize it to 25.

We then log the initial values of favoriteColor and age to the console, which outputs “blue” and 25, respectively.

Next, we reassign the value of favoriteColor to “green”, which is allowed because favoriteColor was declared using let. However, we try to reassign the value of age to 26, which would result in an error because age was declared using const and its value cannot be reassigned.

2- Arrow functions

Arrow functions are a new syntax for writing JavaScript functions introduced in ECMAScript 6 (ES6). Arrow functions provide a more concise syntax for defining functions compared to traditional function expressions. They are commonly used in modern JavaScript development, particularly in functional programming and in writing code that uses callbacks, event listeners, and promises.

Here is an example of an arrow function that returns the sum of two numbers:

const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3)); // Output: 5

Arrow functions also have some unique features, such as:

2- 1- Lexical this binding: Arrow functions do not bind their own ‘this’ value, but instead inherit ‘this’ from the surrounding context in which they were defined. This can be useful in certain situations, such as when working with event listeners or in functional programming.

Here is an example that demonstrates the use of the ‘this ’keyword in an arrow function:

const myObject = {
  value: 10,
  getValue: function() {
    const innerFunc = () => {
      console.log(this.value);
    };
    innerFunc();
  }
};

myObject.getValue(); // Output: 10

In this example, we have an object myObject with a property value set to 10, and a method getValue that defines an inner arrow function innerFunc. When getValue is called, it invokes innerFunc which logs the value of this.value to the console.

Because innerFunc is an arrow function, it inherits this from the surrounding context in which it was defined — in this case, the getValue method of myObject. As a result, this.value refers to the value property of myObject, which has a value of 10.

If we had used a traditional function expression instead of an arrow function for innerFunc, this keyword inside the function would have referred to the global window object (in a browser environment), or the undefined value (in strict mode). This is because this keyword in a traditional function expression is determined at the time the function is called, not at the time it is defined.

2- 2- Implicit return: If the function body contains only one statement, and that statement is an expression, the return keyword and curly braces can be omitted. The expression will be implicitly returned.

Here is an example of an arrow function with an implicit return:

const double = x => x * 2;

console.log(double(5)); // Output: 10

3- Template literals

Template literals are a feature of the JavaScript programming language that allows for the creation of strings that can contain expressions and variables in a concise and readable manner. They are denoted by backticks () instead of the traditional single quotes (‘) or double quotes (“).

Template literals allow for the embedding of expressions in the string using the ${} syntax, which allows for the evaluation of JavaScript expressions within the string. This means that the values of variables or the results of expressions can be inserted directly into the string without having to concatenate them using the + operator.

For example:

const name = ‘John’;
const age = 30;

console.log(`My name is ${name} and I am ${age} years old.`);

This will output:
My name is John and I am 30 years old.

Template literals can also span multiple lines, making it easier to write multi-line strings without having to use escape characters.

4- Destructuring

Destructuring allows you to extract values from arrays or properties from objects and assign them to distinct variables using a syntax that resembles the structure of the data being extracted. It provides a concise way to extract only the required values from data structures, making the code more readable and easier to understand.

In array destructuring, you can extract values from an array and assign them to variables by enclosing the variables in square brackets and using the array name on the right-hand side of the equals sign.

Here’s an example of destructuring an array:

// Create an array of numbers
const numbers = [1, 2, 3, 4, 5];

// Destructure the first and last elements of the array
const [first, , , , last] = numbers;

// Output the first and last elements
console.log(`The first element is ${first}`); // Output: The first element is 1
console.log(`The last element is ${last}`); // Output: The last element is 5

In object destructuring, you can extract values from an object and assign them to variables by enclosing the variables in curly braces and using the object name on the right-hand side of the equals sign.

Here’s an example of destructuring an object:

// Create an object representing a person
const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

// Destructure the person object to get the firstName, lastName, and city properties
const { firstName, lastName, address: { city } } = person;

// Output the values of the firstName, lastName, and city variables
console.log(`My name is ${firstName} ${lastName}, and I live in ${city}.`); // Output: My name is John Doe, and I live in Anytown.

5- Spread syntax

The spread syntax allows you to spread the elements of an array or an object into another array or object. This can make it easier to merge arrays or objects or to pass arguments to a function. It is denoted by the ellipsis (…) operator and can be used in a variety of contexts to provide a concise and powerful way of working with data.

When used with arrays, the spread syntax can be used to create a new array that combines the elements of multiple arrays. For example:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = […arr1, …arr2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

The spread syntax can also be used to copy an array, which is useful when you need to modify an array without affecting the original. For example:

const original = [1, 2, 3];
const copy = […original];
copy.push(4);

console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]

When used with objects, the spread syntax can be used to create a new object that combines the properties of multiple objects. For example:

const obj1 = { foo: 'bar' };
const obj2 = { baz: 'qux' };
const combined = { …obj1, …obj2 };

console.log(combined); // { foo: 'bar', baz: 'qux' }

The spread syntax can also be used to add new properties to an object or overwrite existing properties. For example:

const original = { foo: 'bar' };
const copy = { …original, baz: 'qux' };

console.log(original); // { foo: 'bar' }
console.log(copy); // { foo: 'bar', baz: 'qux' }

6- Promises

A promise is an object representing the eventual completion or failure of an asynchronous operation. It is a way of handling asynchronous code that allows developers to write code that is more readable and easier to reason about.

A promise has three states: pending, fulfilled, or rejected.

When a promise is pending, it means that the asynchronous operation has not yet been completed.

When a promise is fulfilled, it means that the operation has been completed successfully, and the promise returns a value.

When a promise is rejected, it means that the operation has failed, and the promise returns a reason for the failure.

Here’s an example of using promises:

function addNumbers(a, b) {
  return new Promise((resolve, reject) => {
    if (typeof a !== 'number' || typeof b !== 'number') {
      reject('Both arguments must be numbers.');
    } else {
    const sum = a + b;
    resolve(sum);
    }
  });
}
addNumbers(2, 3)
.then(sum => {
  console.log(`The sum of 2 and 3 is ${sum}.`);
})
.catch(error => {
  console.error(error);
});

In this example, we define a function called addNumbers() that takes two arguments and returns a promise. Inside the promise, we check if both arguments are numbers and if so, we calculate their sum and resolve the promise with the result. If either argument is not a number, we reject the promise with an error message.

We then call addNumbers() with arguments of 2 and 3, and chain a then() method to log the resulting sum to the console when the promise is fulfilled. If there is an error, the catch() method is called and the error message is logged to the console.

7- Modules

Modules are a standardized way of organizing and sharing code between files and projects. A module is a self-contained block of code that can define variables, functions, classes, and other objects, and can selectively expose these objects to other parts of the application.

Modules allow you to import and export code between different files and namespaces. You can now export a default value from a module using the default keyword, or export multiple named values using the export keyword.

Here are examples of both default exports and named exports

Default export example:

// math.js
const add = (a, b) => a + b;

export default add;

In this example, we define a function called add and export it as the default export of the math.js module using the export default syntax.

We can then import the add function in another module like this:

// app.js
import add from './math.js';

console.log(add(2, 3)); // logs 5

In this importing module, we use the import statement to import the default export from the math.js module. Since we used export default, we can assign the imported object to any variable name we want, in this case, add.

Named export example:

// utils.js
export const formatName = (firstName, lastName) => `${lastName}, ${firstName}`;

export const formatNumber = (num) => {
  const formatted = num.toLocaleString('en-US', { style: 'decimal' });
  return `$${formatted}`;
};

In this example, we define two functions called formatName and formatNumber and export them as named exports of the utils.js module using the export syntax.

We can then import the named exports in another module like this:

// app.js
import { formatName, formatNumber } from './utils.js';

console.log(formatName('John', 'Doe')); // logs "Doe, John"
console.log(formatNumber(123456.78)); // logs "$123,456.78"

In this importing module, we use the import statement to import the named exports from the utils.js module. We use curly braces {} to specify which exports we want to import, and we use the same names that we used in the exporting module (formatName and formatNumber in this case).

8- Default parameters

Default parameters allow for the specification of default values for function parameters. If a function is called with a missing or undefined value for a parameter with a default value, the default value is used instead.

Default parameters are denoted by assigning a default value to a function parameter in the function definition. For example:

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // outputs "Hello, World!"
greet('John'); // outputs "Hello, John!"

Default parameters can be used with any type of function parameter, including object and array destructuring. For example:

function processUser({ name = 'Unknown', age = 0 }) {
  console.log(`The user ${name} is ${age} years old.`);
}

processUser({}); // outputs "The user Unknown is 0 years old."
processUser({ name: 'John', age: 30 }); // outputs "The user John is 30 years old."

Conclusion

In conclusion, understanding ES6 features is essential to effectively work with React. The let and const, arrow functions, template literals, destructuring, spread syntax, promises, modules, and default parameters, are some of the most commonly used features in React development. Learning these features will not only make your code more concise and readable but also increase your productivity by providing a more modern syntax for creating robust and scalable React applications. As React continues to evolve, it’s important to keep up with the latest ES6 features to stay up-to-date with the best practices in the industry.

Bonus

1- Async/await

Async/await is a feature in modern JavaScript that simplifies the process of working with asynchronous code. It was introduced in ECMAScript 2017 (ES8) and is built on top of promises, another feature that was added in ES6.

In traditional asynchronous programming, callbacks or promises are used to handle the response from an asynchronous operation. However, this can lead to callback hell or complicated chains of promises. Async/await provides a simpler, more readable syntax for working with asynchronous code.

Here’s how async/await works:

The async keyword is used to define a function that returns a promise. The async keyword essentially turns the function into a generator function that yields promises.

The await keyword is used to pause the execution of the async function until a promise is fulfilled. When an await expression is encountered, the function is paused and control is returned to the event loop, allowing other code to execute. When the promise is fulfilled, the function resumes execution and the result of the promise is returned.

Here’s an example of an async function that uses await to handle a network request:

async function fetchUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const userData = await response.json();
  return userData;
}

In this example, the fetchUserData function is defined as an async function using the async keyword. Inside the function, we use the await keyword to pause the execution of the function until the fetch call completes and returns a response object. We then use await again to pause the execution of the function until the response has been converted to JSON using the json() method. Finally, we return the userData object.

Using async/await, we can write asynchronous code that looks and behaves like synchronous code, making it easier to read and understand.

2- Filter and map

Filter and map are two common higher-order functions, they are features of ECMAScript 5 (ES5) that are used to manipulate arrays.

Filter is used to create a new array with all elements that pass a certain test (predicate) provided as a callback function. The filter method does not modify the original array and returns a new array with the filtered elements.

Here’s an example of using filter to create a new array of even numbers from an array of integers:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

In this example, we define an array of numbers and use the filter method to create a new array evenNumbers that contains only the even numbers from the original array. We pass a callback function to filter that tests each element in the array to see if it is even, and returns true or false accordingly.

Map, on the other hand, is used to create a new array by applying a transformation function to each element in the original array. The map method does not modify the original array and returns a new array with the transformed elements.

Here’s an example of using map to create a new array of squared numbers from an array of integers:

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

In this example, we define an array of numbers and use the map method to create a new array squaredNumbers that contains the squared value of each number in the original array. We pass a callback function to map that returns the squared value of each number.

In React, you often need to manipulate arrays of data to render components, and filter and map are commonly used to transform and filter data before rendering. Asynchronous programming is also an essential part of React, as it allows components to interact with APIs and other data sources without blocking the main thread.

Filter, map, and async/await are not ES6 features, but they are still very important concepts to understand when working with modern web development frameworks such as React.

Create a React app with Vite and deploy it on GitHub

Badreddine Boudaoud — Sun, 26 Mar 2023 13:13:39 +0000

Introduction

Deploying a React app on GitHub can be a great way to share your application with others and make it available online. In this article, we will walk through the steps required to create a React app with Vite and deploy it on GitHub.

React is a popular open-source front-end JavaScript library, used for building user interfaces for web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies.

Vite is a build tool and development server that is used to build modern web applications. It is designed to be fast, lightweight, and easy to use. Vite is developed by Evan You, the creator of Vue.js, and is heavily inspired by the development experience provided by Vue.js.

GitHub is a web-based platform that provides a wide range of collaborative tools for software development teams. It is a popular platform for hosting, sharing, and collaborating on code repositories.

Prerequisites

To follow along with this tutorial, you will need:

1- Node.js installed on your system Node >= 16.

2- A GitHub account.

When developing a React app, one important step is to deploy the project to a hosting service so that others can access it. GitHub is a popular platform for hosting and sharing code, and it also provides a simple way to deploy React projects using ‘gh-Pages’.‘gh-pages’ is a package for Node.js that allows you to easily deploy a static website to GitHub Pages.

With this being said, let’s begin the tutorial.

Create a GitHub repository

The first step is to create a GitHub repository for your project. If you already have a repository for your project, you can skip this step. To create a new repository, follow these steps:

1- Go to GitHub.com and log in to your account.

2- Click on the “+” icon in the top right corner and select “New repository”.

3- Give your repository a name, and add a brief description if desired. I will name it react-project.

4- Choose whether to make the repository public or private.

5- Click on the “Create repository” button.

6- After clicking on Create repository you will see this page.

Create a React app with Vite

If you have not yet created a React app, you can use Vite. With Vite, you can create a React app with less build time and the files in the folder are minimal with optimal output. To do this, you will need to have Node.js installed on your computer. Here are the steps:

1- Create a folder and name it whatever you want.

2- Open the folder with your preferred IDE, I will be using Visual Studio Code.

3- Make sure to open your terminal in that folder.

4- To install Vite, you need to run:

npm create vite@latest

5- After running npm create vite@latest, you will be asked to put a project name.

I will name it react-project.

6- You will be asked to select a framework. Since this project is a React project, you need to select React from the list.

7- You will also be asked to choose a variant. I will choose JavaScript.

8- Change your directory to the react-project by running:

cd <Your project name>

In my example, I will run:

cd react-project

9- To install all the dependencies React needs run:

npm install

10- Wait for the installation to finish.

Install the gh-pages package

After the dependencies are installed completely, you need to install ‘gh-Pages’ package.

1- To install ‘gh-pages’ run:

npm install --save-dev gh-pages

2- Wait for the installation to finish.

Update the package.json file

The ‘gh-pages’ package uses the homepage field in the package.json file to determine where to deploy your app. To update the package.json file, follow these steps:

1- Add a homepage field with the URL of your GitHub repository in the following format:

“homepage”: https://.github.io//

2- In the scripts tag add:

“predeploy”: “npm run build”,

“deploy”: “gh-pages -d dist”.

The “predeploy” and “deploy” scripts are used to automate the deployment process.

3- Save the changes.

Update the vite.config.js file

1- Add base: “//”, to vite.config.js, in my example it would be base: “/react-project/”

2- save the changes.

Push the React app to GitHub

With the ‘gh-Pages’ package installed and the package.json and the vite.config.js files updated

1- Initialize a Git repository by running the command:

git init

This will create a new Git repository in your project’s directory.

2- Add all the files in your project to the Git repository by running the command:

git add .

This will stage all the files in your project for committing.

3- Commit the changes by running the command:

git commit -m "Initial commit"

This will create a new commit in the Git repository with the message “Initial commit”.

4- Rename the master branch to main by running the command:

git branch -M main

5- Add the remote repository by running the command:

git remote add origin <repository URL>

This is the repository URL in the GitHub repository that you’ve created

This will add the GitHub repository as a remote for your local Git repository.

6- Finally, push the changes to the remote repository by running the command:

git push -u origin master

This will push the initial commit of your local Git repository to the GitHub repository.

Deploy your React app

With the React app pushed to Github, you can now deploy your React app.
1- Run the command:

npm run deploy

2- Wait for the deployment to finish.

Access your app

Once the deployment is complete, you can access your React app by going to the URL specified in the homepage field of your package.json file. Typically, the URL will be in the form of https://.github.io//.

Or you can find the URL by clicking on the repository setting.

Then click on pages.

Here is the URL.

Click on the URL, and here is your deployed React app.

Conclusion

Deploying a React app to GitHub Pages using the ‘gh-Pages’ package is a simple and convenient way to share your work with others. By following the steps outlined in this article, you can easily deploy your own React projects to GitHub Pages and share your work with the world.