1 + 1 = 2
10 + 10 = 20
Exemplo:
console.log(1 + 10) = 11
Ou
console.log("O valor da soma é: ", 20 + 20) = 40
Mais exemplos:
const numero1 = 10;
const numero2 = 40;
const soma = numero1 + numero2;
console.log("O Valor da soma é: ", soma);
Resultado: O Valor da soma é: 50
const numero1 = 10;
const numero2 = 40;
const sub = numero1 - numero2;
console.log("O Valor da subtração é: ", sub);
Resultado: O Valor da subtração é: -30
const numero1 = 10;
const numero2 = 40;
const div = numero1 / numero2;
console.log("O Valor da divisão é: ", div);
Resultado: O Valor da divisão é: 0.25
const numero1 = 10;
const numero2 = 40;
const multi = numero1 * numero2;
console.log("O Valor da multiplicação é: ", multi);
Resultado: O Valor da multiplicação é: 400
Strings são: letras, números, caractéres diversos e textos
Identificadas por tipagem string, ou " "
Exemplos:
console.log("João Cosmala, Web Developer"); = String em " "
Diferenças
console.log("10"); = string
console.log(10); = número
console.log("10 + 10"); Retorno: 10 + 10
console.log(10 + 10); Retorno: 20
Concatenação pode ser dita como: mesclar ou juntar
Se define em mesclar duas coisas diferentes em um aguardando um (1) resultado conjunto destes dois (2).
Exemplo:
console.log("Meu nome é João e tenho " + 23, "anos");
Você acabou de concatenar uma string e um número.
Outro meio de fazer isso é usando crases: (" ") e $
Exemplo:
Meu nome é joão e minha idade é: ${23}
Variáveis são maneiras de armazenarmos informações para que possamos usar novamente no futuro
Em JavaScript temos: VAR, LET, CONST
Maneira antiga de escrever variáveis.
Perminte que adicionemos um valor nele, e posteriormente, podemos alterar este valor
Podemos adicionar um valor a ele, podendo também alterar este mesmo valor
Adicionamos um valor e ele é definido como único, sem poder alterar este valor depois.
Sendo está uma variável que só deve conter este determinado valor.
Exemplos:
var nome1 = "João";
let nome2 = "João";
const nome3 = "João";
Em JavaScript, diferente de outras linguagens, quando se tem um número, mesmo que seja impar, par, possua casa decimal e afins, ele não terá o que é conhecido como Float, Double, Integers e etc... Em JavaScript tudo isso é mais simplificado em um único tipo, tipo Number. Ou seja, qualquer coisa que seja um número, será dado como um número.
Exemplos:
console.log(21 + 10) = 31;
console.log(20 + 24.4444) = 44.4444;
console.log("10" + 10) = 1010 (??????) -> Isso ocorre porque número em aspas se torna uma string, deixando de ser um number.
Exemplos:
console.log(10) -> numero
console.log("10") -> string
Outro fator importante são as casas decimais. Em JavaScript casas decimais são separadas por pontos ( . ), e não por vírgulas ( , ).
console.log(12, 3 + 13 + 3) -> 12, 16, 3
números também podem ser armazenados em variáveis:
const idade = 23;
console.log(idade); -> 23
Resumindo, para trabalhar com números, devemos mante-los fora de strings, senão seram tratados como strings.
Valores booleanos são true ou false. 0 ou 1. Verdadeiro ou falso.
Exemplo:
const dormindo = false
const acordado = true
const comFome = "true" -> Não é booleano, é string, lembre-se das " " !!
Operadores são conhecidos como: "Operadores Lógicos", do qual são designados por símbolos que definem alguma função, algum ato, algum dever no seu código através da sua lógica.
Alguns exemplos de operadores são:
• 1: = -> Operador de atribuição
• 2: += -> Operador de adição
• 3: -= -> Operador de subtração
Exemplos:
let idade;
idade = 23;
console.log(idade); Resultado = 23
let recebe = 2000;
recebe = recebe + 10;
console.log("Meu saldo é: ", recebe); Resultado = 2010
recebe += 400;
console.log("Meu saldo é: ", recebe); Resultado = 2410
recebe = recebe - 200;
console.log("Meu saldo é: ", recebe); Resultado = 2210
recebe -= 200;
console.log("Meu saldo é: ", recebe); Resultado = 2010
Operadores de comparação sempre iram retornar true ou false no console.log;
Alguns exemplos de operadores de comparação são:
• 1: == -> Igual
• 2: != -> Diferente
• 3: === -> Estritamente igual
• 4: !== -> Estritamente diferente
• 5: > -> Maior que
• 6: < -> Menor que
• 7: >= Maior ou igual que
• 8: <= Menor ou igual que
Exemplos:
console.log("20 == 20: ", 20 == 20);
= Resultado = true; 20 é igual a 20 então: true;
console.log("21 == 20: ", 20 == 20);
= Resultado = false; 21 não é igual a 20 então: false;
console.log("21 == 21: ", 21 == 21);
= Resultado = true; 21 é igual a 21 então: true;
console.log("20 != 20: ", 20 != 20);
= Resultado = false; 20 não é diferente de 20 então: false;
console.log("21 != 20: ", 21 != 20);
= Resultado = true; 21 é diferente de 20 então: true;
console.log("21 != 21: ", 21 != 21);
= Resultado = false; 21 não é diferente de 21 então: false;
console.log("20 === 20: ", 20 === 20);
= Resultado = true; 20 é estritamente igual a 20 então: true;
console.log("21 === 21: ", "21" === 21);
= Resultado = false; "21" não é estritamente igual a 21 então: false;
Aqui vemos que === identificada "21" diferente de 20 pois 21 está em " " aspas, o deixando em string, logo, "21" não é estritamente igual a 21 porque "21" é uma string e 21 é um número.
console.log("21 === 21: ", 21 === 21);
= Resultado = true; 21 é estritamente igual a 21 então: true;
console.log("20 !== 20: ", 20 !== 20);
= Resultado = false; 20 não é estritamente diferente de 20 então: false;
console.log("21 !== 20: ", 21 !== 20);
= Resultado = true; 21 é estritamente diferente de 20 então: true;
console.log("21 !== 21: ", 21 !== 21);
= Resultado = false; 21 não é estritamente diferente de 21 então: false;
console.log("20 é maior que 20? ", 20 > 20);
= Resultado = false; 20 não é maior que 20 então: false;
console.log("21 é maior que 20? ", 21 > 20);
= Resultado = true; 21 é maior que 20 então: true;
console.log("21 é maior que 21? ", 21 > 21);
= Resultado = false; 21 não é maior que 21 então: false;
console.log("20 é menor que 20? ", 20 < 20);
= Resultado = false; 20 não é menor que 20 então: false;
console.log("21 é menor que 20? ", 21 < 20);
= Resultado = false; 21 não é menor que 20 então: false;
console.log("21 é menor que 21? ", 21 < 21);
= Resultado = false; 21 não é menor que 20 então: false;
console.log("12 é menor que 20? ", 12 < 20);
= Resultado = true; 12 é menor que 20 então: true;
console.log("20 é maior ou igual que 20? ", 20 >= 20);
= Resultado = true; 20 é maior ou igual a 20 então: true;
console.log("21 é maior ou igual que 20? ", 21 >= 20);
= Resultado = true; 21 é maior ou igual a 20 então: true;
console.log("12 é maior ou igual que 20? ", 12 >= 20);
= Resultado = false; 12 não é maior ou igual a 20 então: false;
console.log("20 é menor ou igual que 20? ", 20 <= 20);
= Resultado = true; 20 é menor ou igual a 20 então: true;
console.log("21 é menor ou igual que 20? ", 21 <= 20);
= Resultado = true; 21 não é menor ou igual a 20 então: false;
console.log("12 é menor ou igual que 20? ", 12 <= 20);
= Resultado = false; 12 não é menor ou igual a 20 então: true;
Operadores lógicos são operadores que assim como os anteriores, também determinam uma função. Assim como em Lógica Aplicada, opedadores lógicos são usados para determinar: E, OU, OUOU, NEGAÇÃO e etc...
Aqui temos como principais:
• -> && -> E -> and lógico
• -> || -> OU -> or lógico
• -> ! -> NEGAÇÃO -> negação lógica
• Para que retorne um verdadeiro (true), as duas condições precisam ser verdadeiras
Exemplo:
• true && true = true;
• false && false = true;
• true && false = false;
• false && true = false;
TRUE
const nome = "joao";
const idade = 23;
console.log(nome === "joao" && idade === 23);
Resultado: true; nome é === estritamente igual a "joao" && (E) idade também é estritamente igual a 23;
FALSE
const nome = "joao";
const idade = 23;
console.log(nome === "joao" && idade === 20);
Resultado: false; nome é === estritamente igual a "joao" && (E) idade não é estritamente igual a 23;
TRUE
console.log("23 >= 23 && 70 >= 70: ", 23 >= 23 && 70 >= 70);
Resultado: true; Porque 23 é maior ou igual a 23 e 70 é maior ou igual a 70;
• || -> Para que retorne um verdadeiro (true), uma das condições deve ser verdadeira
Exemplo ||:
• true || true = true;
• false || false = false;
• true || false = true;
• false || true = true;
const joao = true;
const manu = false;
console.log(joao || manu); Resultado: true
console.log(manu || joao); Resultado: true
console.log(joao || joao); Resultado: true
console.log(manu || manu); Resultado: false
Mais exemplos:
(Aqui resolvi dar um exemplo mais avançado pois ele se adequa melhor a questão de como costuma ser mais utilizado esse contexto das Pipes)
Observação:
Levando em consideração o mercado de trabalho, muitas vezez precisamos determinar e comparar valores para as nossas funções através de 0 e 1
• Situação 1: Resultado true
Aqui temos um objeto com o nome de sexualidade que nos trás dois valores BOOLEANOS, verdadeiro para masculino e falso para feminino
const sexualidade = {
masculino: true,
feminino: false,
};
Denominei duas variáveis, uma com o nome de joao, e outra com o nome de manu.
joao é masculino, logo, é verdadeiro
manu é feminino, logo, é falso
const joao = sexualidade.masculino; = true
const manu = sexualidade.feminino; = false
E para nos mostrar o resultado no terminal temos mais um console.log com o Operador Lógico de || para identificar valores 0 e 1 / verdadeiro e falso.
console.log(joao || manu); Resultado: true; Porque João é verdadeiro;
• Situação 2: Resultado true
const joao = sexualidade.feminino; = false
const manu = sexualidade.masculino; = true
console.log(joao || manu); Resultado: true; Porque Manu é verdadeiro;
• Situação 3: Resultado false
const joao = sexualidade.feminino; = false
const manu = sexualidade.feminino; = false
console.log(joao || manu); Resultado: false; Porque João e Manu são falsos;
• Situação 4: Resultado true
const joao = sexualidade.feminino; = true
const manu = sexualidade.masculino; = true
console.log(joao || manu); Resultado: true; Porque Joao e Manu são verdadeiros;
Agora iremos mudar um pouco sobre oq aprendemos de true ou false em || e considerar manipular bits com | (bitwise)
O operador | é usado como um manipulador de bits. Se tratarmos variáveis booleanas (true or false) com |, ele irá nos retornar 1 ou 0;
Porém, também pode ser usado para realizar operações lógicas. No entanto, ao contrário do ||, o | opera nos bits individuais dos números.
Normalmente é usado em situações onde a manipulação de bits é necessária.
Exemplo:
let x = 5; Em binário: 0101;
let y = 3; Em binário: 0011;
let result = x | y; Resultado: 7 (binário: 0111);
OU
Se tivermos valores booleanos novamente, receberemos 0 ou 1 como resposta ao invés de true ou false.
const joao = true;
const manu = false;
console.log(joao | manu); Resultado: 1 = true;
console.log(manu | joao); Resultado: 1 = true;
console.log(joao | joao); Resultado: 1 = true;
console.log(manu | manu); Resultado: 0 = false;
Observação, fora as condicionais de bit, em booleano, | também irá retornar o mesmo que ||, sendo necessário pelo menos um dos valores ser verdadeiro.
O operador de negação, na minha opinião, é mais simples de ser usado.
Ele irá transformar o que é true, em false, e o que é false, em true.
Também podendo com: !! (dupla negação) transformar algo que é true, em true, ou algo que é false, em false
Exemplos:
const joao = true
const manu = false
console.log(joao); Resultado: true;
console.log(!joao); Resultado: false;
console.log(!!joao); Resultado: true;
console.log(manu); Resultado: false;
console.log(!manu); Resultado: true;
console.log(!!manu); Resultado: false;
(Padrões de nomenclatura, convenções e o que são variáveis)
Variáveis são como contêineres ou espaços de armazenamento na programação, usados para guardar e manipular dados. Elas são como "caixas" nomeadas onde você pode guardar diferentes tipos de informações, como números, texto, listas, objetos, entre outros. Imagine uma caixa onde você coloca algo dentro e pode alterar ou trocar seu conteúdo sempre que necessário. As variáveis funcionam de maneira similar na programação. Ao usar variáveis, você dá um nome a um pedaço de memória do computador para referenciar e manipular esses dados. Por exemplo, você pode ter uma variável chamada idade para armazenar a idade de uma pessoa.
Exemplo:
const nome = joao
const idade = 23
(Assim como já estávamos fazendo anteriormente);
NOME_VARIAVEL = valores que servem de referência
Este tipo de nomenclatura de variável serve para armazenarmos valores que teremos como padrões em nossa aplicação.
Exemplo:
Você tem uma aplicação de contas a pagar aonde este retona para você cálculos de tudo que entrou naquele mês a pagar e em todos os cálulos é adicionado 2% de imposto.
Estes 2% de imposto seria uma variável global, aonde o tipo de nomenclatura é seguido por: NOME_VARIAVEL
Fora este tópico, como padrão para todas as outras variáveis temos apenas que seguir as regras de nunca dar espaço, até porque o JavaScript não irá permitir uma variável de nome (Joao Guilherme), por exemplo, e também não colocar números, caractéres especiais ou começar com a minha letra maiúscula. (A primeira letra de qualquer variável deve ser sempre minúscula)
Exemplo:
nomeDaMinhaVariavel = Padrão para qualquer nome de variável.
Palavras reservadas em JavaScript são termos que têm significados específicos dentro da linguagem e são utilizados para várias finalidades, como declaração de variáveis, definição de estruturas de controle (como loops e condicionais), definição de funções, entre outros. Essas palavras têm funções pré-definidas na linguagem e não podem ser usadas para outros propósitos, como nomear variáveis, funções ou classes. Por exemplo, palavras reservadas como if, else, for, while, function, var, let, const, entre outras, são usadas para definir a estrutura do código, e tentar utilizá-las como nomes de variáveis resultaria em erros no código JavaScript.
Mais exemplos de palavras reservadas:
break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for, function, if, implements, import, in, instanceof, interface, let, new, null, package, private, protected, public, return, static, super, switch, this, throw, true, try, typeof, var, void, while, with, yield
É um valor primitivo que indica que uma variável foi declarada, mas ainda não foi atribuída com um valor.
Quando você declara uma variável e não a inicializa, seu valor padrão é undefined. Ou seja, quando é esperado um valor, porém, ele não existe.
Também é o valor retornado por uma função que não tem uma declaração return explícita ou por acessar propriedades inexistentes em um objeto.
Já o null é um valor especial que representa a ausência intencional de um valor ou a falta de um valor válido.
Quando uma variável é declarada, mas nenhum valor é atribuído a ela, seu valor padrão é undefined. No entanto, quando você define explicitamente uma variável como null, está indicando que essa variável não possui nenhum valor ou referência a um objeto.
Exemplos:
let exemploUndefined;
console.log(exemploUndefined); Resultado: undefined
let exemploNull = null;
console.log(exemploNull); Resultado: null
O NaN é uma abreviação de "Not-a-Number", que em português significa "Não é um número".
Em JavaScript, NaN é um valor especial que representa um resultado de operação matemática inválida ou indefinida. Da qual por alguma questão lógica não pôde ser executada como deveria.
Esse valor é retornado quando ocorrem operações aritméticas que não conseguem gerar um número válido.
Por exemplo, dividir zero por zero ou realizar operações matemáticas com valores que não são números resultará em NaN.
Exemplo:
O NaN é uma abreviação de "Not-a-Number", que em português significa "Não é um número".
Em JavaScript, NaN é um valor especial que representa um resultado de operação matemática inválida ou indefinida. Da qual por alguma questão lógica não pôde ser executada como deveria.
Esse valor é retornado quando ocorrem operações aritméticas que não conseguem gerar um número válido.
Por exemplo, dividir zero por zero ou realizar operações matemáticas com valores que não são números resultará em NaN.
console.log("joao" * 5); // Resultado: NaN
Isso ocorre porque "joao" é uma string somente, aonde não tem um valor atribuido, ou seja, "joao" não é um number
porém caso atribuirmos um valor a joao dentro de uma variável, isso fica possível
Exemplo funcional:
const joao = 10;
console.log(joao * 5); // Resultado: 50
PARTICULARIDADE DO JAVASCRIPT
JavaScript permite para nós termos um número entre aspas, ou seja, strings, e ainda assim conseguir identificar este como número para concluirmos a operação.
Exemplo de particulatidade:
console.log("10" / 2); Resultado: 5
console.log("20" / 2); Resultado: 10
Porém, caso coloquemos uma letra dentro das aspas, mesmo que ainda haja um número, não irá funcionar e retornará: NaN
Exemplo:
console.log("20w" * 5);
Outro ponto importante: Caso utilizarmos um número em strings " " e um número para fazer alguma operação, se fizermos uma soma utilizando + o JavaScript não irá consider
a soma, e sim apenas adicionar o número em strings em frente ao número real
Exemplo:
console.log("20" + 5); Resultado: 205
Para entendermos as estruturas condicionais, primeiro precisamos entender o que são os blocos de código.
Blocos de códigos são definidos por todo ou qualquer código que esteja dentro de chaves { }
Exemplo:
{
isso é um bloco de código
tudo que estiver dentro de abertura e fechamento de chaves
é bem simples
}
Literal para o português: (se, senão, senão se)
Estruturas de controle são definidas por condições, a partir de medidas ou caminhos que precisamos tomar enquanto estamos codificando.
Exemplo:
Preciso que meu código faça x coisa, porém, caso aconteça y coisa, quero que ocorra z coisa. Se não, quero que retorne x coisa. Endenteu? São condições que precisamos atribuir com ações.
Essas condições também são baseadas como true ou false, por exemplo, quando determinada ação for true, faça x, quando for false, faça y.
O caminho para isso seria algo semelhante a isso aqui: Start -> Condição (true ou false) if true -> ação1 -> end, (if false) -> ação2 -> end.
| TEST EXPRESSION | -----> | TRUE | -----> | BODY OF IF | -----> | STATEMENT JUST BELOW IF |
| TEST EXPRESSION | -----> | FALSE | -----> | ____________ | -----> | STATEMENT JUST BELOW IF |
Exemplo:
let resultado;
const numero = 10;
if (numero >= 0 && numero < 9) {
resultado = "Número maior ou igual a 0 e menor que 9";
} else if (numero >= 10 && numero < 33) {
resultado = "Número maior ou igual a 10 e menor do que 33";
} else {
resultado = "Número maior do que 32";
};
console.log(resultado);
Este aqui é o que já aprendemos sobre variáveis anteriormente
-> Variáveis
Variáveis são maneiras de armazenarmos informações para que possamos usar novamente no futuro
var nome1 = "João"
let nome2 = "Manu"
const nome3 = "Shake"
Porém, devemos entender agora o que é um escopo global, local ou em bloco/block.
Vamos pegar de referência os seguintes códigos:
Código 1:
const media = 10;
if (media > 9) {
var resultado = "TESTE OK";
}
console.log(resultado); Resultado: TESTE OK. (está correto!) -> var;
Porém, se:
Código 2:
const mediaDois = 10;
if (mediaDois > 9) {
let resultadoUm = "TESTE OK";
}
console.log(resultadoUm); Resultado: Retornará erro, resultadoUm is not defined -> let;
Isso acontece porque resultadoUm está dentro do bloco de código. A variável existe, mas seu valor nunca foi utilizado.
E isso também acontece quando usamos const
Código 3:
const mediaTres = 10;
if (mediaTres > 9) {
const resultadoDois = "TESTE OK";
}
console.log(resultadoDois); Resultado: Retornará erro, resultadoDois is not defined -> const;
Isso acontece porque resultadoUm está dentro do bloco de código. A variável existe, mas seu valor nunca foi utilizado. Então para conseguirmos ter o resultado que buscamos mostrado na tela, precisamos colocar nosso console.log(); dentro do nosso bloco aonde está a variável que buscamos.
const mediaQuatro = 10;
if (mediaQuatro > 9) {
const resultadoTres = "TESTE OK";
console.log(resultadoTres); Agora está tudo dentro do mesmo bloco!!
};
| VAR | CONST | LET | |
| SCOPE | GLOBAL OR LOCAL | BLOCK | BLOCK |
| REDECLARE? | YES | NO | NO |
| REASSIGN? | YES | NO | YES |
| HOISTED? | YES | NO | NO |
Analisando está imagem podemos ver que: Em programação, o escopo se refere à visibilidade e acessibilidade de variáveis em diferentes partes do código. Em JavaScript, existem três tipos principais de escopo: global, local e de bloco. Cada tipo determina onde as variáveis podem ser acessadas e utilizadas.
1: No escopo global, as variáveis são declaradas fora de qualquer função. Isso significa que elas podem ser acessadas de qualquer lugar do código, seja dentro ou fora de funções. Variáveis globais são acessíveis em todo o programa.
2: No escopo local, as variáveis são declaradas dentro de uma função. Elas só podem ser acessadas dentro dessa função específica. Variáveis locais existem apenas dentro do contexto em que são definidas, e não podem ser acessadas fora desse contexto.
3: O escopo de bloco foi introduzido com a introdução do let e const. Variáveis declaradas com let e const têm escopo de bloco, o que significa que elas são visíveis apenas dentro do bloco de código em que são definidas.
Em JavaScript, os conceitos de "truthy" e "falsy" se referem à forma como os valores são avaliados em contextos booleanos, como em estruturas condicionais (if, while, &&, ||, entre outros).
JavaScript reconhece todos os valores como verdadeiros em uma estrutura de condição, menos:
• False
• 0
• -0
• 0m
• "" ou " ou ``
• null
• undefined
• NaN
Truthy: São valores que são considerados como verdadeiros quando avaliados em um contexto booleano. Isso não significa que sejam estritamente iguais a true, mas são interpretados como verdadeiros. Alguns exemplos de valores truthy são: true, números diferentes de zero (1, 2.5, -1), strings não vazias ("hello"), arrays e objetos não vazios, e até mesmo certos objetos vazios que são considerados truthy.
if ("hello") {
Este bloco será executado, pois a string "hello" é truthy
}
Falsy: São estes valores que são considerados como falsos em um contexto booleano. Assim como com "truthy", isso não significa que sejam estritamente iguais a false, mas são interpretados como falsos. Alguns exemplos de valores falsy são: false, 0, null, undefined, NaN, strings vazias (""), null e undefined.
if (0) {
Este bloco NÃO será executado, pois o valor 0 é falsy
}
É importantíssimo entender estes conceitos quando trabalhar com condicionais em JavaScript, pois às vezes valores inesperados podem ser avaliados como verdadeiros ou falsos. O que pode afetar a lógica do programa. O conhecimento sobre valores truthy e falsy é útil para escrever código mais conciso e compreensível.
Outros exemplos:
if (true) {
console.log("true é truthy");
}
Resultado: true é truthy
if ("testando qualquer coisa") {
console.log("testando qualquer coisa é truthy");
}
Resultado: testando qualquer coisa é truthy
if ("") {
console.log("Aspas duplas vazias é truthy");
} else {
console.log("Aspas duplas vazias é falsy");
}
Resultado: Aspas duplas vazias é falsy
if (0) {
console.log("0 é truthy");
} else {
console.log("0 é falsy");
}
Resultado: 0 é falsy
if (-0) {
console.log("0 é truthy");
} else {
console.log("0 é falsy");
}
Resultado: -0 é falsy
let alistamento;
if (alistamento) {
console.log("Este rapaz se alistou no exército");
} else {
console.log("Este rapaz ainda não se alistou no exército");
}
Resultado: Falsy, porque let alistamento é undefined;
Os operadores ternários são uma forma concisa e eficiente de escrever expressões condicionais em JavaScript (e em muitas outras linguagens de programação). Eles permitem que você tome decisões com base em uma condição, tudo em uma única linha.
Em JavaScript, o operador ternário tem a seguinte estrutura:
condição ? valorSeVerdadeiro : valorSeFalso;
Condição: Uma expressão que é avaliada como verdadeira ou falsa.
valorSeVerdadeiro: Valor retornado se a condição for verdadeira.
valorSeFalso: Valor retornado se a condição for falsa.
Exemplo:
let idade = 20;
let status = (idade >= 18) ? 'Adulto' : 'Menor';
console.log(status); Saída: 'Adulto'
Neste exemplo se a condição (idade >= 18) for verdadeira, a variável status receberá o valor 'Adulto'; caso contrário, receberá 'Menor'.
Os operadores ternários são úteis em situações em que você precisa atribuir um valor com base em uma condição simples, evitando a necessidade de escrever blocos if...else mais longos. No entanto, o uso excessivo de operadores ternários em expressões complexas pode dificultar a leitura do código, portanto, é importante usar com moderação para manter a clareza e a legibilidade.
Outros exemplos:
const media = 10;
let resultado;
if (media >= 7) {
resultado = "Aprovado";
} else {
resultado = "Reprovado";
};
console.log(resultado);
Resultado: Aprovado
Agora se usarmos o operador ternário para fazer a mesma função, teremos algo semelhante a isso:
resultado = media >= 7 ? "Aprovado" : "Reprovado";
O "?" simboliza o if (se), então caso seja maior que 7, então Aprovado, senão, Reprovado qualquer coisa abaixo de 7
A prática no uso de operadores ternários impacta positivamente a questão do código limpo. Pois assim evita-se o uso em excesso de if, else e else if.
Swtich Case:
O switch em JavaScript é uma estrutura de controle que permite avaliar uma expressão em comparação com vários casos. Dependendo do valor da expressão, o código executa diferentes blocos de código.
A estrutura básica do switch é a seguinte:
switch (expressao) {
case valor1:
Código a ser executado se expressao for igual a valor1
break;
case valor2:
Código a ser executado se expressao for igual a valor2
break;
// ...
default:
Código a ser executado se nenhum caso corresponder a expressao
}
A partir disso também temos outras condições para utilizarmos junto ao Switch Case.
É a expressão que será avaliada. O valor dela será comparado com os valores dos casos.
Cada case representa um valor específico que a expressão pode ter. Se a expressão for igual a valorN, o código dentro desse case será executado.
É usado para sair do bloco switch após um case ser executado. Se esquecido, o código continuará executando no próximo case mesmo se não houver correspondência de valor.
É opcional e é executado se nenhum dos casos corresponder à expressão. Funciona como um "caso padrão".
Exemplos:
Utilizando exemplos com if para demonstração:
const nome = "Manu";
if (nome == "João") {
console.log("O nome é João");
} else if (nome === "Manu") {
console.log("O nome é Manu");
} else {
console.log("Sem nome na lista");
};
Utilizando Swtich Case:
const nomeDois = "Pitoco";
switch(nomeDois) {
case "Shake" : -> Case === caso, se... Exemplo: Caso for... então... semelhante ao uso do if e else e else if
console.log("O nome é Shake");
break; -> Adicionamos o break para que o cósigo não continue correndo para as próximas linhas
case "Pitoco" :
console.log("O nome é Pitoco");
break;
default :
console.log("Sem nome na lista");
};
Os loops em JavaScript são estruturas que permitem executar um bloco de código repetidamente enquanto uma condição específica é verdadeira.
Eles ajudam a automatizar tarefas repetitivas sem a necessidade de escrever o mesmo código várias vezes.
Existem vários tipos de Loops em JavaScript, os principais são:
• while
• do while
• for
• for of
Em alguns momentos precisamos que algumas estruturas de códigos se repitam várias vezes, e os loops fazem este serviço muito bem.
Aqui abaixo citarei os principais e demonstrarei exemplos em seguida.
A declaração do tipo While cria um laço que executa especificamente enquanto a condição de teste for avaliada como verdadeira. Sendo assim a condição avaliada antes da execução da rotina.
Exemplos while:
let n = 0;
let x = 0;
while (n < 3) { -> Se n for menor que 3 (lembrando que n é 0)
n++; -> Então adicionamos 1 n a mais
console.log(x);
};
-> Do 0 até 10
let number = 0;
while (number <= 9) {
number++;
console.log(number);
}
Resultado: 0 até 10
-> Do 300 até 0
let numeroMaximo = 300
while (numeroMaximo > 0) {
numeroMaximo--
console.log(numeroMaximo);
}
Resultado: 300 Até 0
A declaração do tipo do while cria um laço de repetição que executa uma declaração até que o teste da condição for false (false). A condição é avaliada depois que o bloco de código é executado, resultando que uma declaração seja executada pelo menos uma vez.
Exemplos de do while:
let resultado = "";
let i = 0;
do {
i += 1;
resultado += i + " ";
} while (i < 5);
console.log(resultado);
let resultadoDois = "";
let i = 0;
do {
i++;
resultadoDois += i + "";
} while (i < 5);
console.log(resultadoDois);
A estrutura do while é semelhante ao if, porém, a sintaxe do "do while" é um pouco diferente.
A instrução for cria um loop que consiste em 3 expressões opcionais, dentro de parênteses e separadas por ponto e vírgula, seguidas essa de uma declaração ou uma sequência de declarações executadas em sequência.
for é uma das estruturas de repetição mais usadas e mais conhecidas, também está presente em muitas outras línguagens.
Exemplo:
-> Contando de 0 a 20
for (var i = 0; i < 20; i++) {
console.log(i);
}; Resultado: 0 a 20
-> Contando de 0 a 10
for (let e = 0; e <= 10; e++) {
console.log(e);
}; Resultado: 0 a 10
O Loop for of percorre objetos iterativos, chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.
A estrutura do for of se utiliza de um array.
Exemplos:
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}; Resultado: 10, 20, 30
A estrutura do for of se utiliza de um array para percorrer uma lista de nomes, números ou o que precisar.
const peoples = [
"Bruno",
"Marco",
"Pedro",
"Nadia",
"Isa",
];
for (let people of peoples) {
console.log(people);
}; Resultado: Bruno, Marco, Pedro, Nadia, Isa.
Ele retorna para nós os dados que estão dentro deste array, no caso, os nomes postos.
Porém, também é possível escrever este mesmo código ainda usando o que vimos até agora sobre o for padrão.
for(let i = 0; i < peoples.length; i++ ) {
console.log(peoples[i]);
};
Ele ainda irá percorrer a lista de nomes, mesmo que o código seja escrito de outra maneira.
Funções são reaproveitamento de código, exatamente para não precisarmos ficar reescrevendo o mesmo código toda vez que precisarmos deste.
Elas ajudam a modularizar o código, tornando-o mais organizado, legível e reutilizável.
Entre as princípais características das funções estão:
As funções permitem definir um bloco de código que pode ser chamado várias vezes em diferentes partes do programa, evitando a repetição do mesmo código.
As funções podem ter um nome que as identifica, permitindo referenciar e chamar a função pelo nome em qualquer parte do código.
Podem receber valores chamados de parâmetros quando são definidas e valores chamados de argumentos quando são chamadas.
Esses valores permitem que as funções sejam flexíveis e capazes de lidar com diferentes inputs.
Podem retornar um valor de volta para a parte do código que chamou a função.
O return é usado para especificar o valor que a função deve produzir como resultado.
As variáveis definidas dentro de uma função têm um escopo local, o que significa que não podem ser acessadas fora da função, a menos que sejam explicitamente retornadas.
Podem ser declaradas utilizando a palavra-chave function ou podem ser expressas como funções anônimas (atribuídas a variáveis ou passadas como argumentos).
- Exemplo de função sem parâmetro:
function mostrarNome( ) {
console.log("João");
};
mostrarNome( );Resultado: João.
- Exemplo de função com parâmetro:
function mostrarAlgumNome(name) {
console.log(name);
};
mostrarAlgumNome("João");Este é o parâmetro que eu quero que apareça.
Mais exemplos de funções:
-> Sem parâmetro:
function showMyName() {
console.log("João");
};
showMyName();
-> Com parâmetro:
function showRandomName(name) {
console.log(name);
};
showRandomName("João");
showRandomName("Paulo");
showRandomName("Sebastião");
showRandomName("Carolina");
showRandomName("Manu");
Resultado: João, Paulo, Sebastião, Carolina, Manu.
Observe que passamos quantos parâmetros forem necessários.
Agora para variarmos um pouco na utilização de exemplos, vamos criar uma função que faz a soma de 3 ou mais números:
Exemplo:
function somarNumeros(numero1, numero2, numero3, numero4) {
console.log("O Resultado da soma de todos os números é: ", numero1 + numero2 + numero3 + numero4);
};
somarNumeros(10, 48, 39, 64);
Resultado: 161;
As funções com return em JavaScript são blocos de código que executam uma tarefa específica e retornam um valor como resultado.
Estas são as principais caracteristícas:
As funções são usadas para agrupar um conjunto de instruções que realizam uma tarefa particular.
Essas tarefas podem ser desde cálculos simples até processamentos mais complexos.
O return é usado para especificar o valor que a função deve produzir como resultado quando ela é chamada.
Essa declaração interrompe a execução da função e retorna imediatamente o valor especificado.
As funções podem retornar qualquer tipo de valor em JavaScript, como strings, números, objetos, arrays ou até mesmo valores booleanos (verdadeiro ou falso).
O return é útil para retornar resultados de operações matemáticas, processamento de dados, validações condicionais ou qualquer lógica que produza um resultado a ser utilizado em outro lugar do código.
Exemplo:
function soma(a, b) {
return a + b;
}
let resultado = soma(3, 5);
console.log(resultado);
Resultado: 8
Mais Exemplos:
function somarAllNumeros(n1, n2, n3, n4) {
const somatoria = n1 + n2 + n3 + n4;
console.log(somatoria);
};
somarAllNumeros(20, 40, 238, 127);
Resultado: 425
Outros exemplos:
Neste exemplo agora estamos utilizando de funções com return para criar uma função que retorna a media dos 4 números dispostos.
function somarTodos(n1, n2, n3, n4) {
const somandoNumbers = n1 + n2 + n3 + n4;
return somandoNumbers;
};
function media(somandoNumbers) {
const estudanteMedia = somandoNumbers / 4;
return estudanteMedia
};
const scoreDoEstudante = somarTodos(10, 10, 10, 10);
if (media(scoreDoEstudante) === 10) {
console.log("Você é fera!!!!!!!!");
} else if (media(scoreDoEstudante) <= 5 ) {
console.log("Sinto muito, mas está de recuperação.");
} else {
console.log("Passou!!!!");
}
Array se assemelham a listas. É um objeto global que é muito útil quando é preciso lidar com muitas informações, ou passa-las de alguma maneira.
Você pode armazenar diversas informações dento de uma variável.
Observação: Em Arrays, a contagem de números não se inicia do 1, mas sim do 0
const listaNomes = [
"Pedro", -> 0
"Fabiana", -> 1
"Marcelo", -> 2
"Isadora", -> 3
"Marlene", -> 4
"Renato", -> 5
-> Total de itens no Array: 6
];
console.log(listaNomes); Resultado: (6), Pedro, Fabiana, Marcelo, Isadora, Marlene, Renato;
console.log(listaNomes.length); Resultado: 6 (Ele trará a quantidade de itens que está no array);
console.log(listaNomes[3]); Resultado: Isadora (Trará o terceiro nome que está na lista);
console.log(listaNomes[7]); Resultado: Undefined pois a posição número 7 não existe em nosso array;
console.log("Percorrendo o Array"); Percorrendo o Array
for (let listaNome of listaNomes) {
console.log(listaNome);
};
console.log("Armazenando Números"); Armazenando Números
const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
console.log(numeros); Resutado: (15) 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15;
• length -> Retorna o tamanho do Array
• filter -> Filtra um Array baseado em uma condição
• find -> Encontra um elemento dentro do Array baseado em uma condição
• findIndex -> Encontra o índice de um elemento dentro do Array
• forEach -> Cria um Loop para percorrer as opções do Array
• map -> Percorre todas as opções do Array
• push -> Adiciona um novo elemento ao Array
• pop -> Remove o último item do Array
• splice -> Remove um item específico do Array
• reverse -> Inverte a posição dos elementos do Array
Array:
const pessoas = ["João", "Pedro", "Steh", "Maysa", "Théo", "Aurora" ];
Observando itens do Array:
console.log(pessoas);
Resultado: (6) ["João", "Pedro", "Steh", "Maysa", "Théo", "Aurora" ]
console.log("Utilização do Length: ", pessoas.length);
Resultado: Utilização do Length: 6
Filtrando itens específicos do Array [ ]:
console.log("Posição no Array: ", pessoas[2]);
Resultado: Posição no Array: Steh
(Lembrando que Array se inicia contando do 0, logo, ele passou por João que é 0 e Pedro que é 1 para chegar em Steh que é 2)
Adicionando Matheus:
pessoas.push("Matheus");
console.log("Adicionando Matheus ao Array: ", pessoas[6]);
Resultado: Adicionando Matheus ao Array: Matheus (Na posição 6)
Removendo o último item do Array
pessoas.pop();
console.log("Removendo o último elemento do Array: ", pessoas[6]); // Resultado: Undefined (Mateheus foi removido do Array);
const videogames = ["Playstation 1", "Playstation 2", "Nintendo 64", "Super Nintendo", "Master System", "PSP", "Xbox 360", "Xbox One", "Xbox Series X"];
console.log(videogames);
Resultado: (9) ["Playstation 1", "Playstation 2", "Nintendo 64", "Super Nintendo", "Master System", "PSP", "Xbox 360", "Xbox One", "Xbox Series X"]
Invertendo ordem do Array com reverse:
videogames.reverse();
console.log(videogames);
Resultado: (9) ['Xbox Series X', 'Xbox One', 'Xbox 360', 'PSP', 'Master System', 'Super Nintendo', 'Nintendo 64', 'Playstation 2', 'Playstation 1']
forEach irá percorrer todos os elementos do Array
Utilizando forEach com um callback retornando uma função:
function posicoesDeLog(item) {
console.log(item);
}
videogames.forEach(posicoesDeLog);
Resultado:
Xbox Series X
Xbox One
Xbox 360
PSP
Master System
Super Nintendo
Nintendo 64
Playstation 2
Playstation 1
Agora fazendo a mesma coisa de uma maneira mais simplificada:
Utilizando forEach com um callback retornando uma função2 (Simplificada):
videogames.forEach((item) => console.log(item));
Resultado:
Xbox Series X
Xbox One
Xbox 360
PSP
Master System
Super Nintendo
Nintendo 64
Playstation 2
Playstation 1
Map irá percorrer e retornar um novo Array cpm base no último Array manipulado ou selecionado para este. No caso, videogames
const otherVideoGames = videogames.map((game) => game);
console.log(otherVideoGames);
Resultado: (9) ['Xbox Series X', 'Xbox One', 'Xbox 360', 'PSP', 'Master System', 'Super Nintendo', 'Nintendo 64', 'Playstation 2', 'Playstation 1']
const marcasTecnologia = ["Apple", "Microsoft", "IBM", "Lenovo", "Dell", "Acer", "Sony"];
console.log(marcasTecnologia);
Resultado: (7) ["Apple", "Microsoft", "IBM", "Lenovo", "Dell", "Acer", "Sony"];
Utilizando find para encontrar um nome específico dentro do Array
const posicaoIBM = marcasTecnologia.find((item) => item === "IBM");
console.log(posicaoIBM);
Resultado: IBM
const posicaoMicrosoft = marcasTecnologia.find((item) => item === "Microsoft");
console.log(posicaoMicrosoft);
Resultado: Microsoft
Porém se passarmos um nome que não existe, então retornará Undefined
const posicaoNomeInexistente = marcasTecnologia.find((item) => item === "Gucci");
console.log(posicaoNomeInexistente);
Resultado: Undefined
Buscando a posição do index
findIndex:
const posicaoNoIndex = marcasTecnologia.findIndex((item) => item === "IBM");
console.log(posicaoNoIndex);
Resultado: 2 (Pois IBM está na posição 2);
Buscando posição inexistente do index:
const semPosicaoNoIndex = marcasTecnologia.findIndex((item) => item === "NaoExiste");
console.log(semPosicaoNoIndex);
Resultado: -1 (Pois não existe nada com este nome no Array);
const marcasDeGrife = ["Gucci", "Prada", "Versaci", "Balanciaga", "Louis Vuitton"];
console.log(marcasDeGrife);
Filtrando no Array somente os itens possuintes de mais de 10 caractéres
const filtermarcasDeGrife = marcasDeGrife.filter((item) => item.length > 10);
console.log("Filtrando Array marcasDeGrife: ", filtermarcasDeGrife);
Resultado: (1) Louis Vuitton (Único item no Array que possui mais de 10 caractéres)
Filtrando no Array somente os itens possuintes de mais de 5 caractéres:
const filtermarcasDeGrifeDois = marcasDeGrife.filter((item) => item.length > 5);
console.log("Filtrando Array marcasDeGrife 2: ", filtermarcasDeGrifeDois);
Resultado: (3) Versaci, Balanciaga, Louis Vuitton (Itens no Array que possuem mais de 5 caractéres)
const avioes = ["Airbus A380", "Boeing 747", "Airbus A340", "Boeing 777", "Antonov"];
console.log(avioes);
Utilizando Splice para remover itens do Array:
avioes.splice(3);
console.log(avioes);
Resultado: (3) Airbus A380, Boeing 747, Airbus A340