Eu preparei este material de estudo com intuito de ensinar o básico do básico de javascript, pois é um artigo bem longo no qual eu dividi em três partes totalizando 70 questões com exemplos práticos sobre javascript que são de extrema importância para você se dar bem como Web developer, então preste muita atenção.
1. Qual é a diferença entre undefinede null?
Antes de entender as diferenças entre undefinede nulldevemos entender as semelhanças entre elas.
Eles pertencem aos 7 tipos primitivos do JavaScript.
Eles são valores falsos . Valores avaliados como false ao convertê-lo em booleano usando Boolean(value)or !!value.
Ok, vamos falar sobre as diferenças.
undefined é o valor padrão de uma variável que não recebeu um valor específico. Ou uma função que não tem valor de retorno explícito ex. console.log. Ou uma propriedade que não existe em um objeto. O motor de JavaScript faz isso para nós a atribuição de undefinedvalor.
null é "um valor que não representa valor" . null é um valor que foi definido explicitamente para uma variável. Neste exemplo, obtemos um valor de null quando o fs.read Filemétodo não gera um erro.
Ao comparar null e undefined chegamos true usar == e false usar ===.
2. O que o operador && faz?
O operador && ou Logical AND encontra a primeira expressão falsa em seus operandos e a retorna e, se não encontrar nenhuma expressão falsa , retorna a última expressão. Emprega curto-circuito para evitar trabalho desnecessário. Eu usei isso no catch para fechar a conexão com o banco de dados em um dos meus projetos.
Usando instruções if .
Usando o operador && .
3. O que o operador || faz?
O operador `||`ou Logical `OR` encontra a primeira expressão de verdade em seus operandos e a retorna. Isso também emprega curto-circuito para evitar trabalho desnecessário. Ele foi usado antes para inicializar os valores dos parâmetros padrão nas funções IN antes que o *ES6 (EcmaScript 6) fosse suportado.
4. O uso do operador + ou unary plus é a maneira mais rápida de converter uma string em um número?
De acordo com a documentação da MDN, é a maneira mais rápida de converter uma string em um número porque ela não executa nenhuma operação no valor se já for um número.
5. O que é o DOM ?
DOM significa Document Object Model é uma interface ( API ) para documentos HTML e XML. Quando o navegador lê ( analisa ) nosso documento HTML pela primeira vez, ele cria um objeto grande, um objeto realmente grande com base no documento HTML que é o DOM . É uma estrutura de árvore que é modelada a partir do documento HTML. O DOM é usado para interagir e modificar a estrutura do DOM ou elementos ou nós específicos.
Imagine uma estrutura HTML como esta.
O equivalente DOM seria assim.
O `document` objeto em JavaScript representa o DOM . Ele nos fornece muitos métodos que podemos usar para selecionar elementos para atualizar o conteúdo dos elementos e muito mais.
6. O que é Propagação de Eventos ?
Quando um evento ocorre em um elemento DOM , esse evento não ocorre totalmente naquele apenas um elemento. Na fase borbulhante , o evento borbulha ou vai para o pai, para os avós, para o pai até que chegue até o `window` momento da fase de captura, o evento começa da parte windowinferior ao elemento que desencadeou o evento ou o `event.target`.
A Propagação de Eventos possui três fases.
Fase de captura - o evento começa a partir de windowentão desce para todos os elementos até atingir o elemento de destino.
Fase de destino - o evento atingiu o elemento de destino.
Fase de Bubbling - o evento borbulha do elemento alvo e depois sobe todos os elementos até atingir o window.
7. O que é o evento Bubbling ?
Quando um evento ocorre em um elemento DOM, esse evento não ocorre totalmente naquele apenas um elemento.
E o nosso código js.
O `addEventListener` método possui um terceiro parâmetro opcional use `Capture` com um valor padrão `false` evento que ocorrerá na fase Bubbling se `true` evento ocorrer na fase de captura. Se clicar sobre o `child` elemento ele registra `child`, `parent`, `grandparent`, html, documente window, respectivamente, na consola . Isso é evento borbulhante.
8. O que é captura de eventos ?
Quando um evento ocorre em um elemento DOM, esse evento não ocorre totalmente naquele apenas um elemento. Na Fase de Captura , o evento inicia de `window` todo o caminho até o elemento que acionou o evento.
Se tivermos um exemplo de marcação como esta.
Em nosso código js.
O `addEventListener` método possui um terceiro parâmetro opcional use `Capture` com um valor padrão `false` evento que ocorrerá na fase Bubbling se `true` ocorrer na fase de captura. Se clicar sobre o `child` elemento ele registra `window`, `document, html, grandparente parente child,` respectivamente, no console. Isso é captura de eventos .
9. Qual é a diferença entre event.preventDefault()e event.stopPropagation()métodos?
O `event.preventDefault()` método evita o comportamento padrão de um elemento. Se usado em um `form`, ele impede o envio. Se usado em um `anchor` no qual impede a navegação. Se usado em um `contextmenu`, impede a exibição ou exibição. Enquanto o `event.stopPropagation()` interrompe a propagação de um evento ou impede a ocorrência do evento na fase de bolhas ou captura.
10. Como saber se o `event.preventDefault()` método foi usado em um elemento?
Podemos utilizar a `event.defaultPrevented` propriedade no objeto de evento. Para retorna `boolean` indicando se o `event.preventDefault()` foi chamado em um elemento específico.
11. Por que esse código `obj.someprop.x` gera um erro?
Obviamente, isso gera um erro devido ao motivo pelo qual estamos tentando acessar um
`x` propriedade na `someprop` que possui um valor `undefined`. Lembre-se de propriedades em um objeto que não existe por si só e seu protótipo tem um valor padrão `undefined` e não possui propriedades `x`.
12. O que é `event.target` ?
Em termos mais simples, o `event.target` é o elemento no qual o evento ocorreu ou o elemento que acionou o proprio evento.
Exemplo de marcação HTML.
Exemplo de JavaScript.
Se você clicar no botão, ele registrará a marcação do botão, mesmo que anexemos o evento na parte externa da `div` ele sempre registrará o botão para que possamos concluir que o `event.target` é o elemento que acionou o evento.
13. O que é `event.currentTarget` ?
O `event.currentTarget` é o elemento no qual anexamos explicitamente o manipulador de eventos.
Copiando a marcação na pergunta 12 .
Nosso JS ficaria assim.
Se você clicar no botão, ele registrará a marcação `div` mais externa, apesar de clicarmos no botão. Neste exemplo, podemos concluir que o `event.currentTarget` é o elemento no qual anexamos o manipulador de eventos.
14. Qual a diferença entre `==` e `===` ?
A diferença entre `==` (igualdade abstrata) e `===` (igualdade estrita) é que ela `==` compara por valor após coerção e `===` por valor e tipo sem coerção.
Vamos nos aprofundar na `==`(igualdade abstrata). Então, primeiro vamos falar sobre coerção .
coerção é o processo de converter um valor para outro tipo. Como neste caso, o `==` faz coerção implícita . Ele `==` tem algumas condições para executar antes de comparar os dois valores.
Suponha que tenhamos que comparar `x` `==` `y` valores.
Se x e y tiver o mesmo tipo. Em seguida, compare-os com o `===` operador.
Se x é `null` e y é `undefined` então retorne `true`.
Se x é undefined e y é, null então retorne true.
Se x é do tipo `number` e y é do tipo string retorne x `==` `toNumber(y)`.
Se x é do tipo string e y é do tipo, `number` retorne `toNumber(x)` `==` y.
Se x for do tipo, `boolean` retorne `toNumber(x)` `==` y.
Se y for do tipo, `boolean` retorne x `==``toNumber(y)`.
Se x é um ou string, symbolou number e y é o tipo object Então retorne x `==` `toPrimitive(y)`.
Se x for um objecte x for um string, symbol Então retorne `toPrimitive(x)` `==` y.
Retorno `false`.
Nota: `toPrimitive` usa primeiro o método `valueOf` e depois o método `toString` nos objetos para obter o valor primitivo desse objeto.
Vamos dar exemplos.
'1,2' 1,2 true
'[object Obeject]' {} true
Todos esses exemplos retornam `true`.
O primeiro exemplo vai para a condição um porque x e y tem o mesmo tipo e valor.
O segundo exemplo vai para a condição quatro y é convertida em number antes de comparar.
O terceiro exemplo vai para a condição dois .
O quarto exemplo vai para a condição sete porque y é boolean.
O quinto exemplo vai para a condição oito . A matriz é convertida em string usando o método `toString()` que retorna 1,2.
O último exemplo vai para a condição dez. O objeto é convertido em uma string usando o método `toString()` que retorna `[object Object]`.
'[object, Object]' {} false
Se utilizar o operador `===`, todas as comparações, com exceção do primeiro exemplo, retornarão false porque não têm o mesmo tipo, enquanto o primeiro exemplo retornará `true` porque os dois têm o mesmo tipo e valor.
15. Por que ele retorna falso ao comparar dois objetos semelhantes em JavaScript?
O javaScript compara objetos e primitivos de maneira diferente. Nas primitivas, as compara por valor, enquanto nos objetos, por referência ou pelo endereço na memória em que a variável está armazenada . É por isso que o primeira instrução `console.log` retorna `false` e a segunda instrução `console.log` retorna `true`. `a` e `c` tem a mesma referência e `a` e `b` não.
16. O que faz o `!!` operador faz?
O operador NÃO `double` ou `!!` força o valor no lado direito em um booleano, basicamente é uma maneira elegante de converter um valor em um booleano.
17. Como avaliar várias expressões em uma linha?
Podemos usar o operador `,` para avaliar várias expressões em uma linha. Ele avalia da esquerda para a direita e retorna o valor do último item à direita ou do último operando.
Se você registrar o valor x seria 27. Primeiro, incrementar o valor de x seria 6, isso irá invocar a função `addFive(6)` que 6 passou como um parâmetro e atribuiu o resultado para x o novo valor x seria 11. Depois disso, irá multiplicar o valor atual do x que é 2 e atribuí-lo para o valor x atualizado x seria 22. Em seguida, subtraímos o valor atual de x5 e atribuímos o resultado ao valor x atualizado que seria 17. Por fim, incrementamos o valor de x10 e atribuímos o valor atualizado x agora ao valor x que seria 27.
18. O que é `Hoisting`?
Elevação é o termo usado para descrever a movimentação de variáveis e funções para o topo de seu escopo (global ou função), onde definimos essa variável ou função.
Ok para entender `Hoisting` , eu tenho que explicar o contexto de execução .
O contexto de execução é o "ambiente de código" atualmente em execução. O contexto de execução possui duas fases de compilação e execução .
Compilação - nesta fase torna-se todas as declarações de função que vai até o topo do seu alcance, para que possamos referenciá-los mais tarde recebe toda variáveis de declaração (declarar com a palavra chave var).
Execução - nesta fase, atribui valores às variáveis içadas anteriormente e executa ou invoca funções (métodos em objetos) .
Nota: apenas declarações de função e variáveis declaradas como `var` são Hoisting nem expressões de função ou arrow, let e const são palavras-chave.
No código abaixo temos um exemplo.
Este código registra `undefined`, `1`, `Hello Palamar!` respectivamente.
Portanto, a fase de compilação ficaria assim.
console.log(greet("Palamar"));
por exemplo, comentei sobre a atribuição de chamada de variável e função .
Após o término da fase de compilação , ela inicia a fase de execução , invocando métodos e atribuindo valores às variáveis.
19. O que é escopo ?
O escopo em JavaScript é a área em que temos acesso válido a variáveis ou funções. JavaScript tem três tipos de escopos. Escopo Global , Escopo da Função e Escopo do Bloco (ES6) .
Escopo Global - variáveis ou funções declaradas no espaço de nomes global estão no escopo global e, portanto, estão acessíveis em qualquer lugar em nosso código.
Escopo da Função - variáveis, funções e parâmetros declarados em uma função que são acessíveis dentro dessa função, mas não fora dela.
Escopo do bloco - variáveis ( `let, const`) declaradas em um bloco { } só podem ter acesso dentro dele.
Escopo também é um conjunto de regras para encontrar variáveis. Ele procura a variável mais próxima e para de procurar quando encontra. Isso é chamado de cadeia de escopo .
20. O que são `Closures`?
Essa é provavelmente a pergunta mais difícil de todas essas perguntas, porque Closures é um tópico controverso. Então eu vou explicar pelo que eu entendo.
Closures é simplesmente a capacidade de uma função, no momento da declaração, lembrar as referências de variáveis e parâmetros em seu escopo atual, no escopo da função pai, no escopo da função pai do pai até atingir o escopo global com a ajuda da Cadeia de Escopo . Basicamente, é o escopo criado quando a função foi declarada.
No exemplo abaixo irei explicar o funcionamento Closures.
Neste exemplo, quando declaramos a afunção, o escopo global faz parte do a's Closure.
O motivo da variável `globalVar` que não possui um valor na imagem devido ao motivo pelo qual o valor dessa variável pode mudar com base em onde e quando invocamos a afunção.
Mas no nosso exemplo acima, a variável `globalVar` terá o valor de abc .
Ok, vamos ter um exemplo complexo.
A explicação para isso é que, quando invocamos a função `outerFunc` e atribuído o valor retornado da função `innerFunc` para a variável x, o `outerParam` terá um valor de exterior mesmo que atribuir um novo valor outer-2 para a variável `outerVar` porque a reatribuição aconteceu após a invocação de a outerfunção e, quando invocamos a função `outerFunc`, ela procura o valor de `outerVar` na cadeia de escopo , o valor `outerVar` de "outer" será "externo".
Agora, quando invocamos a variável x que tem uma referência a `innerFunc`, a `innerParam` terá um valor de inner porque esse é o valor que passamos na invocação e a `globalVar` variável terá um valor de palpite, porque antes de invocar a variável x atribuímos um novo valor para `globalVare`, no momento da invocação, valor x `globalVarna` Cadeia de escopo é
palpite .
Temos um exemplo que demonstra um problema de não entender o closures corretamente.
Este código não está funcionando como esperávamos devido aos closures.
O `var` cria uma variável global e, quando pressionamos uma função, retornamos a variável global `i`. Então, quando chamamos uma dessas funções nessa matriz após o loop, ele registra `5`porque obtemos o valor atual de iqual é `5` e podemos acessá-lo porque é uma variável global. Porque Closures mantém as referências dessa variável e não seus valores no momento de sua criação. Podemos resolver isso usando o `IIFES` ou alterando o `var` para `let` escopo do bloco.
21. Quais são os valores falsos no JavaScript ?
Os valores `falsy` são valores que quando convertidos em booleanos se tornam falsos .
22. Como verificar se um valor é falso ?
Use a função booleana ou o operador Double NOT !!
23. O que "use strict" faz?
"use strict" é um recurso do ES5 no JavaScript que transforma nosso código no Modo Estrito em funções ou scripts inteiros. O Modo Estrito nos ajuda a evitar erros no início de nosso código e adiciona restrições a ele.