> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
[](https://youtube.com/watch?v=rEHV3fFMfn0 "Tipos de datos en JavaScript")
Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web.
@ -21,7 +24,7 @@ Crear y **declarar** una variable tiene la siguiente sintaxis **[keyword] [name]
### Tarea - trabajar con variables
1. **Declare una variable**. Declaremos una variable usando la palabra clave `let`:
1. **Declara una variable**. Declaremos una variable usando la palabra clave `let`:
```javascript
let myVariable;
@ -39,7 +42,7 @@ Crear y **declarar** una variable tiene la siguiente sintaxis **[keyword] [name]
`myVariable` ahora se ha *inicializado* con el valor 123.
1. **Refactor**. Reemplace su código con la siguiente declaración.
1. **Refactorizar código**. Reemplace su código con la siguiente declaración.
```javascript
let myVariable = 123;
@ -66,9 +69,9 @@ La declaración e inicialización de una constante sigue los mismos conceptos qu
const MY_VARIABLE = 123;
```
CLas constantes son similares a las variables, con dos excepciones:
Las constantes son similares a las variables, con dos excepciones:
- **Debe tener un valor**. Las constantes deben inicializarse o se producirá un error al ejecutar el código.
- **Deben tener un valor**. Las constantes deben inicializarse o se producirá un error al ejecutar el código.
- **La referencia no se puede cambiar**. La referencia de una constante no se puede cambiar una vez inicializada, o se producirá un error al ejecutar el código. Veamos dos ejemplos:
- **Valor simple**. NO se permite lo siguiente:
@ -78,11 +81,11 @@ CLas constantes son similares a las variables, con dos excepciones:
PI = 4; // no permitido
```
- **La referencia de objeto está protegida**. NO se permite lo siguiente.
- **La referencia del objeto está protegida**. NO se permite lo siguiente.
```javascript
const obj = { a: 3 };
obj = { b: 5 } // o permitido
obj = { b: 5 } // no permitido
```
- **El valor del objeto no está protegido**. Se permite lo siguiente:
@ -94,7 +97,7 @@ CLas constantes son similares a las variables, con dos excepciones:
Arriba está cambiando el valor del objeto pero no la referencia en sí, lo que lo permite.
> Tenga en cuenta que una `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _immutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
> Tenga en cuenta que `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _immutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
## Tipos de datos
@ -120,52 +123,52 @@ Hay varios tipos de operadores que se pueden utilizar al realizar funciones arit
| `-` | **Resta**: Calcula la diferencia de dos números | `1 - 2 //la respuesta esperada es -1` |
| `*` | **Multiplicación**: Calcula el producto de dos números | `1 * 2 //la respuesta esperada es 2` |
| `/` | **División**: Calcula el cociente de dos números | `1 / 2 //la respuesta esperada es 0.5` |
| `%` | **Resto**: Calcula el resto a partir de la división de dos números | `1 % 2 //la respuesta esperada es 1` |
| `%` | **Restante**: Calcula el resto a partir de la división de dos números | `1 % 2 //la respuesta esperada es 1` |
✅ ¡Pruébalo! Pruebe una operación aritmética en la consola de su navegador. ¿Te sorprenden los resultados?
### Cadenas
### String
Las cadenas son conjuntos de caracteres que residen entre comillas simples o dobles.
Las cadenas (Strings) son conjuntos de caracteres que residen entre comillas simples o dobles.
- `'Esto es una cadena'`
- `"Esto también es una cadena"`
- `let myString = 'Este es un valor de cadena almacenado en una variable';`
- `'Esto es un String'`
- `"Esto también es un String"`
- `let myString = 'Este es un valor del String almacenado en una variable';`
Recuerde utilizar comillas al escribir una cadena, de lo contrario JavaScript asumirá que es un nombre de variable.
Recuerde utilizar comillas al escribir un String, de lo contrario JavaScript asumirá que es un nombre de variable.
### Formateo de cadenas
### Formateo de Strings
Las cadenas son textuales y requerirán formato de vez en cuando.
Los Strings son textuales y requerirán formato de vez en cuando.
Para **concatenar** dos o más cadenas, o unirlas, use el operador `+`.
Para **concatenar** dos o más Strings, o unirlas, use el operador `+`.
✅ ¿Por qué `1 + 1 = 2` en JavaScript, pero `'1' + '1' = 11?` Piense en ello. ¿Qué pasa con `'1' + 1`?
** Los literales de plantilla ** son otra forma de formatear cadenas, excepto que en lugar de comillas, se usa la comilla invertida. Todo lo que no sea texto sin formato debe colocarse dentro de los marcadores de posición `${ }`. Esto incluye cualquier variable que pueda ser cadenas.
**Los literales de plantilla** son otra forma de formatear Strings, excepto que en lugar de comillas, se usa la comilla invertida. Todo lo que no sea texto sin formato debe colocarse dentro de los marcadores de posición `${ }`. Esto incluye cualquier variable que pueda ser Strings.
```javascript
let myString1 = "Hello";
let myString2 = "World";
let myString1 = "Hola";
let myString2 = "Mundo";
`${myString1} ${myString2}!` //Hello World!
`${myString1}, ${myString2}!` //Hello, World!
`${myString1} ${myString2}!` //¡Hola, mundo!
`${myString1}, ${myString2}!` //¡Hola, mundo!
```
Puede lograr sus objetivos de formato con cualquier método, pero los literales de plantilla respetarán los espacios y saltos de línea.
✅ ¿Cuándo usaría una plantilla literal frente a una cadena simple?
✅ ¿Cuándo usaría una plantilla literal frente a un String simple?
### Booleanos
@ -178,7 +181,7 @@ Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores boole
🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar?
Cuando necesite su código para realizar una tarea, utilizará un función o una función. Analicemos las diferencias.
## Funciones
@ -16,10 +20,94 @@ function name(param, param2, param3) { // definición de función
}
```
## Métodos
## Funciónes (Functions)
En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en varias ubicaciones (lo que dificultaría la actualización cuando llegue el momento), podemos centralizarla en una ubicación y llamarla cuando necesitemos que se realice la operación; ¡incluso puede llamar a funciones desde otras funciones!
Igual de importante es la capacidad de nombrar una función. Si bien esto puede parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Podría pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que dejará de correr el reloj.
## Creating and calling a function
La sintaxis de una función se parece a la siguiente:
```javascript
function nameOfFunction() { // function definition
// function definition/body
}
```
Si quisiera crear una función para mostrar un saludo, podría verse así:
```javascript
function displayGreeting() {
console.log('¡Hola, mundo!');
}
```
Siempre que queremos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de `()`. Vale la pena señalar el hecho de que nuestra función se puede definir antes o después de que decidamos llamarla; el compilador de JavaScript lo encontrará por usted.
```javascript
// calling our function
displayGreeting();
```
> **NOTA:** Existe un tipo especial de función conocida como **método**, que ya ha estado utilizando. De hecho, vimos esto en nuestra demostración anterior cuando usamos `console.log`. Lo que hace que un método sea diferente de una función es que un método está adjunto a un objeto (`consola` en nuestro ejemplo), mientras que una función es flotante libre. Escuchará que muchos desarrolladores usan estos términos indistintamente.
TODO
### Mejores prácticas de función
Hay algunas prácticas recomendadas que se deben tener en cuenta al crear funciones:
- Como siempre, use nombres descriptivos para que sepa lo que hará la función
- Usa **camelCasing** para combinar palabras
- Mantenga sus funciones enfocadas en una tarea específica
## Pasar información a una función
Para que una función sea más reutilizable, a menudo querrá pasarle información. Si consideramos nuestro ejemplo de `displayGreeting` anterior, solo mostrará **¡Hola, mundo!**. No es la función más útil que uno podría crear. Si queremos hacerlo un poco más flexible, como permitir que alguien especifique el nombre de la persona a saludar, podemos agregar un **parámetro**. Un parámetro (también llamado a veces **argumento**), es información adicional enviada a una función.
Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
```javascript
function name(param, param2, param3) {
}
```
Podemos actualizar nuestro `displayGreeting` para aceptar un nombre y mostrarlo.
```javascript
function displayGreeting(name) {
const message = `¡Hola, ${name}!`;
console.log(message);
}
```
Cuando queremos llamar a nuestra función y pasar el parámetro, lo especificamos entre paréntesis.
```javascript
displayGreeting('Paco');
// dice "¡Hola, Paco!" cuando ejecutas el comando
```
## Valores predeterminados
Podemos hacer que nuestra función sea aún más flexible agregando más parámetros. Pero, ¿y si no queremos que se especifiquen todos los valores? Siguiendo con nuestro ejemplo de saludo, podríamos dejar el nombre según sea necesario (necesitamos saber a quién saludamos), pero queremos permitir que el saludo en sí se personalice como desee. Si alguien no quiere personalizarlo, proporcionamos un valor predeterminado en su lugar. Para proporcionar un valor predeterminado a un parámetro, lo configuramos de la misma manera que configuramos un valor para una variable: `parameterName = 'defaultValue'`. Para ver un ejemplo completo:
```javascript
function displayGreeting(name, salutation='Hola') {
console.log(`${salutation}, ${name}`);
}
```
Cuando llamamos a la función, podemos decidir si queremos establecer un valor para el "saludo".
```javascript
displayGreeting('Paco');
// dice "Hola, Paco"
displayGreeting('Paco', 'Hola');
// dice "Hola, Paco"
```
### Parámetro
Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
@ -30,7 +118,9 @@ Los parámetros se enumeran en la parte de definición entre paréntesis y está
### Parámetro
Cuerpo de función
Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/en-US/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?
Podemos hacer esto usando un **valor de retorno**. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.
Aquí define qué tarea debe realizar la función. Una función puede devolver algo o no. Si una función devuelve algo, entonces se usa la palabra clave `return`. La palabra clave `return` espera un valor o referencia de lo que se devuelve así:
@ -52,7 +142,7 @@ En el código anterior, se devuelve la variable `sum`.
### Invocación
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El método`add()` introducido se puede invocar de la siguiente manera:
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El función`add()` introducido se puede invocar de la siguiente manera:
```javascript
@ -64,7 +154,7 @@ Los argumentos `1` y `3` están vinculados a los parámetros `firstValue` y `sec
JavaScript es bastante flexible cuando se trata de invocaciones. No está obligado a proporcionar argumentos para todos los parámetros, el código se ejecutará de todos modos. Sin embargo, dependiendo de lo que le pase, es posible que el código no se comporte como se esperaba.
> Desafío, intente llamar al método`add()` así `add(1)` y vea qué sucede
> Desafío, intente llamar al función`add()` así `add(1)` y vea qué sucede
### Valores predeterminados
@ -93,7 +183,7 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista
## Revisión y autoestudio
TODO
Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.
**Tarea**: [Práctica de tipos de datos](assignment.es.md)
Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos.
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Matrices y bucles")
@ -87,7 +90,7 @@ while (i < 10) {
}
```
✅ ¿Por qué elegiría un bucle for frente a un bucle while? 17K espectadores tenían la misma pregunta sobre StackOverflow, y algunas de las opiniones [podrían ser interesantes para usted](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
✅ ¿Por qué elegiría un bucle for frente a un bucle while? 17K espectadores tenían la misma pregunta sobre StackOverflow, y algunas de las opiniones [podrían ser interesantes para usted](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
pachi
4 years ago