Resumão de JavaScript para iniciantes [PT-BR]

Bem vindos ao JavaScript!

Olá! Aqui você vai encontrar o meu resumão pessoal para JavaScript! Sinta-se livre para usar e adaptar esses códigos para suas próprias necessidades. Você pode facilmente iniciar um novo projeto JS com o Vite. Esse resumo não substitui o estudo profundo da linguagem, ele é mais indicado para relembrar e usar de fonte de início de aprendizado.

Declaração de Variáveis

Para declarar nossas variáveis, nós podemos usar let para variáveis que se alteram e const para variáveis constantes, seguidos do nome, um sinal de = e o valor da variável. Ex:

let variavelMutavel= "Lucas"
const variavelImutavel = 3.14

---

Loops

Nós podemos iterar (passar pelos elementos) usando tanto nosso for básico, quanto nosso while.

for (let index = 0; index < array.length; index++) {
  const element = array[index]
}

while (condition) {}

---

Declaração de Funções e tipos de função

Aqui, vou dar o exemplo de 3 tipos de declaração:

• Nossa função basica e clássica
• Arrow function (ou Função Flecha, que é uma forma mais compacta de declarar uma função)
• e a Função Anônima(que é uma forma de declarar uma função que não tem nome)

//classic function
function mostraMensagem(mensagem) {
  console.log(mensagem)
}
//arrow function
const tambemMostraMensagem = (mensagem) => console.log(mensagem)

//anonymous functions (same use as the arrow function, but with different syntax)
(function () {
  console.log("Oi escondido!");  // I will invoke myself
})();

//you can check more about anonymous functions here: 
//https://www.w3schools.com/js/js_function_definition.asp


mostraMensagem("Oi")
tambemMostraMensagem("Oi de novo!")

---

Trabalhando com Listas (ou Arrays)

Temos vários métodos que podem nos ajudar a trabalhar com listas. Alguns deles são:

• push
• pop()
• forEach()
• map() Você pode checar mais métodos aqui.

//working with arrays
// using const because this is always going to be an array
const ourAmazingArray = [1, 2, 3, 4, 5]

//accessing one array position
console.log(ourAmazingArray[2])

// iterating through array
ourAmazingArray.forEach((value) => console.log(value))
const ourNewAmazingArray = ourAmazingArray.map((value) => value)

//adding to the end of the array
ourAmazingArray.push(6)

console.log(ourAmazingArray, ourNewAmazingArray)

//removing the last item from the array
ourAmazingArray.pop()

console.log(ourAmazingArray, ourNewAmazingArray)

---

Interpolação de variáveis dentro de strings

Aqui está um exemplo de como podemos inserir o conteúdo de uma variável dentro de uma string.

const ourAmazingArray = [1, 2, 3, 4, 5]

const showElement = (element, position) =>
  console.log(`The element ${element} is on position ${position}`)

ourAmazingArray.map(showElement)

---

Trabalhando com JSON

Aqui estão alguns exemplos de trabalho com JSON.

const ourAmazingJsonArray = [
  {
    userId: 1,
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    userId: 1,
    id: 2,
    title: "qui est esse",
    body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    userId: 1,
    id: 3,
    title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    userId: 1,
    id: 4,
    title: "eum et est occaecati",
    body: "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  }
]
//show titles
const showTitle = (obj) => console.log(obj.title)

ourAmazingJsonArray.map(showTitle)

//filter out titles which length is greater than 20
const filterLongTitles = (obj) => obj.title.length < 20

console.log(ourAmazingJsonArray.filter(filterLongTitles))

---

Programação Orientada à Objetos em JS

Aqui, temos uma classe Retângulo básica, na qual declaramos largura e altura de forma a criar instâncias desse Retângulo no futuro.

class Rectangle {
  constructor(width, height) {
    this.width = width
    this.height = height
  }

  showValues() {
    console.log(this.width, this.height)
  }

  calculateArea() {
    console.log(this.width * this.height)
  }
}

const myRectangle = new Rectangle(10, 20)
myRectangle.showValues()
myRectangle.calculateArea()

---

Trabalhando com uma API

Nós podemos usar o método fetch para buscar uma resposta de API e então trabalhar com os dados da resposta.

Exemplo:

const fetchJoke = async (numberOfPhrases) => {
  const phrasesArray = []
  for (let i = 0; i < numberOfPhrases; i++) {
    const phrase = await fetch(URL_TO_FETCH).then((res) => res.json())
    const fetchedPhrase = await phrase
    phrasesArray.push(fetchedPhrase)
  }
  return phrasesArray
}

Esse trecho de código vai buscar da API e usar um JSON.parse() na resposta.

E isso foi um pouquinho do básico de JavaScript! Sinta-se livre para comentar e compartilhar esse artigo com outras pessoas também! Obrigado!

Comments

[Giovani Franz]

"Você pode facilmente iniciar um novo projeto JS com o Vite".

Essa linha não faz sentido, para iniciar um projeto JS não precisa de nenhuma lib, ainda mais o Vite. Como é baseado em scripts basta um runtime se for server side (nodeJs, deno) e no client side o browser já bastaria.

[Lucas Lima do Nascimento]

Essa linha deve ser tratada apenas como sugestão e não como obrigatoriedade.

De fato, não é necessário utilizar o Vite (que não é uma lib na verdade e sim uma build tool) para iniciar o projeto, entretanto, a utilização do mesmo garante uma experiência de desenvolvimento mais interessante e consistente pra quem está começando.

Ter uma página onde seu JS já está sendo renderizado com hot reload, HMR, alguns estilos básicos e tantas outras features interessantes que o Vite consegue trazer nativamente gera no desenvolvedor muito mais conforto numa primeira experiência (e quanto mais confortável e suave for essa primeira experiência, maior a chance de quebrarmos a barreira do ensino) quando comparado com ver a clássica tela branca com texto Times do HTML tradicional que te obriga a recarregar a cada mudança (importante também dizer que, gerar essa experiência não exclui a necessidade de aprender os conceitos básicos de HTML e CSS).

Resumindo, foi só uma sugestão, não é dado como obrigatoriedade utilizar o Vite não, mas, mesmo se tratando de sugestão, utilizá-lo é uma forma boa de garantir uma experiência de desenvolvimento melhor.

Comparados a ele, temos as seguintes ideias principais:

• Front: Arquivo HTML + CSS + JS + Live Server (ou alguma outra forma de hot reload)
• Back: Node + Nodemon (não recomendaria iniciar com deno para um iniciante, dado o estado atual do produto).