JavaScript Interview Questions

Hoisting é um termo usado para explicar o comportamento de declarações variáveis em seu código. Variáveis declaradas ou inicializadas com a palavra-chave var terão sua declaração "movida" até o topo do escopo do módulo/função do escopo, a que chamamos de hoisting. No entanto, apenas a declaração está hoisted, a atribuição (se houver uma), ficará onde está.

Observe que a declaração não é realmente movida - o motor de JavaScript analisa as declarações durante a compilação e torna-se ciente das declarações e dos seus âmbitos. É mais fácil compreender este comportamento, visualizando as declarações como sendo hoisted até ao topo do seu escopo. Vamos explicar com alguns exemplos.

console.log(foo); // indefinido
var foo = 1;
console.log(foo); // 1

As declarações de função têm o corpo hoisted enquanto as expressões da função (escritas na forma de declarações variáveis) só tem a declaração da variável hoisted.

// Declaração de função
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}
console.log(foo); // [Function: foo]

// Function Expression
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function () {
  console.log('BARRRR');
};
console.log(bar); // [Function: bar]

Variáveis declaradas via let e const também sofrem o hoisted. No entanto, ao contrário de var e function, eles não são inicializados e acessá-los antes que a declaração resulte em uma exceção ReferenceError. A variável está em uma "zona temporária morta" desde o início do bloco até que a declaração seja processada.

x; // undefined; // Erro de referência: y não está definido

var x = 'local';
let y = 'local';

Variáveis declaradas usando a palavra-chave var têm escopo à função na qual foram criadas, ou se criadas fora de qualquer função, ao objeto global. let and const são block scoped, o que significa que eles só são acessíveis dentro do conjunto mais próximo de chaves (função, bloco if-else ou for-loop).

function foo() {
  // Todas as variáveis são acessíveis dentro de funções.
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';

  console.log(bar); // bar
  console.log(baz); // baz
  console.log(qux); // qux
}

console.log(bar); // ReferenceError: bar não é o console
console.log(baz); // ReferenceError: baz não é definido
console.log(qux); // ReferenceError: qux não é definido

if (true) {
  var bar = 'bar';
  let baz = 'baz';
  const qux = 'qux';
}

// var variáveis declaradas são acessíveis em qualquer lugar do escopo da função.
console.log(bar); // bar
// let e const defined variáveis não são acessíveis fora do bloco no qual eles foram definidos.
console.log(baz); // Referência: baz não está definido
console.log(qux); // Referência: qux não está definido

'var' permite que as variáveis sejam hoisted, o que significa que elas podem ser referenciadas no código antes de serem declaradas. 'let' e 'const' não permitirão isso, em vez disso, será lançado um erro.

console.log(foo); // undefined

var foo = 'foo';

console.log(baz); // ReferenceError: não pôde acessar o console da declaração léxico 'baz' antes da inicialização

let baz = 'baz';

console.log(bar); // ReferenceError: não é possível acessar a declaração léxico 'bar' antes da inicialização

const bar = 'bar';

Redeclarar uma variável com var não causará um erro, mas let e const irá.

var foo = 'foo';
var foo = 'bar';
console.log(foo); // "bar"

let baz = 'baz';
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' já foi declarado

let e const diferem que let permite reatribuir o valor da variável enquanto const não.

// Tudo bem.
let foo = 'foo';
foo = 'bar';

// Isso causa uma exceção.
const baz = 'baz';
baz = 'qux';

Notas

• Como a maioria dos navegadores suportam let e const atualmente, usar var não é mais recomendado. Se você precisa dar suporte a navegadores mais antigos, escreva seu código usando let e use um transpiler como o Babel para compilar seu código para uma sintaxe mais antiga.

== é o operador de igualdade abstrato enquanto === é o operador de igualdade rigoroso. O operador == será comparado para a igualdade após fazer quaisquer conversões de tipo necessárias. O operador === não fará conversão de tipo, então se dois valores não forem do mesmo tipo === simplesmente retornará false. Ao usar ==, coisas engraçadas podem acontecer, tais como:

1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

Como regra geral, nunca use o operador ==, exceto por conveniência ao comparar com null ou undefined, onde a == null retornará true se a for null ou undefined.

var a = null;
console.log(a == null); // true
console.log(a == undefined); // true

O loop de eventos é um laço de execução única (single-threaded) que monitora a pilha de chamadas e verifica se há algum trabalho a ser feito na fila de tarefas. Se a pilha de chamadas estiver vazia e houver funções de retorno de chamada (callback) na fila de tarefas, uma função é desenfileirada e colocada na pilha de chamadas para ser executada.

Se você ainda não conferiu as palestras sobre o loop de eventos, você deveria. É um dos vídeos mais vistos de JavaScript.

A delegação de eventos é um conceito fundamental no desenvolvimento web que permite gerenciar e tratar eventos eficientemente em vários elementos filhos, anexando um único ouvinte de eventos a um elemento ancestral comum. Em vez de atribuir ouvintes de eventos a cada elemento filho individualmente, você delega a responsabilidade de lidar com eventos ao elemento pai ou ancestral, que intercepta os eventos à medida que eles sobem na árvore DOM e identifica o alvo do evento.

Benefícios da delegação de eventos

1. Eficiência: A delegação de eventos reduz significativamente o número de ouvintes de eventos em seu código, tornando-o mais eficiente em termos de memória e melhorando o desempenho, especialmente ao lidar com um grande número de elementos semelhantes. Isso resulta em um código mais limpo e de fácil manutenção.

2. Elementos Dinâmicos: A delegação de eventos funciona perfeitamente com elementos gerados ou removidos dinamicamente no DOM. Você não precisa anexar ou remover ouvintes de eventos toda vez que novos elementos são adicionados ou removidos. O ouvinte de eventos delegado os trata automaticamente.

Exemplo

Vamos ilustrar a delegação de eventos com um exemplo moderno usando a sintaxe do ES6:

// HTML:
// <ul id="item-list">
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

const itemList = document.getElementById('item-list');

itemList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Clicou em ${event.target.textContent}`);
  }
});

Neste exemplo, um único ouvinte de eventos de clique é anexado ao elemento <ul>. Quando ocorre um evento de clique em um elemento <li>, o evento se propaga até o elemento <ul>, onde o ouvinte de eventos verifica o nome da tag do alvo para identificar qual item da lista foi clicado.

Casos de uso

A delegação de eventos é comumente usada em várias situações, incluindo:

1. Gerenciamento de listas, menus ou tabelas com muitos itens ou linhas.
2. Manipulação de conteúdo dinâmico em aplicativos de página única.
3. Simplificação do código, evitando a necessidade de anexar e remover ouvintes de eventos para elementos que mudam.

Recursos

• MDN Web Docs sobre Delegação de Eventos
• JavaScript.info - Delegação de Eventos

Não há uma explicação simples para this; ela é um dos conceitos mais confusos do JavaScript. Uma explicação superficial é que o valor do this depende de como a função é chamada. Tendo lido muitas explicações sobre this online, Arnav Aggrawal é a explicação que foi mais clara. As seguintes regras se aplicam:

1. Se a palavra-chave new é usada ao chamar a função, new dentro da função é um objeto totalmente novo.
2. Se apply, call, ou bind forem usados para chamar/criar uma função, this dentro da função é o objeto passado como o argumento.
3. Se uma função é chamada como um método, como obj.method() — this é o objeto do qual a função é uma propriedade.
4. Se uma função é chamada como uma chamada de função livre, significando que ele foi invocado sem nenhuma das condições presentes acima, this é o objeto global. Em um navegador, é o objeto window. Se em modo estrito ('use strict'), this será undefined em vez do objeto global.
5. Se se aplicarem múltiplas das regras acima, a regra que é maior ganha e definirá o valor this.
6. Se a função é uma arrow function ES2015, ela ignora todas as regras acima e recebe o valor this do seu escopo circundante no momento em que ele é criado.

Para uma explicação aprofundada, confira o artigo na Medium.

Você pode dar um exemplo de uma das maneiras como o trabalho com "this" mudou no ES2015?

ES2015 permite que você use arrow functions que usa o enclosing lexical scope. Isso geralmente é conveniente, mas impede quem chamou de controlar o contexto através de .call ou .apply—as consequências são que uma biblioteca como jQuery não irá vincular corretamente o this em suas funções de manipulador de eventos. Portanto, é importante ter isso em mente ao refatorar grandes aplicações legadas.

Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites.

Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.

Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.

Similaridades

Cookies, localStorage, and sessionStorage, são todos:

• Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
• Armazenamento baseado em chave-valor.
• Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (JSON.stringify()) a fim de serem armazenados.

Diferenças

Também existem outros mecanismos de armazenamento do lado do cliente, como IndexedDB que é mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.

tags <script> são usadas para incluir JavaScript em uma página da web. Os atributos async e defer são usados para mudar como/quando o carregamento e a execução do script acontecem.

Simples <script>

Para tags normais <script> sem qualquer async ou defer, quando forem encontrados, a análise do HTML é bloqueada, o script é buscado e executado imediatamente. A análise do HTML é retomada após a execução do script.

<script async>

No <script async>, o script será buscado em paralelo à análise do HTML e será executado assim que estiver disponível (potencialmente antes da conclusão da análise do HTML) e não será necessariamente executado na ordem em que aparece no documento HTML. Use async quando o script é independente de quaisquer outros scripts na página, por exemplo, analytics.

<script defer>

No <script defer>, o script será buscado em paralelo à análise HTML e executado quando o documento tiver sido totalmente analisado, mas antes de disparar DOMContentLoaded. Se houver múltiplos, cada script adiado é executado na ordem em que eles apareceram no documento HTML.

Se um script depende de um DOM totalmente analisado, o atributo defer será útil para garantir que o HTML seja totalmente analisado antes de ser executado.

Notas

• Geralmente, o atributo async deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo defer deve ser usado para scripts que dependem de / é dependente de outro script.
• Os atributos async e defer são ignorados para scripts que não têm o atributo src.
• <script>s com defer ou async que contêm document.write() serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".

Referências

• <script>: O elemento Script | MDN
• async vs defer attributes

Variáveis não declaradas são criadas quando você atribui um valor a um identificador que não foi criado anteriormente usando var, let ou const. Variáveis não declaradas serão definidas globalmente, fora do escopo atual. No modo estrito, um ReferenceError será lançado quando você tentar atribuir a uma variável não declarada. Variáveis não declaradas são ruins assim como as variáveis globais são ruins. Evite elas a todo custo! Para verificá-las, envolva o uso delas em um bloco try/catch.

function foo() {
  x = 1; // Lança um erro de referência em modo strict
}

foo();
console.log(x); // 1

Uma variável que é undefined é uma variável que foi declarada, mas não atribuída um valor. É do tipo 'undefined'. Se uma função não retornar nenhum valor como resultado de sua execução, e se for atribuída a uma variável, a variável também terá o valor de undefined. Para verificar isso, compare usando o operador de igualdade estrita (===) ou typeof, que retornará a string undefined. Note que você não deve usar o operador de igualdade abstrata para verificar, pois também retornará true se o valor for null.

var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // verdadeiro. Errado, não use isso para verificar!

function bar() {}
var baz = bar();
console.log(baz); // undefined

Uma variável que é null terá sido explicitamente atribuída ao valor null. Ele não representa nenhum valor e é diferente de undefined no sentido de que foi explicitamente atribuído. Para verificar se é null, simplesmente compare usando o operador de igualdade estrita. Observe que, assim como acima, você não deve usar o operador de igualdade abstrata (==) para verificar, pois também retornará true se o valor for undefined.

var foo = null;
console.log(foo === null); // verdadeiro
console.log(typeof foo === 'object'); // verdadeiro

console.log(foo == undefined); // true. Errado, não use isto para verificar!

Como bom hábito, nunca deixe suas variáveis não declaradas ou não atribuídas. Atribua explicitamente null a elas depois de declará-las, se você não pretende usá-las ainda. Se você usa alguma ferramenta de análise estática em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela também pode verificar se você está referenciando variáveis não declaradas.

.call e .apply são usados para invocar funções e o primeiro parâmetro será usado como o valor de this dentro da função. No entanto, .call recebe argumentos separados por vírgulas como os próximos argumentos enquanto .apply recebe um array de argumentos como o próximo argumento. Uma maneira fácil de lembrar este é C para chamada e parâmetros separados por vírgulas e A para 'apply' e um array de argumentos.

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

O método bind() cria uma nova função que, quando chamada, tem sua palavra-chave this definida para o valor fornecido, com uma determinada sequência de argumentos precedendo qualquer um fornecido quando a nova função é chamada.

Source: Function.prototype.bind() - JavaScript | MDN

bind() é mais útil para vincular o valor do this em métodos de classes que você quer passar para outras funções. Isso foi frequentemente feito em métodos de classe de componente React que não foram definidos usando arrow functions.

const john = {
  age: 42,
  getAge: function () {
    return this.age;
  },
};

console.log(john.getAge()); // 42

const unboundGetAge = john.getAge;
console.log(unboundGetAge()); // undefined

const boundGetAge = john.getAge.bind(john);
console.log(boundGetAge()); // 42

const mary = { age: 21 };
const boundGetAgeMary = john.getAge.bind(mary);
console.log(boundGetAgeMary()); // 21

No exemplo acima, quando o método getAge é chamado sem um objeto chamado (como unboundGetAge), o valor é 'indefinido' porque o valor 'this' dentro de getAge() se torna o objeto global. boundGetAge() tem seu this ligado a john, portanto pode obter o idade de john.

Podemos até usar getAge em outro objeto que não é john! boundGetAgeMary retorna o age (idade) de mary.

Prática

Tente implementar seu próprio método Function.prototype.bind() na Great Front End.

Referências

• Function.prototype.bind() - JavaScript | MDN

A principal vantagem de usar uma arrow function como um método dentro de um construtor é que o valor de this é definido no momento da criação da função e não pode mudar depois disso. Então, quando o construtor é usado para criar um novo objeto, this sempre irá referir-se ao objeto. Por exemplo, digamos que temos um construtor Person que toma o primeiro nome como um argumento tem dois métodos para dar um console.log nesse nome, um como uma função normal e um como uma função de seta:

const Person = function (firstName) {
  this.firstName = firstName;
  this.sayName1 = function () {
    console.log(this.firstName);
  };
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// A função regular pode ter seu valor 'this' alterado, mas a arrow function não pode
john.sayName1.call(dave); // Dave (porque "this" é agora o objeto dave)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (porque 'this' é agora o objeto dave)
john.sayName2.apply(dave); // João

john.sayName1.bind(dave)(); // Dave (porque 'this' é agora o dave object)
john.sayName2.bind(dave)(); // João

var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (porque 'this' agora é o objeto da window)

var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John

O principal tirada aqui é que this pode ser alterado para uma função normal, mas o contexto sempre permanece o mesmo para uma arrow function. Então, mesmo que você esteja passando pela arrow function para diferentes partes do seu aplicativo, você não precisaria se preocupar com a mudança de contexto.

Isso pode ser particularmente útil em componentes de classe React. Se você definir um método de classe para algo como um manipulador de cliques usando uma função normal, e, em seguida, você passa que clica manipulando em um componente filho como uma propriedade, você também precisará vincular o this no construtor do componente pai. Se você ao invés disso usar uma arrow function, não há necessidade de vincular também "this", como o método irá automaticamente obter seu valor "this" no contexto léxico que está encapsulado. (Veja esse artigo para uma excelente demonstração e código de amostra: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)

Essa é uma pergunta extremamente comum em entrevistas de JavaScript. Todos os objetos JavaScript têm uma propriedade __proto__ com exceção de objetos criados com object.create(null), ou seja, uma referência a outro objeto, que é chamado de "protótipo" do objeto. Quando uma propriedade é acessada em um objeto e se a propriedade não é encontrada nesse objeto, o motor de JavaScript olha para o objeto __proto__, e o __proto__ do __proto__ e assim por diante, até que encontre a propriedade definida em um dos __proto__s ou até chegar ao final da cadeia de protótipos. Este comportamento simula a herança clássica, mas é realmente mais de delegação do que herança.

Exemplo de Herança de Protótipos

// Construtor de objeto pai.
function Animal(name) {
  this.name = name;
}

// Adiciona um método ao protótipo do objeto pai.
Animal.prototype.makeSound = function () {
  console.log('O ' + this.constructor.name + ' faz um som.');
};

// Construtor filho.
function Dog(name) {
  Animal.call(this, name); // Chama o construtor pai.
}

// Set the child object's prototype to be the parent's prototype.
Object.setPrototypeOf(Dog.prototype, Animal.prototype);

// Adiciona um método ao protótipo do objeto filho.
Dog.prototype.bark = function () {
  console.log('Woof!');
};

// Criar uma nova instância do Cachorro.
const bolt = new Dog('Bolt');

// Chama métodos no objeto filho.
console.log(bolt.name); // "Bolt"
bolt.makeSound(); // "O Dog faz um som."
bolt.bark(); // "Woof!"

As coisas a observar são:

• .makeSound não está definido em Dog, então o navegador aumenta a cadeia de protótipos e encontra .makeSound para fora do Animal herdado.
• Using Object.create to build the inheritance chain is no longer recommended. Use Object.setPrototypeOf instead.

Resources

• Inheritance and the prototype chain | MDN

Esta pergunta é muito vaga. Nossa melhor suposição sobre a intenção dessa pergunta é que ela está perguntando sobre construtores em JavaScript. Tecnicamente falando, function Person(){} é apenas uma declaração de função normal. A convenção é usar PascalCase para funções que se destinam a ser usadas como construtores.

var person = Person() invoca o Person como uma função, e não como um construtor. Invocar como tal é um erro comum se a função pretende ser usada como um construtor. Normalmente, o construtor não devolve nada. Assim, invocando o construtor como uma função normal retornará undefined e que será atribuído à variável pretendida como a instância.

var person = new Person() cria uma instância do objeto Person usando o operador new, que herda de Person.prototype. Uma alternativa seria usar Object.create, tais como: Object.create(Person.prototype).

function Person(name) {
  this.name = name;
}

var person = Person('John');
console.log(person); // undefined
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined

var person = new Person('John');
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"

O primeiro é uma declaração de funções, enquanto o segundo é uma expressão de funções. A diferença chave é que as declarações de funções tem seu corpo hoisted, mas os corpos das expressões de função não são (elas têm o mesmo comportamento hoisting que as variáveis). Para obter mais explicações sobre o hoisting, consulte a pergunta sobre hoisting. Se você tentar invocar uma expressão de função antes de ela ser definida, você receberá um erro Uncaught TypeError: XXX não é um erro de função.

Declaração de Função

foo(); // 'FOOOO'
function foo() {
  console.log('FOOOOO');
}

Expressão de Função

foo(); // Uncaught TypeError: foo não é uma função
var foo = function () {
  console.log('FOOOOO');
};

Eles podem ser usados em IIFEs (funções autoexecutáveis) para encapsular algum código dentro de um escopo local, para que as variáveis declaradas nele não vazem para o escopo global.

(function () {
  // Algum código aqui.
})();

Como uma função de callback que é usada apenas uma vez e não precisa ser usada em nenhum outro lugar. O código parecerá mais autônomo e legível quando os manipuladores forem definidos dentro do próprio código que os chama, em vez de ter que procurar em outro lugar para encontrar o corpo da função.

setTimeout(function () {
  console.log('Olá mundo!');
}, 1000);

Argumentos para construtos de programação funcional ou Lodash (semelhantes a funções de retorno de chamada).

const arr = [1, 2, 3];
const double = arr.ap(function (el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

TL;DR

Creating objects in JavaScript offers several methods:

• Object literals ({}): Simplest and most popular approach. Define key-value pairs within curly braces.
• Object() constructor: Use new Object() with dot notation to add properties.
• Object.create(): Create new objects using existing objects as prototypes, inheriting properties and methods.
• Constructor functions: Define blueprints for objects using functions, creating instances with new.
• ES2015 classes: Structured syntax similar to other languages, using class and constructor keywords.

Objects in JavaScript

Creating objects in JavaScript involves several methods. Here are the various ways to create objects in JavaScript:

Object literals ({})

This is the simplest and most popular way to create objects in JavaScript. It involves defining a collection of key-value pairs within curly braces ({}). It can be used when you need to create a single object with a fixed set of properties.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 50,
  eyeColor: 'blue',
};

console.log(person); // {firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"}

Object() constructor

This method involves using the new keyword with the built-in Object constructor to create an object. You can then add properties to the object using dot notation. It can be used when you need to create an object from a primitive value or to create an empty object.

const person = new Object();
person.firstName = 'John';
person.lastName = 'Doe';

console.log(person); // {firstName: "John", lastName: "Doe"}

Object.create() Method

This method allows you to create a new object using an existing object as a prototype. The new object inherits properties and methods from the prototype object. It can be used when you need to create a new object with a specific prototype.

// Object.create() Method
const personPrototype = {
  greet() {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
    );
  },
};

const person = Object.create(personPrototype);
person.name = 'John';
person.age = 30;

person.greet(); // Output: Hello, my name is John and I'm 30 years old.

An object without a prototype can be created by doing Object.create(null).

ES2015 classes

Classes provide a more structured and familiar syntax (similar to other programming languages) for creating objects. They define a blueprint and use methods to interact with the object's properties. It can be used when you need to create complex objects with inheritance and encapsulation.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet = function () {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
    );
  };
}

const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);

person1.greet(); // Output: Hello, my name is John and I'm 30 years old.
person2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.

Constructor functions

Constructor functions are used to create reusable blueprints for objects. They define the properties and behaviors shared by all objects of that type. You use the new keyword to create instances of the object. It can be used when you need to create multiple objects with similar properties and methods.

However, now that ES2015 classes are readily supported in modern browsers, there's little reason to use constructor functions to create objects.

// Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
    );
  };
}

const person1 = new Person('John', 30);
const person2 = new Person('Alice', 25);

person1.greet(); // Output: Hello, my name is John and I'm 30 years old.
person2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.

Further reading

• Object() constructor | MDN
• new keyword | MDN
• Object.create() | MDN

Compreendendo Closures em JavaScript

Em JavaScript, um closure é uma função que captura o escopo léxico no qual foi declarada, permitindo que ela acesse e manipule variáveis de um escopo externo mesmo depois que esse escopo foi fechado.

Aqui está como os closures funcionam:

1. Escopo léxico: JavaScript utiliza o escopo léxico, o que significa que o acesso de uma função às variáveis é determinado pela sua localização física no código-fonte.
2. Criação de função: Quando uma função é criada, ela mantém uma referência ao seu escopo léxico. Este escopo contém todas as variáveis locais que estavam em escopo no momento em que o closure foi criado.
3. Manutenção de estado: Closures são frequentemente usados para manter o estado de uma forma segura, porque as variáveis capturadas pelo closure não são acessíveis fora da função.

Sintaxe do ES6 e closures

Com o ES6, closures podem ser criados usando funções de seta (arrow functions), que proporcionam uma sintaxe mais concisa e vinculam lexicalmente o valor de this. Aqui está um exemplo:

const criarContador = () => {
  let contador = 0;
  return () => {
    contador += 1;
    return contador;
  };
};

const contador = criarContador();
console.log(contador()); // Saída: 1
console.log(contador()); // Saída: 2

Por que usar closures?

1. Encapsulamento de dados: Closures fornecem uma maneira de criar variáveis e funções privadas que não podem ser acessadas fora do closure. Isso é útil para ocultar detalhes de implementação e manter o estado de forma encapsulada.
2. Programação funcional: Closures são fundamentais em paradigmas de programação funcional, onde são usados para criar funções que podem ser passadas e invocadas posteriormente, mantendo o acesso ao escopo em que foram criadas, por exemplo, aplicações parciais ou currying.
3. Manipuladores de eventos e callbacks: Em JavaScript, closures são frequentemente usados em manipuladores de eventos e callbacks para manter o estado ou acessar variáveis que estavam em escopo quando o manipulador ou callback foi definido.
4. Padrões de módulo: Closures permitem o uso do padrão de módulo em JavaScript, possibilitando a criação de módulos com partes privadas e públicas.

Uma função de ordem superior é qualquer função que recebe uma ou mais funções como argumentos, que ela usa para operar em algum dado e/ou retorna uma função como resultado. As funções de ordem superior têm como objetivo abstrair alguma operação que é realizada repetidamente. O exemplo clássico disso é o map, que recebe como argumentos um array e uma função. O map então usa essa função para transformar cada item no array, retornando um novo array com os dados transformados. Outros exemplos populares em JavaScript são forEach, filter e reduce. Uma função de ordem superior não precisa apenas manipular arrays, pois há muitos casos de uso para retornar uma função de outra função. Function.prototype.bind é um exemplo desse tipo em JavaScript.

Map

Vamos supor que temos um array de nomes no qual precisamos transformar cada string em maiúsculas.

const names = ['irish', 'daisy', 'anna'];

A maneira imperativa seria assim:

const transformNamesToUppercase = function (names) {
  const results = [];
  for (let i = 0; i < names.length; i++) {
    results.push(names[i].toUpperCase());
  }
  return results;
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']

Use .map(transformerFn) torna o código mais curto e mais declarativo.

const transformNamesToUppercase = function (names) {
  return names.map((name) => name.toUpperCase());
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']

Vamos primeiro olhar o exemplo de cada um deles:

// Constructor de função ES5
function Person(name) {
  this.name = name;
}

// ES2015 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

Para construtores simples, eles parecem bem semelhantes.

A principal diferença no construtor vem quando se usa herança. Se quisermos criar uma classe Student que seja uma subclasse de Person e adicionar um campo studentId, é isso que devemos fazer além do que foi mostrado acima.

// Construtor de função ES5
function Student(name, studentId) {
  // Chamar o construtor da superclasse para inicializar membros derivados da superclasse.
  Person.call(this, name);

  // Inicializar os próprios membros da subclasse.
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// Classe ES2015
class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

É muito mais verboso usar a herança na ES5 e a versão ES2015 é mais fácil de entender e lembrar.

A propagação de eventos é um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, é primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela árvore da DOM até a raiz do documento.

Fase de bolha

Durante a fase de bolha, o evento começa no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.

Aqui está um exemplo usando a sintaxe moderna do ES6 para demonstrar a propagação de eventos:

// HTML:
// <div id="pai">
//   <button id="filho">Clique em mim!</button>
// </div>

const pai = document.getElementById('pai');
const filho = document.getElementById('filho');

pai.addEventListener('click', () => {
  console.log('Cliquei no elemento pai');
});

filho.addEventListener('click', () => {
  console.log('Cliquei no elemento filho');
});

Quando você clica no botão "Clique em mim!", devido à propagação de eventos, os manipuladores de eventos do filho e do pai serão acionados.

Parando a propagação

A propagação de eventos pode ser interrompida durante a fase de bolha usando o método stopPropagation(). Se um manipulador de eventos chamar stopPropagation(), ele impedirá que o evento continue a se propagar pela árvore da DOM, garantindo que apenas os manipuladores dos elementos até aquele ponto na hierarquia sejam executados.

Delegação de eventos

A propagação de eventos é a base para uma técnica chamada "delegação de eventos", onde você anexa um único manipulador de eventos a um ancestral comum de vários elementos e usa a delegação de eventos para lidar eficientemente com os eventos desses elementos. Isso é particularmente útil quando você tem um grande número de elementos semelhantes, como uma lista de itens, e deseja evitar a adição de manipuladores de eventos individuais a cada item.

Referências

• MDN Web Docs sobre Propagação de Eventos
• JavaScript.info - Bolhas e Captura
• Especificação de Eventos do W3C DOM Nível 3

TL;DR

Event capturing is a lesser-used counterpart to event bubbling in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.

Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element. It is disabled by default but can be enabled through an option on addEventListener().

What is event capturing?

Event capturing is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered at the root of the document and then flows down through the DOM tree to the target element.

Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation:

• Capturing phase: The event moves down towards the target element
• Target phase: The event reaches the target element
• Bubbling phase: The event bubbles up from the target element

Note that event capturing is disabled by default. To enable it you have to pass the capture option into addEventListener().

Capturing phase

During the capturing phase, the event starts at the document root and propagates down to the target element. Any event listeners on ancestor elements in this path will be triggered before the target element's handler. But note that event capturing can't happen until the third argument of addEventListener() is set to true as shown below (default value is false).

Here's an example using modern ES2015 syntax to demonstrate event capturing:

// HTML:
// <div id="parent">
//   <button id="child">Click me!</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener(
  'click',
  () => {
    console.log('Parent element clicked (capturing)');
  },
  true, // Set third argument to true for capturing
);

child.addEventListener('click', () => {
  console.log('Child element clicked');
});

When you click the "Click me!" button, it will trigger the parent element's capturing handler first, followed by the child element's handler.

Stopping propagation

Event propagation can be stopped during the capturing phase using the stopPropagation() method. This prevents the event from traveling further down the DOM tree.

// HTML:
// <div id="parent">
//   <button id="child">Click me!</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener(
  'click',
  (event) => {
    console.log('Parent element clicked (capturing)');
    event.stopPropagation(); // Stop event propagation
  },
  true,
);

child.addEventListener('click', () => {
  console.log('Child element clicked');
});

As a result of stopping event propagation, just the parent event listener will now be called when you click the "Click Me!" button, and the child event listener will never be called because the event propagation has stopped at the parent element.

Uses of event capturing

Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element.

• Stopping event bubbling: Imagine you have a nested element (like a button) inside a container element. Clicking the button might also trigger a click event on the container. By using enabling event capturing on the container's event listener, you can capture the click event there and prevent it from traveling down to the button, potentially causing unintended behavior.
• Custom dropdown menus:: When building custom dropdown menus, you might want to capture clicks outside the menu element to close the menu. Using capture: true on the document object allows you to listen for clicks anywhere on the page and close the menu if the click happens outside its boundaries.
• Efficiency in certain scenarios:: In some situations, event capturing can be slightly more efficient than relying on bubbling. This is because the event doesn't need to propagate through all child elements before reaching the handler. However, the performance difference is usually negligible for most web applications.

Further reading

• Event Capturing | MDN
• Bubbling and Capturing | JavaScript.info
• W3C DOM Level 3 Events Specification

TL;DR

The main difference lies in the bubbling behavior of mouseenter and mouseover events. mouseenter does not bubble while mouseover bubbles.

mouseenter events do not bubble. The mouseenter event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the mouseenter event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have mouseenter listeners attached and the mouse pointer moves from the parent element to the child element, mouseenter will only fire for the child.

mouseover events bubble up the DOM tree. The mouseover event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the mouseover event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, mouseover will fire for both the parent and the child.

mouseenter event:

• Does not bubble: The mouseenter event does not bubble. It is only triggered when the mouse pointer enters the element to which the event listener is attached, not when it enters any child elements.
• Triggered once: The mouseenter event is triggered only once when the mouse pointer enters the element, making it more predictable and easier to manage in certain scenarios.

A use case for mouseenter is when you want to detect the mouse entering an element without worrying about child elements triggering the event multiple times.

mouseover Event:

• Bubbles up the DOM: The mouseover event bubbles up through the DOM. This means that if you have an event listener on a parent element, it will also trigger when the mouse pointer moves over any child elements.
• Triggered multiple times: The mouseover event is triggered every time the mouse pointer moves over an element or any of its child elements. This can lead to multiple triggers if you have nested elements.

A use case for mouseover is when you want to detect when the mouse enters an element or any of its children and are okay with the events triggering multiple times.

Example

Here's an example demonstrating the difference between mouseover and mouseenter events:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mouse Events Example</title>
    <style>
      .parent {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        padding: 20px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      Parent Element
      <div class="child">Child Element</div>
    </div>

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

      // Mouseover event on parent.
      parent.addEventListener('mouseover', () => {
        console.log('Mouseover on parent');
      });

      // Mouseenter event on parent.
      parent.addEventListener('mouseenter', () => {
        console.log('Mouseenter on parent');
      });

      // Mouseover event on child.
      child.addEventListener('mouseover', () => {
        console.log('Mouseover on child');
      });

      // Mouseenter event on child.
      child.addEventListener('mouseenter', () => {
        console.log('Mouseenter on child');
      });
    </script>
  </body>
</html>

Expected behavior

• When the mouse enters the parent element:
  • The mouseover event on the parent will trigger.
  • The mouseenter event on the parent will trigger.
• When the mouse enters the child element:
  • The mouseover event on the parent will trigger again because mouseover bubbles up from the child.
  • The mouseover event on the child will trigger.
  • The mouseenter event on the child will trigger.
  • The mouseenter event on the parent will not trigger again because mouseenter does not bubble.

Further reading

• Element: mouseenter event - Web APIs | MDN
• Element: mouseover event - Web APIs | MDN

'use strict' é uma declaração usada para habilitar o modo estrito em scripts inteiros ou funções individuais. O modo estrito é uma maneira de optar por uma variante restrita do JavaScript.

Vantagens

• Faz com que seja impossível criar variáveis globais acidentalmente.
• Faz com que as atribuições que falhariam silenciosamente disparem uma exceção.
• Faz tentativas de excluir propriedades não deletáveis lançam uma exceção (onde antes da tentativa simplesmente não teria efeito).
• Exige que os nomes dos parâmetros de função sejam exclusivos.
• this é undefined no contexto global.
• Ele captura alguns erros comuns de programação, lançando exceções.
• Ele desabilita recursos que são confusos ou mal concebidos.

Desvantagens

• Muitos recursos faltantes que alguns desenvolvedores podem estar acostumados.
• Não há mais acesso a function.caller e function.arguments.
• Concatenação de scripts escritos em diferentes modos estritos pode causar problemas.

No geral, os benefícios superam as desvantagens e não há realmente a necessidade de depender dos recursos que o modo estrito proíbe. Todos nós deveríamos estar usando o modo estrito por padrão.

Funções síncronas são bloqueadoras enquanto funções assíncronas não são. Em funções síncronas, as instruções são concluídas antes que a próxima instrução seja executada. Nesse caso, o programa é avaliado exatamente na ordem das instruções, e a execução do programa é pausada se uma das instruções demorar muito tempo.

Funções assíncronas geralmente aceitam uma função de retorno de chamada como parâmetro e a execução continua na próxima linha imediatamente após a invocação da função assíncrona. A callback só é invocada quando a operação assíncrona é concluída e a pilha de chamadas está vazia. Operações pesadas, como carregar dados de um servidor web ou consultar um banco de dados, devem ser feitas de forma assíncrona para que a thread principal possa continuar executando outras operações em vez de bloquear até que aquela operação longa seja concluída (no caso dos navegadores, a interface do usuário ficará congelada).

Prós

• Evite o "callback hell", que pode ser ilegível.
• Facilita a escrita de código assíncrono sequencial que é legívell com .then().
• Facilita a escrita paralela de código assíncrono com Promise.all().
• Com promessas, esses cenários que estão presentes em código somente com retorno de chamada não ocorrerão:
  • Chamar a função de retorno de chamada muito cedo
  • Chamar a função de retorno de chamada tarde demais (ou nunca)
  • Chamar a função de retorno de chamada poucas ou muitas vezes
  • Falhar em passar qualquer ambiente/parâmetros necessários para a função de retorno de chamada
  • Ignorar quaisquer erros/exceções que possam ocorrer

Contras

• O código pode se tornar ligeiramente mais complexo (isso pode ser discutível).
• Em navegadores mais antigos onde ES2015 não é suportado, é necessário carregar um polyfill para poder usá-lo.

Ajax (asynchronous JavaScript and XML) é um conjunto de técnicas de desenvolvimento web que utilizam diversas tecnologias web no lado do cliente para criar aplicações web assíncronas. Com o Ajax, as aplicações web podem enviar dados para e receber do servidor de forma assíncrona (em segundo plano) sem interferir na exibição e comportamento da página existente. Ao separar a camada de intercâmbio de dados da camada de apresentação, o Ajax permite que páginas web, e por extensão, aplicações web, alterem o conteúdo dinamicamente sem precisar recarregar toda a página. Na prática, implementações modernas comumente usam JSON em vez de XML, devido às vantagens de o JSON ser nativo ao JavaScript.

A API XMLHttpRequest é frequentemente usada para a comunicação assíncrona ou hoje em dia, a API fetch.

Vantagens

• Melhor interatividade. O novo conteúdo do servidor pode ser alterado dinamicamente sem a necessidade de recarregar a página inteira.
• Reduzir conexões para o servidor, pois scripts e folhas de estilo só precisam ser solicitados uma vez.
• O State pode ser mantido em uma página. As variáveis do JavaScript e o estado do DOM persistirão porque a página principal do contêiner não foi recarregada.
• Basicamente, a maioria das vantagens de um SPA.

Desvantagens

• Páginas dinâmicas da web são mais difíceis de favoritar.
• Não funciona se o JavaScript foi desativado no navegador.
• Alguns rastreadores web não executam JavaScript e não veem o conteúdo que foi carregado pelo JavaScript.
• Páginas web que usam Ajax para buscar dados provavelmente terão que combinar os dados remotos com modelos do lado cliente para atualizar o DOM. Para que isso aconteça, o JavaScript terá que ser analisado e executado no navegador, e dispositivos móveis de baixo custo podem ter problemas com isso.
• Basicamente, a maioria das vantagens de um SPA.

TL;DR

XMLHttpRequest (XHR) and fetch() API are both used for asynchronous HTTP requests in JavaScript (AJAX). fetch() offers a cleaner syntax, promise-based approach, and more modern feature set compared to XHR. However, there are some differences:

• XMLHttpRequest event callbacks, while fetch() utilizes promise chaining.
• fetch() provides more flexibility in headers and request bodies.
• fetch() support cleaner error handling with catch().
• Handling caching with XMLHttpRequest is difficult but caching is supported by fetch() by default in the options.cache object (cache value of second parameter) to fetch() or Request().
• fetch() requires an AbortController for cancelation, while for XMLHttpRequest, it provides abort() property.
• XMLHttpRequest has good support for progress tracking, which fetch() lacks.
• XMLHttpRequest is only available in the browser and not natively supported in Node.js environments. On the other hand fetch() is part of the JavaScript language and is supported on all modern JavaScript runtimes.

These days fetch() is preferred for its cleaner syntax and modern features.

XMLHttpRequest vs fetch()

Both XMLHttpRequest (XHR) and fetch() are ways to make asynchronous HTTP requests in JavaScript. However, they differ significantly in syntax, promise handling, and feature set.

Syntax and usage

XMLHttpRequest is event-driven and requires attaching event listeners to handle response/error states. The basic syntax for creating an XMLHttpRequest object and sending a request is as follows:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.responseType = 'json';
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};
xhr.send();

xhr is an instance of the XMLHttpRequest class. The open method is used to specify the request method, URL, and whether the request should be asynchronous. The onload event is used to handle the response, and the send method is used to send the request.

fetch() provides a more straightforward and intuitive way of making HTTP requests. It is Promise-based and returns a promise that resolves with the response or rejects with an error. The basic syntax for making a GET request using fetch() is as follows:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.text())
  .then((data) => console.log(data));

Request headers

Both XMLHttpRequest and fetch() support setting request headers. However, fetch() provides more flexibility in terms of setting headers, as it supports custom headers and allows for more complex header configurations.

XMLHttpRequest supports setting request headers using the setRequestHeader method:

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');

For fetch(), headers are passed as an object in the second argument to fetch():

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Bearer YOUR_TOKEN',
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30,
  }),
});

Request body

Both XMLHttpRequest and fetch() support sending request bodies. However, fetch() provides more flexibility in terms of sending request bodies, as it supports sending JSON data, form data, and more.

XMLHttpRequest supports sending request bodies using the send method:

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.send(
  JSON.stringify({
    name: 'John Doe',
    age: 30,
  }),
);

fetch() supports sending request bodies using the body property in the second argument to fetch():

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30,
  }),
});

Response handling

XMLHttpRequest provides a responseType property to set the response format that we are expecting. responseType is 'text' by default but it support types likes 'text', 'arraybuffer', 'blob', 'document' and 'json'.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
xhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};
xhr.send();

On the other hand, fetch() provides a unified Response object with then method for accessing data.

// JSON data
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((data) => console.log(data));

// Text data
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.text())
  .then((data) => console.log(data));

Error handling

Both support error handling but fetch() provides more flexibility in terms of error handling, as it supports handling errors using the .catch() method.

XMLHttpRequest supports error handling using the onerror event:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL
xhr.responseType = 'json';
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};
xhr.onerror = function () {
  console.error('Error occurred');
};
xhr.send();

fetch() supports error handling using the catch() method on the returned Promise:

fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error occurred: ' + error));

Caching control

Handling caching with XMLHttpRequest is difficult, and you might need to add a random value to the query string in order to get around the browser cache. Caching is supported by fetch() by default in the second parameter of the options object:

const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'GET',
  cache: 'default',
});

Other values for the cache option include default, no-store, reload, no-cache, force-cache, and only-if-cached.

Cancelation

In-flight XMLHttpRequests can be canceled by running the XMLHttpRequest's abort() method. An abort handler can be attached by assigning to the .onabort property if necessary:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();
// ...
xhr.onabort = () => console.log('aborted');
xhr.abort();

Aborting a fetch() requires creating an AbortController object and passing it to as the signal property of the options object when calling fetch().

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error occurred: ' + error));

// Abort request.
controller.abort();

Progress support

XMLHttpRequest supports tracking the progress of requests by attaching a handler to the XMLHttpRequest object's progress event. This is especially useful when uploading large files such as videos to track the progress of the upload.

const xhr = new XMLHttpRequest();

// The callback is passed a `ProgressEvent`.
xhr.upload.onprogress = (event) => {
  console.log(Math.round((event.loaded / event.total) * 100) + '%');
};

The callback assigned to onprogress is passed a ProgressEvent:

• The loaded field on the ProgressEvent is a 64-bit integer indicating the amount of work already performed (bytes uploaded/downloaded) by the underlying process.
• The total field on the ProgressEvent is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the Content-Length value of the HTTP response.

On the other hand, the fetch() API does not offer any convenient way to track upload progress. It can be implemented by monitoring the body of the Response object as a fraction of the Content-Length header, but it's quite complicated.

Choosing between XMLHttpRequest and fetch()

In modern development scenarios, fetch() is the preferred choice due to its cleaner syntax, promise-based approach, and improved handling of features like error handling, headers, and CORS.

Further reading

• Fetch API | MDN
• XMLHttpRequest | MDN
• Request: cache property | MDN
• XMLHttpRequest | Javascript.info
• This API is so Fetching! - Mozilla Hacks

TL;DR

AbortController is used to cancel ongoing asynchronous operations like fetch requests.

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
  .then((response) => {
    // Handle response
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Request aborted');
    } else {
      console.error('Error:', error);
    }
  });

// Call abort() to abort the request
controller.abort();

Aborting web requests is useful for:

• Canceling requests based on user actions.
• Prioritizing the latest requests in scenarios with multiple simultaneous requests.
• Canceling requests that are no longer needed, e.g. after the user has navigated away from the page.

AbortControllers

AbortController allows graceful cancelation of ongoing asynchronous operations like fetch requests. It offers a mechanism to signal to the underlying network layer that the request is no longer required, preventing unnecessary resource consumption and improving user experience.

Using AbortControllers

Using AbortControllers involve the following steps:

1. Create an AbortController instance: Initialize an AbortController instance, which creates a signal that can be used to abort requests.
2. Pass the signal to the request: Pass the signal to the request, typically through the signal property in the request options.
3. Abort the request: Call the abort() method on the AbortController instance to cancel the ongoing request.

Here is an example of how to use AbortControllers with the fetch() API:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
  .then((response) => {
    // Handle response
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Request aborted');
    } else {
      console.error('Error:', error);
    }
  });

// Call abort() to abort the request
controller.abort();

Use cases

Canceling a fetch() request on a user action

Cancel requests that take too long or are no longer relevant due to user interactions (e.g., user cancels uploading of a huge file).

// HTML: <button id='cancel-button'>Cancel upload</button>
const btn = document.createElement('button');
btn.id = 'cancel-button';
btn.innerHTML = 'Cancel upload';
document.body.appendChild(btn);

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
  .then((response) => {
    // Handle successful response
  })
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Request canceled');
    } else {
      console.error('Network or other error:', error);
    }
  });

document.getElementById('cancel-button').addEventListener('click', () => {
  controller.abort();
});
document.getElementById('cancel-button').click(); // Simulate clicking the cancel button

When you click the "Cancel upload" button, in-flight request will be aborted.

Prioritizing latest requests in a race condition

In scenarios where multiple requests are initiated for the same data, use AbortController to prioritize the latest request and abort earlier ones.

let latestController = null; // Keeps track of the latest controller

function fetchData(url) {
  if (latestController) {
    latestController.abort(); // Abort any previous request
  }

  const controller = new AbortController();
  latestController = controller;
  const signal = controller.signal;

  fetch(url, { signal })
    .then((response) => response.json())
    .then((data) => console.log('Fetched data:', data))
    .catch((error) => {
      if (error.name === 'AbortError') {
        console.log('Request canceled');
      } else {
        console.error('Network or other error:', error);
      }
    });
}

fetchData('https://jsonplaceholder.typicode.com/posts/1');

// Simulate race conditions with new requests that quickly cancel the previous one
setTimeout(() => {
  fetchData('https://jsonplaceholder.typicode.com/posts/2');
}, 5);
setTimeout(() => {
  fetchData('https://jsonplaceholder.typicode.com/posts/3');
}, 5);
// Only the last request should (posts/3) will be allowed to complete