Como já tinha comentado em outro post, esse blog foi criado para documentar e compartilhar meu estudo sobre tecnologias front end. Essa semana eu retomei os estudos sobre Javascript(JS) e decidi começar do básico, pois quero entender bem sobre os princípios da linguagem. Inicialmente eu estudei sobre os tipos primitivos da linguagem e resolvi compartilhar o “pequeno” resumo que fiz durante meus estudos, é algo bem introdutório, mas é um pouco do que entendi sobre o assunto.

Exemplo:
Linguagem C

//Declaração de variaves em C
int numeroDeHoras = 0;           
float precoDoQuilo = 10.53;   
double  taxaDoDolar = 1.8;
char nomeDoCliente[30] = "Fulano";

Javascript

//Declaração de variaves em Javascript
var numeroDeHoras = 0;           
var precoDoQuilo = 10.53;
var taxaDoDolar = 1.8;
var nomeDoCliente = "Fulano";

Ao criarmos uma variável no Javascript, ela pode assumir valores de diversos tipos. Entre os tipos disponíveis na linguagem os principais são [number, string, boolean, object, function e undefined].

Number

Ao contrário de algumas linguagens, o JS não define diferentes tipos de números, como interger, float, long e etc. Temos apenas dois tipos, os inteiros e os de ponto flutuante.

Exemplo:

var num1 = 120; //Esse é um numero inteiro(int)
var num2 = 12.01; //Esse é um numero de ponto flutuante(float)

Os números inteiros são preciso até 15 dígitos

Exemplo:

var num1 = 999999999999999;   // num1 vai ser 999999999999999
var num2 = 9999999999999999;  // num2 vai ser 10000000000000000.

Os números de ponto flutuante aceitam precisamente até 17 casas decimais

Exemplo:

var num1 = 0.1234567891234568; // 0.1234567891234568
var num2 = 0.123456789123455555588;  // 0.12345678912345555

Podemos utilizar os números para fazer as operações básicas (soma, subtração, divisão, multiplicação) e também podemos fazer cálculos mais complexos, como raiz quadrada, cosseno, seno e diversos tipos de operações utilizando o Math do javascript.

Quando tratamos de aritmética podemos ter 3 resultados principais:

Número inteiro ou com casas decimais

Exemplo:

num1 = 0.5 - 0.5 ; // 0
num2 = 2 - 1; // 1
num1 = 2 * 3; // 6
num2 = 2 / 2; // 1

Existem casos em que a operação não é precisa:

num1 = 0.2 + 0.1;  // 0.30000000000000004

num1 = 'Letra' + 1 // Letra1
num2 = 2 + 'numero' // 2numero

'O resultado é igual a' + 10 + 10  // O resultado é igual a1010

num1 = 10 + 20 + 'numero' // 30numero

num1 = 3 / 0 // Infinity
num2 = -3 / 0 // -Infinity

NaN (Not a Number - Não é um número)

O NaN é utilizado para representar o resultado de uma tentativa de operação numérica, mas que não é um número.

Exemplo:

num1 =	2 * 'string'; // NaN
num2 =	2 - 'string'; // NaN
num1 =	2 / 'String'; // NaN
num2 = 0 / 0; //NaN

NaN não é igual a NaN

NaN == NaN //Falso

Isso acontece, pois o NaN é o resultado de uma operação que não “faz sentido”, logo o resultado de uma operação “sem sentido” não é igual ao resultado de outra operação “sem sentido”.

Números em forma de strings:

O JS faz conversão de tipos e em todos os casos que existir duas ou mais strings contendo números ele vai tentar fazer a conversão antes da operação.
Exemplo:

num1 = '10' - '10'  // 0
num2 = '10' * '10' // 100
num1 = '10' / '10' // 1
num2 = '10' + '10' // '1010'

Apenas no caso do sinal de + que a conversão não acontece, pois quando existe uma string esse sinal é utilizado para concatenação.

Declarando números

Números podem ser declarados de duas formas, da forma literal ou na forma de objetos.
Forma literal: var num = 10
Forma de objeto: var num = new Number(10)

Aparentemente, ambas as formas resultam em um número, porém elas tem tipos diferentes. Com a forma literal nós temos um tipo number e com a forma de objetos nós temos um tipo object.

Exemplo:

var num1 = 2;
var num2 = new Number(2);
typeof(num1); // number
typeof(num2); // object

Se compararmos num1 a num2 teremos o seguinte resultado.

num1 == num2; // verdadeiro, pois só verificamos o valor
num1 === num2; // falso, pois possuem o mesmo valor, mas são de tipos diferentes

Também temos um problema ao comparar dois números criados em forma de objetos, pois a comparação entre dois objetos sempre retorna falso.

var num1 = new Number(2);
var num2 = new Number(2);
num1 == num2 // falso

O recomendado é criar números da forma literal, pois eles são do tipo number e possuem a execução mais veloz.

String

String é um tipo de dado, imutável, do JS que pode ser usado para armazenar e manipular caracteres e textos, podendo conter 0 ou mais caracteres.

Uma string pode ser declarada das seguintes formas:

var nome = 'Cristiano';
var nome = String('Cristiano');
var nome = new String('Cristiano');

As strings podem ser declaradas com aspas “string” ou apóstrofos(aspas simples) ‘string’, porém não podemos iniciar com um tipo e terminar com outro.

//Errado
var nome = "string';

Podemos também utilizar aspas ou apóstrofos dentro de uma string. Quando precisamos usar aspas dentro da string nós declaramos a mesma com apóstrofos e vice e versa.

var frase = 'Segundo fulano: "A frase é boa"';

Existe outra forma de utilizar aspas dentro de uma string, que é através do escape de caracteres com a \(barra).

Alguns escapes:

var nome = "Cris\""; // \"  (Cris")
var nome = "Cris\'"; // \' (Cris') 
var nome = "Cris\\"; // \\ (Cris\\)
var nome = "Cri\ns"; // \n (Cr
is)
var nome = "Cris\ts"; // \t (Cri		s)

Juntar strings (Concatenar)

O ato de juntar duas strings é o que chamamos de concatenação, uma das formas de fazer isso é através do uso do sinal de +.

Exemplo:

var nome = 'Cristiano';
var sobrenome = "Gonçalves";
nome + sobrenome; // CristianoGonçalves
nome + "Estudante" // CristianoEstudante

O resultado ficou junto porque espaço em branco também é um caractere.

nome + " " + sobrenome; //Cristiano Gonçalves

Algumas operações matemáticas podem ser feitas durante a concatenação:

Exemplo:

nome + 2 + 2 + sobrenome; // Cristiano22Gonçalves

Para obtermos a soma antes de concatenar poderíamos utilizar os parênteses

nome + (2 + 2) + nome; // Cristiano4Gonçalves

Strings como objetos

Declarar strings em forma objetos pode nos dá problemos assim como declarar números em forma de objetos, pois o valor será uma string e o tipo será um objeto, logo podemos ter algumas complicações.

Exemplo:

var nome = new String('Cris').
var nome2 = 'Cris';

nome == nome2;   // Verdadeiro
nome === nome2;  // Falso

Uma alternativa é converter um objeto string em uma string utilizando o método valueOf()

nome === nome2.valueOf(); // Verdadeiro
typeof(nome2); // Object
typeof(nome2.valueOf()); // String

Como uma string é imutável, ela continua sendo um objeto, e apenas nessa instrução é que conseguimos extrair um tipo string através de um objeto.

typeof(nome2); // Object

A única forma de mudar uma string é atribuindo seu valor novamente.

nome2 = nome2.valueOf();
typeof(nome2); // String

API String

Existe a API da string onde podemos fazer diversas operações com uma string, como:

nome.length; //Verificar seu tamanho
nome.charAt(1); //Encontrar um caractere em uma determinada posição
nome.indexOf('i'); //Encontrar a posição de um caractere

Boolean

Esse é um tipo de dado lógico que pode assumir dois valores, true e false (verdadeiro e falso). Ele pode aparecer de diversas formas, uma das mais comuns é quando fazemos alguma operação de comparação.

Exemplo:

4 > 1 ; // (4 é maior que 1) Verdadeiro
4 == 2; //(4 é igual a 2) Falso

Podemos verificar o valor lógico de alguns dados utilizando o !!. Essa dupla exclamação quer dizer que estamos negando algo duas vezes, logo acessamos o seu valor lógico. Isso quer dizer que, se temos uma sentenssa verdadeira e a negamos (invertemos seu valor lógico), passamos a ter uma sentenssa falso, agora se nergarmos outra vez vamos ter algo verdadeiro novamente.

Exemplo:

var num1 = true; //Verdadeiro
num1 = !num1; //Antes era verdadeiro e agora é Falso
num1 = !num1; //Antes era Falso e agora é verdadeiro novamente

//Essa é uma forma simplificada de realizar a mesma operação feita anteriormente
var num1 = true; //Verdadeiro
num1 = !!num1; //Verdadeiro


//Esses são alguns valores falsos do JS. Outros valores falsos podem ser criados com comparações.
var num1 = !!false; //Falso é falso
var num1 = !!''; //String vazia é falso
var num1 = !!0; //Zero é falso
var num1 = !!null; //Null é falso
var num1 = !!undefined; //Undefined é falso
var num1 = !!NaN; //NaN é falso

Uma aplicação: Vamos supor que presisamos executar um código caso um determinado número seja diferente de zero. O comum seria verificar se o número é diferente de zero, porém podemos passar apenas o número como parâmetro para o if. E se o número for zero, ele tem o valor falso,e sabemos que o if só executa sentessas verdadeiras. Veja o código.

// Esse seria a primeira coisa que pensariamos em fazer.
If(num != 0) {
 console.log('Zero é falso, por isso essa instrução não será executada');

}

// Essa é uma forma em que usamos do poder da linguagem e diminuimos um pouco a escrita.

If(num) {
 console.log('Instrução executada, se o número não for zero, pois qualquer número diferente de zero tem um valor verdadeiro.');

}

Object

Os objetos são um tipo de dado do JS que nos permite armazenar diversos tipos de dados em uma única variável.
Por exemplo, se temos que realizar o cadastro de uma pessoa e pegar nome, idade e sexo. Poderíamos criar uma variável para cada um dos dados. Porém podemos simplificar esse processo criando apenas o objeto pessoa.

Exemplo:

var pessoa = { nome: 'Cristiano', idade: 22, sexo: 'M'};
var pessoa = new Object();

Os objetos são compostos por uma chave, dois pontos e logo depois o valor para essa chave. Cada chave-valor é separada por uma vírgula.

Podemos acessar as propriedades de cada objeto de várias maneiras.

pessoa.nome; // Cristiano
pessoa['nome']; // Cristiano

Essa segunda forma é utilizada para dados dinâmicos ou compostos, como “cor dos olhos”

Também podemos acessar as propriedades através de um loop.

for(var item in pessoa){
console.log(pessoa[item]);
//Cris
}

É possível adicionar propriedades depois que o objeto for criado.

pessoa.bairro = 'Barreiro';
pessoa['cidade'] = 'Alagoinhas';

Ou podemos deletar

delete pessoa.idade;

Exemplo:

var meuObjeto = {
	numeros: [1,2,3,4],
	outrosObjetos: {objetoUm: 'Um', objetoDois: 2},
	funcao: function(){
		return 'Item de um objeto';
	}
}

Function

Uma função é um bloco de código que executa comandos dentro dos {}

Existem duas formas básicas de criar uma função.

A function declaration:

function soma (a, b) {
	return a + b;
}

E a function expression

var soma = function soma (a, b) {
	return a + b;
}
// Ou
var soma = function (a, b) {
	return a+b;
}

A principal diferença entre as duas formas é que com a function declaration podemos invocar a função antes mesmo de declarar, pois o JS carrega as funções antes de interpretar o documento.

// Isso é possível
soma();

function soma (a, b) {
	return a + b;
}

// Isso não é possível
soma();

var soma = function  (a, b) {
	return a + b;
}

As funções do JS são de primeira classe, isso quer dizer que elas podem ser atribuídas a variáveis, ser passadas como parâmetros e podem ser retornadas por outras funções.

// Uma passagem de argumentos comum.
soma(1,2);

function ola(){
	return 'ola';
}

// Uma passagem de funções como argumentos.
soma(ola);

Undefined

Basicamente, undefined é um tipo de dado que carrega o valor undefined, quer quer dizer indefinido.
Undefined também é uma propriedade do objeto global do javascript e carrega o valor de undefined. Porém ele não é uma palavra reservada, isso quer dizer que até podemos usa-la para identificar variáveis, desde que não seja no escopo global.

Um exemplo simples de como podemos receber um valor undefined é quando declaramos uma variável, mas não a iniciamos.

var um;
typeof(um) //undefined

Null e undefined são a mesma coisa?

Apesar da expressão null == undefined retornar true, os dois tem significados diferentes.
O undefined quer dizer que um valor ainda não foi definido, já o null quer dizer que o valor de algo é nulo. Vale lembrar que undefined é do tipo undefined, enquanto null é do tipo object.

Finalizando

Esse foi um post com o resumo do que entendi até agora sobre os tipos primitivos do JS, provavelmente algo não foi bem explicado e ficou confuso, se isso aconteceu só deixar um comentário pra que eu possa estudar mais e tentar explicar melhor.

Minhas referências foram:
Canal do Rodrigo Branas
W3school
Documentação da Mozila

Obrigado por ler até aqui!! Se curtiu esse post compartilha com seus amigos e deixa um comentário caso tenha alguma sugestão do que posso melhorar.