Tipos de datos en JavaScript

Tipos de datos en JavaScript 1

¿Qué aprenderás? 2
Introducción 2
Tipos de Datos Primitivos 3
JavaScript es débilmente tipado 4
Rutinas con variables y tipos de datos. 5
Concatenación de variables 8
Operaciones matemáticas con variables 8
Interpolación de variables 9
Ejercicio guiado: Resolver un problema usando variables y tipos de datos 11
Resumen 13

¡Comencemos!

_ 1

www.desafiolatam.com
¿Qué aprenderás?

● Identificar los tipos de datos primitivos en un programa JavaScript, para aplicarlos

correctamente de acuerdo a la sintaxis del lenguaje.

● Codificar un programa utilizando operaciones de los tipos de datos para resolver un

problema.

Introducción

Como lo mencionamos en el capítulo anterior, la programación es la manipulación de datos.

Frente a esto, es de suma importancia conocer los tipos de datos que estaremos
manipulando con este lenguaje de programación llamado JavaScript.

Por ejemplo, cuando estamos contratando un plan de teléfono, el ejecutivo nos solicita
nuestros datos personales: Rut, Edad, Fecha de Nacimiento, Dirección, Teléfono y Correo
electrónico. Aquí tenemos diferentes tipos de datos, números, fecha, mail, texto, etc. con los
que el ejecutivo puede manipular como él quiera para elaborar un contrato. De esta forma
nosotros como programadores tenemos que conocer el tipo de dato que estaremos
manipulando para ver de qué manera lo podemos hacer y trabajar de una manera más
óptima.

JavaScript tiene definido los tipos de datos que podemos manipular y los llama como tipos
de datos primitivos, esto hace referencia a un tipo de dato que representa un solo valor y es
inmutable (que no se puede modificar).

En este capítulo veremos en detalle los tipos de datos primitivos, comprenderemos a qué
nos referimos cuando decimos que JavaScript es un lenguaje débilmente tipado junto a sus
ventajas y desventajas. Manejar estos conceptos nos permitirá hacer operaciones con
variables y controlar el comportamiento de nuestros programas en relación a los tipos de
datos que intervienen en los procesos.

_ 2

www.desafiolatam.com
Tipos de Datos Primitivos

En JavaScript tenemos cinco tipos de datos primitivos:

● Boolean: Representa una entidad lógica y puede tener dos valores; true o false.
● Number: Un valor Numérico.
● String: Una cadena de texto.
● Undefined: Una variable a la cual no se le haya asignado valor tiene entonces el valor
undefined.
● Null: Una variable que se le asigna y representa un valor nulo o vacío.

Con el siguiente código podemos identificar a qué tipo pertenece el dato que hemos
almacenado en la variable “verdadero”, utilizando el operador “typeof” que devuelve un texto
“string” con dicha información:

var verdadero = true;

// declaramos la variable "verdadero" con un valor Boolean.

alert(typeof verdadero);
// Este mensaje de alerta nos menciona el tipo de dato que es

(Cuando queremos comentar en JavaScript lo hacemos con // y luego el comentario)

Al ejecutar el código, indicará que se trata de un dato de tipo “boolean”:

Imagen 1. Resultado ejecución de código utilizando el tipo de dato “boolean”.

Fuente: Desafío Latam

En nuestro trabajo como desarrolladores vamos a ocupar tipos de datos “string” para
manejar textos en nuestros elementos, ya sea valores, nombres de clases, etc. la mayoría de
las cosas que sean formadas por palabras las podremos manipular usando strings.

Por consiguiente, los datos tipo números nos servirán para realizar tanto lógica como para
manipular valores o atributos de los elementos de una página web. Vamos a poder construir
lógica para realizar acciones dependiendo del resultado de los cálculos de estos números,

_ 3

www.desafiolatam.com
por ejemplo, contar la cantidad de letras en una entrada de texto, o realizar cambios en un
elemento cuando el ancho de la página sea menor que cierto número.

Mientras que los Booleanos serán usados también en lógica verificando, por ejemplo, si una
operación es verdadera o no, si un elemento existe o no dentro de la página web, junto con
una infinidad de operaciones nos pueden dar un resultado final VERDADERO o FALSO, SÍ o
NO, EXISTE o NO EXISTE.

Es por esto, lo importante que es conocer los tipos de datos en JavaScript, para así saber
que tipo de datos estamos manipulando al programar.

JavaScript es débilmente tipado

En los diferentes lenguajes de programación existen dos formas de manejar los tipos de
datos que se pueden almacenar en una variable. Una opción es que sea débilmente tipado y
la otra es que sea fuertemente tipado.

Que un lenguaje de programación sea débilmente tipado significa que no es necesario que el
programador indique explícitamente el tipo de dato que guardará una variable. Esto, dado
que el intérprete o compilador infiere el tipo de dato según el valor asignado a la variable. Lo
anterior implica, en la práctica, que sus variables pueden cambiar de un tipo a otro sin
problemas durante la ejecución de un programa. Es decir, a una variable que en un principio
fue del tipo Number se le puede asignar un dato del tipo String sin problemas, provocando
que ahora la variable sea de este último tipo.

En los lenguajes de programación fuertemente tipados, en cambio, el tipo de dato debe ser
declarado junto con la definición de la variable. Esto implica que esa variable sólo aceptará
datos del tipo definido durante todo el programa. En este caso, si a una variable del tipo
Number se le quisiera asignar un dato del tipo String, el programa arrojaría un error y no
podría continuar con su ejecución.

Como ya lo mencionamos, JavaScript es un lenguaje débilmente tipado por eso no requiere

de la declaración del tipo de dato al crear una variable, basta con sólo con indicarlo, como
muestra el siguiente código:

var nombre;
var edad;

Si JavaScript fuera fuertemente tipado, se tendría que definir el tipo de dato junto con la
creación de la variable, como se muestra en el siguiente ejemplo (a modo ilustrativo dado
que no es JavaScript):

_ 4

www.desafiolatam.com
 String nombre;
Number edad;

Puedes profundizar más en cómo influye la forma de manejar los tipos de datos en
JavaScript en la forma en que programamos, puedes consultar el Material Apoyo Lectura -
Aplicar correctamente los tipos de datos, ubicado en “Material Complementario”. En este
artículo podrás conocer las ventajas y desventajas del tipado débil de JavaScript.

Rutinas con variables y tipos de datos.

En JavaScript, es importante siempre tener en cuenta el tipo de datos que estamos

manejando en una variable, esto con el propósito de realizar las operaciones adecuadas
dependiendo del dato disponible, debido a que si sumamos dos números que sean del tipo
de dato string, el resultado obtenido no será precisamente la suma de esos dos números.

Imagen 2. Rutinas con variables y tipos de datos string.

Fuente: Desafío Latam

Como se puede observar en la imagen anterior, el resultado de la suma que debería ser el
número 9, no es el mostrado, en su caso el resultado mostrado es “54”, esto se debe a que
los dos valores que estamos intentando sumar (dato1 y dato2) están recibiendo valores del
tipo string, mostrando otro resultado debido a otro proceso denominado concatenación, el
cual, explicaremos más adelante.

Ahora, realicemos la prueba para visualizar qué tipos de datos son recibidos y guardados en
una variable cuando se utiliza el método “prompt()”. Para ello, crea una carpeta en tu lugar
de trabajo y luego dentro de ella crea dos archivos, un index.html y un script.js. Dentro del
index.html debe ir lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>

_ 5

www.desafiolatam.com
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Este es un documento HTML con JavaScript</h1>
<script src="script.js"></script>
</body>
</html>

Luego en el archivo script.js, se debe incluir el código que permita solicitar un valor,
almacenarlo en una variable y luego mostrarlo con un document.write(), indicando el tipo
de dato mediante el operador “typeof”. Como se muestra a continuación:

var dato = prompt("Ingrese un dato: ");

document.write(typeof dato);

En el caso de ingresar un número, por ejemplo el número tres (3), el resultado en el

documento del navegador web sería:

Imagen 3. Resultado de la ejecución del código.

Fuente: Desafío Latam

Como se puede observar, para el método “prompt()” siempre regresa un valor del tipo string.
En este caso, en el uso de la función “parseInt()” es importante pasar los datos a tipo
“Number” y poder realizar las operaciones matemáticas correspondiente con el tipo de
datos “Number”.

Realicemos ahora el siguiente ejemplo, en donde procesamos la suma de dos variables

numéricas y dos variables como cadena de caracteres por la consola del navegador web.
Veamos que sucede:

_ 6

www.desafiolatam.com
 Imagen 4. Iniciando variables con valores en la consola del navegador.
Fuente: Desafío Latam

Si realizamos una operación matematica básica con esos dos términos, el resultado sería:

Imagen 5. Resultado de la ejecución del código anterior.

Fuente: Desafío Latam

Pero en el caso de tener dos variables con cadena de caracteres, como se muestra a
continuación:

Imagen 6. Iniciando variables con valores en la consola del navegador.

Fuente: Desafío Latam

Imagen 7. Resultado de la ejecución del código anterior.

Fuente: Desafío Latam

Se puede observar que el resultado no es una suma como se hace en los procesos
matemáticos básicos con números, sino que une ambas palabras en una sola. A esto se le
denomina concatenación.

_ 7

www.desafiolatam.com
Concatenación de variables

En un ejemplo anterior se mostró el valor de dos variables diferentes (nombre y edad) en

una página web a través de JavaScript. Para ello, fue utilizado el siguiente código:

var nombre;
var edad;

nombre = prompt("Ingrese su nombre");

edad = prompt("Ingrese su edad");

document.write(nombre);
document.write(" ");
document.write(edad);

Concatenar dos variables implica juntar su contenido en una única variable o resultado, para
ello se puede utilizar el operador +, si bien este operador sirve para sumar valores
numéricos, cuando se aplica sobre strings su resultado es una concatenación.

1 + 2; // Da como resultado el número 3

​
"hola" + 1; // Da como resultado el string "hola1"
​
"hola"+" "+"desafío latam"; // Da como resultado "hola desafío latam"

¡Prueba estos ejemplos por tu cuenta en la consola del navegador!

Operaciones matemáticas con variables

En las variables también podemos realizar operaciones matemáticas entre ellas, por
ejemplo:

var num1 = 10;

var num2 = 20;

var resultado = num1 + num2;

document.write("La suma de los números" + " " + num1 + " " + " y " +
num2 + " " + "es:" + " " + resultado);

_ 8

www.desafiolatam.com
En las variables también podemos almacenar operaciones matemáticas, por ejemplo:

var multiplica = 5 * 9;

document.write("Resultado de multiplicación: " + multiplica);

Las variables son de mucha ayuda y una gran herramienta al momento de programar y
manipular datos. Por el contrario, cuando no se requiere que estas variables se modifiquen,
se utiliza el recurso de las “constantes”.

Interpolación de variables

Con las últimas versiones de JavaScript se agregó una nueva forma de concatenar strings
en JavaScript: la interpolación. Esta operación permite concatenar varias variables, con un
resultado idéntico al del operador +, pero mucho más cómodo de usar para quien escribe el
código, tanto la interpolación como la concatenación de variables se utiliza principalmente,
para generar textos de ayuda o información para el usuario.

En la interpolación, todas las variables involucradas se colocan dentro de dos operadores

backtick (`).

`Esto es un texto interpolado`

Para mostrar el valor de una variable dentro de una interpolación y también para diferenciar
el nombre de la variable de un texto cualquiera, se utilizan los llamados placeholders,
correspondientes a marcadores que indican la ubicación de una variable. Un placeholder
comienza con ${ y termina con }. Todo lo que esté dentro de un placeholder será
considerado una variable.

var nombre = "Alexis";

​
alert(`¡Hola ${nombre}!`)

Dentro de un placeholder también se puede incluir cualquier instrucción JavaScript.

alert(`¡Hola ${prompt('Ingresa tu nombre:')}!`)

Para finalizar este punto, vamos a modificar el siguiente código escrito en JavaScript pero
realizado con concatenación para ahora usar interpolación y notar las diferencias entre
ambas opciones, aunque la respuesta sea exactamente igual.

_ 9

www.desafiolatam.com
 var texto_a = "Saludos";
var texto_b = "a todos";
​var num1 = 20;
var num2 = 30;

console.log("La suma de: "+num1+", más: "+num2+", es: "+num1+num2+".");

console.log(texto_a+" "+texto_b+".");

Como se puede apreciar en el código anterior, se muestran dos mensajes utilizando la

modalidad de concatenación para poder unir texto con el valor de las variables que
deseamos. Ahora, si transformamos ese mismo código a una notación con interpolación,
quedaría de la siguiente forma:

var texto_a = "Saludos";

var texto_b = "a todos";
​var num1 = 20;
var num2 = 30;

console.log(`La suma de: ${num1}, mas: ${num2}, es: ${num1+num2}.`);

console.log(`${texto_a} ${texto_b}.`);

Al ejecutar ambos programas, obtendremos el mismo resultado, el cual sería:

La suma de: 20, mas: 30, es: 50.

Saludos a todos.

En este caso, lo que se hizo fue modificar la estructura del mensaje para dejar de concatenar
mediante sumas y pasar a interpolar mediante los operadores backtick (`), el símbolo $ y las
llaves {}. Permitiendo ser más práctica y rápida la inserción de variables en conjunto con
cadenas de caracteres o texto.

_ 10

www.desafiolatam.com
Ejercicio guiado: Resolver un problema usando variables y
tipos de datos

Una vez manejado el uso de variables, es posible utilizarlas para resolver diferentes tipos de
problemas. Se solicita codificar lo siguiente usando JavaScript:

1. Pide al usuario que ingrese su nombre.

2. Pide al usuario que ingrese un número.
3. Pide al usuario que ingrese un segundo número.
4. Muestra la suma, la resta, la división y la multiplicación entre los dos números
ingresados.
5. Debe ser un único mensaje por cada operación (4 en total).
6. El mensaje debe seguir el siguiente formato: {Nombre del usuario}, el resultado de
{nombre de la operación} {primer número} y {segundo número} es {resultado de la
operación}. Por ejemplo: "Alexis, el resultado de sumar 1 y 2 es 3".
7. Para mostrar el mensaje pueden implementar document.write();

● Paso 1: Crear una carpeta en nuestro lugar de trabajo y crear dos archivos dentro de
ella, como lo es index.html y script.js.

● Paso 2: En el archivo index.html, crear la estructura básica de un documento HTML.

● Paso 3: Ahora dentro del script.js, se procede a solicitar los datos al usuario
mediante el método “prompt()” y los almacenamos cada uno de ellos en una variable
distinta:

var nombre = prompt("Ingresa tu nombre");

var num1 = prompt("Ingrese el primer número");
var num2 = prompt("Ingrese el segundo número");

● Paso 4: Realizar los procedimientos matemáticos solicitados y almacenarlos en una

nueva variable.

var nombre = prompt("Ingresa tu nombre");

var num1 = prompt("Ingrese el primer número");
var num2 = prompt("Ingrese el segundo número");

var suma = parseInt(num1)+parseInt(num2);

var resta = parseInt(num1)-parseInt(num2);
var multiplica = parseInt(num1)*parseInt(num2);
var division = parseInt(num1)/parseInt(num2);

_ 11

www.desafiolatam.com
 ● Paso 5: Dentro de una misma estructura de mensaje con el document.write()
mostrar el resultado final para cada operación siguiendo la estructura indicada en el
enunciado, quedando el ejercicio final de la siguiente manera:

var nombre = prompt("Ingresa tu nombre");

var num1 = prompt("Ingrese el primer número");
var num2 = prompt("Ingrese el segundo número");

var suma = parseInt(num1)+parseInt(num2);

var resta = parseInt(num1)-parseInt(num2);
var multiplica = parseInt(num1)*parseInt(num2);
var divide = parseInt(num1)/parseInt(num2);

document.write(nombre+" el resultado de sumar "+num1+" + "+num2+" es

"+suma+". ");
document.write(nombre+" el resultado de restar "+num1+" - "+num2+" es
"+resta+". ");
document.write(nombre+" el resultado de multiplicar "+num1+" * "+num2+"
es "+multiplica+". ");
document.write(nombre+" el resultado de dividir "+num1+" / "+num2+" es
"+divide+". ");

Por lo tanto, el resultado final en el navegador web sería:

Imagen 8. Resultado de la ejecución del código.

Fuente: Desafío Latam

_ 12

www.desafiolatam.com
Resumen

● JavaScript es un lenguaje que nos permite añadir dinamismo e interactividad a una

página web.

● A lo largo de esta lectura, hemos ido conociendo herramientas para resolver

problemas de lógica, formas de diagramar flujos y de escribir código de alto nivel,
como lo es el pseudocódigo.

● Además, tuvimos un primer acercamiento con la sintaxis y los principales elementos

de JavaScript, siendo capaces de resolver operaciones matemáticas a través de este
lenguaje.

● Este es sólo el comienzo, ya que cuanto más desarrollemos nuestro pensamiento

lógico, más rápido obtendremos soluciones a nuestros problemas cotidianos en
programación y nuestros programas harán más a menudo lo que esperamos que
realicen con un menor esfuerzo. El desarrollo del pensamiento lógico y nuestra
capacidad de abstracción son habilidades que se irán desarrollando con práctica y
constancia.

_ 13

www.desafiolatam.com