Resumão de JavaScript para iniciantes [PT-BR]
Tags: javascript, beginners, braziliandevs, tutorial
Published: 2022-06-10 14:18:33

#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](vitejs.dev). 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:

```js
let variavelMutavel= "Lucas"
const variavelImutavel = 3.14
```
--- 
## Loops
Nós podemos iterar (passar pelos elementos) usando tanto nosso `for` básico, quanto nosso `while`.

```js
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)

```js
//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](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array).

```js
//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.

```js
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.

```js
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.

```js
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:

```js
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!