🧠

Anotações Prog.Js

Java-Script é uma linguagem de programação voltada para o desenvolvimento web Front-end, com tipagem
dinâmica e assíncrona.

console.log("Hello World");

JavaScript é executado pelo motor V8 no navegador Chrome e em outros. Atualmente, JavaScript está na versão
ECMAScript 2022.

Variaveis
Tipos de variáveis em js
Existem três tipos de variáveis: var, let e const.

A primeira é a forma mais antiga de declarar uma variável e a menos recomendada também, por ser dinâmica
demais. Ou seja, ela pode ser declarada e reatribuída diversas vezes no mesmo escopo, o que pode causar
muitos problemas.
Let e const são as mais utilizadas...

A variavel Let é de escopo em bloco e ela nao pode ser declarada duas vezes no mesmo escopo, essas
caracteristicas da variavel Let favorece uma maior precisão na hora de desenvolver codigos.

Const como Let tem seu escopo local e nao pode ter seu valor reatribuido, isto significa que Const ao ser
delcarado e ter seu valor atribuido ele nao podera ser modificado depois

const sayHello = "hello world";

console.log(sayHello); //vai imprimir hello world no console
const sayHello = "hello guys"; //isto vai mostrar um erro, pois ja foi atribuido valor antes

Hoisting
O conceito de Hoisting nada mais é do que declarar as variaveis em um local onde antes de o codigo
precisar executar uma função ou tarefa, as informações necessarias (variaveis) ja foram declaradas.
Colocar as informações necessarias no topo de seu escopo.

Escopo de variavel
Escopo é o local onde a variavel é acessivel, isto tambem vale para funções. Existem dois tipos de
escopo: Global e Local

Anotações Prog.Js 1
 let myGlobal = "global";
function myFunction() {
return myGlobal;
}
//aqui esta função e variavel são de escopo global, pois não estao restritas a nenhum
//bloco de codigo

function myFunction2 () {
let myLocal = "local";
}//esta variavel existe e esta disponivel dentro do escopo da função
//assunto de extrema importancia para a criação de algoritmos
// mais a frente sera abordado

Data Types
Tipos de dados primitivos

String

String em Javascript são os caracteres ou numeros em textos

let str = "this is a string :) @@@";

let str2 = "123"; //aqui vale notar que por ter " " e dentro os numeros, 123 se torna uma string

Number

Number são os numeros de todos os tipos, nao é preciso definir na variavel qual tipo de numero este é

let num = 12;

let num2 = 1.200;
let num3 = 11,45;
let num4 = -12;

Boolean

valores booleanos são extremamente importantes para a construção de algoritmos. Valores booleanos são
estritamente True ou False

let testBoo = True;

let booTest = False;
//aqui as duas variaveis estao com os valores booleanos definidos
//uma com cada valor valido

Null e Undefined

aqui irei tratar os dois juntos, por suas diferenças serem ligeiramente diferentes.
> Undefined é quando uma variavel(ou função) esta sem valor ou não foi inicializada, isto torna ela
undefined por nao ter seu valor atribuido

let testVar; //aqui testVar é undefined

let Vartest = 0; //importante notar que zero é um numero e diferente de undefined
//undefined é ausencia de valor
// 0 ja é um valor

> Null por sua vez é a ausencia de um valor que deveria ter sido atribuido ou entao uma ausencia
intencional em um contexto onde uma variavel deveria ter um valor valido

//aqui abordo conceitos que ainda nao lidei, mas mais a frente irei

const tarefa = {
descricao: "Fazer compras de supermercado",
usuarioAtribuido: null // usuarioAtribuido nao definido inicialmente deixando o campo null
};

Anotações Prog.Js 2
 //podendo atribuir um valor no objeto
tarefa.usuarioAtribuido = "João";

// Ou você pode remover o usuário atribuído, definindo como null novamente

tarefa.usuarioAtribuido = null;

Importante notar que quando um objeto é criado dentro de uma const, as propriedades não podem ser
alteradas, mas os valores de suas propriedades podem, como no exemplo.
Objetos são importantes para a organização de dados, eles são um conjunto de dados nomeados relacionados,
permitindo a organização e manipulação em grande escala de dados.

Mais acima foi dito que const não tem seus valores reatribuídos, mas neste caso, objetos em const podem
ter os valores das propriedades alterados.

BigInt

O metodo BigInt é usado para lidar com numeros muito grande, nativamente js nao tem suporte para numeros
com muitas casas, portanto é necesssario utilizar outros metodos alem dos convencionais para lidar com
tais numeros, por js ser uma linguagem voltada ao desenvolvimento web front-end, raramente sera
utilizado, mas importante ter conhecimento da existencia dele

const numeroInteiro = 42; // Isso é um número normal

//uma outra forma de utilizar o metodo BigInt é adicionando um "n" ao final do numero
const bigInt = 1234567890123456789012345678901234567890n; // Isso é um BigInt
const outroBigInt = BigInt("9876543210987654321098765432109876543210"); // Outra maneira de criar um BigInt

existe um operador em js que é o typeof, ele é muito utilizado para verificar o

tipo de dado é aquele

let myName = "Matt";

console.log(typeof myName);
//no consolle sera imprimido string, undefined

Laços de repetições
While/For

While

Existem estruturas de repetições no Javscript para efetuar loops enquanto uma condição for True e esta
estrutura é otima para a criação de algoritmos como por exemplo, processamento de blocos de codigos que
precisam ser executados atualizando valores ate que uma determinada condição seja falsa assim dando fim a
estrutura de repetição. É preciso ter cuidado ao utilizar estas estruturas, pois se houver um erro na
logica sintatica do codigo ele pode cair em loop infinito.

um exemplo de como se utiliza while

while (condition) {//nos parametros é passado a condição

statement }; //o codigo a ser executado no loop

O codigo vai ser executado pelo menos uma vez ate que a condição seja atendida e ao final terá um novo
valor ou uma ação completa.

Um exemplo real

let contador = 0;//inicia uma variavel com um determinado valor

while (contador < 5) { //estabelece uma condição para que o loop seja executado caso caso continuar True
//codigo a ser executado
console.log("Contagem: " + contador);
contador++; // o ++ é um operador de pós-incremento que atribui valor de uma variavel sendo seu valor proprio +1
//portanto ao final de cada loop a variavel passara sempre contador+1
}

Anotações Prog.Js 3
 console.log("Loop concluído.");
//verificação do valor ao loop for completo
//sera imprimido no console o numero 6

É possível começar a mesclar os tipos de estruturas do Javascript e treinar a logica utilizando

condicionais e Loops.

Irei criar um pequeno código simples para demonstrar a utilização dessas duas estruturas, onde um loop é
criado para solucionar uma condição e então é verificado se o loop foi realmente concluido.

let contador = 0; // Variável de controle

while (contador < 5) {

console.log("Contagem: " + contador);
contador++;
}

if (contador === 0) {
console.log("O loop não foi executado.");
} else {
console.log("O loop foi executado pelo menos uma vez.");
}

é importante notar que o interpretador do Javascript lê os códigos uma linha por vez como nós humanos, de
cima pra baixo da esquerda para a direita.

No exemplo, usamos uma variável chamada "contador" e a inicializamos com o valor 0 antes de entrarmos no
loop "while". Dentro do loop, aumentamos o valor do "contador" a cada passagem. Após a conclusão do loop,
verificamos o valor do "contador". Se o "contador" ainda estiver em 0, isso significa que o loop não foi
executado. Por outro lado, se o "contador" for maior que 0, isso indica que o loop foi executado pelo
menos uma vez.
Em resumo, estamos usando o "contador" para verificar se o loop "while" fez algum trabalho ou não. Se o
"contador" não mudar, significa que o loop não fez nada; caso contrário, ele fez alguma coisa.

Do While

Existe outra estrutura de repetição no Javascript que é o Do while. Esta estrutura tem uma função e
funcionamento muito semelhante ao While, sua forma sintatica é um pouco diferente e sua execusão acontece
de outra forma tambem.

um exemplo

do {
codigo a ser executado
} while (condição);

Após o interpretador ler “do” e executar o codigo ele verifica no “while” se a condição é valida ou não
para que ocorra uma repetição no codigo execuatevl, isto torna o Do While um laço de repetição que sempre
vai executar ao menos uma vez o codigo em contra ponto com o While que antes de executar o codigo
verifica a condição.

um exemplo real

let senhaCorreta = "senha123";

let senhaDigitada;
let tentativas = 0;

do {
senhaDigitada = prompt("Digite a senha: "); //1
tentativas++; //2

if (senhaDigitada === senhaCorreta) { // 3

console.log("Senha correta! Acesso permitido após " + tentativas + " tentativa(s).");
} else {
console.log("Senha incorreta. Tente novamente.");
}
} while (senhaDigitada !== senhaCorreta); //4

//1 variavel senhaDigitada é atribuida a uma chamada de prompt

//2 a cada mova chamada é adicionado +1 na variavel tentativas
//3 cadeia condicional que verifica a igualdade da senhaDigitada e senhaCorreta
//4 a condição de loop caso senhaDigitada for diferente de senhaCorreta havera mais uma execyção de "Do"

Anotações Prog.Js 4
 For (loop)

Como as estruturas de repetição ja apresentadas, o for tem sua sintaxe mais voltada a loops com
repetições em um numero conhecido de vezes, sendo um pouco mais especifico e tendo uma possibilidade
de controle maior a partir do numero de iterações(numero de vezes que as repetições vão acontecer).
Aqui esta a sintaxe basica

for (inicialização; condição; incremento) {

// Código a ser executado em cada iteração
}

Dentro dos parâmetros começamos definindo a inicialização, isto é, a condição inicial do nosso
controle dentro do loop for.
Depois estabelecemos uma condição que será verificada a cada loop, se for true então o codigo será
executado até que após cada atualização na condição se torne falsa ao final, assim interrompendo o
loop.

No incremento é executado após cada iteração do loop e é usado para atualizar o valor da variável de
controle. Ele é geralmente usado para aumentar ou diminuir o valor da variável de controle.

Um exemplo real

for (let i = 1; i <= 5; i++) {

console.log(i);
}

Vale ressaltar que nem sempre a inicialização precisa ser passada, ela é opcional dependendo de como o
codigo esta escrito e como esse laço de repetição vai somar em toda a harmonia do codigo.

Os momentos onde a inicialização não é passada é quando ela ja esta declarada em outro local do
codigo ou a variavel simplismente esta fora do laço, como este exemplo:

let i = 0;
let sum = 50;

for (; i < 5; i++) {

if (i % 2 === 0) {
sum += i;
}
console.log(`Valor de i: ${i}, Soma dos números pares: ${sum}`);
}
//o local sem inicialização esta somente com um ";", apos isso se inicia uma condicional que verifica se
//o resto da divisão da variavel i por 2 possui resto 0, sendo true

For in e For of

for of deles (coisas valores)

for in neles (nomes identificadores)

Condicionais e Estruturas de controle

if, else e switch case...

No javascript existe e em outras linguagens de programação existe as cadeias condicionas que nada mais
são que blocos de codigo executaveis diante uma situação passada nos seus parametros, com um exemplo o
entendimento fica mais facil

let idade = 18;

//um valor é armazenado dentro da variavel e entao se inicia uma condiação
if (idade >= 18) {
console.log("Você é maior de idade.");
//este exemplo se inicia com um if() que traduzindo seria "se" e dentro dos parenteses é
//verificado se a variavel idade possui um valor maior ou igual a 18
//a condição sendo valida entao o codigo é executado, caso contrario nada acontece
}

Anotações Prog.Js 5
 //apos declarar o if abre os parametros e dentro dele é passado a condição necessaria para que o codigo seja executado entre as chaves

Operadores logicos

É de extrema importancia entender sobre os operadores condicionais, ja que eles são feitos para
estabelcer se aquele trecho de codigo sera ou não executa, se a condição é ou não verdadeira. vale dizer
que não necessariamente o codigo é executado somente quando a codição for passada ser verdadeira ja que
pode ser util querer executar uma ação caso uma situação for falsa.

aqui esta um exemplo dos operadores utilizados nos parenteses

//igualdade
if (x == y) {
// código a ser executado se x for igual a y
}
//desigual
if (x != y) {
// código a ser executado se x for diferente de y
}
//igualdade estrita
if (x === y) {
// código a ser executado se x for igual a y, sem conversão de tipo
}
//desiqualdade estritra
if (x !== y) {
// código a ser executado se x for diferente de y, sem conversão de tipo
}
//menor que
if (x < y) {
// código a ser executado se x for menor que y
}
//maior que
if (x > y) {
// código a ser executado se x for maior que y
}
//menor ou igual que
if (x <= y) {
// código a ser executado se x for menor ou igual a y
}
//maior ou igual que
if (x >= y) {
// código a ser executado se x for maior ou igual a y
}
//operador AND
if (x > 0 && y > 0) {
// código a ser executado se x e y forem ambos maiores que zero
}
//operador OR
if (x > 0 || y > 0) {
// código a ser executado se x for maior que zero OU y for maior que zero
}
//operador NOT
if (!condicao) {
// código a ser executado se a condição for falsa, Inverte o valor de uma condição
}

Esta cadeia condicional serve para criar algoritmos mais complexos podendo servir para criar pequenos
sistemas, sua estrutura é mais complexa tendo tambem a palavra reservada “else” onde sua execução
acontece quando o if não for executado por conta de a condição nos seus parametros não ser valida.

let nota = 4;

if (nota >= 5) {
//caso a nota for igual ou maior que 5 o console mostrara que aluno passou
console.log("Parabens, você passou!");
} else {
//caso contrario ele não passou
console.log("Sinto muito, você não passou.");
}

Esta possibilidade abre muitas opções, mas uma cadeia de duas condições ainda é muito limitado, porem no
javascript e em outras linguagens é possivel estender isso infinitamente, aqui esta um exemplo

let nota = 75;

if (nota >= 90) {

console.log("Aprovado com nota A");
} else if (nota >= 80) {

Anotações Prog.Js 6
 console.log("Aprovado com nota B");
} else if (nota >= 70) {
console.log("Aprovado com nota C");
} else {
console.log("Reprovado");
}

Switch Case

Esta estrutura de condições é semelhante a vista anteriormente, porem com algumas diferenças.

Ao contrario do If else onde é possivel fazer ramificações em sua estrutura o switch não tem essa
possibilidade, é um pouco mais simples e isso é bom.

Ao inves de precisar escrever mais codigo para precisar verificar o mesmo valor ele simplismente verifica
uma vez e testa em cada caso e por esse motivo utilizar a palavra reservada “break” para interromper um
processo é util.

Aqui esta um exemplo da sintaxe

switch (expressão){
case "x": instrução
break;

case "y": igual

break;

case "z": //não, isto não é um erro, quando um case é passado sem instrução e break e logo abaixo um outro case, a instrução passa a valer para os dois
case "same": instrução
break;
}

Como esta demonstrado acima, o uso de “break” é muito relevante, pois o comportamento padrão é que
independe de o “case” tiver seu valor verificado e o codigo executado, ele vai pular para o proximo
“case” e então repetir o processo ate que todos os “case” estejam verificados e ou executados. Portanto,
“break” nada mais é que uma palavra reservada que ao ser lida ela interrompe o processo e utilizando de
uma analogia, ela “salta” para fora do switch, já que o case foi executado.

Aqui vai um exemplo real

let mes = "4";

switch (mes){
case "1":
console.log("Janeiro, este é o primeiro mes do ano :)");
break;

case "2":
console.log("Fevereiro, este é o segundo mes do ano :)");
break;

case "3":
console.log("Março, este é o terceiro mes do ano :)")
break;

default:
console.log("Este não é o primeiro, nem o segundo e tambem não é o terceiro mes do ano")
break;
}

Objetos
O que é objetos?
Um objeto é uma estrutura de dados organizados para manipular, armazenar e aninhar dados.

A estrutura dos objetos é iniciada por:

Identificador (variavel)

Pares de Chave-Valor
As chaves são Strings que servem como identificadores dos elementos.
Os valores são armazenados nas chaves, sendo identificados pela string nome.

Anotações Prog.Js 7
 -Ferramenta util para agrupar dados.

Exemplo de um objeto literal :

const expObject = {

nome : "Matt",
sobrenome: "Dev",
idade: 18,
endereco: {
pais: "Br",
uf: "SP",
cidade: "SP"
}
}
//um objeto com algumas propriedades, onde uma propriedade tem tres outros elementos aninhados

os metodos em js servem para executar uma função, são palavras reservadas para
facilitar determinadas operações.

Os metodos mais comuns em js para manipular objetos são estes:

Atualizar ou adicionar propriedades e valores

let testObject = {};

testObject.num = 123; //adiciona uma nova propriedade e valor

testObject[num2] = 4; // add tambem
//para atualizar o valor basta escrever o caminho da propriedade desejada e atribuir o novo valor

console.table(testObject); //imprime no consoleo objeto

testObject = {
num: 123,
num2: 4
}

testObject.num3 = {numHere: 18, numHere2: 100}; //adiciona propriedades aninhadas

console.table(testobject);

//console imprime

testObject = {
num: 123,
num2: 4,
num3: {
numHere: 18,
numHere2: 100
}
}

o “.” é extremamente importante, pois ele é utilizado na maior parte das vezes
para acessar propriedades de diversas areas, uma ferramenta sintatica muito util

Deletar uma propriedade

existe uma palavra reservada que ao ser utilizada ela deleta uma propriedade de um objeto.

Este metodo se chama “delete”, bem facil de lembrar

para ser utilizada basta iniciar a linha com o metodo e em seguida escrever o caminho do objeto desejado
para deletar:

testObject = {
num: 123,
num2: 4,
num3: {
numHere: 18,
numHere2: 100
}
}

Anotações Prog.Js 8
 delete testObject.num3.numHere2; //numHere2 foi deletado

Verificar a existencia

tambem existe a possibilidade de verificar a existencia de uma proriedade e ter o retorno em valores
booleanos (True or False):

//objeto criado
testObject = {
num: 123,
num2: 4,
num3: {
numHere: 18,
numHere2: 100
}
}

console.log(testObject.hasOwnProperty('num2'));
//mensagem imprimida no console sera True

console.log(testObject.num3.hasOwnProperty('numHere2'));//true
//para verificar propriedades dentro de propriedas, basta usar esta sintaxe

console.log(testObject.hasOwnProperty('abacaxi'));//false

//se o metodo existir mas tiver seu valor como null ou undefined ainda sim o retorno sera true

//o metodo hasOwnProperty() tambem é valido em arrays, ja que estas tambem são objetos

//existe o operador in tambem, ele tem praticamente a mesma funcionalidade

console.log("numHere2" in testObject.num3); //retorna true

O assunto de objetos em Javascript é muito extenso, por enquanto isto é o

suficiente.

Type Casting
Tipos de conversão

No javascript é possivel converter o tipo de um valor, isto é util quando se deseja utilizar os dados de
uma maneira diferente.

Existem dois tipos de Type Casting.

Conversão implicita: É quando este processo ocorre sem que a alteração seja feita explicitamente no
codigo atraves de metodos

1 + "2" = "12";

Neste exemplo o console imprimira “12”, isto ocorre quando um numero e uma string são concatenados, o
numero sera convertido em string.

Conversão explicita: É quando os valores são alterados de forma explicita atraves de metodos

let paraNum = Number("10"); //de string para numero

let paraStr = String(100); // de numero para string
let paraBoo = Boolean(1); //para booleano

const test1 = Boolean(1);

if (test1) { //isto é uma cadeia condicional, ainda falarei dela

console.log("test1 é verdadeiro (true)");
//para usar o metodo construtor Boolean() e definir um valor como true basta passar
//nos parametros qlqr valor que nao seja 0, "" e false, pois estes alteram o valor para false
} else {
console.log("test1 é falso (false)");
}

Anotações Prog.Js 9
 parseInt e parseFloat

ParseInt() é um metodo utilizado para processar um numero nos parametros que nao seja do tipo Number e
então alterar ele para type number.

let numTxt = "10"; //numero em string

numTxt = parseInt(numTxt); // numero em string alterado para type number
console.log(numTxt);

caso um numero que nao seja inteiro for passado para parseInt, ele se tornara
inteiro

parseFloat() é um metodo utilizado para o mesmo fim, mas para numeros com pontos

let numTxt = "10.20";

numTxt = parseFloat(numTxt);
console.log(numTxt); // o numero imprimido sera 10.20

Estruturas de dados
Os Principais

Array

Arrays são uma estrutura de dados de extrema importancia para o desenvolvimento de diversas apliações.

•O conceito do uso de Arrays é utilizar dessa estrutura para o armazenamento de diversos tipos de
valores, sejam eles booleans, string ou numbers.

•Arrays possuem o seu tamanho mutavel, isto é voce nao precisa declarar seu tamanho apos ter criado uma
array, é possivel adicionar e deletar quantas vezes quiser valores de arrays.

No Javascript o indice se inicia na contagem zero e segue na ordem natural dos numeros

let minhaArray = [10, 20, 30, 40, 50];

let primeiroElemento = minhaArray[0]; // Acessa o primeiro elemento (10)
let terceiroElemento = minhaArray[2]; // Acessa o terceiro elemento (30)

Array é um tipo de objeto iteravel, isto significa que é possivel utilizar em

loops, estruturas de repetições e percorrer cada elemento do indice da array.

exemplo com metodos mais comuns

let arr = ['palavra', 'um', 'five', 'make', 'example',];

arr.shift() // metodo que retira o primeiro elemento
arr.unshift('novoValor');//adiciona um novo valor no inicio da array
arr.pop() //retira o ultimo valor
arr.push("no fim"); //adiciona um novo valor ao fim

console.table(arr);
┌─────────┬─────────────┐
│(index) │ Values │
├─────────┼─────────────┤
│ 0 │ 'novoValor' │
│ 1 │ 'um' │
│ 2 │ 'five' │
│ 3 │ 'make' │
│ 4 │ 'no fim' │
├─────────┼─────────────┤
//resultado final
let tamanho = arr.length - 1;
//para verificar o tamanho de uma array(quantos elementos possui) basta utilizar
//o metodo .length
console.log(tamanho);//
//como o indicie se inicia no zero, isto faz com que o ultimo elemento seja um valor acima

Anotações Prog.Js 10
 //da nossa contagem convencional da qual se inicia no 1, portanto para verificar
//o tamanho total de uma array basta utilizar o metodo subtraindo 1, assim nossa contagem
// e a do computador permanecem a mesma

Map
Em JavaScript, um Map é como uma lista de coisas onde cada coisa tem um nome (chave) e um valor. É
como um dicionário onde você pode olhar para uma palavra (chave) e ver o que significa (valor). É útil
quando você precisa associar informações de uma forma organizada e fácil de encontrar. Por exemplo,
você pode usar um Map para fazer uma lista de nomes de pessoas e suas idades. Isso torna mais fácil
encontrar a idade de alguém quando você sabe o nome dela.

const números = [1, 2, 3, 4, 5];

const duplicados = números.map(function (número) {

return número * 2;
});

console.log(duplicados); // Saída: [2, 4, 6, 8, 10]

let sf = new Map();

sf.set('ryu', 'japan').set('ken', 'usa');
for (let [chr, country] of sf.entries()){
console.log( ${chr} is from ${country} );
console.log("and")
};

Anotações Prog.Js 11