image

Access unlimited bootcamps and 650+ courses

50
%OFF
Article image
Raja Novaes
Raja Novaes28/06/2022 20:11
Share

Sintaxe e estrutura em JavaScript

  • #JavaScript
  • #Boas práticas


A sintaxe é a regra que os programas são construídos, com eles serão definidos dois tipos de valores, os fixos também conhecidos como literais que podem ser números (com ou sem decimais) e as strings que são textos que devem ser escritos por aspas (dupla ou simples) e os variáveis que usam as palavras-chaves var, let e const e os valores referente a essas variáveis será atribuídas por sinal de igual. 

Além do operador (de atribuição) que usa o sinal de igual (=) que atribui valores, temos os operadores aritméticos soma (+), subtração (-), multiplicação (*) e divisão (/). 

Com a combinação de valores, variáveis e operadores temos uma expressão, esse cálculo é chamado de avaliação. Esses valores podem ser dos mais variados tipos e podem conter número e strings. 

No JS é possível inserir comentário ao longo do código, essas instruções não serão ignoradas e não serão executadas, para isso quando o comentário for apenas em uma linha basta no início da linha do código colocar duas barras (//) ou quando tratar-se de um comentário em bloco ser aberto com barra e asterisco (/*) e fechado com asterisco e barra (*/). O comentário permite explicar alguma situação no código e deixá-lo mais legível. 

Quando nomeamos variáveis, palavras-chaves e funções chamamos de identificadores e para um boa prática devemos respeitar e não usar as palavras reservadas e lembrar que o nome deve começar com uma letra (maiúscula ou minúscula, serão diferenciados) ou com um cifrão ou com um underline (sublinhado “_”). O JS não vai permitir começar nomes com números. 

Para nomear os identificadores desde a década de 70 e 80 passou a ser adotado por convenção de nomeação padrão o uso do Pascal case e do Camel case.  No Camel case a primeira letra é minúscula e a primeira letra de cada nova palavra será maiúscula, já no Pascal case todas as as primeiras letras de cada palavra será maiúscula. 

Ainda temos Snake case que utiliza underline entre cada palavra e o Kebabcase vai usar o hífen entre as palavras, mais importante saber que o JS não aceita usar o hífen pois eles são reservados para os operadores de subtração. 

Já entendemos que é possível identificar as variáveis mais o que é é variável?

Variáveis são contêineres que é possível armazenar dados e possui quatro formas de serem declaradas, sendo usando var, let, const e em branco. 

Até 2015 existia apenas a variável var no JS, após essa data foi incluído as variáveis let e const, que permitiram a leitura do código de forma mais clara e precisa. 

Em regra geral usa-se const e let em blocos no código, sendo a const valores fixos que não pode ser alterado e let valores que podem ser sofrer alteração. Já o var é referenciado a ser usado de forma global em todo o código e também permite alteração no seu valor.

A variável é seguida de um operador de atribuição e o valor a ser atribuído podendo ser números ou strings. Logo para declarar uma variável você deverá identifica-la por exemplo var meuTexto ou let meuTexto, após a declaração é possível atribuir a valor da seguinte maneira: meuTexto = “Artigo”; 

Dessa forma foi criado uma variável com nome meuTexto e que possui como valor “Artigo”. Importante informar que uma instrução poderá ter diversas variáveis que devem ser separadas por vírgulas: let meu texto = “Artigo”, local = “Dio”, autor = “Raja”;  Quando a variável não tiver valor definido, ele poderá ser declarado posteriormente, com isso o valor inicial será não definido (underfined).

Quando falamos em boas práticas ao usar um arquivo externo de script é recomendado declarar todas as variáveis logo no início do script.  As variáveis var podem ser redeclaradas, mas a let e const não poderão. 

Com o uso do operador de soma (+) após o operador de atribuição é possível somar ou concatenar mais de um valor declarado.  Já o cifrão ($) poderá ser usado funções principais em uma biblioteca JavaScript, como por exemplo para selecionar elementos HTML, para melhor comprensão considere a situação em jQuery $(“p”) que irá selecionar todo os elementos p.

Quando se necessita usar alguma palavra reservada como identificador de alguma variável pode ser feito por meio de iniciar essa palavra com um underline (sublinhado). 

Tanto a let como const foram adicionadas ES6 em 2015. A let é considerada um escopo de bloco { } e não podem ser ser redeclaradas no mesmo bloco, mas podem ser acessadas fora do bloco. Mas caso a let seja declarada em outro bloco ela poderá assumir esse novo valor. 

A let deve ser declarada antes do uso, cabe saber que apenas os navegadores Chrome 49 (março de 2016), Edge 12 (julho de 2015), Firefox 44 (janeiro de 2015), Safari 11 (setembro de 2017) e Opera 36 (março de 2016) possuem suporte total a let. 

A let podem ser içadas (hoisting) para o topo do bloco, mas não serão inicializadas, logo somente será usado após ser declarada, já as var podem ser içadas ao topo e podem ser inicializadas a qualquer momento. 

As const possuem a mesma regra de içamento que a let. Então para evitar erros (bugs) e ter um boa prática sempre declare todas as variáveis no início de cada escopo. 

As const também são definidas em escopo de bloco { }, não podem ser redeclaradas e não podem ser atribuídas. Logo as const devem receber um valor assim que são declarada, em regra geral sempre usará const em uma nova matriz, um novo objeto, uma nova função e um novo RegExp. 

Apesar de não poder atribuir um valor ou matriz ou objeto constante é possível alterar o elemento da matriz constante e a as propriedades do objeto constante. 

Vamos entender melhor agora sobre os operadores que acompanham as variáveis, atualmente no JS possui os operadores aritméticos, atribuição, string, comparação,  lógico, type e bitwise. 

Sobre os operadores aritméticos, permitem executar uma operação aritmética típica entre dois ou mais números, os números serão chamados de operandos enquanto a operação entre os números é definida como operador. 

Logo a construção aritmética ficaria da seguinte forma segundo suas nomenclaturas: 2 (operando) + (operador) 2 (operando). Os operadores podem ser de: “+” (adição); “-|” (subtração); “*” (multiplicação); “**” (exponenciação); “/” (divisão); “%” (retorna o resto da divisão); “++” (incremento); “--” (decremento). A ordem para que as operações sejam executadas seguem na precedência (a primeira que será executada a última) a seguir:

  • ++ (incremento pós-fixado/prefixo) - exemplo: i++ ou ++i;
  • - - (decremento pós-fixado/prefixado) - exemplo: i- -  ou - -i;
  • ** (exponenciação) - exemplo: 10 **2;
  • * (multiplicação) - exemplo: 10*5;
  • / (divisão) - exemplo: 10/5;
  • % (restante da divisão) - exemplo: 10%5;
  • + (adição) - exemplo: 10+5; 
  • - (Subtração) - exemplo: 10-5;

Os operadores de atribuição são de extrema importância, com eles é possível atribuir valores às variáveis. O mais comum é sinal de igual (=) que vai atribuir o valor a variável. Mas ainda existe outros operadores de atribuição que são: 

  • += (adição);
  •  -= (subtração);
  •  *= (multiplicação);
  •  /= (divisão);
  •  %= (resto); 
  • **= (exponencial); 
  • <<= (empurra para esquerda); 
  • >>= (empurrar para direita); 
  • >>>= (empurra para à direita não assinado); 
  • &= (retorna um 1 para quando ambos os operandos são uns); 
  • ^= (retorna um 0 para quando ambos os operandos são zeros); 
  • |= (retorna um 0 para os iguais e um 1 para os diferentes);

Importante quando o +(adição) estiver sendo usado com uma string ele será um operador de string, logo será um operador de concatenação. E sempre que tiver um número concatenado com uma string o resultado será uma string. 

 Operadores de comparação são usados em instruções lógicas para determinar a igualdade ou diferente entre variáveis e valores. Logo o resultado será de true ou false: 

  • == (igual a);
  • === (igual valor e igual tipo);
  • != (diferente);
  • !== (diferente valor ou diferente tipo);
  • > (maior que);
  • < (menor que);
  • >= (maior ou igual que);
  • <= (menor ou igual que);

Já os operadores lógicos também usam do conceito de true or false, sendo usados para determinar a lógica entre variáveis ou valores, sendo eles: 

  • && (e - “and”);
  • || (ou - “or”);
  • ! (não - “not”);

É possível criar um operador que irá atribuir um valor a uma variável com base em alguma condição, esses são os operadores condicionais ternário. A sintaxe será variavel = (condição) ? valor1:valor2. 

Dessa forma, foi possível até aqui compreender sobre a sintaxe e a estrutura do JavaScript, ao consolidar esse conhecimento, isso irá facilitar seu processo de aprendizagem e criação de seu código em JS. 

#communityweekchallenge

Share
Comments (4)
Fagner Brilhante
Fagner Brilhante - 29/06/2022 04:09

Tenho treinado bastante a sintaxe!

ES

Enivaldo Souza - 28/06/2022 20:42

Parabéns pelo artigo. Excelente conteúdo.

Luan Ferreira
Luan Ferreira - 28/06/2022 21:29

Conteúdo muito bom!

Roberlande Silva
Roberlande Silva - 28/06/2022 20:37

super útil, valeu