js - freeCodeCamp.org

How to Use the "this" Keyword in JavaScript: A Handbook for Devs

Henry Adepegba — Thu, 10 Jul 2025 13:48:16 +0000

The this keyword in JavaScript is like a chameleon – it changes its meaning depending on where and how it's used.

Many developers struggle with this because it doesn't behave the same way in JavaScript as it does in other programming languages. Think of this as a spotlight that points to different objects depending on the context – much like how the word "here" means different locations depending on where you're standing when you say it.

In this handbook, you will learn why this keyword is important in JavaScript and how to work with it effectively.

Before diving into this guide, you should have:

Basic JavaScript knowledge: Understanding of variables, functions, and objects
Familiarity with ES6 syntax: Arrow functions, classes, and template literals
Basic DOM knowledge: How to select elements and add event listeners
Understanding of scope: How variables are accessed in different contexts
Object basics: Creating objects, and accessing properties with dot notation.

If you're comfortable with these concepts, you're ready to master the this keyword!

What we’ll cover:

Why is "this" Important?
The Four Main Rules of "this"
Rule 1: Explicit Binding - Taking Control
Rule 2: Implicit Binding - The Natural Way
- Nested Objects
- The Lost Context Problem
Rule 3: New Binding - Constructor Functions
- What happens with 'new'?
- Constructor Function Best Practices
Rule 4: Default Binding - The Fallback
- Global Variables and 'this'
Arrow Functions - The Game Changer
- Arrow Functions in Different Contexts
Class Context and 'this'
Common Pitfalls and Solutions
When to Use 'this' - Practical Guidelines
When NOT to Use 'this'
Best Practices and Tips
Modern JavaScript and 'this'
- 1. React Components
- 2. Node.js and 'this'
Conclusion

Why is "this" Important?

In JavaScript, this is a special keyword that refers to the object that is currently executing the code. It's a reference to the "owner" of the function that's being called. The value of this is determined by how a function is called, not where it's defined.

// Think of 'this' as asking "Who is doing this action?"
function introduce() {
    console.log(`Hello, I'm ${this.name}`);
}

// The answer depends on who calls the function

Code explanation:

function introduce() – This creates a function called introduce
this.name – The this keyword here will refer to whatever object calls this function
${this.name} – This is template literal syntax that inserts the value of this.name into the string
The function doesn't know what this refers to until it is actually called

Understanding this is crucial for JavaScript development for a few key reasons:

Object-Oriented Programming: this enables you to create reusable methods that can work with different objects
Dynamic context: It allows functions to adapt their behavior based on the calling context
Event handling: Essential for handling DOM events and user interactions
Understanding frameworks: Critical for working with React, Vue, Angular, and other frameworks
Code reusability: Enables writing flexible functions that can be used across different objects
Professional development: Mastering this distinguishes intermediate developers from beginners

The Four Main Rules of "this"

JavaScript determines the value of this using four main rules, applied in order of priority:

Explicit Binding (call, apply, bind)
Implicit Binding (method calls)
New Binding (constructor functions)
Default Binding (global object or undefined)

Let's explore each rule with detailed examples.

Rule 1: Explicit Binding – Taking Control

Explicit binding is when you explicitly tell JavaScript what this should refer to using call(), apply(), or bind(). This is like directly pointing at someone and saying "YOU do this task."

Using call()

The call() method allows you to invoke a function with a specific this value and arguments provided individually.

const person1 = {
    name: "Alice",
    age: 30
};

const person2 = {
    name: "Bob",
    age: 25
};

function greet(greeting, punctuation) {
    console.log(`${greeting}, I'm ${this.name} and I'm ${this.age} years old${punctuation}`);
}

// Using call() to explicitly set 'this' to person1
greet.call(person1, "Hello", "!"); 
// Output: "Hello, I'm Alice and I'm 30 years old!"

// Using call() to explicitly set 'this' to person2
greet.call(person2, "Hi", ".");
// Output: "Hi, I'm Bob and I'm 25 years old."

Code explanation:

const person1 = { name: "Alice", age: 30 }; – Creates an object with name and age properties
const person2 = { name: "Bob", age: 25 }; – Creates another object with different values
function greet(greeting, punctuation) – Defines a function that takes two parameters
this.name and this.age – These refer to properties of whatever object this points to
greet.call(person1, "Hello", "!") – The call() method does three things:
1. Sets this inside the greet function to point to person1
2. Passes "Hello" as the first argument (greeting)
3. Passes "!" as the second argument (punctuation)
When the function runs, this.name becomes person1.name ("Alice") and this.age becomes person1.age (30)
greet.call(person2, "Hi", ".") – Same process but now this points to person2

Using apply()

The apply() method is similar to call(), but arguments are passed as an array instead of individually.

const student = {
    name: "Sarah",
    grades: [85, 92, 78, 96]
};

function calculateAverage(subject, semester) {
    const average = this.grades.reduce((sum, grade) => sum + grade, 0) / this.grades.length;
    console.log(`${this.name}'s average in ${subject} for ${semester} is ${average.toFixed(1)}`);
    return average;
}

// Using apply() with arguments as an array
calculateAverage.apply(student, ["Mathematics", "Fall 2024"]);
// Output: "Sarah's average in Mathematics for Fall 2024 is 87.8"

// Equivalent using call()
calculateAverage.call(student, "Mathematics", "Fall 2024");

Code explanation:

const student = { name: "Sarah", grades: [85, 92, 78, 96] }; – Creates an object with a name string and grades array
function calculateAverage(subject, semester) – Function that calculates average of grades
this.grades.reduce((sum, grade) => sum + grade, 0) – Uses the reduce method to sum all grades:
- (sum, grade) => sum + grade – Arrow function that adds current grade to running sum
- 0 – Starting value for the sum
this.grades.length – Gets the number of grades in the array
average.toFixed(1) – Rounds the average to 1 decimal place
calculateAverage.apply(student, ["Mathematics", "Fall 2024"]) – The apply() method:
1. Sets this to point to the student object
2. Takes the array ["Mathematics", "Fall 2024"] and spreads it as individual arguments
3. So subject becomes "Mathematics" and semester becomes "Fall 2024"
When function runs, this.grades refers to student.grades and this.name refers to student.name

Using bind()

The bind() method creates a new function with a permanently bound this value. It's like creating a customized version of a function that always knows who it belongs to.

const car = {
    brand: "Tesla",
    model: "Model 3",
    year: 2023
};

function displayInfo() {
    console.log(`This is a ${this.year} ${this.brand} ${this.model}`);
}

// Create a bound function
const showCarInfo = displayInfo.bind(car);

// Now showCarInfo will always use 'car' as 'this'
showCarInfo(); // Output: "This is a 2023 Tesla Model 3"

// Even if we try to call it differently, 'this' remains bound to 'car'
const anotherCar = { brand: "BMW", model: "X3", year: 2022 };
showCarInfo.call(anotherCar); // Still outputs: "This is a 2023 Tesla Model 3"

Code explanation:

const car = { brand: "Tesla", model: "Model 3", year: 2023 }; – Creates a car object with three properties
function displayInfo() – A function that uses this.year, this.brand, and this.model
const showCarInfo = displayInfo.bind(car); – The bind() method:
1. Creates a new function based on displayInfo
2. Permanently sets this to point to the car object
3. Returns this new function and stores it in showCarInfo
showCarInfo() – When called, this function will always use car as this, regardless of how it's called
const anotherCar = { brand: "BMW", model: "X3", year: 2022 }; – Creates another car object
showCarInfo.call(anotherCar) – Even though we try to use call() to change this, it doesn't work because bind() creates a permanent binding

Partial Application with bind()

bind() can also be used for partial application, pre-setting some arguments:

function multiply(a, b, c) {
    console.log(`${this.name} calculated: ${a} × ${b} × ${c} = ${a * b * c}`);
    return a * b * c;
}

const calculator = { name: "SuperCalc" };

// Bind 'this' and the first argument
const multiplyByTwo = multiply.bind(calculator, 2);

multiplyByTwo(3, 4); // Output: "SuperCalc calculated: 2 × 3 × 4 = 24"
multiplyByTwo(5, 6); // Output: "SuperCalc calculated: 2 × 5 × 6 = 60"

Code explanation:

function multiply(a, b, c) – Function that takes three numbers and multiplies them
${this.name} calculated: ${a} × ${b} × ${c} = ${a * b * c} – Template literal that shows the calculation
const calculator = { name: "SuperCalc" }; – Object with a name property
const multiplyByTwo = multiply.bind(calculator, 2); – The bind() method here:
1. Sets this to point to calculator
2. Sets the first argument (a) to always be 2
3. Returns a new function that only needs two more arguments
multiplyByTwo(3, 4) – When called:
- a is already set to 2 (from bind)
- b becomes 3 (first argument passed)
- c becomes 4 (second argument passed)
- this.name refers to calculator.name ("SuperCalc")
- Result: 2 × 3 × 4 = 24

Rule 2: Implicit Binding – The Natural Way

Implicit binding occurs when a function is called as a method of an object. The object to the left of the dot becomes the value of this. This is like saying "the owner of this method is doing the action."

const restaurant = {
    name: "Mario's Pizza",
    location: "New York",
    chef: "Mario",

    welcomeGuest: function() {
        console.log(`Welcome to ${this.name} in ${this.location}!`);
    },

    cookPizza: function(toppings) {
        console.log(`${this.chef} at ${this.name} is cooking pizza with ${toppings}`);
    }
};

// Implicit binding - 'this' refers to the restaurant object
restaurant.welcomeGuest(); // Output: "Welcome to Mario's Pizza in New York!"
restaurant.cookPizza("pepperoni and mushrooms"); 
// Output: "Mario at Mario's Pizza is cooking pizza with pepperoni and mushrooms"

Code explanation:

const restaurant = { ... }; – Creates an object with four properties: name, location, chef, and two methods
welcomeGuest: function() { ... } – A method (function inside an object) that uses this.name and this.location
cookPizza: function(toppings) { ... } – Another method that takes a toppings parameter
restaurant.welcomeGuest() – When called this way:
1. JavaScript looks at what's to the left of the dot (restaurant)
2. Sets this inside welcomeGuest to point to the restaurant object
3. this.name becomes restaurant.name ("Mario's Pizza")
4. this.location becomes restaurant.location ("New York")
restaurant.cookPizza("pepperoni and mushrooms") – Similar process:
1. this points to restaurant
2. this.chef becomes restaurant.chef ("Mario")
3. this.name becomes restaurant.name ("Mario's Pizza")
4. toppings parameter receives "pepperoni and mushrooms"

Nested Objects

When objects are nested, this refers to the immediate parent object:

const company = {
    name: "TechCorp",
    departments: {
        name: "Engineering",
        head: "Jane Smith",
        introduce: function() {
            console.log(`This is the ${this.name} department, led by ${this.head}`);
        }
    }
};

// 'this' refers to the departments object, not the company object
company.departments.introduce(); 
// Output: "This is the Engineering department, led by Jane Smith"

Code explanation:

const company = { name: "TechCorp", departments: { ... } }; – Creates a company object with a nested departments object
departments: { name: "Engineering", head: "Jane Smith", introduce: function() { ... } } – The nested object has its own properties and method
company.departments.introduce() – When called:
1. JavaScript looks at what's immediately to the left of the dot before introduce
2. That's company.departments, so this points to the departments object (not the company object)
3. this.name becomes "Engineering" (from departments.name, not company.name)
4. this.head becomes "Jane Smith" (from departments.head)
The key point: this always refers to the object immediately before the dot, not the entire chain

The Lost Context Problem

One of the most common issues developers face with this is context loss. This happens when a method is passed as a callback function and loses its original object context. The problem occurs because JavaScript determines this based on how a function is called, not where it's defined.

When you pass a method as a callback (like to setInterval, setTimeout, or array methods), the function gets called without its original object context. Instead of this referring to your object, it falls back to default binding (undefined in strict mode, or the global object in non-strict mode).

This is why timer.tick works perfectly when called as timer.tick(), but fails when passed as setInterval(this.tick, 1000) – the calling context changes completely.

const timer = {
    seconds: 0,

    tick: function() {
        this.seconds++;
        console.log(`Timer: ${this.seconds} seconds`);
    },

    start: function() {
        // This will lose context!
        setInterval(this.tick, 1000);
    },

    startCorrect: function() {
        // Solution 1: Using bind()
        setInterval(this.tick.bind(this), 1000);

        // Solution 2: Using arrow function
        // setInterval(() => this.tick(), 1000);
    }
};

timer.start(); // Will log "Timer: NaN seconds" because 'this' is lost
timer.startCorrect(); // Will correctly increment and log the timer

Code explanation:

const timer = { seconds: 0, ... }; – Creates a timer object with a seconds property starting at 0
tick: function() { this.seconds++; ... } – Method that increments seconds and logs current value
start: function() { setInterval(this.tick, 1000); } – PROBLEMATIC method:
1. this.tick refers to the tick method
2. setInterval(this.tick, 1000) passes the tick function to setInterval
3. When setInterval calls tick after 1 second, it calls it as a standalone function (not as timer.tick())
4. This means this inside tick becomes undefined (in strict mode) or the global object
5. this.seconds++ tries to increment undefined.seconds, resulting in NaN
startCorrect: function() { setInterval(this.tick.bind(this), 1000); } – CORRECT solution:
1. this.tick.bind(this) creates a new function where this is permanently bound to the timer object
2. When setInterval calls this bound function, this still refers to timer
3. this.seconds++ correctly increments timer.seconds
Alternative solution setInterval(() => this.tick(), 1000):
1. The arrow function () => this.tick() preserves the this from the surrounding context
2. Inside the arrow function, this still refers to timer
3. this.tick() calls the method with proper context

Rule 3: New Binding – Constructor Functions

When a function is called with the new keyword, JavaScript creates a new object and sets this to that new object. This is like creating a new instance of something from a blueprint.

function Person(name, age, profession) {
    // 'this' refers to the new object being created
    this.name = name;
    this.age = age;
    this.profession = profession;

    this.introduce = function() {
        console.log(`Hi, I'm ${this.name}, a ${this.age}-year-old ${this.profession}`);
    };
}

// Creating new instances
const alice = new Person("Alice", 28, "developer");
const bob = new Person("Bob", 35, "designer");

alice.introduce(); // Output: "Hi, I'm Alice, a 28-year-old developer"
bob.introduce(); // Output: "Hi, I'm Bob, a 35-year-old designer"

console.log(alice.name); // Output: "Alice"
console.log(bob.name); // Output: "Bob"

Code explanation:

function Person(name, age, profession) { ... } – This is a constructor function (note the capital P)
this.name = name; – Sets the name property of the new object to the passed name parameter
this.age = age; – Sets the age property of the new object to the passed age parameter
this.profession = profession; – Sets the profession property of the new object
this.introduce = function() { ... } – Adds a method to the new object
const alice = new Person("Alice", 28, "developer"); – The new keyword:
1. Creates a new empty object {}
2. Sets this inside the Person function to point to this new object
3. Calls Person("Alice", 28, "developer") with the new object as this
4. The function adds properties to this new object
5. Returns the new object and stores it in alice
const bob = new Person("Bob", 35, "designer"); – Same process, creates a different object
alice.introduce() – Calls the introduce method on the alice object:
1. this inside introduce refers to alice
2. this.name becomes alice.name ("Alice")
3. this.age becomes alice.age (28)
4. this.profession becomes alice.profession ("developer")

What happens with 'new'?

When you use new, JavaScript does four things:

Creates a new empty object
Sets this to that new object
Sets the new object's prototype to the constructor's prototype
Returns the new object (unless the constructor explicitly returns something else)

function Car(make, model) {
    console.log(this); // Shows the new empty object
    this.make = make;
    this.model = model;

    // JavaScript automatically returns 'this' (the new object)
}

const myCar = new Car("Toyota", "Camry");
console.log(myCar); // Output: Car { make: "Toyota", model: "Camry" }

Code explanation:

function Car(make, model) { ... } – Constructor function for creating car objects
console.log(this); – When called with new, this shows the new empty object that was just created
this.make = make; – Adds a make property to the new object
this.model = model; – Adds a model property to the new object
const myCar = new Car("Toyota", "Camry"); – The new process:
1. Creates new empty object: {}
2. Sets this to point to this object
3. Calls Car("Toyota", "Camry")
4. Inside the function, this.make = "Toyota" and this.model = "Camry"
5. Object becomes: { make: "Toyota", model: "Camry" }
6. Returns this object and stores it in myCar
console.log(myCar); – Shows the final object with all its properties

Constructor Function Best Practices

When creating constructor functions, following established patterns makes your code more maintainable and less error-prone. Here are the key best practices demonstrated in a realistic example:

Use descriptive parameter names that match property names
Initialize all properties in the constructor
Add methods that modify the object state appropriately
Include validation logic for business rules
Provide user feedback for operations
Use consistent naming conventions throughout

Let's see these practices in action with a BankAccount constructor:

function BankAccount(accountNumber, initialBalance) {
    this.accountNumber = accountNumber;
    this.balance = initialBalance;
    this.transactions = [];

    this.deposit = function(amount) {
        this.balance += amount;
        this.transactions.push(`Deposit: +$${amount}`);
        console.log(`Deposited $${amount}. New balance: $${this.balance}`);
    };

    this.withdraw = function(amount) {
        if (amount <= this.balance) {
            this.balance -= amount;
            this.transactions.push(`Withdrawal: -$${amount}`);
            console.log(`Withdrew $${amount}. New balance: $${this.balance}`);
        } else {
            console.log(`Insufficient funds. Current balance: $${this.balance}`);
        }
    };
}

const account = new BankAccount("123456789", 1000);
account.deposit(500);  // Output: "Deposited $500. New balance: $1500"
account.withdraw(200); // Output: "Withdrew $200. New balance: $1300"

Code explanation:

function BankAccount(accountNumber, initialBalance) { ... } – Constructor for bank account objects
this.accountNumber = accountNumber; – Sets the account number property
this.balance = initialBalance; – Sets the initial balance
this.transactions = []; – Creates an empty array to store transaction history
this.deposit = function(amount) { ... } – Adds a deposit method to each account object:
1. this.balance += amount; – Increases the balance by the deposit amount
2. this.transactions.push(...) – Adds a record to the transactions array
3. console.log(...) – Shows confirmation message with new balance
this.withdraw = function(amount) { ... } – Adds a withdrawal method:
1. if (amount <= this.balance) – Checks if there's enough money
2. If yes: decreases balance, adds transaction record, shows confirmation
3. If no: shows an " insufficient funds message”
const account = new BankAccount("123456789", 1000); – Creates a new account with:
- Account number: "123456789"
- Initial balance: 1000
- Empty transactions array
account.deposit(500); – Calls the deposit method on the account:
1. this inside deposit refers to account
2. this.balance (1000) becomes 1500
3. Adds "Deposit: +$500" to transactions array
account.withdraw(200); – Calls withdraw method:
1. Checks if 200 <= 1500 (true)
2. this.balance (1500) becomes 1300
3. Adds "Withdrawal: -$200" to transactions array

Here are the best practices identified from the code example:

function BankAccount(accountNumber, initialBalance) { ... } – Best Practice 1: Constructor name uses PascalCase and descriptive parameters
this.accountNumber = accountNumber; – Best Practice 2: Initialize all properties with clear names
this.transactions = []; – Best Practice 2: Initialize collections to prevent undefined errors
this.deposit = function(amount) { ... } – Best Practice 3: Add methods that logically modify object state
if (amount <= this.balance) – Best Practice 4: Include validation logic to enforce business rules
console.log(...) – Best Practice 5: Provide immediate feedback for user operations
this.transactions.push(...) – Best Practice 6: Maintain audit trail with consistent data structure

Rule 4: Default Binding – The Fallback

When none of the other rules apply, JavaScript uses default binding. In non-strict mode, this defaults to the global object (window in browsers, global in Node.js). In strict mode, this is undefined.

// Non-strict mode
function sayHello() {
    console.log(`Hello from ${this}`); // 'this' refers to global object
}

sayHello(); // Output: "Hello from [object Window]" (in browser)

// Strict mode
"use strict";
function sayHelloStrict() {
    console.log(`Hello from ${this}`); // 'this' is undefined
}

sayHelloStrict(); // Output: "Hello from undefined"

Code explanation:

function sayHello() {console.log(`Hello from ${this}`);} – Function that logs the value of this
sayHello(); – Called as a standalone function (not as a method, not with new, not with call/apply/bind)
In non-strict mode:
1. No explicit binding rule applies
2. Not called as a method (no dot notation)
3. Not called with new
4. Falls back to default binding
5. this becomes the global object (window in browsers)
"use strict"; – Enables strict mode for the following code
function sayHelloStrict() { console.log(Hello from ${this}); } – Same function in strict mode
sayHelloStrict(); – In strict mode:
1. Same rules apply, but default binding behaves differently
2. Instead of using global object, this becomes undefined
3. This helps catch errors where this is used incorrectly

Global Variables and 'this'

In non-strict mode, global variables become properties of the global object:

var globalName = "Global User";

function showGlobalName() {
    console.log(this.globalName); // Accesses global variable
}

showGlobalName(); // Output: "Global User"

// In strict mode, this would be undefined
"use strict";
function showGlobalNameStrict() {
    console.log(this.globalName); // Error: Cannot read property of undefined
}

Code explanation:

var globalName = "Global User"; – Creates a global variable using var
In non-strict mode, var variables become properties of the global object
So globalName becomes window.globalName (in browsers)
function showGlobalName() { console.log(this.globalName); } – Function that accesses this.globalName
showGlobalName(); – Called as standalone function:
1. this refers to global object (window)
2. this.globalName becomes window.globalName
3. Which is the same as the global variable globalName
4. Outputs: "Global User"
"use strict"; – Enables strict mode
function showGlobalNameStrict() { console.log(this.globalName); } – Same function in strict mode
showGlobalNameStrict(); – In strict mode:
1. this is undefined (not the global object)
2. this.globalName tries to access undefined.globalName
3. This throws an error: "Cannot read property of undefined"

Arrow Functions – The Game Changer

Arrow functions don't have their own this binding. They inherit this from the enclosing scope (lexical scoping). This is like having a function that always remembers where it came from.

Let’s look at an example of some code that doesn’t use an arrow function (and has a problem). Then you’ll see how the arrow function fixes the issue:

const team = {
    name: "Development Team",
    members: ["Alice", "Bob", "Charlie"],

    // Regular function - 'this' refers to team object
    showTeamRegular: function() {
        console.log(`Team: ${this.name}`);

        // Problem: 'this' is lost in callback
        this.members.forEach(function(member) {
            console.log(`${member} is in ${this.name}`); // 'this' is undefined or global
        });
    },

    // Arrow function solution
    showTeamArrow: function() {
        console.log(`Team: ${this.name}`);

        // Arrow function inherits 'this' from parent scope
        this.members.forEach((member) => {
            console.log(`${member} is in ${this.name}`); // 'this' correctly refers to team
        });
    }
};

team.showTeamRegular(); 
// Output: Team: Development Team
//         Alice is in undefined
//         Bob is in undefined
//         Charlie is in undefined

team.showTeamArrow(); 
// Output: Team: Development Team
//         Alice is in Development Team
//         Bob is in Development Team
//         Charlie is in Development Team

Code explanation:

const team = { name: "Development Team", members: ["Alice", "Bob", "Charlie"], ... }; – Object with team info
showTeamRegular: function() { ... } – Regular function method
console.log(Team: ${this.name}); – Works correctly, this refers to team object
this.members.forEach(function(member) { ... }); – PROBLEM HERE:
1. forEach takes a callback function
2. function(member) { ... } is a regular function passed as callback
3. When forEach calls this function, it calls it as a standalone function
4. this inside the callback uses default binding (undefined or global)
5. this.name is undefined, so output shows "undefined"
showTeamArrow: function() { ... } – Method using arrow function solution
this.members.forEach((member) => { ... }); – SOLUTION:
1. (member) => { ... } is an arrow function
2. Arrow functions don't have their own this
3. They inherit this from the surrounding scope
4. The surrounding scope is showTeamArrow method where this refers to team
5. So inside arrow function, this still refers to team
6. this.name correctly becomes team.name ("Development Team")

Arrow Functions in Different Contexts

Arrow functions behave differently depending on where they're defined, not how they're called. Understanding these different contexts is crucial for predicting this behavior:

Different contexts:

Global context: Arrow functions inherit global this
Object methods: Arrow functions DON'T get the object as this
Inside regular methods: Arrow functions inherit the method's this
Class properties: Arrow functions are bound to the instance

Let's explore how the same arrow function syntax produces different results in each context:

// Global context
const globalArrow = () => {
    console.log(this); // Refers to global object (or undefined in strict mode)
};

// Object method
const obj = {
    name: "Object",

    regularMethod: function() {
        console.log(`Regular: ${this.name}`); // 'this' refers to obj

        const innerArrow = () => {
            console.log(`Arrow inside regular: ${this.name}`); // Inherits 'this' from regularMethod
        };

        innerArrow();
    },

    arrowMethod: () => {
        console.log(`Arrow method: ${this.name}`); // 'this' refers to global, not obj
    }
};

obj.regularMethod(); 
// Output: Regular: Object
//         Arrow inside regular: Object

obj.arrowMethod(); 
// Output: Arrow method: undefined (or global name)

Code explanation:

const globalArrow = () => { console.log(this); }; – Arrow function in global scope:
1. Arrow functions inherit this from enclosing scope
2. Global scope's this is the global object (or undefined in strict mode)
3. So this inside this arrow function refers to global object
const obj = { name: "Object", ... }; – Object with different types of methods
regularMethod: function() { ... } – Regular function method:
1. When called as obj.regularMethod(), this refers to obj
2. this.name becomes obj.name ("Object")
const innerArrow = () => { ... }; – Arrow function defined inside regular method:
1. Arrow function inherits this from the enclosing scope
2. Enclosing scope is regularMethod where this refers to obj
3. So this inside arrow function also refers to obj
4. this.name becomes obj.name ("Object")
arrowMethod: () => { ... } – Arrow function as object method:
1. Arrow function inherits this from enclosing scope
2. Enclosing scope is global scope (where obj is defined)
3. Global scope's this is global object (or undefined)
4. So this inside arrow function refers to global, not obj
5. this.name is undefined (assuming no global name variable)

Class Context and 'this'

In ES6 classes, this works similarly to constructor functions:

class Vehicle {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
        this.mileage = 0;
    }

    drive(miles) {
        this.mileage += miles;
        console.log(`${this.make} ${this.model} has driven ${miles} miles. Total: ${this.mileage}`);
    }

    getInfo() {
        return `${this.year} ${this.make} ${this.model}`;
    }

    // Arrow function as class property (bound to instance)
    getInfoArrow = () => {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

const car = new Vehicle("Honda", "Civic", 2024);
car.drive(100); // Output: "Honda Civic has driven 100 miles. Total: 100"
console.log(car.getInfo()); // Output: "2024 Honda Civic"

// Method context loss and solution
const getCarInfo = car.getInfo; // Lost context
// getCarInfo(); // Would throw error or return undefined values

const getBoundInfo = car.getInfoArrow; // Arrow function preserves context
console.log(getBoundInfo()); // Output: "2024 Honda Civic"

Code explanation:

class Vehicle { ... } – ES6 class definition
constructor(make, model, year) { ... } – Constructor method, similar to constructor function
this.make = make; – Sets properties on the instance being created
drive(miles) { ... } – Regular method where this refers to the instance
getInfo() { ... } – Regular method that can lose context when assigned to variable
getInfoArrow = () => { ... } – Arrow function as class property, permanently bound to instance
const car = new Vehicle("Honda", "Civic", 2024); – Creates new instance
const getCarInfo = car.getInfo; – Assigns method to variable (loses context)
const getBoundInfo = car.getInfoArrow; – Arrow function preserves context even when assigned

Common Pitfalls and Solutions

Even experienced developers encounter this-related bugs in specific scenarios. These problems typically arise when JavaScript's context-switching behavior conflicts with our expectations. The most common issues occur in:

Event handlers where this switches to the DOM element
Callback functions where this loses its original context
Asynchronous operations where timing affects context
Framework integration where libraries change calling patterns

Let's examine each pitfall, understand why it happens, and learn multiple solutions for each scenario.

1. Event Handlers

Event handlers are functions that respond to user interactions or browser events.

The Problem: When you attach a method as an event listener, the browser calls it with this referring to the DOM element that triggered the event, not your class instance. This breaks access to your object's properties and methods.

Why It Happens: Event listeners are called by the browser's event system, which sets this to the event target for convenience. Your method loses its original object context.

class Button {
    constructor(element) {
        this.element = element;
        this.clickCount = 0;

        // Problem: 'this' will refer to the button element, not the Button instance
        this.element.addEventListener('click', this.handleClick);

        // Solution 1: Bind the method
        this.element.addEventListener('click', this.handleClick.bind(this));

        // Solution 2: Arrow function
        this.element.addEventListener('click', () => this.handleClick());
    }

    handleClick() {
        this.clickCount++;
        console.log(`Button clicked ${this.clickCount} times`);
    }

    // Solution 3: Arrow function as class property
    handleClickArrow = () => {
        this.clickCount++;
        console.log(`Button clicked ${this.clickCount} times`);
    }
}

const button = new Button(document.getElementById('myButton'));

Code explanation:

class Button { ... } – Class for managing button click events
this.element.addEventListener('click', this.handleClick); – PROBLEM: When the event fires, this inside handleClick refers to the button element, not the Button instance
this.element.addEventListener('click', this.handleClick.bind(this)); – SOLUTION 1: bind() creates a new function with this permanently set to the Button instance
this.element.addEventListener('click', () => this.handleClick()); – SOLUTION 2: Arrow function preserves this from surrounding scope
handleClickArrow = () => { ... } – SOLUTION 3: Arrow function as class property is automatically bound to instance

2. Callback Functions

Callback functions are functions passed as arguments to other functions, called back later.

The Problem: When passing methods as callbacks to array methods (forEach, map, and so on) or other functions, this becomes undefined or refers to the global object instead of your class instance.

Why It Happens: Callback functions are invoked as standalone functions, not as methods, so they lose their object context and fall back to default binding rules.

class DataProcessor {
    constructor(data) {
        this.data = data;
        this.processedCount = 0;
    }

    processItem(item) {
        // Process the item
        this.processedCount++;
        console.log(`Processed ${item}. Total: ${this.processedCount}`);
    }

    processAll() {
        // Problem: 'this' context lost in forEach callback
        this.data.forEach(this.processItem); // Won't work correctly

        // Solution 1: Bind
        this.data.forEach(this.processItem.bind(this));

        // Solution 2: Arrow function
        this.data.forEach((item) => this.processItem(item));

        // Solution 3: Store 'this' in variable
        const self = this;
        this.data.forEach(function(item) {
            self.processItem(item);
        });
    }
}

const processor = new DataProcessor(['item1', 'item2', 'item3']);
processor.processAll();

Code explanation:

class DataProcessor { ... } – Class for processing arrays of data
processItem(item) { ... } – Method that processes individual items and updates counter
this.data.forEach(this.processItem); – PROBLEM: forEach calls processItem as standalone function, losing this context
this.data.forEach(this.processItem.bind(this)); – SOLUTION 1: Bind this to the method
this.data.forEach((item) => this.processItem(item)); – SOLUTION 2: Arrow function preserves this
const self = this; – SOLUTION 3: Store reference to this in variable for use in regular function

3. Async/Await and Promises

Async/Await and Promises are a modern way to handle asynchronous operations, making async code look synchronous.

The Problem: While async/await preserves this context better than traditional promises, issues can still arise when mixing different function types or when promise callbacks lose context.

Why It Happens: Promise callbacks and certain async patterns can create new execution contexts where this doesn't point to your original object.

class ApiClient {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
        this.requestCount = 0;
    }

    async fetchData(endpoint) {
        this.requestCount++;
        console.log(`Making request #${this.requestCount} to ${this.baseUrl}${endpoint}`);

        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`);
            const data = await response.json();
            return this.processResponse(data); // 'this' is preserved in async/await
        } catch (error) {
            this.handleError(error);
        }
    }

    processResponse(data) {
        console.log(`Processing response. Total requests: ${this.requestCount}`);
        return data;
    }

    handleError(error) {
        console.error(`Error in request #${this.requestCount}:`, error);
    }

    // Using promises with potential context loss
    fetchDataWithPromises(endpoint) {
        this.requestCount++;

        return fetch(`${this.baseUrl}${endpoint}`)
            .then(response => response.json()) // Arrow function preserves 'this'
            .then(data => this.processResponse(data)) // 'this' correctly refers to instance
            .catch(error => this.handleError(error));
    }
}

const client = new ApiClient('https://api.example.com/');
client.fetchData('/users');

Code explanation:

class ApiClient { ... } – Class for making API requests
async fetchData(endpoint) { ... } – Async method where this is preserved throughout
return this.processResponse(data); – this context maintained in async functions
fetchDataWithPromises(endpoint) { ... } – Alternative using Promises
.then(data => this.processResponse(data)) – Arrow function preserves this context in Promise chains
.catch(error => this.handleError(error)) – Arrow function ensures this refers to the instance

When to Use 'this' – Practical Guidelines

1. Object-Oriented Programming

Use this when creating objects with methods that need to access the object's properties:

// Good use of 'this'
class ShoppingCart {
    constructor() {
        this.items = [];
        this.total = 0;
    }

    addItem(item, price) {
        this.items.push({ item, price });
        this.total += price;
        this.updateDisplay();
    }

    removeItem(index) {
        if (index >= 0 && index < this.items.length) {
            this.total -= this.items[index].price;
            this.items.splice(index, 1);
            this.updateDisplay();
        }
    }

    updateDisplay() {
        console.log(`Cart: ${this.items.length} items, Total: ${this.total}`);
    }
}

const cart = new ShoppingCart();
cart.addItem('Laptop', 999);
cart.addItem('Mouse', 25);

2. Event Handling

Use this when you need to access the object's state in event handlers:

class FormValidator {
    constructor(formElement) {
        this.form = formElement;
        this.errors = [];

        // Bind event handlers to preserve 'this'
        this.form.addEventListener('submit', this.handleSubmit.bind(this));
        this.form.addEventListener('input', this.handleInput.bind(this));
    }

    handleSubmit(event) {
        event.preventDefault();
        this.validateForm();

        if (this.errors.length === 0) {
            this.submitForm();
        } else {
            this.displayErrors();
        }
    }

    handleInput(event) {
        this.clearErrorFor(event.target.name);
    }

    validateForm() {
        this.errors = [];
        // Validation logic that updates this.errors
    }

    submitForm() {
        console.log('Form submitted successfully');
    }

    displayErrors() {
        console.log('Validation errors:', this.errors);
    }

    clearErrorFor(fieldName) {
        this.errors = this.errors.filter(error => error.field !== fieldName);
    }
}

3. Method Chaining

Method chaining is calling multiple methods in sequence by returning this from each method.

Use this to enable method chaining by returning the instance:

class QueryBuilder {
    constructor() {
        this.query = '';
        this.conditions = [];
    }

    select(fields) {
        this.query += `SELECT ${fields} `;
        return this; // Return 'this' for chaining
    }

    from(table) {
        this.query += `FROM ${table} `;
        return this;
    }

    where(condition) {
        this.conditions.push(condition);
        return this;
    }

    build() {
        if (this.conditions.length > 0) {
            this.query += `WHERE ${this.conditions.join(' AND ')}`;
        }
        return this.query.trim();
    }
}

// Method chaining in action
const query = new QueryBuilder()
    .select('name, email')
    .from('users')
    .where('age > 18')
    .where('active = true')
    .build();

console.log(query); // "SELECT name, email FROM users WHERE age > 18 AND active = true"

4. Plugin/Library Development

Plugin/library development refers to creating reusable code modules that can be used across different projects.

Use this when creating reusable components:

class Modal {
    constructor(element, options = {}) {
        this.element = element;
        this.options = {
            closable: true,
            backdrop: true,
            ...options
        };
        this.isOpen = false;

        this.init();
    }

    init() {
        this.createBackdrop();
        this.bindEvents();
    }

    createBackdrop() {
        if (this.options.backdrop) {
            this.backdrop = document.createElement('div');
            this.backdrop.className = 'modal-backdrop';
            document.body.appendChild(this.backdrop);
        }
    }

    bindEvents() {
        if (this.options.closable) {
            // Using arrow function to preserve 'this'
            this.element.addEventListener('click', (e) => {
                if (e.target.classList.contains('close-btn')) {
                    this.close();
                }
            });

            if (this.backdrop) {
                this.backdrop.addEventListener('click', () => this.close());
            }
        }
    }

    open() {
        this.isOpen = true;
        this.element.classList.add('open');
        if (this.backdrop) {
            this.backdrop.classList.add('active');
        }
        document.body.style.overflow = 'hidden';
    }

    close() {
        this.isOpen = false;
        this.element.classList.remove('open');
        if (this.backdrop) {
            this.backdrop.classList.remove('active');
        }
        document.body.style.overflow = '';
    }
}

// Usage
const modal = new Modal(document.getElementById('myModal'), {
    closable: true,
    backdrop: true
});

When NOT to Use 'this'

1. Utility Functions

Utility functions are pure functions that perform common tasks without side effects.

Don't use this in pure utility functions that don't need object context

So why should you avoid this in these cases? Utility functions should be pure and predictable. Using this introduces hidden dependencies and makes functions harder to test, reuse, and reason about. Pure functions are more maintainable because they always produce the same output for the same input.

// Good - no 'this' needed
function formatCurrency(amount) {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    }).format(amount);
}

function calculateTax(amount, rate) {
    return amount * rate;
}

// Better as module exports or standalone functions
const MathUtils = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => b !== 0 ? a / b : 0
};

Additional problems with this in utilities:

Makes functions dependent on calling context
Reduces reusability across different objects
Complicates testing since you need to mock object context
Breaks functional programming principles.

2. Functional Programming

When using functional programming patterns, avoid this. Functional programming emphasizes immutability and pure functions. The this keyword introduces mutable state and context dependency, which go against functional principles of predictability and composability.

// Good - functional approach
const numbers = [1, 2, 3, 4, 5];

const processNumbers = (arr) => {
    return arr
        .filter(num => num > 2)
        .map(num => num * 2)
        .reduce((sum, num) => sum + num, 0);
};

// Instead of using 'this' in a class
const result = processNumbers(numbers);

Additional benefits of avoiding this:

Functions become more composable and chainable
Easier to reason about data flow
Better support for functional techniques like currying and partial application
More compatible with functional libraries like Lodash or Ramda

3. Simple Event Handlers

For simple event handlers that don't need object state, you should avoid using this. Using this in these cases adds unnecessary complexity. Direct DOM manipulation or simple actions are clearer when written as straightforward functions.

javascript// Good - simple function without 'this'
function handleButtonClick(event) {
    console.log('Button clicked!');
    event.target.style.backgroundColor = 'blue';
}

document.getElementById('myButton').addEventListener('click', handleButtonClick);

When this becomes overhead:

One-time interactions that don't need state
Simple DOM manipulations
Static responses that don't vary based on object properties
Event handlers that only affect the event target itself.

Best Practices and Tips

1. Always Be Explicit

When in doubt, be explicit about what this should refer to:

class DataManager {
    constructor(data) {
        this.data = data;
    }

    // Good - explicit binding
    processData() {
        this.data.forEach(this.processItem.bind(this));
    }

    // Better - arrow function
    processDataArrow() {
        this.data.forEach(item => this.processItem(item));
    }

    processItem(item) {
        console.log(`Processing: ${item}`);
    }
}

2. Use Arrow Functions for Callbacks

Arrow functions are perfect for callbacks where you need to preserve this:

class Timer {
    constructor() {
        this.seconds = 0;
        this.intervalId = null;
    }

    start() {
        // Arrow function preserves 'this'
        this.intervalId = setInterval(() => {
            this.seconds++;
            console.log(`Time: ${this.seconds}s`);
        }, 1000);
    }

    stop() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = null;
        }
    }
}

3. Avoid Mixing Arrow Functions and Regular Functions

Be consistent in your approach:

// Good - consistent use of arrow functions
class Calculator {
    constructor() {
        this.result = 0;
    }

    add = (num) => {
        this.result += num;
        return this;
    }

    multiply = (num) => {
        this.result *= num;
        return this;
    }

    getResult = () => {
        return this.result;
    }
}

// Or consistent use of regular functions with proper binding
class CalculatorRegular {
    constructor() {
        this.result = 0;

        // Bind methods in constructor
        this.add = this.add.bind(this);
        this.multiply = this.multiply.bind(this);
    }

    add(num) {
        this.result += num;
        return this;
    }

    multiply(num) {
        this.result *= num;
        return this;
    }
}

4. Use Strict Mode

Always use strict mode to catch this related errors:

j'use strict';

function myFunction() {
    console.log(this); // undefined in strict mode, global object in non-strict
}

Modern JavaScript and 'this'

1. React Components

Understanding this is crucial for React class components. In React class components, proper this binding is essential because event handlers and lifecycle methods need access to component state and props. Incorrect binding leads to runtime errors when trying to call this.setState() or access this.props.

This is challenging because React doesn't automatically bind methods to component instances. When you pass a method as a prop (like onClick={this.handleClick}), the method loses its component context because it's called by React event system, not directly by your component.

Understanding this in React affects:

Event handler functionality
State updates and component re-rendering
Access to props and lifecycle methods
Performance (incorrect binding creates new functions on each render)
Debugging (context loss creates confusing error messages)

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [],
            inputValue: ''
        };

        // Bind methods in constructor
        this.handleInputChange = this.handleInputChange.bind(this);
        this.addTodo = this.addTodo.bind(this);
    }

    // Or use arrow functions as class properties
    handleInputChange = (event) => {
        this.setState({ inputValue: event.target.value });
    }

    addTodo = () => {
        if (this.state.inputValue.trim()) {
            this.setState({
                todos: [...this.state.todos, this.state.inputValue],
                inputValue: ''
            });
        }
    }

    render() {
        return (
            <div>
                <input 
                    value={this.state.inputValue}
                    onChange={this.handleInputChange}
                />
                <button onClick={this.addTodo}>Add Todobutton>
                <ul>
                    {this.state.todos.map((todo, index) => (
                        <li key={index}>{todo}li>
                    ))}
                ul>
            div>
        );
    }
}

2. Node.js and 'this'

In Node.js, this behavior depends on the context. Node has unique this behavior due to its module system and execution environment. Unlike browsers, where global this refers to window, Node.js has different global context rules that affect how your code behaves.

Key differences in Node.js:

Module level: this refers to module.exports, not a global object
Function context: Global this is different from browser environments
CommonJS vs ES modules: Different this binding rules
REPL vs file execution: Context changes between interactive and file-based execution

Why this is important:

It affects how you structure modules and exports
It changes debugging strategies for context-related issues
It influences how you write universal code that runs in both browsers and Node.js
It impacts testing strategies since test frameworks may change context

// In a module, 'this' at the top level refers to module.exports
console.log(this === module.exports); // true

// In a function, 'this' depends on how it's called
function nodeFunction() {
    console.log(this); // undefined in strict mode, global object otherwise
}

// In a class, 'this' works the same as in browsers
class NodeClass {
    constructor() {
        this.property = 'value';
    }

    method() {
        console.log(this.property); // 'value'
    }
}

Conclusion

The this keyword in JavaScript is a powerful feature that enables dynamic object-oriented programming. While it can be confusing at first, understanding the four binding rules and when to use each approach will make you a more effective JavaScript developer.

Key Takeaways:

this is determined by how a function is called, not where it's defined
The four rules (in order of precedence): explicit binding, implicit binding, new binding, default binding
Arrow functions inherit this from their enclosing scope
Use bind(), call(), or apply() when you need explicit control
Arrow functions are perfect for callbacks and event handlers
Always use strict mode to catch this related errors
Be consistent in your approach within a codebase

When to Use this:

Object-oriented programming with classes and constructors
Event handling where you need to access object state
Method chaining patterns
Creating reusable components and libraries
React class components and similar frameworks

When NOT to Use this:

Pure utility functions
Functional programming patterns
Simple event handlers without state
Functions that don't need object context

Mastering this will help you write more maintainable, reusable, and professional JavaScript code. Practice with different scenarios, and always remember that context is king when it comes to understanding what this refers to in any given situation.

Fetch API vs. Axios vs. Alova: Which HTTP Client Should You Use in 2025?

Abdullah Salaudeen — Wed, 02 Apr 2025 14:48:52 +0000

Before the days of the Fetch API and Axios, developers used callback-based HTTP requests. They manually managed requests with asynchronous operations and, in the process, wrote deeply nested code. This was known as callback hell.

Then, in 2015, a promise-based API request, the Fetch API, was built into JavaScript ES6 to ease the process. After that, libraries like Axios and Alova also appeared.

But why would anyone consider using a third-party API when the lightweight inbuilt Fetch API is an effective option? Well, Axios and Alova provide more than just fetching simple JSON responses. While Axios automates the parsing of JSON and provides shorthand methods for requests, Alova caches responses which prevents making new requests that are redundant.

So which should you stick to – Fetch API, Axios, or Alova?

In this guide, we’ll examine each of these tools based on their features, performance, and project suitability. Walk with me…

Prerequisites
The Fetch API
- Key Features of the Fetch API
- Limitations of the Fetch API
Axios
- Key Features of Axios
- Limitations of Axios
Alova
- Key Features of Alova
- Limitations of Alova
Feature-by-Feature Comparison
Use Cases and Best Scenarios
Community and Ecosystem
- Ecosystem and Integrations
Conclusion

Prerequisites

Before you start this tutorial, you should have a basic understanding of JavaScript and ES6+ features, such as async/await, arrow functions, and object destructuring. Being familiar with the fetch() API will also be helpful, as we’ll compare it with Axios and Alova.

You should also have a fundamental knowledge of HTTP methods (GET, POST, PUT, DELETE, PATCH) and handling API responses based on status codes to better understand the API examples.

While this tutorial focuses on JavaScript, some examples use React. So you should be familiar with React and understand the basics of components, state, and hooks (like useState and useEffect). Alova also works with frameworks like Vue and Svelte.

Basic experience with package managers (NPM or Yarn) is useful for installing dependencies like Axios and Alova. And understanding Node.js and browser environments will help, as Alova works in both contexts.

Lastly, familiarity with state management and caching concepts will enhance your understanding of Alova’s features, as it integrates state management and caching directly into API requests.

The Fetch API

Fetch API is a promise-based API request feature in JavaScript that was released to replace the old callback-based XMLHttpRequest (XHP). Unlike the old tool, Fetch API is compatible with modern website features, including service workers and Cross-Origin Resource Sharing (CORS).

With this tool, calling API data is as simple as making a fetch() request on the API URL, as shown below:

fetch("https://fakestoreapi.com/products")

The fetch() returns the server’s promise which is fulfilled with a response object. Then, you pass in some optional arguments to configure the response as JSON or text, attach it to a variable, and use the data.

let products;

  fetch("https://fakestoreapi.com/products")

    .then((res) => res.json())

    .then((data) => {

      products = data

      console.log(products)

    })

    .catch((error) => console.error("Error fetching data:", error))

In the code above, the fetch() requests API data from the URL. The response res gets parsed as JSON res.json. Then, the resulting data is attached to the products variable and logged on the console.

Since Node.js v17.5, the Fetch API has been available natively, eliminating the reliance on external packages like node-fetch, got, or cross-fetch for handling HTTP requests. This native support in both browsers and Node.js removes the need for additional dependencies, reducing the overall bundle size of your application. With this built-in functionality, the Fetch API has become the go-to tool for making asynchronous API calls in JavaScript applications.

Key Features of the Fetch API

Promises-based syntax

As I mentioned earlier, the Fetch API uses a promise-based syntax that sends a promise from the server and executes it with a response object. While the .then chaining can be optimal for simple requests, using several .thens can lead to callback hell and give you a hard time tracking errors. This is why the async/await alternative is a more optimal solution. Check out the code example below:

const fetchData = async () => {

      try {

        const response = await fetch("https://fakestoreapi.com/products");

        if (!response.ok) {

          throw new Error(`HTTP error! Status: ${response.status}`);

        }

        const data = await response.json();

        products = data

        console.log(products); //

      } catch (error) {

        console.error("Error fetching data:", error);

      }

    };

    fetchData();

As shown above, the fetch makes a get request. Then, the server returns an error status if the response is not ok (returns an error status like error 404). Then, the response gets parsed as JSON and used.

Keep in mind that all methods passed on the response are asynchronous, including the fetch() and the json() parsing.

Supports the `GET`, `POST`, `PUT`, `PATCH` and `DELETE` methods

GET, used to receive responses, is the Fetch API’s default method. So when you’re using it, you don’t have to define it explicitly or attach a body. But for methods that send requests like POST, PUT, PATCH and DELETE, you must specify their method and attach a body.

All these methods send requests to the backend. You can send data to the server with POST, completely replace an existing resource with new data using PUT, partially update with PATCH, or remove the resource with DELETE.

Here’s how you can define a method:

In the code below, I set the POST method to send data to the specified API:

const response = await fetch("https://example.com/products1", {

          method: "POST"

          //...

        });

Apart from posting data, you can also clear data on the server using DELETE:

const response = await fetch("https://example.com/products1", {

      method: "DELETE"

      //...

    });

Then, define the header:

Defining the header lets the server understand the type of content you are sending for proper data handling. As shown here, the header asks the server to store the content as a JSON file and set the authorization token to my-classified-token. Keep in mind that the token is the API key that will be used to verify user identity upon use.

const response = await fetch("https://example.com/products1", {

          method: "POST",

          header: {

            "Content-Type": "application-json",

            "Authorization": "Bearer my-classified-token",

          }

          //..

        });

Here is a full list of parameters that can be passed into the header:

Header	Purpose
"Content-Type": "application/json"	Tells the server that the request body is in JSON format.
"Authorization": "Bearer token"	Provides authentication (API keys, JWT, OAuth tokens).
"Accept": "application/json"	Specifies that the client expects a JSON response.
"Content-Type": "application/x-www-form-urlencoded"	Used for sending form data instead of JSON.
"Origin": "http://example.com"	Indicates where the request is coming from (used in CORS).

Next, attach the body:

After specifying the header, you then attach the body. The body is the data being sent to the backend server. It cannot be used with the GET method which only fetches responses. Besides, the information attached should always be in a valid format that matches the content type specified in the headers. You can add as much value as you require to the body.

const response = await fetch("https://example.com/products1", {

          method: "POST",

          header: {

            "Content-Type": "application-json",

            "Authorization": "Bearer my-classified-token",

          },

          body: JSON.stringify({ name: "Laptop", price: 1200 })

        });

Streaming Data

It is also worth noting that the Fetch API facilitates large data handling via streaming. It receives copious data in chunks instead of loading the whole data and buffering in the process. So it data displays real-time as they arrive. Here is a simple example of streaming:

 const fetchData = async () => {

const response = await fetch('https://www.example.com/large-text-file.txt');

      const reader = response.body.getReader();

      const decoder = new TextDecoder();

      while (true) {

        const { done, value } = await reader.read();

        if (done) break;

        const chunk = decoder.decode(value, { stream: true });

        console.log(chunk); // Process the chunk (e.g., display it in UI)

      }

      console.log('Stream complete');

    }

    fetchData();

Fetching Documents with the DOM Parser

Unlike its predecessor, XHP, which can directly return a document, Fetch API can’t achieve the same results without using the DOM Parser. To use it, you have to set the response type to text, then convert to a document using the DOMParser. Here is an example:

fetch("example.xml")

  .then(res => res.text()) // Get raw text

  .then(data => {

    const parser = new DOMParser();

    const doc = parser.parseFromString(data, "text/xml"); // Convert text to Document

    console.log(doc); // Now it's a Document object

  })

  .catch(console.error);

Request Cancellation with AbortController

Previously, the Fetch API couldn’t abort requests. But it is now possible with AbortController and AbortSignal. But the AbortController API is not native either, which means there is extra bundle and set up required.

Limitations of the Fetch API

Response Flexibility or No automatic JSON parsing

Depends on how you see it. Having to specify whether you want your response as JSON res.json() or text res.text() or blob res.blob() lets you set which response type you want from the get go. But it can also be a limitation since most API fetches are in JSON. This means that alternatives like Axios, which sets defaults as res.json(), helps write shorter and cleaner code, and is therefore often preferred by developers.

No built-in request/response interceptors

Unlike Axios, Fetch API does not have built-in methods that intercept and modify requests or responses. This limitation means you have to write boilerplate code to create a custom interceptor.

For instance, via interception, you can attach an Authorization token automatically before sending requests or asking all 401 errors to automatically reload when receiving responses. With the Fetch API, you have to wrap the fetch() in a function to do that, which means more lines of code.

Here is some code built to mimic request/ response interception:

const customFetch = async (url, options = {}) => {

      // Request Interception

      const modifiedOptions = {

          ...options,

          headers: {

              'Content-Type': 'application/json',

              Authorization: Bearer ${localStorage.getItem("token")}, // Interceptor behavior

              ...options.headers

          }

      };



      try {

          const response = await fetch(url, modifiedOptions);



          // Response Interception

          if (!response.ok) {

              console.error("Intercepted Error:", response.status);

          }



          return await response.json();

      } catch (error) {

          console.error("Fetch error intercepted:", error);

          throw error;

      }

  };

  // Usage (No need to set headers manually)

  customFetch('https://api.example.com/data')

      .then(data => console.log(data))

      .catch(error => console.error(error));

Error handling requires additional logic

The Fetch API only rejects network errors, not failed HTTP status codes like 404 or 501. This means that when a fetching request fails, it does not return a 404 Not Found or 500 Internal Server Error unless you configure that with additional code. But Axios does.

fetch('https://jsonplaceholder.typicode.com/invalid-url')

  .then(response => {

    if (!response.ok) { // Manually handle non-2xx responses

      throw new Error(`HTTP Error! Status: ${response.status}`);

    }

    return response.json();

  })

  .then(data => console.log(data))

  .catch(error => console.log('Error:', error.message));

Axios

After XHP was replaced with the Fetch API, Axios emerged in 2016 to address some issues with the new JavaScript-native fetching tool. Built on top of XHP, Axios quickly gained widespread adoption due to combining many Fetch API promise-based features with some methods on the legacy XMLHttpRequest. In no time, it became a popular choice amongst developers.

Axios stands out because it:

Automates JSON parsing
Has a built-in method to intercept and modify requests and responses
Automates error handling
Automates timeout handling
Can track upload and download progress

And many more features.

In particular, Axios is widely loved because it reduces boilerplate code. Since most API requests encode data with JSON, Axios sets its default parsing to accordingly, which means you don’t have to define JSON again. And why worry anyway, since developers use far fewer res.text() and res.blob() API responses in comparison.

const fetchData = async () => {

    const response = await axios.get('https://api.example.com/data');

    console.log(response.data); // JSON is already parsed

  };

Now, compare that to a like-for-like fetching with Fetch API:

const fetchData = async () => {

    const response = await fetch('https://api.example.com/data');

    const data = await response.json(); // Extra step

    console.log(data);

  };

Yeah, there’s an extra line, right? That could mean several lines of code for larger codebases.

Key Features of Axios

Automatic JSON Parsing

As explained above, you don’t have to call res.json() again while using Axios, since the method is automatically set. But what happens, in rare cases, when you want to fetch a blob or text using Axios? Then, you have to set the response type accordingly. Here’s how you can do that:

const fetchData = async () => {
    const response = await axios.get('https://api.example.com/data', {
      responseType: 'text', // Treats response as plain text
    });

    console.log(response.data); // Plain text string
  };

Built-in Interceptors to Modify Requests and Responses

Axios comes with its built-in interceptors to intercept and modify API responses or requests. Interceptors can help set authorization tokens for requests or modify global responses and errors before they render. Use the .interceptors.request.use() for requests and .interceptors.response.use() for responses.

import axios from "axios";

  const apiClient = axios.create({

      baseURL: "https://api.example.com",

      headers: {

          'Content-Type': 'application/json'

      }

  });



  // Request Interceptor: Attach Authorization headers

  apiClient.interceptors.request.use(config => {

      config.headers.Authorization = Bearer ${localStorage.getItem("token")};

      return config;

  }, error => Promise.reject(error));

  // Usage: Axios automatically includes the Authorization header

  apiClient.get("/data")

      .then(response => console.log(response.data))

      .catch(error => console.error(error));

To achieve that with Fetch API, you will have to write an interceptor wrapper on your API, which needs far more boilerplate code.

Request cancellation with CancelToken

Although now deprecated, Axios used to have its native request cancellation method known as CancelToken. But now, the AbortController API is regarded as a globally-recognized and reliable method for request abortion.

Error Handling

Axios handles errors better by automatically rejecting all non-2xx status codes like Error 404 and 501. You do not need to check any response.ok message:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')

  .then(response => console.log(response.data))

  .catch(error => {

    console.log('Error Status:', error.response?.status); // Axios auto-rejects non-2xx responses

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

  });

Built-in Progress Tracking

Axios incorporates XHP methods like onDownloadProgress and onUploadProgress. This inbuilt feature facilitates tracking download and uploads progress. Whereas with the Fetch API, you’d need ReadableStream to achieve similar results.

Here is an example showing how you can use onUploadProgress:

axios.post(url, data, {

    onUploadProgress: progressEvent => console.log(progressEvent.loaded)

  });

Supports Other Methods, too

Just like the Fetch API, Axios’ default Method is GET. But you can use the POST, PUT, PATCH or DELETE methods using axios.request(). Here’s how:

import axios from "axios";

  axios.request({

      method: "POST",

      url: "https://api.example.com/users",

      body: { name: "Abdullah", age: 25 }, // Request body

      headers: {

          "Authorization": Bearer ${localStorage.getItem("token")},

          "Content-Type": "application/json"

      }

  })

  .then(response => console.log(response.data))

  .catch(error => console.error("Axios Request Error:", error));

Axios also provides a shorthand with methods like axios.get, axios.post, axios.put, axios.patch, and axios.delete, as shown below:

// POST Request

axios.post("https://api.example.com/users",

  { name: "Abdullah", age: 25 }, // Request body

  { headers: { "Content-Type": "application/json" } }

)

.then(response => console.log(response.data))

.catch(error => console.error("Axios POST Error:", error));

// PUT Request

axios.put("https://api.example.com/users/123",

  { name: "Updated Name" }, // Updated data

  { headers: { "Authorization": Bearer ${localStorage.getItem("token")} } }

)

.then(response => console.log(response.data))

.catch(error => console.error("Axios PUT Error:", error));

// DELETE Request

axios.delete("https://api.example.com/users/123", {

  headers: { "Authorization": Bearer ${localStorage.getItem("token")} }

})

.then(response => console.log("User deleted successfully"))

.catch(error => console.error("Axios DELETE Error:", error));

Limitations of Axios

Slightly larger bundle size

Axios adds 35 kb of extra bundle, while FetchAPI adds 0. While Axios clearly offers more features than Fetch in every other metric, you have to make do with the larger bundle size. And in an age where lightweight and fast applications are often preferred, you might not want that load.

Dependency on third-party maintenance

Depending on a third-party option for something as crucial as API might not be desirable. So a native tool like the Fetch API, built within JavaScript, offers more reliability.

Alova

Alova is a request management library that combines simple API fetching with other functionalities like state management, hooks, and caching, amongst many others.

While we use react-query and SWR to process Axios-fetched data, Alova saves you those extra installations and coding by providing these methods natively. The all-in-one alternative not only fetches responses and sends requests, but also merges requests, caches responses, and optimizes them for UI frameworks.

Built in 2022, Alova’s adoption is still early but nonetheless seems promising. It is supported on browsers, Node.js, and most frameworks, including Vue, React, Svelte, and vanilla JavaScript. But it has limited usage for Angular.js.

At just 10kb, it is about 3 times smaller than Axios, making it a more lightweight alternative for building fast applications.

You can also use Alova to either replace react-query to facilitate Axios or be the one-stop-shop for everything API integration-related.

Here is a simple Alova fetch:

const response = await alovaInstance.Get('https://jsonplaceholder.typicode.com').send();

console.log(response); // Response data

When you are fetching Alova on React components, you can use the createAlova() to set parameters and useRequest() to manage state.

import React from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

// Initialize Alova

const alovaInstance = createAlova({

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// GET request with useRequest

const Profile = () => {

  const { data, loading, error } = useRequest(() => alovaInstance.Get("https://jsonplaceholder.typicode.com"));

  if (loading) return <p>Loading...p>;

  if (error) return <p>Error fetching profilep>;

  return <div>Username: {data.username}div>;

};

export default Profile;

Key Features of Alova

One-Stop Shop

For some functionalities that come built into Alova, Fetch API or Axios might need additional libraries like react-query or SWR to fulfill.

Alova fuses identical requests. Let’s say several components ask for the same data from the API. The Fetch API and Axios send multiple identical requests to the server which creates traffic. But Alova merges them, sends a single request, and shares its response across all components, which reduces network traffic.

State Management

With tools like Fetch API and Axios, you have to manage data, loading, and error states manually. Alova lets you do that on the go within a single line of code. Here is how it looks:

//...

const { data, loading, error } = useRequest(alova.Get("/posts/1"));

//...

Advanced Request Management

Alova offers several request management functionalities with each tailored to specific use cases. With its request management, you can request preload for data to be used later, cache data to prevent reload, manage form submission, handle pagination, and automate refetching when needed. Check out their docs to read more.

Multi-Level Caching

You can also use Alova to cache data, especially when the response isn’t constantly changing and does not need refetching. Unlike react-query that simply stores caches in RAM, Alova offers a more flexible framework.

Its three-pronged caching modes include the memory mode, cache occupying mode, and recovery mode. While memory mode stores data in the RAM, recovery mode persistently stores it in a Local Storage and is made available for longer periods and even offline. Meanwhile, the occupying mode prevents duplicate or redundant requests coming in quick succession.

Independent on any component, cached data can be accessed anywhere in the app if the request URL and parameters match. These features lower traffic going to servers, reduce buffering, and help facilitating a swifter and better user experience.

//...

// Initialize Alova instance

const alovaInstance = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// Define GET request

const getPosts = alovaInstance.Get("/posts", {

  cache: {

    mode: "memory", // Caches in memory

    expires: 1000 * 60 * 5, // Expires in 5 minutes

  },

});

const PostList = () => {

  const { data, loading, error } = useRequest(getPosts);

  if (loading) return <p>Loading...p>;

  if (error) return <p>Error fetching datap>;

  //...

};

In the example above, Alova caches the response using the memory mode cache: {mode: "memory"} and sets the cache expiration to 5 minutes expires: 1000 * 60 * 5. You can change “memory” to “recovery” if you want a longer storage duration.

Usage Flexibility

You can use Alova with either Axios or the Fetch API. Here is an example where I fetched data using Axios and complemented it with Alova state management.

//...

// Initialize Alova

const alovaInstance = createAlova({

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// Manage state with Alova

const { data: posts, setData } = useSnapshot([]);

const fetchPosts = async () => {

  const response = await axios.get("https://jsonplaceholder.typicode.com/posts");

  setData(response.data); // Store data in Alova state

};

//...

Supports Other Methods

Alova also makes GET its default option while supporting other methods like POST, PATCH, PUT and DELETE. Here is how to use POST in Alova, for example:

import React, { useState } from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

const alovaInstance = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

const PostForm = () => {

  const [title, setTitle] = useState("");

  const { send: createPost } = useRequest(alovaInstance.Post("/posts", { title }), { immediate: false });

  createPost().then(console.log)

};

export default PostForm;

Of course, it has shorthand methods too:

import React, { useState } from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

const alova = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

const { send: createPost } = useRequest(alova.Post("/posts", { title: "New Post" }), { immediate: false });

const { send: updatePost } = useRequest(alova.Put("/posts/1", { title: "Updated Post" }), { immediate: false });

const { send: patchPost } = useRequest(alova.Patch("/posts/1", { title: "Patched Post" }), { immediate: false });

createPost().then(console.log);

updatePost().then(console.log);

patchPost().then(console.log);

Bundle Size

Alova is three times smaller than Axios, but that does not even tell the full story. With Axios and the Fetch API, you need different libraries to handle caching, request deduplication, and retries. But Alova has everything in-built. So using Axios and Fetch API in real code production will always require more bundles than Axios. And overall, Alova facilitates lighter-weight applications compared to Axios and sometimes the Fetch API as well.

Limitations of Alova

Adoption Is Still Low

While writing this article, I had a hard time getting enough resources on Alova. And that is because it only debuted in July 2022 which means adoption is still early. So, troubleshooting Alova might be problematic since there are fewer Alova-themed API communities, as well as fewer StackOverflow answers, Youtube Tutorials, or GitHub contributions.

Potential Stability & Long-Term Maintenance Risks

Newer libraries have a higher risk of abandonment. Axios has been around for years, while Alova is still growing. Besides, it has fewer production use cases and battle-tested applications compared to Axios and Fetch.

Learning Curve

Alova’s learning curve can take some getting used to because it handles API requests differently from tools like Axios or the Fetch API.

Instead of making requests directly, you work with request instances and manage state within Alova’s system. This requires learning new ways to structure API calls and use features like caching and request merging. While it may feel unfamiliar at first, it can help reduce redundant API calls and improve performance once you understand it.

Fewer Third Party Integrations

Alova has fewer third-party libraries built specifically for it, requiring more manual work for compatibility with existing tools.

Feature-by-Feature Comparison

Feature	Fetch API	Axios	Alova
Ease of Use	Medium (requires manual handling)	High (user-friendly syntax)	Medium (requires new patterns)
Performance	High (lightweight, native)	Medium (slightly larger size)	High (optimized for caching & batch requests)
JSON Handling	Manual parsing (.json())	Automatic	Automatic
Request Cancellation	AbortController (manual)	Built-in with CancelToken	Built-in
Interceptors	No	Yes	Yes
Timeout Handling	No (manual with AbortController)	Yes (built-in)	Yes (built-in)
Data Caching	No	No (requires third-party caching)	Yes (built-in)
Retry Mechanism	No	Yes	Yes
Error Handling	Requires manual handling	Automatic rejection for non-2xx status codes	Built-in error recovery
Browser Support	All modern browsers	All modern browsers	All modern browsers
Node.js Support	Yes	Yes	Limited

Use Cases and Best Scenarios

Choosing the right HTTP client for your project depends on several factors, including project complexity, dependencies, and performance considerations. Let’s explore when it’s best to use the Fetch API, Axios, or Alova.

When to Use Fetch API

Suitable for Lightweight Projects and Simple Requests

The Fetch API is built into modern browsers and is ideal for handling basic HTTP requests without adding dependencies. If your project requires only simple GET, POST, or DELETE requests with minimal configurations, Fetch API is a great choice.

When Working in Environments Where Third-Party Libraries Are Restricted

Certain enterprise or security-sensitive applications may restrict the use of external libraries. Since the Fetch API is built into the browser, it remains a viable option when third-party packages like Axios or Alova are not allowed.

When Minimal Dependencies Are Preferred

Since Fetch API is native to JavaScript, it does not require installing extra libraries, making it perfect for projects that need to keep dependencies low. This can be particularly beneficial for small lightweight apps or static websites.

When to Use Axios

Ideal for Backend-Heavy Applications or Complex APIs

For projects that require multiple API calls, error handling, and efficient request management, Axios is a solid choice. It allows concurrent requests, request cancellation, and improved control over HTTP headers.

When Automatic JSON Handling, Interceptors, and Robust Error Handling Are Needed

Axios simplifies working with JSON data by automatically parsing responses. It also provides built-in interceptors for request and response transformations, as well as superior error handling compared to Fetch API.

Useful When Working with Node.js in Full-Stack Applications

Axios works both in the browser and in Node.js, making it an excellent choice for full-stack applications where a unified API client is needed across the frontend and backend.

When to Use Alova

When Working with Frontend-Heavy Applications (React, Vue, Svelte)

Alova integrates well with frontend frameworks and state management tools, making it a great choice for single-page applications (SPAs) that depend on smooth data fetching, pagination, and updates.

Best for Projects Requiring Optimized Caching and Data Synchronization

Alova is designed for performance optimization and better caching strategies. It is suitable for applications that rely on real-time data synchronization and need to minimize redundant network requests.

When Performance Optimization and Reduced Network Load Are Priorities

With its intelligent caching mechanisms, Alova can significantly reduce API call frequency, thereby improving the overall performance of the application. It is especially useful in scenarios where network efficiency is crucial, such as mobile applications or progressive web apps (PWAs).

Community and Ecosystem

The community and ecosystem surrounding an HTTP client can impact ease of use, available learning resources, and integration with other tools. Let's explore how the Fetch API, Axios, and Alova are perceived in 2025.

Ecosystem and Integrations

While Fetch API is widely supported, developers often supplement it with additional libraries for improved caching, timeouts, and request queuing. This can lead to increased development effort compared to using an out-of-the-box solution like Axios or Alova.

Meanwhile, Axios benefits from a well-established ecosystem with a variety of plugins and extensions, making it easy to integrate with different backend architectures, authentication systems, and request monitoring tools.

Alova is designed to work seamlessly with modern state management libraries such as React Query and Vue Query. These integrations make it an attractive choice for developers focused on optimizing frontend data fetching strategies.

Conclusion

Choosing between the Fetch API, Axios, and Alova depends on your project’s needs and priorities. The Fetch API is best for lightweight applications that require minimal dependencies, while Axios is a robust choice for full-stack applications and backend-heavy environments. Alova, on the other hand, is an excellent option for optimizing data fetching and caching in frontend-focused applications.

As developers explore new ways to enhance performance and reduce network load, Alova's adoption is expected to grow, particularly in SPAs and PWAs. But Axios remains a reliable and widely adopted solution, while the Fetch API continues to be the fundamental building block for HTTP requests in JavaScript.

How the Question Mark (?) Operator Works in JavaScript

freeCodeCamp — Wed, 03 Feb 2021 17:13:24 +0000

By Nishant Kumar

The conditional or question mark operator, represented by a ?, is one of the most powerful features in JavaScript. The ? operator is used in conditional statements, and when paired with a :, can function as a compact alternative to if...else statements.

But there is more to it than meets the eye. There are three main uses for the ? operator, two of which you might not used or even heard of. Let's learn about them all in detail.

Three Main Uses for the Question Mark (`?`) in JavaScript:

Ternary Operator
Optional Chaining
Nullish Coalescing

We'll look at each of these in detail, starting with the most common way you'll see the ? operator being used – as a ternary operator.

1. Ternary Operator

The term ternary means composed of three items or parts. The ? operator is also called the ternary operator because, unlike other operators such as strict equal (===) or remainder (%), it's the only one that takes three operands.

Starting with ?, we add a condition on the left side and a value on the right side to return when the condition is true. Then we add a colon (:) followed by a value to return if the condition is false.

The ternary operator is basically a shortcut for a traditional if...else statement.

Let's compare a ternary operator with a longer if...else statement:

Here, the ternary operator occupies only one line of code, whereas the if...else takes seven lines.

Using a ternary operator is much more effective, right?

2. Optional Chaining

In 2020, an awesome new feature known as Optional Chaining was introduced.

To understand how it works, imagine this scenario.

Let's say you have code that calls on an object property that doesn't exist, which triggers an error at run time. This may be because of a missing or undefined value in your database or from an API:

A common error – TypeError: Cannot read property ‘salary’ of undefined

Thanks to Optional Chaining, you can just insert a ? between the property name and the period between the next property.

With that, it will just return undefined instead of throwing an ugly error.

Optional Chaining is truly a life-changing feature for JavaScript developers.

3. Nullish Coalescing

In some cases, you have to set a default value for a missing property name or value.

For example, let's say we are creating a Weather App in which we are fetching the temperature, humidity, wind speed, pressure, time of sunrise and sunset, and the picture of the city. We inputted a place, let's say Bangalore, but for some reason, its image is not there in the database.

When the app fetches and displays the data, the picture will be blank, which can look ugly. What we can do, in that case, is set a default picture for those cities which don't have an image, Bangalore in our case.

This way, when the app displays the data, the default picture will be there for the cities without images.

You can do this using the || operator, known as the logical OR operator:

But if you use || to provide a default value, you may encounter unexpected behaviors if you consider some values as usable (for example, '' or 0).

Consider a scenario where a variable has the value of 0 or an empty string. If we use (||), it will be considered as undefined or NULL and return some default value that we have fixed.

Instead of the logical OR (||) operator, you can use double question marks (??), or Nullish Coalescing.

Let's learn with an example.

const value1 = 0 || 'default string';
console.log(value1);


const value2 = '' || 1000;
console.log(value2);

Here, we have '0' and 'default string' in variable value1. If we log its value in the console, we will get 'default string', which is weird. Instead of the default string, we should be getting 0, as zero is not undefined or null. So, '||' fails to do the job here.

Similarly, it's the same with value2.

Output for '||'

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

But if we replace '||' with '??', we will get 0 and an empty string, which makes it so cool.

Output for '??'

Nullish Coalescing works exactly like the logical OR operator, except you will get the right side value when the left side value is undefined or null.

In other words, ?? only allows undefined and null values, not empty strings ('') or 0s.

Conclusion

Now hopefully you understand how the ? operator works in JavaScript. It looks simple, but it's one of the most powerful characters in the language. It provides syntactic sugar in three awesome but different ways.

Try them them out and let me know how it goes.

Happy learning!

Arrow Function JavaScript Tutorial – How to Declare a JS Function with the New ES6 Syntax

freeCodeCamp — Tue, 02 Jun 2020 15:38:35 +0000

By Amy Haddad

You’ve probably seen arrow functions written a few different ways.

//example 1
const addTwo = (num) => {return num + 2;};

//example 2
const addTwo = (num) => num + 2;

//example 3
const addTwo = num => num + 2;

//example 4
const addTwo = a => {
 const newValue = a + 2;
 return newValue;
};

Some have parentheses around the parameters, while others don’t. Some use curly brackets and the return keyword, others don’t. One even spans multiple lines, while the others consist of a single line.

Interestingly, when we invoke the above arrow functions with the same argument we get the same result.

console.log(addTwo(2));
//Result: 4

How do you know which arrow function syntax to use? That’s what this article will uncover: how to declare an arrow function.

A Major Difference

Arrow functions are another—more concise—way to write function expressions. However, they don’t have their own binding to the this keyword.

//Function expression
const addNumbers = function(number1, number2) {
   return number1 + number2;
};

//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;

When we invoke these functions with the same arguments we get the same result.

console.log(addNumbers(1, 2));
//Result: 3

There's an important syntactical difference to note: arrow functions use the arrow => instead of the function keyword. There are other differences to be aware of when you write arrow functions, and that’s what we’ll explore next.

Parentheses

Some arrow functions have parentheses around the parameters and others don't.

//Example with parentheses
const addNums = (num1, num2) => num1 + num2;

//Example without parentheses
const addTwo = num => num + 2;

As it turns out, the number of parameters an arrow function has determines whether or not we need to include parentheses.

An arrow function with zero parameters requires parentheses.

const hello = () => "hello";
console.log(hello());
//Result: "hello"

An arrow function with one parameter does not require parentheses. In other words, parentheses are optional.

const addTwo = num => num + 2;

So we can add parentheses to the above example and the arrow function still works.

const addTwo = (num) => num + 2;
console.log(addTwo(2));
//Result: 4

An arrow function with multiple parameters requires parentheses.

const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3

Arrow functions also support rest parameters and destructuring. Both features require parentheses.

This is an example of an arrow function with a rest parameter.

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
//Result: [ 2, 3, 4 ]

And here’s one that uses destructuring.

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"

To summarize: if there’s only one parameter—and you’re not using rest parameters or destructuring—then parentheses are optional. Otherwise, be sure to include them.

The Function Body

Now that we’ve got the parentheses rules covered, let’s turn to the function body of an arrow function.

An arrow function body can either have a “concise body” or “block body”. The body type influences the syntax.

First, the “concise body” syntax.

const addTwo = a => a + 2;

The “concise body” syntax is just that: it’s concise! We don’t use the return keyword or curly brackets.

If you have a one-line arrow function (like the example above), then the value is implicitly returned. So you can omit the return keyword and the curly brackets.

Now let’s look at “block body” syntax.

const addTwo = a => {
    const total = a + 2;
    return total;
}

Notice that we use both curly brackets and the return keyword in the above example.

You normally see this syntax when the body of the function is more than one line. And that’s a key point: wrap the body of a multi-line arrow function in curly brackets and use the return keyword.

Objects and Arrow Functions

There’s one more syntax nuance to know about: wrap the function body in parentheses when you want to return an object literal expression.

const f = () => ({
 city:"Boston"
})
console.log(f().city)

Without the parentheses, we get an error.

const f = () => {
   city:"Boston"
}
//Result: error

If you find the arrow function syntax a bit confusing, you’re not alone. It takes some time to get familiar with it. But being aware of your options and requirements are steps in that direction.

I write about learning to program and the best ways to go about it (amymhaddad.com).

How to Translate jQuery Code Into Vanilla JS

freeCodeCamp — Tue, 02 Jun 2020 02:15:00 +0000

jQuery was once one of the most popular JS libraries available. It solved a lot of problems, like making DOM manipulation and Ajax calls standard across all the different browsers, which all handled JavaScript slightly differently.

A lot of jQuery's once cutting edge features have made it into vanilla JavaScript, so there's no need to load an entire library for just a few functionalities. Given this, it's not uncommon that one of your tasks on the job will be to rewrite jQuery into vanilla JavaScript.

How to rewrite jQuery into vanilla JS

Imagine you have the following code:

<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Homea>

            li>
            <li><a href="#portfolio">Portfolioa>

            li>
            <li><a href="#about">Abouta>

            li>
            <li><a href="#contact">Contacta>

            li>
        ul>
    div>
div>
<div id="home">div>
<div id="portfolio">div>
<div id="about">div>
<div id="contact">div>

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(images/home-bg2.png);
}
#portfolio {
    background-image: url(images/portfolio-bg.png);
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#contact {
    background-color: red;
    height: 100%;
    width: 100%;
}

$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

When you scroll down the page, the navbar should change colors as you get to different sections:

The function that handles this is onScroll:

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    /* console.log(scrollPos); */
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

To translate onScroll into vanilla JS, you have a few options.

Option #1: Use an online compiler

You can use an online tool like Google's Closure Compiler to compress the code and strip out any unnecessary jQuery.

The problem is that you're still essentially left with jQuery code, so the browser would still need to load the library.

Option #2: Manually translate the code

The best option is to check out resources like You Don't Need jQuery and You Might Not Need jQuery before rewriting your jQuery code. You'll be able to find the native JS versions of the most popular jQuery methods, some of which you can use in your own code.

Here's the onScroll function in vanilla JS:

function onScroll(event) {
  var sections = [...document.querySelectorAll('#menu-center a')];
  var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  sections.forEach(function(currLink) {
    var val = currLink.getAttribute('href');
    var refElement = document.querySelector(val);
    if (refElement.offsetTop <= scrollPos && (refElement.offsetTop + refElement.offsetHeight > scrollPos)) {
      //document.querySelector('#menu-center ul li a').classList.remove('active');
      currLink.classList.add('active');
    } else {
      currLink.classList.remove('active');
    }
  });
}

document.addEventListener('scroll', onScroll);

How to Add Search to a React App with Fuse.js

Colby Fayock — Tue, 26 May 2020 14:45:00 +0000

Search is a powerful way help people visiting your site find the content that's most important to them. But often it's really challenging to figure out the rules and logic to make that happen. In this article, we'll see how can we can use fuse.js to add search to our apps.

What is fuse.js?
Why is search important?
What are we going to build?
Step 0: Bootstrapping our app
Step 1: Installing Fuse.js
Step 2: Creating a new Fuse search instance
Step 3: Setting up dynamic search based on user input

What is fuse.js?

Fuse.js is a JavaScript library that provides fuzzy search capabilities for applications and websites. It's nice and easy to use out of the box, but also includes configuration options that allow you to tweak and create powerful solutions.

Why is search important?

Whether you're a content creator or are trying to sell a product with your website, it's important to help your visitors actually find what they're looking for.

If you're building an ecommerce website, you want someone to be able to easily find your Bender vinyl figures rather than having to dig through the entire catalog first.

What are we going to build?

We're going to start off with a basic Create React App example. It's going to include some character info as structured data for one of my favorite shows Futurama that's simply dumped out into an HTML list.

With that list, we're going to use fuse.js to provide client-side search capabilities, allowing us to demonstrate searching for the character we're looking for by their name and other details.

Step 0: Bootstrapping our app

To get started, we're going to need content to work with. I got started by building a list of characters from Futurama as structured json data that I put in a list with a fresh Create React App.

Futurama character search demo

You'll also notice I've already added an input for our search. It's not yet functional but we'll use that to get started.

If you'd like to start off at the same place, I created a branch with my demo repo that you can clone locally to walk through the project with me!

git clone --single-branch --branch start git@github.com:colbyfayock/my-futurama-characters.git

Git branch "start"

Or follow along with the commit.

Step 1: Installing Fuse.js

First thing we'll want to do is actually add Fuse.js to our app. In your project, run:

yarn add fuse.js
# or
npm install --save fuse.js

This will save the dependency to our project so that we'll be able to use it in our project.

Next we'll want to import the dependency to our app so that we can start building with it. At the top of your file, in our case src/App.js if you're following along with me in a new Create React App project, add:

import Fuse from 'fuse.js';

If you want to test that it's working, you can console.log(Fuse) and see our Fuse class we'll use to create our search capabilities.

Imported fuse.js class

And with that, we're ready to get started!

Follow along with the commit

Step 2: Creating a new Fuse search instance

To use Fuse.js, we'll want to first create a new instance of it.

At the top of your component, add:

const fuse = new Fuse(characters, {
  keys: [
    'name',
    'company',
    'species'
  ]
});

With this does:

Creates a new instance of Fuse
Passes in our characters array of objects
Specifies the 3 keys in our data that we want to search on

Next, to perform the search, we can add:

const results = fuse.search('bender');

And if we console log out the results, we can see:

Basic fuse.js search results

You'll notice that we have more results than our friend Bender though. Fuse.js provides a "fuzzy search" meaning it tries to help you in case you're not sure what you're looking for or if you're misspelling your query.

To get an idea of how this works, let's add the includeScore option to our search:

const fuse = new Fuse(characters, {
  keys: [
    'name',
    'company',
    'species'
  ],
  includeScore: true
});

Now we can see the score attribute in our results object.

Fuse.js search results with score

You'll notice that our first result has a really low score. With fuse.js, a lower score means it's closer to an exact match.

A score of 0 indicates a perfect match, while a score of 1 indicates a complete mismatch.

It's saying that is incredibly likely that the first result is what we're looking for, but it's not confident in the others.

So with our results, we want to actually connect that to our UI. If you notice our array output is different than what we are mapping through for the HTML list, so let's create a new variable that we can change it to:

const results = fuse.search('bender');
const characterResults = results.map(character => character.item);

What this is doing is creating a new array using the map method that will only include the item property from each array object.

Then if we replace our characters map inside of our list with characterResults.map:

"characters">
  {characterResults.map(character => {
    const { name, company, species, thumb } = character;

We can now see that our page only shows the results for "bender"!

Demo with filtered results

Follow along with the commit!

Step 3: Setting up dynamic search based on user input

Now that we have a hard-coded search working, we want someone to actually be able to use the search input to search!

To achieve this, we're going to use the useState hook and listen for changes to the input field, which will dynamically create a search for our data.

First, import the useState hook from React:

import React, { useState } from 'react';

Next, let's use that hook to create a state instance:

const [query, updateQuery] = useState('');

Here, we're creating a new state of query that we can update with updateQuery that defaults to an empty string ('').

With that, let's tell our search input to use that query value as it's value:

"text" value={query} />

At this point, nothing should be different, as we are using a blank query.

Demo with filtered results - nothing changed

Now let's add an event handler to our input that we can use to update our state:

"text" value={query} onChange={onSearch} />

And we'll want to create that function so we can use it:

function onSearch({ currentTarget }) {
  updateQuery(currentTarget.value);
}

This will update our query with the input's value any time it changes.

Now that our query will have what we want to search for, we can update our search instance:

const results = fuse.search(query);

And now if you reload the page, it's blank! ?

Demo with no results

That's because by default, Fuse sees our empty query and doesn't match it to anything. If we now search for something like slurms, we can see our search dynamically update with results!

Demo with results for "slurms"

If we wanted to fix this though so that all of our results show when there's no query, we can do so with an if statement or in my example, a ternary, that will show all of the characters if there is no query:

const characterResults = query ? results.map(character => character.item) : characters;

Demo with all results

And with that, we have our basic search!

Demo with filtered results for "zoidberg"

Follow along with the commit!

What can I do next?

Tuning your search

Fuse.js comes with a lot of options that you can use to tune your search to however you'd like. Want to only show confident results? Use the threshold option! Want case sensitive queries? Use the isCaseSensitive option!

https://fusejs.io/api/options.html

Setting the default query with URL parameters

Sometimes you want someone to be able to link to a particular set of results. To do this, we might want to be able to add a new URL parameter like ?q=bender.

To make this work, you can grab that URL parameter with javascript and use that value to set our query state.

Join the conversation!

Don’t just lint your code - fix it with Prettier

Colby Fayock — Wed, 06 Nov 2019 15:45:00 +0000

Linting makes our lives easier because it tells us what’s wrong with our code. But how can we avoid doing the actual work that goes into fixing it?

Previously I wrote about linting, what it is, and how it makes your life easier. At the end, I actually included a way that you could automatically fix your code. So why am I writing this?

What do you mean fix it?

Before we roll into it, let’s hit this quick. Linters are powerful and provide an easy way to scan your code for syntax errors that could lead to bugs. Or they can simply help keep a codebase clean, healthy, and consistent. When run, it will show all the issues and let you go through each one individually to fix them.

Taking that to the next level, some linters will actually allow you to pass in an argument to the command running the linter that allows it to fix it for you automagically. This means you don’t have to manually go through and make all of those little whitespace and semicolon (add them! ?) tweaks yourself!

Ron Swanson happy

So what more can I do to fix things?

If you already use the fix option, thats a good start. But there are tools out there that have been developed specifically to tackle this problem beyond just a flag into your command. The one I’m going to cover is Prettier.

What is Prettier?

Prettier pegs itself as “an opinionated code formatter." It takes an input of your code and outputs it in a consistent format stripping any of the original code style. It actually converts your code to a syntax tree, then rewrites it using the styles and rules you and Prettier provide together via your ESLint config and Prettier’s default rules.

You can easily use Prettier alone just to format your code, which works just fine. But if you combine this with an underlying ESLint process, you get both a powerful linter and a powerful fixer. I’m going to show you how to make those work together.

Voltron

Getting started with Prettier

For this walkthrough, I’m going to assume that you have ESLint set up and configured in an application. Particularly, I’m going to pick up where I left off in my previous walkthrough where we installed ESLint to a React application.

Additionally of note, Prettier tells us right from the start that it's an opinionated code formatter. You should expect that it will format your code in a consistent way, but maybe a different way than you currently have it configured. But don’t fret! You can tweak this configuration.

So what are we starting off with? We already:

Have installed ESLint
Have added Babel as our parser
Have added a plugin that includes React configurations

Next, let’s get started by installing a few packages:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Note: the command above is similar to using npm. If your project doesn't use yarn, swap out to npm as appropriate.

Above, we’re installing:

prettier: core Prettier package and engine
prettier-lint: passes the Prettier result to ESLint to fix using your ESLint config
prettier-eslint-cli: helps Prettier and ESLint work together on various files across your project

And we’re installing them as a dev dependency, as we don’t need it outside development.

Configuring your new formatter

Now that our packages are installed, we can set up yarn to run this command for us.

Previously, we set up a lint script to look like this in our package.json:

"scripts": {
  ...
  "lint": "eslint . --ext .js"
  ...
}

We’re going to leave that as it is, but we’ll do something similar and create a new script right next to it called format for our formatter Prettier:

"scripts": {
  ...
  "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'",
  "lint": "eslint . --ext .js"
  ...
}

So what’s going on there? We’re:

Adding a new script called format, that we can run as yarn format
We’re utilizing our prettier-eslint-cli package to run the formatting for us
We’re passing in our ESLint config located next to our package.json in the root of the project (change this if it’s in a different location)
And finally, we’re telling prettier to write all files matching **/*.js, or any JS files it finds recursively through our project

The beauty here is that we're passing in our ESLint config to Prettier. This means we only have to maintain 1 config for both tools, but we still leverage the linting power of ESLint along with the formatting power of Prettier.

Run your formatter!

Now that we’re all set up, let’s run it! Run this following:

yarn format

and immediately, we see that it works:

Successfully running Prettier

Hey, my code looks different!

Angry mob with pitchforks

As I mentioned earlier, Prettier tells us straight up, it’s an opinionated formatter. It ships with its own rules, sort of like its own ESLint config, so it will go through and make those changes as well.

Don’t abandon your code! Instead, you can review the changes, see if maybe it makes sense to keep it that way (it will be very consistent) or you can update your ESLint config (.eslintrc.js) to overwrite the rules you don’t like. This is also a good way to maybe learn some new things that you might not have expected to get caught before.

So where does this leave us?

If you’ve followed along so far, we now have two commands:

lint: which will check your code for you and tell you what's wrong
format: will automatically try to fix the problems for you

When using these in practice, your best bet is to always run format first to let it try to automatically fix anything it can. Then immediately run lint to catch anything Prettier wasn’t able to fix automatically.

What’s next?

Now that we can format our code automatically, we should be able to fix our code automatically!

Eddie from Fresh Off the Boat's mind blown

Next time we’ll take this a step further and set up a git hook that will allow this to run before you commit. This means you won't ever have to worry about forgetting to run this again!

Originally published at https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/

What is linting and how can it save you time?

Colby Fayock — Wed, 09 Oct 2019 14:30:00 +0000

One of the biggest challenges in software development is time. It’s something we can’t easily get more of, but linting can help us make the most out of the time we have.

So what is linting?

lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. https://en.wikipedia.org/wiki/Lint(software)

Simply put, a linter is a tool that programmatically scans your code with the goal of finding issues that can lead to bugs or inconsistencies with code health and style. Some can even help fix them for you!

Michael Scott - Tell me more

Take for instance, the following example:

const test = 'I am a test';
console.log(`Test: ${test}`);
const test = 'Another one.';

We’re declaring the constant test twice, which our javascript engine won’t be happy about. With the proper linter settings and watch configuration, instead of getting caught later as an error when the code runs, you’ll immediately get an error through your linter running in the background:

  10:9  error  Parsing error: Identifier 'test' has already been declared

   8 |   const test = 'I am a test';
   9 |   console.log(`Test: ${2}`);
> 10 |   const test = 'Another one.';
     |         ^

It might be pretty obvious that you have 2 of the same const declarations given this is only 3 lines, but in a more complex application, this can save tons of time having to hunt down a pesky bug that’s not always obvious.

What all can linting help with?

Lots of things, including but not limited to:

Flagging bugs in your code from syntax errors
Giving you warnings when code may not be intuitive
Providing suggestions for common best practices
Keeping track of TODO’s and FIXME’s
Keeping a consistent code style

Most things you can think of probably already exist in one form or another, and if not, you can even create custom rules that fit your needs!

How is this actually helping or why should I care?

Probably the biggest overlying theme of the list above is the fact that these issues will be called out immediately. No longer will these issues creep up on you in the middle of running your app or give someone anxiety during a code review. No longer will you and your reviewer endlessly fight passive aggressively through the comments about whether or not to include a semicolon at the end of JS statements (you should ?).

Grandma looking for a semicolon

All of those moments that stop you from being productive because of a silly syntax error or the micro-interactions you and your teammates have during a review take time. They add up and end up taking away the time you can spend fixing another bug or developing the next great feature of your product.

So how do I actually get started?

Even though there are linters for most, if not all, other mainstream languages, for the purpose of this post, I’m going to focus on Javascript. The same principles apply, but the tooling may be a bit different.

I’m going to run through how you can get set up for basic linting in a React app. You can easily follow along by spinning up your own React app or using my Gatsby starter: https://github.com/colbyfayock/gatsby-starter-sass#starting-from-scratch

Your Linter

To get started, we first need a linter. Probably the most popular in the Javascript world is ESLint. Your linter will actually be the engine for defining rules and parsing your files to test against. ESLint is available as an npm package by itself and once installed, out of the box it allows you to set up a basic configuration file and hit the ground running with some command line tools.

Let’s first add our ESLint dependency:

yarn add eslint -D

We’re installing this as a devDependency (hence the -D flag), because this isn’t something our application needs to run. After it’s successfully installed, let’s add it to our package.json as a script:

...
"scripts": {
  ...
  "lint": "eslint .  --ext .js"
  ...
},
...

In the above, we’re running our linter on the entire project directory on any file that has an extension of .js. If you're working with a large project with many file types, maybe even some you don't want linted, you can change that flag or be more specific with other options.

To support ESLint, we’ll need to do one more thing. Let’s add a file at the root of our project (probably where your package.json is) called .eslintrc.js and make the contents of the file simply:

module.exports = {};

Once you’re ready, you can run yarn lint and… get an error.

Lint results - Import errors

This is okay, and expected in our project, so let’s move on.

Your Parser

A common tool in the chain for Javascript developers is Babel, which allows you to write code with features that may not be supported in all browsers, such as using arrow functions, that are available in ES6, and other conventions like importing files via import.

The code you write may already run through Babel to work in a browser, but that doesn’t apply to ESLint by default, so ESLint allows you to specify a parser that allows the linting processing to look at the same code as your browser sees. In this case we’ll want to use Babel’s ESLint parser that’s made available to us.

To set that up, we’ll want to first install our dependency:

yarn add babel-eslint -D

Typically if you're using babel-eslint you'll want to make sure babel is installed next to it, but in our case, Gatsby already uses babel, so we don’t necessarily need to add it. After that’s set up, we’ll want to update our .eslintrc.js config file with some new options:

module.exports = {
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "parser": "babel-eslint"
};

Here, we’re letting ESLint know that our environment will be run in node (Gatsby’s precompiling), inside the browser (the app), and it will use ES6. This helps ESLint know how to run your code. Additionally, we want to set up our parser to be babel-eslint.

Once we’re ready to go, run yarn lint again and… well nothing really happened.

Lint results - Nothing happened

This is still expected, as we don’t have any rules set up!

Plugins for your code

Writing a React app? The Babel parser may help you transform your code, but you might have a hard time being productive, as ESLint needs to understand how it should work to lint your React files.

Part of the beauty of ESLint is that it allows you to configure plugins that have the opportunity to create and set rules for you. Luckily, along with our Babel parser above that does some of the heavy lifting, we have a React plugin available that does just that and takes care of linting the JSX for us.

Let’s first install our dependency:

yarn add eslint-plugin-react -D

Further, let’s update our .eslintrc.js file again:

module.exports = {
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": [
        "react"
    ],
    "parser": "babel-eslint"
};

What we’re adding here is a setting that automatically detects what React version you’re using, which is helpful to let your linting get parsed properly, and then set up our react plugin that we installed above.

For one last final time, we will run our lint script and get nothing:

Lint results - Nothing happened

Rules defined by others’s opinions

If you’re not really sure where to get started or just want to quickly get up and running, it’s recommend that you enable ESLint’s own recommended rules. Let’s add this to our .eslintrc.js config file:

module.exports = {
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended"
    ],
    "parser": "babel-eslint"
};

And let’s run our yarn lint.

Woah! This will immediately give you a lot errors, it seems like something’s wrong.

Lint results - React errors

Since we’re running a React app, we also want to make sure our linter understands the rules it should follow, so let’s also add our React plugin to the .eslintrc.js config setup:

    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],

Now if you run yarn lint, you get something a little more logical.

Lint results - Normal errors

If you’re following along, it looks like our starter app had a misplaced semicolon and a missing prop in our propTypes validation for Layout.js. Writing this helped me fix my own repo! ?

Going further, if those don’t seem to fit your needs, lots of developers and teams have published their own configurations that ESLint allows you to easily tap into.

Some popular ones include:

Not happy with the options available? You can even create and publish your own to either layer on top of others as a starting point or give it a go from scratch.

Let it do the work (most of it)

You don’t think I’m going to make you fix all of those thing yourself do you? Well, you may have to fix some, but let’s try to get ESLint to fix some of it for us.

If you noticed after we ran the command above, ESLint gave us an extra message:

Lint results - Option to fix

So let’s give it a try! Let’s run:

yarn lint --fix

And what do you know, it now only gives us 1 linting error.

Lint results - 1 error

Turns out ESLint was able to fix our semicolon issue automatically, but we’ll still have to add pageName to our Layout’s propTypes manually, not too much of a lift.

Running one more time and finally nothing again! But this time because everything's looking good.

Lint results - No errors

Go forth and write messy code!

Bruce Almighty - Typing

Kidding ? The good news here, is now you can easily take a look at the general health of your codebase as well as hopefully fix most of it automatically. This is going to save a lot of headaches as you work with others on your team, and generally, it’s nice to have all of your code neat and tidy.

This post is just getting started. ESLint is a wide open book with tons of plugins and rules, and it’s not the only linting tool in the game. Play around and find what fits best for you and your team. The little time spent configuring it to your app will save you lots more time in the long run.

Other linting tools to check out

JSHint: an alternative to ESLint
Stylelint: a linting tool for CSS and CSS-like syntaxes like Sass
Awesome ESLint: a simple list of awesome configs, parsers, plugins, and other tools to boost your ESLint game
Webhint: linting tool for accessibility, speed, and more website best practices
A11y JSX Plugin: ESLint plugin for checking accessibility rules on JSX elements

Originally published at https://www.colbyfayock.com/2019/10/what-is-linting-and-how-can-it-save-you-time

A Learning Path for Newbies in WordPress Development

freeCodeCamp — Wed, 12 Sep 2018 18:46:58 +0000

By Ihtisham Zahoor

In this information age, one obstacle in learning something new is not where to find the resources. It’s from where to start and make sense of all the resources available online these days. This holds especially true in web development when new tools are popping up overnight.

Back in 2015, since I first decided to learn web development, I have faced challenges of self-doubt and lack of motivation. But the one challenge which drained my energies was not knowing what path to follow.

Considering the initial challenges in this path I have written this piece for technology enthusiasts who want to get their hands dirty in web development. Especially WordPress development. All in the hope you are going to spend your time building something cool than getting into this never-ending vicious cycle of learning one tool to another.

Caution! A lot of learning in this path

I am a WordPress developer (although my impostor syndrome tells me otherwise). I can share my experience only related to WordPress. But before diving into details, let’s examine a Q/A session first.

Now, is the answer mean? Maybe. Is it true? Absolutely! WordPress and Web Development, in general, are as serious and demanding as any profession. So be ready for…

Lifetime of Learning
Pulling all-nighters occasionally

All right, have you read and understood the above points? Great. Now relax as it is not to discourage you or anything. It’s just how the life of a developer is as the ever-changing nature of this field requires.

The good news is there are not many web technologies you have to learn to master the craft of WordPress Development. That being said, give your time to this amazing piece of software, and WordPress will adore you in return.

WordPress will change your life if you let it — Chris Lema

It’s all inspiring and cute, right? It is one of the reasons Topher DeRosia (huge props) has provided the HeroPress platform for WordPressers (yes, this is what we proudly call ourselves). Here WordPressers share regularly their WordPress origin stories with the community. Rest assured while reading through the stories you are going to feel adrenaline rush through your body as many of you are going to find yourself related to those stories.

WordPress for Everyone!

WordPress is super easy to use. In fact, anyone without any technical knowledge, can set up and start using WordPress in no time. However, WordPress has a vast ecosystem. I, for one, would categorize WordPress development being carried out in two different domains. I’ll first list those domains below and then I will discuss each one separately.

WordPress Site Customization
WordPress Themes/Plugins Development

WordPress Site Customization

WordPress Site Customization is where all the buzz is about, as it amounts for most of the work done with respect to WordPress usage. Site Customization is that domain where no prior coding knowledge is required.

That is to say, a WordPress power user can easily perform tasks like Theme/Plugin setup and customization using page builders, site debugging, and site maintenance, etc. Moreover, Theme customization is all about customizing or modifying a pre-made theme as per the requirements of your client.

Considering that, and to give you a perspective about the process, you can watch the following short tutorial by Tyler Moore. In his tutorial, he builds a new website by customizing a pre-made theme using the Elementor page builder.

WordPress Themes/Plugins Development

It is where all the fun is for WordPress geeks. We can call it the actual WordPress development, as this domain is all about knowing and getting into the nitty-gritty technical details of programming. It can be as simple as using a few WordPress hooks to modify responses or as complex as building a full-fledge product on WordPress.

So, in case you want to start into this domain, you have to invest more time learning about web technologies involved in WordPress development. Considering that, the rest of this article will discuss all the technologies and a few tips and tricks to get you started in actual WordPress development.

Learning Path

To get started in your WordPress Development journey, these tools and technologies are what you are going to be working with.

Say hello and embrace g̵o̵o̵d̵ ̵o̵̵̵l̵̵̵’ HTML5 modules with Semantics and Accessibility concepts. HTML is what gives structure to the site contents.
This quote says it all:

You are the CSS to my HTML — Some Genius

CSS is how HTML is presented in the web browser. Make sure to learn SASS preprocessor as your savior in writing modular CSS once you get a grasp of the basics.

The organization behind WordPress has big plans for making JavaScript part of the WordPress Front-end. This officially came from the original author of WordPress.

Learn JavaScript, Deeply — Matt Mullenweg

Yes, I know that might be far-fetched for a newbie who is starting out to follow this advice, but keep an eye out for development in this area. Now, this doesn’t mean you have to master JavaScript to work with WordPress. Start with the basics including its hugely popular library jQuery.

Wouldn’t it be nice if you could get a 1000-step head-start with these three technologies to speed up your development process? Well, that is where front-end frameworks like Twitter Bootstrap come into play. Explore it and get amazed. Don’t confuse front-end frameworks with JavaScript frameworks. Front-end is used interchangeably with JavaScript libraries and frameworks, which is a whole different path.
PHP is the scripting language that powers WordPress. If you want to dive deep in WordPress, learn PHP head-first with its OOP concepts including MySQL as its back-end database.
In general, when people talk about WordPress Development, it usually means only two segments of WordPress.
WordPress Theme Development, which is developing a presentation (layout) of sites (hence the name “Theme”).
WordPress Plugin Development, which is to add functionality to WordPress sites

For a developer, it is of utmost importance to understand and be comfortable working with both these segments. And to add a tad bit more in your learning journey, get familiar with Internationalization and Localization. You also need to know WordPress Hooks and APIs to name a few.

While developing sites, most of your time is going to be spent in a local development environment and in a code editor. For the sake of complete information in this article, let me point you to an easy-to-setup yet powerful local development environment (Local by Flywheel) and lightning-fast code editor (Visual Studio Code by Microsoft). Yes, they are both free of cost like WordPress.

Workflow

As your workflow becomes more advanced and complex, it’s important for you to stay sane and keep enjoying life. In that case, you are going to need to streamline your workflow. Try task automation tools like Grunt/Gulp and use a version control system like git to keep you from making blunders.

Illustration of Learning Path Guide Published on GitHub

To make things more clear for you, I have published an illustration of the Learning Path as a step-by-step guide on GitHub which I have provided below.

Learn from it, give feedback, improve it to make it better for newbies, and by that means feel free to send PR requests.

Resources

In case you are still worried that you are going to need more than a bunch of motivational words to actually start doing meaningful work, maybe you need like a step by step guide — well, worry no more. Follow the WordPress WordPress Developer Handbook and WordPress Developer Codex like religion and consider yourself in safe hands.

Moreover, you can receive great help from the WordPress Support forum as well as digging your answers from the Q&A site Stack Overflow, which is immensely popular among the developer community.

Apart, from the official WordPress resources, support forum, and developer-centric Q&A sites. There are a plethora of sites like WPBeginner, made possible by the awesome WordPress community, offering WordPress centric free tutorials and guides.

CodexSpot is one such attempt by a bunch of WordPress geeks including yours truly to give back to the community. CodexSpot is an online platform, focused solely on providing web solutions. Our aim is to provide quality tutorials, DIY guides, and keep you up-to-date with web industry news and trend reports.

We are a huge supporter of free and open-source software initiative and don’t miss any opportunity to evangelize FOSS practices to promote this movement. Besides that, we also offer free web development generators and tools to speed up your development time.

Now, there is one other type of learning resource, which is premium courses. By comparison with free resources, the main benefit of premium ones is the timely support offered by the course instructors for their students. That is to say, the ability to get your queries answered by the very instructors from whom you are learning, hugely benefits you during your learning journey. Furthermore, they stay on top of the latest industry trends.

I have personally learned a great deal from the Lynda.com (now LinkedIn Learning) courses, highly recommended. I have also found Learn WordPress course by Chris Castiglione, a nice beginner-friendly course to start with. So, if you are looking for a premium course on WordPress, you will find any of these courses worth your buck.

At this point, you have the dedication and tons of resources readily available for you to learn everything about WordPress. However, it is equally important that you understand the job market and what the companies seek in candidates applying for the WordPress developer position.

Toptal, an exclusive network of the top freelancers in the world, has published a guide for hiring a “Great WordPress Developer” which you can read to better align yourself with the most in-demand WordPress skills.

Conclusion

Don’t try to learn everything at once. Start with the basics. Implement what you’ve learned and then build from there. Take note of these following two not hard-and-fast rules for guidance, as these rules will come in handy in your journey.

Just in Time (JIT) learning is you learn the tool when you need it.
80/20 rule of learning is you give 20% of your time to learning and 80% of your time implementing what you have learned already.

Now repeat after me:

I learn.
I code!
I code again!!
I code some more!!!
I keep coding!!!!!

…and that is how you start in WordPress. Good Luck WordPresser and welcome to the WordPress family!

js - freeCodeCamp.org

How to Use the "this" Keyword in JavaScript: A Handbook for Devs

What we’ll cover:

Why is "this" Important?

The Four Main Rules of "this"

Rule 1: Explicit Binding – Taking Control

Using call()

Using apply()

Using bind()

Partial Application with bind()

Rule 2: Implicit Binding – The Natural Way

Nested Objects

The Lost Context Problem

Rule 3: New Binding – Constructor Functions

What happens with 'new'?

Constructor Function Best Practices

Rule 4: Default Binding – The Fallback

Global Variables and 'this'

Arrow Functions – The Game Changer

Arrow Functions in Different Contexts

Class Context and 'this'

Common Pitfalls and Solutions

1. Event Handlers

2. Callback Functions

3. Async/Await and Promises

When to Use 'this' – Practical Guidelines

1. Object-Oriented Programming

2. Event Handling

3. Method Chaining

4. Plugin/Library Development

When NOT to Use 'this'

1. Utility Functions

2. Functional Programming

3. Simple Event Handlers

Best Practices and Tips

1. Always Be Explicit

2. Use Arrow Functions for Callbacks

3. Avoid Mixing Arrow Functions and Regular Functions

4. Use Strict Mode

Modern JavaScript and 'this'

1. React Components

2. Node.js and 'this'

Conclusion

Fetch API vs. Axios vs. Alova: Which HTTP Client Should You Use in 2025?

Table of Contents

Prerequisites

The Fetch API

Key Features of the Fetch API

Promises-based syntax

Supports the GET, POST, PUT, PATCH and DELETE methods

Streaming Data

Fetching Documents with the DOM Parser

Request Cancellation with AbortController

Limitations of the Fetch API

Response Flexibility or No automatic JSON parsing

No built-in request/response interceptors

Error handling requires additional logic

Axios

Key Features of Axios

Automatic JSON Parsing

Built-in Interceptors to Modify Requests and Responses

Request cancellation with CancelToken

Error Handling

Built-in Progress Tracking

Supports Other Methods, too

Limitations of Axios

Slightly larger bundle size

Dependency on third-party maintenance

Alova

Key Features of Alova

One-Stop Shop

Request Sharing Prevents Redundant Requests

State Management

Advanced Request Management

Multi-Level Caching

Usage Flexibility

Supports Other Methods

Bundle Size

Limitations of Alova

Adoption Is Still Low

Supports the `GET`, `POST`, `PUT`, `PATCH` and `DELETE` methods

Three Main Uses for the Question Mark (`?`) in JavaScript: