Bienvenidos sean a este post, hoy veremos otra forma de definir variables.
En este post vimos como se define una variable, si bien dijimos que las variables podian ser locales o globales, esto no es tan asi dado que en realidad todas eran globales asi que podian ser accedidas por los distintos tags de script, a partir de la implementacion del estandar ES6/ES2015 se agrego la posibilidad el concepto de rango (scope), esto es por medio de let, esta tiene algunas particularidades:
- definir variables como locales en un bloque
- no pueden ser redeclaradas
Antes de continuar veamos como es su sintaxis:
let nombre_variable = valor;Se define de la misma forma que var, inclusive si solamente lo declaran, es decir no le asignan un valor, esto se puede hacer posteriormente, veamos un par de ejemplos para verlo en accion y sus principales diferencias con var, para ello generen un nuevo archivo en el escritorio con externsion HTML y agreguenle el siguiente codigo:
ejemplo.html
<html>
<head>
<script language="javascript">
<!--
document.title="Ejemplo de let";
let x = "Un ejemplo simple";
//-->
</script>
</head>
<body>
<script>
<!--
document.write(x);
//-->
</script>
</body>
</html>Aqui tenemos un ejemplo muy simple, primero tenemos un tag de script donde definimos el titulo del doccumento y luego definimos una variable llamada x por medio de let y le asignamos un valor, en el cuerpo del html tenemos otro tag de script donde mostraremos el valor de la variable antes definida, veamos como es su salida:
Hasta aca todo normal sin muchas diferencias pero tomemos el segundo tag y vamos a modiicarlo de la siguiente manera:
<script>
<!--
let x = "Otro ejemplo";
document.write(x);
//-->
</script>En este caso redefinimos a la variable anterior, si la recargan nos quedara en blanco y si inspeccionan el log de la pagina veremos un error como el siguiente:
Ahora vamos a modificar el codigo nuevamente de la siguiente manera:
<html>
<head>
<script language="javascript">
<!--
document.title="Ejemplo de let";
let x = "Un ejemplo simple";
function mensaje(msj)
{
let x = msj;
document.write(x + "<br>");
}
//-->
</script>
</head>
<body>
<script>
<!--
mensaje("otro ejemplo");
document.write(x);
//-->
</script>
</body>
</html>En este caso hicimos un par de modificaciones siimples, la primera fue agregar una funcion dentro del primer tag, esta recibira un argumento y dentro de esta redefiniremos a la variable x y le pasaremos el dato que recibimos como argumento, lo siguiente sera mostrar el contenido de la variable, la otra modificacion es llamar a esta funcion desde el otro tag con un nuevo mensaje y seguimos mostrando el valor de x, veamos como es la salida
Observen como no nos dio ningun error al redefinir la variable, esto porque lo hicimos fuera del rango de la otra, y al modificar el valor de esta no afecto a la global, como vemos en la imagen, asi que esto nos permite trabajar mejor con los distintos rangos, esta es basicamente la diferencia entre definir una variable con var o let.
En resumen, hoy hemos visto a let, que es, para que sirve, cual es la diferencia con var, que nos permite y que no, tambien hemos visto unos ejemplos para poder ver todo lo comentado anteriormente, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 