Javascript essentials

Question 1

Explique este conceito essencial do Javascript:

É JavaScript single-threaded?

Answer 1

Javascript em si mesmo não é single-threaded nem multi-threaded. A linguagem não tem nada a ver com threading. É somente um conjunto de instruções para a plataforma gerenciar. A plataforma lida com essas instruções do seu próprio jeito, seja de uma maneira single-threaded ou multi-threaded.

Question 2

Explique este conceito essencial do Javascript:

Como funciona o V8 engine?

Answer 2

V8 compila o código Javascript, o parser gera uma árvore de sintaxe abstrata (abstract syntax tree). Ignition, o interpretador, gera bytecode (uma abstração de código de maquina) desta árvore. TurboFan, o compilador otimizador, eventualmente pega o bytecode e gera um codigo de maquina otimizado a partir dele.

Understanding V8’s Bytecode
https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775

Question 3

Explique este conceito essencial do Javascript:

Explique o loop de eventos em JavaScript

Event loop

Answer 3

O loop de eventos é um componente central do ambiente de execução do JavaScript, responsável por agendar e executar tarefas assíncronas.

Ele funciona monitorando duas filas: a pilha de chamadas (call stack) e a fila de eventos. A pilha de chamadas é uma estrutura de dados LIFO que armazena as funções em execução.

Operações assíncronas, como setTimeout, requisições fetch e promises, são gerenciadas pelas Web APIs, que utilizam threads do thread pool para completar tarefas sem bloquear a thread principal.

A fila de microtarefas (job queue) é uma estrutura FIFO que armazena callbacks de async/await, promises e process.nextTick() prontos para execução, enquanto a fila de macrotarefas (task queue) gerencia callbacks de operações assíncronas como setTimeout e setInterval. O loop de eventos monitora constantemente a pilha de chamadas e, quando ela está vazia, busca na fila de microtarefas ou macrotarefas callbacks prontos para serem executados.

JavaScript Event Loop Explained
https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

Question 4

Explique este conceito essencial do Javascript:

Qual a diferença entre var, let e const?

Answer 4

var tem escopo de função, let e const têm escopo de bloco. const não permite reatribuição, enquanto let permite.

Question 5

Explique este conceito essencial do Javascript:

Quais são os diferentes tipos de dados em JavaScript?

Answer 5

Tipos primitivos: string, number, boolean, null, undefined, symbol. Estes tipos são imutáveis, ou seja, seus valores não podem ser mudados.

Tipos de referencia: object e array. Estes tipos armazenam um ponteiro de referencia aos dados, significando que se fossem designados a outras variaveis, essas variaveis, ao serem modificadas, alterariam o valor do objeto original.

33 Concepts Every JavaScript Developer Should Know
https://blog.codingwinner.com/33-concepts-every-javascript-developer-should-know-ef225a72ed7f

Question 6

Explique este conceito essencial do Javascript:

O que é uma função de callback e o que é callback hell?

Answer 6

Callback é uma função passada como argumento para outra. Callback hell ocorre quando há muitos callbacks aninhados, tornando o código difícil de manter.

Question 7

Explique este conceito essencial do Javascript:

O que é uma Promise e um encadeamento de Promises?

Promises & Chaining Promises

Answer 7

Uma Promise representa o resultado de uma operação assíncrona futura.
Um encadeamento de Promises permite executar uma sequencia de operações assíncronas de maneira ordenada.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data:', data);
    return fetch('https://api.example.com/more-data');
  })
  .then(response => response.json())
  .then(moreData => {
    console.log('More Data:', moreData);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Question 8

Explique este conceito essencial do Javascript:

O que é async/await?

Answer 8

Fornece uma maneira de escrever código asincrono que “tem aparencia” e “se comporta” como código asincrono, melhorando a legibilidade e manutenção.

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData('https://api.example.com/data');

Question 9

Explique este conceito essencial do Javascript:

Qual a diferença entre os operadores == e ===?

Loose equality & strict equality

Answer 9

== compara apenas valores, === compara valores e tipos, sendo mais estrito.

Question 10

Explique este conceito essencial do Javascript:

Quais são as diferentes maneiras de criar um objeto em JavaScript?

Answer 10

Através de literais, construtores, Object.create(), e classes.

Question 11

Explique este conceito essencial do Javascript:

O que são os operadores rest e spread?

Answer 11

rest coleta múltiplos argumentos em um array; spread espalha os elementos de um array ou objeto, permitindo facilmente clonar arrays, concatenar arrays, e mergear objects.

Question 12

Explique este conceito essencial do Javascript:

O que é uma função de ordem superior (higher-order function)?

Answer 12

É uma função que aceita outra função como argumento ou retorna uma função como resultado.

Question 13

Explique este conceito essencial do Javascript:

O que é Closure? Quais são os casos de uso de Closures?

Answer 13

Closure é quando uma função lembra do escopo em que foi criada, ou seja, tem acesso às variaveis definidas no escopo onde a função foi criada. Como resultado, mesmo que a função acima onde foi invocada a função closure finalize, as variáveis continuarão retidas na memória até a execução da função closure. Isto pode causar “memory leaks” se não for usado com cuidado.

É útil para encapsular estados e criar funções privadas, expondo assim somente a funcionalidade necessária.

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count - ;
      return count;
    },
  };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

https://blog.devgenius.io/45-javascript-super-hacks-every-developer-should-know-92aecfb33ee8

Question 14

Explique este conceito essencial do Javascript:

Explique o conceito de hoisting em JavaScript.

Answer 14

Hoisting é o comportamento padrão do Javascript de mover declarações de variáveis e funções para o topo de seu escopo antes da execução. Conceitualmente esta definição dá a entender que as declarações de variáveis e funções são movidas (içadas) fisicamente, mas não é isso o que acontece. Em vez disso, são colocadas na memória durante a fase de compilação, mas permanecem exatamente onde você as digitou no seu código.

O Hoisting permite que você execute funções antes das suas declarações. Por exemplo:

console.log(soma(2, 5))
function soma(a, b) {
    return a + b
}

function soma(a,b){
    return a + b
}
console.log(soma(2,5))

O JavaScript apenas eleva (hoists) as declarações, não as inicializações. Se uma variável for declarada e inicializada após usá-la, o valor será undefined. Por exemplo:

console.log(num); // Retorna undefined
var num;
num = 6;

Question 15

Explique este conceito essencial do Javascript:

O que é a zona morta temporal (Temporal Dead Zone)?

Answer 15

É o período entre a criação de uma variável com let ou const e sua inicialização, onde acessá-la resulta em erro.

Question 16

Explique este conceito essencial do Javascript:

Prototype Inheritance and Prototype Chain

Answer 16

Javascript usa herança baseada em protótipo (prototype-based inheritance), onde objetos podem herdar propriedades e metodos de outros atraves de Prototype Chain.

// Prototype
function Animal(name) {
  this.name = name;
}
Animal.prototype.sound = function () {
  console.log("Some generic sound");
};
// Inheritance
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.sound = function () {
  console.log("Bark!");
};
const myDog = new Dog("Buddy", "Labrador");
myDog.sound(); // Bark!

33 Concepts Every JavaScript Developer Should Know
https://blog.codingwinner.com/33-concepts-every-javascript-developer-should-know-ef225a72ed7f

Question 17

Explique este conceito essencial do Javascript:

Qual a diferença entre os métodos Call, Apply e Bind?

Answer 17

call, apply e bind são metodos usados para controlar o valor da keyword this numa função. Dão flexibilidade ao permitir especifica o contexto no qual uma função deve ser executada.

const person = {
  name: "John",
  greet(message) {
    console.log(`${message}, ${this.name}!`);
  }
};
const anotherPerson = {
  name: "Alice",
};
// call
person.greet.call(anotherPerson, "Hello");
// apply
person.greet.apply(anotherPerson, ["Hi"]);
// bind
const greetAlice = person.greet.bind(anotherPerson, "Hey");
greetAlice();

Question 18

Explique este conceito essencial do Javascript:

O que são funções lambda ou arrow functions?

Answer 18

Arrow functions são uma sintaxe mais curta para funções e não possuem seu próprio this, herdando do contexto exterior.

Question 19

Explique este conceito essencial do Javascript:

Quais são as novas funcionalidades do ES6?

Answer 19

ES6 introduziu let, const, arrow functions, classes, Promises, template literals, destructuring, spread/rest operators, módulos, Map, Set, WeakMap, WeakSet, Iterators and Generators e mais.

Question 20

Explique este conceito essencial do Javascript:

O que é uma “shallow copy” e uma “deep copy” de um objeto?

Answer 20

Pode-se usar Object.assign() ou o spread operator (...) para fazer uma “shallow copy” ou clone de um objeto, porem a copia continuará fazendo referencia ao mesmo objeto original. Isso significa que se o valor de uma propriedade da copia for mudado, mudará consequentemente o valor no objeto original.

Por outro lado uma “deep copy” copia objetos aninhados “por valor”, e não por referencia, prevenindo modificações indesejadas no objeto original. Pode ser feito com recursão ou com JSON.

const obj = {
  a: 1,
  b: {
    c: 2
  }
};
const deepClone = JSON.parse(JSON.stringify(obj));
console.log(deepClone); // { a: 1, b: { c: 2 } }

Question 21

Explique este conceito essencial do Javascript:

Como tornar um objeto imutável?

Answer 21

Object.seal() impede adição ou remoção de propriedades. Object.freeze() impede qualquer modificação no objeto.

Question 22

Explique este conceito essencial do Javascript:

O que são evento, fluxo de eventos, propagação de eventos (event bubbling) e captura de eventos (event capturing)?

Answer 22

Eventos são interações com o DOM. Event bubbling propaga o evento de dentro para fora, enquanto event capturing propaga de fora para dentro.

Event bubbling
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling

Event order
https://www.quirksmode.org/js/events_order.html

Question 23

Explique este conceito essencial do Javascript:

O que é delegação de eventos (Event Delegation)?

Answer 23

Delegação de eventos é a prática de anexar um único listener a um elemento pai para gerenciar eventos em seus filhos, melhorando a eficiência.

Event delegation ajuda em situações onde se adicionaram elementos dinamicamente. O elemento pai capturará todos os eventos independentemente de quantos elementos filhos entrarem depois, sem precisar ser atachado um listener a cada um.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Event Propogation and Delegation</title>

    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="main">
      <p class="main-p">Click here 1</p>
      <p class="main-p">Click here 2</p>
      <p class="main-p">Click here 3</p>
    </section>

    <script src="script.js"></script>
  </body>
</html>

const section = document.querySelector(".main");

section.addEventListener("click", (e) => {
  const target = e.target;

  if (target.classList.contains("main-p")) {
    target.classList.toggle("p-color-change");
  }
})

4 Must-Know JavaScript Interview Questions in 2024
https://javascript.plainenglish.io/4-must-know-javascript-interview-questions-in-2024-871959575e86

Question 24

Explique este conceito essencial do Javascript:

O que são eventos enviados pelo servidor (Server-Sent Events)?

Answer 24

Server-Sent Events (SSE) permitem que um servidor envie atualizações contínuas ao cliente via HTTP, sem a necessidade de pedidos repetidos.

Question 25

Explique este conceito essencial do Javascript:

O que é um web worker ou service worker em JavaScript?

Answer 25

Web workers são scripts que rodam em segundo plano, sem bloquear o thread principal. Service workers permitem cache offline e manipulação de redes e são usados para criar PWAs.

Question 26

Explique este conceito essencial do Javascript:

Como comparar dois objetos JSON em JavaScript?

Answer 26

Para comparar dois objetos JSON, é possível converter ambos em strings com JSON.stringify() ou comparar recursivamente as chaves e valores.

Question 27

Explique este conceito essencial do Javascript:

Function Scope, Block Scope and Lexical Scope

Answer 27

Function scope significa que uma variavel declarada dentro de uma função pode ser acessada somente dentro do escopo de tal função.
Block scope, introduzido com let e const, deixa uma variavel acessivel somente dentro do seu bloco, criado com chaves (curly braces).
Lexical scope significa que a função pode acessar variaveis de fora do seu escopo.

// Function Scope
function exampleFunction() {
  let localVar = "I’m local!";
  console.log(localVar);
}
// Block Scope
function blockExample() {
  if (true) {
    let blockVar = "I'm in a block!";
    console.log(blockVar);
  }
  // console.log(blockVar); // Error: blockVar is not defined outside the block
}

Question 28

Explique este conceito essencial do Javascript:

Expression vs Statement

Answer 28

Uma expression é algo que produz um valor, um statement executa uma ação. Expressions podem ser parte dos statements, como o 3 + 4 dentro do if statement.

// Expression
let sum = 3 + 4;
// Statement
if (sum === 7) {
 console.log("The sum is 7.");
}

https://blog.codingwinner.com/33-concepts-every-javascript-developer-should-know-ef225a72ed7f