Posto questões de múltipla escolha sobre JavaScript no meu Instagram, as quais também posto aqui!
Do básico ao avançado: Teste quão bem você conhece o JavaScript, refresque um pouco do seu conhecimento, ou se prepare para uma entrevista! 💪 🚀 Eu atualizo esse repositório semanalmente com novas questões.
As respostas estão em seções recolhidas abaixo das questões, basta clicar nelas para expandir. Boa sorte ❤️
English
中文版本
Русский
Western Balkan
Deutsch
Tiếng Việt
function sayHi() {
console.log(name);
console.log(age);
var name = "Lydia";
let age = 21;
}
sayHi();- A:
Lydiaeundefined - B:
LydiaeReferenceError - C:
ReferenceErrore21 - D:
undefinedeReferenceError
Resposta
Dentro da função, nós primeiro declaramos a variável name usando a palavra-chave var. Isso significa que a variavel é elevada(hoisted) (O espaço na memória é separado durante a fase de criação) com o valor padrão undefined, até que chegue na linha onde definimos a variável. Ainda não definimos a variável na linha onde tentamos usar colocar no log o valor da variável name, portanto ela ainda tem o valor undefined.
Variáveis com a palavra-chave let (e const) são elevadas, mas diferente de var, não são inicializadas. Elas não acessíveis antes da linha em que as declaramos (ou inicializamos). Esse é um conceito chamado de "temporal dead zone". Quando tentamos acessar essas variáveis antes de serem declaradas, o JavaScript lança um ReferenceError
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1);
}- A:
0 1 2e0 1 2 - B:
0 1 2e3 3 3 - C:
3 3 3e0 1 2
Resposta
Por causa da fila de eventos em JavaScript, a callback de setTimeout é chamada depois do laço ter sido executado. Já que a variável i no primeiro laço foi declarada usando a palavra-chave var, seu valor era global. Durante o laço, incrementamos o valor de i por 1 em cada repetição, usando o operador unário ++. Quando a callback de setTimeout foi chamada, i valia 3.
No segundo laço, a variável i foi declarada usando a palavra-chave let: Variáveis declaradas com let (e const) só são acessíveis nos escopos de seus blocos (um bloco é qualquer código entre { }). Durante cada repetição do laço, i vai ter um novo valor, e cada valor tem seu escopo dentro do laço.
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius
};
shape.diameter();
shape.perimeter();- A:
20e62.83185307179586 - B:
20eNaN - C:
20e63 - D:
NaNe63
Resposta
Perceba que o valor de diameter é uma função normal, enquanto que o valor de perimeter é uma arrow function.
Com arrow functions, a palavra-chave this faz referência ao escopo atual em que está inserida, diferente de funções normais! Isso significa que quando nós chamamos perimeter, ela não faz referência ao objeto shape, mas ao seu escopo atual (por exemplo, window).
Não há radius fora de shape, então retorna undefined.
+true;
!"Lydia";- A:
1andfalse - B:
falseandNaN - C:
falseandfalse
Resposta
O operador unário + tenta converter um operando para um número. true é 1, e false é 0.
A string 'Lydia' tem valor truthy*. O que estamos realmente perguntando é "Esse valor truthy é falsy?". Isso retorna false.
const bird = {
size: "small"
};
const mouse = {
name: "Mickey",
small: true
};- A:
mouse.bird.sizenão é válido - B:
mouse[bird.size]não é válido - C:
mouse[bird["size"]]não é válido - D: Todos são válidos
Resposta
No JavaScript, todas chaves dos objetos são strings (a não ser que sejam um símbolo). Ainda que não possamos digitá-las como strings, elas são sempre convertidas para string sob o capô.
JavaScript interpreta afirmações. Quando usamos a notação de colchetes, ele vê o colchete de abertura [ e continua lendo até encontrar o colchete que o fecha ]. Só então vai avaliar e rodar as afirmações.
mouse[bird.size]: Primeiro avalia bird.size, que é "small". mouse["small"] retorna true
Por outro lado, com a notação de ponto ., isso não acontece. mouse não tem uma chave chamada bird, o que significa que mouse.bird é undefined. Então, pedimos pelo size usando a notação de ponto: mouse.bird.size. Uma vez que mouse.bird é undefined, estamos realmente pedindo undefined.size. Isso não é válido, e irá gerar um erro similar a Cannot read property "size" of undefined.
let c = { greeting: "Hey!" };
let d;
d = c;
c.greeting = "Hello";
console.log(d.greeting);- A:
Hello - B:
Hey - C:
undefined - D:
ReferenceError - E:
TypeError
Resposta
Em JavaScript, todos objetos interagem por referência quando os colocamos um igual ao outro.
Primeiro, a variável c guarda o valor de um objeto. Depois, declaramos d com a mesma referencia que c tem para o objeto.
Quando você muda um objeto, você muda todos eles.
let a = 3;
let b = new Number(3);
let c = 3;
console.log(a == b);
console.log(a === b);
console.log(b === c);- A:
truefalsetrue - B:
falsefalsetrue - C:
truefalsefalse - D:
falsetruetrue
Resposta
new Number() é uma funcção construtura padrão do JavaScript. Ainda que parece com um número, não é realmente um número: Tem um monte de funções extras e é um objeto.
Quando usamos o operador ==, só conferimos se ambas tem o mesmo valor. Ambas tem o valor de 3, então retorna true.
Contudo, quando usamos o operador ===, ambos valor e tipo tem de ser o mesmo. E não são: new Number() não é um número, é um objeto. Ambos retornam false.
class Chameleon {
static colorChange(newColor) {
this.newColor = newColor;
return this.newColor;
}
constructor({ newColor = "green" } = {}) {
this.newColor = newColor;
}
}
const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");- A:
orange - B:
purple - C:
green - D:
TypeError
Resposta
A função colorChange é estática. Métodos estáticos são designados para viver somente nos construtores em que são criados, e filhos não herdam esses métodos.
Já que freddie é filho de Chameleon, a função não é herdada, e não está disponível para freddie: Um erro TypeError é gerado.
let greeting;
greetign = {}; // Erro de digitação!
console.log(greetign);- A:
{} - B:
ReferenceError: greetign is not defined - C:
undefined
Resposta
Cria o log do objeto, pois criamos um objeto vazio no objeto global! Quando erramos a digitação de greeting como greetign, o interpretador do JavaScript viu isso como global.greetign = {} (ou window.greetign = {} em um navegador).
Para evitar esse comportamento, podemos usar "use strict". Isso garante que você tenha declarado uma variável antes de poder inicializá-la com algum valor.
function bark() {
console.log("Woof!");
}
bark.animal = "dog";- A: Nada, isso é ok!
- B:
SyntaxError. Não se pode adicionar propriedades em uma função dessa maneira. - C:
undefined - D:
ReferenceError
Resposta
Isso é possível em JavaScript, pois funções são objetos! (Tudo menos tipos primitivos são objetos)
Uma função é um tipo especial de objeto. O código que você escreve não é a verdadeira função. A função é um objeto com propriedades. E essa propriedade é invocável.
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const member = new Person("Lydia", "Hallie");
Person.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
};
console.log(member.getFullName());- A:
TypeError - B:
SyntaxError - C:
Lydia Hallie - D:
undefinedundefined
Resposta
Você não pode adicionar propriedades para um construtor igual aos objetos normais. Se você quer adicionar uma funcionalidade para todos objetos ao mesmo tempo, você deve usar o prototype.
Então nesse caso
Person.prototype.getFullName = function() {
return `${this.firstName} ${this.lastName}`;
};faria member.getFullName() funcionar. Por quê isso é beneficial? Digamos que tivéssemos esse método no próprio construtor. Talvez nem toda instância de Person precisasse desse método. Isso gastaria muita memória, uma vez que cada instância teria esse propriedade e teria seu espaço alocado. Ao invés disso, se adicionarmos somente ao protótipo, alocamos somente um único espaço na memória, e todas instâncias de Person ainda tem acesso ao método.
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");
console.log(lydia);
console.log(sarah);- A:
Person {firstName: "Lydia", lastName: "Hallie"}eundefined - B:
Person {firstName: "Lydia", lastName: "Hallie"}ePerson {firstName: "Sarah", lastName: "Smith"} - C:
Person {firstName: "Lydia", lastName: "Hallie"}e{} - D:
Person {firstName: "Lydia", lastName: "Hallie"}eReferenceError
Resposta
Na sarah, não usamos a palavra-chave new. Quando usamos new, se refere ao novo objeto vazio que criamos. Contudo, se não usarmos new, nos referimos ao objeto global!
Afirmamos que this.firstName vale "Sarah" e this.lastName vale "Smith". O que realmente fizemos foi definir global.firstName = 'Sarah' e global.lastName = 'Smith'. A sarah ainda é undefined.
- A: Target > Capturing > Bubbling
- B: Bubbling > Target > Capturing
- C: Target > Bubbling > Capturing
- D: Capturing > Target > Bubbling
Resposta
Durate a fase do capturing, o evento percorre os elementos pais até chegar no elemento algo. Isso alcança o elemento target, e o bubbling começa.
*Nota do tradutor: bubbling descreve uma forma específica de propagação de eventos. Em tradução livre é "borbulhar", que indica como os eventos "sobem" a cadeia onde estão aninhados, mas prefiro por manter o original, visto que é o nome dessa forma de propagação.
- A: Verdadeiro
- B: Falso
Resposta
Todos objetos tem protótipos, exceto pelo base object. O base object tem acesso à alguns métodos e propriedades, como .toString. É o motivo de podermos usar métodos já embutidos no JavaScript! Todos métodos desse tipo já estão embutidos no protótipo. Apesar do JavaScript não encontrar algum método diretamente no seu objeto, ele percorre a cadeia de protótipos até encontrar no base, o que torna acessível para todo objeto.
function sum(a, b) {
return a + b;
}
sum(1, "2");- A:
NaN - B:
TypeError - C:
"12" - D:
3
Resposta
JavaScript é uma linguagem dinamicamente tipada: Não especificamos quais tipos nossas variáveis são. Valores pode ser automaticamente convertidos em outro tipo sem você saber, o que é chamado de coerção implicita de tipo. Coerção é converter de um tipo em outro.
Nesse exemplo, JavaScript converte o número 1 em uma string, para que a função faça sentido e retorne um valor. Durante a adição de um tipo numérico (1) e uma string ('2'), o número é tratado como uma string. Podemos concatenar strings como "Hello" + "World", então o que está acontecendo aqui é "1" + "2" que retorna "12".
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);- A:
112 - B:
122 - C:
022 - D:
012
Resposta
O operador unário no sufixo ++:
- Retorna o valor (retorna o valor
0) - Incrementa o valor (numero agora é
1)
O operador unário prefixo ++:
- Incrementa o valor (numero agora é
2) - Retorna o valor (Retorna o valor
2)
Isso retorna 0 2 2.
function getPersonInfo(one, two, three) {
console.log(one);
console.log(two);
console.log(three);
}
const person = "Lydia";
const age = 21;
getPersonInfo`${person} is ${age} years old`;- A:
"Lydia"21["", " is ", " years old"] - B:
["", " is ", " years old"]"Lydia"21 - C:
"Lydia"["", " is ", " years old"]21
Resposta
Se usamos template literals marcadas, ou tagged template literals, o valor do primeiro argumento é sempre um array com a string, separada pelos tagged template liberals. Os argumentos restantes recebem os valores das expressões passadas!
function checkAge(data) {
if (data === { age: 18 }) {
console.log("You are an adult!");
} else if (data == { age: 18 }) {
console.log("You are still an adult.");
} else {
console.log(`Hmm.. You don't have an age I guess`);
}
}
checkAge({ age: 18 });- A:
You are an adult! - B:
You are still an adult. - C:
Hmm.. You don't have an age I guess
Resposta
Quando testamos igualdade, primitivos são comparados por seus valores, enquanto objetos são comparados por suas referências. O JavaScript confere se os objetos tem a referência para o mesmo local na memória.
Os dois objetos que estamos comparando não são assim: O objeto que passamos como parâmetro faz referência a uma posição na memória diferente daquela que o objeto que usamos para conferir a igualdade.
É por isso que ambos { age: 18 } === { age: 18 } E { age: 18 } == { age: 18 } retornam false.
function getAge(...args) {
console.log(typeof args);
}
getAge(21);- A:
"number" - B:
"array" - C:
"object" - D:
"NaN"
Resposta
O operador spread (...args.) retorna um array com os argumentos. Um array é um objeto, então typeof args retorna "object"
function getAge() {
"use strict";
age = 21;
console.log(age);
}
getAge();- A:
21 - B:
undefined - C:
ReferenceError - D:
TypeError
Resposta
Com "use strict", você pode ter certeza que não declarou variáveis globais. Nunca declaramos a variável age, e já que usamos "use strict", ira gerar um erro de referência. Se não tivéssemos usado "use strict", teria funcionado, uma vez que a propriedade age teria sido adicionada ao objeto global.
const sum = eval("10*10+5");- A:
105 - B:
"105" - C:
TypeError - D:
"10*10+5"
Resposta
eval executa o código mesmo se passado como string. Se é uma expressão, como nesse caso, ele cálcula a expressão. A expressão é 10 * 10 + 5. Isso retorna o número 105.
sessionStorage.setItem("cool_secret", 123);- A: Sempre, o dado não é perdido.
- B: Quando o usuário fechar a guia.
- C: Quando o usuário fechar o navegador inteiro.
- D: Quando o usuário desligar o computador.
Resposta
Dados guardados em sessionStorage são removidos depois de fechar a guia.
Se usássemos localStorage, o dado seria guardado para sempre, exceto se localStorage.clear() fosse chamado.
var num = 8;
var num = 10;
console.log(num);- A:
8 - B:
10 - C:
SyntaxError - D:
ReferenceError
Resposta
Coma a palavra-chave var, você pode declarar várias variáveis com o mesmo nome. A variável vai guardar o último valor.
Você não pode fazer isso com let ou const uma vez que eles conferem o bloco de escopo em que estão inseridos.
const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);
obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);- A:
falsetruefalsetrue - B:
falsetruetruetrue - C:
truetruefalsetrue - D:
truetruetruetrue
Resposta
Todas as chaves de objetos (exceto símbolos) são strings debaixo do capô, mesmo que você não digite como uma string. É por isso que obj.hasOwnProperty('1') também retorna true.
Não funciona assim para Set. Não tem um '1' no nosso set: set.has('1') retorna false. Temos o tipo número 1, então set.has(1) retorna true.
const obj = { a: "one", b: "two", a: "three" };
console.log(obj);- A:
{ a: "one", b: "two" } - B:
{ b: "two", a: "three" } - C:
{ a: "three", b: "two" } - D:
SyntaxError
Resposta
Se temos duas chaves com o mesmo nome, a última irá substituir a primeira. Ainda vai estar na primeira posição, mas com o último valor específicado.
26. O contexto global de execução do JavaScrit cria duas coisas para você: O objeto global, e a palavra-chave this.
- A: Verdadeiro
- B: Falso
- C: Depende
Resposta
O contexto base de execução é o contexto global: É aquilo que está acessível em qualquer lugar do código.
for (let i = 1; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}- A:
12 - B:
123 - C:
124 - D:
134
String.prototype.giveLydiaPizza = () => {
return "Just give Lydia pizza already!";
};
const name = "Lydia";
name.giveLydiaPizza();- A:
"Just give Lydia pizza already!" - B:
TypeError: not a function - C:
SyntaxError - D:
undefined
Resposta
String é um construtor embutido, no qual podemos adicionar propriedades. Nesse caso adicionamos um método ao seu protótipo. Tipos primitivos string são automaticamente convertidos em um objeto string, gerado pelo construtor String. Assim, todas as strings (que são objetos string) tem acesso ao método.
const a = {};
const b = { key: "b" };
const c = { key: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]);- A:
123 - B:
456 - C:
undefined - D:
ReferenceError
Resposta
Chaves de objeto são automaticamente convertidas em strings. Estamos tentando usar um objeto como chave do objeto a, com o valor de 123.
Contudo, quando transformamos um objeto em string, ele vira um "[Object object]". Então, o que estamos afirmando é a["Object object"] = 123. Após, tentamos a mesma coisa. c é outro objeto que (implicitamente) convertemos para string. Então, temos a["Object object"] = 456.
Então, fazemos o log de a[b], o que na verdade é a["Object object"]. Acabmos de definir esse valor, como 456, e é isso que ele retorna.
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");
bar();
foo();
baz();- A:
FirstSecondThird - B:
FirstThirdSecond - C:
SecondFirstThird - D:
SecondThirdFirst
Resposta
Temos a função setTimeout e a invocamos por primeiro. Ainda assim, apareceu no log por último.
Isso acontece pois nos navegadores, não temos apenas o nosso mecanismo de execução (runtime engine), temos também algo chamado WebAPI. A WebAPI nos da coisas como a setTimeout e o DOM.
Depois que a função de retorno (callback) é enviada para a WebAPI, a função setTimeout (mas não seu retorno ou callback) são enviadas para fora do stack.
Agora, foo é chamada, e "First" é adicionado ao log.
foo é evniada para fora do stack, e baz é chamada. "Third" é adicionado ao log.
A WebAPI não pode simplesmente adicionar coisas ao stack sempre que ficam prontas. Ao invés, disso, todo retorno que fica pronto é enviado para algo chamado queue.
É aqui que um laço de evento começa a ocorrer. Um laço de evento confere o stack e o queue. Se o stack está livre, pega a primeira coisa que estiver na queue e coloca no stack.
bar é chamada, "Second" é adicionado ao log, e é enviado para fora do stack.
<div onclick="console.log('first div')">
<div onclick="console.log('second div')">
<button onclick="console.log('button')">
Click!
</button>
</div>
</div>- A: A
divmais externa - B: A
divmais interna - C:
button - D: Um array dos elementos aninhandos.
Resposta
O elemento mais interno no aninhamento que causou o evento é o alvo do evento. Você pode parar o bubbling com event.stopPropagation.
<div onclick="console.log('div')">
<p onclick="console.log('p')">
Click here!
</p>
</div>- A:
pdiv - B:
divp - C:
p - D:
div
Resposta
Se clicarmos em p, veremos dois itens adicionaos ao log: p e div. Durante a propagação de eventos, existem 3 fases: capturar, adquirir o target, e o bubbling. Por padrão, manipuladores de eventos são executados junto a fase de bubbling (a não ser que você marque useCapture como true). Percorre do elemento aninhando mais interno, propagando para fora.
const person = { name: "Lydia" };
function sayHi(age) {
console.log(`${this.name} is ${age}`);
}
sayHi.call(person, 21);
sayHi.bind(person, 21);- A:
undefined is 21Lydia is 21 - B:
functionfunction - C:
Lydia is 21Lydia is 21 - D:
Lydia is 21function
Resposta
Com ambos, podemos passar o objeto que queremos que o this faça referência. Contudo, .call é executado imediatamente!
.bind. retorna uma cópia da função, mas com seu contexto vinculado à cópia. E não é executado imediatamente.
function sayHi() {
return (() => 0)();
}
typeof sayHi();- A:
"object" - B:
"number" - C:
"function" - D:
"undefined"
Resposta
A função sayHi retorna o valor retornado pela arrow function pois ela é uma IIFE (Immediately Invoked Function Expression ou Expressão de Função Invocada Imediatamente). Essa IIFE retornou 0, que é do tipo "number".
Para saber mais: Só existem 7 tipos já definidos: null, undefined, boolean, number, string, object, e symbol. "function" não é um tipo, uma vez que funções são objetos, elas são do tipo "object".
0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;- A:
0,'',undefined - B:
0,new Number(0),'',new Boolean(false),undefined - C:
0,'',new Boolean(false),undefined - D: Todos são falsy
Resposta
Existem somente seis valores falsy:
undefinednullNaN0''(string vazia)false
Funções construtoras, como new Number e new Boolean são truthy.
console.log(typeof typeof 1);- A:
"number" - B:
"string" - C:
"object" - D:
"undefined"
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);- A:
[1, 2, 3, 7 x null, 11] - B:
[1, 2, 3, 11] - C:
[1, 2, 3, 7 x empty, 11] - D:
SyntaxError
Answer
When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined, but you will see something like:
[1, 2, 3, 7 x empty, 11]
depending on where you run it (it's different for every browser, node, etc.)
(() => {
let x, y;
try {
throw new Error();
} catch (x) {
(x = 1), (y = 2);
console.log(x);
}
console.log(x);
console.log(y);
})();- A:
1undefined2 - B:
undefinedundefinedundefined - C:
112 - D:
1undefinedundefined
Resposta
O bloco do catch recebe o argumento x. Esse não é o mesmo x da variável de quando estamos passando os argumentos. A variável x é de escopo do seu bloco.
Depois, definimos essa variável, dentro do seu bloco, para valor 1, e definimos o valor de y, que pertence a um bloco maior. Agora, nos adicionamos ao log o valor de x, que dentro desse bloco tem valor 1.
Fora do bloco do catch. x ainda é undefined, e y ainda é 2. Quando tentamos usar console.log(x) fora do bloco do catch, isso retorna undefined, e y retorna 2.
- A: primitivo ou um objeto
- B: função ou um object
- C: Pegadinha! Somente objetos
- D: número ou um objeto
Resposta
JavaScript tem somente tipos primitivos e objetos.
Tipos primitivos são boolean, null, undefined, bigint, number, string, e symbol.
O que diferencia um primitivo de um objeto é que primitivos não métodos ou propriedades. Contudo, se você está atento vai lembrar que 'foo'.toUpperCase() retorna 'FOO' e não resulta em um TypeError. Isso acontece pois quando você tenta acessar uma propriedade ou método em um primitivo como, por exemplo, uma string, JavaScript vai transformar esse primitivo em objeto usando um wrapper, nesse caso o String, e discarta o wrapper imediatamente após executar o método ou propriedade. Todos os primitivos, com exceção de null e undefined exibem esse comportamento.
[[0, 1], [2, 3]].reduce(
(acc, cur) => {
return acc.concat(cur);
},
[1, 2]
);- A:
[0, 1, 2, 3, 1, 2] - B:
[6, 1, 2] - C:
[1, 2, 0, 1, 2, 3] - D:
[1, 2, 6]
Resposta
[1, 2] é nosso valor inicial. É o valor que começamos, e portanto o valor do primeiro acc. Durante a primeira iteração, acc é [1,2], e cur é [0, 1]. Nós concatemos ambos, o que resulta em [1, 2, 0, 1].
Então, [1, 2, 0, 1] é acc e [2, 3] é o cur. Concatenamos novamente, e chegamos em [1, 2, 0, 1, 2, 3].
!!null;
!!"";
!!1;- A:
falsetruefalse - B:
falsefalsetrue - C:
falsetruetrue - D:
truetruefalse
Resposta
null é falsy. !null retorna true. !true retorna false.
"" é falsy. !"" retorna true. !true retorna false.
1 é truthy. !1 retorna false. !false retorna true.
setInterval(() => console.log("Hi"), 1000);- A: um id único
- B: a quantidade de millisegundos especificada
- C: a função passada
- D:
undefined
Resposta
Retorna um id único. Esse id pode ser usado para limpar o intervalo com a função clearInterval().
[..."Lydia"];- A:
["L", "y", "d", "i", "a"] - B:
["Lydia"] - C:
[[], "Lydia"] - D:
[["L", "y", "d", "i", "a"]]