01. Tipos de Datos y Coerción - cejaramillof/javaScript GitHub Wiki

Primitivos

Javascript tiene 7 tipos primitivos:

  • Nulo (null) es un objeto, pero no es una instancia de Object
  • Sin definir (undefined)
    • Null and Undefined usually are called empty values or placeholder values. Because are reserved values, for future value. And too JS can use this values like error. Not is recommended use undefined, because he is reserved by javascript.
  • Lógicos (boolean)
  • Numérico (number)
  • Cadena (string) '' ó ""
    • Secuencia ordenada de valores unsigned int de 16 bits, usado principalmente para representar un texto. en Ecmascript cada uno de los elementos se guarda en unidades de código UTF-16. 1.112.064 puntos de unidad unicode existentes. Son inmutables, cualquier modificación generará una nueva cadena en lugar de modificar la original.
  • Símbolo (symbol)
  • Números enteros, muy grandes (bigint) - new

Todos los demás tipos son objetos (Object): Array, Date, Promise, String, etc.

Asignación

Con primitivos, si asignamos una variable a otra, se crea una copia del valor.

var banano = "banano amarillo"
var fruta = banano; // var fruta = "banano amarillo"

banano = "banano verde"
console.log(banano) // banano verde
console.log(fruta) // banano amarillo

Coerción

Coerción es la forma en la que podemos cambiar de un tipo de valor a otro tipo de valor.

Type Conversion

Boolean():

0, NaN, undefined, null, "" = false Everything else, including objects, [] = true

Number

Undefined = NaN null = 0 true = 1, false = 0 string (trim whitespaces, empty string 0, and error gives NaN)

String

Convert all in string

Implicitas:

Cuando el lenguaje nos ayuda y cambia de un tipo de valor a otro tipo de valor.

// En tipos diferentes + concatena, los otros intentan operar.
4 + "7"; // "47" 
4 - "7"; // -3
(0)false - 3; // -3
(0)null - 3; // -3
4 * 7; // 28
4 * '7'; // 28
2 + true(1); // 3

Explicitas:

Obligamos que un valor de un tipo cambie a otro tipo.

var a = 20;
var b = a + ""; // "20"
var c = String(a); // "20"
var d = Number(c); // 20

Valores

Truthy

Boolean(" ");
Boolean(1);
Boolean([]);
Boolean({});
Boolean(function(){});
Boolean(true);

Falsy

Boolean();
Boolean(0);
Boolean(null);
Boolean(NaN);
Boolean(undefined);
Boolean(false);
Boolean("");

Operadores

Javascript tiene operadores de Binarios, Unitarios, Asignación, Comparación, Lógicos, Incremento.

// ARITMETICOS

+ // Suma a + b,  afirmación unitaria +a : Positivo, concatenación "a" + "la" : "ala"
- // Resta a - b, negación unitaria -a : Negativo
* // Producto a * b
/ // Divisor a / b
% // Residuo a % b
** // Potencia a ** b, a elevado a b
++ // Incremento (suma uno) a++ : a = a + 1
-- // Decremento (resta uno) a-- : a = a - 1

// ASIGNACIÓN

= // Asignación a = b
+= // Asignación de adición  a += b : a = a + b
-= // Asignación de sustracción  a -= b : a = a - b
*= // Asignación de multiplicación  a *= b : a = a * b
/= // Asignación de división  a /= b : a = a / b
%= // Asignación de residuo  a %= b : a = a % b
**= // Asignación de potencia  a **= b : a = a ** b
<<= // Asignación de desplazamiento a la izquierda  a <<= b : a = a << b
>>= // Asignación de desplazamiento a la derecha  a >>= b : a = a >> b
>>>= // Asignación sin signo de desplazamiento a la derecha  a >>>= b : a = a >>> b
&= // Asignación AND  a &= b : a = a & b
^= // Asignación XOR  a ^= b : a = a ^ b
|= // Asignación OR  a |= b : a = a | b

// COMPARACIÓN

== // Igualdad a == b, a tiene el mismo valor que b
!= // Distinto a != b, a tiene un valor diferente a b
=== // Identidad a === b igual valor igual tipo de dato
!== // Sin Identidad a !== b igual valor o igual tipo de dato
> // Mayor que a > b
>= // Mayor o igual que a >= b
< // Menor que a < b
<= // Menor o igual que a <= b

// LOGICOS

&& // AND, Y, a && b : a y b
|| // OR, O, a || b : a o b
! // NOT, Negación, a = true : !a = false

// LOGICOS A NIVEL DE BITS

<< // Desplazamiento a la izquierda  a << b
>> // Desplazamiento a la derecha  a >> b
>>> // Desplazamiento a la derecha sin signo  a >>> b
& // AND  a & b
^ // XOR  a ^ b
| // OR  a | b
~ // NOT  a | b```

Texto (Strings)

No importa si es 1 o muchos caracteres, siempre es el mismo tipo. (new String('') vs '') son exactamente lo mismo por cohersion. Los strings son cadenas de texto. se declaran con comillas simples, dobles o invertidas (TemplateString). Ver métodos

var nombre = 'Carlos', apellido = 'Jaramillo'.toLowerCase();
var a, b;

// Escapar caracteres especiales con `\` - tabulaciones y saltos de linea `\n \r\n \t`
console.log('dijo: \'Hola\' ')

// Concatenación
var nConcated = nombre.toUpperCase() + " " + apellido;
var a.concat(b);

// Interpolación
// TemplateLiterals. (anteriormente llamados TemplateString)
var nConcat= `${nombre.toUpperCase()} ${apellido}`; 

// .trim() limpia espacios en blanco adelante y atras.
// .trimStart() - .trimEnd()

// .length() // puntos unicode

// .repeat(nTimes) // repeat any string N times

// .replace('old', 'New') // replace specific part of string



let mes = '03';
let mesx = '12; 
// padStart concatenar string hasta longitud deseada 
// también existe padEnd para añadirlo al final
console.log(mes.padStart(2, '0'); // 03
console.log(mex.padStart(2, '0'); // 12




// Se pueden usar los operadores de comparación <, >, <=, >=, == pero la comparación se hará usando el valor númerico de ambas.

console.log("A" > "B"); // false
console.log("a" > "B"); // true
console.log("A" > "a"); // false

// en versiones modernas de JS atravez de la api de internacionalización se añade el metodo
// `localeCompare` al objeto string, que es más eficiente para comparar cadenas.
// Iguales = 0 
// base > comparación (orden alfabetico) = -1 
// base < comparación (orden alfabetico) = 1

console.log('a'.localeCompare('z')); // -1 
console.log('b'.localeCompare('a')); // 1

console.log('a'.localeCompare('B')); // -1 
console.log('A'.localeCompare('a')); // 1  
console.log('b'.localeCompare('b')); // 0 

console.log('A'.toLowerCase().localeCompare('a').toLowerCase()); // 0


// Inmutabilidad
let message = 'HoLa'
let altMessage = message.toUpperCase();

console.log(message); // HoLa
console.log(altMessage); // HOLA

JS ofrece ayudas para de partir una cadena, manejar subcadenas, o acceder a cada caracter. "Hola"[0], se puede iterar con for of, se puede utilizar cualquier otro ciclo para recorrer, pero no es recomendable porque algunos cáracteres como los emojis estan creados con dos puntos de unidad unicode.

Substrings

substring vs slice

const cadena = 'hola mundo';
// la posición final no es incluyente, en este ejemplo retorna las posiciones 0,1,2,3
console.log(cadena.substring(0,4)); // 'hola'
// Si la posicion final es mayor a la inicial, JS los invierte. inicia en final y entrega hasta inicial
// si envias un valor negativo, lo transforma en 0
console.log(cadena.substring(3,2)); // 'la'

// .slice funciona similar, pero si el final es mayor no se ejecuta. 
// y Slice permite enviar valores negativos, para iniciar de atras hacia adelante.
console.log(cadena.slice(-5));

// En ambos el segundo argumento es opcional, y si no es enviado la nueva cadena terminará al final de la primera.

Busqueda en String

let message = 'Hola Mundo';

console.log(message.indexOf('Mundo')); // return 5, because Mundo start at 5 position
// if doesn't exist return -1
// .indexOf utiliza un algoritmo de comparación de igualdades extricto
// .indexOf retorna la posicion de la primera encontrada.
// .lastIndexOf retorna la posicion de la última encontrada.(es más lento, porque igual debe recorrer toda la cadena, para verificar que no haya otro al final)

// .includes return true or false
// .includes utiliza un algoritmo de nombres sin value zero - soluciona el caso de buscar un valor falsy como NaN
// .includes es mejor, a no ser que necesites soporte para IE, o la posicion en la cadena.


// .startsWith
// .endsWith

Cadenas y Arreglos

Las cadenas son en cierto sentido muy similares a los arreglos, un conjunto de elementos ordenados en una secuencia definida la gran diferencia es que las cadenas sólo guardan elementos de texto. .split(' ') // dividir string .join(' ') // method of array, une todos los elementos de un array en una sóla cadena

Unicode

Nos permite representar los caracterers de una cadena como puntos de código, que a su ves son traducidos por la computadora a unidades de código representadas en bytes. Antes de unicode era un desafio hacer esto, porque cada programa seguia sus propias reglas. Unicode ofrece una manera uniforme y estandarizada de representar todos los caracteres de todos los lenguages (idiomas) que existen en el mundo. La última version de unicode (13) tiene 143.859 caracteres. (Incluido idiomas, emojis, simbolos, etc). Son pocos comparados con los 1.111.998 caracteres permitidos en unicode.

El sistema es simple, cada caracter de texto en cualquier idioma se representa en un rango desde U+0000 a U+10FFFF

function toCodePoint(char){
  var hex = char.charCodeAt(0).toString(16); // Convierte el caracter a hex
  return "\\u" + "0000".substring(0, 4 - hex.length) + hex; // Agrega los 0's faltantes al inicio
  // return "\\u" + hex.padStart(4,"0"); // Agrega los 0's faltantes al inicio
}

// esta representasion de `unicode` luego será transformada a `code unit` que esa se transforma a bytes para el PC
// console.log(toCodePoint('a')); // "\u0061"
// console.log("\u0061") // "a"

Planos unicode

los 1.111.998 valores que se pueden usar en el sistema unicode, estan divididos en 17 planos. Cada plano puede almacenar 65.536 caracteres (2ˆ16).

El primer plano (0) es el más comun (basic multilingual plane) BMP. En este encontramos los caracteres más utilizados, incluidos los de los principales lenguages como latin, griego, etc. Estos pueden ser almacenados usando números 16 bits. Todos los cáracteres comunes del lenguage basan su representación en el pano base (0)

Los caracteres que pertenecen a los planos 1-17 son los planes astrales. Estos no pueden ser representados con unidades de código de 16 bits. en encoding como UTF-16 son representados por dos unidades de código de 16 bits c/u a este concepto lo llamamos (Surrogate pair) ya que se compone de dos Unidades de código "High surrogate pair" y "Low surrogate pair"

console.log('😋'.length); // 2

Los emojis bases se componen de 2 únidades de código, algunos más complejos son la combinación de varios emojis o varios caracteres, que pueden llegar a necesitar necesitar más de 2 unidades de código para representar un emoji.

Números (Numbers)

Se declara similar a los strings, pero sin comillas. Ver métodos

Los operadores matemáticos más comunes son:

  • suma ( + )
  • resta ( - )
  • multiplicación ( * )
  • división ( / )
  • modulo - residuo ( % )
  • suma especial ( += )
  • sumar uno ( ++ )

JavaScript no es muy preciso con decimales. Porque destina una cantidad de bytes en la ram, para asignarle un decimal.

var precio = 200.3;
var precioFixed = precio * 100 * 3 / 100; // Solo funciona con 1 decimal.
var priceFixed = Math.round(precio * 100 * 3) / 100; // es un poco más exacta.

var totalStr = priceFixed.toFixed(3); // Convertir a string y cantidad de decimales.
var totalNum = parseFloat(totalStr); // Convertir a número float.

Fechas (date obj)

Es un objeto (Date) de JavaScript que se usa para almacenar fechas, se pueden realizar operaciones de suma y resta. Pero su resultado se obtiene en milisegundos. Ver métodos

  • Los meses inician en 0.
function diasEntreFechas(fecha1, fecha2) {
    // 1000 milisegundos, 60 segundos, 60 minutos, 24 horas
    const UN_DIA = 1000 * 60 * 60 * 24;
    const DIFERENCIA = Math.abs(fecha1 - fecha2);

    return Math.floor(DIFERENCIA / UN_DIA);
}

const HOY = new Date();
// en javascript los meses inician en cero
const NACIMIENTO = new Date(1996, 8, 4);

Booleano (boolean)

No es igual el objeto al primitivo, Si se omite el valor o es 0, -0, null, false, NaN, undefined, o la cadena vacía (""), el objeto tiene un valor inicial de false

x = new Boolean(false);
if (x) // es verdadero
x = false;
if (x) // es falso

Símbolos (Symbol)

Son un nuevo primitivo, su principal caracteristica es que son únicos. Por ejemplo usar un símbolo te asegura que el identificador que utilices para asignarle nombre a un método es completamente unico y no volverá a repetirse, por lo que reemplazarlo no será tan fácil como reemplazar, o usar el mismo nombre. El proposito de los simbolos es agregar unicidad, es decir que un identificador sea realmente único.

// the value is just a descriptor to identify it, but not is part of the simbol value
let symbolOne = Symbol('my-symbol') 
let symbolTwo = Symbol('my-symbol') 

console.log(symbolOne == symbolTwo); // false

El principal uso de un simbolo es el de clave, para las propiedades de un objeto. Antes de los simbolos los nombres de las propieadades de un objeto sólo podían ser string, ahora pueden ser symbol o string

// the value is just a descriptor to identify it, but not is part of the simbol value
let symbolOne = Symbol('my-symbol') 

let obj = {};

obj[ssymbolOne] = function() {
  console.log('my name is a symbol');
}

obj[symbolOne](); // is the only way to execute it;

obj['my-symbol'](); // not will works

No vienen a reemplazar los strings porque no son tan prácticos, en la mayoría de los casos es mejor seguir usando strings. Uno de los pocos casos donde conviene utilizar simbolos es en los iterables.

Existe una lista de constantes llamada well-known symbols

⚠️ **GitHub.com Fallback** ⚠️