DEV Community: Fernando Junior

Métodos de Array - Reduce

Fernando Junior — Thu, 22 Apr 2021 23:44:48 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No último post eu falei sobre o método filter

No post de hoje irei falar um pouco sobre o método de array reduce.

Método Reduce

Reduce recebe uma função como argumento e executa esta função para cada item do array.

Este método é utilizado quando baseado no array original, nós precisaremos reduzir o array a um tipo de dado.

Podemos reduzir um array em um objeto literal, uma string, um número ou até mesmo um novo array.

Então, é importante entender que o reduce tem poder e versatilidade para gerar um output que não seja necessariamente um array.

Vamos começar com o exemplo mais simples para entender o reduce.

O reduce pode receber dois argumentos:

1: A função que será executada
2: O valor inicial do acumulador (accumulator)

A função recebida, recebe 4 parâmetros, sendo 2 obrigatórios e 2 opcionais.

Obrigatórios:

1: Accumulator, que é o acumulador, que receberá os dados.
2: Item, que é o item que está sendo iterado.

Opcionais:

1: Index, que é o índice do item que está sendo iterado
2: Array, que é o próprio array original.

Temos um array de números e queremos obter a soma de todos esses números, fazendo com que esse array seja reduzido a um único número.

const numbers = [1, 2, 3]
const sumResult = numbers.reduce((accumulator, item) => accumulator + item, 0)

console.log(sumResult) // 6

Agora vamos imaginar uma situação mais real, imagina que temos um array com várias pontuações de jogadores e queremos obter a soma de todos os pontos de um determinado jogador.

const scores = [
  { name: 'Vinicius Costa', score: 337 },
  { name: 'Roger Melo', score: 43 },
  { name: 'Alfredo Braga', score: 234 },
  { name: 'Pedro H. Silva', score: 261 },
  { name: 'Ana Paula Rocha', score: 491 },
  { name: 'Vinicius Costa', score: 167 },
  { name: 'Roger Melo', score: 137 },
  { name: 'Alfredo Braga', score: 135 },
  { name: 'Ana Paula Rocha', score: 359 },
  { name: 'Pedro H. Silva', score: 133 }
]

const alfredoScore = scores.reduce((accumulator, score) => {
  if (scores.name === 'Alfredo Braga') {
    accumulator += scores.score
  }
  return accumulator
}, 0)

console.log(alfredoScore) // 369

Agora vamos obter um output diferente, vamos obter uma string.

const cart = [
  { name: 'Dark Souls III', price: 95.03 },
  { name: 'Shadow of the Tomb Raider', price: 101.19 },
  { name: 'Sekiro: Shadows Die Twice', price: 179.99 },
  { name: 'Resident Evil 2', price: 119.90 },
  { name: 'Death Stranding', price: 149.99 }
]

const games = cart.reduce((accumulator, game) => {
  accumulator += `- ${game.name}\n`
  return accumulator
}, '')

console.log(games)

/*
- Dark Souls III
- Shadow of the Tomb Raider
- Sekiro: Shadows Die Twice
- Resident Evil 2
- Death Stranding
*/

Ficamos por aqui com mais um conteúdo dos meus estudos, vou deixar o link da documentação do site da MDN sobre o método reduce.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub

Métodos de Array - Filter

Fernando Junior — Wed, 21 Apr 2021 23:40:28 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No último post eu falei sobre o método map

No post de hoje irei falar um pouco sobre o método de array filter.

Método Filter

O método filter, recebe uma função como argumento e executa essa função para cada um dos itens do array.

Usamos esse método quando baseado em uma condição, nós precisamos obter um novo array mas somente com alguns itens do array original.

A função que o método recebe como argumento, pode receber 3 parâmetros:

1: Item, que é o item atual que está sendo iterado
2: Index, que é o índice do item atual que está sendo iterado
3: Array, que é o próprio array original que está sendo iterado

Dos 3 parâmetros, somente o item é obrigatório.

Exemplo básico da utilização do filter:

const randomNumbers = [36, 99, 37, 63]
const numbersGreaterThan37 = randomNumbers.filter(number => number > 37)
console.log(numbersGreaterThan37) // Array(2) [ 99, 63 ]

Em cada iteração que a condição retornar em true, o item iterado será adicionado ao novo array, se caso todos os itens retornem false, o filter irá retornar um array vazio.

const randomNumbers = [36, 99, 37, 63]
const numbersGreaterThan99 = randomNumbers.filter(number => number > 99)
console.log(numbersGreaterThan37) // Array []

Abaixo confirmaremos que o método filter mantém o array original intacto.

console.log(randomNumbers) // Array(4) [ 36, 99, 37, 63 ]
console.log(numbersGreaterThan37) // // Array(2) [ 99, 63 ]
console.log(numbersGreaterThan99) // Array []

Agora trazendo para um caso mais próximo do que podemos fazer no dia a dia.

Temos um array com usuários e queremos filtrar apenas os usuários que sejam premium.

const users = [
  { name: 'Ada Lovelace', premium: true },
  { name: 'Grace Hopper', premium: false },
  { name: 'Alan Turing', premium: true },
  { name: 'Linus Torvalds', premium: false },
  { name: 'Margaret Hamilton', premium: true }
]

const premiumUsers = users.filter(user => user.premium)
console.log(premiumUsers)

/* 
Array(3) [ {…}, {…}, {…} ]

0: Object { name: "Ada Lovelace", premium: true }

1: Object { name: "Alan Turing", premium: true }

2: Object { name: "Margaret Hamilton", premium: true }

length: 3
*/

Ficamos por aqui com mais um conteúdo dos meus estudos, vou deixar o link da documentação do site da MDN sobre o método filter.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub

Métodos de Array - Map

Fernando Junior — Tue, 20 Apr 2021 00:35:16 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar um pouco sobre o método de array map.

Método Map

Map é método de array que pode ser usado quando queremos gerar um novo array com a mesma quantidade de itens do array original, mas com cada item transformado.

O map irá percorrer por todos os itens do array executando uma transformação em cada um deles através de uma função que é passada como argumento.

Este método irá retornar um novo array com os itens modificados, logo, o array original não sofrerá alteração.

O map recebe como argumento uma função.

Esta função pode receber até 3 argumentos:

1: Item, que é o item atual que está sendo iterado
2: Index, que é o índice do item atual que está sendo iterado
3: Array, que é o próprio array original que está sendo iterado

Dos 3 argumentos, somente o item é obrigatório.

const numbers = [1, 2, 3]

const doubleNumbers = numbers.map(item => item * 2)

console.log(doubleNumbers) // Array(3) [ 2, 4, 6 ]

Conforme visto acima, um novo array foi criado a partir do array numbers, pegando os seus itens e multiplicando por 2.

E para ficar claro, abaixo irei imprimir no console o array original e o modificado, para provar que o array original permanece intacto.

console.log(doubleNumbers, numbers) // Array(3) [ 2, 4, 6 ] Array(3) [ 1, 2, 3 ]

Agora iremos pegar um array de produtos e executar o método map nele, fazendo uma verificação e pegando todos os produtos que custarem 30 ou mais e colocando eles com 50% do preço no array novo.

const products = [
  { name: 'Mouse Sem Fio', price: 30 },
  { name: 'Pen Drive', price: 25 },
  { name: 'Cartucho de Tinta', price: 50 },
  { name: 'Suporte Ergonômico para Notebook', price: 23 },
  { name: 'Repetidor de Sinal Wi-Fi', price: 44 }
]

const saleProducts = products.map(product => {
  if (product.price >= 30) {
    return { name: product.name, price: product.price / 2 }
  }

  return product
})

console.log(saleProducts)

// Output

/*
(5) […]

0: Object { name: "Mouse Sem Fio", price: 15 }

1: Object { name: "Pen Drive", price: 25 }

2: Object { name: "Cartucho de Tinta", price: 25 }

3: Object { name: "Suporte Ergonômico para Notebook", price: 23 }

4: Object { name: "Repetidor de Sinal Wi-Fi", price: 22 }

length: 5
*/

Ficamos por aqui com mais um conteúdo dos meus estudos, vou deixar o link da documentação do site da MDN sobre o método map.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

setTimeout e setInterval

Fernando Junior — Wed, 14 Apr 2021 22:39:44 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar um pouco sobre os métodos setTimeout e setInterval.

setTimeout

O método setTimeout é usado para executarmos uma função após um determinado tempo, esta função será executada uma única vez.

Este método recebe dois argumentos:

1: A função que será executada após o tempo informado
2: O tempo que deve ser esperado para executar a função do primeiro argumento, esse tempo deve ser informado em milissegundos.

setTimeout(() => {
 console.log('Execução do setTimeout!')
}, 2000)

Levando em consideração o código de exemplo acima, após o carregamento da página, será aguardado 2 segundos para executar a função, que no nosso caso é apenas informar no console a string Execução do setTimeout.

setInterval

Já o método setInterval, é usado para ficar executando uma função no intervalo de tempo que foi determinado.

Este método também recebe dois argumentos:

1: A função que ficará sendo executada
2: De quanto em quanto tempo essa função será executada, também em milissegundos.

setInterval(() => {
 console.log('Execução do setInterval!')
}, 2000)

Observando o código de exemplo acima, a função passada como primeiro argumento ficará sendo executada a cada 2 segundos, logo, a cada 2 segundos será impresso no console a string Execução do setInterval!.

Desta forma, esse setInterval ficará sendo executado indefinidamente, pois não foi informado um momento para que esse execução seja parada.

Para fazermos isso, devemos usar um método chamado clearInterval. Observe o código abaixo:

let counter = 0

const timer = setInterval(() => {
 console.log('Execução do setInterval!')
 counter++

 if (counter === 5) {
  clearInterval(timer)
 }
}, 2000)

Como pode ser observado acima, usei o método clearInterval para parar a execução do código assim que a variável counter fosse igual a 5.

Com isso, a cada dois segundos será impresso no console Execução do setInterval e a variável counter será incrementada, assim que essa variável atingir o valor 5, cairemos na condição do if e com isso, o método clearInterval será executado, parando a execução da const timer.

Por hoje é isso, espero que estejam curtindo as postagens!

Vou deixar aqui abaixo o link do MDN com a documentação sobre setTimeout e sobre setInterval

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

Outras maneiras de fazer queries no DOM - getElement...

Fernando Junior — Tue, 06 Apr 2021 23:14:52 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post anterior, eu falei sobre querySelector e querySelectorAll, para selecionarmos elementos no DOM.

No post de hoje irei falar sobre outras formas de selecionarmos elementos através do DOM, com o intuito de manipularmos eles.

Para as explicações abaixo, levaremos em consideração o seguinte arquivo HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Outras maneiras de fazer queries no DOM</title>
</head>
<body>
  <h1 id="title">Outras maneiras de fazer queries no DOM</h1>

  <div>
    <p>Hello World!</p>
    <p>Oi</p>
    <p class="error">Essa é uma mensagem de erro</p>
  </div>

  <div class="error">Outra mensagem de erro</div>

  <script src="./app.js"></script>
</body>
</html>

Seleção pelo ID - getElementById

Através do método getElementById é usado para buscarmos a referência de algum elemento pelo ID dele.

Como este método é específico para ID's, não precisamos usar a # na frente do nome do ID no argumento, pois ele já entendi que deverá buscar um elemento com o ID passado por argumento.

const title = document.getElementById('title')

console.log(title) // <h1 id="title">Outras maneiras de fazer queries no DOM</h1>

Seleção pelo nome da classe CSS - getElementByClassName

Como este método é específico para nomes de classes, não precisamos usar o . na frente do nome da classe no argumento, pois ele já entendi que deverá buscar um elemento com a classe passada por argumento.

const errors = document.getElementsByClassName('error')

console.log(errors) // HTMLCollection(2) [p.error, div.error]

Conforme observado acima, tivemos como retorno um HTMLCollection.

HTMLCollection representa uma lista genérica de elementos, é similar ao NodeList, mas não é idêntico. Também é possível acessar cada item através da anotação de colchetes [] ou através do métodos item.

console.log(errors[0]) // <p class="error">
console.log(errors.item(1)) // <div class="error">

Mas não é possível iterar por um HTMLCollection com o forEach, já na NodeList isso é possível.

errors.forEach(error => {
  console.log(error) // Uncaught TypeError: errors.forEach is not a function
})

Esse erro acima, acontece justamente pelo fato de um HTMLCollection não ser um array ou uma NodeList.

Seleção pelo nome da tag - getElementByTagName

Para esse tipo de seleção, basta informar por argumento o nome da tag que devemos buscar.

Abaixo irei obter as referências de todas as tags p.

const paragraphs = document.getElementsByTagName('p')

console.log(paragraphs) // HTMLCollection { 0: p, 1: p, 2: p.error, length: 3 }

Chegamos ao fim de mais um post, espero que o conteúdo tenha ajudado.

Vou deixar links do MDN para cada item citado neste post:

getElementById
getElementByClassName
getElementByTagName

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

Selecionando elementos no DOM - Query Selector e Query Selector All

Fernando Junior — Mon, 05 Apr 2021 22:38:10 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre formas de selecionarmos elementos através do DOM, com o intuito de manipularmos eles.

Quando trabalhamos com o DOM, podemos adicionar, remover e alterar elementos do nosso HTML, mas para isso, existem alguns passos a serem seguidos.

O primeiro (que será abordado neste post) é decidir qual elemento dá página queremos manipular e após isso, buscarmos sua referência no DOM.

Essa ação de buscar o elemento no DOM, chamamos de Quering the DOM, traduzindo ficaria algo como buscando no DOM.

Imaginem o seguinte documento HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Query Selector e Query Selector All</title>
</head>
<body>
  <h1>Query Selector e Query Selector All</h1>

  <div>
    <p>Hello World!</p>
    <p>Oi</p>
    <p class="error">Essa é uma mensagem de erro</p>
  </div>

  <div class="error">Outra mensagem de erro</div>
</body>
</html>

Vamos iniciar a realização das buscas pelas referência dos elementos no DOM.

Query Selector (querySelector)

No método querySelector, iremos buscar o elemento pelo seletor CSS passado por argumento, entre ''.

Este método irá retornar o primeiro elemento que tenha o seletor informado.

Abaixo irei obter a referência do primeiro parágrafo

const firstParagraph = document.querySelector('p')

Isso faz com que o DOM seja consultado (de cima para baixo), a referência da primeira tag p, será obtida e atribuída a variável firstParagraph, e as demais tags p serão ignoradas.

console.log(firstParagraph) // <p>Hello World!</p>

Agora irei buscar no DOM a referência da última tag p, que possui a classe error e irei atribuir a sua referência a uma variável.

const paragraphError = document.querySelector('.error')

No caso acima, foi informado o nome da classe CSS para obter a referência do parágrafo que eu queria.

console.log(paragraphError) // <p class="error">Essa é uma mensagem de erro</p>

Mas conforme pode ser observado, usamos o nome da classe CSS como argumento error, mas, também existe uma div com essa mesma classe.

Porém, conforme informado acima, esse método pega a referência apenas do primeiro item encontrado.

Como isso, para selecionar a div com a classe error, devemos especificar isso como argumento do método querySelector.

const divError = document.querySelector('div.error')

console.log(divError) // <div class="error">Outra mensagem de erro</div>

Query Selector All (querySelectorAll)

Existe a possibilidades de obtermos a referência de múltiplos elementos, para isso iremos usar o métodos querySelectorAll.

Este método também irá receber como argumento o seletor CSS que deve ser encontrado.

Fazendo mais uma vez com que o DOM seja lido (de cima para baixo), mas desta vez, buscando TODOS os elementos que possuam o seletor informado como argumento.

Abaixo irei buscar todos os parágrafos do documento.

const paragraphs = document.querySelectorAll('p')

console.log(paragraphs) // NodeList(3) [p, p, p.error]

Como pode ser observado, obtivemos uma NodeList com a referência de todos os elementos p do documento HTML.

Uma NodeList é uma lista de nós, é similar a um array, mas não é um array, o que significa dizer que não é possível utilizar todos os métodos de array nelas.

Mas podemos realizar algumas ações nessas listas, como por exemplo, utilizarmos a anotação de colchetes [] para obtermos o item em uma posição específica da lista.

Buscando o segundo parágrafo da NodeList:

console.log(paragraphs[1]) // <p>Oi</p>

E também é possível percorrer uma NodeList utilizando o método forEach.

paragraphs.forEach(paragraph => {
 console.log(paragraph)
})

// Output

/*
<p>Hello World!</p>
<p>Oi</p>
<p class="error">Essa é uma mensagem de erro</p>
*/

Também podemos obter todos os elementos que possuam a mesma classe:

const allElementsWithClassError = document.querySelectorAll('.error')

console.log(allElementsWithClassError) // NodeList(2) [p.error, div.error]

Vou deixar um link da MDN para mais detalhes sobre o querySelector e querySelectorAll

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

DOM - Document Object Model

Fernando Junior — Fri, 02 Apr 2021 00:38:34 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre o DOM.

DOM

DOM é a abreviação de Document Object Model, é o coração de qualquer modificação em uma webpage.

O DOM é criado pelo browser, ele não faz parte do JavaScript em si.

Quando o HTML é carregado no browser, o próprio browser cria o DOM, para que a gente consiga interagir com o documento HTML através do nosso código JavaScript.

Através do DOM podemos por exemplo: criar, remover e editar elementos através do código em JavaScript.

Uma vez que o documento HTML é carregado no browser, o browser cria um objeto que modela este documento, este objeto se chama document.

Este objeto document possui diversas propriedades e métodos que podem ser usados para manipular o documento HTML.

Com isso, fica claro, que para fazer uma manipulação qualquer em uma página, tipo remover um elemento ou responder ao clique de um botão, isso é feito através do objeto document.

console.log(document)

No exemplo acima, o output desse console.log será uma representação do elemento HTML.

Alguns exemplos de propriedades e métodos

Como o document é um objeto, iremos utilizar a anotação de ponto . para acessar as propriedades e métodos.

Location

Irá retornar um objeto com informações sobre a URL do documento.

console.log(document.location)

// Output
Location {ancestorOrigins: DOMStringList, href: "http://127.0.0.1:5500/etapa-05-o-document-object-m…el-dom/aula-01/aula-01-06-o-que-eh-dom/index.html", origin: "http://127.0.0.1:5500", protocol: "http:", host: "127.0.0.1:5500", …}

URL

Irá retornar apenas a URL do documento.

console.log(document.URL)

// Output
http://127.0.0.1:5500/etapa-05-o-document-object-model-dom/aula-01/aula-01-06-o-que-eh-dom/index.html

Estrutura de Árvore

O DOM vê o nosso HTML como uma estrutura de árvore, em forma de nós (nodes em ingês), e cada um dos elementos é considerado um nó (node em inglês).

A tag raiz do documento é a tag HTML, chamada de root node.

Acima estrutura em forma de árvore, para exemplificar como o DOM enxerga o elemento HTML.

Vou deixar um link da MDN para mais detalhes sobre o Document Object Model

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

Tipos Primitivos e Tipos de Referência

Fernando Junior — Mon, 29 Mar 2021 23:03:40 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre tipos primitivos e tipos de referência.

Tipos Primitivos

O tipo primitivo, refere-se a um dado que não é representado por um objeto.

No JavaScript, existem 6 tipos de dados primitivos:

Numbers
Strings
Booleans
Null
Undefined
Symbol
BigInt

Na maioria das vezes, um valor primitivo é representado diretamente no nível mais baixo da implementação da linguagem.

Todos os tipos primitivos são imutáveis, ou seja, não podem ser alterados.

É importante não confundir um tipo primitivo em si com uma variável atribuída a um valor primitivo. A variável pode ser reatribuída a um novo valor, mas o valor existente não pode ser alterado das mesmas formas que fazemos com objetos, matrizes e funções.

Tipos de Referência

No contexto de objetos, é uma referência de objeto.

No JavaScript, os tipos de referência são:

Todos os tipos de objetos:
- Objetos literais
- Arrays
- Funções
- Datas
- Todos os outros objetos

Diferença entre Tipos Primitivos e Tipos por Referência

A diferença entre eles está relacionada na forma como são armazenados na memória.

Quando criamos algum tipo primitivo, a gente atribui uma variável, esse valor é armazenado na stack que na tradução significa pilha.

A stack é uma pilha de diferentes valores na memória que podem ser acessados rapidamente quando precisamos utiliza-los, porém, o espaço dentro dela é limitado.

Já quando criamos um tipo de referência (objetos), esse valor ficar armazenado no heap que na tradução significa amontoado.

O heap tem mais espaço disponível, permitindo armazenar objetos maiores e mais complexos, porém, ele é um pouquinho mais lento que a stack.

Exemplo de como funciona o tipo primitivo na stack:

let scoreOne = 50
let scoreTwo = scoreOne

console.log(`ScoreOne: ${scoreOne} | ScoreTwo: ${scoreTwo}`) // scoreOne: 50 | scoreTwo: 50

scoreOne = 100

console.log(`ScoreOne: ${scoreOne} | ScoreTwo: ${scoreTwo}`) // scoreOne: 100 | scoreTwo: 50

Perceba que mesmo atribuindo novo valor a variável scoreOne, o valor atribuído a variável scoreTwo não foi alterado, mesmo que o seu valor na criação tenha sido referente a scoreOne.

Exemplo de como funciona o tipo por referência:

let userOne = {
  name: 'Roger',
  age: 31
}

let userTwo = userOne

console.log(userOne, userTwo) // Object { name: "Roger", age: 31 } Object { name: "Roger", age: 31 }

userOne.age = 35

console.log(userOne, userTwo) // Object { name: "Roger", age: 35 } Object { name: "Roger", age: 35 }

Já nos tipos por referência isso não ocorre, pois o JavaScript, utiliza um ponteiro na atribuição, que faz com que esse ponteiro sempre aponte pro objeto original no heap.

Por isso quando alterei a idade do userOne, o reflexo foi percebido no userTwo, pois por baixo dos panos, o ponteiro está somente apontando para o mesmo objeto.

E chegamos ao fim de mais um post da minha saga de estudos em JavaScript.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

Escopo de Função, Escopo de Bloco e Escopo Léxico

Fernando Junior — Thu, 25 Mar 2021 23:12:08 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post anterior eu falei um pouco sobre a palavra chave this, e no final do post, eu falo um pouco sobre o comportamento de seu uso em arrow functions.

O que me fez querer estudar um pouco mais sobre escopo. E por isso, trago neste posts, 3 tipos de escopos que devemos conhecer para entender o funcionamento das aplicações e a forma correta de utiliza-los.

Sabemos que escopo pode ser interpretado como sendo o local de visibilidade de uma variável, e dependendo de onde essa variável é declarada, ela poderá ou não ser acessada de diversos lugares do seu código.

Escopo de Função

No escopo de função, as variáveis declaradas dentro da função, somente serão acessadas por dentro da função, não sendo possível acessa-las do lado de fora.

No escopo de função, esse comportamento acontece independente da palavra chave usada na criação da variável ou constante, var, let ou const.

function myFunc () {
 let cat = 'Zeca'
 const age = 3
 var color = 'Cinza'

 console.log(cat) // Zeca
 console.log(age) // 3
 console.log(color) // Cinza
}
myFunc()

console.log(cat) // Uncaught ReferenceError: cat is not defined
console.log(age) // Uncaught ReferenceError: age is not defined
console.log(color) // Uncaught ReferenceError: color is not defined

A forma de acessarmos as variáveis dessa função fora dela, seria fazer a função retornar um objeto contendo essas variáveis.

function myFunc () {
 let cat = 'Zeca'
 const age = 3
 var color = 'Cinza'

 return { name, age, color }
}

console.log(myFunc().name) // Zeca
console.log(myFunc().age) // 3
console.log(myFunc().color) // Cinza

Escopo de bloco

Escopo de bloco não está relacionado necessariamente a funções, estamos nos referindo por exemplo: condicional if, loop for,loop while.

No escopo de bloco precisamos ficar atentos ao uso das palavras chaves para criação de variáveis, pois se utilizarmos as palavras chaves let e const, o escopo do bloco será respeitado, mas se utilizarmos a palavra chave var, o escopo não será respeitado e a variável poderá ser acessada de qualquer lugar do código, passando com isso a ter o escopo global, de forma automatica.

Usando let, a variável só pode ser acessada dentro do bloco:

if (true) {
  let dragon = 'Balerion'
  console.log(dragon) // Balerion
}

console.log(dragon) // Uncaught ReferenceError: dragon is not defined

Usando const também só poderá ser acessada de dentro do bloco:

if (true) {
  const dragon = 'Balerion'
  console.log(dragon) // Balerion
}

console.log(dragon) // Uncaught ReferenceError: dragon is not defined

Usando var, a variável não respeita o escopo de bloco e vaza para o escopo global, e com isso, pode ser acessada de qualquer lugar do código.

if (true) {
  var dragon = 'Balerion'
  console.log(dragon) // Balerion
}

console.log(dragon) // Balerion

Antes da chegada do ECMAScript 6 (ES6), somente existia a possibilidade de criação de variáveis com a palavra chave var.

Um dos motivos para a adição das palavras chaves let e const no ES6, foi justamente para resolver essa situação de utilização de variáveis em escopos.

Escopo Léxico

Escopo léxico ocorre quando temos um aninhamento de funções.

Significa dizer que funções aninhadas podem acessar variáveis dentro de outros blocos de funções ao qual façam parte.

O que acontece no exemplo abaixo é que estou tentando acessar a variável book, no escopo da função interna, mas não existe uma declaração dessa variável no escopo, com isso, o JavaScript subirá o escopo e buscará pela variável no escopo acima, no caso no escopo da função externa.

Como a variável foi encontrada, a função interna passou a utilizar essa variável.

const externalFunc = () => {
  const book = 'Sapiens'

  const internalFunc = () => {
    console.log(book.toUpperCase())
  }

  internalFunc()
}

externalFunc() // SAPIENS

Mas esta relação segue somente o fluxo de fora pra dentro.

const externalFunc = () => {
  console.log(book.toUpperCase())

  const internalFunc = () => {
    const book = 'Sapiens'
  }

  internalFunc()
}

externalFunc() // Uncaught ReferenceError: book is not defined

É muito importante entender esses 3 escopos, ajudará muito na criação correta de suas aplicações e com certeza, te fará perder menos tempo tentando debugar possíveis erros.

Ficamos por aqui com mais um post.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

A palavra chave: this

Fernando Junior — Wed, 24 Mar 2021 23:01:01 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre a palavra chave this.

This

this é um objeto de contexto, ele representa o contexto no qual o código atual está sendo executado.

E dependendo de onde o this é usado, podemos ter resultados diferentes.

Se usarmos o this na raíz do documento, por exemplo, ele irá referenciar o contexto global, no caso caso o window object.

console.log(this) // Window {window: Window, self: Window, document: document, name: "", location: Location, …}

Observe o objeto abaixo:

let user = {
 name: 'João',
 age: 31,
 blogPosts: ['Empadão de Frango', '4 receitas de purê de batata'],
 logBlogPosts () {
  console.log(`${this.name} escreveu os seguintes posts:`)

  this.blogPosts.forEach(post => {
   console.log(`- ${post}`)
  })
 }
}

user.logBlogPosts()

// Output
João escreveu os seguintes posts:
- Empadão de Frango
- 4 receitas de purê de batata

Quando invocamos o método logBlogPosts criado dentro do objeto user, o JavaScript faz com que o valor de this seja o objeto no qual o método está sendo usado.

Neste caso acima, o this está referenciando o próprio objeto user e por este motivo é possível acessar suas propriedades.

This e Arrow Functions

Observe que não utilizei arrow function para a criação do método logBlogPosts, e isso foi intencional, pois as arrow functions funcionam de forma diversa quando utilizamos o this.

Quando criamos um método utilizando function declaration, conforme o exemplo do método logBlogPosts criado no objeto user acima, o JavaScript atribui o this ao contexto daquele objeto.

Se usarmos arrow function, o JavaScript irá atribuir ao this, o contexto do objeto global, no caso o window object.

Então, quando for necessário usar um método dentro de um objeto, que tenha que referenciar o próprio objeto em que o método foi criado, precisamos que esse método seja declarado com function declaration e jamais com arrow function.

let user = {
 name: 'João',
 age: 31,
 blogPosts: ['Empadão de Frango', '4 receitas de purê de batata'],
 logBlogPosts: () => {
    console.log(`${this.name} escreveu os seguintes posts:`)
  }
}

user.logBlogPosts() // escreveu os seguintes posts:

Conforme visto no exemplo acima, o método logBlogPosts não teve o objeto user referenciado com o uso do this e com isso, não teve acesso a propriedade name.

Ficamos por aqui com mais um post.

Segue documentação da MDN sobre a palavra chave this

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

Escopo

Fernando Junior — Tue, 23 Mar 2021 22:31:26 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre escopo.

Escopo

Quando falamos de escopo, estamos falando da área em que determinado dado está disponível para utilizarmos ele.

Quando uma variável é criada fora de um bloco de código, esta variável possui o escopo global, o que significa dizer, que o seu valor pode ser acessado e reatribuído de qualquer lugar do seu código.

Abaixo irei criar um variável name, e irei acessa-la de dentro de um bloco de código e também de fora de um bloco de código.

let age = 35

if (true) {
  console.log(`Acessando de dentro bloco de código: ${age}`)
}

console.log(`Acessando de fora do bloco de código: ${age}`)

// Output
Acessando de dentro bloco de código: 35
Acessando de fora do bloco de código: 35

Como foi observado no exemplo acima, a variável age, foi acessada tanto dentro de bloco de código, quanto fora, justamente por ela ser uma variável de escopo global.

Agora se criarmos a variável dentro de um determinado bloco de código, seu valor poderá ser acessado ou reatribuído apenas dentro daquele bloco.

if (true) {
  let team = 'Botafogo'
  console.log(`Acessando a variável team de dentro do bloco: ${team}`)
}

console.log(`Acessando a variável team de fora do bloco: ${team}`)

// Output
Acessando a variável team de dentro do bloco: Botafogo
Uncaught ReferenceError: team is not defined

No exemplo acima, fica claro que o console.log dentro do bloco de código teve acesso a variável team, já o console.log que está fora do bloco, não teve acesso a variável.

Variáveis com o mesmo nome em escopos diferentes

Podemos ter variáveis criadas com o mesmo nome, mas estas devem estar em escopos diferentes, confira o exemplo abaixo:

let myFavoriteFilm = 'Os Goonies'

if (true) {
  let myFavoriteFilm = 'Os Batutinhas'

  console.log(`Meu filme favorito é: ${myFavoriteFilm}`)
}

console.log(`Meu filme favorito é: ${myFavoriteFilm}`)

// Output
Meu filme favorito é: Os Batutinhas
Meu filme favorito é: Os Goonies

No exemplo acima, notamos que temos duas variáveis com o mesmo nome myFavoriteFilm, isso só é possível pois as declarações foram feitas em escopo diferentes, a primeira foi feita no escopo global e a segunda foi declarada dentro do bloco de código do if, fazendo com que ela tivesse o escopo de bloco ou escopo local.

Escopo de blocos aninhados

let myPet = 'Dog'

if (true) {
 let myPet = 'Cat'

 if (true) {
  console.log(myPet)
 }
}

// Output
Cat

No código acima, observamos que o segundo bloco de código teve acesso a variável que está dentro do primeiro bloco de código, isso ocorre por esta declaração estar mais próxima do segundo bloco de código.

Confira abaixo, caso não existisse a declaração da variável dentro do primeiro bloco:

let myPet = 'Dog'

if (true) { 
 if (true) {
  console.log(myPet)
 }
}

// Output
Dog

Conforme pode ser visto, o console.log foi atribuído a variável myPet que possui o escopo global.

Espero que tenham entendido um pouco sobre a diferença de escopos, mas segue a documentação da MDN sobre escopo para mais detalhes.

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter

Objetos

Fernando Junior — Mon, 22 Mar 2021 23:18:34 +0000

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar sobre Objetos.

Objetos

Objetos são uma parte enorme da linguagem, são o core, o núcleo de muitas coisas que podem ser feitas em JavaScript.

Aprender a trabalhar com objetos é essencial para entender e dominar a linguagem.

Uma forma interessante de explicar objetos em JavaScript, é traçar um paralelo com objetos do mundo real.

No mundo real, a gente pode definir que objetos possuem algumas características, que iremos chamar de propriedades e também possuem alguma forma de ação disponível para usarmos nele, que iremos chamar de métodos.

Vamos pegar um celular de exemplo:

Ele possui algumas propriedades:

Cor
Tamanho
Modelo

E também possui alguns métodos:

Fazer ligações
Tirar fotos
Tocar músicas

No JavaScript, os objetos também possuem propriedades e métodos.

Iremos pegar como exemplo um usuário:

Propriedades:

Nome
Login
E-mail
Idade
Senha

Métodos:

Fazer Login
Fazer Logout

Outro exemplo, um objeto post de um blog:

Propriedades:

Título
Conteúdo
Autor

Métodos:

Publicar
Despublicar
Deletar

Portanto, objetos em JavaScript irão nos possibilitar a criação de estruturas de dados que representam certos elementos do nosso código ou das nossas aplicações.

A própria linguagem possui alguns objetos acoplados, como por exemplo o objeto date e o objeto Math.

Mas também existem os objetos criados por nós, que chamamos de objetos literais.

Criando um objeto literal

Para criarmos um objeto, usaremos a abertura e fechamento de chaves {}.

Dentro do objeto ficam as propriedades e cada propriedade é formada por uma chave e um valor.

Para atribuirmos um valor a uma chave, utilizaremos a anotação de dois pontos :.

As propriedades devem ser separadas por vírgula ,.

Dentro de um objeto, podemos ter propriedades que recebem vários tipos de valores, string, number, array... e até mesmo, outros objetos.

Abaixo irei criar o objeto user, contendo algumas propriedades, observem a sintaxe:

const user = {
 name: 'Fernando',
 age: 35,
 email: 'fernando@email.com',
 city: 'Rio de Janeiro',
 blogPosts: ['Estudando JavaScript', 'Criando componentes Vue.js']
}

console.log(typeof user) // object

Pegando como exemplo a propriedade name acima, podemos observar que name é a chave e 'Fernando' é o valor.

Agora irei imprimir no console o objeto criado acima:

console.log(user) // // {name: "Fernando", age: 35, email: "fernando@email.com", city: "Rio de Janeiro", blogPosts: Array(2)}

Para acessar as propriedades do objeto, deveremos utilizar a anotação de ponto ..

console.log(user.name) // Fernando
console.log(user.age) // 35
console.log(user.email) // fernando@email.com
console.log(user.city) // Rio de Janeiro
console.log(user.blogPosts) // (2) ['Estudando JavaScript', 'Criando componentes Vue.js']

Para sobrescrever uma propriedade do objeto, utilizaremos a reatribuição com o sinal de igual =.

console.log(user.name) // Fernando

user.name = 'Joaquim'

console.log(user.name) // Joaquim

Também é possível acessar e reatribuir valores utilizando a anotação de colchetes [].

O nome da propriedade dentro dos colchetes precisa ser uma string ou uma variável que armazene uma string.

Acessando valores:

console.log(user['name']) // Joaquim
console.log(user['email']) // fernando@email.com

Modificando valores:

user['name'] = 'Patrick'

console.log(user['name']) // Patrick

Na maioria das vezes será utilizado a notação de ponto user.name para trabalhar com objetos, mas em alguns casos a utilização de colchetes [] será necessária, conforme iremos ver em posts mais a frente.

Adicionando Métodos

Agora iremos adicionar métodos aos objetos literais, ou seja, adicionaremos algumas funções ao objeto.

Com isso, sabemos que funções criadas fora de um objeto são chamadas de funções e as criada dentro de um objeto são chamadas de métodos.

const dog = {
 name: 'Buddy',
 age: 6
 color: 'Brown'
 walk: function () {
  console.log('Walking...')
 }
 bark: function () {
  console.log('Au! au! au!')
 }
}

No objeto criado acima, foram adicionadas duas propriedades que recebem uma função cada, andar walk e de latir bark. Como armazenam funções, essas propriedades são na verdade métodos.

Para executar, basta utilizarmos a chamada deles:

console.log(dog.walk) // Walking...
console.log(dog.bark) // Au! au! au!

Por hoje ficamos por aqui com essa introdução a objetos. Vou deixar abaixo o link para a documentação sobre o tipo de dados object.

Documentação da MDN sobre objetos

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

LinkedIn
GIthub
Twitter