Publicado em: 17/03/2025

Lógica de Programação


Neste aulão completo, vamos explorar desde conceitos fundamentais até tópicos avançados como programação assíncrona com Promises.

Configuração Inicial

Para começar, você precisará:

  • Node.js instalado
  • VS Code como editor
  • Extensão Code Runner para executar os códigos

Ou pode executar diretamente no terminal com: node nome_do_arquivo.js

Variáveis e Tipos de Dados

Principais tipos em JavaScript:

  • undefined - quando não atribuímos valor
  • number - para valores numéricos
  • string - para textos
  • boolean - true/false
  • object - para estruturas complexas
  • null - valor nulo explícito

Declaração com const (constante) ou let (mutável).

Operadores

Conheça os principais operadores:

  • Matemáticos: +, -, *, /, %, **
  • Relacionais: ==, ===, !=, !==, >, <, >=, <=
  • Lógicos: && (e), || (ou), ! (não)

Importante: == compara valores, === compara valores e tipos.

Estruturas Condicionais

Controle o fluxo do programa:

1if (condição) { 
2  // código se verdadeiro
3} else if (outraCondição) {
4  // código alternativo
5} else {
6  // código padrão
7}

Ou com switch para múltiplos casos:

1switch(variavel) {
2  case valor1:
3    // código
4    break;
5  case valor2:
6    // código
7    break;
8}

Loops

Para repetir ações:

For - quando sabemos quantas repetições:

1for(let i = 0; i < 10; i++) {
2  console.log(i);
3}

While - quando não sabemos quantas repetições:

1let j = 0;
2while(j < 10) {
3  console.log(j);
4  j += 2;
5}

Funções

Blocos de código reutilizáveis:

1function soma(a, b) { 
2  return a + b;
3}
4// Arrow function moderna
5const subtracao = (a, b) => a - b;

Funções podem conter variáveis, outras funções e retornar valores.

Objetos e Arrays

Objetos - coleção de propriedades:

1const pessoa = {
2  nome: "João",
3  idade: 30,
4  profissao: "Dev"
5};

Arrays - listas indexadas:

1const numeros = [1, 2, 3];
2console.log(numeros[0]); // 1

Programação Assíncrona

Para operações que demoram:

1// Callback simples
2setTimeout(() => {
3  console.log("Executado após 2s");
4}, 2000);

Promises - promessa de resultado:

1const promessa = new Promise((resolve, reject) => {
2  setTimeout(() => resolve("Sucesso!"), 1000);
3});
4promessa
5  .then(res => console.log(res))
6  .catch(err => console.error(err));

Async/Await

Sintaxe moderna para Promises:

1async function buscarDados() {
2  try {
3    const resposta = await fetch("url-da-api");
4    const dados = await resposta.json();
5    console.log(dados);
6  } catch (erro) {
7    console.error(erro);
8  }
9}

O await pausa a execução até a Promise resolver.

Considerações Finais

Dominar lógica de programação é essencial porque:

  • É a base para qualquer linguagem
  • Melhora sua capacidade de resolver problemas
  • Permite escrever códigos mais eficientes
  • Facilita a aprendizagem de novos conceitos

Pratique regularmente com desafios reais para solidificar seu conhecimento.

Exploração Adicional

Agora que você tem uma boa base, que tal explorar mais conteúdos incríveis? Não perca os vídeos abaixo, que vão te ajudar a expandir ainda mais seus conhecimentos:

Explore, aprenda e continue sua jornada no mundo da programação!

Fernando Cunha
Artigo deFernando Cunha

Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.

últimos vídeos

veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN
play

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Autor deste artigo
Fernando Cunha17/03/2025
Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN
play

Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Autor deste artigo
Fernando Cunha17/03/2025
Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN
play

Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.

Autor deste artigo
Fernando Cunha17/03/2025