Tereza25/logica-modulo02-senac

logica-modulo02-senac

1. Estruturas Condicionais
2. Function and Arrow function
3. Função Callback
4. Arrays
5. Objetos
6. Classes

---

Estruturas Condicionais

Na programação utilizamos estruturas condicionais para decidir se algo deve ou não acontecer. Ou seja, para tomada de decisão.

• if/ else if/ else

if (condição) {
  // se a condição for verdadeira, o código aqui dentro será executado
} else {
  // se a primeira condição não for verdadeira, o código aqui dentro será executado
}

if (condição) {
  // se a condição for verdadeira, o código aqui dentro será executado
} else if (condição) {
  // se a condição anterior não for verdadeira e a condição atual for, o código aqui dentro será executado
} else {
  // se as condições anteriores não forem verdadeiras, o código aqui dentro será executado
}

Exemplo:

Se for maior de idade pode entrar:

if (idade >= 18) {
  console.log('pode entrar')
}

Agora queremos também mandar mensagem caso não seja maior de idade:

if (idade >= 18) {
  console.log('pode entrar')
} else {
  console.log('entrada permitida apenas para maiores de idade.')
}

Agora mudamos um pouco a regra e complicamos um poco:

• se for maior de 18 entra
• se for mais de 18 e menor de 21 entra, mas nao pode consome bebida alcolica
• se for maior de 21 entra e pode consome bebida alcolica.

if (idade >= 18 && idade < 21) {
  console.log('pode entrar, mas não pode consumir bebidas alcolicas')
} else if (idade >= 21) {
  console.log('pode entrar e consumir bebidas alcolicas')
} else {
  console.log('entrada permitida apenas para maiores de idade.')
}

O else if pode ser repetido quantas vezes for necessário.

Exemplo de condicional usando ternário:

const nota = 3

const resultado = (nota >= 7) ? 'aprovado' : 'reprovado'

console.log(resultado)

• Switch Case

A estrutura condicional switch permite executar um bloco de código diferente de acordo com cada opção (cada case) especificada. Seu uso é indicado quando os valores a serem analisados nessas condições são pré-definidos.

A sintaxe da SC é:

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Observe na prática:

const produto = 'mamão'

switch (produto) {
  case 'laranja':
    console.log('laranja custa 30 centavos');
    break;
  case 'manga':
  case 'mamão':
    console.log('manga e mamão custam 2.79 reais.');
    break;
  default:
    console.log('desculpe, nao temos o produto desejado');
}

---

Function and Arrow function

Declarando funções:

function falar() {### Switch Case

A função switch case é uma ferramenta essencial na caixa de ferramentas de qualquer programador JavaScript. Ela oferece uma maneira eficiente de lidar com múltiplas condições, evitando o uso excessivo de estruturas condicionais aninhadas. A estrutura switch case é especialmente útil quando se precisa executar diferentes blocos de código com base no valor de uma expressão.

A sintaxe do Switch Case é:
```js
switch (expressão) {
case valor1:
  // bloco de código a ser executado
  break;
case valor2:
  // bloco de código a ser executado
  break;
// mais cases...
default:
  // bloco de código a ser executado se nenhum case combinar
} 

Agora observe o exemplo:

const produto = 'mamão'

switch (produto) {
  case 'laranja':
    console.log('laranja custa 30 centavos');
    break;
  case 'manga':
  case 'mamão':
    console.log('manga e mamão custam 2.79 reais.');
    break;
  default:
    console.log('desculpe, nao temos o produto desejado');
}

  return 'Pipipi popopo'
}

function dobro(num) {
  return num * 2
}

function calcularMedia(nota1, nota2, nota3) {
  const soma = (nota1 + nota2 + nota3)
  const media = soma / 3
  return media
}

Ou, podemos declarar as mesmas funções da seguinte forma:

const falar = function() {
  return 'Pipipi popopo'
}

const dobro = function(num) {
  return num * 2
}

const calcularMedia = function(nota1, nota2, nota3) {
  const soma = (nota1 + nota2 + nota3)
  const media = soma / 3
  return media
}

Arrow function possui uma sintaxe mais curta, e sabemos que é uma função pelo símbolo =>

const falar = () => {
  return 'Pipipi popopo'
}

const dobro = (num) => {
  return num * 2
}

const calcularMedia = (nota1, nota2, nota3) => {
  const soma = (nota1 + nota2 + nota3)
  const media = soma / 3
  return media
}

Conseguimos deixar a função ainda mais concisa, pois:

• caso a função só tenha uma linha de instrução, as chaves {} são opcionais

• e ao remover as chaves {}, o return é implícito e, portanto, também removemos:

  const falar = () => 'Pipipi popopo'
  
  const dobro = num => num * 2

• caso a função só tenha 1 parâmetro, os parênteses em volta do parâmetro (param) também são opcionais:

  const dobro = num => num * 2

MDN: Arrow function

---

Função Callback

Uma função callback é uma função passada a outra função como parâmetro, que é então invocada dentro da função externa para completar algum tipo de rotina ou ação. Fonte MDN: callback

function somar(a, b) {
  return a + b
}

function subtrair(a, b) {
  return a - b
}

function multiplicar(a, b) {
  return a * b
}

function dividir(a, b) {
  return a / b
}

function ordenar(a, b) {
  if (a <= b) {
    return [a, b]
  } else {
    return [b, a]
  }
}

function calcular(a, b, callback) {
  return callback(a, b)
}

const num1 = 7
const num2 = 2

const somaDoisNumeros = calcular(num1, num2, somar)
console.log(somaDoisNumeros) // 9

const subtracaoDoisNumeros = calcular(num1, num2, subtrair)
console.log(subtracaoDoisNumeros) // 5

const multiplicacaoDoisNumeros = calcular(num1, num2, multiplicar)
console.log(multiplicacaoDoisNumeros) // 14

const divisaoDoisNumeros = calcular(num1, num2, dividir)
console.log(divisaoDoisNumeros) // 3.5

const ordenarDoisNumeros = calcular(num1, num2, ordenar)
console.log(ordenarDoisNumeros) // [2, 7]

Deixando a sintaxe reduzida:

const somar = (a, b) => a + b

const subtrair = (a, b) => a - b

const multiplicar = (a, b) => a * b

const dividir = (a, b) => a / b

const ordenar = (a, b) => (a <= b) ? [a, b] : [b, a]

const calcular = (a, b, callback) => callback(a, b)

---

Arrays

Declaração de arrays

const lista = new Array('pera', 'uva', 'maçã')

const numeros = [9, 2, 5]

Acessando elementos pela posição do array:

const primeiroItem = lista[0]

console.log(primeiroItem) // pera

Tamanho de array:

const tamanho = numeros.length

console.log(tamanho) // 3

Atribuição via desestruturação

const [primeiro, segundo, terceiro] = lista

console.log(primeiro) // pera
console.log(segundo) // uva
console.log(terceiro) // maçã

---

Objetos

Objetos em JavaScript, assim como em muitas outras linguagens de programação, podem ser comparados com objetos na vida real. O conceito de objetos em JavaScript pode ser entendido com objetos tangíveis da vida real.

Declaração de objetos

const objeto = new Object()
objeto.nome = 'cadeira'
objeto.tipo = 'madeira'
objeto.peso = 7

const pokemon = {
  nome: 'Pikachu',
  tipo: 'elétrico',
  altura: 40.6,
}

Acessando o valor de uma propriedade do objeto.

console.log(pokemon.nome) // Pikachu

Declarando uma variável de mesmo nome que a propriedade.

const nome = pokemon.nome
const tipo = pokemon.tipo
const altura = pokemon.altura

console.log(nome) // Pikachu
console.log(tipo) // elétrico
console.log(altura) // 40.6

Atribuição via desestruturação

const { nome, tipo, altura } = pokemon

console.log(nome) // Pikachu
console.log(tipo) // elétrico
console.log(altura) // 40.6

MDN: destructuring assignment

---

Date

Cria uma instância JavaScript de Date que representa um único momento no tempo. Objetos Date são baseados no valor de tempo que é o número de milisegundos desde 1º de Janeiro de 1970 (UTC).

const hoje = new Date()

console.log(hoje) // 2020-09-05T10:56:49.693Z

const dia = hoje.getDate()
const mes = hoje.getMonth()
const ano = hoje.getFullYear()

console.log(dia, mes, ano) // 5 8 2020 🤔

const dataFormatada = hoje.toLocaleDateString('pt-BR')
console.log(dataFormatada) // 05/09/2020

const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
const dataLonga = hoje.toLocaleDateString('pt-BR', options)
console.log(dataLonga) // sábado, 5 de setembro de 2020

MDN: date, toLocaleDateString

---

Classes

Uma classe em JavaScript funciona como um molde para criar objetos. Podemos definir as propriedades e os métodos que os objetos criados terão a partir dela. É como se fosse uma “planta” de construção para o objeto.

class Pessoa {
  constructor(nome, idade, andando = false, caminhada = 0) {
    this.nome = nome
    this.idade = idade
    this.andando = andando
    this.caminhada = caminhada
  }

  andar(metros) {
    this.andando = true
    this.caminhada += metros
  }
}

const professora = new Pessoa('Cintia', 35)
console.log(professora) // Pessoa { nome: 'Cintia', idade: 35, andando = false, caminhada: 0 }

professora.andar(200)
console.log(professora) // Pessoa { nome: 'Cintia', idade: 35, andando = true, caminhada: 200 }

MDN: class

---

Bora estudar mais?

• if...else, ternary
• Switch Case
• Date
• Classes
• Objetos