Comparaciones en JavaScript

Clase 12 de 55 • Fundamentos de JavaScript 2018

Resumen

Existen varias maneras de comparar variables u objetos dentro de javascript. En el primer ejemplo le asignamos a X un valor numérico y a Y un string. Para poder compararlos debemos agregar dos signos de igual (==). Esto los convierte al mismo tipo de valor y permite que se puedan comparar.

Cuando realizamos operaciones es recomendable usar tres símbolos de igual (===). Esto permite que JavasScript no iguale las variables que son de distinto tipo. Te recomendamos que uses el triple igual siempre que estés comparando variables.

Existen cinco tipos de datos que son primitivos:

Boolean
Null
Undefined
Number
String

Starling Mercedes

student•

Existen cinco tipos de datos que son primitivos:

Boolean:  // false/true
Null:  // nulo o "vacío"
Undefined: // Cuando una variable es declarada pero aún no tiene un valor asignado 
Number: // 383839
String:  // "esto es una string"```

Enrique Garcia Stave

student•

Buen aporte StarlingMercedes.

Para el estandar ES6, recientemente existen 6 tipos de datos primitivos, con la añadidura del tipo de dato Symbol, el cual es un tipo de dato único e inmutable, es decir, que no puede modificarse y cada vez que declares uno, sera algo distinto.

var symbolOne = Symbol()
var symbolTwo = Symbol()
console.log(symbolOne === symbolTwo) // Devolveraá false

Jesús Alejandro Machado Ortiz

student•

Pero que funcionalidades podría tener el tipo de dato Symbol()??

Pablo Andres

student•

Resumen de la Clase:

Comparaciones en JavaScript

Existen varias maneras de comparar variables u objetos dentro de javascript.

Existen cinco tipos de datos que son primitivos y es necesario comprender al momento de hacer comparaciones:

• Boolean
• Null
• Undefined
• Number
• String

<h4>Variables</h4>

En el primer ejemplo le asignamos a ‘x’ un valor numérico y a ‘y’ un string.
Para poder compararlos debemos agregar dos signos de igual “==”. Esto los convierte al mismo tipo de valor y permite que se puedan comparar.

	var x = 4
	var y = '4'

	x == y    
	// true

Cuando realizamos operaciones es recomendable usar tres símbolos de igual (===). Esto permite que JavasScript no iguale las variables que son de distinto tipo.

					*Sacha recomienda usa siempre el triple igual, pero hay controversia...

	x === y  
	// false

<h4>Objetos</h4>

Al comparar objetos JS tiene en cuenta también el nombre del objeto, por lo tanto se remite a comparar el nombre de las variables a demás del valor de los atributos.
Con objetos literales desglosados (otroMas en este caso), pasa lo mismo y la comparación da false ya que lo que se genera es un nuevo objeto a partir del desglosado.

	var sacha = {
		nombre: 'Sacha'
	}
	var otro = {
		nombre: 'Sacha'
	}
	var otroMas = {
		...sacha
	}
	
	sacha == otro		
	// false
	
	sacha === otro 	
	// false

	sacha == otroMas	
	// false
	
	sacha === otroMas	
	// false

Si asignamos el valor del objeto a una variable y los comparamos, el doble y el triple igual darán como resultado ‘true’ ya que en este caso las dos variables estarían refiriendo al mismo espacio en la memoria RAM.

	var otroMasTodavia = sacha

	sacha == otroMasTodavia	
	// True
	
	sacha === otroMasTodavia	
	// True

Otra cosa a tener en cuenta es que si cambiamos el valor del atributo en la variable, automáticamente cambia el valor del objeto también, por el mismo motivo que los operadores dan ‘true’, ambos refieren al mismo espacio en la memoria RAM.

	otroMasTodavia.nombre = "Pepe"
	
	otroMasTodavia.nombre
	// "Pepe"
	
	sacha.nombre
	// "Pepe"

Kevin Chipana Chucare

student•

Gracias, muy buenos tus resumenes

Jhonn Sebastian Quiroz Pirazan

student•

Muy pero muy buen resumen, aclaraste muchas cosas gracias!.

Israel Elias Laura Rosas

student•

5:59 Cuando habla de referencia se refiere a la direccion en memoria de un objeto. Es lo que se llama PUNTERO. y que es importante tenerlo en cuenta siempre que programamos.

Guillermo Baldán López

student•

Así me lo explicaron cuando me enseñaron a programar en la uni con c

Jeferson Velásquez

student•

Es sencillo cuando en la U programé Árboles AVL a puro puntero :D

Oscar Stevens Cuartas Bejarano

student•

Sacha cambio muchoooo!!! se volvio RE-PROOO enseñando

Carlos López Brú

student•

Yeah amigo!

Bryan Estiven Silva Mercado

student•

como era antes ?

Carlos Roberto Villatoro Barrios

student•

Dos cadenas son estrictamente iguales cuando la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las operaciones corresponden.
Dos números son estrictamente iguales cuando son numéricamente iguales. NaN no es igual a nada, incluido NaN. Los ceros positivos y negativos son iguales entre si.
Dos operadores booleanos son estrictamente iguales si ambos son ‘TRUE’ o ambos son ‘FALSE’
Dos objetos distintos nunca son iguales para comparaciones estrictas o abstractas (===, ==).
Una expresión que compara objetos solo es verdadera si los operadores hacen referencia al mismo objeto.
Los tipos Null y Undefined son estrictamente iguales a ellos mismos y abstractamente iguales entre si.

Abdiel Ortega

student•

Lo de NaN es importante saberlo y también conocer la diferencia de Null y undefined.

Victor Andres Castillo Zambrano

student•

gracias

Carlos Rodríguez Huerta

student•

var sacha = {
  nombre: 'sacha',
}

var otraPersona = {
  nombre: 'sacha',
}
sacha.nombre == otraPersona.nombre//true
sacha.nombre === otraPersona.nombre//true

Tengo una duda en la segunda comparación, el porqué del resultado true.

José Rubial

student•

== es par saber igualdad con relacion al valor sin importar su tipo, por ejemplo 1 == ‘1’ da true porque estas comparando el 1 como tal, ahora con === da false porque no solo estas comparando que ambos sean 1, ademas debes garantizar que ambos o son string o son de tipo numerico.

Danelia Sanchez Sanchez

student•

Es la igualdad estricta, en este caso es true porque ambas variables tienen el mismo tipo de dato y valor.

Carlos Sánchez

student•

Siempre utilizar el triple igual, evitarás un montón de confusiones.

Daniel Páez

student•

Oh my god, ahora quede más difuso, imagino que la usaré con criterio segun necesite el tipado para la comparacion, pero de forma general la intuición me dice que si hará falta el tipado fuerte en la comparación

Eduardo Hidalgo Díaz Rugama

student•

si, me quedé igual al enterarme. Pero es super interesante.

Steve Anthony Luzquiños Agama

student•

Mi resumen de la clase:

let x = 3,
    y = '3'

console.log('Comparing variables:');
// Comparing the content
console.log(x == y)
// Comparing content and type
console.log(x === y)

let person = {
    name: 'Anthony'
}
// Creating a new object
let person2 = {
    name: 'Anthony'
}
// Pointing to the same object
let person3 = person

console.log('\nComparing objects:')
console.log(person === person2)
console.log(person === person3)

Willy David Da Conceicao Lozada

student•

Js tiene distintas maneras de comparar con == compara si tienen el mismo valor sin importar el tipo (4 == “4” // true) y con === cuando comparamos si son idénticos los valores (4 === “4” //false ) CUANDO COMPARAMOS OBJETOS SE COMPARA REFERENTE A LA VARIABLE DEL OBJETO ![](

Elvis Moreira

student•

Para comparar en JavaScript utilizaremos dos situaciones diferentes:

La primera será declarar dos variables, una con valor numérico y la otra string pero con el mismo valor, así:

var x=10, y='10'

Si queremos usar el operador == nos devolverá TRUE porque con ese operador en una variable compara el contenido que tiene cada una de ellas.

Si usamos el operador === nos devolverá FALSE porque está comparando el contenido de las variables y el tipo de variable.

En objetos este tipo de comparaciones se comporta diferente en JavaScript

¿Porqué?

Porque al tener dos objetos con los mismos atributos ambos estan ocupado distintas posiciones de memoria

var elvis =
{
  nombre:'Elvis'
}

var otroNombre={
  nombre:'Elvis'
}

Para que nos pueda resultar verdadera la comparación debemos apuntar al mismo lugar de memoria ram que el otro objeto, es decir así:

var otroNombre=Sacha

Aquí al comparar con == y === Saldrá TRUE

Natanael Procopio

student•

Muy buen resumen, gracias!!

Diego Fernando Rojas Quintero

student•

== , compara el valor pero no su tipo === , evalúa el tipo del valor y luego su valor

Al comparar Objetos con diferentes atributos, este arrojara falso si utilizamos == ó === debido a que compara sus atributos

Al comparar Objetos con los mismo atributos, este arrojara false si utilizamos == ó === debido a que tiene diferentes nombres como Objetos

Para arrojar True los dos objetos deberán estar en el mismo espacio de la memoria ram, es decir que los dos tengan el mismo nombre y la mismas propiedades.

Boris Trochez

student•

No viene al caso , pero entendí el concepto que dijo sobre "commitear a produccion" que lo vi en el curso de GIT, me emociona porque significa que estoy aprendiendo y que la ruta de aprendizaje va muy bien!

Byron Gamboa

student•

truthy and falsy, cosas raras del JavaScript

//falsy
console.log(Boolean(0))
console.log(Boolean(null))
console.log(Boolean(NaN)) //not a number
console.log(Boolean(undefined)) //not value yet
console.log(Boolean(false))
console.log(Boolean(&quot;&quot;)) //empty string

//truthly
console.log(Boolean(&quot; &quot;)) //string con algo
console.log(Boolean(&quot;a&quot;))
console.log(Boolean(1)) //any number 
console.log(Boolean({})) //arrays, even if they are empty
console.log(Boolean(function(){})) //functions, even if they are empty

Alejandro Giraldo Londoño

student•

RESUMEN:

En esta clase vimos formas de comparar en JS, cabe aclarar que faltó ver:

Sin identidad/desigualdad estricta !==
Operadores de desigualdad !=
Operadores relacionales
Mayor que >, Mayor igual que >=
Menor que<, Menor igual que <=

Adjunto documentación de mucha utilidad para quienes deseen investigar un poco más.

Adjunto el código de esta clase con comentarios al respecto.

// Existen diferentes formas de comparar variable sy objetos en JS.

var x = 14, y = '14'

// Comparar dos variables ==
console.log(x==y) //Nos dará True. Toma los dos valores a comparar los lleva a un mismo tipo de dato.

// Si tienen el mismo valro y son el mismo tipo de variables
console.log(x===y)// Nos dará false.  Compara ambos valores.

//Siempre usar el triple igual para no caer en errores. No se commit ningún código que tenga doble igual.


//Comparación de objeos.atributos. Al compararlos con cualquier == === lo que hace es que js pregunta a la referencia. 
var nitrogeno ={
    enlace: 'covalente'
}

var selenio ={
    enlace:'covalente'
}

console.log(nitrogeno==selenio)// Ya que estos dos objetos no son iguales será false
console.log(nitrogeno.enlace==selenio.enlace)// Me arrojará true debido a que estos dos atributos si son iguales

// Cuando dos fragmentos de código aùntan a un mismo lugar en memoria ram. el cambio en una afectará el mismo sitio.


var selenio ={
   ...nitrogeno
}

//Me arroja false, porque arroja al mismo sitio en memoria.

Juan Pablo Betancur

student•

Cómo puedo comparar si dos objetos son iguales pero provienen de referencias distintas? Ejp:

var a = {name: 'Example'}; var b = {name: 'Example'};

console.log(a===b);//false pero tienen Exactamente la misma estructura y valores.

CRISTIAN BARBERO PÉREZ

student•

Es curioso porque tomando las llaves y los valores también da false:

keys(a) === keys(b) //false
values(a) === values(b) //false

Si abres el objeto keys(a) o keys(b) verás que no son simplemente el texto, por lo que tienes que comparar lo siguente:

values(a)[0] === values(b)[0] //true
keys(a)[0] === keys(b)[0] //true

Juan Pablo Betancur

student•

Gracias @ceporro !!. Técnicamente tendría que recorrer ambos objetos y comparar cada uno de sus valores.

Juan Pablo Betancur

student•

Cómo puedo comparar si dos objetos son iguales pero provienen de referencias distintas? Ejp:

`var a = {name: 'Example'}; var b = {name: 'Example'};

console.log(a===b); //false pero en realidad si tienen exactamente la misma estructura y los mismos valores.`

Mauricio Galvez

student•

Hice este tutorial explicándolo: https://platzi.com/tutoriales/1339-fundamentos-javascript/7308-comparacion-de-objetos-en-js/

Rulo Code

student•

OPERADORES DE COMPARACIÓN

Asignación de espacio en memoria(=) : x = 5 , y = ‘5’
Igualdad(==) : Convierte los operandos si no son del mismo tipo y luego los compara x == y // TRUE
Igualdad estricta(===) : devuelve verdadero si los operandos no son iguales y / o no son del mismo tipo x === y // FALSE
Desigualdad(!=) : Devuelve verdadero si los operandos no son iguales x != y // FALSE
Desigualdad estricta(!==) : Devuelve verdadero si los operandos NO son iguales y/o no del mismo tipo x !== y // TRUE

La comparación de objetos funciona con referencias de memoria x = { numero: 2} y = { numero:2 } esto siempre va a ser distinto a no ser que ... x= { numero: 2 } y = x
Tanbien es posible desglosar un objeto dentro de otro pero esto creará otro espacio en memoria para el nuevo objeto x = { numero: 2 } y = { ...x }

Jose L. Figueroa

student•

Comparaciones de Primitivas
Si queremos comparar 2 valores en js utilizamos:

x == y

Pero si queremos comparar 2 valores y además si queremos comparar si las variables son del mismo tipo utilizamos:

x === y

Comparaciones de Objetos
Cuando deseamos comparar objetos js pregunta por la refencia a la variable que estamos utilizando.
Si la referencia es la misma a la variable que estamos utilizando js entregará true, esto quiere decir, que estamos apuntando al mismo objeto en memoria RAM.

Objeto Literal
Es cuando desglosamos un objeto en un nuevo objeto:

var persona = {
  nombre: 'JoseL'
}

var otraPersona = {
  ...josel
}

Los objetos contienen la misma info.

Julian Andres Builes Cajiao

student•

== compara dos variables
=== compara el valor y el tipo de variable

Oscar Grey

student•

Sacha al terminar el curso debió sentirse un objeto