O quanto é suficiente para aprender JavaScript?

A linguagem javascript tem muitos conceitos que podem levar algum tempo para aprender, às vezes meses ou anos. E, mesmo assim, pode não estar apto o suficiente.

Para ser sincero, codifico em javascript há pouco tempo e mesmo não sabendo tanto, consigo desenvolver algumas coisas interessantes. Com isso, nota-se que a boa notícia é que você não precisará aprender tudo para começar a aprender e desenvolver. E, ainda, você poderá aprender mais e mais sobre os conceitos e princípios gradativamente, sendo que o importante é ter foco e constância.

Para começar, abaixo estão alguns tópicos muito importantes para obter um aprendizado satisfatório sobre a linguagem, então quando os vir em seus estudos, os trate com todo o carinho que merecem. Caso se assuste com algum termo, não se preocupe, tudo tem seu tempo, só vá com calma.

Outra questão importante a se mencionar é que ter um conhecimento sólido em lógica de programação irá ajudar muito no seu desenvolvimento.

var, let e const:

Eles são usados para declarar variáveis em javascript. var e let podem receber valores reatribuídos enquanto const é usado para criar variáveis constantes (que não serão alteradas durante a execução do código). No javascript moderno, é recomendado usar const por padrão e apenas let quando você precisar reatribuir explicitamente uma variável, enquanto o var deve ser evitado. Isso ajuda a escrever um código mais sustentável e previsível.

Tipos de dados utilizados no JavaScript:

Compreender os diferentes tipos de dados deve ser um dos conceitos mais importantes que você precisa entender bem. Quase todas as linhas de código que você escreverá estarão interagindo com esses tipos de dados. Ao declarar variáveis, manipular dados ou mesmo durante a depuração, é bom entendê-las e saber quando usá-las.

undefined - Uma variável declarada sem receber um valor assume o valor indefinido por padrão. undefined é usado para representar a ausência de um valor.

null - É atribuído pelo programador para representar a ausência intencional de um valor.

boolean - Possui apenas dois valores possíveis, verdadeiro ou falso (true/false).

string - Representa uma sequência de caracteres usando aspas. Exemplo: const veiculo = “carro”;.

number - podem ser números inteiros ou decimais.

symbol e bigint – Nunca usei, mas podem ser úteis em alguns casos. symbols são frequentemente usados para adicionar chaves de propriedade exclusivas a um objeto. bigint é usado para representar grandes valores numéricos.

objects - Eles armazenam dados em pares de chave e valor.

arrays e functions - Não são necessariamente tipos, mas objetos especiais. Arrays são usadas para armazenar listas de valores, enquanto funções/functions são usadas para escrever partes reutilizáveis de código/lógica.

Entender esses tipos de dados é o primeiro passo para dominar o javascript.

Métodos de array em JavaScript:

Ao começar a desenvolver aplicativos, você trabalhará principalmente com listas de dados. Conhecer e compreender os diferentes métodos de array é essencial para manipular e tratar dados em suas aplicações. Alguns dos métodos que podem ser, e certamente serão úteis são

.map - Geralmente usado para exibir uma lista de dados correspondentes. O método map invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como o resultado.

.filter - O método cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

.find - O método find retorna o valor do primeiro elemento do array que satisfizer a função de teste provida. Caso contrario, undefined é retornado.

.findIndex - Semelhante a .find, apenas retorna o índice (posição) do item em vez do item.

.reduce – Usado para acumular valores em um array. Um bom exemplo poderia ser obter os totais dos itens de um carrinho de compras.

.forEach - Você pode usar esse método para percorrer um array.

.slice - Usado para obter um subarray (uma parte de um array) de acordo com as posições informadas.

.push – Usado quando você deseja adicionar um item a um array.

Embora existam muitos outros métodos de array que valham a pena serem estudados, os citados acima são muito mais usados.

Desestruturação de objetos e arrays (destructuring):

A desestruturação é usada para extrair valores e atribuir-lhes variáveis de uma forma mais legível. O conceito é amplamente utilizado ao acessar e manipular dados.

Exemplo:

const endereco = {
  nomeRua: "Olavo Magalhães",
  numero: 1515,
  bairro: "Araras Verdes"
};
const { nomeRua, numero } = endereco;

Em resumo, e uma característica do JavaScript que permite extrair valores de arrays ou propriedades de objetos de forma mais concisa. Em vez de acessar elementos ou propriedades individualmente, você pode "desestruturar" a estrutura em variáveis separadas, facilitando o trabalho com dados complexos. (OpenAI. GPT-3.5. Modelo de linguagem de inteligência artificial. Disponível em: https://www.openai.com/. Acesso em: 12 de novembro de 2023.)

Spread Operators (...):

O operador spread é muito comum para reagir ao adicionar propriedades a um objeto ou array ou mesmo combinar objetos ou arrays, e então usar o novo valor para atualizar o estado.

Exemplo:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinado = [...array1, ...array2];
console.log(combinado); // Saída: [1, 2, 3, 4, 5, 6]

Funções (Regulares e Arrow Functions)

É necessário entender como criar e trabalhar com funções. As funções são importantes na criação de lógicas que podem ser reutilizadas em vários módulos. Entenda a sintaxe e como passar argumentos em funções regulares e arrow functions; o uso da instrução return em uma função; aprenda a diferença entre eles, a palavra-chave this que só pode ser usada em funções regulares e classes.

O hoisting é um comportamento do JavaScript no qual as declarações de função e variável são movidas para o topo do seu contexto de execução durante a fase de compilação. Isso significa que pode chamar uma função mesmo antes de ela ser declarada no código.

Em funções regulares (não arrow functions), pode-se usar um objeto chamado arguments. Esse objeto contém todos os argumentos passados para a função, independentemente do número de parâmetros definidos na declaração da função.

Exemplo:

function exemplo() {
console.log(arguments);
}

exemplo(1, "dois", true);
// Saída: { '0': 1, '1': 'dois', '2': true }

Mesmo que a função exemplo não tenha parâmetros definidos, você ainda pode acessar os valores passados através do objeto arguments.

Declarações Condicionais:

Permitem que sejam executados diferentes blocos de código com uma condição especificada ser avaliada como verdadeira ou falsa. Eles incluem as instruções: if, else if e else, além da instrução switch case e o operador ternário: const retorno = condição ? verdadeiro : falso;

Acessando e manipulando o DOM:

DOM (Document Object Model) é uma parte crucial do desenvolvimento web em JavaScript. Ele fornece uma forma padronizada de interagir e manipular a estrutura de documentos web, possibilitando a criação de páginas web dinâmicas e interativas. Entender como navegar e manipular o DOM é fundamental para o desenvolvimento front-end.

Módulos JavaScript:

Por fim, é importante aprender sobre módulos em javascript, pois eles são uma forma de organizar o código de funcionalidades relacionadas em arquivos separados. Os módulos ajudam, ainda, a melhorar a manutenção, reutilização e organização do código, permitindo que os desenvolvedores dividam uma grande base de código em partes menores e melhor gerenciáveis. Eles podem ser criados usando as palavras-chave export e usados com a palavra import. No cotidiano profissional, os módulos são largamente utilizados e por isso é de fundamental importância conhecê-los.

Acredito que os conceitos e exemplos elencados acima já são um bom caminho para a aprender javascript. Contudo existem inúmeros conceitos não mencionados, mas não menos importantes que devem ser conhecidos. À medida que você aprende a trabalhar em projetos, também pode aprender mais sobre javascript ao longo do caminho.

O que você acha, o conteúdo acima é suficiente para começar a aprender javascript?

Caso você tenha domínio do javascript e queira contribuir com sua opinião sobre este tópico fique a vontade.

Referências:

MDN Web Docs: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

ChatGPT(Para coisas mais simples): https://chat.openai.com