Rodrigo Vidal F#, C#, CLR / Arquitetura e Desenvolvimento de Software

JavaScript – É ou não é igual?

Olá pessoal,

Continuando a série, sobre JS, vamos falar um pouco sobre dois operadores, extremamente simples. Eles são capazes de comparar dois valores e dizer se eles são iguais ou não. Realmente simples não? Provavelmente, você sabe muito bem, como isso funciona na sua linguagem server-side, ao comparar dois valores, dois arrays, ou até mesmo dois objetos. No entanto, olhando o código que já tive a oportunidade de observar nas empresas, percebo que os desenvolvedores não entendem muito bem como isso se dá no JavaScript. Então vamos entender de uma vez por todas, se é ou não é igual.

A primeira coisa a se saber é que Javascript possui dois operadores de igualdade! O que? Dois? É isso mesmo. Você provavelmente utiliza um deles com bastante frequência: O "==". Agora você pode pensar, nossa que obvio. Isso eu já sabia. Mas você realmente sabe como este operador funciona? Você conhece seu irmão menos brincalhão? O "===" ?

Não. Eu não errei o operador acima, realmente são 3 (três) "igual" seguidos. O desconhecimento deste segundo operador é a origem de muitos bugs estarem estourando por ai, sem você realmente entender o porquê, e geralmente não tão simples de entender, principalmente, se seu código não está cobertos por testes. Espera! Testes no Javascript? (Mas isso é tema pra outro post).

Os operadores == e === checam se dois valores são iguais mas com duas definições diferentes de igualdade. Ambos os operadores aceitam operandos de qualquer tipo, e ambos retornam true se os operando forem iguais e false se eles forem diferentes. O operador === é conhecido como operador de igualdade estrita, e checa quando os dois operandos são idênticos, usando uma definição mais estrita. O operador == é conhecido como operador de igualdade, ele checa quando os dois operador são iguais usando uma definição mais relaxada que permite conversões de tipo.

Javascript suporta os operadores =, ==, ===. Podemos lê-los da seguinte forma: "é atribuído para", "é igual a", "é estritamente igual a" respectivamente.

Os operadores != e !== testam para o oposto exato dos operadores == e ===.

Objetos no Javascript são comparados por referência e não por valor. Um objeto é igual a ele mesmo, mas diferente de qualquer outro objeto. Se dois objetos distintos tem o mesmo numero de propriedades, com os mesmo nomes e mesmo valores eles ainda assim não são iguais. Dois arrays com os mesmo elementos, na mesma ordem não são iguais uns aos outros.

Como funciona o ===

O operador === avalia os operandos e então os compara, sem realizar conversão de tipo, dada a seguinte regra:

• Se os dois valores são de tipo diferentes, eles não são iguais.
• Se os dois valores são null ou ambos são undefined, eles são iguais.
• Se ambos os valores são o valor booleano true ou ambos são o valor booleano false, eles são iguais
• Se um ou mais valores são NaN, eles não são iguais. O valor NaN não é nunca igual a nenhum valor, incluindo ele mesmo.
• Se ambos os valores são números e tem o mesmo valor, eles são iguais; Se um valor é 0 e o outro -0 eles também são iguais.
• Se ambos os valores são strings e contém exatamente os mesmos 16 bits, nas mesmas posições, então são iguais. Se as strings diferirem em tamanho ou posicionamento, não são iguais.
• Se ambos os valores referirem para o mesmo objeto, array, ou função, eles são iguais. Se referem para objetos diferentes não são iguais, mesmo que ambos tenham propriedades idênticas.

Como funciona o ==

O operador == é menos estrito. Se os valores dos operandos não forem do mesmo tipo, ele tenta algumas conversões de tipo e realiza a comparação novamente.

• Se os valores tem o mesmo tipo, ele testa para igualdade estrita, como descrito acima, Se os valores forem estritamente iguais, eles são iguais.

Se os dois valores não são do mesmo tipo, eles ainda podem ser considerados iguais:

• Se um dos valores é null e o outro é undefined, eles são iguais.
• Se um dos valores é um numero e o outro uma string, converte a string para um numero e tenta realizar a comparação novamente, usando o valor convertido.
• Se um é true, converte para 1 e tenta a comparação novamente, Se um é false, converte para 0 e tenta novamente.
• Se um valor é um objeto e o outro é um numero ou string converte o objeto para um primitivo e tenta novamente a comparação. Um objeto é convertido para um valor primitivo, usando o método toString() ou valueOf().
• Qualquer outra combinação de valores não são iguais.

Ufa! Não tão simples não é mesmo?

Segue alguns exemplos práticos que tenta permear algumas das regras acima

// Operador === 

1 === "1"
>> false

null === null
>> true

undefined === undefined
>> true

true === true
>> true

false === false
>> true

NaN === 1
>> false

NaN === NaN
>> false

2 === 2
>> true

0 === -0
>> true

"js" === " js"
>> false

"js" === "js"
>> true

var o1 = {}
>> undefined

var o2 = {}
>> undefined

o1 === o2
>> false

var r1 = [1,2,3]
var r2 = [1,2,3]
>> undefined

r1 === r2
>> false

r1 === r1
>> true

//Operador ==

null == undefined
>> true

1 == "1"
>> true

1 == true
>> true

0 == false
>> true

var o = {}
>> o == "teste"

Por hoje é só!

Abraço!

JavaScript – Tipos Primitivos e Revelações

Olá pessoal, tudo bem?

Vamos falar hoje sobre sobre a linguagem mandatória para escrever aplicações web. O Javascript. E quem não tem medo do Javascript? Até hoje vejo que muitos desenvolvedores não deram e ainda não dão importância, para esta linguagem. A maioria se limita a criar funções simples com outras funções logo abaixo em um código que beira o impossível de manter. Ou então se limita ao simples uso de plugins jQuery desenvolvidos por terceiros, para colocar uma calendário mais bonitinho na aplicação. Bom, já passou da hora de você saber que javascript é extremamente importante, e você deveria domina-la tanto quanto a linguagem server-side de preferência. Eu realmente espero que você domine está ultima.

Não pretendo aqui contar a historia do JavaScript, ou justificar, a razão de ela possuir alguns problemas comportamentais, o importante é que você aprenda a escrever um bom código e tenha produtividade, sem esbarrar em bugs inesperados.

Bom, precisamos mudar isso, portanto, vamos ver hoje os tipos primitivos.

Qualquer valor que você use pertence a um tipo. Em javascript existem os seguintes tipos primitivos:

1. Number  - incluir números inteiros bem como de ponto flutuante.
2. String - qualquer numero de caracteres, por exemplo "a", "ab", "ab e c".
3. Boolean - assume apenas dois valores, true, ou false.
4. Undefined - quando você tenta acessar uma variável que não existe, você recebe o valor especial undefined. O mesmo acontece para uma variável que ainda não foi inicializada. O javascript na verdade a inicializa para undefined por debaixo dos panos.
5. Null - este é outro tipo especial que somente possui um valor, o valor null. Que significa, ausência de valor, vazio, ou nada. A diferença com undefined é que se uma variável tem o valor null, ela está definida, e só acontece quando é definida para null.

Qualquer valor que não pertença a nenhum dos 5 tipos primitivos listados acima é do tipo Object.
Então basta lembrarmos que em Javascript o tipo dos dados pode ser:

• Primitivo (os 5 listados acima)
• Não-Primitivo (object)

O operador typeof

Se você quer saber o tipo de uma variável ou de um valor, você pode utilizar o operador typeof. Este operador retorna uma string que representa o tipo do dado. Por exemplo o operador pode retornar "number", "string", "boolean", "undefined", "object". Vejamos alguns exemplos:

Números

//Inteiro
var n = 1234;
typeof n;
>> "number"

//Ponto Flutuante
var n = 1.23;
typeof n;
>> "number"

//Octal
var n = 0377;
typeof n;
>> "number"

//Hexa
var n = 0x00;
typeof n;
>> "number"

//Exponent
var n = 1e1;
typeof n;
>> "number"

Existem um valor especial em JavaScript chamado Infinity, veja bem, é um valor especial e não um tipo. Que representa como o próprio nome diz um valor Infinito, ou um valor que o JavaScript não consegue lidar.

typeof Infinity;
>> "number"

Mas como obter este valor especial Infinity, bom, podemos.

1e309;
>> Infinity

6/0;
>> Infinity

Bom, Infinity representa uma numero extremamente grande, e como representar um numero extremamente pequeno?

-1/0
>> -Infinity

Bonito não?

Existe ainda um outro tipo especial, quando estamos lidando com números! O valor NaN! Quem nunca o viu, que atire a primeira pedra

A primeira coisa que eu gosto de deixar claro sobre NaN é que ele é um numero! O que? Ahn? Isso mesmo! Veja..

typeof NaN;
>> "number"

Oh my God! Provavelmente foi isso que você exclamou ao ver este exemplo! Você obtém o valor NaN quando tenta realizar uma operação que seria realizada sobre  inteiros, mas esta operação falha. Ai você obtém como retorno este tipo especial. Simples não?

Vejamos alguns exemplos:

var a = 10 * "JavaScript";
a
>> NaN

1 + 2 + 3 + 4 + NaN;
>> NaN

Perfeito!

Strings

Como vocês sabem strings são uma sequencia de caracteres. Em Javascript qualquer valor colocado entre aspas simples OU duplas é uma considerado uma string. Vejamos alguns exemplos:  

typeof "1";
>> "string" 

typeof "texto";
>> "string" 

typeof 'texto';
>> "string" 

typeof "";
>> "string"

Conversões com String

Quando você usa uma string como uma operando em uma operação aritmética (com exceção da adição, veremos o porquê), a string é convertida em um numero por debaixo dos panos.

var s = 3 * '1';
>> 3
typeof s
>> "integer"

var t = 3 + '1'
>> "31"
typeof t
>> "string"

Como podemos ver caso o operador seja adição (+) o numero 3 é convertido para string por implicitamente e o resultado é uma string "31". Para qualquer outro operador a string seria convertida em um numero como no primeiro exemplo acima.

Caso a conversão implícita falhe o resultado, como não poderia deixar de ser, será NaN.

"texto" * 3;
>> NaN

Boolean

Bom como vimos existem apenas dois valores que percentem ao tipo Boolean, true e false;

var b = true;
typeof b;
>> "boolean"

var b = false;
typeof b;
>> "boolean"

Tudo convertido para boolean é true, com exceção dos seguintes 6 valores:

1. ""
2. null
   
3. undefined
   
4. 0
   
5. NaN
   
6. false

Undefined

Você recebe undefined como valor quando você tenta usar uma variável que não existe ou que ainda não foi inicializada

foo
>> foo is not defined

typeof foo
>> "undefined"

var x;
typeof x;
>> "undefined"

1 + undefined;
>> NaN

1 * undefined;
>> NaN

!!undefined
>> false

"" + undefined
>> "undefined"

Null

O valor null não é atribuído pelo Javascript pode debaixo dos panos, ele somente pode ter vindo de uma inicialização do seu código

var variável = null;
>> null
typeof variável
>> "object"

var i = 1 + null;
>> 1

1*null;
>> 0

Vemos que o valor null é considerado um objeto, o que pode parecer um pouco estranho, ter um objeto que é a representação de nada. Mas veremos mais sobre em futuros posts.

Bom por hoje era isso pessoal, espero ter desmistificado um pouco sobre os tipos primitivos no Javascript.

Abraço!