subir/Curso de Fundamentos de JavaScript/01-Introducción a JavaScript/04-Variables y Buenas Prácticas en JavaScript.vtt

WEBVTT

00:00.000 --> 00:03.260
Hola, en esta clase vamos a hablar sobre
variables,

00:03.260 --> 00:05.960
un concepto muy importante en programación.

00:05.960 --> 00:09.240
Resulta que vamos a imaginarnos este tema
de variables

00:09.240 --> 00:10.600
como si fueran
cajas.

00:10.600 --> 00:14.400
Las cajas normalmente nos permiten
almacenar cosas

00:14.400 --> 00:16.400
o también sacar cosas de
ellas.

00:16.400 --> 00:18.640
Y algo característico que tienen las
cajas

00:18.640 --> 00:21.000
es que pueden tener nombres o etiquetas,

00:21.000 --> 00:23.560
y así podemos saber de quién es la caja,

00:23.560 --> 00:25.360
o qué tiene la caja
adentro,

00:25.360 --> 00:28.760
en fin, nos va a servir muchísimo ese
nombre o esa etiqueta.

00:28.760 --> 00:30.760
Y asimismo, es en
programación.

00:30.760 --> 00:34.360
Imagínate, por ejemplo, que así sería en
JavaScript.

00:34.360 --> 00:37.760
Vamos a colocar primero la palabra clave, let,

00:37.760 --> 00:39.560
ahí le estamos indicando al
programa

00:39.560 --> 00:42.160
que vamos a empezar a escribir una
variable

00:42.160 --> 00:44.560
o que vamos a empezar a crear una caja,

00:44.560 --> 00:47.160
seguido de el nombre o la
etiqueta.

00:47.160 --> 00:50.760
En este caso sería, por ejemplo, caja de Andy.

00:50.760 --> 00:52.160
¿Esto qué nos quiere
decir?

00:52.160 --> 00:54.560
Que ya estamos creando nuestra
caja

00:54.560 --> 00:56.560
en donde vamos a almacenar
cosas,

00:56.560 --> 00:58.160
que en este caso vamos a
decirle

00:58.160 --> 01:01.360
que es una caja que le pertenece a alguien.

01:01.360 --> 01:03.760
Este nombre puede ser el que tú quieras,

01:03.760 --> 01:04.960
yo le coloqué
este,

01:04.960 --> 01:07.760
pero fácilmente le puedes colocar el que
tú desees.

01:07.760 --> 01:11.960
Lo importante acá es que uno tenga un
nombre descriptivo,

01:11.960 --> 01:15.760
es decir, que al leerlo nosotros ya
sepamos de qué se trata.

01:15.760 --> 01:19.360
Y otra cosa muy importante es evitar las
ambigüedades,

01:19.360 --> 01:23.160
es decir, evitar colocarle cosas como C, D, A,

01:23.160 --> 01:25.360
ahí no sabemos de qué se
trata.

01:25.360 --> 01:27.560
Entonces, la idea es que tratemos de que
eso sea

01:27.560 --> 01:31.960
súper descriptivo y que al leerlo ya
sepamos de qué se trata.

01:31.960 --> 01:35.560
Seguido de esto, la idea es poder
almacenar cosas

01:35.560 --> 01:37.360
en esa caja que acabamos de
crear.

01:37.360 --> 01:38.360
¿Cómo lo
hacemos?

01:38.360 --> 01:41.960
Lo hacemos con un igual y a ese igual le
vamos a dar

01:41.960 --> 01:45.160
esas cosas que queremos almacenar dentro
de esa caja.

01:45.160 --> 01:47.960
En este caso vamos a decirle que queremos
almacenar

01:47.960 --> 01:50.360
un juguete que se llama
Woody,

01:50.360 --> 01:52.560
y ahí le vamos a escribir justamente,

01:52.560 --> 01:54.760
entre comillas, pueden ser simples o dobles,

01:54.760 --> 01:56.160
porque es un
texto.

01:56.160 --> 01:59.160
Entonces, así básicamente quedaría nuestra
caja

01:59.160 --> 02:02.760
que tiene un nombre y que adicional tiene
algo por dentro,

02:02.760 --> 02:05.560
ya estamos almacenando algo en esas variables.

02:05.560 --> 02:08.160
Esto en programación justamente se
llama

02:08.160 --> 02:09.560
tanto la
declaración,

02:09.560 --> 02:11.760
que es la parte de la creación de la caja,

02:11.760 --> 02:14.360
y la asignación, que es justamente
eso

02:14.360 --> 02:16.560
que estamos almacenando en esa caja.

02:16.560 --> 02:18.160
Eso se ve muy bonito
ahí,

02:18.160 --> 02:20.960
pero vamos a verlo justamente en el código,

02:20.960 --> 02:22.960
así que vamos a nuestro editor de código.

02:22.960 --> 02:27.160
Vamos a comenzar colocando nuestra palabra
clave, let,

02:27.160 --> 02:29.560
seguido del nombre de la
variable,

02:29.560 --> 02:32.560
que en este caso sería caja de Andy.

02:32.560 --> 02:35.960
Allí lo que vamos a hacer es asignarle a
esa variable

02:35.960 --> 02:36.960
un
valor.

02:36.960 --> 02:38.160
¿Cómo lo vamos a
hacer?

02:38.160 --> 02:40.160
Con comillas simples en este
caso,

02:40.160 --> 02:42.360
y vamos a escribir un
texto.

02:42.360 --> 02:45.360
En este caso es el nombre de uno de los
juguetes de Andy.

02:45.360 --> 02:48.360
Para poder visualizar el contenido de esa
caja,

02:48.360 --> 02:50.560
o ya hablando en
programación,

02:50.560 --> 02:53.160
es el contenido que tiene esta variable,

02:53.160 --> 02:55.360
vamos a utilizar
console.log,

02:55.360 --> 02:58.160
y aquí lo que decimos es caja de Andy,

02:58.160 --> 02:59.960
es decir, el nombre de la
variable,

02:59.960 --> 03:04.360
guardamos, y en la terminal lo que hacemos
es decir note,

03:04.360 --> 03:06.560
y vamos a correr ese
archivo.

03:06.560 --> 03:09.960
Aquí ya nos sale justamente lo que
contiene esa variable,

03:09.960 --> 03:11.160
y todo súper
bien,

03:11.160 --> 03:13.960
ahí nuestro código está funcionando perfecto.

03:13.960 --> 03:16.560
Ahora, con este tema del nombramiento,

03:16.560 --> 03:18.560
esto es demasiado clave e importante.

03:18.560 --> 03:19.560
¿Por
qué?

03:19.560 --> 03:22.160
Porque en programación nosotros
trabajamos

03:22.160 --> 03:23.960
para nuestro yo del
futuro,

03:23.960 --> 03:26.960
es decir, que nosotros en un futuro,
por ejemplo,

03:26.960 --> 03:29.560
volvamos a ver este código y nos
acordemos

03:29.560 --> 03:32.760
de qué es lo que estábamos tratando de
hacer en ese momento,

03:32.760 --> 03:35.360
o incluso trabajar para otras personas,

03:35.360 --> 03:36.760
que otras personas
entiendan

03:36.760 --> 03:40.160
qué es lo que nosotros quisimos decir o
desarrollar en ese código.

03:40.160 --> 03:41.960
Entonces, para
ello,

03:41.960 --> 03:45.760
vamos a colocar, por ejemplo, por acá,
un comentario.

03:45.760 --> 03:48.760
Vamos a escribir cosas que no serían
permitidas

03:48.760 --> 03:50.560
y cosas que sí serían
permitidas

03:50.560 --> 03:53.760
a la hora de escribir nombramientos de las
variables.

03:53.760 --> 03:55.760
Eso siempre teniendo en
cuenta

03:55.760 --> 03:58.360
las buenas prácticas en programación.

03:58.360 --> 04:00.360
Entonces, vamos a escribir
acá,

04:00.360 --> 04:02.760
lo no, voy a escribirlo en mayúscula,

04:02.760 --> 04:04.760
lo no
permitido.

04:04.760 --> 04:05.760
Excelente.

04:05.760 --> 04:07.960
¿Qué cosas no serían
permitidas?

04:07.960 --> 04:10.960
Como, por ejemplo, si yo escribo
C,

04:10.960 --> 04:14.160
y luego acá le decimos
Woody.

04:14.160 --> 04:15.160
Funciona.

04:15.160 --> 04:18.560
Si tú colocas un console.log de C, va a
funcionar.

04:18.560 --> 04:22.760
Pero en un futuro no vamos a saber que esa
C era caja.

04:22.760 --> 04:26.560
Entonces, vamos a tratar de evitar ese
tipo de cosas.

04:26.560 --> 04:28.160
Otra cosa que no sería lo
ideal

04:28.160 --> 04:32.160
sería colocar, por ejemplo, C de Andy.

04:32.160 --> 04:35.360
Que para nosotros puede ser caja de Andy,

04:35.360 --> 04:38.760
pero más adelante tampoco vamos a saber de
qué se trataba.

04:38.760 --> 04:41.160
Otra cosa que no sería lo
ideal

04:41.160 --> 04:44.560
sería, por ejemplo, colocar PC Andy.

04:44.560 --> 04:45.560
¿Por
qué?

04:45.560 --> 04:49.160
Porque acá para nosotros puede ser, por
ejemplo,

04:49.160 --> 04:51.160
la primera caja de
Andy.

04:51.160 --> 04:54.560
Pero para otra persona, PC puede ser
computador.

04:54.560 --> 04:57.560
Entonces, ahí ya empezamos con ese tema de
las ambigüedades.

04:57.560 --> 05:02.160
Entonces, lo más indicado es que sea lo
más descriptivo posible.

05:02.160 --> 05:05.160
Si realmente ves que el nombre puede ser
muy largo,

05:05.160 --> 05:08.160
realmente es mejor ponerlo largo, descriptivo,

05:08.160 --> 05:09.960
y que lo podamos
entender.

05:09.960 --> 05:13.560
Entonces, si en algún momento dices,
por ejemplo,

05:13.560 --> 05:17.960
primer trasteo de
Andy,

05:17.960 --> 05:20.160
esto es súper
largo,

05:20.160 --> 05:23.360
o lo podemos entender como una variable larga,

05:23.360 --> 05:26.160
pero realmente es mucho mejor que tengamos
ahí

05:26.160 --> 05:29.160
ese texto descriptivo y
entendible.

05:29.160 --> 05:33.160
Ahora, cosas que nosotros sí podríamos hacer.

05:33.160 --> 05:35.160
Entonces, vamos a colocarle esto por acá.

05:35.160 --> 05:37.160
Vamos a escribir otro
comentario

05:37.160 --> 05:39.160
y vamos a decirle lo
permitido.

05:39.160 --> 05:40.360
Esa sería
una.

05:40.360 --> 05:42.760
Otra, con el tema de las abreviaciones.

05:42.760 --> 05:46.160
Si, por ejemplo, nosotros tenemos una URL
saliéndonos

05:46.160 --> 05:47.960
un poquito de este ejemplo de
Andy,

05:47.960 --> 05:53.960
y decimos, por ejemplo, no sé, URL del
usuario.

05:53.960 --> 05:57.360
Acá, nosotros, o aquí puede ir cualquier cosa.

05:57.360 --> 06:01.760
Le puedes colocar como http://google.com.

06:01.760 --> 06:06.760
Aquí, mira que URL, pues, ya es una
abreviación que conocemos

06:06.760 --> 06:08.760
y que todos, en
particular,

06:08.760 --> 06:11.960
entenderíamos inmediatamente a qué hacemos
alusión.

06:11.960 --> 06:15.160
Otra cosa que también podríamos hacer es,
por ejemplo,

06:15.160 --> 06:19.160
decir ID del
usuario.

06:19.160 --> 06:22.160
Esto también sería
conocido

06:22.160 --> 06:25.960
y ya digamos que todos en programación o
en general

06:25.960 --> 06:28.960
entendemos que un ID es un identificador.

06:28.960 --> 06:31.960
Entonces, este tipo de
abreviaciones

06:31.960 --> 06:34.160
sí son permitidas precisamente porque,

06:34.160 --> 06:36.160
a nivel general, sí se
conocen

06:36.160 --> 06:38.560
y no tendrían ningún
complique.

06:38.560 --> 06:40.560
Otras cosas a tener en
cuenta

06:40.560 --> 06:42.560
es que si utilizamos varias variables,

06:42.560 --> 06:44.160
como en este
caso,

06:44.160 --> 06:48.160
lo ideal es que esté una debajo de la otra
y en orden.

06:48.160 --> 06:50.560
Es decir, que si nosotros vamos a escribir
variables

06:50.560 --> 06:52.560
en nuestro código
JavaScript,

06:52.560 --> 06:54.560
lo ideal es que las
variables

06:54.560 --> 06:57.560
siempre vayan al inicio de todo nuestro
código.

06:57.560 --> 07:01.560
Adicional, también utilizamos punto y coma
en JavaScript

07:01.560 --> 07:04.560
y yo realmente no lo
utilizo.

07:04.560 --> 07:07.560
Te voy a dejar también aquí en la cajita
de recursos

07:07.560 --> 07:10.560
algunas consideraciones que debes tener en
cuenta

07:10.560 --> 07:13.560
a la hora de escribir puntos y comas o
evitarlos.

07:13.560 --> 07:15.560
Sin embargo, en mi caso no lo
utilizo

07:15.560 --> 07:18.560
precisamente porque JavaScript ya lo hace
por nosotros.

07:18.560 --> 07:21.560
Entonces, voy a dejarlo por
ahí.

07:21.560 --> 07:24.560
Y ahora es importante que nosotros
tengamos en cuenta

07:24.560 --> 07:26.560
que en lo no
permitido,

07:26.560 --> 07:28.560
nosotros no debemos hacer lo siguiente.

07:28.560 --> 07:31.560
Por ejemplo, ya tenemos la variable C,

07:31.560 --> 07:34.560
luego le colocamos, por ejemplo,
CDA

07:34.560 --> 07:38.560
y luego por allá abajo escribimos con
espacios

07:38.560 --> 07:42.560
otra variable, por ejemplo, PC, Andy.

07:42.560 --> 07:46.560
Esto no sería ideal, realmente sería un
poquito desordenado.

07:46.560 --> 07:49.560
Entonces, lo mejor siempre es que tratemos
de trabajarlas

07:49.560 --> 07:51.560
en orden y una debajo de la
otra.

07:51.560 --> 07:55.560
Ya escribimos nuestras primeras variables
con JavaScript

07:55.560 --> 07:58.560
utilizando justamente nuestra palabra clave,
let.

07:58.560 --> 08:01.560
Sin embargo, actualmente en
JavaScript

08:01.560 --> 08:03.560
no solamente escribimos variables con let,

08:03.560 --> 08:05.560
sino que también lo hacemos con const.

08:05.560 --> 08:07.560
¿Cuál es la diferencia entre las
dos?

08:07.560 --> 08:11.560
Let lo utilizamos normalmente para variables,

08:11.560 --> 08:12.560
como su nombre lo
indica,

08:12.560 --> 08:15.560
algo que va a cambiar también con el tiempo.

08:15.560 --> 08:17.560
Por ejemplo, esto, un
contador.

08:17.560 --> 08:21.560
Podemos inicializar una variable, es decir,
su valor,

08:21.560 --> 08:24.560
el primer valorcito que le vamos a poner
es cero.

08:24.560 --> 08:27.560
Y después, la idea es que a medida que
escribamos

08:27.560 --> 08:30.560
nuestro programa, este contador empiece a
cambiar,

08:30.560 --> 08:33.560
que posteriormente sea uno, dos, tres,
o bueno,

08:33.560 --> 08:35.560
dependiendo de cómo sea nuestro programa.

08:35.560 --> 08:38.560
Pero básicamente, let, como es una variable,

08:38.560 --> 08:41.560
puede estar cambiando constantemente en el
tiempo.

08:41.560 --> 08:45.560
Sin embargo, const lo utilizamos para
variables

08:45.560 --> 08:48.560
que son constantes o fijas, es decir,

08:48.560 --> 08:51.560
que no se van a mover, su valor siempre va
a ser el mismo

08:51.560 --> 08:52.560
durante todo el
programa.

08:52.560 --> 08:57.560
Como por ejemplo, pi, que ya sabemos que
su valor es 3.14,

08:57.560 --> 09:00.560
bueno, tiene un poquito más, pero lo
podemos dejar

09:00.560 --> 09:02.560
por el momento así, solamente un número,

09:02.560 --> 09:05.560
y así ya se nos quedaría nuestra constante,

09:05.560 --> 09:08.560
que también nosotros podemos decirle a
const variable,

09:08.560 --> 09:10.560
a pesar de que ya sepamos que es una
constante.

09:10.560 --> 09:12.560
Podemos trabajar tanto let como const,

09:12.560 --> 09:14.560
como si fueran
variables.

09:14.560 --> 09:16.560
Cuéntame, por favor, en los comentarios,

09:16.560 --> 09:18.560
¿cómo te quedaron tus
variables?

09:18.560 --> 09:21.560
¿Qué otras cosas le lograste añadir a
ellas?

09:21.560 --> 09:27.560
Mejor dicho, cuéntanos en los comentarios.