A pesquisa sugere que há sete elementos da linguagem JavaScript que os desenvolvedores pesquisam mais do que qualquer outro. Embora você não consiga escrever um programa JavaScript completo usando apenas esses recursos, certamente não irá longe sem eles. Os iniciantes precisam aprendê-los, mas eles também são ótimos para atualizar o cérebro dos veteranos do JavaScript. Vamos dar uma olhada nos recursos da linguagem JavaScript que todo desenvolvedor precisa.

Os elementos da linguagem JavaScript 'mais pesquisados'

  • for laço
  • map
  • foreach
  • substring
  • array
  • switch
  • reduce

array: Armazenando coleções

Coleções de valores são um aspecto essencial de todas as linguagens de programação. Em JavaScript, usamos arrays para armazenar coleções. Matrizes JavaScript são incrivelmente flexíveis, em grande parte devido ao sistema de digitação dinâmica do JavaScript. Você pode declarar um array vazio ou que já contenha valores:


// make a new empty array:
const myArray = ();
//add a value:
myArray.push("Happy New Year");
console.log(myArray(0));  // outputs “Happy New Year”

// make an array with values:
const myOtherArray = (0, "test", true);

Como a maioria das linguagens, os arrays em JavaScript são “base 0”, o que significa que o primeiro elemento tem um índice de 0 em vez de 1. Você também pode ver que myOtherArray pode conter uma diversidade de tipos: números, strings e booleanos.

para: O loop clássico

O for loop é um componente fundamental de todas as linguagens de programação, mas a versão do JavaScript possui algumas peculiaridades. A sintaxe básica do for laço é:


for (let i = 0; i < 10; i++){
  console.log("i is going up: "+ i);
}

Este código diz: Dê-me uma variável chamada i e, desde que seja menor que 10, faça o que está indicado entre colchetes. Cada vez que você fizer isso, adicione 1 a i. Esta é uma variável de loop comum, onde “i” é a abreviação de “iterador”.

Esta forma de for em JavaScript é típico de muitas linguagens. É um tipo declarativo de loop. Este formulário é muito flexível, pois cada parte pode ter muitas variações:


// This will loop forever, unless something else changes i, because i is not modified by the loop
for (let i = 0; i < 10;){
  console.log("i is going up: "+ i);
}

// you can declare multiple variables, tests and modifiers at once
for (let i = 0, j = 10; i * j < 80 && i < 10; i++, j=j+5){
    console.log(i * j); // outputs 0, 15, 40, 75 and breaks
}

Pode ser útil, especialmente ao lidar com loops aninhados complexos, declarar iteradores mais descritivos como userIterator ou productCounter.

Há também um for-in loop em JavaScript, útil para fazer loop em objetos JSON:


let myObject = { foo: "bar", test: 1000 }
for (let x in myObject) { 
 for (let x in myObject) { console.log(x + "=" + myObject(x)) } 
}
// outputs: foo=bar test=1000

Você também pode usar for-in em matrizes:


let arr = (5, 10, 15, 20);
for (let x in arr2) { 
  console.log(x + "=" + arr2(x));
}
// outputs: 0=5, 1=10, 2=15, 3=20

Nos objetos, o iterador (x) torna-se o nome da propriedade. Na matriz, ele se torna o índice. Isso pode então ser usado para acessar as propriedades e elementos do objeto ou da matriz.

forEach: O loop funcional

O JavaScript moderno abrange a programação funcional, e o forEach A função é um excelente exemplo disso. O forEach loop é uma maneira simples e funcional de iterar sobre coleções: ele mantém toda a lógica rígida – sem declarar variáveis ​​de iterador estranhas como você faria com for.

Aqui você pode ver a simplicidade de forEach:


arr.forEach((x) => { console.log (x) })
// outputs: 5, 10, 15, 20

Passamos uma função para forEach, definindo uma função anônima embutida usando a sintaxe de seta. Fazer isso é muito comum. (Também poderíamos declarar uma função nomeada e passá-la.)

Você notará isso em forEacha variável exposta, no nosso caso x, recebe na verdade o valor do elemento, não o índice.

Há outra maneira simples de obter um iterador, que tem o mesmo comportamento:


arr.forEach((x, i) => { console.log (i + "=" + x) })
// outputs 0=5, 1=10, 2=15, 3=20

Você também verá a sintaxe simplificada da seta com forEach (que tem o mesmo comportamento):


arr2.forEach(x => console.log(x))

Esta sintaxe retorna automaticamente, mas forEach não requer um valor de retorno.

Muitos desenvolvedores preferem forEach para o tradicional for laço. Em geral, use qualquer sintaxe de loop que torne seu código mais claro e fácil de entender. (Isso também facilitará o entendimento de outros desenvolvedores.)

mapa: o modificador funcional

Enquanto forEach simplesmente faz um loop sobre cada elemento, o map A função permite que você faça um loop no array e execute ações em cada elemento. O map função retorna uma nova coleção com a ação aplicada a cada elemento.

Digamos que queremos pegar nosso array e multiplicar cada elemento por 10:


let modifiedArr = arr.map((x) => { return x * 10 } )
// modifiedArray now holds: (50, 100, 150, 200)

Você também pode usar o formato abreviado:


let modifiedArr = arr.map(x => x * 100 )
// modifiedArray now holds: (500, 1000, 1500, 2000)

Usando o formato longo, você pode executar lógica arbitrária dentro do retorno de chamada:


let modifiedArr = arr.map((x) => { 
  let foo = 1000;
  // Do more stuff
  return x * foo; 
})

À medida que os retornos de chamada se tornam mais elaborados, mapa simplicidade declina. Ou seja: prefira retornos de chamada simples sempre que possível.

reduzir: Transformando coleções em um único valor

Ao lado map, reduce é uma parte funcional do JavaScript. Ele permite que você pegue uma coleção e recupere um único valor. Sempre que você precisar realizar uma operação em um array que o “reduza” a um único valor, você pode usar reduce: 


const numbers = (1, 2, 3, 4);

const sum = numbers.reduce((accumulator, number) => accumulator + number);
console.log(sum); // Output: 10

O reduce assume uma função de dois argumentos, onde o primeiro argumento é o acumulador—uma variável que viverá em todas as iterações, tornando-se, em última análise, a saída do reduce chamar. O segundo argumento (number) é o valor do elemento para a iteração.

Você pode usar reduce para especificar um valor inicial definindo um segundo argumento após a função de retorno de chamada:


// With initial value of 10
const sum2 = numbers.reduce((accumulator, number) => accumulator + number, 10);
console.log(sum2); // Output: 20 (10 + 1 + 2 + 3 + 4)

Isso também é útil quando a coleção pode estar vazia. Nesse caso, o segundo argumento atua como valor padrão.

substring

String.substring é um método em string objetos que permitem obter uma parte da string:


// Let’s get the substring of this Emerson quote:
let myString = "Enthusiasm is the mother of effort, and without it nothing great was ever achieved."

console.log(myString.substring(0,34));
// outputs: 'Enthusiasm is the mother of effort'

trocar

A switch é um recurso de linguagem comum que lida com o fluxo de controle de ramificação. Os desenvolvedores usam switch lidar com filiais de uma forma mais compacta e compreensível do que if/else quando há muitas opções. Ao longo dos anos, o JavaScript switch declaração tornou-se mais poderosa. A sintaxe básica de um switch é:


switch (word) {
    case "Enthusiasm":
      console.log("This word is about passion and excitement.");
      break;
    case "mother":
      console.log("This word is about the source or origin.");
      break;
    case "effort":
      console.log("This word is about hard work and dedication.");
      break;
    default:
      console.log("I don't have specific analysis for this word.");
  }

O switch palavra-chave aceita uma variável, que neste caso é word. Cada instrução case corresponde a um valor possível do switch variável. Observe que temos que usar o break instrução para encerrar o bloco case. Isso é diferente de muitas construções em que chaves são usadas para definir o escopo. Se um break instrução for omitida, o código “cairá” para a próxima case declaração.

A instrução padrão nos dá o case que será executado se nada mais corresponder. Isso é opcional.

Veja como poderíamos usar isso switch declaração com nossa citação de Emerson:


let myString = "Enthusiasm is the mother of effort, and without it nothing great was ever achieved."
    
function analyzeWord(word) {  
  switch (word) {
    case "Enthusiasm":
      console.log("This word is about passion and excitement.");
      break;
    case "mother":
      console.log("This word is about the source or origin.");
      break;
    case "effort":
      console.log("This word is about hard work and dedication.");
      break;
    default:
      console.log("I don't have specific analysis for this word.");
  }
}
myString.split(" ").forEach((word) => analyzeWord(word));

Este exemplo reúne vários elementos. Nós dividimos o string em substrings com split(“ “)então itere em cada palavra usando forEachpassando a palavra aos nossos switch instrução envolvida em uma função. Se você executar este código, ele exibirá uma descrição para cada palavra conhecida e o padrão para as demais.

Conclusão

Vimos alguns dos fundamentos do JavaScript mais úteis e pesquisados. Cada um deles é uma parte essencial do seu kit de ferramentas JavaScript.

Juliana Ribeiro
Juliana Ribeiro

Juliana Ribeiro é uma respeitada e talentosa redatora que trabalha do Tudo SEO. Com um profundo entendimento das nuances do SEO e seu impacto na visibilidade digital, Juliana usa sua expertise para educar e inspirar os leitores.

Entrando na indústria da escrita como redatora freelancer, ela rapidamente subiu na hierarquia para se tornar uma voz confiável no campo do SEO. Sua jornada na revista é marcada por muitos artigos perspicazes que ajudaram muitas empresas a entender melhor e aproveitar o SEO para melhorar sua visibilidade online.

Juliana também dedicou uma grande parte de seu tempo para estudar as últimas tendências em SEO e manter-se atualizada sobre todas as mudanças no algoritmo do Google. Através de seu trabalho, ela se esforça para quebrar conceitos complexos em ideias fáceis de entender para profissionais de marketing de todos os níveis.