Tipos de datos de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

JavaScript tiene 8 tipos de datos

1. Cadena
2. Número
3. Bigint
4. Booleano
5. Indefinido
6. Nulo
7. Símbolo
8. Objeto

El tipo de datos del objeto

El tipo de datos del objeto puede contener:

1. Un objeto
2. Una matriz
3. Una cita

Ejemplos

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

Nota

Una variable de JavaScript puede contener cualquier tipo de datos.

El concepto de tipos de datos

En programación, los tipos de datos son un concepto importante.

Para poder operar con variables, es importante saber algo sobre el tipo.

Sin tipos de datos, una computadora no puede resolver esto de manera segura:

let x = 16 + "Volvo";

¿Tiene algún sentido añadir "Volvo" a los dieciséis? ¿Producirá una error o producirá un resultado?

JavaScript tratará el ejemplo anterior como:

let x = "16" + "Volvo";

Nota

Al agregar un número y una cadena, JavaScript tratará el número como un cadena.

Ejemplo

let x = 16 + "Volvo";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Ejemplo

let x = "Volvo" + 16;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a string and a number, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript evalúa expresiones de izquierda a derecha. Diferentes secuencias pueden producir resultados diferentes:

JavaScript:

let x = 16 + 4 + "Volvo";

Resultado :

20Volvo

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript:

let x = "Volvo" + 16 + 4;

Resultado :

Volvo164

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

En el primer ejemplo, JavaScript trata 16 y 4 como números, hasta llegar a "Volvo".

En el segundo ejemplo, dado que el primer operando es una cadena, todos los operandos son tratados como cuerdas.

Los tipos de JavaScript son dinámicos

JavaScript tiene tipos dinámicos. Esto significa que se puede utilizar la misma variable. sostener diferentes tipos de datos:

Ejemplo

let x;       // Now x is undefined
x = 5;       // Now x is a Number
x = "John";  // Now x is a String

Cadenas de JavaScript

Una cadena (o una cadena de texto) es una serie de caracteres como "John Doe".

Las cadenas se escriben entre comillas. Puedes utilizar comillas simples o dobles:

Ejemplo

// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:
let carName2 = 'Volvo XC60';

Puedes usar comillas dentro de una cadena, siempre y cuando no coincidan con las comillas. rodeando la cuerda:

Ejemplo

// Single quote inside double quotes:
let answer1 = "It's alright";
 

// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';

Aprenderá más sobre las cadenas más adelante en este tutorial.

Números de JavaScript

Todos los números de JavaScript se almacenan como números decimales (punto flotante).

Los números se pueden escribir con o sin decimales:

Ejemplo

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34;

Notación exponencial

Se pueden escribir números muy grandes o muy pequeños con técnicas científicas. (notación exponencial:

Ejemplo

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

Nota

La mayoría de los lenguajes de programación tienen muchos tipos de números:

Números enteros (enteros):
byte (8 bits), corto (16 bits), int (32 bits), largo (64 bits)

Números reales (punto flotante):
flotante (32 bits), doble (64 bits).

Los números de Javascript son siempre de un tipo:
doble (coma flotante de 64 bits).

Aprenderá más sobre los números más adelante en este tutorial.

JavaScript grandeint

Todos los números de JavaScript se almacenan en un formato de punto flotante de 64 bits.

JavaScript BigInt es un nuevo tipo de datos (ES2020) que se puede utilizar para almacenar valores enteros que son demasiado grandes para ser representados. por un número de JavaScript normal.

Ejemplo

let x = BigInt("123456789012345678901234567890");

Aprenderá más sobre BigInt más adelante en este tutorial.

Booleanos de JavaScript

Los booleanos solo pueden tener dos valores: true o false.

Ejemplo

let x = 5;
let y = 5;
let z = 6;
(x == y)       
  // Returns true
(x == z)       // Returns 
  false

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 5;
let z = 6;

document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

Los booleanos se utilizan a menudo en pruebas condicionales.

Aprenderá más sobre los booleanos más adelante en este tutorial.

Matrices de JavaScript

Las matrices de JavaScript se escriben entre corchetes.

Los elementos de la matriz están separados por comas.

El siguiente código declara (crea) una matriz llamada cars, que contiene tres artículos (nombres de automóviles):

Ejemplo

const cars = ["Saab", "Volvo", "BMW"];

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>
const cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Los índices de matriz tienen base cero, lo que significa que el primer elemento es [0], el segundo es [1], y así sucesivamente.

Aprenderá más sobre las matrices más adelante en este tutorial.

Objetos JavaScript

Los objetos JavaScript se escriben con llaves {}.

Objeto las propiedades se escriben como pares nombre:valor, separados por comas.

Ejemplo

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

El objeto (persona) en el ejemplo anterior tiene 4 propiedades: nombre, apellido, edad y color de ojos.

Aprenderá más sobre los objetos más adelante en este tutorial.

El tipo de operador

Puede utilizar el operador typeof de JavaScript para encontrar el tipo de una variable de JavaScript.

El operador typeof devuelve el tipo de una variable o una expresión:

Ejemplo

typeof ""             // Returns 
 "string"
typeof "John"         // Returns 
 "string"
typeof "John Doe"     // Returns 
 "string"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>

Ejemplo

typeof 0              // Returns 
 "number"
  typeof 314            // Returns 
 "number"
  typeof 3.14           // Returns 
 "number"
  typeof (3)            // Returns 
 "number"
typeof (3 + 4)        // Returns 
 "number"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>

</body>
</html>

Aprenderá más sobre typeof más adelante en este tutorial.

Indefinido

En JavaScript, una variable sin valor tiene el valor indefinido. El tipo también es undefinido.

Ejemplo

let car;    // Value is undefined, 
    type is undefined

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html>

Cualquier variable se puede vaciar estableciendo el valor en undefinido. El tipo también será undefinido.

Ejemplo

   car = undefined;    // Value is undefined, 
    type is undefined

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car = "Volvo";
car = undefined;

document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>

</body>
</html>

Valores vacíos

Un valor vacío no tiene nada que ver con undefinido.

Una cadena vacía tiene tanto un valor legal como un tipo.

Ejemplo

let car = "";    // The value is  "", the typeof is "string"

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>