
Las variables vienen en todas las formas y tamaños. Algunas son usadas para guardar números, otras texto y algunas para guardar **tipos de datos** mucho más complejos.

Hoy descubrirás 8 tipos de datos en JavaScript y sus principales características.

## String

Un String es una serie de caracteres usada para representar texto.

Los Strings se escriben con comillas simples o dobles.

```js
let text = 'valor'
```

## Number

Number puede almacenar cualquier número (entero y flotante) desde -9.007.199.254.740.991 hasta 9.007.199.254.740.991

```js
let numberValue = 10
```

## BigInt

En JavaScript el tipo "number" a veces puede quedarse corto. Cuando necesitas números realmente grandes o pequeños entonces utiliza BigInt.

```js
let bigInt = 1234567890123456789012345678901234567890n
// La n al final significa que es un BigInt
```

## Boolean

Los Boolean pueden tener dos valores: true o false

```js
let verdadero = true
let falso = false
```

## Symbol

Symbol crea un valor único e inmutable.

Para crear un Symbol se usa la función Symbol(), esta función puede recibir un parámetro del tipo 'String' que puede ser útil para depurar.

```js
let Symbol1 = Symbol('clave')
let Symbol2 = Symbol('clave')

// Incluso con la misma descripción los símbolos no son iguales
Symbol1 === Symbol2 // false
```

## Object

En JavaScript, un objeto es una colección de propiedades, donde cada propiedad es definida como un par clave-valor.

```js
const FabricandoWebSocial = {
  instagram: 'https://www.instagram.com/fabricandoweb/',
  facebook: 'https://www.facebook.com/fabricandolaweb',
  likes: 2000,
}
```

## Null

Null expresa la falta de valor.

```js
let nullValue = null
```

## Undefined

Una variable a la cual no se le ha asignado valor es del tipo undefined. Una función también puede devolver undefined si no retorna ningún valor.

```js
let undefinedValue // undefined
```

## Bonus

Para obtener el tipo de dato de una variable podemos usar el operador typeof

```js
let test = 'hola'
console.log(typeof test) // 'string'
test = 20
console.log(typeof test) // 'number'
test = false
console.log(typeof test) // 'boolean'
```

### Extra

JavaScript es un lenguaje dinámico o débilmente tipado, por lo que una variable no se asocia con ningún tipo y se puede reasignar con cualquier otro. Sin embargo, su valor sí se asocia a un tipo.

```js
let test = 'hola' // Test es del tipo string
test = 20 // Ahora es del tipo number
test = false // Finalmente es del tipo boolean
```


Las variables vienen en todas las formas y tamaños. Algunas son usadas para guardar números, otras texto y algunas para guardar tipos de datos mucho más complejos.

Tipos de datos en JavaScript


Las custom properties o también llamadas 'variables' son un mecanismo de CSS que nos permiten almacenar valores y acceder a ellos.

## ¿Por qué usarlas?

Nos ayudan con el principio DRY (**_Don't Repeat Yourself_** )

Básicamente nos ayudan a evitar que se duplique nuestro código y asignarle un valor más fácil de recordar.
Y lo más importante, nos ofrece la posibilidad de cambiar el valor de nuestras propiedades en un único lugar sin tener que modificarlo en cada uno de los archivos donde lo necesitemos. Haciendo nuestro código más mantenible y escalable.

### Preprocesadores

Hace más de diez años que los preprocesadores nos ofrecen "variables" en css y es una de las razones por las cuales se popularizaron. Pero no fue hasta 2016 que la mayoría de navegadores soportaron el estándar css.

¿Por qué deberíamos usar custom properties en vez de las variables en preprocesadores?

- Son nativas y no es necesario usar un pre-processor.

- Puedes acceder y manipularlas a través de javascript.

- Son dinámicas, si su valor cambia, el navegador actualiza el valor en tiempo de ejecución.

## Cómo usarlas?

Para declarar una custom property, se debe colocar dos guiones en frente del nombre de nuestra custom property (recuerda que distingue mayúsculas y minúsculas).

```css
--white: '#fff';
```

Podemos usar la función var() para acceder al valor de nuestras custom properties. La función recibe dos argumentos:

- El nombre de la custom property
- (Opcional) Un valor fallback en caso de que la custom property sea inválida.

```css
color: var(--white, #eee);
```

Podemos definirlas en cualquier lugar, pero usualmente las encontramos en la pseudo clase :root, debido a que representa la raíz del DOM y permite acceder al valor de una manera global.

```css
:root {
  --main-color: #ec130e;
}

button {
  /* Redifinos su valor en este scope */
  --main-color: #000;
  background-color: var(--main-color); /* #000 */
}
```

## Ejemplos de uso

### Colores

```css
:root {
  /* Paleta primaria */
  --color-primary: #fdd41c;
  --color-secondary: #222831;
  /* Paleta secundaria */
  --color-info: #0ab9ff;
  --color-danger: #ff5a4f;
  --color-warning: #f1c40f;
  --color-success: #30e892;
}
h1 {
  color: var(--color-primary);
}
```

### Font Size y Font Family

```css
:root {
  --heading-size: 32px;
  --main-font: Helvetica, Arial, sans-serif;
}
h1 {
  font-size: var(--heading-size);
  font-family: var(--main-font);
}
```

### Spacing

```css
:root {
  --space-unit: 1em;
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
}
```

### Dark Mode

```css
:root {
  --body-color: #3e5a47;
  --background-color: #fff6dc;
  --heading-color: #4e534c;
}

/* Redifiniendo las custom properties en dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --body-color: #b9f3cc;
    --background-color: #292900;
    --heading-color: #c5eab7;
  }
}
```


Las custom properties o también llamadas 'variables' son un mecanismo de CSS que nos permiten almacenar valores y acceder a ellos.

Custom Properties en CSS


Una de las operaciones más comunes cuando trabajamos con múltiples arrays, se trata de combinarlos para formar un solo array que contenga todos los elementos combinados. En este post, encontrarás tres alternativas para llevar a cabo esta misión 🚀 y sus respectivas ventajas y desventajas.

## Inmutable

Trabajar con arrays en JavaScript no es una tarea sencilla. Si no tenemos cuidado, podemos modificar el valor original de nuestros arrays (mutarlos). Si nuestra intención es rehusar o no modificar nuestros arrays originales, debemos entonces recurrir a las siguientes alternativas.

### Concat

El método **concat()** recibe como parámetro los arrays que deseamos combinar y no muta ninguno de los arrays existentes.

```js
const sports = ['🏀', '⚽️', '⚾️']
const instruments = ['🎻', '🎸', '🎺']

const hobbies = [].concat(sports, instruments)
// [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
```

Una de las grandes ventajas de esta alternativa es que funciona en todos los navegadores modernos incluso Internet Explorer.

### Spread Operator

Esta opción es más concisa y al igual que el método **concat()** no muta ninguno de los arrays existentes.

```js
const sports = ['🏀', '⚽️', '⚾️']
const instruments = ['🎻', '🎸', '🎺']

const hobbies = [...sports, ...instruments]
// [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
```

Algo que puede considerarse una desventaja (no para muchos), no es compatible con Internet Explorer.

## Mutable

Existe la posibilidad de que queramos **mutar** nuestro array original o no nos importa que esto suceda. En ese caso podemos recurrir al método push()

### Push

A veces no quieres o no necesitas crear un nuevo array y prefieres combinar todo dentro de uno de los arrays existentes.

```js
const sports = ['🏀', '⚽️', '⚾️']
const instruments = ['🎻', '🎸', '🎺']

sports.push(...instruments) // Esto modifica nuestro array sports
console.log(sports) // [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
```

Una alternativa con **push()** es declarar un nuevo array que reciba los elementos combinados sin mutar los arrays originales.

```js
const sports = ['🏀', '⚽️', '⚾️']
const instruments = ['🎻', '🎸', '🎺']

const hobbies = []
hobbies.push(...sports, ...instruments)
console.log(hobbies) // [ '🏀', '⚽️', '⚾️', '🎻', '🎸', '🎺' ]
```

## Bonus: Combinar arrays removiendo duplicados

Uno de los problemas que podemos afrontar al momento de combinar nuestros arrays es el hecho de que pueden existir elementos duplicados.

Gracias a **Set** podemos filtrar todos los elementos duplicados en nuestro nuevo array.

```js
const sports = ['🏀', '⚽️', '⚾️']
const activities = ['🏑', '🥋', '🏀', '⚽️']

/* Concat */
const hobbies = [...new Set([].concat(sports, activities))]
// [ '🏀', '⚽️', '⚾️', '🏑', '🥋' ]

/* Spread Operator */
const hobbies = [...new Set([...sports, ...activities])]
// [ '🏀', '⚽️', '⚾️', '🏑', '🥋' ]
```

Para aprender más sobre como eliminar elementos duplicados en un array, te recomiendo que le eches un vistazo a [este artículo](https://fabricandoweb.com/javascript/remover-elementos-duplicados 'Remover elementos duplicados en un array con JS') en el que hablo sobre este tema con más detalle.


En este post, encontrarás tres formas de combinar arrays con JavaScript y sus respectivas ventajas y desventajas.

Combinar Arrays en JavaScript


En este tutorial, aprenderás tres maneras de filtrar elementos duplicados en un array y obtener uno nuevo con valores únicos.

## Usando Set

Este método es mi favorito por su simpleza y el poco espacio que necesita. 😁

```js
const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = [...new Set(animals)]
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

Un [Set](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Set) es una colección de elemento únicos

Cuando un nuevo Set se crea a través de un Array que contiene elementos duplicados, el constructor se encarga de mantener solo los elementos únicos.

```js
const uniqueAnimals = new Set(animals) // Set(5) {'🐶','🐭','🦊','🐻','🦁', __proto__}
```

Gracias al spread operator podemos convertir los elementos de nuestro Set a un Array de nuevo.

```js
;[...new Set(animals)] // [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

## Usando filter e indexOf()

```js
const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = animals.filter(
  (animal, index) => animals.indexOf(animal) === index
)
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

El método filter devuelve un nuevo Array con los valores que cumplen con un criterio

```js
const uniqueAnimals = animals.filter((animal) => animal === '🦊')
// [ '🦊' ]
```

El método indexOf nos devuelve el primer índice en el que se puede encontrar el elemento dado.

```js
const uniqueAnimals = animals.indexOf('🦊')
// 3
```

Combinando estos dos métodos, cuando un elemento duplicado es encontrado por primera vez, su índice coincide con la primera ocurrencia y el elemento es agregado a nuestro array. Al contrario de los siguientes índices del mismo elemento que no cumplirán con el índice de la primera ocurrencia, por lo tanto no cumplen con el criterio y no son devueltos.

## Usando forEach e includes

```js
const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = []
animals.forEach(
  (animal) => !uniqueAnimals.includes(animal) && uniqueAnimals.push(animal)
)
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

ForEach nos permite recorrer el arreglo del principio a fin.

El método includes determina si un array incluye un elemento determinado

```js
animals.includes('🐭') // true
animals.includes('🐸') // false
```

A medida que recorremos nuestro array animals, comprobamos si el elemento existe en nuestro nuevo array para determinar si debemos agregarlo o no. ¡Al final dispondremos de un nuevo array con animales únicos!


En este tutorial, aprenderás tres maneras de filtrar elementos duplicados en un array y obtener uno nuevo con valores únicos.

Artículos por Tema

Últimos artículos

Tipos de datos en JavaScript

Custom Properties en CSS

Combinar Arrays en JavaScript

Remover elementos duplicados en un array con JavaScript

Artículos por Tema

Últimos artículos

Tipos de datos en JavaScript

Custom Properties en CSS

Combinar Arrays en JavaScript

Remover elementos duplicados en un array con JavaScript

¡Suscríbete a la newsletter!