Javascript essentials Flashcards
Conceitos básicos e essenciais do javascript
Explique este conceito essencial do Javascript:
É JavaScript single-threaded?
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.
Explique este conceito essencial do Javascript:
Como funciona o V8 engine?
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
Explique este conceito essencial do Javascript:
Explique o loop de eventos em JavaScript
Event loop
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
Explique este conceito essencial do Javascript:
Qual a diferença entre var, let e const?
var tem escopo de função, let e const têm escopo de bloco. const não permite reatribuição, enquanto let permite.
Explique este conceito essencial do Javascript:
Quais são os diferentes tipos de dados em JavaScript?
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
Explique este conceito essencial do Javascript:
O que é uma função de callback e o que é callback hell?
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.
Explique este conceito essencial do Javascript:
O que é uma Promise e um encadeamento de Promises?
Promises & Chaining Promises
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);
});
Explique este conceito essencial do Javascript:
O que é async/await?
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');
Explique este conceito essencial do Javascript:
Qual a diferença entre os operadores == e ===?
Loose equality & strict equality
== compara apenas valores, === compara valores e tipos, sendo mais estrito.
Explique este conceito essencial do Javascript:
Quais são as diferentes maneiras de criar um objeto em JavaScript?
Através de literais, construtores, Object.create(), e classes.
Explique este conceito essencial do Javascript:
O que são os operadores rest e spread?
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.
Explique este conceito essencial do Javascript:
O que é uma função de ordem superior (higher-order function)?
É uma função que aceita outra função como argumento ou retorna uma função como resultado.
Explique este conceito essencial do Javascript:
O que é Closure? Quais são os casos de uso de Closures?
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
Explique este conceito essencial do Javascript:
Explique o conceito de hoisting em JavaScript.
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;
Explique este conceito essencial do Javascript:
O que é a zona morta temporal (Temporal Dead Zone)?
É 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.
Explique este conceito essencial do Javascript:
Prototype Inheritance and Prototype Chain
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
Explique este conceito essencial do Javascript:
Qual a diferença entre os métodos Call, Apply e Bind?
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();
Explique este conceito essencial do Javascript:
O que são funções lambda ou arrow functions?
Arrow functions são uma sintaxe mais curta para funções e não possuem seu próprio this, herdando do contexto exterior.
Explique este conceito essencial do Javascript:
Quais são as novas funcionalidades do ES6?
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.
Explique este conceito essencial do Javascript:
O que é uma “shallow copy” e uma “deep copy” de um objeto?
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 } }
Explique este conceito essencial do Javascript:
Como tornar um objeto imutável?
Object.seal() impede adição ou remoção de propriedades. Object.freeze() impede qualquer modificação no objeto.
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)?
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.
Explique este conceito essencial do Javascript:
O que é delegação de eventos (Event Delegation)?
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
Explique este conceito essencial do Javascript:
O que são eventos enviados pelo servidor (Server-Sent Events)?
Server-Sent Events (SSE) permitem que um servidor envie atualizações contínuas ao cliente via HTTP, sem a necessidade de pedidos repetidos.
Explique este conceito essencial do Javascript:
O que é um web worker ou service worker em JavaScript?
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.
Explique este conceito essencial do Javascript:
Como comparar dois objetos JSON em JavaScript?
Para comparar dois objetos JSON, é possível converter ambos em strings com JSON.stringify() ou comparar recursivamente as chaves e valores.
Explique este conceito essencial do Javascript:
Function Scope, Block Scope and Lexical Scope
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
}
Explique este conceito essencial do Javascript:
Expression vs Statement
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.");
}
