JavaScript Fundamentos - Tipos Primitivos e Operadores

Vamos entender os tipos de dados fornecidos pela JS e os métodos que ajudam em sua manipulação.

Os Tipos primitivos são: Number | Boolean | String | Null | Undefined e Symbol.

Vamos passar por cada um desses tipos e explorar cada método que utilizamos quando queremos realizar algum tipo de manipulação, conhecendo também os tipos de operadores da linguagem.

Vamos lá.

Number

O tipo Number ele é primitivo, imutável e é representado internamente pelo padrão IEEE 754 de 64bits.

• Suporte a decimal, octal, hexadecimal e binário.

new Number(10); // Decimal
new Number(08); // octal
new Number(0xff); // Hexadecimal
new Number(0b11); // binário

// Métodos auxiliares

// fixar quantidade de casa decimais após a virgula
(10).toFixed(2); => '10.00'

// Quantidade algarismo que deve ser representado.
(20).toPrecision(10); => '20.00000000'

Conversão do tipo number

Forma mas simples de conversão de um número é chamando a função construtora Number.

Number("10"); => 10
Number("0b10"); => 2
Number("0o10"); => 8
Number("0xFF"); => 255

Number("JavaScript"); // => NaN

• Conversão com operadores numérico - Cuidado ! Nem todos operadores realiza a conversão para número.

// converte a string "10" para o inteiro 10.
~~"10";
+"10";
"10" - 0;
"10" * 1;
"10" / 1;

• Utilizando o toString() para converter número em outras bases.

(0xa).toString(10); // => '10'
(0b1010).toString(16); // => 'a'
(010).toString(2); // => '1000'
(10).toString(8); // => '12'

• Utilizando o parseInt(), caso não seja decimal deve se informa de qual base o número estar.

parseInt("10", 10); // => 10
parseInt("9.9", 10); // => 9
parseInt("A", 16); // => 10
parseInt("11", 2); // => 3

• Utilizando o parseFloat() - converte apenas números decimais.

parseFloat("10"); // => 10
parseFloat("2.5"); // => 2.5
parseFloat("0xFF"); // => 0  (ignora as letras)
parseFloat("0b10"); // => 0   (ignora as letras)

• IEE754 - Define o padrão de numeração em 64bits / Ocasiona anormalidade em determinadas situações

0.1 + 0.3; // => 0.30000000000000004
666.7 - 666.6; // => 0.10000000000002274
33.33 * 3; // => 99.89999999999999
12.2 / 0.1; // => 121.99999999999999

• Infinity - positivo ou negativo | é retornado quando uma operação ultrapassa os limites do tipo Number.

1 / 0; // => Infinity
Math.pow(10, 1000); // => Infinity
Number.MAX_VALUE * 2; // => Infinity
-Number.MAX_VALUE * 2; // => -Infinity
Math.log(0); // => -Infinity

• Vamos conhecer os operadores da linguagem são eles:

• Aritméticos + - / * %
  

2 + 2; // => 4
5 - 3; // => 2
4 * 5; // => 20
9 / 3; // => 3
7 % 2; // => 1

• Atribuição += -= *= /= %=

let resultado = 10;

resultado += 2; // => 12
resultado -= 2; // => 8
resultado *= 2; // => 20
resultado /= 2; // => 5
resultado %= 2; // => 0

• Incremento e Decremento ++ | --

resultado = 10;
resultado--; // => 9
resultado++; // => 10

• - Operadores binários (bit a bit) |(or) &(and) ^(xor) ~(not) <<(shift - deslocamento de bits)>> >>>(shift com mudança de sinal) - operações são realizada com 32bits.

4 | 3; // => 7 ( Operação resultante de comparação em escala binária)
(4).toString(2).padStart(32, 0); // convertendo o valor em binário com 32bits
(3).toString(2).padStart(32, 0); // é feita a comparação bit a bit do operador

3 & 1; // => 1
5 ^ 2; // => 7
~2; // => -3
4 << 2; // => 16
128 >> 1; // => 64
-2 >>> 1; // => 2147483647

Boolean

O tipo Boolean é primitivo , imutável e representado pelas palavras true e false.

typeof true; // => boolean
typeof false; // => boolean

new Boolean(true); // => [Boolean: false]
new Boolean(false); // => [Boolean: false]

typeof new Boolean(false); // => object

// Exemplos

let condition = true;

if (condition) {
  console.log("The condition is true");
} else {
  console.log("The condition is false");
}

// Exemplo 2

let condition = new Boolean(true);

if (condition) {
  console.log("The condition is true");
} else {
  console.log("The condition is false");
}

// Ambas entra no true devido coerção de tipo

• Warning - Cuidado com a coerção de tipo, acontece quando um tipo de dados é utilizado em um contexto onde é convertido de forma implícita ou explicita.

// Conversões pra false

!!0; // => false
!!NaN; // => false
!!""; // => false
!!false; // => false
!!undefined; // => false
!!null; // => false

// Conversões pra true ( todo o resto)

!!-10; // => true
!!"JavaScript"; // => true
!!{}; // => true
!![]; // => true
!!"/JavaScript/"; // => true
!!new Date(); // => true
!!function () {}; // => true

• Operadores de comparação == , ===, !=, !==, <, >, <=, >=

1 == 2; // => false
10 === 10; // => true
"a" != "b"; // => true
3 !== 2; // => true
10 > 11; // => false
5 >= 5; // => true
"z" < "x"; // => false
"c" <= "c"; // => true

• Coerção de tipos (type coercion) é o processo de conversão de um valor de um tipo, para outro (como a conversão de uma string para um número, um objeto para um booleano e etc). Qualquer tipo, seja primitivo ou um objeto, é um sujeito válido para coerção de tipo.

Para comparar o tipo de dados além da coerção se utiliza operador === ou !== nesse caso é comparado também o seu tipo alem do valor e/ou coerção.

// Coerção de tipo para um valor booleano

0 == ""; // => true
0 == "0"; // => true
false == undefined; // => false
false == null; // => false
null == undefined; // => true
1 == true; // => true
0 == false; // => true
0 == "\n"; // => true

• Operadores lógicos || ( ou ) e && ( e )

0 || 2; // => 2
1 || 2; // => 1
1 && 2; // => 2
0 && 2; // => 0

String

O tipo String é primitivo, imutável e é representado internamente pelo padrão Unicode, codificado em UTF-16.

Declarado com aspas simples, aspas duplas e acento grave (crase).

// Declaração

"JavaScript";
"JavaScript";
`JavaScript`;

// Declaração com Função Construtora

new String("javaScript"); // => [String: 'javaScript']
new String("javaScript"); // => [String: 'javaScript']
new String("javaScript"); // => [String: 'javaScript']

• Template literal é uma forma de declarar uma String que permite a interpolação de expressões.

//Exemplo

let host = "localhost";
let port = "3000";
let resource = "users";
let url = "https://" + host + ":" + port + "/" + resource;

// Com template literal

url = `https:// ${host}:${port}/${resource} `;

// Outra característica é poder escrever string com multi linha, sem necessidade de caracteres especiais ( + \ \n).

let monthsOfYear = ` 0 - Jan
1 - Feb
2 - Mar
3 - Apr
4 - May
5 - Jun
6 - Jul
7 - Aug
8 - Set
9 - Oct
10 - Nov
11 - Dec`;

String API

O tipo string possui uma API com diversos métodos que irão nos ajudar na sua manipulação.

Vamos conhecer:

• length - Retorna o tamanho da String

"JavaScript".length; // => 10

• indexOf - Retorna a primeira posição encontrada do caractere passado por parâmetro.

"PHP".indexOf("P"); // => 0

• lastIndexOf - Retorna a ultima posição encontrada do caractere passado por parâmetro

"PHP".lastIndexOf("P"); // => 2

• toUpperCase - Retorna uma nova string convertendo as letras em maiúsculas.

"cobol".toUppercase(); // => "CABOL"

• toLowerCase - retorna uma nova string convertendo as letras em minúscula.

"ALGOL".toLowerCase(); // => 'algol'

• charAt - Retorna o caractere na posição por parâmetro.

"JavaScript".charAt(1); // => 'a'

• charCodeAt - Retorna o código com base na posição passado por parâmetro

"JavaScript".charCodeAt(1); // => 97

• fromCharCode - Retorna um caractere com base no código passado por parâmentro.

String.fromCharCode(97); // => 'a'

• includes - Retorna verdadeiro se a String contém a String passada por parâmetro.

"JavaScript".includes("Java"); // => true

• startsWith - Retorna verdadeiro se a String inicia com a String passada por parâmetro.

"JavaScript ES6".startsWith("JavaScript"); // => true

• endsWith - Retorna verdadeiro se a String termina com a String passada por parâmetro

"JavaScript ES6".endsWith("ES6"); // => true

• localeCompare - Retorna -1 se a String passada por parâmetro for maior, 0 se for igual e 1 se for menor ( Levando em consideração o charCode das string, ou seja, caracteres com assentos tem pesos diferentes ).

"javascript".localeCompare("javascript1"); // => -1
"javascript".localeCompare("javascript"); // => 0
"javascript".localeCompare("java"); // => 1

• Match - Retorna partes da String (em um array) com base na RegExp passada por parâmetro.

"C++".match(/\+/g); // => [ '+', '+' ]

• Search - Retorna o index da primeira posição encontrada com base na RegExp passada por parâmetro.

"Java".search(/a/); // => 1 (index)

• Replace - Retorna uma nova string com a substituição de parte ou total baseado no RegExp/string passado no primeiro parâmetro pelo valor informado no segundo parâmetro.

"JavaScript".replace("Java", "ECMA"); // => "ECMAScript"

• slice - Retorna um parte da string que esta invocando a função, iniciando na posição passada no primeiro parâmetro ate a posição final passado no segundo parâmetro, caso não tenha segundo irá até o final da string.

"javaScript".slice(3, 8); // => 'aScri' ( não inclui a posição final)

"JavaScript".slice(4); // => 'Script'

• split - Retorna um array contendo o resultado da divisão da String original de acordo com critério passado no parâmetro.

"C;C++;C#;Ruby".split(";"); // => [ 'C','C++', 'C#', 'Ruby' ]

• substring - Similar ao slice, não aceita valores negativos como parâmetro e permite a inversão dos .

"JavaScript".substring(0, 4); // => "Java"

• concat - Retorna uma nova string resultante da concatenação da que esta invocando a função e da outra passada por parâmetro;

"Jorge".concat(" Nascimento"); // => 'Jorge Nascimento'

• padStart - Completa a string com caracteres no inicio

"10".padStart(4, 0); // => "0010"

• padEnd - Completa a string com caracteres no fim.

"10".padEnd(4, 0); // => "1000"

• repeat - repete um caractere em x vezes informando no parâmetro.

"C".concat("+".repeat(2)); // => "C++"

• trim - Elimina espaços em branco no inicio e no fim

" Self ".trim(); // => 'Self'

• trimLeft - Elimina espaços em branco no inicio.

" C#".trimLeft(); // => "C#"

• trimRight - Elimina espaços no fim.

"Java ".trimRight(); // => "Java"

Null e Undefined

O valor undefined é utilizado quando uma variável não possui um valor. Já o null é utilizado quando se quer intencionalmente dizer que há uma ausência de qualquer valor para uma variável ou objeto, quando tentamos acessar uma chave de objeto que não existe ela retorna undefined.

const book = {
  title: "JavaScript",
  author: "Nascimento",
};

book.pages; // ==> undefined
book.publisher = null;

Não utilizar underfined ou null para apaga uma propriedade de objeto, você pode utilizar a palavra delete para remover propriedade de objetos.

Symbol

O tipo Symbol é primitivo, único e imutável, atuando como identificador único.

Symbol("a");
Symbol("b");
Symbol("c");

Symbol("d") === Symbol("d"); // => false

Por hoje é isso pessoal, conseguimos ter uma boa noção dos tipos primitivos e como manipula-los, nos próximo post iremos entrar nos principais tipos objetos e as API's fornecidas para sua manipulação.

Obrigado por ler.

** Exemplos são baseado no curso JavaScript - MasterClass do Rodrigo Branas.

• Links de referências e saiba mais.
• - Tipos Primitivos

_{Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.}

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Linkedin | Github