The this keyword is a reference to an object, but the object varies based on where and how it is called.

In this article, you'll learn how to implicitly (based on context) and explicitly (using the call(), apply(), and bind() methods) determine the value of the this keyword.

Here are the topics we will be covering:

• What are the Rules that Guide the Behavior of the this keyword?
• What is the call() Method in JavaScript?
• What is the apply() Method in JavaScript?
• What is the bind() Method in JavaScript?
• Why were the call(), apply(), and bind() Methods Introduced to JavaScript?
• What are the Differences Between the call(), apply(), and bind() Methods?
• Why Use the call(), apply(), and bind() Methods in Javascript?

What are the Rules that Guide the Behavior of the this keyword?

Some rules guide the behavior of the this keyword in JavaScript. They are the global scope, function context, object method, constructor, and event handlers.

Global Scope

Whenever the this keyword is used outside of any function, it refers to the global object.

While the global object is global in the Node.js environment, it's a window in the context of a web browser:

console.log(this);

Global Scope Result

The result from the code above shows that this returns the window, which is the global object for the web browser.

Function Context

The method of invocation determines the value of the this keyword in a standard regular function:

function saySomething() {
  console.log(this)
}

saySomething()  // {window: Window, self: Window, document: document, name: '', location: Location, …}

Function context result

The above code result is the global object for the web browser.

Object Method

Methods are function-holder properties of an object. In JavaScript, they allow an object to manipulate its properties using this keyword:

const club = {
  name: "Arsenal",
  yearFounded: "1989",
  details() {
    return `Hey, ${this.name} ${this.yearFounded}`;
  },
};

console.log(club.details()); // Arsenal , 1989

In the context of the above code, this refers to the club. As you can see from the output, it says Arsenal 1989.

But we would have a different result if we created a new variable for the details method, as shown below:

const club = {
  name: "Arsenal",
  yearFounded: "1989",
  details() {
    return `Hey, ${this.name} ${this.yearFounded}`;
  },
};

const full = club.details;
console.log(full()); // Hey,  undefined

Although the details() method was defined inside the club object, it's not expressly bound to it. We call the details() as a method on the object.

In JavaScript, a method gets the value of this when it looks at the function that comes before the dot.

Constructor Function

It's not news that the function constructor was the default initializer for user-defined objects before the introduction of the ECMAScript 2015 update.

The new keyword creates an instance of a constructor function:

function Country(name) {
  this.name = name;
  this.age = 1960;

  this.info = function () {
    console.log(`${this.name} was founded ${this.age} years ago`);
  };
}

const country = new Country("Nigeria");
console.log(country.name);
console.log(country.info());

Constructor function result

The this refers to the newly created object, in this case, the instance of the country.

Event Handlers

In an addEventListener event handler, this refers to the element before the dot. This is the element that the event listener was added to trigger the event:

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this);
});

// OUTPUT  <button>click</button>

Once the above code runs, a button with an innerText value of click will be logged to the console.

In all the above rules that guide the behavior of the popular this keyword, one thing is clear: the context determines the value of the this keyword.

Aside from implicitly determining the value of this, function methods like call(), apply(), and bind() can be used to explicitly determine what this should refer to.

What is the call() Method in JavaScript?

The call() method is one of the most popular ways to explicitly define what this refers to. In JavaScript, the call() method is mostly used to borrow a method from an isolated object and use it on another with a specific context.

The call() method requires its arguments to be passed one by one:

const game = {
  title: "PrisonBreak",
  year: 1979,
};

function detail() {
  console.log(`${this.title}, was released in ${this.year}`);
}
detail();

// RESULT undefined was released in undefined

The above prints the result because there's no connection between the game and the detail method. Hence, calling the detail method by itself will only print undefined.

const game = {
  fullDetail: function () {
    return this.title + " " + this.year;
  },
};

const newGame = {
  title: "Merlin",
  year: 1994,
};

const fullDetail = game.fullDetail.call(newGame);
console.log(fullDetail); // Output: Merlin 1994

In the code above, there are game and newGame objects. The game has a fullDetail method, while the newGame has title and year has properties.

As we know from the definition above, the call() method used the context of newGame to invoke the fullDetail method of the game object.

This means that, we have access to the newGame properties because the this inside of fullDetail refers to newGame object.

We now have a connection between the game and the newGame with the help of the call() method.

Aside from passing this as an argument, there's provision for passing additional arguments individually:

const game = {
  fullDetail: function (category) {
    return `${this.title} was released ${this.year}, and the film is a ${category} film`;
    return this.title + " " + this.year + " " + "category";
  },
};

const newGame = {
  title: "Merlin",
  year: 1994,
};

const fullDetail = game.fullDetail.call(newGame, "seasonal");

console.log(fullDetail); // Merlin was released 1994, and the film is a seasonal film

The above code shows the possibility of passing another argument aside this keyword.

How to Use the call() Method in a Real World Application

The following code was extracted from the code above:

const newMovie = {
    info: {
      title,
      [extraName]: extraValue,
    },
    id: Math.random(),
    formatted() {
      return this.info.title.toUpperCase();
    }
  };

The above code is an object named newMovie. In the newMovie object, an info object with title and extraName was created.

The title is the name of the movie, while the [extraName] line uses bracket notation to dynamically access the user input, using the value of the variable as the key name. While the extraValue is the value associated with the key.

The id is the unique identifier that generates a random number using the Math.random() function.

The formatted() method returns the uppercase format of the title. By using the this.info.title, where the newMovie object is the same as this, and the infois an object inside the newMovie that contains information like the title, and the rest.

filteredMovies.forEach((movie) => {
    const newMovieEl = document.createElement('li');
    const {info} = movie;
    const {formatted} = movie
    let text = formatted.call(movie) + '-';
    for (const key in info) {
      if (key !== 'title') {
        text = text + `${key}: ${info[key]}`
      }
    }
    newMovieEl.textContent = text;
    movieList.append(newMovieEl)

  })
}

The above code shows the uses of the call() method in a real world application.

Let's explain what's happening in the code.

The line const newMovieEl = document.createElement('li'); creates a new <li> element using document.createElement('li'), with the new element stored in the constant newMovieEl.

The line const {info} = movie; uses destructuring assignment to extract the info property from the movie object.

The line const {formatted} = movie uses destructuring assignment to extract the formatted method from the movie object.

The line let text = formatted.call(movie) + '-'; shows how to use the call() method in an application.

Invoking the formatted function directly will not give the required result, as the function of this in that context is the window object.

By using the call method on the formatted function, the call() method allows the context of the this to change from the window object to themovie object.

As said above, in JavaScript, the call() method is used to borrow a method from an isolated object and use it on another with a specific context.

The call() method requires its arguments to be passed one by one, and executes the function instantly.

The line for (const key in info) {if (key !== 'title') {text = text + ${key}: ${info[key]}} iterates over each key in the info object and checks if the current key is not equal to title. It then appends the key-value pair to the text string.

The line newMovieEl.textContent = text movieList.append(newMovieEl) sets the text content of the newly created list item element to the generated text, and appends the newly created list item element to the parent element with the id movieList.

What is the apply() Method in JavaScript?

The apply() method is similar to the call() method, with the only difference being that the apply() method takes arguments as an array (or array-like object), while arguments get passed individually to the call() method.

To get started with the apply() method, let's check its syntax:

nameOfFunction.apply(thisArg, [argsArray])

The nameOfFunction is the function to be called, thisArg is the this value provided for the function, and the array or array-like object is the argsArray to be passed to the function.

const game = {
  fullDetail: function () {
    return this.title + " " + this.year;
  },
};

const newGame = {
  title: "Merlin",
  year: 1994,
};

const fullDetail = game.fullDetail.apply(newGame);
console.log(fullDetail); // Output: Merlin 1994

Just as in the call() method, there are game , and newGame objects. The game has a fullDetail method, while the newGame has a title and year has properties.

As we know from the definition above, the apply() method used the context of newGame to invoke the fullDetail method of the game object.

This means that, we have access to the newGame properties because the this inside of fullDetail refers to the newGame object.

We now have a connection between the game and the newGame with the help of the apply() method.

The apply() method can also be used to pass an array or array-like collection as an argument.

const game = {
  fullDetail: function (greet) {
    return `${greet} ${this.title} ${this.year}`;
  },
};

const newGame = {
  title: "Merlin",
  year: 1994,
};

const fullDetail = game.fullDetail.apply(newGame, ["Welcome"]);
console.log(fullDetail); // Output: Welcome Merlin 1994

The above code shows that the fullDetail function inside the game object expects a greet parameter. The apply() method is used to invoke the fullDetail with the newGame object and the array ['Welcome'] as an argument passed to the function.

How to Use the apply() Method in a Real World Application

The following code was extracted from the code above:

const newMovie = {
    info: {
      title,
      [extraName]: extraValue,
    },
    id: Math.random(),
    formatted() {
      return this.info.title.toUpperCase();
    }
  };

The above code is an object named newMovie. In the newMovie object, an info object with title,extraName was created.

The title is the name of the movie, while the [extraName] line uses bracket notation to dynamically access the user input, using the value of the variable as the key name. While the extraValue is the value associated with the key.

The id is the unique identifier that generates a random number using the Math.random() function.

The formatted() method returns the uppercase format of the title. By using the this.info.title, where the newMovie object is the same as this, and the infois an object inside the newMovie that contains information like the title, and the rest.

filteredMovies.forEach((movie) => {
    const newMovieEl = document.createElement('li');
    const {info} = movie;
    const {formatted} = movie
    let text = formatted.apply(movie) + '-';
    for (const key in info) {
      if (key !== 'title') {
        text = text + `${key}: ${info[key]}`
      }
    }
    newMovieEl.textContent = text;
    movieList.append(newMovieEl)

  })
}

The above code shows the uses of the apply() method in a real world application.

Now, let's explain the code.

The line const newMovieEl = document.createElement('li'); creates a new <li> element using document.createElement('li'), with the new element stored in the constant newMovieEl.

The line const {info} = movie;uses destructuring assignment to extract the info property from the movie object.

The line const {formatted} = movieuses destructuring assignment to extract the formatted method from the movie object.

The line let text = formatted.apply(movie) + '-';shows how to use the apply() method in an application.

Invoking the formatted function directly will not give the required result, as the function of this in that context is the window object.

By using the apply method on the formatted function, the apply() method allows the context of this to change from the window object to movie object.

As said above, in JavaScript, the apply() method takes arguments as an array (or array-like object), and executes the function instantly.

The line for (const key in info) {if (key !== 'title') {text = text + ${key}: ${info[key]}}iterates over each key in the info object and checks if the current key is not equal to title.

It then appends the key-value pair to the text string.

The line newMovieEl.textContent = text movieList.append(newMovieEl) sets the text content of the newly created list item element to the generated text, and appends the newly created list item element to the parent element with the id movieList.

What is the bind() Method in JavaScript?

The bind() method creates a new function that has its this keyword set to the provided value and does not immediately call the function.

It is available on all JavaScript functions and is used to permanently set the this context for a function.

The difference between the call(), apply(), and bind() methods is that, the bind() method creates a new function with a bound this, while both call() and apply() are one time-time-use methods that don't create a new function.

The bind() method doesn't immediately call the function, but both call() and apply() call the function instantly.

Let's look at the syntax for the bind() method:

functionName.bind(thisArg[, arg1[, arg2[, ...]]])

The thisArg represents the value to be passed as this value whenever the function gets executed, and the arg1, arg2, ... are the arguments bound to the function when it gets invoked.

const player = {
  name: "Rooney",
  jerseyNumber: 10,
  introduction: function () {
    console.log(this.name + "wears Jersey number " + this.jerseyNumber + ".");
  },
};
const player2 = {
  name: "Jimmy ",
  jerseyNumber: 18,
};

let result = player.introduction.bind(player2);

result(); // Jimmy wears Jersey number 18.

In the above code, when you call result(), it prints Jimmy wears Jersey number 18. This is possible because the this keyword inside the introduction method is bound to the player2 object.

It is also possible to use the bind() method with more than one argument.

const player = {
  name: "Rooney",
  jerseyNumber: 10,
  introduction: function (goals, country) {
    console.log(
      `${this.name} wears Jersey number ${this.jerseyNumber}, he plays for ${country}, and he has scored ${goals} goals`,
    );
  },
};
const player2 = {
  name: "Jimmy ",
  jerseyNumber: 18,
};

let result = player.introduction.bind(player2, 87, "Nigeria");

result(); // Jimmy  wears Jersey number 18, he plays for Nigeria, and he has scored 87 goals

In the above example, two parameter were passed: thisArg and arg1. Then the player2 object is bound to the introduction method which has two parameters: goals and country.

How to Use the bind() Method in a Real World Application

For a proper understanding of how to use the bind() method in a real-world application, there's a need to show the application without the bind() method.

The unconventional calculator is the name of the application we will be building for this exercise.

Let's break down the code.

The above code creates a simple unconventional calculator with the aim of performing basic aritmhemetic operations (addition, subtraction, division, and multiplication).

It takes the user's input, updates the displayed result, and logs calculations.

• The outputResult(answer, text) function updates the result and the calculation text.
• The getUserInput() function retrieves the user's input from the input field.
• The task of the writeToLog(operationidentifier, older, olderTwo, newResult) is to format the calculation string for an output.
• The createLog(operationidentifier, older, olderTwo, newResult) function creates a log object for the calculation, and stores it in an array.
• The createOutput(conditional) performs the core calculation logic based on the provided operation. Operations like add(), subtract(), divide(), and multiply() trigger calculations for their respective operations.

Here is the code with the bind() function:

The above code creates simple calculator functionality in JavaScript.

The code takes an input from the user, performs calculations based on button clicks, updates the UI with the results, and maintains a log of past calculations.

Let's break down the JavaScript code in the following sections.

Select all the HTML elements

The code selects all the HTML elements using their IDs.

The addButton , subtractButton, divideButton, and multiplyButton are elements to display the calculation history.

The result is the element to display the current result and the inputNumber is an input field for user input.

Create functions for output and user input

The outputResult (answer, text) function displays the provided answer in the result element and the text in the calculation element.

getUserInput() function gets the value entered in the inputNumber field and converts it to an integer.

Create variables for calculation and logging

defaultResult is a constant set to 0, used as the initial result.

currentResult is a variable for storing the current result of calculations.

logEntries is an array that stores log entries for calculation history.

For logging functions, the writeToLog(prevResult, operand, original) function updates the UI with the calculation description and calls the outputResult function.

The createLog (operationidentifier, older, olderTwo, newResult) function creates a log entry object and pushes it to the logEntries array.

Create calculation function

The calculate (operation) takes an operation string as input ( ADD , SUBTRACT, DIVIDE, or MULTIPLY). It performs calculations based on the following operations:

It adds for ADD, subtracts for SUBTRACT, divides for DIVIDE, multiplies for MULTIPLY.

The writeToLog and createLog functions are called to log the calculation.

Create event listeners for buttons

The addButton.addEventListener('click',calculate.bind(this, 'ADD') assigns an event listener to the addButton.

Similar event listeners are assigned to the subtractButton, divideButton, and multiplyButton for their respective operations.

The code snippet indicates that the calculate function will be executed whenever a button is clicked. The function is bound with the bind() method, and arguments such as ADD, SUBTRACT, MULTIPLY, and DIVIDE are passed to the calculate function.

Why were the call(), apply(), and bind() Methods Introduced to JavaScript?

With these methods, JavaScript applications are more dynamic and adaptable. It affords the programmer more control over how the function is executed.

It is generally hard to have a full grasp of the this keyword in JavaScript. Hence, the introduction of the call(), apply(), and bind() methods gives programmers more control over this quirky subject.

Say you are a versatile footballer who can comfortably play in different positions on the field. In a regular football match, your coach assigns a specific wing for you (the function) and you play according to the coach's instructions (the function's code), and the other footballers you are on the pitch with (the arguments).

With the call() method, your coach can temporarily put you in a different position on the pitch (set the this value) for a specific match. This lets you use your footballing skills even on the wing you wouldn't normally play.

With the apply() method, it is like having a whole football tactics (arguments) full of different technical fouls, delay tactics, and many more. The coach can throw the entire tactics at you, and you can use them all (function execution with a specific context) for the match.

With the bind() method, imagine your coach creating a special understudy role ( bound() function) just for you. This understudy role always has a specific wing on the pitch (predefined this) ready, so you can seamlessly step in and deliver the instructions (function execution) whenever needed.

What are the Differences Between the call(), apply(), and bind() Methods?

When it comes to handling arguments:

• The call() method accepts arguments individually as a comma separated list.
• With the apply() method, the arguments are accepted as an array-like or an array object.
• The bind() method can pass in additional arguments when the new function is invoked.

When it comes to invocation and execution:

• The call() method invokes the function immediately with the specific individual arguments and the specified this value, and it accepts argument one by one.
• The apply() method just like the call() method invokes the function instantly, but with difference being that it accepts arguments as an array or array like object.
• The bind() method creates a new function with an optional arguments and a specified this value. It doesn'timmediatley invoke the function, as it bound the functuion for a later execution.

Why Use the call(), apply(), and bind() Methods in Javascript?

The call(), apply(), and bind() methods deal extensively with how to control the context of a function ( this keyword) and arguments when it's called.

There are several benefits attached to using these methods in JavaScript:

• Change the value of the this keyword: The this keyword refers to the object that calls a certain function. With the help of these methods, you can explicitly set the value of this keyword to something else.
• Event Handling: Both the call() and apply() methods can ensure that the handler is executed with the correct context and arguments, even if its definition space is different from the invocation space.
• Flexible arguments: These methods take arguments in a different way. The call() method takes an individual argument, the apply() method takes an argument as an array, and the bind() method allows for pre-setting some arguments for later use.
• Partial function: The bind() method creates a new function made up of a preset context and optional initial arguments. This is very useful for partial applications, where certain arguments are fixed ahead of time, with others to be provided at a later stage.
• Borrowing Functions: These methods use a function from a new object to another set of object entirely.

In a nutshell, they give you enough breathing space over how functions are executed in JavaScript.

Conclusion

In this tutorial, you learned about how to implicitly (based on context) and explicitly (by using the call(), apply(), and bind() methods) determine the value of this keyword.

Date objects help you efficiently manipulate data, handle various date-related tasks, and perform some calculations when creating real-world applications.

In this article, we will learn about the following topics:

• Overview of Date Comparison
• Importance of Date Comparison in JavaScript
• Date Objects in JavaScript
• How to Create Date Objects
• Basics of Date Comparison
• How to Compare Dates with Comparison Operators
• How to Compare Dates with the getTime() Method
• How to Use the valueOf() Method
• How to Use the toISOString() Method
• Challenges of Comparing Dates in JavaScript
• Wrapping Up

Overview of Date Comparison

In JavaScript, the date comparison involves evaluating two dates to determine if one date is earlier, later, or the same as the other.

There are various ways to compare dates, which include (but are not limited to) comparison operators ( <, >, <=, >=) and methods such as getTime() and valueOf().

Importance of Date Comparison in JavaScript

Date comparison in JavaScript is a important for processing and organizing time-related data, and time-sensitive functionalities in web applications. It's crucial in applications for dealing with data filtering, scheduling, and event handling based on time.

In JavaScript, understanding date comparison techniques allows you to build robust and seamless applications that can withstand various time-related scenarios.

To get going, here are some reasons that date comparison is a key concept to know in JavaScript:

• Filtering of Data: Date comparison is crucial in applications where time-sensitive data like transaction records and logs, filtering, and retrieving information are integral parts of the application.
• Event Scheduling: It is easy to determine the status of an event with date comparison. It helps in organizing events, reminders, and tasks.
• Arithmetic: In JavaScript, date comparison facilitates simple arithmetic, such as adding and subtracting time intervals, performing date manipulations, and calculating the duration between two dates.
• Conditional Logic: With date comparison, you can use conditional logic based on time-related condition to trigger an action if a certain event is approaching.
• User Experience: Date comparison enhances the reliability of an application by ensuring that time-related functionalities are working perfectly.

Date Objects in JavaScript

In JavaScript, date objects are a very important concept to know. You use them to work with times and dates and provide ways to manipulate, format, and represent dates and times in numerous formats.

How to Create a Date Object

There are several methods to create a date object in JavaScript. Some of the ways are as follows:

Using the new keyword

let currentDate = new Date();
console.log(currentDate)


//OUTPUT.. Tue Feb 06 2024 00:28:59 GMT-0800 (Pacific Standard Time)

In the code above, the Date constructor was called without passing any parameter. This means it returns a date object with the current date and time as values.

Using Date (dateString)

let current = new Date("February 6, 2025 10:25:00");

console.log(current);


// OUTPUT .. Thu Feb 06 2025 10:25:00 GMT-0800 (Pacific Standard Time)

In the above code, the Date constructor was called by passing a specific date, and time as a parameter to create a custom date object. The key point to note here is that the parameters are in string format.

Using year, month, day, hours, minutes, seconds, & milliseconds

let current = new Date(2024, 1, 6, 12, 0, 0, 0);

console.log(current);

// OUTPUT... Tue Feb 06 2024 12:00:00 GMT-0800 (Pacific Standard Time)

In the above code, a Date constructor with year, month, day, hours, minutes, seconds, and milliseconds was called to create a custom object with a specific time and date.

Dates with timestamps

const timestamp = new Date(14852959902)
console.log(timestamp)

// OUTPUT ... Sun Jun 21 1970 14:49:19 GMT-0700 (Pacific Daylight Time)

Although creating a date with timestamp is the least popular, it's still one of the methods of creating a date.

A timestamp is the total milliseconds that have elapsed since January 1, 1970.

Basics of Date Comparison

In JavaScript, you can compare dates using different methods, like the comparison operators and the built-in Date methods.

How to Compare Dates with Comparison Operators

In JavaScript, you can use comparison operators like <, >, <=, >=, and != for comparing dates. JavaScript internally converts the dates (milliseconds since January 1, 1970) to their respective corresponding timestamps.

The below code shows a date comparison using the the comparison operators:

//  Create a two  date objects

const firstDate = new Date('2024-01-07')
const secondDate = new Date('2023-11-09')

//  Look for comparison among the trio using the comparison operators

console.log(firstDate < secondDate) // false (firstDate is later than secondDate)
console.log(firstDate > secondDate) // true (firstDate is earlier than secondDate)
console.log(firstDate >= secondDate) // false (firstDate is earlier than or equal to secondDate)
console.log(firstDate <= secondDate) // true (firstDate is later than or equal to secondDate)
console.log(firstDate == secondDate) // false (firstDate is not  equal to secondDate)
console.log(firstDate != secondDate) // true (firstDate is not to equal secondDate)

The code output shows that thefirstDate is later than the secondDate in the first comparison. In the context of dates, between two dates, later is the date that occurs after another in time.

The second comparison shows that firstDate is earlier than the secondDate. In the context of dates, between two dates, earlier refers to the date that comes first in time.

The output for the third comparison shows that firstDate is earlier than or equal to the secondDate.

The code output for the third comparison shows that firstDate is later than or equal to the secondDate.

The fifth comparison shows that firstDate is not equal to the secondDate.

And the last comparison displayed that firstDate is not equal to the secondDate.

It's important to note that comparison operators in JavaScript are based on the Coordinated Universal Time (UTC).

If you want to compare dates based on their actual date and time values (including year, month, day, hours, minutes, seconds, and milliseconds), you may need to extract these components and compare them individually.

The code below shows how to compare two dates based on their respective components.

const firstDate = new Date('2024-02-05');
const secondDate = new Date('2024-02-05');

// Extract year, month, and day components of both dates

const firstYear = firstDate.getFullYear();
const firstMonth = firstDate.getMonth();
const firstDay = firstDate.getDate();
const secondYear = secondDate.getFullYear();
const secondMonth = secondDate.getMonth();
const secondDay = secondDate.getDate();

// Compare both date components

let result;
switch (true) {
  case firstYear === secondYear && firstMonth === secondMonth && firstDay === secondDay:
    result = "The dates are equal.";
    break;
  case firstYear < secondYear || (firstYear === secondYear && firstMonth < secondMonth) || (firstYear === secondYear && firstMonth === secondMonth && firstDay < secondDay):
    result = "firstDate is earlier than secondDate.";
    break;
  default:
    result = "firstdate is later than secondDate.";
}
console.log(result);

The breakdown of the above code is as follows:

• Creating Date Objects: Two objects firstDate and secondDate initialized with the same date were created.
• With getFullYear(), getMonth(), and getDate() methods, the code extracts the year, month, and day components from each date.
• Comparison between the dates components using the switch case statement. The code was evaluated based on the true boolean value, with each case checking various conditions to ascertain relationship between the two dates.
• The result gets logged into the console.

In summary, to determine if two date objects are equal based on their values like year, month, and day, the code compares them using a switch case statement to handle the multiple comparison scenarios.

How to Compare Dates with the getTime() Method

The getTime() method is useful for comparing dates to the millisecond. It's important to remember that the getTime() performs a numerical comparison between dates, and returns the time-value since January 1, 1970.

// Create two Date objects
const firstDate = new Date('2025-01-01');
const secondDate = new Date('2024-01-02');

// Get the time in milliseconds for each date
const firstTime = firstDate.getTime();
const secondTime = secondDate.getTime();

// Compare the time values
if (firstTime < secondTime) {
  console.log('firstDate is earlier than secondDate');
} else if (firstTime > secondTime) {
  console.log('firstDate is later than secondDate');
} else {
  console.log('firstDate are  secondDate');
}

//OUTPUT....firstDate is later than secondDate

In the code above:

• The two date objects are the firstDate and the secondDate, with both representing different dates.
• The getTime() method was used to get the time of both elements in milliseconds.
• The standard comparison operators (<, >, ===) were used to determine their relationship.
• The output of the above code was firstDate is later than secondDate, because the secondDate comes before the firstDate.

How to Use the valueOf() Method

In JavaScript, the valueOf() method is automatically called behind the scenes to return the primitive value of the specified object.

const word = new String("Hello!");
console.log(word); // Output: [String: 'Hello!']
console.log(str.valueOf()); // Output: 'Hello!'

var number = new Number(10);
console.log(number); // Output: [Number: 10]
console.log(num.valueOf()); // Output: 10

In the above example, the valueOf() method of both the string and number object returns the string and number values it represents.

The valueOf() method, however, returns a timestamp (milliseconds since the Unix Epoch), which makes dates comparison easier.

const date = new Date();
const date1 = new Date();

if (date.valueOf() < date1.valueOf()) {
  console.log('date is earlier than date1')
} else if (date.valueOf() > date1.valueOf()) {
  console.log('date is later  than date1')
} else {
  console.log('date and date1 are same')
}

// OUTPUT ... date and date1 are same

The output shows that both dates object are same.

How to Use the toISOString() Method

In JavaScript, the toISOString() method is for converting a Date object to string representation into a simplified extended ISO 8601 format which is always 24 to 27 characters long. The characters are YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively.

The method provides a standardized way of representing dates as strings when you use it to manipulate or compare dates. Converting two dates into ISO strings through toISOString() is beneficial, because it makes the comparison seamless by ensuring both dates are in the same format.

You can use the standard string comparison operators like ===, <, > to compare the ISO strings.

// Create two Date objects
const firstDate = new Date('2024-02-06T12:00:00');
const secondDate = new Date('2024-02-07T12:00:00');

// Convert the dates to ISO strings
const firstISODate = firstDate.toISOString();
const secondISODate = secondDate.toISOString();


// Compare the two ISO strings
if (firstISODate === secondISODate) {
  console.log("The dates are equal.");
} else if (firstISODate < secondISODate) {
  console.log("firstDate is before secondDate.");
} else {
  console.log("firstDate is after secondDate.");
}
// OUTPUT ....firstDate is before secondDate.

The code above shows that the dates were converted into ISO strings, and directly compares both strings to determine their relative status. It ensures ease of comparison and consistency.

Challenges of Comparing Dates in JavaScript

Being aware of possible issues and their solutions can help you ensure accuracy and consistency when comparing dates in JavaScript.

Some of the known issues are listed below:

Comparison Operators

getTime() numerical values should be the only comparing metrics when using comparison operators. The method does not inherently handle time zone conversions, meaning you must ensure time are normalized to a common time zone before using getTime().

In JavaScript, the date object allows you to create invalid dates (like February 30th). You should use getTime() to prevent unexpected behavior after validating the dates.

How to address the issue:

• Validate Dates: Validating dates must be the first step to ensure the date are valid before performing any comparison.
• Normalize Timezones: Before using the getTime() method, you should ensure that dates are normalized to a common timezone.
• Precision Needs: Confirm if getUTCFullYear(), getUTCMonth(), and getUTCDate() precision will be necessary for your comparison requirement. If not, use the getTime() method.

const firstDate = new Date('2024-02-01');
const secondDate = new Date('2024-02-03');

if (firstDate.getTime() < secondDate.getTime()) {
  // firstDate is earlier than secondDATE
}

Timezone Difference

Ensure you are comparing dates in the same timezone or with UTC and not the user's local timezone. Using local time zones can lead to discrepancies when comparing dates across different time zones or when working with dates from different sources.

In certain timezones, Daylight Saving time mode may be the adopted time format. In this case, the local time may be adjusted forward or backward. This adjustment can affect the duration between two dates and cause unexpected results.

How to address the issue:

• Normalize the Timezone: convert all dates to a standard timezone, that is UTC (Coordinated Universal Time), before comparison. This ensures consistency across the board.
• Communication: Ensure the timezone information is communicated and standardized when working with dates obtained from multiple sources. This helps to ensure consistent interpretation of dates.

const firstDate = new Date('2024-02-02T12:00:00Z'); // UTC Date
const secondDate = new Date(); // Current local date

// Compare dates in UTC to avoid timezone issues
if (firstDate.toISOString() === secondDate.toISOString()) {
  // Dates are equal
}

Precision

In JavaScript, time is represented in milliseconds since the Unix epoch (January 1, 1970). This is crucial when comparing a date that has an associated time, as you may encounter issues with precision.

How to address the issue:

• Quality Control: Regular inspections, testing, and validation of measurement systems and procedures can help correct errors in measurement process.
• Calibration: Regular calibration of instruments and equipment helps maintain accuracy and precision in measurements. Calibration involves comparing measurements taken by a device to known standards to ensure accuracy and reliability.

const firstDate = new Date('2023-02-06');
const secondDate = new Date('2022-02-06');

// This might not always be true due to time information
if (firstDate === secondDate) {
  // Dates are not necessarily equal
}

Wrapping Up

In this tutorial, you learned about date comparison and why it's important to understand how to do it in JavaScript. We talked about date objects and how to create one, as well as the basics of date comparison, and method of comparing dates.

We also looked at some of the issues likely to be encountered while comparing dates in JavaScript.

Happy Reading!

In Python programming, you don't need to explicitly declare the data type of your variable. Instead, Python, as a dynamically typed language, determines the data type of your variable according to the assigned value.

A solid understanding of data types in Python is crucial as it allows programmers to write concise code. Python has several built-in data types like the sequence, numeric, mapping, set, none, and Boolean types of data.

This article will discuss the following topics:

• Numeric Data Types in Python
• Sequence Data Types in Python
• Mapping Data Type in Python
• Set Data Type in Python
• None Data Type in Python
• Boolean Data Type in Python
• Wrapping Up

Numeric Data Types in Python

Have you ever thought about working with numerical values with Python? If yes, numeric data types are used to represent any numerical values.

There are three main numeric data types in Python: integers, floating-point numbers, and the complex numbers.

Integer Data Type in Python

In Python, integers are known as int. They are a built-in data type for whole numbers. int can represent any size of integers without overflow errors because they can either be positive, zero, or negative.

# Python Integer
a = 7
y = -1
c = 0

print(a)  # Output: 7
print(y)  # Output: -1
print(c)  # Output: 0

Numerous arithmetic calculations like addition, subtraction, multiplication, modulus, integer division, exponentiation, and division can be performed with integers.

# Addition Operation +

addition = 8 + 3
print("Addition:", addition)  # Output: 11

# Subtraction operation -
subtraction = 9 - 4
print("Subtraction:", subtraction)  # Output: 5

# Multiplication operation *
multiplication = 10 * 2
print("Multiplication:", multiplication)  # Output: 20

# Division operation /
division = 10 / 6
print("Division:", division)  # Output: 1.6666666666666667

# Integer Division operation //
integer_division = 10 // 2
print("Integer Division:", integer_division)  # Output: 5

# Modulus operation %
modulus = 10 % 5
print("Modulus:", modulus)  # Output: 0

# Exponentiation operation **
exponentiation = 2 ** 6
print("Exponentiation:", exponentiation)  # Output: 64

Floating-point Data Type in Python

In Python, float can represent both whole numbers and fractions. They are used for approximating real numbers. Hence, they are not precise when dealing with a very small or a very large numbers.

# Python Float
b = 2.47
y = -0.1
k = 5.0

print(b)  # Output: 2.47
print(y)  # Output: -0.1
print(k)  # Output: 5.0

Floating-point arithmetic calculations like addition, subtraction, multiplication, modulus, integer division, exponentiation, and division are performed using floating-point numbers. The float is any number with a decimal point.

# Addition Operation

a = 3.5
b = 2.1
print(a + b) # Output will be 5.3

 # Subtraction Operation
c = 5.5
d = 2.2
print(c - d) # Output will be 3.3

# Multiplication operation

e = 4.0
f = 2.5
print(e * f)  # Output will be 10.0

# Division Operation
g= 10.0
h = 7.0
print(g / h) # Output will be 1.4285714285714286

# Exponential Operation 
i = 2.0
j = 3.0
print(i * j)# Output will be 6.0

# Modulus operation
k = 10.5
l = 4.0
print(k % l) # Output will be 2.5

# integer division Operation
m = 10.5
n = 3.0
print(k // l) # Output will be 2.0

Note: In Python 3, by default, dividing two integers returns a floating-point result.

Complex Data Type in Python

complex numbers are popularly used in engineering, physics, and mathematics to model the real and imaginary components. The numbers take the form of a + bj, where a and b are real numbers, and j represents the imaginary unit, defined as the square root of -1.

z1 = 8 + 2j  # Creates a complex number 8 + 2j
z2 = -9 - 6j # Creates a complex number -9 - 6j

Python can perform various arithmetic calculations like addition, subtraction, multiplication, and division with complex number.

z2 = complex(3, 2)
z4 = complex(-1, 6)

# Addition Operation
sum_z = z2 + z4  # Result: 3 - 1 + (2 + 6)j = 2 + 8j

# Subtraction
diff_z = z2 - z4  # Result: 3 - (-1) + (2 - 6)j = 4 - 4j

# Multiplication
prod_z = z2 * z4 

# Result: (3 * -1 - 2 * 6) + (3 * 6 + 2 * -1)j = (-15+16j)

# Division
div_z = z2 / z4 
# Result:(0.24324324324324323-0.5405405405405406j)

Sequence Data Types in Python

In Python, there are several sequence data types used to represent data collections in a specific order. They are as follows:

List Data Type in Python

Lists are defined using square brackets [] with comma-separated elements. They are a mutable, built-in data structure for storing item collections. The mutability feature of [] means it's modifiable after creation.

Lists are a widely used data structures in Python because they support various operations and offer flexibility.

The element inside a list can be of any data type, list included.

# List creation

the_list = [1, 2, 4, 5]


# creating a mixed data list
multiple_data_list = [1, 'hi', 2.57, False]



print(the_list[0])   # Output: 1
print(multiple_data_list[2])  # Output:2.57


# Mutable feature of list

the_list[0] = 10          # Modify the first element
the_list.append(9)        # Append a new element
the_list.extend([5, 4])   # Extend the list with another list
the_list.remove(2)        # Remove an element by value
del the_list[0]           # Remove an element by index

Tuple Data Type in Python

In Python, a tuple is an immutable built-in data type for storing an ordered collection of elements.

Tuples are created using parentheses (). Just like lists, Tuples have comma-separated elements.

A tuple requires a comma after the element to differentiate it from a parenthesized expression, even if it contains single element. The immutability feature of tuples implies that you cannot change them after creation.

# Empty tuple
zilch_tuple = ()   

 # Tuple with a single element            
single_tuple = (1,)  

 # Tuple with multiple elements 
multiple_tuple = (1,8,9,3, 5) 

# Tuple immutability

single_slice[0] = 5

print(tuple_slice) # TypeError: 'tuple' object does not support item assignment


# Different elements tuples 
mixed_tuple = (1, 'hello', 3.14, True) 

 # Nested tuple 

nested_tuple = ('Orange', ('banana', 'Pineapple'), ["he", 'she', 'them']) 


 # Concatenate tuples

add_tuple = multiple_tuple + (6, 7, 8)  # Output: (1, 8, 9, 4, 3, 5, 7, 8)

# Create a slice of the tuple
tuple_slice = add_tuple[1:3]     # Output: (8, 9)

String Data Type in Python

A string enclosed in either single (') or a double quote (") is an immutable sequence of characters used to represent textual data.

Python allows you to perform operations like, indexing, slicing, and concatenation on strings.

# Creaating a String with both single and double quote

single_string = 'Hello!'
double_string = "Python Programming!"

# Outputting the result 

print(single_string[0])    # Output: 'H'
print(double_string[-1])   # Output: '!'


print(single_string[0:5])    # Output: 'Hello'
print(double_string[::2])    # Output: 'Pto rgamn!'

# Concatenate the two strings

concatenate_string = single_string + ' ' + double_string
print(concatenate_string)   # Output: 'Hello! Python Programming'


# Some popular string methods like the upper,lower,find,replace, split and strip.

print(single_string.upper())              # Output: 'HELLO!'
print(double_string.lower())              # Output: 'python programming!'
print(single_string.find('World'))        # Output: -1
print(double_string.replace('Python', 'Java'))  # Output: 'Java Programming'
print(single_string.split(','))           # Output: ['Hello!']
print(double_string.strip())              # Output: 'Python Programming!'

Range Data Type in Python

The range function is used to iterate over elements in a list. By executing a task repeatedly, the range generates indices for the data structure.

The syntax for a range function is as follows:

range(start, stop, step)

The start represents a starting value if, when omitted, the range starts from 0, while stop is the number that indicates that the range should stop generating numbers.

The step being the last value, specifies the increment or step between each different number in the sequence. The default value for this parameter is 1.

The range function returns an immutable series of numbers.

# Generating a number from 0 to 10
for i in range(11):
    print(i)  # OUTPUT..... 0,1,2,3,4,5,6,7,8,9,10


# Generate a number from 1 to 19.
for i in range(1, 20):
    print(i) # OUTPUT.....1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19


# Generating numbers from 0 to 10 with a step of 2:

for i in range(0, 21, 2):
    print(i)  # OUTPUT.... 0,2,4,6,8,10,12,14,16,18,20


# Generate a list of numbers using the list function in conjuction with range:

new_list = list(range(15))
print(new_list)  # Output: [0, 1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14]

Mapping Data Type in Python

In Python, the dictionary dict is the primary data type for storing a collection of key-value pairs.

The dict is widely used in Python for different functions, such as mapping between related information, representing a set of data records, and storing configurations.

We can create a dict in Python with either the curly braces {} or the dict() constructor.

Some of the characteristics of a dictionary are as follows:

• Key-Value Pairs: A dict consists of a key associated with a specific value in a key-value pair. The function of the key is to look up the corresponding value in the dictionary.
• Uniqueness: Duplicate keys are not allowed in dict. Assigning a new value to an existing key will only replace the old value associated with that key.
• Key Immutability: The immutability nature of the keys ensures that keys remain "hashable" and consistent. Hence, keys in dictionary must be immutable. Some examples of immutable data types include integers, strings, and tuples.
• Flexible Values: Any data type including but not limited to lists, tuples, strings, numbers and even dictionaries can be associated with keys in a dictionary.

person = {
    "name": "Kamaldeen",
    "age": 32,
    "city": "Nigeria"
}

In the code above, the keys are the "name", "age", and "city" while their corresponding values are "kamaldeen", 32, and "Nigeria".

# Accessing values by key:

print(person["name"])  # Output: Kamaldeen

# Modifying values

person["age"] = 35  # Output: {'name': 'Kamaldeen', 'age': 35, 'city':
'Nigeria'}

# Adding a new key-value paie

person["job"] = "Engineer"  # Output: {'name': 'Kamaldeen', 'age': 32, 'city': 'Nigeria', 'job': 'Engineer'}

# Check if name is in person dictionary

if "name" in person:
    print("Name is present in the dictionary.") # Output:Name is present in the dictionary

Set Data Type in Python

In Python, a set is a built-in data type that represents a collection of unique elements with no particular order.

The elements in the set are immutable, but the set itself is mutable. Sets can be defined using curly braces {} with comma-separated elements or by the set() constructor. They gets used for mathematical operations like unions, intersections, and differences.

# Creating curly braces set
curly_set = {1, 2, 6, 4, 9}

# Creating  set() function set
func_set = set([1, 2, 6, 9, 5])

Some of the characteristics are:

• No defined order: In a set, there's no defined order because the elements are unordered.
• Uniqueness: Sets are unique in nature, because they do not allow duplicate elements.
• Mutability: Sets allow you to update either by adding or removing elements after creation.
• Elements Immutability: Mutable elements like lists cannot be an element of a set, because elements within a set must be immutable. Therefore, immutable data types like floats, integers , tuples and string can be used instead.

Set Operation

Python supports mathematical operations like union, intersection, difference, and more for sets.

Union Operation Using Sets in Python

The union mathematical operation of two sets joins all unique elements from both sets.

first_set = {1, 2, 3}
second_set = {3, 4, 5}

union_set = first_set | second_set  # Using the '|' operator
# Output: {1, 2, 3, 4, 5}

# or

union_method = first_set.union(second_set)  # Using the union() method

# Output: {1, 2, 3, 4, 5}

The union can be created with either the | or the union() method.

Intersection Operation using Sets in Python

In Python, the intersection is a mathematical operation of two sets that prints the common elements only.

first_set = {1, 2, 3}
second_set = {3, 4, 5}

union_set = first_set & second_set  # Using the '&' operator
# Output: {3}

# or

union_method = first_set.intersection(second_set)  # Using the union() method
# Output: {3}

print(union_set)
print(union_method)

The intersection can be created with either the & or the intersection() method.

Difference Operation using Sets in Python

In Python, the difference mathematical operation between two sets occurs when an element is present in the first, but not in the second.

first_set = {1, 2, 3}
second_set = {3, 4, 5}

union_set = first_set - second_set  # Using the '-' operator

# or

union_method = first_set.difference(second_set)  # Using the difference() method


print(union_set)
print(union_method)

The difference can be created with either by the - or the difference()method.

Add Operation using Sets in Python

The add() method of sets is used to add a single element to the set collection, while the update() method is for adding multiple element.

first_set = {1, 2, 3}
second_set = {3, 4, 5}

# Add with add method
first_set.add(4)

# Update with update method 
second_set.update({4,8,9,7})

print(first_set) # Output: {1, 2, 3, 4}
print(second_set)  # OUtput: {3, 4, 5, 7, 8, 9}

Remove Operation using Sets in Python

In Python, the function of the remove() method in sets is to remove a specific element if it exists. The discard() method is also used for removing an element if it exists.

The only difference is that discard() won't raise an error if the element doesn't exist, but remove() will raise a KeyError.

first_set = {1, 2, 3}
second_set = {3, 4, 5}

first_set.remove(5) # Output:KeyError: 5
second_set.discard(4)  # Output:KeyError: {3, 5}

print(first_set)
print(second_set)

Frozenset Operation using Sets in Python

The frozenset is a built-in immutable set. It gets defined like a regular set with {}, but its element cannot be changed or modified after creation.

# Creating a frozenset

frozen_set = frozenset([7, 2, 3, 1, 5])

# Frozensets are immutable.

 frozen_set.add(6)  # An AttributeError will be raised

# Elements of a frozenset cannot be changed once it's created

frozen_set[0] = 10  # TypeError will  be raised

# You can perform set operations like union, intersection, and difference on the frozenset

None Data Type in Python

In Python, the None data type represents the absence of a value or a null value.

It indicates the function does not a have a return value or the expression lacks a meaningful value.

Some key takeaways from the None data type:

• Type: None is called the NoneType data type in Python.
• Return Value: None is the default return value for a function without a value.
• Default Value: We can use None as a default argument in the function definition.

# Initializing z with None, indicating that it does not currently hold any meaningful value.

z = None
print(z)  # Output: None


y = None
if y is None:
    print("The Value of y is:" "x is None")

# Output: The Value of y is :y is None


def pair(y=None):
    if y is None:
        print("y is None")

pair()  # Output: y is None


# The greeting() function prints a message if a name is provided, otherwise it greets a stranger, but since the function does not return any value explicitly, it returns None by default.

def greeting(name):
    if name:
        print("Hi, " + name)
    else:
        print("Hi, Stranger")

result = greeting("Kamaldeen")  # Output: Hello, Kamaldeen
print(result)  # Output: None

Boolean Data Type in Python

In Python, there are only two values used for comparisons and logical operation when using the boolean data type. They are the True and False values.

The boolean values are the result that arises from the comparison operators such as the equal (==), the not equal (!=), the greater than (>), the less than (<), the greater than or equal to (>=), and the less than or equal to (<=).

a = 10
b = 15

# Comparison operators

print(a == b)  # False
print(a < b)   # True

# Logical operators

print(a < 10 and b > 5)  # False
print(a < 3 or b> 20)   # False
print(not(a == b))        # True

# Control Flow

age = 75

if age >= 18:
    print("You are an adult.")
else:
    print("You are a minor.")

# Functions return

def is_even(number):
    return number % 2 == 0

print(is_even(10))  # True
print(is_even(7))  # False

Wrapping Up

In this tutorial, you learned about the various data types in Python.

We talked about several built-in data types like the sequence, mapping, set, none, and Boolean types.

Happy reading!

The insertAdjacentHTML() method leads to better performance because you use it to dynamically insert new HTML content without affecting the existing content.

In this tutorial, we'll cover the following:

• Introduction to the insertAdjacentHTML() method
• Syntax of the insertAdjacentHTML() method
• Placement options in the insertAdjacentHTML() method
• Browser support for the insertAdjacentHTML() method
• Best Practices for using the insertAdjacentHTML() method
• Conclusion

Introduction to the insertAdjacentHTML() method

The insertAdjacentHTML() method provides an efficient way to manipulate web page structure without replacing all the content of an element. It's also the go-to method for inserting HTML elements or text elements into a specific position.

insertAdjacentHTML is a method in JavaScript that allows you to insert HTML elements or text into a specific position relative to a given element in the DOM (Document Object Model). This method provides flexibility in manipulating the structure of a web page dynamically.

Syntax of the insertAdjacentHTML() method

Here's what the syntax of the insertAdjacentHTML() method looks like:

HTMLelement.insertAdjacentHTML(position, element);

The insertAdjacentHTML method takes two parameters:

1. position: This parameter is a string representation of where the new HTML should be inserted in relation to the targetElement. It must match one of the following strings:

2. **"beforebegin"**: The beforebegin string value of the insertAdjacentHTML() method inserts the HTML element immediately before the specified element in the DOM.

3. **"afterbegin"**: The afterbegin string value of theinsertAdjacentHTML() method inserts the HTML element inside the targetElement, just before its first child.
4. **"beforeend"**: The beforeend is a string value of the insertAdjacentHTML() method that inserts an HTML element inside the targetElement, after its last child.

5. **"afterend"**: The afterend string value of the insertAdjacentHTML() method inserts an HTML element immediately after the specified element in the DOM.

6. element: The element to be inserted into the DOM tree.

Placement Options in the insertAdjacentHTML() Method

Now that you've seen the four possible parameters of the insertAdjacentHTML() method, let's see how they work with code.

• beforebegin: Here's an example using the beforebegin parameter in code:

const targetElement = document.querySelector('h1');
targetElement.insertAdjacentHTML('beforebegin', '<h2>Lawal</h2>');

Here's the output:

beforebegin

Recall that the beforebegin string value of the insertAdjacentHTML() method inserts the HTML element immediately before the specified element in the DOM.

In the above code result, our newly inserted HTML element h3 got inserted before our targetElement h2. I styleed our targetElement by adding a border to it for easy illustration.

• afterbegin: here's an example of using the afterbegin parameter in code:

const targetElement = document.querySelector('h1');
targetElement.insertAdjacentHTML('afterbegin', '<h2>Lawal</h2>');

And here's the output:

afterbegin

As defined above, the afterbegin string value of the insertAdjacentHTML() method inserts the HTML element inside the targetElement, just before its first child.

By checking the output of our code, you may realize that our newly inserted HTML element h3 got inserted inside our targetElement h2. Again, I styled our targetElement by adding a border to it for easy illustration.

• beforeend: here's an example of using beforeend in code:

const targetElement = document.querySelector('h1');
targetElement.insertAdjacentHTML('beforeend', '<h2>Lawal</h2>');

And here's the output:

beforeend

The general definition of beforeend is that it's a string value of the insertAdjacentHTML() method that inserts an HTML element inside the targetElement, after its last child.

From the code result, our newly inserted HTML element h3 got inserted inside our targetElement h2 after its child. I styled our targetElement by adding a border to it for easy illustration.

• afterend: here's an example of using aferend in code:

const targetElement = document.querySelector('h1');
targetElement.insertAdjacentHTML('afterend', '<h2>Lawal</h2>');

And here's the output:

afterend

As you now know, afterend is a string value of the insertAdjacentHTML() method that inserts an HTML element immediately after the specified element in the DOM.

In the above code, our newly inserted HTML element h3 got inserted immediately after our targetElement h2. I styled our targetElement by adding a border to it for easy illustration.

Browser Support for the insertAdjacentHTML() Method

The insertAdjacentHTML() method is a widely supported method that can be relied upon for your DOM manipulation needs across different modern browsers.

To see the browsers that support this method, check out the summary below:

browser compatibility

1. Edge: Supported across all versions.
2. Chrome: Supported across all versions.
3. Opera: Supported across all versions.
4. Safari: Supported across all versions, except version 3.1-3.2
5. Firefox: Supported across all versions, except version 2-7

Best Practices for Using the insertAdjacentHTML() Method

To effectively use the insertAdjacentHTML() method, here are some best practices to follow:

Understand the method

Understanding how the method works helps you specify the position to insert your HTML content. Understand the various positions and choose appropriately based on your requirements.

// Inserting the HTML content after the target element
document.getElementById('div').insertAdjacentHTML('afterend', '<div>New content before the target element</div>');

Use it sparingly

Overusing dynamic HTML element insertion methods is bad for code maintenance.

For a simple application, a direct DOM manipulation will do the job.

/ Consider Using this:
let newElement = document.createElement('div');
newElement.textContent = 'New element';
element.appendChild(newElement);


// Instead of this:
element.insertAdjacentHTML('beforeend', '<div>New element</div>');

Be conscious of performance

If you frequently insert large amounts of HTML content, manipulating the DOM can be expensive for performance. Try to minimize DOM updates, especially in performance scenarios:

// Consider using batch insertion:
let section = '';
data.forEach(item => {
  section += `<div>${item}</div>`;
});
element.insertAdjacentHTML('beforeend', section);


// Instead of inserting one by one in a loop:
data.forEach(item => {
  element.insertAdjacentHTML('beforeend', `<div>${item}</div>`);
});

Handling errors

When using the insertAdjacentHTML() method, if the HTML content you're trying to insert is invalid, the method may throw an error. Use try-catch blocks to handle these situations appropriately.

const div  = document.getElementById('div');

try {
    // Check if the value of div is true
    if (div.insertAdjacentHTML) {
        div.insertAdjacentHTML('beforeend', '<div>New Element</div>');
    } else {
        throw new Error('insertAdjacentHTML is not supported.');
    }
} catch (error) {
    // Handling the error

    console.error('Error:', error.message);


    // Alternate code
    div.innerHTML += '<div>Fallback: New Element</div>';
}

Conclusion

In this tutorial, you learned about the syntax and placement options of the insertAdjacentHTML() method. We also looked at browser compatibility, and some best practices while using the insertAdjacentHTML() method.

In this tutorial, you’ll learn about the following topics:

• What are Events in JavaScript?
• What are Event Handlers?
• Event Flow in the DOM
• What is Event Bubbling?
• What is Event Capturing?
• How Does event.stopPropagation Work?
• What is Event Delegation?
• Conclusion

What are Events in JavaScript?

Events do not only exist in JavaScript but in all programming languages. The primary idea behind events in JavaScript is the ability to run code when a certain event happens. This could be a user clicking a button or any other events you might think of that could trigger some code to run.

Although there’s a distinct difference between events on the browser and server side of JavaScript, the core idea remains the same.

As events transport data, an object is created and given as an argument to the function you set as an event handler. When events occur in JavaScript, an object that contains information about that event gets created. This object will then be passed as an argument to the event handler function. This gives you easy access to the event data and makes it easy to respond as well.

Here's a more detailed explanation:

• An event can be called by different actions. Examples are clicks, mouse movements, and time intervals.
• Javascript creates an event object whenever an event occurs. This object has properties and methods, and provides details about the event.
• You can set a function that will be executed whenever the event occurs with event handlers in JavaScript.
• The event object is automatically created whenever the event is triggered. This object is therefore passed as an argument to the event handler function.

Let's see what this looks like in code:

const button = document.getElementById('check')


button.addEventListener('click', (e) => {
  console.log('Event type: ' + e.type);
  console.log('Target element: ' + e.target);
});


//  The answer

// Event type: click
// Target element: [object HTMLButtonElement]

Code Explanation:

The above is a snippet of JavaScript code.

The function provided as the event handler gets called whenever the click event occurs on the button element. It then receives the event object as the event parameter, which allows for easy access to the properties and data related to the click event.

By gaining access to this event object within the event handler, you can customize your response based on the event data and properties.

There is specific informatioon available inside the event object based on the type of event that occured. For the click event in our example, the included details are the event.target and the event.type.

What Are Event Handlers?

Event handlers are like a special all-purpose remote control that can perform certain actions like changing channels on your TV, increasing the temperature of your AC, and changing the state of your lighting in your home. But they need a professional to handle a special button attached to it.

The above analogy explains the concepts of event handling in JavaScript. The remote control represents the application you are using. The HTML element-like button on the application is the special button attached to the remote. And the professional that handles the special button is the JavaScript.

Event handling in JavaScript makes applications and webpages responsive and interactive. They do this by defining and managing events and performing specific actions whenever those events occur.

An event handler is any function or method specifically define to respond to a specific event in JavaScript. It is also responsible for the execution of code when a particular event occurs. Here's an example:

const button = document.getElementById('check')


button.addEventListener('click', (e) => {
  console.log('Event', e.target)
  console.log('Button click')
});


//  The answer

// Event <button id=​"check">​Check Order​</button>​
// Button click

Code Explanation:

The above is a snippet of JavaScript code.

A click event handler is attached to the button element. When the button gets clicked, it logs the something to the console.

When an event occurs, an event object is created by the browser. This object is then passed as an argument to the event handler function. With this, data and properties within the event object can be accessed.

As you hopefully now understand, event handlers are a key part of creating dynamic web applications.

Event Flow in the DOM

Events are generally processed in three phases in the DOM. They are the capturing, the target, and the bubbling phase.

The capturing phase

The first phase is the capturing phase, which occurs when an element nested in various elements gets clicked. Right before the click reaches its final destination, the click event of each of its parent elements must be triggered. This phase trickles down from the top of the DOM tree to the target element.

The target phase

The target phase is the second phase that begins immediately after the capturing phase ends. This phase is basically the end of the capturing and the beginning of the bubbling phase.

The target element is the element where the event originally occurred. For example, if you submit a form on a web page, the form element is the target element for the submit event. In the case where there is an event handler on a button on a webpage, the button is the target element for the event handler.

Event handlers registered on the button element are considered to be the target element during this phase.

The bubbling phase

The bubbling phase, which is the last phase, is the reverse of the capturing phase. In this phase, the event bubbles up the target element through its parent element, the ancestor, to the global window object. By default, all events you add with addEventListener are in the bubble phase.

Event Flow Process

What is Event Bubbling?

Event bubbling, as I mentioned above, is the phase where the event bubbles up from the target element all the way to the global window object.

When an event "bubbles up" in the DOM event flow context, this refers to a phase in event flow where an event which traditionally occurs after the target phase continues to propagate from the target element to the root of the document through the DOM hierarchy.

How event bubbling works

The event starts to bubble up through the DOM hierarchy after it has been processed at the target element. The event then travels from the target element to the root of the document. It passes through all ancestor elements according to how they are nested in the bubbling phase.

During an event handler's execution phase, any event handlers registered on ancestor elements get executed. This allows for easy capture of events at various stages of the DOM hierarchy.

This action can be stopped using the stopPropagation() method on the event object. It's useful when you aim to prevent event handlers from the ancestor elements gettomg triggered.

With bubbling, events can be handled in a hierarchical manner. By setting an event handler on the parent element or container, you can handle events from multiple child elements.

Event bubbling allows for an easier implementation of event delegation.

Here's an example of how it works, which I'll explain below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <h1>Bubbling and Capturing phase</h1>

    <div>
      <button class="child">click me</button>
    </div>

    <script>
      const parent = document.querySelector("div");
      const child = document.querySelector(".child");

      parent.addEventListener("click", function () {
        console.log("clicked parent");
      });

      child.addEventListener("click", function () {
        console.log("clicked child");
      });
    </script>
  </body>
</html>



<!-- 

         RESULTS OF THE ABOVE CODE

         index.html:25 clicked child
         index.html:21 clicked parent

 -->

Code Explanation:

The above is a snippet of HTML and JavaScript code.

Inside the body element, we have the h1, div, and the button element. The div is the parent element of the button element. We gave a class name of child for the button element.

In the JavaScript section, we created variables for both the parent and child elements. Then we added event listeners to both the parent and child elements.

Thus, when the button gets clicked, the clicked child is first invoked. This means that the function within the parent element executes after the function within the child element.

What is Event Capturing?

Event capturing occurs when a nested element gets clicked. The click event of its parent elements must be triggered before the click of the nested element. This phase trickles down from the top of the DOM tree to the target element.

Event capturing can't happen until the third argument of addEventListener is set to the Boolean value of true as shown below (default value is false).

Whenever the third argument of addEventListener is set to true, event handlers are automatically triggered in the capturing phase. With this, the event handler attached to an ancestor element will be executed first when an event occurs on a nested element within the DOM hierarchy. This is unlike the default, where event handlers are triggered during the bubbling phase.

Event Capturing

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <h1>Bubbling and Capturing phase</h1>

    <div>
      <button class="child">click me</button>
    </div>

    <script>
      const parent = document.querySelector("div");
      const child = document.querySelector(".child");

      parent.addEventListener(
        "click",
        function () {
          console.log("clicked parent");
        },
        true
      );

      child.addEventListener("click", function () {
        console.log("clicked child");
      });
    </script>
  </body>
</html>

<!-- 

       RESULTS OF THE ABOVE CODE

      index.html:25 clicked parent
      index.html:21 clicked child

 -->

Code Explanation:

The above is a snippet of HTML and JavaScript code. Inside the body element, we have the h1, div, and the button element.

The div is the parent element of the button element. We gave a class name of child to the button element.

In the JavaScript section, we created variables for both the parent and child elements. We added event listeners to both the parent and child elements as well.

In the parent element, we set the Boolean value to "true" for the third argument. The default value is false.

Thus, when the button gets clicked, the clicked parent was first invoked. This means that the function within the parent element executes before the function within the child element.

How Does the event.stopPropagation Method Work?

By default, all event handlers are registered in the bubbling phase (from the target element to all its ancestor elements). This default configuration can be modified by adding the event.stopPropagation method to the target element.

As its name suggests, the Event.stopPropagation method stops propagation. Any other listener for the same type of event on some ancestor element will not trigger their event listener for the event.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <h1>Bubbling and Capturing phase</h1>

    <ul>
      <li>Kamal</li>
      <li>Lawal</li>
      <li>Olaide</li>
      <li>Ayinde</li>
    </ul>

    <script>
      const parent = document.querySelector("ul");
      const li = document.querySelectorAll("li");

      parent.addEventListener("click", function () {
        console.log("clicked parent");
      });

      li.forEach(function (list) {
        list.addEventListener("click", function () {
          event.stopPropagation();
          event.target.classList.toggle("highlight");
        });
      });
    </script>
  </body>
</html>

Unlike the default, event.stopPropagation will prevent the parent element ul from showing in the console. Note that the event.stopPropagation method can also be used in the capturing phase.

What is Event Delegation?

Imagine your office without a manger. This office is likely going to be less efficient than one with a manager. Managers don't do or oversee every task individually – instead, they will delegate responsibilities to their employees. This delegation allows the manager to efficiently manage the workload, and then step in if something goes wrong.

Event delegation in JavaScript is similar to the above example, as it makes it easier to manage and handle events on multiple child elements. It takes advantage of the DOM (Document Object Model) bubbling event. This means setting event listeners on ancestor elements allows you to handle events efficiently. Unlike setting event listeners on individual elements that trigger the events. Recall that in the bubbling phase, the events on the child element rise to their parent element.

Check the below code to help you understand how this works:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <ul>
      <li>Orange</li>
      <li>Banana</li>
      <li>Potato</li>
      <li>Apple</li>
    </ul>

    <script>
      const li = document.querySelectorAll("li");

      li.forEach(function (list) {
        list.addEventListener("click", function () {
          alert("Yes, I click");
        });
      });
    </script>
  </body>
</html>

In the above code, an event listener was added to each of the listItems. Then, whenever they get clicked, an alert pops up. Traditionally, this is not bad code, but it defeats the purpose of event delegation. In the code below, you'll see the importance of event delegation.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <h1>Bubbling and Capturing phase</h1>

    <ul>
      <li>Kamal</li>
      <li>Lawal</li>
      <li>Olaide</li>
      <li>Ayinde</li>
    </ul>

    <script>
      const ul = document.querySelector("ul");

      ul.addEventListener("click", function () {
        event.target.classList.toggle("highlight");
      });
    </script>
  </body>
</html>

Unlike the initial code, the parent of the listItems ul will handle the event here. So the parent will delegate the logic we want to achieve to the child. Recall that the listItems bubbles up in the DOM tree.

But there are some situations where it will be almost impossible to delegate to a child element. For example, it's impossible if the child has a nested child element itself. In this case, it will be impossible to delegate to a child element.

Here's a code example that shows you why it may be impossible to delegate to a child element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <h1>Bubbling and Capturing phase</h1>

    <ul>
      <li>
        <h2>Orange</h2>
        <p>Kamal</p>
      </li>
      <li>
        <h2>Apple</h2>
        <p>Lawal</p>
      </li>
      <li>
        <h2>Banana</h2>
        <p>Olaide</p>
      </li>
    </ul>

    <script>
      const ul = document.querySelector("ul");

      ul.addEventListener("click", function () {
        event.target.classList.toggle("highlight");
      });
    </script>
  </body>
</html>

The above code will not produce the expected output. This is because in our code, we use event.target.

In JavaScript, event.target is the actual DOM element that gets clicked. In this instance, the three possible outcomes are the li, h2, and the p. The code below shows the solution to this problem:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Practice</title>
  </head>
  <body>
    <h1>Bubbling and Capturing phase</h1>

    <ul>
      <li>
        <h2>Orange</h2>
        <p>Kamal</p>
      </li>
      <li>
        <h2>Apple</h2>
        <p>Lawal</p>
      </li>
      <li>
        <h2>Banana</h2>
        <p>Olaide</p>
      </li>
    </ul>

    <script>
      const ul = document.querySelector("ul");

      ul.addEventListener("click", function () {
        event.target.closest("li").classList.toggle("highlight");
      });
    </script>
  </body>
</html>

To get the expected result of selecting the listItem, we combine both the DOM traversal method with event.target.

The closest method is available on DOM objects. closest traverses up in the ancestry tree. You can select the closest element with any CSS selector by ID, tag, or classname. One interesting thing is that closest includes the element you call it on, in this case the li.

Conclusion

Hopefully after reading this guide, you now have a clearer understanding of events, event handlers, and event flow in JavaScript.

You learned about how event capturing and bubbling work, and you should now understand the main concepts behind event delegation, too.

Thanks for reading!

This is why code formatters are so useful.

A code formatter is a tool that formats code according to certain standards. It makes it so you don't have to worry as much about code formatting. Instead, you can focus on writing good code. This save time and also reduces your stress.

In this guide, we will talk about the Prettier code formatter. We will also talk about alternatives to Prettier like JsFmt, StandardJS, EsLint + EditorConfig, and Beautifier. Hopefully you’ll take away something that you can use to improve your code formatting.

Brief Overview of Prettier

Prettier is a popular code formatter that can handle complex code structures and format your code in a readable way.

It operates on the principle of no configuration required and it's designed to produce readable, consistent code.

Prettier is an opinionated tool that encourages programmers to follow its formatting rules. It also parses the code and reprints it uniformly.

Why Explore Alternatives to Prettier?

There are many advantages of using Prettier. But like every other tool, exploring alternatives is sometimes a good idea. Here are some of the reasons for exploring alternatives to Prettier:

1. Inflexible style guides: Prettier adopts a strict set of formatting rules, and does not allow for much customization. Some programmers want a tool with a lot of configurations available.
2. Speed: Although Prettier is fast, you may need a tool that provides faster and better performance in large codebases or real-time formatting.
3. Language support: Prettier may not support (or might offer inadequate support) for the language you use.
4. More features: While Prettier is open source, you might prefer a paid code formatter that has more features and better integration with other tools.

In the guide, we will talk about four alternatives to Prettier. They are:

• JsFmt
• StandardJS
• ESLint+EditorConfig
• JS Beautifier

JsFmt Overview

JsFmt is a code formatter that uses esformatter as a formatting tool. It automatically reformats JavaScript code according to a set of predefined rules. It is available specifically to re-write, format, search, and validate JavaScript code.

To install JsFmt, run this command:

npm install -g jsfmt

A .jsfmtrc file, which can either be a JSON or INI formatted file, can overwrite any of the esformatter formatting options.

{
  "indent": 4,
  "line_ending": "unix",
  "quote": "single"
}

In this example, we specified the spaces for indentation to be four, we chose line-ending to be unix, and we picked single as the quote style for strings.

You can use the jsfmt rewrite method to change values in your JavaScript code. Here's an example of how to do that:

const x = 5;
const y = 10;
const z = x + y;
console.log(z);

//  The output will change to the below code after writing:  npx jsfmt --rewrite '5 -> 20' reduce.js

const x = 20;
const y = 10;
const z = x + y;
console.log(z);

To learn more about JsFmt, you can read its documentation here.

Features of JsFmt

1. Formating: JsFmt can format code according to a set of predefined rules.
2. Integrations: you can integrate JsFmt with popular code editors like Visual Studio Code, Sublime Text, and Atom, making it easy to format your code directly in your editor.
3. Command-line interface: JsFmt allows you to format your code as part of your build process or development workflow in the command line.

JsFmt Formatting Rules

Some of the formatting rules adopted by JsFmt are as follows

1. Set indent: With the --indent option, JsFmt indents your code with two spaces per level.
2. Quotes: In JsFmt, single quotes are the default for strings, but you can change this with the --double-quote option.
3. Wrapping: you can use --linene-width to change the default wrap lines setting in JsFmt.
4. Semicolons: JsFmt adds semicolons at the end of each statement by default. You can disable this using the --no-semi option.

Pros of JsFmt

1. Formatting, searching, and re-writing of JavaScript.
2. Customizable: JsFmt's flexibility makes it a popular choice for many development teams. It is a highly customizable tool that you can configure to match the specific requirements of a project.

Con of JsFmt

1. Lack of flexibility: despite the fact that it's customizeable, certain parts of JsFmt may not always be configurable to match the needs of your project.

StandardJS Overview

StandardJS is an open-source, no configuration linter, formatter, and JavaScript style guide. It checks the code for probable errors with the linter. It also formats code automatically, and helps you write code that is easy to read and understand.

It is the most popular option, coming in at 27,905 stars on GitHub clean code linter. It is also a powerful tool for ensuring the quality and consistency of your JavaScript code.

You can either install it globally or locally on your machine. To install globally, use the first command, while the second command is for installing locally. Note that to install it, you must have Node and npm installed on your computer.

To install globally: $ npm install standard --global

To install locally: $ npm install standard --save-dev

Alternatively, you can add StandardJS to the package JSON.

{
  "name": "my-cool-package",
  "devDependencies": {
    "standard": "*"
  },
  "scripts": {
    "test": "standard && node my-tests.js"
  }
}

The styles are checked automatically when you run the command:

npm test

To illustrate how it works, check the JavaScript code below:

let number = 10;
if (number == 10) {
  alert("yes");
} else {
  alert("no");
}

// The Output after running the npm test in the terminal

> test
> standard && node my-tests.js

standard: Use JavaScript Standard Style (https://standardjs.com)
  C:\Users\hp\Desktop\pretier\Js\script.js:5:5: Parsing error: Unexpected token else (null)

StandardJS shows that the code has a parsing error.

To fix most issues, run the following code:

standard --fix

Features of StandardJS

1. Community: A community of contributors guides the development of StandardJS by providing bug fixes and new features.
2. Linting: StandardJS linting catches style issues and programmer errors early.
3. Automatic code formatting: StandardJS get rid of messy and inconsistent code.
4. Command line integration: It has a command-line interface for running linter checks and auto-formatting code.

StandardJS Formatting Rules

Some of the widely used StandardJS formatting rules are listed below:

1. Indentation: StandardJS enforces a consistent indentation level of 2 spaces by default. To strictly implement this, you need to add the --fix option.
2. Line wrap: StandardJS doesn't enforce the rule of line length, but it recommends keeping lines shorter than 80 characters. Use $ myfile.js | standard --stdin to manually check the file length.
3. Semicolons: StandardJS recommends using semicolons for clarity and to avoid potential issues. But the tool doesn't enforce this. To enforce the use of semicolons, use this:

{
  "extends": "standard"
}

1. Spaces around operators: StandardJS recommends using spaces around operators, such as + and -, but it doesn't enforce this rule.

Pros of StandardJS

1. Zero configuration: No decisions to make. StandardJS is the easiest way to enforce code quality in your project.
2. Easy installation: StandardJS is easy to install, and you can use it with most editors and IDEs.
3. Enhances Productivity: StandardJS saves developers time and increases productivity by formatting code according to its rules.
4. Wide support: Most editors and IDEs support StandardJS using plugins and integrations.
5. Consistency: StandardJS promote consistency across projects by enforcing a strict set of coding rules.

Cons of StandardJS

1. Opinionated: Some developers may find the tool too opinionated. If that's the case, you might prefer to use other linting tools that allow for more customization.
2. Limited flexibility: StandardJS enforces a strict set of rules and conventions, which some developers may feel restricted by and prefer a more customizable approach.

ESLint + EditConfig Overview

ESlint provides configurable rules that you can tailor according to your specific project needs. It is one of the most popular JavaScript linter that analyzes programming errors, bugs, and suspicious constructs.

You can extend its functionality by adding plugins, which can provide custom parsers and extra rules.

You'll need Node installed on your before installing ESLint. To install it, use the command below:

npm init @eslint/config

Alternatively, you can create this manually on your machine:

npm install --save-dev eslint

For both installations, you need to have installed a package.json file. If not, run this command

npx eslint --init

The command will ask a series of questions about your project, coding style, and preferences to generate your configuration file.

You can run ESLint on any of your directories or files with this command:

npx eslint yourfile.js

Rules can be turned off and you can run the toolonly with basic syntax validation, as ESLint is configurable and flexible to your use case.

Once you have generated the configuration file, you can customize according to your needs. The configuration file is a JavaScript file that exports an object with the configuration settings.

For example, you can specify the rules you want, plugins to use, and environments for your code:

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
    "indent": ["error", 4]
  }
}

The semi, quotes, and indent are the names of the rules in ESLint, while the error level of the rule is the first value. There are only three outputs for the first values. They are:

• "off" or 0 - turn the rule off
• "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
• "error" or 2 - turn the rule on as an error (exit code will be 1).

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint: recommended",
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "indent": ["error", 4],
    "quotes": ["error", "single"],
    "semi": ["error", "never"]
  }
}

In this example, you specify that your code should run in a browser environment. Enable ECMAScript 2018 syntax, and follow the ESLint rules. You've also enabled three specific rules: indent, quotes, and semi.

The indent rule determines that an alert error will be thrown if indentation is more than 4 spaces. Likewise if you use double-quotes instead of single, there will be an error. You also specified not to use semi-colons.

To fix most of the issues in ESLint, use this command:

npx eslint yourfile.js --fix

Here's an example:

const numbers = [1, 3, 5, 2, 6, 78, 8];
let peoples = ["shola", "kamal"];
console.log(peoples);

// The output

 error  'numbers' is assigned a value but never used  no-unused-vars
   error  Extra semicolon                               semi

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

EditorConfig Overview

EditorConfig is an open-source file format. It provides standard ways of defining and maintaining coding styles in a project.

It maintains consistent coding styles which is especially useful when you have many developers working on the same project across various editors and IDEs. The tool consists of a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.

You'll need to create a file named .editorconfig in the directory. EditorConfig plugins will look for the file in the directory of the opened file and on every parent directory.

Files are read from top to bottom, and a search for .editorconfig files will stop if the root file path is reached.

Creating an EditorConfig file is straightforward. Open a new file, and save it with .editorconfig as shown below.

Inside the .editorconfig file, the following wildcard patterns are used:

root = true

[*]

indent_size = 4
indent_style = space
end_of_line = lf
insert_final_newline = true

 // Set root to true: A search for .editorconfig files will stop if the root file path is reached or an EditorConfig file with root=true is found.

 //[*]: Except for path selectors, it matches any string of characters.

 //indent_size: Indent size is set to 4. 
 //Indent_style: set to space
 //end_of_line: Set to lf
//insert_final_newline: Set to true

To know more about the wildcards pattern, visit the EditorConfig docs.

Using ESLint and EditorConfig together can help to spot potential issues early. It also ensures that your code is consistent, maintainable, and of high quality.

The combination of ESLint and EDitorConfig saves you time on code maintenance and debugging.

Features of ESLint

1. Configurable: ESLint allows you to customize and add your own rules to the configuration file.
2. Support ECMAScript: ESLint ensures your code is compatible with the latest language features.
3. Supports many file formats: ESLint can analyze JavaScript code in a variety of file formats, including but not limited to .js, .jsx, and .vue.
4. Integration: ESLint integrates seamlessly with Webpack and Gulp, which are popular build tools.

ESLint Formatting Rules

Some of the popular formatting rules in ESLint are listed below:

1. Indentation: ESLint by default expects a four-space per level indent. But you can customize this using the popular --fix option.
2. Semicolons: ESLint enforces the use of semicolons at the end of each statement. This rule is set to "always" by default. Use the popular --fix option to reset it to "never".
3. Line wrap: Use the max-len rule to change the maximum line length from the default 80 to your preferred value.
4. Quotes: The quotes rule can be changed from the default value of "single" to "double" using the --fix option.

Pros of ESLint

1. Saves time: ESLint saves time by reducing the amount of time spent on manual code reviews and debugging.
2. Active Community: ESLint has a wide and active community base that contributes to the development of the tool and its ecosystem.
3. Code analyzer: ESLint analyze your code to quickly find problems.
4. Consistency: ESLint helps in maintaining clean and readable code by enforcing a consistent coding style.

Cons of ESLint

1. Rule conflicts: With a large set of rules, ESLint rules can sometimes conflict with one another, resulting in more configuration and fine-tuning.
2. Steeper learning curve: ESLint has a pretty steep learning curve, as it has many rules and learning how to configure them can take time.
3. False positives: ESLint can sometimes flag code as problematic code even when it is correct, which can be frustrating for developers.

Overview of JS Beautifier

JavaScript Beautifier, also known as js-beautify, is an open-source, cross-platform command-line tool. It is a beautifier for re-formating and re-indenting bookmarklets, ugly JavaScript, and it partly deobfuscates scripts.

You can install JS beautifier both locally and globally.

Run npm -g install js-beautify to install globally, and npm install js-beautify to install locally.

You can configure it through the command line option.

After local installation, you can import and call the appropriate beautifier methods for JS, CSS, or HTML. An example of how to call the methods goes like this: beautify (code, options).

While code is the string of code to be beautified, options is an object with the settings you would like used to beautify the code. See the example below for a JavaScript script file:

npx beautify("script.js",{indent_size:4})

You can also configure it through a configuration file:

{
  "indent_size": 4,
  "indent_char": " ",
  "indent_with_tabs": false,
  "brace_style": "collapse"
}

Create a file .jsbeautifyrc in the root directory of your project. This option will override the default option of JS beautifier. You can also use Beautifier on your web browser. Learn more about JSbeautifer from its docs here.

Feature of JS Beautifier

1. Formatting: You can customize JS Beautifier to fit your personal preferences and coding style because it offers varieties of formatting options, such as indentation size and braces style.
2. Online version: You can beautify JavaScript using JS Beautifier in your web browser, just as you can on the command line.

JS Beautifier Formatting Rules

1. Indentation: The default identation in JS Beautifier is 4 spaces, but you can change it to 2 or 8 spaces, or use tabs instead. Use the indent_size option to specify the number of spaces to use for indentation.
2. Semicolons: You can change your semicolon settings in JS Beautifier with the semicolon option. You change this by alternating the value of the semicolon option between "true" or "false".
3. Line wrap: Use the max_char option to limit each line to 80 characters. You can set the value of the max_char to 80 or any other preferred number.

Pros of JS Beautifier

1. Time-saving: JS Beautifier saves time. It automates the many steps of formatting and organizing code.
2. Online presence: JS Beautifier's online presence is a game changer, as a lot of non-developers will be able to use it.
3. Detects errors: JS Beautifier helps catch small errors that can be difficult to spot otherwise.
4. Integration: JS Beautifier's compatibility with varieties of code editors and IDEs makes it a versatile tool.

Cons of JS Beautifier

1. Complexity: Despite having an online version, JS Beautifier is somewhat complex for beginners.
2. Potential for over-formatting: In some cases, JS Beautifier may make the code harder to read because of over-formatting.

Results from all the Formatting Tools

We'll use the code sample below to test how these four popular tools format code:

const numbers = [2,3,8,9,7]

          let peoples = ['kamal', 'lawal', "shola", "olaide"];

As you can see, this code isn't properly formatted. So let's try the tools to see how they help.

Formatting example with JsFmt

Using the above code as a sample, the command npx jsfmt --write "Your file" will format the code to this:

const numbers = [2, 3, 8, 9, 7]

let peoples = ['kamal', 'lawal', "shola", "olaide"];

As you can see, there is a noticeable change in the code, and you can configure this to your desired taste.

Formatting example with StandardJS

By running the popular npx standard--fix command from the terminal, you will have the following result.

const numbers = [2, 3, 8, 9, 7]

const peoples = ['kamal', 'lawal', 'shola', 'olaide']

Notice the code was properly formatted, most especially the elements with double quotes within the peoples array.

Formatting example with ESLint

Using the same code as above, the npx eslint "Your file name --fix" command will quickly format to this:

const numbers = [2,3,8,9,7]

let peoples = ['kamal','lawal','shola','olaide']

You can also change the configuration of the tool, by changing the elements of the peoples array so they're inside double quotes:

const numbers = [2,3,8,9,7]

let peoples = ["kamal","lawal","shola","olaide"];

You can do this by going to the .eslintrc file and manipulating the rules like this:

{
  "quotes": ["error", "double"],
  "semi": ["off", "always"]
}

Formatting example with JS Beautifier

Here's the result from JS Beautifier for the same code:

const numbers = [2, 3, 8, 9, 7]
let peoples = ['kamal', 'lawal', "shola", "olaide"];

You can configure it more from your JSON file if you wish.

Now you've seen these formatters in action!

Conclusion

In this guide, we talked about some alternatives to using Prettier. We discussed Jsfmt, ESlint, StandardJS, and JS Beautifier, as well as their features, pros, and cons.

I hope you are now more equipped to choose the right linter/formatter for your coding projects.

In this article, we will cover the following topics:

• What is an Array?
• What is a Set?
• What is a Map?
• How to Create a Set
  a. How to Create a Set with a Value
• Properties and Methods of a Set
  a. How to use the add method in a set
  b. How to use the has method in a set
  c. How to use the delete method in a set
  d. How to use the clear method in a set
  e. How to use the entries method in a set
  f. How to use the values method in a set
  g. How to use the size property in a set
  h. How to use forEach in a set
  i. How to use a set to Get Unique Value from an Array.
• How to Create a Map
• Properties and Methods of Map
  a. How to Get Values from the Map Object
  b. How to Add Data with the set Method
  c. How to Search an Element with the has Method
  d. How to Delete an Element with the delete Method
  e. How to Clear All Elements with the clear Method
  f. How to get all Entries in a Map with the entries Method
  g. How to Get All Keys in a Map with the keys Method
  h. How to Get All Values in a Map with the values Method
  i. How to Enumerate Over a Map
  j. How to Use Size Property in Map
• Map vs Object – What's the Difference?
• Benefits of Sets over Arrays
• Conclusion

What is an Array?

An array is the most important and most commonly used iterable among the trio. We use it to store lists and connected data of any kind and length.

Arrays have a lot of special array methods. They also have zero-based indexing for accessing elements. You can have duplicate elements in an array, and the element order is guaranteed.

What is a Set?

A set is a data structure used for storing data of any length and kind. Sets are iterables that have various special methods that are different from arrays.

Some of the characteristics of sets are that the order of elements is not guaranteed, you can't access elements by index, and you can't have duplicate elements. Sets are a great choice when you want to store data without duplicates.

What is a Map?

A map is another data structure/container used to store key-value pairs of data of any kind and length.

Maps are similar to objects, but with maps, you can use anything as a key. An object, on the other hand, takes strings, symbols, and numbers as keys.

Maps are iterables and come with various methods. Some of the features of maps are that the order is guaranteed, and values can be duplicated (but keys can't).

Now we'll learn more about each of these iterables so you understand how to use them.

How to Create a Set

Since we use sets to create unique values, an ID is a perfect example of something to create with a set. We can create a new set like this:

const ids = new Set();

To create a set, you start with the new keyword along with set. In the above code, we created a set of ids which returns an empty set.

Set(0) {size: 0}

How to Create a Set with a Value

You initialize the set with an iterable by creating a set with some initial value. An iterable such as an array, set, or nodelist can be passed to the set. The example below shows a set created from an array of 4 elements.

const ids = new Set([3,6,9,7]);
console.log(ids);

The output will be like this:

Set(4) {3,6,9,7}

From the result, the code returns a set with 4 elements.

Properties and Methods of a Set

Sets have several methods and a properties that you can use to retrieve, add, delete, check, and clear all the elements in the set. We will talk about all these methods and properties, and how to use them while working with the set.

How to use the add method in a set

We use the add method to add elements to the set. Create a set of fruits with 4 elements, it works like this:

const fruits = new Set(['apple'.'mango']);
fruits.add('banana');
console.log(fruits)

From the above code, banana was added to the set with the help of the add method which gives us this result:

Set(3) {'apple'. 'mango', 'banana'}

Sets store unique elements, which means that adding another banana to the set won’t be accepted.

How to use the has method in a set

To check if an element is contained in a set, you'll use the has method. In the code below, we'll check if a fruit set with various elements contained a specific banana element.

const fruits = new Set(['apple','mango']);
console.log(fruits.has('banana'));

This method will return false, because the element searched for is banana, which is not in the set. If it had been present, we would've gotten true back.

How to use the delete method in a set

You delete an item from a set using the "delete" method. The example below shows the "delete" method being used on a set of fruits containing 3 elements to delete one of the elements.

const fruits = new Set(['apple','mango', 'banana']);
fruits.delete('apple');
console.log(fruits);

The code prints out a new set of 2 elemets. If you try deleting an element that is not in the set, it ignores it.

Set(2) {'mango', 'banana'};

How to use the clear method in a set

The clear method is used to clear all the elements in the set. With a set of fruits containing 3 elements, we use the delete method to delete one of the elements.

const fruits = new Set(['apple','mango', 'banana']);
fruits.clear('apple');
console.log(fruits);

The code prints out a new set of 0 elements, as the clear method will return a set without any elements.

Set(0) {size : 0};

How to use the entries method in a set

You can retrieve all elements in a set using the "entries" method, which returns an iterable. You can then use a for loop or for-of loop to loop through the values.

The example below shows the creation of a set of fruits containing 5 elements, followed by the use of the "entries" method to loop through all elements of the array.

const fruits = new Set([100,160, 200,400,300]);
for( const fruit of fruits.entries()){
    console.log(fruit);
}

It returns an iterable of arrays, each with two elements.

(2) {100, 100}
(2) {160, 160}
(2) {200, 200}
(2) {400, 400}
(2) {300, 300}

How to use the values method in a set

You retrieve the values in a set by using the "values" method, which returns an iterable. You can then use a for loop or for-of loop to loop through the values.

The example below shows the creation of a set of fruits with 4 elements and the use of the "values" method to loop through the elements with a for-of loop.

const fruits = new Set([100,160, 200,300]);
for( const fruit of fruits.values()){
    console.log(fruit);
}

It returns an iterable, each with a single value:

100
160
200
300

How to use the size property in a set

You use the size property to determine the size of the set by returning the number of elements in it. To demonstrate this, we'll create a set of fruits that contains 3 elements.

const fruits = new Set(['apple','mango','banana']);
console.log(fruits.size);

The above code will return 3 as the size of the fruit set.

3

How to use forEach in a set

You can easily enumerate a set by using "forEach." The example below shows the creation of a set of fruits with some elements, followed by the use of "forEach" to print each element of the set.

const fruits = new Set([100,160, 200,400,300]);
fruits.forEach((fruit) => {
    console.log(fruit)
});

The code prints each element of the set like this:

100
160
200
400
300

How to use a set to Get Unique Value from an Array.

You can remove duplicate values from an array by using a set. The example below shows the creation of an array of duplicated numbers, followed by passing the array into a set to get all unique numbers, free from duplicates.

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

const numbers1 = new Set(numbers);
console.log(numbers1);

The above code shows an array of numbers with different duplicated numbers. The array was then passed on to the set of numbers and the output is shown below.

Set(10) {1,2,4,6,8,5,9,0,7,3};

The code above shows that the set has removed all the duplicated numbers and now has a size of 10.

As you can see, set is a data structure that helps you manage unique values.

How to Create a Map

You create a map by starting with the "new" keyword followed by "map." The example below shows the creation of a map of a player, which returns an empty map. You can create a new map like this:

const player = new Map();
console.log(player);

And it returns a map with an empty value.

Map(0) {size : 0}

You can also create a map using a constructor initialized with an array of arrays. Each array in the array is one key-value pair, and the key can be of any type. The example below shows the creation of a map of two arrays using the constructor.

const player = new Map([['key','value'],['lawal','kamal']]);
console.log(player);

The above code returns a map with two elements:

Map(2) { 'key' => 'value', 'lawal' => 'kamal'}

key and lawal are the keys of the map, while value and kamal are the values.

Properties and Methods of Map

Map has several methods and properties that we can use to retrieve, add, delete, search, and clear all the elements in the map.

We will talk about all these methods and properties, and how to use them while working with map.

How to Get Values from the Map Object

Extracting data from map is easy using the get method. Let's create an object of player1 with name and age properties. Then, the player1 object will be use as key in map. It works like this:

const player1 = { name: 'kamal', age: 30};

const playerData = new Map([[player1, [{date:'today',price :400}]]]);
 console.log(playerData);

In the above code, you can see that we used the player1 object as a key in a Map in playerData. By using the get method, you can extract values from the player1 used as a key in the Map.

Map(1)

It returns a map of size 1. The map contains a key which is the player1 that we created above.

key :{ name : 'kamal', age : 30}

And it returns a value, which was an array of a single object that contains a date and price.

0: {date:'today', price:400}

How to Add Data with the set Method

You can add data to the Map after you create it with the help of the set method as shown below:

const player = new Map();

player.set('kamal','lawal');

console.log(player);

We added the key-value pair kamal and lawal to an empty map with the set method. The set method is where you set a key-value pair. The key has to be the first option and the value has to be the last. Both the key and values can be of any type of data.

Map(1) {'kamal' => 'lawal'}

How to Search an Element with the has Method

The has method returns true if the map contains keys that match the search term. We can create a map of player with two key-value pairs as shown below.

const player = new Map([['key','value'],['small','medium']]);

console.log(player.has('small'));

The code will print true because the search term (small) is present in the map as a key.

true

But it will print false if the search term (medium) is present in the map not as a key but as a value.

const player = new Map([['key','value'],['small','medium']]);

console.log(player.has('medium'));

// output will be false, the searched term, (medium) is not a key but value

How to Delete an Element with the delete Method

We use the delete method to delete a specific element. Delete works if the searched term matches a key in an element. In this case, we're deleting small.

const player = new Map([['key','value'],['small','medium']]);

player.delete('small');

console.log(player);

The code will delete the key-value pair of small and medium. But, it won't work if the search term is not a key in the map.

const player = new Map([['key','value'],['small','medium']]);

player.delete('value');

console.log(player);
// It won't work, because the search term is a value in the map

How to Clear All Elements with the clear Method

To clear all elements of a map, we'll use the clear method.

const player = new Map([['key','value'],['small','medium']]);
player.clear();

console.log(player);

The code will print an empty map as its output.

Map(0) { size : 0}

How to get all Entries in a Map with the entries Method

The entries method is one of the Map methods you can use with for or for-of loops directly because it returns MapIterator.

What is a MapIterator?

A MapIterator is an iterator returned by the entries() method of a JavaScript Map object. It returns an array-like object of key-value pairs, with each pair represented as an array containing 2 elements. The MapIterator can be used in a for...of loop to iterate over all key-value pairs in a Map object.

With entries, you can get all the data, both the key and value of a map.

const player = new Map([['key','value'],['small','medium'],['fruit','another']]);

console.log(player.entries());

The values of all the keys and values will be logged as shown below:

MapIterator {'key' => 'value', 'small'=> 'medium', 'fruit' => 'another'}

How to Get All Keys in a Map with the keys Method

Aside from the entries method, the keys method also returns a MapIterator. With the keys method, you can get all the keys of a map, and it also runs a for or for-of loop:

const players = new Map([['key','value'],['small','medium'],['fruit','another']]);

for(const player of players.keys()){
  console.log(player);
}

This will print all the keys in the map as an output, like this:

key
small
fruit

How to Get All Values in a Map with the values Method

The values method is the last map method that returns a MapIterator and you can run a for or for-of loop directly on it. This is the method you should use when getting only values in the map is the priority.

const players = new Map([['key','value'],['small','medium'],['fruit','another']]);

for(const player of players.values()){
  console.log(player);
}

The output of the above code will be this:

value
medium
another

How to Enumerate Over a Map

For easy iteration in maps, you can use the popular forEach method as shown below:

const players = new Map([['key','value'],['small','medium'],['fruit','another']]);

players.forEach((key, value) =>{
  const message = `I want to be remeembered as the best ${key} pair ${value}`;
    console.log(message)
})

The above code will print this as the output of the iteration:

I want to be remembered as the best value pair key
I want to be remembered as the best medium pair small
I want to be remembered as the best another pair fruit

How to Use Size Property in Map

You can use the property size to determine the size of the map by returning the number of elements in it.

const player = new Map([['key', 'value'],['small','medium'],['fruit','another']]);

console.log(player.size);

This will print out 3 as the size of the map.

Map vs Object – What's the Difference?

As you can see, a map is similar to an object which raises the question – when should you use each one?

When to use map:

1. With map, you can use any type (and values) as keys.
2. Map provides better performance for large quantities of data.
3. Use a map for better performance when adding and removing data frequently.

When to use an object:

1. Objects can only use numbers, strings, and symbols as keys.
2. Objects are perfect for small to medium-sized sets of data.
3. Objects have better performance and are easier to create.

Benefits of Sets over Arrays

Arrays and sets are both data structures used for storing collections of elements. But sets have a slight edge over arrays because of:

• Uniqueness: With a set, duplicates are removed to reduce the size of the data structure (unlike an array which stores duplicates).
• Manipulating collections: It is easy to combine a set with other sets to perform various operations like intersections, unions, and differences.
• Performance: Because of the implementation using hash tables, set offers faster lookups and membership tests.

Conclusion

In this tutorial, you learned about the relationship between arrays, sets, and maps.

We created, modified, and deleted elements in maps and sets. We compared maps and objects, and lastly, we talked about the benefits of sets over arrays.

Objects are super important for grouping data and functionalities, so you can do a lot with an object in JavaScript. The DOM node, and any DOM node created with createElement are examples of an object in JavaScript.

In this article, we will cover all the following about objects:

• What is a JavaScript Object?
• How to Create an Object in JavaScript
• How to Add Properties in an Object
• Why let Keyword Over dot Notation?
• How to Modify Properties in an Object
• How to Delete Properties in an Object
• How to Use Special Keys in Objects
• How to Access Properties with Square Brackets
• How to Dynamically Set Properties
• Method Shorthand Syntax
• Advantages of Using Object Short Methods over Regular Methods.
• Object Spread Operator
• Object Destructuring
• How to Use the this Keyword in JavaScript
• Conclusion

What is a JavaScript Object?

Objects in everyday life have properties and “method” actions. Take, for instance, a fan. It's an object with properties such as make, color, or model, and actions it can perform such as cooling rooms and controlling humidity.

As explained above, objects in JavaScript are core data structures that comprise properties and methods. While methods are functions/actions an object can perform (such as driving and cooling rooms with real life objects like cars and fans), properties are characteristics of an object such as its name and value.

Objects let you group related data together and split code into logical pieces. In JavaScript, we have primitive values and reference values. Number, Boolean, Null, Undefined, String, and Symbol are primitive values, while objects like DOM nodes, Arrays, and so on are reference values.

In both real life and JavaScript, you can use objects in different ways depending on their properties and methods. We'll learn more about JavaScript objects now.

How to Create an Object in JavaScript

We'll use the code below as an example:

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}

In the above code, we have a person object that we created with curly braces. The object has key-value pairs. You can store key-value pairs in a JavaScript object, associating each key with a unique value.

These key-value pairs allow you to retrieve values using the associated keys. For instance, the above object represents a person with properties like "name", "age"," friends", and a function "greet". Each property becomes a key-value pair with the property name as the key and the property value as the value. Both properties and methods are created inside the object.

To create a key in an object, you don't need a let or const keyword. Because objects are dynamic, you can add or change properties without declaring a variable. Rather, you start with your preferred name, a colon, and then your value.

We created an array of friends inside the object to show we can have an object inside of an object. We created a method (which is a function) inside of an object with greet as the key.

How to Add Properties in an Object

There are two major approaches to adding properties to an object in JavaScript. The first is to create a brand-new object.

let person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
 person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  },
  isAdmin:true
}

With the above code, we created the first person object using the let keyword, allowing us to reassign it to a new value. We then added the "isAdmin" property to the person object. If you run console.log(person), you will see that "isAdmin" is now part of the object's properties.

The second approach is to add properties using dot notation.

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
person.isAdmin = true;

With dot notation, you can access properties that an object has not added before. For example, if the person object doesn't have an "isAdmin" property, accessing it will return "undefined".

You can add the "isAdmin" property to the person object using dot notation, and you can also overwrite any property by assigning a new value to it. This approach is shorter and simpler compared to other methods.

Why let Keyword Over dot Notation?

The choice between using the let keyword and dot notation depends on whether you need to create a new object reference or modify an existing one.

You would use the let keyword to create a new object when you need to create a new reference to an object, separate from any existing references to similar objects.

On the other hand, you would use dot notation to add or modify properties on an existing object reference. This is useful when you want to make changes to an object without creating a new reference.

How to Modify Properties in an Object

You can also use dot notation to modify properties in an object. The below code shows that the property name with the pair value kamal will be changed to lawal when modified using dot notation.

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
person.isAdmin = true;
person.name = 'lawal';
console.log(person);

How to Delete Properties in an Object

It is very simple to delete a property in an object. JavaScript has a special keyword called "delete" that allows you to discard any properties you wish.

const person = {
  name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}
person.isAdmin = true;
delete person.friends;
console.log(person);

The property friends will be deleted from the object with the above code.

How to Use Special Keys in Objects

You can use anything as a key name that you can use as a variable name. But not every key name can serve as a variable name because keys are more flexible than variables.

let person = {
 name:'kamal',
 age:37,
}

Suppose you want to use "last name" as a key instead of "name". JavaScript syntax does not allow two separate words in this naming convention.

But you can overcome this by using a special key in an object. JavaScript automatically converts any key you enter into a string, even the key "age". As a result, objects in JavaScript are a dictionary of string keys and values of any type.

let person = {
  last name:'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}

To use "last name" as a key in the above code, you need to inform JavaScript that it is a key by enclosing it in quotes, either single or double quotes will work. Using a name that can also be used as a variable is recommended instead of this exception method of setting a key.

let person = {
  'last name':'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
  greet:function(){
    alert('Hello World')
  }
}

Using single quotes to surround "last name" and using it as a key name is valid JavaScript code and will work properly.

How to Access Properties with Square Brackets

To add and modify properties in an object, you can use the object notation method. However, there is another method in JavaScript for accessing object properties, known as square bracket notation, which enables you to access a property created by a special key in JavaScript.

let person = {
  'last name':'kamal',
  age:30,
  friends:[
     'Shola','Ade','Ibraheem'
  ],
}
// console.log(person.last name); is not valid in JavaScript

You cannot access the key name 'last name' using the dot notation method, but you can use the square bracket notation, which is available for any object.

console.log(person['last name']);

The above code will display the value of the last name key which is kamal. However, it is crucial to enclose your key within single or double quotes.

How to Dynamically Set Properties

You can enable another dynamic feature with square brackets and objects in JavaScript. This works when you need to define a new property, especially when you don't know the property name.

For example, you won't know specific user input ahead of time. But, you'll need to add the property with that name to the object.

const userName ='level';

let person = {
 'first name':'kamal',
  age:30,
  [userName]: 'see',
}
console.log(person);

By not wrapping the userName in a square bracket, the property with the name userName will be added instead of the value stored inside it. Adding a square bracket to the userName will search and take the value stored in the variable as a key name and add it to a person object.

Method Shorthand Syntax

There is an alternative syntax you can use to define a method in a more efficient way. Traditionally, to create a method in an object, you need a key and a value, where you create the value as a method using the function keyword.

let person = {
  name:'jamaldeen',
  age:30,
  hobbies:[
     'reading','playing','sleeping'
  ],
  speek:function(){
    return this.hobbies
  }
}
console.log(person.speak());

In the above code, the method is created with a function keyword after a colon. Alternatively, you could do this:

let person = {
  name:'jamaldeen',
  age:30,
  hobbies:[
     'reading','playing','sleeping'
  ],
  speek(){
    return this.hobbies
  }
}
console.log(person.speak());

In JavaScript, creating a method with object short methods is a shorthand notation. Omitting the "function" keyword and the colon(:) before the function body is allowed using the short methods.

This is because with the short method syntax, the property is automatically defined as method, which renders the "function" keyword useless.

The code remains functional because the JavaScript engine recognizes the shorthand syntax and interprets it as a regular function definition.

Advantages of Using Object Short Methods over Regular Methods.

Some of the advantages of using object short methods over regular methods are as follows

1. Conciseness: Unlike regular methods, object short methods allow you to write more compact and readable code.
2. Improved performance: Although, the performance of both object short methods and regular are similar, but the shorter syntax makes it easier to write and maintain your code.
3. Reusability: You can easily reuse object short methods in other objects.
4. Better organization: With object short methods, you can easily group related methods within an object and keep your code organized.

While using object short methods is good, using regular methods may still be more appropriate. It's important to choose the right approach based on your particular requirements.

Object Spread Operator

The object spread operator is a popular and powerful syntax in JavaScript. The spread operator takes all the key-value pairs of an object and copies the key name and value into a new object.

An object is a reference value, and if you want a copy of the object without pointing to the same property in memory, the spread operator is the answer.

let person = {
  name:'kamal',
  age:30,
  hobbies:[
     'reading','playing','sleeping'
  ]
}
console.log(person);
const person2 ={...person};
console.log(person2.age);

The syntax for object spread operator goes between the opening and closing brackets. Then there should be three dots and the object you want to spread into this object.

Object Destructuring

Object destructuring is an important feature in JavaScript that allows you to pull out values from an object and assign them to individual variables.

To perform object destructuring, you use a destructuring pattern on the left-hand side of an assignment statement, and the object that you want to extract values from on the right-hand side. For example:

const person = { name: 'lawal', age: 39 };
const { person, age } = person;
console.log(name); // 'lawal'
console.log(age); // 39

The const statement uses object destructuring to extract the name and age properties from the person object and assign them to two separate variables. This is a concise and efficient way to extract values from an object, especially when dealing with complex objects.

Object destructuring also enables you to provide default values, in case the property you want to extract does not exist in the object. You can also rename the variables being extracted using an alias, giving you greater control over the structure and naming of the extracted values.

How to Use the this Keyword in JavaScript

What is the this keyword? this is a specific keyword in JavaScript which is most important when used inside of a function in an object. But you can use it anywhere in your code aside from the function body of an object.

this is a powerful keyword used in referencing the current object in which it's used.

let person = {
  name:'kamal',
  age:30,
  greet:function(){
    return `My name is ${this.name}, and my age is ${this.age} years old`;
  },
}
console.log(person.greet());
// My name is kamal, and my age is 30 years old.

The code above demonstrates that the "this" keyword refers to the object containing the function, in this case the "person" object, and the result displays the output of the "greet" function.

Regardless of its location within an object, the this keyword always refers to the entity that executed the function in the code. Using this in different contexts within the code can produce distinct results. For instance:

let person = {
  name:'kamal',
  age:30,
  greet:function(){
    return `My name is ${this.name}, and my age is ${this.age} years old`;
  },
}
console.log(this);

The output of the code shows that the this keyword when console.logged will print a window object.

Conclusion

In this tutorial, we learned about the JavaScript object, how to create an object, and how modify/delete properties in an object.

We briefly talked about how important the spread operator and object destructuring are in JavaScript object as well as the popular this keyword and how to use it in JavaScript objects.