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';

Exercícios

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.

Exercícios

== é 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

Exercícios

console.log(0 == false, 0 === false, null == undefined, null === undefined);

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.

Exercícios

console.log('A');
setTimeout(() => console.log('timer'), 0);
Promise.resolve().then(() => {
  console.log('microtask 1');
  queueMicrotask(() => console.log('microtask 2'));
});
console.log('B');

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

Exercícios

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.

Exercícios

'use strict';

const counter = {
  value: 7,
  read() {
    return this?.value;
  },
};

const read = counter.read;
console.log(counter.read(), read());

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.

Exercícios

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

Exercícios

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.

Exercícios

let missing;
const empty = null;

console.log(
  missing === undefined,
  empty === null,
  typeof neverDeclared,
  typeof empty,
);

.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

Exercícios

function describe(a, b) {
  return `${this.prefix}:${a + b}`;
}
const context = { prefix: 'sum' };

console.log(describe.call(context, 2, 3), describe.apply(context, [4, 5]));

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

Exercícios

function total(a, b) {
  return this.base + a + b;
}

const add = total.bind({ base: 10 }, 2);
console.log(add(3), add.call({ base: 100 }, 4));

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)

Exercícios

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

Exercícios

const base = { score: 1 };
const child = Object.create(base);
child.score = 2;
delete child.score;

console.log(
  child.score,
  base.isPrototypeOf(child),
  Object.hasOwn(child, 'score'),
);

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"

Exercícios

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');
};

Exercícios

declared();
expressed();

function declared() {
  console.log('declared');
}

var expressed = function () {
  console.log('expressed');
};

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]

Exercícios

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

There are several methods for creating objects in JavaScript. Here are the various ways to do so:

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.

ES2015 class syntax is often clearer for constructor-and-prototype patterns, but constructor functions remain part of the language and are still encountered in older code and function-oriented APIs.

// 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

Exercícios

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.

Exercícios

function makeCounter(start) {
  let count = start;
  return () => ++count;
}

const first = makeCounter(0);
const second = makeCounter(10);

console.log(first(), first(), second(), first());

TL;DR

Uma função de ordem superior é qualquer função que recebe uma ou mais funções como argumentos, as quais ela usa para operar sobre alguns dados, e/ou retorna uma função como resultado.

Funções de ordem superior são destinadas a abstrair alguma operação que é executada repetidamente. O exemplo clássico disso é o Array.prototype.map(), que recebe um array e uma função como argumentos. O Array.prototype.map() então usa essa função para transformar cada item do array, retornando um novo array com os dados transformados. Outros exemplos populares em JavaScript são Array.prototype.forEach(), Array.prototype.filter() e Array.prototype.reduce(). Uma função de ordem superior não precisa apenas manipular arrays, pois existem muitos casos de uso para retornar uma função de outra função. Function.prototype.bind() é um exemplo que retorna outra função.

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 Array.prototype.map(transformerFn) torna o código mais curto e mais declarativo.

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

Funções de ordem superior

Uma função de ordem superior é uma função que recebe outra função como argumento ou retorna uma função como resultado.

Funções como argumentos

Uma função de ordem superior pode receber outra função como argumento e executá-la.

function greet(name) {
  return `Hello, ${name}!`;
}

function greetName(greeter, name) {
  console.log(greeter(name));
}

greetName(greet, 'Alice'); // Hello, Alice!

Neste exemplo, a função greetName é uma função de ordem superior porque ela recebe outra função (greet) como argumento e a usa para gerar uma saudação para o nome fornecido.

Funções como valores de retorno

Uma função de ordem superior pode retornar outra função.

function multiplier(factor) {
  return function (num) {
    return num * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Neste exemplo, a função multiplier retorna uma nova função que multiplica qualquer número pelo fator especificado. A função retornada é uma closure que lembra o valor de factor da função externa. A função multiplier é uma função de ordem superior porque retorna outra função.

Exemplos práticos

1. Decorador de logging: Uma função de ordem superior que adiciona funcionalidade de logging a outra função:

function withLogging(fn) {
  return function (...args) {
    console.log(`Calling ${fn.name} with arguments`, args);
    return fn.apply(this, args);
  };
}

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

const loggedAdd = withLogging(add);
console.log(loggedAdd(2, 3));
// Saída
// Chamando add com argumentos [2, 3]
// 5

A função withLogging é uma função de ordem superior que recebe uma função fn como argumento e retorna uma nova função que registra a chamada da função antes de executar a função original.

2. Memoization: Uma função de ordem superior que armazena em cache os resultados de uma função para evitar computações redundantes:

function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const memoizedFibonacci = memoize(function (n) {
  if (n <= 1) return n;
  return memoizedFibonacci(n - 1) + memoizedFibonacci(n - 2);
});

console.log(memoizedFibonacci(10)); // Saída: 55
console.log(memoizedFibonacci(100)); // Saída: 354224848179262000000

A função memoize é uma função de ordem superior que recebe uma função fn como argumento e retorna uma nova função que armazena em cache os resultados da função original com base em seus argumentos.

3. Lodash: Lodash é uma biblioteca utilitária que fornece uma ampla variedade de funções para trabalhar com arrays, objetos, strings e muito mais, sendo a maioria delas funções de ordem superior.

import _ from 'lodash';

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

// Filtrar o array
const evenNumbers = _.filter(numbers, (n) => n % 2 === 0); // [2, 4]

// Mapear o array
const doubledNumbers = _.map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]

// Encontrar o valor máximo do array
const maxValue = _.max(numbers); // 5

// Somar todos os valores do array
const sum = _.sum(numbers); // 15

Leitura complementar

• Higher-Order Functions
• Understanding Higher-Order Functions in JavaScript
• Higher Order Functions: How to Use Filter, Map and Reduce for More Maintainable Code

Exercícios

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.

Exercícios

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

Exercícios

const outer = document.querySelector('#outer');
const button = document.querySelector('button');

outer.addEventListener('click', () => console.log('outer'));
button.addEventListener('click', () => console.log('button'));
document.body.addEventListener('click', () => console.log('body'));

TL;DR

Event capturing is a lesser-used counterpart to event bubbling in the DOM event propagation mechanism. During capture, the event travels along its event path from ancestors toward the target, and capture listeners run in that order.

Event capturing is used less often than event bubbling, but it is useful when an ancestor needs to observe an event before it reaches the target. DOM events still travel through the capture phase; what defaults to false is the capture option when registering a listener with 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.

Capture listeners run before bubble listeners because capture is the first phase of DOM 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

Listeners are registered for the bubbling phase by default. Pass true as the third argument, or { capture: true }, to register a capture listener.

Capturing phase

During the capturing phase, the event travels from the top of the event path down toward the target. Capture listeners on ancestors in this path run before the target's listeners. The propagation phase exists regardless of whether any capture listeners are registered.

Here's an example demonstrating 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, only the parent event listener will be called when you click the "Click me!" button, and the child event listener will never be called because event propagation has stopped at the parent element.

Predict the output: capture, target, bubble in order

The complete event flow is the part candidates most often get wrong. The same click event passes through every ancestor on the way down (capture), arrives at the target, then walks back up (bubble). Here is the full sequence in one runnable example:

const grandparent = document.createElement('div');
const parent = document.createElement('div');
const child = document.createElement('button');
grandparent.appendChild(parent);
parent.appendChild(child);
document.body.appendChild(grandparent);

// Capture handlers (third arg = true)
grandparent.addEventListener(
  'click',
  () => console.log('1. grandparent capture'),
  true,
);
parent.addEventListener('click', () => console.log('2. parent capture'), true);

// Target handler (default: bubble phase)
child.addEventListener('click', () => console.log('3. target'));

// Bubble handlers
parent.addEventListener('click', () => console.log('4. parent bubble'));
grandparent.addEventListener('click', () =>
  console.log('5. grandparent bubble'),
);

child.click();
// Output (in this exact order):
// 1. grandparent capture
// 2. parent capture
// 3. target
// 4. parent bubble
// 5. grandparent bubble

The full picture: events go down, then up. Capture handlers fire from the root toward the target; bubble handlers fire from the target back toward the root. The target's own handler runs in the middle. (Listeners on the target itself fire in registration order regardless of the capture argument; the capture/bubble distinction only applies to ancestors.)

Bubbling vs capturing comparison

When to use the capture phase in real apps

In practice, the capture phase is the right tool for three specific situations:

1. Delegating non-bubbling events. focus, blur, scroll, and mouseenter/mouseleave do not bubble, but they are visible to ancestors during the capture phase. Adding addEventListener('focus', handler, true) to a form gives you a delegated focus listener for every input inside it.

   form.addEventListener(
     'focus',
     (event) => {
       highlightField(event.target);
     },
     true, // capture: catches focus events before they stop at the input
   );

2. Pre-empting child handlers for analytics or feature gates. The capture phase runs before any child's bubble handler, so a region-wide "intercept clicks" listener can record the click (or block the action with stopPropagation()) before component code sees it.

3. Modal libraries that need first-look at clicks. A modal dialog often listens at the document level with capture: true for outside-click dismissal. Using the bubble phase would let inner handlers call stopPropagation() and accidentally prevent the modal from closing.

stopPropagation() in capture vs bubble

stopPropagation() blocks all subsequent phases, not just the next ancestor.

const outer = document.createElement('div');
const inner = document.createElement('button');
outer.appendChild(inner);
document.body.appendChild(outer);

outer.addEventListener(
  'click',
  (event) => {
    console.log('outer capture: stopping here');
    event.stopPropagation();
  },
  true,
);
inner.addEventListener('click', () => console.log('inner target'));
outer.addEventListener('click', () => console.log('outer bubble'));

inner.click();
// Output: 'outer capture: stopping here'
// The target handler and bubble handler are both skipped.

Calling stopPropagation() during the capture phase prevents the target's own handlers and every bubble-phase ancestor from running. This is useful for an "intercept and replace" pattern, but if the target needs to keep working, listen during the bubble phase instead.

There is also event.stopImmediatePropagation(), which additionally prevents other listeners on the same element (registered in the same phase) from firing. Use it when multiple scripts add listeners to the same element and only one of them should run.

Further reading

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

Exercícios

section.addEventListener('click', () => console.log('section bubble'));
section.addEventListener('click', () => console.log('section capture'), {
  capture: true,
});
button.addEventListener('click', () => console.log('button'));