Introducción a Javascript

En la parte 1 aprendimos lo básico de Javascript, que son las variables, los tipos básicos y alguna estructura de control. En esta segunda parte vamos a profundizar en los diferentes tipos que tenemos a nuestra disposición para construir páginas web.

Antes de nada, aprenderemos cómo podemos probar nuestro código de javascript directamente en el navegador. Para ello tenemos que abrir la consola de desarrollo. en MAC usaremos en chrome el comando option + command + i y en windows/linux usaremos shift + control + j.

También podremos usar click derecho del ratón en cualquier lado de una página web y pulsar en inspeccionar. La pestaña que nos interesa ahora mismo es la de consola (console):

Podremos escribir cualquier código de Javascript y ejecutarlo. en las variables podremos ver su contenido simplemente escribiendo su nombre. Cualquier console.log en un código de Javascript se mostrará en la consola.

Sabido esto ahora podrás probar cualquier código escrito en el post. Empecemos aprendiendo que Javascript tiene 6 tipos primitivos:

• undefined

• boolean

• number

• bigint

• string

• symbol

A una variable se le puede asignar cualquier tipo primitivo, por ejemplo:

let variable = 'texto'
variable = true
variable = 1234

Y podremos saber de qué tipo es el valor de la variable usando la función typeof:

let variable = 'texto'
console.log(typeof variable) // "string"

variable = true
console.log(typeof variable) // "boolean"

variable = 1234
console.log(typeof variable) // "number"

Undefined

Undefined es un tipo especial que designa a variables que no tienen un valor definido:

const undefinedVar
console.log(typeof undefinedVar) // "undefined"

console.log(typeof thisVariableDoesNotExists) // "undefined"

Boolean

Un booleano es un tipo de datos que solo puede guardar dos valores. true o false.

Podemos usar el wrapper Boolean para transformar cualquier tipo a Boolean:

Boolean('Hola') // true
Boolean('') // false

Boolean(20) // true
Boolean(Infinity) // true
Boolean(0) // false

Boolean({foo: 100}) // true
Boolean({}) // true

Boolean(null) // false

Number

Un número es un tipo de javascript que nos permite crear números enteros, decimales e incluso en números en diferentes bases:

const intNumber = 50
const floatNumber = 50.1292

const octal = 0o12345
const hexa = 0xf

const scientificNotation = 2.12e10

Un tipo especial de número es NaN (Not a number). NaN será el resultado de cualquier operación cuyo resultado no puede ser un número.

console.log('hola' / 10) // NaN

Podemos convertir cualquier tipo a número usando su "wrapper" Number. Si no puede convertirlo el resultado será NaN:

Number('10') // 10
Number('10,122') // NaN
Number('10.122') // 10.122
Number(true) // 1
Number(false) // 0

Bigint

¿Qué ocurre si queremos representar un número mas grande que el máximo que permite number? Para ello podemos usar el tipo bigint. Para crear bigint simplemente hay que terminar cualquier número en n.

const hugeNumber = 9007199254740991n

Raro es el caso donde son necesario usarlos. Consumen mucha mas memoria que los números normales. Los bigint solo pueden operar entre otros bigint. Si operamos con numbers, dará error:

const hugeNumber = 9007199254740991n + 10 // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
const hugeNumber = 9007199254740991n + 10n // 90071919229254741001n

String

El tipo string nos permite crear cadenas de texto. Como ya vimos en la primera parte podemos usar comillas simples, dobles o invertidas.

Es uno de los tipos más completos que hay y dispone de muchas funciones y propiedades para trabajar con la string, por ejemplo:

let text =  'hola, esto es un string'
text.length
23
text.toLocaleUpperCase()
'HOLA, ESTO ES UN STRING'
text.charAt(3)
'a'
text.substring(0, 4)
'hola'
text.replace('hola', 'holi, que ase,')
'holi, que ase, esto es un string'

length:

Devuelve la longitud de la cadena de texto.

toLocaleUpperCase:

Devuelve un nuevo String con las letras en mayúsculas.

charAt:

Devuelve el carácter que se encuentra en esa posición, empieza contando en 0.

substring:

Devuelve un nuevo string con los caracteres que se encuentran entre esas posiciones.

replace:

Reemplaza el carácter, por la nueva cadena de texto dada.

Symbol

Los Symbols son un tipo especial que devuelve un identificador único cada vez que es ejecutado. Es un tipo más complejo de tipo que solo tiene sentido en cursos de javascript más avanzados. Por ahora con saber que existen es suficiente.

Tipos complejos

Por otro lado, javascript tiene una multitud de tipos y estructuras de datos para facilitar la tarea del programador. Nos vamos a centrar en los 4 mas importantes:

• null

• function

• object

• array

Null

Null es otro tipo especial que y sirve para designar a variables que no tienen valor. Por norma general usaremos siempre null cuando queramos crear una variable vacía en vez de undefined.

functions

Una función nos permite encapsular código dentro de ella y que podamos invocar cuantas veces queramos. Podremos reutilizar código sin repetirlo.

Una función puede tener N parámetros de entrada y tiene uno de salida. Las funciones tienen dos sintaxis donde también cambia su comportamiento, pero ahora mismo eso no es importante entrar en ese detalle:

const sum = function (a, b) {
  return a + b
}

function namedSum (a, b) {
  return a + b
}

const arrowSum = (a, b) => {
  return a + b
}

const inlineArrowSum = (a, b) => a + b

console.log(sum(1, 2)) // 3
console.log(namedSum(1, 2)) // 3
console.log(arrowSum(1, 2)) // 3
console.log(inlineArrowSum(1, 2)) // 3

Las dos primeras sintaxis son equivalentes, al igual que las dos últimas con la flecha. Para la mayoría de los casos se comportan igual. Por norma general querremos usar la sintaxis con la flecha, por ser más escueta y porque en los casos donde no se comportan igual, normalmente hay que usar la segunda forma,

Cuando usamos las arrow function (su nombre en inglés) podemos obviar los corchetes y el return si lo escribimos todo en la misma línea.

Objetos

Todo lo demás que proporciona javascript son derivados de los objetos. Los objetos en Javascript nos permiten agrupar otros tipos en una estructura jerárquica y organizada.

Los objetos se escriben usando la sintaxis JSON aunque con la particularidad de que además podremos añadir funciones y otros tipos de javascript:

const person = {
  name: 'Juan',
  surname: 'Palomo',
  age: 18,
  hasBrothers: false,
  address: {
    street: 'Calle falsa 123',
    city: 'Madrid',
    country: 'Spain'
  }
}

La sintaxis del objeto es clave: valor, cada línea se separa con una, de la siguiente y podremos anidar objetos dentro de objetos.

Para acceder a las valores hay que ir concatenando las claves con un punto:

console.log(person.name) // 'Juan'
console.log(person.address.country) // 'Spain'

Arrays

Los arrays es una estructura que nos permite guardar múltiples valores y de diferentes tipos en forma de lista:

const items = [1, false, 'texto', { name: 'pepe' }]

Hay muchas formas de crear arrays. La más común es crearlos directamente con corchetes y separando cada elemento con comas.

Podemos acceder a cada elemento conociendo su posición dentro del Array, empezando siempre por 0:

console.log(items[0]) // 1
console.log(items[1]) // false
console.log(items[2]) // 'texto'
console.log(items[3].name) // 'pepe'

Los arrays son estructuras muy completas, con múltiples funciones:

console.log(items.length) // 4
console.log(items.pop()) // { name: 'pepe' }
console.log(items) // [1, false, 'texto']
console.log(items.push('add new item'))
console.log(items) // [1, false, 'texto', 'add new item']

length:

Devuelve la cantidad de elementos dentro del array.

pop:

Devuelve el último elemento del array y lo elimina del array.

push:

Inserta un elemento al final del Array.

Esto solo es una pequeña muestra de la cantidad de funciones de la que los array disponen. También podemos iterar sobre ellos:

const numbers = [1, 20, 12, -1]

let maxNumber = 0
for (let i = 0; i < numbers.length; i++) {
  maxNumber = numbers[i] > maxNumber ? numbers[i] : maxNumber
}

console.log(maxNumber) // 20

Hay formas más óptimas de iterar sobre un array, Por ejemplo:

const numbers = [1, 20, 12, -1]

let maxNumber = 0
for (const item of numbers) {
  maxNumber = item > maxNumber ? item : maxNumber
}

console.log(maxNumber) // 20

Aunque normalmente se usarán métodos que nos proporciona el array como por ejemplo:

const numbers = [1, 20, 12, -1]

let maxNumber = 0

numbers.forEach(item => {
  maxNumber = item > maxNumber ? item : maxNumber
})

Y sin embargo, aún no es la forma más óptima de encontrar el elemento más grande dentro de un array. Pero eso queda fuera del Scope de este post.

En resumen, en este post hemos sentado las bases para poder entender cómo funciona Javascript y los diferentes tipos de datos con los que puede tratar. En el próximo curso avanzaremos algo más en esta parte y se podrá empezar a hacer cosas más interesantes con HTML y CSS.