Tipos de datos de JavaScript y sus características

Resumen: en este tutorial, aprenderás sobre los tipos de datos de JavaScript y sus características.

Introducción a los tipos de datos de JavaScript

JavaScript tiene los tipos de datos primitivos:

• null
• undefined
• boolean
• number
• string
• symbol – disponible a partir de ES2015
• bigint – disponible a partir de ES2020

y object que es un tipo de datos complejo.

JavaScript es un lenguaje de tipado dinámico. Significa que una variable no se asocia con un tipo. En otras palabras, una variable puede contener un valor de diferentes tipos. Por ejemplo:

let counter = 120; // counter es number
counter = false;   // counter es boolean
counter = "foo";   // counter es string

Para obtener el tipo actual del valor que almacena la variable, utiliza el operador typeof:

let counter = 120;
console.log(typeof(counter)); // "number"

counter = false;
console.log(typeof(counter)); // "boolean"

counter = "Hi";
console.log(typeof(counter)); // "string"

Resultado:

"number"
"boolean"
"string"

El tipo undefined

El tipo undefined es un tipo primitivo que tiene un solo valor indefinido. Por defecto, cuando se declara una variable pero no se inicializa, se le asigna el valor de undefined.

Considera el siguiente ejemplo:

let counter;
console.log(counter);        // undefined
console.log(typeof counter); // undefined

En este ejemplo, counter es una variable. Dado que counter no se ha inicializado, se le asigna el valor undefined. El tipo de counter tampoco está definido.

Es importante tener en cuenta que el operador typeof también devuelve undefined cuando lo llamas en una variable que no ha sido declarada:

console.log(typeof undeclaredVar); // undefined

El tipo null

El tipo null es el segundo tipo de datos primitivo que también tiene un solo valor null. Por ejemplo:

let obj = null;
console.log(typeof obj); // object

"Typeof cuando un objeto es null retorna object, es un error conocido en JavaScript. Se hizo una propuesta para solucionar esto, pero se rechazó. La razón fue que la solución rompería muchos sitios existentes."

JavaScript define que null es igual a undefined de la siguiente manera:

console.log(null == undefined); // true

El tipo number

JavaScript usa el tipo number para representar tanto números enteros como de coma flotante.

La siguiente declaración declara una variable e inicializa su valor con un número entero:

let num = 100;

Para representar un número de punto flotante, incluye un punto decimal seguido de al menos un número. Por ejemplo:

let price= 12.5;
let discount = 0.05;

Ten en cuenta que JavaScript convierte automáticamente un número de punto flotante en un número entero si el número parece ser un número entero.

La razón es que Javascript siempre quiere usar menos memoria ya que un valor de punto flotante usa el doble de memoria que un valor entero. Por ejemplo:

let price = 200.00; // interpretado como un entero 200

Para obtener el rango del tipo de número, usa Number.MIN_VALUE y Number.MAX_VALUE. Por ejemplo:

console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324

Además, puedes usar Infinity e -Infinity para representar el número infinito. Por ejemplo:

console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
console.log(-Number.MAX_VALUE - Number.MAX_VALUE); // -Infinity

NaN

NaN significa No es un número. Es un valor numérico especial que indica un número inválido. Por ejemplo, la división de una cadena por un número devuelve NaN:

console.log('a'/2); // NaN;

El NaN tiene dos características especiales:

• Cualquier operación con NaN devuelve NaN.
• El NaN no es igual a ningún valor, incluido él mismo.

Aquí hay unos ejemplos:

console.log(NaN/2); // NaN
console.log(NaN == NaN); // false

El tipo de cadena

En JavaScript, una cadena es una secuencia de cero o más caracteres. Un literal de cadena comienza y termina con una comilla simple (') o una comilla doble (").

Una cadena que comienza con comillas dobles debe terminar con comillas dobles. Del mismo modo, una cadena que comienza con una comilla simple también debe terminar con una comilla simple:

let greeting = 'Hi';
let message  = "Bye";

Si desea usar comillas simples o dobles en una cadena literal, debes usar la barra invertida para escapar. Por ejemplo:

let message = 'I\'m also a valid string'; // use \ to escape the single quote (')

Las cadenas en JavaScript son inmutables. Esto significa que no se puede modificar una vez creadas. Sin embargo, puedes crear una nueva cadena a partir de una cadena existente. Por ejemplo:

let str = 'JavaScript';
str = str + ' String';

En este ejemplo:

• Primero, declaras la variable str y se inicializa en una cadena de 'JavaScript'.
• En segundo lugar, se usa el operador + para combinar 'JavaScript' con 'String' para hacer que su valor sea 'Javascript String'.

Detrás de escena, el motor de JavaScript crea una nueva cadena que contiene la nueva cadena 'JavaScript String' y destruye las cadenas originales 'JavaScript' y 'String'.

El siguiente ejemplo intenta cambiar el primer carácter de la cadena JavaScript:

let s = 'JavaScript';
s[0] = 'j';
console.log(s)

Resultado:

'JavaScript'

Pero no:

'javaScript'

El tipo boolean

El tipo boolean tiene dos valores literales: true y false en minúsculas. El siguiente ejemplo declara dos variables que contienen los valores booleanos.

let inProgress = true;
let completed = false;

console.log(typeof completed); // boolean

JavaScript permite convertir valores de otros tipos en valores booleanos de true o false.

Para convertir un valor de otro tipo de datos en un valor booleano, utilice la función Boolean().

Por ejemplo:

console.log(Boolean('Hi'));// true
console.log(Boolean(''));  // false

console.log(Boolean(20));  // true
console.log(Boolean(Infinity));  // true
console.log(Boolean(0));  // false

console.log(Boolean({foo: 100}));  // true on non-empty object
console.log(Boolean(null));// false

El tipo de symbol

JavaScript agregó un tipo primitivo en ES6: el symbol. A diferencia de otros tipos primitivos, el tipo de symbol no tiene una forma literal.

Para crear un symbol, llame a la función Symbol de la siguiente manera:

let s1 = Symbol();

La función Symbol crea un nuevo valor único cada vez que la llama.

console.log(Symbol() == Symbol()); // false

El tipo bigint

El tipo bigint representa los números enteros que son mayores que 2⁵³ – 1. Para formar un número literal bigint, agrega la letra n al final del número:

let pageView = 9007199254740991n;
console.log(typeof(pageView)); // 'bigint'

El tipo object

En JavaScript, un object es una colección de propiedades, donde cada propiedad se define como un par clave-valor.

El siguiente ejemplo define un object vacío utilizando la sintaxis literal de object:

let emptyObject = {};

El siguiente ejemplo define el objeto de persona con dos propiedades: firstName y lastName.

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

Un nombre de propiedad de un object puede ser cualquier cadena. Puede usar comillas alrededor del nombre de la propiedad si no es un identificador válido.

Por ejemplo, si el objeto de persona tiene una propiedad first-name, debe colocarlo entre comillas como "first-name".

Una propiedad de un object puede contener otro object. Por ejemplo:

let contact = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@estradawebgroup.com',
    phone: '(408)-555-9999',
    address: {
        building: '4000',
        street: 'North 1st street',
        city: 'San Jose',
        state: 'CA',
        country: 'USA'
    }
}

El objeto contact tiene las propiedades firstName, lastName, email, phone y address.

La propiedad de address contiene un objeto que tiene propiedades de building, street, city, state y country.

Para acceder a la propiedad de un objeto, puedes utilizar

• La notación de punto (.)
• La notación tipo matriz ([]).

El siguiente ejemplo usa la notación de punto (.) para acceder a las propiedades firstName y lastName del objeto de contact.

console.log(contact.firstName);
console.log(contact.lastName);

Si haces referencia a una propiedad que no existe, obtendrás un valor indefinido. Por ejemplo:

console.log(contact.age); // undefined

El siguiente ejemplo utiliza la notación tipo matriz para acceder a las propiedades de email y phone del objeto contact.

console.log(contact['phone']); // '(408)-555-9999'
console.log(contact['email']); // 'john.doe@estradawebgroup.com'

Resumen: JavaScript tiene los tipos primitivos: number, string, boolean, null, undefined, symbol y bigint y un tipo complejo: object.