JavaScript-Semana-0

Vista previa del material en texto

JavaScript (Semana 4)
1. ¿Qué es JavaScript?
JavaScript se creó inicialmente para "dar vida a las páginas web".
Los programas en este idioma se llaman scripts . Se pueden escribir directamente en el HTML de una página web y ejecutarse automáticamente a medida que se carga la página.
Los scripts se proporcionan y ejecutan como texto sin formato. No necesitan preparación especial o compilación para ejecutarse.
En este aspecto, JavaScript es muy diferente a otro lenguaje llamado Java .
¿Por qué se llama Java Script?
Cuando se creó JavaScript, inicialmente tenía otro nombre: "LiveScript". Pero Java era muy popular en ese momento, por lo que se decidió que ayudaría posicionar un nuevo lenguaje como un "hermano menor" de Java.
Pero a medida que evolucionó, JavaScript se convirtió en un lenguaje completamente independiente con su propia especificación llamada ECMAScript , y ahora no tiene ninguna relación con Java.
Hoy en día, JavaScript puede ejecutarse no solo en el navegador, sino también en el servidor, o en cualquier dispositivo que tenga un programa especial llamado motor JavaScript .
El navegador tiene un motor integrado a veces llamado "máquina virtual JavaScript".
Es bueno recordar los términos anteriores porque se utilizan en artículos para desarrolladores en Internet. Los usaremos también. Por ejemplo, si "una función X es compatible con V8", probablemente funcione en Chrome y Opera.
¿Cómo funcionan los motores?
Los motores son complicados. Pero lo básico es sencillo.
1. El motor (incrustado si es un navegador) lee ("analiza") el script.
2. Luego convierte ("compila") el script al lenguaje de máquina.
3. Y luego el código de la máquina se ejecuta bastante rápido.
El motor aplica optimizaciones en cada paso del proceso. Incluso observa el script compilado mientras se ejecuta, analiza los datos que fluyen a través de él y optimiza aún más el código de la máquina en función de ese conocimiento.
¿Qué puede hacer JavaScript en el navegador?
JavaScript moderno es un lenguaje de programación "seguro". No proporciona acceso de bajo nivel a la memoria o la CPU, ya que fue creado inicialmente para navegadores que no lo requieren.
Las capacidades de JavaScript dependen en gran medida del entorno en el que se ejecuta. Por ejemplo, Node.js admite funciones que permiten a JavaScript leer / escribir archivos arbitrarios, realizar solicitudes de red, etc.
JavaScript en el navegador puede hacer todo lo relacionado con la manipulación de la página web, la interacción con el usuario y el servidor web.
Por ejemplo, JavaScript en el navegador puede:
· Agregue nuevo HTML a la página, cambie el contenido existente, modifique los estilos.
· Reaccione a las acciones del usuario, ejecute clics del mouse, movimientos del puntero, pulsaciones de teclas.
· Envíe solicitudes a través de la red a servidores remotos, descargue y cargue archivos (las denominadas tecnologías AJAX y COMET ).
· Obtenga y configure cookies, haga preguntas al visitante, muestre mensajes.
· Recuerde los datos del lado del cliente ("almacenamiento local").
¿Qué NO PUEDE hacer JavaScript en el navegador?
Las capacidades de JavaScript en el navegador están limitadas por el bien de la seguridad del usuario. El objetivo es evitar que una página web malintencionada acceda a información privada o dañe los datos del usuario.
Ejemplos de tales restricciones incluyen:
· JavaScript en una página web no puede leer / escribir archivos arbitrarios en el disco duro, copiarlos o ejecutar programas. No tiene acceso directo a las funciones del sistema operativo.
Los navegadores modernos le permiten trabajar con archivos, pero el acceso es limitado y solo se proporciona si el usuario realiza ciertas acciones, como "soltar" un archivo en una ventana del navegador o seleccionarlo mediante una <input>etiqueta.
Hay formas de interactuar con la cámara / micrófono y otros dispositivos, pero requieren el permiso explícito del usuario. Por lo tanto, una página habilitada para JavaScript no puede habilitar furtivamente una cámara web, observar los alrededores y enviar la información a la NSA .
· Las diferentes pestañas / ventanas generalmente no se conocen entre sí. A veces lo hacen, por ejemplo, cuando una ventana usa JavaScript para abrir la otra. Pero incluso en este caso, es posible que JavaScript de una página no acceda a la otra si provienen de diferentes sitios (de un dominio, protocolo o puerto diferente).
Esto se denomina "Política del mismo origen". Para solucionarlo, ambas páginas deben aceptar el intercambio de datos y contener un código JavaScript especial que lo maneje. Cubriremos eso en el tutorial.
Esta limitación es, nuevamente, para la seguridad del usuario. Una página desde la http://anysite.comque un usuario ha abierto no debe poder acceder a otra pestaña del navegador con la URL http://gmail.comy robar información desde allí.
· JavaScript puede comunicarse fácilmente a través de la red con el servidor de donde proviene la página actual. Pero su capacidad para recibir datos de otros sitios / dominios está paralizada. Aunque es posible, requiere un acuerdo explícito (expresado en encabezados HTTP) desde el lado remoto. Una vez más, esa es una limitación de seguridad.
Estos límites no existen si JavaScript se utiliza fuera del navegador, por ejemplo, en un servidor. Los navegadores modernos también permiten complementos / extensiones que pueden solicitar permisos extendidos.
¿Qué hace que JavaScript sea único?
Hay al menos tres cosas buenas sobre JavaScript:
· Integración completa con HTML / CSS.
· Las cosas simples se hacen simplemente.
· Compatible con los principales navegadores y habilitado de forma predeterminada.
JavaScript es la única tecnología de navegador que combina estas tres cosas.
Eso es lo que hace que JavaScript sea único. Por eso es la herramienta más extendida para crear interfaces de navegador.
Dicho esto, JavaScript también permite crear servidores, aplicaciones móviles, etc.
Idiomas "sobre" JavaScript
La sintaxis de JavaScript no se adapta a las necesidades de todos. Diferentes personas quieren diferentes características.
Eso es de esperar, porque los proyectos y los requisitos son diferentes para todos.
Recientemente apareció una plétora de nuevos lenguajes, que se transpilan (convierten) a JavaScript antes de que se ejecuten en el navegador.
Las herramientas modernas hacen que la transpilación sea muy rápida y transparente, lo que permite a los desarrolladores codificar en otro idioma y convertirlo automáticamente "bajo el capó".
Ejemplos de tales lenguajes:
· CoffeeScript es un "azúcar sintáctico" para JavaScript. Introduce una sintaxis más corta, lo que nos permite escribir código más claro y preciso. Por lo general, a los desarrolladores de Ruby les gusta.
· TypeScript se concentra en agregar "tipificación de datos estricta" para simplificar el desarrollo y el soporte de sistemas complejos. Está desarrollado por Microsoft.
· Flow también agrega la escritura de datos, pero de una manera diferente. Desarrollado por Facebook.
· Dart es un lenguaje independiente que tiene su propio motor que se ejecuta en entornos que no son de navegador (como aplicaciones móviles), pero que también se puede transpilar a JavaScript. Desarrollado por Google.
· Brython es un transpilador de Python a JavaScript que permite escribir aplicaciones en Python puro sin JavaScript.
Hay mas. Por supuesto, incluso si usamos uno de los lenguajes transpilados, también deberíamos saber JavaScript para comprender realmente lo que estamos haciendo.
Resumen
· JavaScript se creó inicialmente como un lenguaje solo para navegador, pero ahora también se usa en muchos otros entornos.
· Hoy en día, JavaScript tiene una posición única como el lenguaje de navegador más ampliamente adoptado con integración completa con HTML / CSS.
· Hay muchos lenguajes que se "transpilan" a JavaScript y proporcionan ciertas características. Se recomienda echarles un vistazo, al menos brevemente, después de dominar JavaScript.
2. Consola de desarrollador
El código es propenso a errores. Esmuy probable que cometa errores ... Oh, ¿de qué estoy hablando? Usted está absolutamente va a cometer errores, al menos si eres un humano y no un robot .
Pero en el navegador, los usuarios no ven errores de forma predeterminada. Entonces, si algo sale mal en el script, no veremos qué está roto y no podremos arreglarlo.
Para ver los errores y obtener mucha más información útil sobre los scripts, se han integrado "herramientas de desarrollo" en los navegadores.
La mayoría de los desarrolladores se inclinan por Chrome o Firefox para el desarrollo porque esos navegadores tienen las mejores herramientas de desarrollo. Otros navegadores también proporcionan herramientas de desarrollo, a veces con funciones especiales, pero normalmente se ponen al día con Chrome o Firefox. Por lo tanto, la mayoría de los desarrolladores tienen un navegador "favorito" y cambian a otros si el problema es específico del navegador.
Las herramientas de desarrollo son potentes; tienen muchas características. Para comenzar, aprenderemos cómo abrirlos, ver errores y ejecutar comandos JavaScript.
Google Chrome
Abra la página bug.html .
Hay un error en el código JavaScript. Está oculto a los ojos de un visitante habitual, así que abramos las herramientas de desarrollo para verlo.
Presione F12o, si está en Mac, entonces .Cmd+Opt+J
Las herramientas de desarrollador se abrirán en la pestaña Consola de forma predeterminada.
Se parece a esto:
El aspecto exacto de las herramientas para desarrolladores depende de su versión de Chrome. Cambia de vez en cuando, pero debería ser similar.
· Aquí podemos ver el mensaje de error de color rojo. En este caso, el script contiene un comando "lalala" desconocido.
· A la derecha, hay un enlace en el que se puede hacer clic a la fuente bug.html:12con el número de línea donde se produjo el error.
Debajo del mensaje de error, hay un >símbolo azul . Marca una "línea de comandos" donde podemos escribir comandos JavaScript. Presione Enterpara ejecutarlos.
Ahora podemos ver errores, y eso es suficiente para empezar. Regresaremos a las herramientas para desarrolladores más adelante y cubriremos la depuración con más profundidad en el capítulo Depuración en Chrome .
Entrada multilínea
Por lo general, cuando colocamos una línea de código en la consola y luego presionamos Enter, se ejecuta.
Para insertar varias líneas, presione . De esta forma, se pueden ingresar fragmentos largos de código JavaScript.Shift+Enter
Resumen
· Las herramientas de desarrollo nos permiten ver errores, ejecutar comandos, examinar variables y mucho más.
· Se pueden abrir con la F12mayoría de los navegadores en Windows. Chrome para Mac necesita , Safari: (primero debe habilitarlo).Cmd+Opt+JCmd+Opt+C
3. La etiqueta "script"
Los programas JavaScript se pueden insertar en cualquier parte de un documento HTML con la ayuda de la <script>etiqueta.
La <script>etiqueta contiene código JavaScript que se ejecuta automáticamente cuando el navegador procesa la etiqueta.
Marcado moderno
La <script>etiqueta tiene algunos atributos que rara vez se usan hoy en día, pero que aún se pueden encontrar en el código antiguo:
El typeatributo:<script type=…>
El antiguo estándar HTML, HTML4, requería que un script tuviera una extensión type. Normalmente lo era type="text/javascript". Ya no es necesario. Además, el estándar HTML moderno cambió totalmente el significado de este atributo. Ahora, se puede utilizar para módulos JavaScript. Pero ese es un tema avanzado, hablaremos de módulos en otra parte del tutorial.
El languageatributo:<script language=…>
Este atributo estaba destinado a mostrar el idioma del guión. Este atributo ya no tiene sentido porque JavaScript es el idioma predeterminado. No es necesario utilizarlo.
Comentarios antes y después de los guiones.
En libros y guías realmente antiguos, puede encontrar comentarios dentro de <script>etiquetas, como esta:
<script type="text/javascript"><!--
 ...
//--></script>
Este truco no se usa en JavaScript moderno. Estos comentarios ocultan el código JavaScript de los navegadores antiguos que no sabían cómo procesar la <script>etiqueta. Dado que los navegadores lanzados en los últimos 15 años no tienen este problema, este tipo de comentario puede ayudarlo a identificar el código realmente antiguo.
Guiones externos
Si tenemos mucho código JavaScript, podemos ponerlo en un archivo separado.
Los archivos de secuencia de comandos se adjuntan a HTML con el srcatributo:
<script src="/path/to/script.js"></script>
Aquí, /path/to/script.jshay una ruta absoluta al script desde la raíz del sitio. También se puede proporcionar una ruta relativa desde la página actual. Por ejemplo, src="script.js"significaría un archivo "script.js"en la carpeta actual.
También podemos proporcionar una URL completa. Por ejemplo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Para adjuntar varios scripts, use varias etiquetas:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
Tenga en cuenta:
Como regla general, solo los scripts más simples se colocan en HTML. Los más complejos residen en archivos separados.
El beneficio de un archivo separado es que el navegador lo descargará y lo almacenará en su caché .
Otras páginas que hacen referencia al mismo script lo tomarán de la caché en lugar de descargarlo, por lo que el archivo se descarga solo una vez.
Eso reduce el tráfico y acelera las páginas.
Si srcestá configurado, se ignora el contenido del script.
Una sola <script>etiqueta no puede contener tanto el srcatributo como el código.
Esto no funcionará:
<script src="file.js">
 alert(1); // the content is ignored, because src is set
</script>
Debemos elegir entre un código externo <script src="…">o uno regular <script>.
El ejemplo anterior se puede dividir en dos scripts para que funcione:
<script src="file.js"></script>
<script>
 alert(1);
</script>
Resumen
· Podemos usar una <script>etiqueta para agregar código JavaScript a una página.
· Los atributos typey languageno son obligatorios.
· Se puede insertar un script en un archivo externo <script src="path/to/script.js"></script>.
Hay mucho más que aprender sobre los scripts del navegador y su interacción con la página web. Pero tengamos en cuenta que esta parte del tutorial está dedicada al lenguaje JavaScript, por lo que no debemos distraernos con implementaciones específicas del navegador. Usaremos el navegador como una forma de ejecutar JavaScript, que es muy conveniente para la lectura en línea, pero solo uno de muchos.
4. Estructura de código
Lo primero que estudiaremos son los componentes básicos del código.
Declaraciones
Las declaraciones son construcciones de sintaxis y comandos que realizan acciones.
Ya hemos visto una declaración, alert('Hello, world!')que muestra el mensaje "¡Hola, mundo!".
Podemos tener tantas declaraciones en nuestro código como queramos. Las declaraciones se pueden separar con punto y coma.
Por ejemplo, aquí dividimos "Hola mundo" en dos alertas:
alert('Hello'); alert('World');
Por lo general, las declaraciones se escriben en líneas separadas para que el código sea más legible:
alert('Hello');
alert('World');
Punto y coma
Se puede omitir un punto y coma en la mayoría de los casos cuando existe un salto de línea.
Esto también funcionaría:
alert('Hello')
alert('World')
Aquí, JavaScript interpreta el salto de línea como un punto y coma "implícito". Esto se denomina inserción automática de punto y coma .
En la mayoría de los casos, una nueva línea implica un punto y coma. ¡Pero "en la mayoría de los casos" no significa "siempre"!
Hay casos en los que una nueva línea no significa un punto y coma. Por ejemplo:
alert(3 +
1
+ 2);
El código se genera 6porque JavaScript no inserta punto y coma aquí. Es intuitivamente obvio que si la línea termina con un signo más "+", entonces es una "expresión incompleta", por lo que no se requiere el punto y coma. Y en este caso, funciona según lo previsto.
Pero hay situaciones en las que JavaScript "falla" al asumir un punto y coma donde realmente senecesita.
Los errores que ocurren en tales casos son bastante difíciles de encontrar y corregir.
Un ejemplo de error
Si tiene curiosidad por ver un ejemplo concreto de tal error, consulte este código:
[1, 2].forEach(alert)
No es necesario pensar en el significado de los corchetes []y forEachtodavía. Los estudiaremos más tarde. Por ahora, recuerde el resultado del código: se muestra 1entonces 2.
Ahora, agreguemos un alertantes del código y no terminemos con un punto y coma:
alert("There will be an error")
[1, 2].forEach(alert)
Ahora, si ejecutamos el código, ¡solo alertse muestra el primero y luego tenemos un error!
Pero todo vuelve a estar bien si agregamos un punto y coma después de alert:
alert("All fine now");
[1, 2].forEach(alert)
Ahora tenemos el mensaje "Todo bien ahora" seguido de 1y 2.
El error en la variante sin punto y coma se produce porque JavaScript no asume un punto y coma antes de los corchetes [...].
Entonces, debido a que el punto y coma no se inserta automáticamente, el código del primer ejemplo se trata como una sola declaración. Así es como lo ve el motor:
alert("There will be an error")[1, 2].forEach(alert)
Pero deberían ser dos declaraciones separadas, no una. Tal fusión en este caso es simplemente incorrecta, de ahí el error. Esto puede suceder en otras situaciones.
Recomendamos poner punto y coma entre las declaraciones incluso si están separadas por líneas nuevas. Esta regla es ampliamente adoptada por la comunidad. Observemos una vez más: es posible omitir el punto y coma la mayor parte del tiempo. Pero es más seguro, especialmente para un principiante, usarlos.
Comentarios
A medida que pasa el tiempo, los programas se vuelven cada vez más complejos. Es necesario agregar comentarios que describan qué hace el código y por qué.
Los comentarios se pueden colocar en cualquier lugar de un guión. No afectan su ejecución porque el motor simplemente los ignora.
Los comentarios de una línea comienzan con dos caracteres de barra diagonal //.
El resto de la línea es un comentario. Puede ocupar una línea completa propia o seguir una declaración.
Como aquí:
// This comment occupies a line of its own
alert('Hello');
alert('World'); // This comment follows the statement
Los comentarios de varias líneas comienzan con una barra diagonal y un asterisco /*y terminan con un asterisco y una barra inclinada */.
Me gusta esto:
/* An example with two messages.
This is a multiline comment.
*/
alert('Hello');
alert('World');
El contenido de los comentarios se ignora, por lo que si ponemos código dentro /* … */, no se ejecutará.
A veces puede resultar útil deshabilitar temporalmente una parte del código:
/* Commenting out the code
alert('Hello');
*/
alert('World');
¡Usa accesos rapidos del teclado!
En la mayoría de los editores, una línea de código se puede comentar presionando la tecla de acceso rápido para un comentario de una sola línea y algo como - para comentarios de varias líneas (seleccione un fragmento de código y presione la tecla de acceso rápido). Para Mac, intente en lugar de y en lugar de .Ctrl+/Ctrl+Shift+/CmdCtrlOptionShift
¡Los comentarios anidados no son compatibles!
Puede que no haya /*...*/dentro de otro /*...*/.
Dicho código morirá con un error:
/*
 /* nested comment ?!? */
*/
alert( 'World' );
Por favor, no dudes en comentar tu código.
Los comentarios aumentan la huella general del código, pero eso no es un problema en absoluto. Hay muchas herramientas que minimizan el código antes de publicarlo en un servidor de producción. Quitan los comentarios para que no aparezcan en los guiones de trabajo. Por tanto, los comentarios no tienen ningún efecto negativo sobre la producción.
El modo moderno, "uso estricto"
Durante mucho tiempo, JavaScript evolucionó sin problemas de compatibilidad. Se agregaron nuevas funciones al idioma, mientras que la funcionalidad anterior no cambió.
Eso tenía la ventaja de no romper el código existente. Pero la desventaja era que cualquier error o una decisión imperfecta de los creadores de JavaScript se quedaba estancada en el lenguaje para siempre.
Este fue el caso hasta 2009 cuando apareció ECMAScript 5 (ES5). Añadió nuevas funciones al lenguaje y modificó algunas de las existentes. Para que el código antiguo siga funcionando, la mayoría de estas modificaciones están desactivadas de forma predeterminada. Es necesario que les permita explícitamente de una directiva especial: "use strict".
"Usar estricto"
La directiva se parece a una cadena: "use strict"o 'use strict'. Cuando se encuentra en la parte superior de un guión, todo el guión funciona de manera “moderna”.
Por ejemplo:
"use strict";
// this code works the modern way
...
Muy pronto aprenderemos funciones (una forma de agrupar comandos), así que observemos de antemano que "use strict"se pueden poner al principio de una función. Hacer eso habilita el modo estricto solo en esa función. Pero generalmente la gente lo usa para todo el guión.
Asegúrese de que "use estricto" esté en la parte superior
Asegúrese de que "use strict"esté en la parte superior de sus scripts; de lo contrario, es posible que el modo estricto no esté habilitado.
El modo estricto no está habilitado aquí:
alert("some code");
// "use strict" below is ignored--it must be at the top
"use strict";
// strict mode is not activated
Solo pueden aparecer comentarios arriba "use strict".
No hay forma de cancelar use strict
No existe una directiva como la "no use strict"que revierte el motor a su antiguo comportamiento.
Una vez que ingresamos al modo estricto, no hay vuelta atrás.
Consola del navegador
Cuando usa una consola de desarrollador para ejecutar código, tenga en cuenta que no lo hace use strictde forma predeterminada.
A veces, cuando use strictmarca la diferencia, obtendrá resultados incorrectos.
Entonces, ¿cómo en realidad use stricten la consola?
Primero, puede intentar presionar para ingresar varias líneas y colocarlas en la parte superior, así:Shift+Enteruse strict
'use strict'; <Shift+Enter for a newline>
// ...your code
<Enter to run>
Funciona en la mayoría de los navegadores, a saber, Firefox y Chrome.
Si no es así, por ejemplo, en un navegador antiguo, hay una forma fea pero confiable de asegurarse use strict. Ponlo dentro de este tipo de envoltorio:
(function() {
 'use strict';
 // ...your code here...
})()
¿Deberíamos "usar estricto"?
La pregunta puede parecer obvia, pero no lo es.
Se podría recomendar comenzar los guiones con "use strict"… ¿Pero sabes qué es genial?
El JavaScript moderno admite "clases" y "módulos", estructuras de lenguaje avanzadas (seguramente llegaremos a ellas), que se habilitan use strictautomáticamente. Por lo tanto, no necesitamos agregar la "use strict"directiva, si las usamos.
Entonces, por ahora "use strict";es un invitado bienvenido en la parte superior de sus guiones. Más tarde, cuando su código esté en clases y módulos, puede omitirlo.
A partir de ahora, tenemos que conocerlo use stricten general.
Variables
La mayoría de las veces, una aplicación JavaScript necesita trabajar con información. A continuación se muestran dos ejemplos:
1. Una tienda en línea: la información puede incluir productos que se venden y un carrito de compras.
2. Una aplicación de chat: la información puede incluir usuarios, mensajes y mucho más.
Las variables se utilizan para almacenar esta información.
Una variable
Una variable es un "almacenamiento con nombre" para datos. Podemos usar variables para almacenar golosinas, visitantes y otros datos.
Para crear una variable en JavaScript, use la letpalabra clave.
La siguiente declaración crea (en otras palabras: declara ) una variable con el nombre "mensaje":
let message;
Ahora, podemos poner algunos datos en él usando el operador de asignación =:
let message;
message = 'Hello'; // store the string
La cadena ahora se guarda en el área de memoria asociada con la variable. Podemos acceder a él usando el nombre de la variable:
let message;
message = 'Hello!';
alert(message); // shows the variable content
Para ser concisos, podemos combinar la declaración de variabley la asignación en una sola línea:
let message = 'Hello!'; // define the variable and assign the value
alert(message); // Hello!
También podemos declarar múltiples variables en una línea:
let user = 'John', age = 25, message = 'Hello';
Puede parecer más corto, pero no lo recomendamos. En aras de una mejor legibilidad, utilice una sola línea por variable.
La variante multilínea es un poco más larga, pero más fácil de leer:
let user = 'John';
let age = 25;
let message = 'Hello';
Algunas personas también definen múltiples variables en este estilo de líneas múltiples:
let user = 'John',
 age = 25,
 message = 'Hello';
... O incluso en el estilo de "coma primero":
let user = 'John'
 , age = 25
 , message = 'Hello';
Técnicamente, todas estas variantes hacen lo mismo. Entonces, es una cuestión de gusto y estética personal.
var en vez de let
En scripts más antiguos, también puede encontrar otra palabra clave: en varlugar de let:
var message = 'Hello';
La varpalabra clave es casi la misma que let. También declara una variable, pero de una manera ligeramente diferente, de la "vieja escuela".
Hay diferencias sutiles entre lety var, pero todavía no nos importan. Los cubriremos en detalle en el capítulo La vieja "var" .
Una analogía de la vida real
Podemos captar fácilmente el concepto de "variable" si lo imaginamos como una "caja" de datos, con una etiqueta con un nombre exclusivo.
Por ejemplo, la variable messagese puede imaginar como un cuadro etiquetado "message"con el valor "Hello!"en él:
Podemos poner cualquier valor en la casilla.
También podemos cambiarlo tantas veces como queramos:
let message;
message = 'Hello!';
message = 'World!'; // value changed
alert(message);
Cuando se cambia el valor, los datos antiguos se eliminan de la variable:
También podemos declarar dos variables y copiar datos de una a otra.
let hello = 'Hello world!';
let message;
// copy 'Hello world' from hello into message
message = hello;
// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!
Declarar dos veces provoca un error
Una variable debe declararse solo una vez.
Una declaración repetida de la misma variable es un error:
let message = "This";
// repeated 'let' leads to an error
let message = "That"; // SyntaxError: 'message' has already been declared
Por lo tanto, deberíamos declarar una variable una vez y luego referirnos a ella sin ella let.
Lenguajes funcionales
Es interesante notar que existen lenguajes de programación funcionales , como Scala o Erlang, que prohíben cambiar los valores de las variables.
En dichos lenguajes, una vez que el valor se almacena "en la caja", está ahí para siempre. Si necesitamos almacenar algo más, el lenguaje nos obliga a crear una nueva caja (declarar una nueva variable). No podemos reutilizar el anterior.
Aunque pueda parecer un poco extraño a primera vista, estos lenguajes son bastante capaces de desarrollarse seriamente. Más que eso, hay áreas como los cálculos paralelos donde esta limitación confiere ciertos beneficios. Se recomienda estudiar ese idioma (incluso si no planea usarlo pronto) para ampliar la mente.
Denominación variable
Hay dos limitaciones en los nombres de variables en JavaScript:
1. El nombre debe contener solo letras, dígitos o los símbolos $y _.
2. El primer carácter no debe ser un dígito.
Ejemplos de nombres válidos:
let userName;
let test123;
Cuando el nombre contiene varias palabras, se usa comúnmente camelCase . Es decir: las palabras van uno tras otro, cada palabra excepto la primera partida con una letra mayúscula: myVeryLongName.
Lo que es interesante: el signo de dólar '$'y el guión bajo '_'también se pueden usar en los nombres. Son símbolos regulares, como letras, sin ningún significado especial.
Estos nombres son válidos:
let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"
alert($ + _); // 3
Ejemplos de nombres de variables incorrectos:
let 1a; // cannot start with a digit
let my-name; // hyphens '-' aren't allowed in the name
El caso importa
Las variables nombradas appley AppLEson dos variables diferentes.
Se permiten letras no latinas, pero no se recomiendan
Es posible utilizar cualquier idioma, incluidas letras cirílicas o incluso jeroglíficos, como este:
let имя = '...';
let 我 = '...';
Técnicamente, no hay ningún error aquí. Estos nombres están permitidos, pero existe una convención internacional para usar el inglés en los nombres de variables. Incluso si estamos escribiendo un guión pequeño, es posible que tenga una larga vida por delante. Es posible que las personas de otros países necesiten leerlo en algún momento.
Nombres reservados
Existe una lista de palabras reservadas , que no se pueden utilizar como nombres de variables porque son utilizadas por el propio idioma.
Por ejemplo: let, class, return, y functionestán reservados.
El siguiente código da un error de sintaxis:
let let = 5; // can't name a variable "let", error!
let return = 5; // also can't name it "return", error!
Una tarea sin use strict
Normalmente, necesitamos definir una variable antes de usarla. Pero en los viejos tiempos, era técnicamente posible crear una variable mediante una mera asignación del valor sin usar let. Esto todavía funciona ahora si no ponemos use strictnuestros scripts para mantener la compatibilidad con los scripts antiguos.
// note: no "use strict" in this example
num = 5; // the variable "num" is created if it didn't exist
alert(num); // 5
Esta es una mala práctica y causaría un error en modo estricto:
"use strict";
num = 5; // error: num is not defined
Constantes
Para declarar una variable constante (que no cambia), use en constlugar de let:
const myBirthday = '18.04.1982';
Las variables declaradas mediante constse denominan “constantes”. No se pueden reasignar. Un intento de hacerlo provocaría un error:
const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!
Cuando un programador está seguro de que una variable nunca cambiará, puede declararla con constpara garantizar y comunicar claramente ese hecho a todos.
Constantes mayúsculas
Existe una práctica generalizada de utilizar constantes como alias para valores difíciles de recordar que se conocen antes de la ejecución.
Estas constantes se nombran con letras mayúsculas y guiones bajos.
Por ejemplo, creemos constantes para los colores en el llamado formato "web" (hexadecimal):
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00
Beneficios:
· COLOR_ORANGEes mucho más fácil de recordar que "#FF7F00".
· Es mucho más fácil escribir mal "#FF7F00"que COLOR_ORANGE.
· Al leer el código, COLOR_ORANGEes mucho más significativo que #FF7F00.
¿Cuándo deberíamos usar mayúsculas para una constante y cuándo deberíamos nombrarla normalmente? Dejémoslo claro.
Ser una "constante" simplemente significa que el valor de una variable nunca cambia. Pero hay constantes que se conocen antes de la ejecución (como un valor hexadecimal para rojo) y hay constantes que se calculan en tiempo de ejecución, durante la ejecución, pero que no cambian después de su asignación inicial.
Por ejemplo:
const pageLoadTime = /* time taken by a webpage to load */;
El valor de pageLoadTimeno se conoce antes de la carga de la página, por lo que se denomina normalmente. Pero sigue siendo una constante porque no cambia después de la asignación.
En otras palabras, las constantes con nombre en mayúsculas solo se utilizan como alias para valores "codificados".
Nombra las cosas bien
Hablando de variables, hay una cosa más extremadamente importante.
El nombre de una variable debe tener un significado claro y obvio, que describa los datos que almacena.
La denominación de variables es una de las habilidades más importantes y complejas de la programación. Un vistazo rápido a los nombres de las variables puede revelar qué código fue escrito por un principiante versusun desarrollador experimentado.
En un proyecto real, la mayor parte del tiempo se dedica a modificar y ampliar una base de código existente en lugar de escribir algo completamente separado desde cero. Cuando volvemos a algún código después de hacer otra cosa por un tiempo, es mucho más fácil encontrar información que esté bien etiquetada. O, en otras palabras, cuando las variables tienen buen nombre.
Dedique tiempo a pensar en el nombre correcto para una variable antes de declararla. Hacerlo le compensará generosamente.
Algunas reglas que conviene seguir son:
· Utilice nombres legibles por humanos como userNameo shoppingCart.
· Manténgase alejado de las abreviaturas o nombres cortos como a, b, c, a menos que realmente sepa lo que está haciendo.
· Haga nombres lo más descriptivos y concisos. Ejemplos de malos nombres son datay value. Tales nombres no dicen nada. Solo está bien usarlos si el contexto del código hace que sea excepcionalmente obvio a qué datos o valor hace referencia la variable.
· Acuerde los términos dentro de su equipo y en su propia mente. Si un visitante del sitio se llama "usuario", entonces debemos nombrar las variables relacionadas currentUsero en newUserlugar de currentVisitoro newManInTown.
¿Suena simple? De hecho lo es, pero crear nombres de variables descriptivos y concisos en la práctica no lo es. Ve a por ello.
¿Reutilizar o crear?
Y la última nota. Hay algunos programadores perezosos que, en lugar de declarar nuevas variables, tienden a reutilizar las existentes.
Como resultado, sus variables son como cajas en las que la gente arroja diferentes cosas sin cambiar sus pegatinas. ¿Qué hay dentro de la caja ahora? ¿Quién sabe? Tenemos que acercarnos y comprobarlo.
Estos programadores ahorran un poco en la declaración de variables pero pierden diez veces más en la depuración.
Una variable adicional es buena, no mala.
Los navegadores y minificadores de JavaScript modernos optimizan el código lo suficientemente bien, por lo que no crearán problemas de rendimiento. El uso de diferentes variables para diferentes valores puede incluso ayudar al motor a optimizar su código.
Resumen
Podemos declarar variables para almacenar datos mediante el uso de los var, leto constpalabras clave.
· let - es una declaración de variable moderna.
· var- es una declaración de variable de la vieja escuela. Normalmente no lo usamos en absoluto, pero cubriremos las diferencias sutiles leten el capítulo La vieja "var" , por si las necesita.
· const- es como let, pero el valor de la variable no se puede cambiar.
Las variables deben nombrarse de manera que nos permitan comprender fácilmente su contenido.
5. Tipos de datos
Un valor en JavaScript es siempre de un tipo determinado. Por ejemplo, una cadena o un número.
Hay ocho tipos de datos básicos en JavaScript. Aquí los cubriremos en general y en los próximos capítulos hablaremos de cada uno de ellos en detalle.
Podemos poner cualquier tipo en una variable. Por ejemplo, una variable puede ser en un momento una cadena y luego almacenar un número:
// no error
let message = "hello";
message = 123456;
Los lenguajes de programación que permiten tales cosas, como JavaScript, se denominan "tipados dinámicamente", lo que significa que existen tipos de datos, pero las variables no están vinculadas a ninguno de ellos.
Número
let n = 123;
n = 12.345;
El tipo de número representa números enteros y de coma flotante.
Hay muchas operaciones para números, por ejemplo, multiplicación *, división /, suma +, resta -, etc.
Además de los números regulares, no son los llamados “valores numéricos especiales”, que también pertenecen a este tipo de datos: Infinity, -Infinityy NaN.
· Infinityrepresenta el infinito matemático ∞. Es un valor especial que es mayor que cualquier número.
Podemos obtenerlo como resultado de la división por cero:
alert( 1 / 0 ); // Infinity
O simplemente haga referencia a él directamente:
alert( Infinity ); // Infinity
· NaNrepresenta un error de cálculo. Es el resultado de una operación matemática incorrecta o indefinida, por ejemplo:
alert( "not a number" / 2 ); // NaN, such division is erroneous
NaNes pegajoso. Cualquier otra operación sobre NaNdevoluciones NaN:
alert( "not a number" / 2 + 5 ); // NaN
Entonces, si hay un NaNlugar en una expresión matemática, se propaga al resultado completo.
Las operaciones matemáticas son seguras
Hacer matemáticas es "seguro" en JavaScript. Podemos hacer cualquier cosa: dividir por cero, tratar cadenas no numéricas como números, etc.
El guión nunca se detendrá con un error fatal ("morir"). En el peor de los casos, obtendremos NaNel resultado.
Los valores numéricos especiales pertenecen formalmente al tipo "número". Por supuesto, no son números en el sentido común de esta palabra.
Veremos más sobre cómo trabajar con números en el capítulo Números .
Empezando
En JavaScript, el tipo "número" no puede representar valores enteros mayores que (eso es ) o menores que para los negativos. Es una limitación técnica provocada por su representación interna.(253-1)9007199254740991-(253-1)
Para la mayoría de los propósitos, eso es suficiente, pero a veces necesitamos números realmente grandes, por ejemplo, para criptografía o marcas de tiempo con precisión de microsegundos.
BigInt type se agregó recientemente al lenguaje para representar números enteros de longitud arbitraria.
Un BigIntvalor se crea agregando nal final de un número entero:
// the "n" at the end means it's a BigInt
const bigInt = 1234567890123456789012345678901234567890n;
Como los BigIntnúmeros rara vez se necesitan, no los cubrimos aquí, pero les dedicamos un capítulo separado BigInt . Léalo cuando necesite números tan grandes.
Problemas de compatibilidad
En este momento, BigIntse admite en Firefox / Chrome / Edge, pero no en Safari / IE.
Cuerda
Una cadena en JavaScript debe estar entre comillas.
let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;
En JavaScript, hay 3 tipos de citas.
1. Las comillas dobles: "Hello".
2. Las comillas simples: 'Hello'.
3. Acentos abiertos: `Hello`.
Las comillas simples y dobles son comillas "simples". Prácticamente no hay diferencia entre ellos en JavaScript.
Las comillas inversas son comillas de "funcionalidad ampliada". Nos permiten incrustar variables y expresiones en una cadena envolviéndolas ${…}, por ejemplo:
let name = "John";
// embed a variable
alert( `Hello, ${name}!` ); // Hello, John!
// embed an expression
alert( `the result is ${1 + 2}` ); // the result is 3
La expresión dentro ${…}se evalúa y el resultado se convierte en parte de la cadena. Podemos poner cualquier cosa allí: una variable como nameo una expresión aritmética como 1 + 2o algo más complejo.
Tenga en cuenta que esto solo se puede hacer con comillas invertidas. ¡Otras citas no tienen esta función de incrustación!
alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (double quotes do nothing)
Cubriremos las cadenas más a fondo en el capítulo Cuerdas .
No hay ningún tipo de carácter .
En algunos idiomas, hay un tipo de "carácter" especial para un solo carácter. Por ejemplo, en el lenguaje C y en Java se llama "char".
En JavaScript, no existe tal tipo. Sólo hay un tipo de: string. Una cadena puede constar de cero caracteres (estar vacía), un carácter o muchos de ellos.
Booleano (tipo lógico)
El tipo booleano tiene solo dos valores: truey false.
Este tipo se usa comúnmente para almacenar valores de sí / no: truesignifica "sí, correcto" y falsesignifica "no, incorrecto".
Por ejemplo:
let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked
Los valores booleanos también se obtienen como resultado de comparaciones:
let isGreater = 4 > 1;
alert( isGreater ); // true (the comparison result is "yes")
Cubriremos los valores booleanos con más profundidad en el capítulo Operadores lógicos .
El valor "nulo"
El nullvalor especial no pertenece a ninguno de los tipos descritos anteriormente.
Forma un tipo separado propio que contiene solo el nullvalor:let age = null;
En JavaScript, nullno es una "referencia a un objeto inexistente" o un "puntero nulo" como en algunos otros idiomas.
Es solo un valor especial que representa "nada", "vacío" o "valor desconocido".
El código anterior establece que agese desconoce.
El valor "indefinido"
El valor especial undefinedtambién se distingue. Hace un tipo propio, como null.
El significado de undefinedes "valor no asignado".
Si se declara una variable, pero no se asigna, entonces su valor es undefined:
let age;
alert(age); // shows "undefined"
Técnicamente, es posible asignar explícitamente undefineda una variable:
let age = 100;
// change the value to undefined
age = undefined;
alert(age); // "undefined"
… Pero no recomendamos hacer eso. Normalmente, se utiliza nullpara asignar un valor "vacío" o "desconocido" a una variable, mientras que undefinedse reserva como valor inicial predeterminado para cosas no asignadas.
Objetos y símbolos
El objecttipo es especial.
Todos los demás tipos se denominan "primitivos" porque sus valores pueden contener solo una cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para almacenar colecciones de datos y entidades más complejas.
Siendo así de importantes, los objetos merecen un tratamiento especial. Nos ocuparemos de ellos más adelante en el capítulo Objetos , después de que aprendamos más sobre las primitivas.
El symboltipo se utiliza para crear identificadores únicos para objetos. Tenemos que mencionarlo aquí en aras de la integridad, pero también posponer los detalles hasta que sepamos los objetos.
El tipo de operador
El typeofoperador devuelve el tipo de argumento. Es útil cuando queremos procesar valores de diferentes tipos de manera diferente o simplemente queremos hacer una verificación rápida.
Admite dos formas de sintaxis:
1. Como operador: typeof x.
2. En función: typeof(x).
En otras palabras, funciona con paréntesis o sin ellos. El resultado es el mismo.
La llamada a typeof xdevuelve una cadena con el nombre del tipo:
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object" (1)
typeof null // "object" (2)
typeof alert // "function" (3)
Las últimas tres líneas pueden necesitar una explicación adicional:
1. Mathes un objeto integrado que proporciona operaciones matemáticas. Lo aprenderemos en el capítulo Números . Aquí, sirve solo como un ejemplo de un objeto.
2. El resultado de typeof nulles "object". Ese es un error de typeofcomportamiento reconocido oficialmente , que proviene de los primeros días de JavaScript y se mantiene por compatibilidad. Definitivamente, nullno es un objeto. Es un valor especial con un tipo separado propio.
3. El resultado de typeof alertes "function", porque alertes una función. Estudiaremos las funciones en los siguientes capítulos, donde también veremos que no hay un tipo de "función" especial en JavaScript. Las funciones pertenecen al tipo de objeto. Pero los typeoftrata de manera diferente, regresando "function". Eso también proviene de los primeros días de JavaScript. Técnicamente, tal comportamiento no es correcto, pero puede ser conveniente en la práctica.
Resumen
Hay 8 tipos de datos básicos en JavaScript.
· numberpara números de cualquier tipo: entero o de punto flotante, los enteros están limitados por .±(253-1)
· bigint es para números enteros de longitud arbitraria.
· stringpara cuerdas. Una cadena puede tener cero o más caracteres, no hay un tipo de carácter único independiente.
· booleanpara true/ false.
· nullpara valores desconocidos: un tipo independiente que tiene un solo valor null.
· undefinedpara valores no asignados: un tipo independiente que tiene un solo valor undefined.
· object para estructuras de datos más complejas.
· symbol para identificadores únicos.
El typeofoperador nos permite ver qué tipo está almacenado en una variable.
· Dos formas: typeof xo typeof(x).
· Devuelve una cadena con el nombre del tipo, como "string".
· Para nulldevoluciones "object": este es un error en el idioma, en realidad no es un objeto.
6. Interacción: alerta, aviso, confirmación
Como vamos a estar utilizando el navegador como nuestro entorno de demostración, vamos a ver un par de funciones para interactuar con el usuario: alert, prompty confirm.
alerta
Este ya lo hemos visto. Muestra un mensaje y espera a que el usuario presione “OK”.
Por ejemplo:
alert("Hello");
La mini ventana con el mensaje se llama ventana modal . La palabra “modal” significa que el visitante no puede interactuar con el resto de la página, presionar otros botones, etc., hasta que no se haya ocupado de la ventana. En este caso, hasta que presionen "Aceptar".
rápido
La función promptacepta dos argumentos:
result = prompt(title, [default]);
Muestra una ventana modal con un mensaje de texto, un campo de entrada para el visitante y los botones Aceptar / Cancelar.
title
El texto que se mostrará al visitante.
default
Un segundo parámetro opcional, el valor inicial para el campo de entrada.
Los corchetes en la sintaxis [...]
Los corchetes defaulten la sintaxis anterior indican que el parámetro es opcional, no obligatorio.
El visitante puede escribir algo en el campo de entrada del mensaje y presionar OK. Luego obtenemos ese texto en formato result. O pueden cancelar la entrada presionando Cancelar o presionando la Esctecla, luego obtenemos nullcomo result.
La llamada a promptdevuelve el texto del campo de entrada o nullsi se canceló la entrada.
Por ejemplo:
let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!
En IE: proporcione siempre un default
El segundo parámetro es opcional, pero si no lo proporcionamos, Internet Explorer insertará el texto "undefined"en el mensaje.
Ejecute este código en Internet Explorer para ver:
let test = prompt("Test");
Por lo tanto, para que las indicaciones se vean bien en IE, recomendamos proporcionar siempre el segundo argumento:
let test = prompt("Test", ''); // <-- for IE
confirmar
La sintaxis:
result = confirm(question);
La función confirmmuestra una ventana modal con questionay dos botones: Aceptar y Cancelar.
El resultado es truesi se presiona OK y en falsecaso contrario.
Por ejemplo:
let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true if OK is pressed
Resumen
Cubrimos 3 funciones específicas del navegador para interactuar con los visitantes:
alert
muestra un mensaje.
prompt
muestra un mensaje pidiendo al usuario que ingrese texto. Devuelve el texto o, si el botón Cancelar o Escse hace clic en, null.
confirm
muestra un mensaje y espera a que el usuario presione “Aceptar” o “Cancelar”. Vuelve truepara Aceptar y falseCancelar / Esc.
Todos estos métodos son modales: pausan la ejecución del script y no permiten que el visitante interactúe con el resto de la página hasta que se cierre la ventana.
Hay dos limitaciones compartidas por todos los métodos anteriores:
1. La ubicación exacta de la ventana modal la determina el navegador. Por lo general, está en el centro.
2. El aspecto exacto de la ventana también depende del navegador. No podemos modificarlo.
Ese es el precio de la sencillez. Hay otras formas de mostrar ventanas más agradables y una interacción más rica con el visitante, pero si las “campanas y silbidos” no importan mucho, estos métodos funcionan bien.
7. Conversiones de tipo
La mayoría de las veces, los operadores y las funciones convierten automáticamente los valores que se les asignan al tipo correcto.
Por ejemplo, alertconvierte automáticamente cualquier valor en una cadena para mostrarlo. Las operaciones matemáticas convierten valores en números.
También hay casos en los que necesitamos convertir explícitamente un valor al tipo esperado.
Sin hablar de objetos todavía
En este capítulo, no cubriremos objetos. Por ahora solo hablaremos de primitivas.
Más adelante, después de aprender acerca de los objetos, en el capítulo Conversión de objeto a primitivo veremos cómo encajanlos objetos.
Conversión de cadenas
La conversión de cadenas ocurre cuando necesitamos la forma de cadena de un valor.
Por ejemplo, lo alert(value)hace para mostrar el valor.
También podemos llamar a la String(value)función para convertir un valor en una cadena:
let value = true;
alert(typeof value); // boolean
value = String(value); // now value is a string "true"
alert(typeof value); // string
La conversión de cadenas es más obvia. A se falseconvierte "false", se nullconvierte "null", etc.
Conversión numérica
La conversión numérica ocurre en funciones y expresiones matemáticas automáticamente.
Por ejemplo, cuando la división /se aplica a no números:
alert( "6" / "2" ); // 3, strings are converted to numbers
Podemos usar la Number(value)función para convertir explícitamente valuea en un número:
let str = "123";
alert(typeof str); // string
let num = Number(str); // becomes a number 123
alert(typeof num); // number
La conversión explícita generalmente se requiere cuando leemos un valor de una fuente basada en cadenas como un formulario de texto, pero esperamos que se ingrese un número.
Si la cadena no es un número válido, el resultado de dicha conversión es NaN. Por ejemplo:
let age = Number("an arbitrary string instead of a number");
alert(age); // NaN, conversion failed
Reglas de conversión numérica:
	Valor
	Se convierte en ...
	undefined
	NaN
	null
	0
	true and false
	1 y 0
	string
	Se eliminan los espacios en blanco del principio y del final. Si la cadena restante está vacía, el resultado es 0. De lo contrario, el número se "lee" de la cadena. Un error da NaN.
Ejemplos:
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN (error reading a number at "z")
alert( Number(true) ); // 1
alert( Number(false) ); // 0
Tenga en cuenta que nully se undefinedcomporta de manera diferente aquí: se nullconvierte en cero mientras se undefinedconvierte en NaN.
La mayoría de los operadores matemáticos también realizan dicha conversión, lo veremos en el próximo capítulo.
Conversión booleana
La conversión booleana es la más simple.
Sucede en operaciones lógicas (más adelante veremos pruebas de condición y otras cosas similares) pero también se puede realizar explícitamente con una llamada a Boolean(value).
La regla de conversión:
· Los valores que son intuitivamente “vacío”, como 0, una cadena vacía, null, undefined, y NaN, se hacen false.
· Se vuelven otros valores true.
Por ejemplo:
alert( Boolean(1) ); // true
alert( Boolean(0) ); // false
alert( Boolean("hello") ); // true
alert( Boolean("") ); // false
Tenga en cuenta: la cadena con cero "0"estrue
Algunos lenguajes (concretamente PHP) tratan "0"como false. Pero en JavaScript, una cadena no vacía es siempre true.
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // spaces, also true (any non-empty string is true)
Resumen
Las tres conversiones de tipo más utilizadas son cadena, numeración y booleana.
String Conversion- Ocurre cuando mostramos algo. Se puede realizar con String(value). La conversión a cadena suele ser obvia para valores primitivos.
Numeric Conversion- Ocurre en operaciones matemáticas. Se puede realizar con Number(value).
La conversión sigue las reglas:
	Valor
	Se convierte en ...
	undefined
	NaN
	null
	0
	true / false
	1 / 0
	string
	La cadena se lee "tal cual", los espacios en blanco de ambos lados se ignoran. Una cadena vacía se convierte en 0. Un error da NaN.
Boolean Conversion- Ocurre en operaciones lógicas. Se puede realizar con Boolean(value).
Sigue las reglas:
	Valor
	Se convierte en ...
	0, null, undefined, NaN,""
	false
	cualquier otro valor
	true
La mayoría de estas reglas son fáciles de entender y memorizar. Las notables excepciones en las que las personas suelen cometer errores son:
· undefinedes NaNcomo un número, no 0.
· "0"y las cadenas de solo espacio como " "son verdaderas como booleanas.
Los objetos no están cubiertos aquí. Volveremos a ellos más adelante en el capítulo Conversión de objeto a primitivo que se dedica exclusivamente a objetos después de que aprendamos cosas más básicas sobre JavaScript.
8. Operadores básicos, matemáticas
Conocemos a muchos operadores de la escuela. Son cosas como sumas +, multiplicaciones *, restas -, etc.
En este capítulo, comenzaremos con operadores simples, luego nos concentraremos en aspectos específicos de JavaScript, que no se tratan en la aritmética escolar.
Términos: "unario", "binario", "operando"
Antes de continuar, comprendamos alguna terminología común.
· Un operando : es a lo que se aplican los operadores. Por ejemplo, en la multiplicación de 5 * 2hay dos operandos: el operando izquierdo es 5y el operando derecho es 2. A veces, la gente llama a estos "argumentos" en lugar de "operandos".
· Un operador es unario si tiene un solo operando. Por ejemplo, la negación unaria -invierte el signo de un número:
· let x = 1;
· 
· x = -x;
alert( x ); // -1, unary negation was applied
· Un operador es binario si tiene dos operandos. El mismo signo negativo también existe en forma binaria:
· let x = 1, y = 3;
alert( y - x ); // 2, binary minus subtracts values
Formalmente, en los ejemplos anteriores tenemos dos operadores diferentes que comparten el mismo símbolo: el operador de negación, un operador unario que invierte el signo, y el operador de resta, un operador binario que resta un número de otro.
Matemáticas
Se admiten las siguientes operaciones matemáticas:
· Además +,
· la resta -,
· multiplicación *,
· división /,
· Resto %,
· Exponenciación **.
Los cuatro primeros son sencillos, mientras que %y **necesitan unas palabras sobre ellos.
Recordatorio %
El operador restante %, a pesar de su apariencia, no está relacionado con los porcentajes.
El resultado de a % bes el resto de la división entera de apor b.
Por ejemplo:
alert( 5 % 2 ); // 1, a remainder of 5 divided by 2
alert( 8 % 3 ); // 2, a remainder of 8 divided by 3
Exponenciación **
El operador de exponenciación se a ** bmultiplica apor sí mismo b.
Por ejemplo:
alert( 2 ** 2 ); // 4 (2 multiplied by itself 2 times)
alert( 2 ** 3 ); // 8 (2 * 2 * 2, 3 times)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2, 4 times)
Matemáticamente, la potenciación se define también para números no enteros. Por ejemplo, una raíz cuadrada es una exponenciación por 1/2:
alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root)
alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root)
Concatenación de cadenas con binario +
Conozcamos las características de los operadores de JavaScript que van más allá de la aritmética escolar.
Normalmente, el operador más +suma números.
Pero, si el binario +se aplica a cadenas, las fusiona (las concatena):
let s = "my" + "string";
alert(s); // mystring
Tenga en cuenta que si alguno de los operandos es una cadena, el otro también se convierte en una cadena.
Por ejemplo:
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
Mira, no importa si el primer operando es una cadena o el segundo.
Aquí hay un ejemplo más complejo:
alert(2 + 2 + '1' ); // "41" and not "221"
Aquí, los operadores trabajan uno tras otro. El primero +suma dos números, por lo que devuelve 4, luego el siguiente le +agrega la cadena 1, por lo que es como 4 + '1' = 41.
El binario +es el único operador que admite cadenas de esa manera. Otros operadores aritméticos funcionan solo con números y siempre convierten sus operandos en números.
Aquí está la demostración para restar y dividir:
alert( 6 - '2' ); // 4, converts '2' to a number
alert( '6' / '2' ); // 3, converts both operands to numbers
Conversión numérica, unaria +
El plus +existe en dos formas: la forma binaria que usamos anteriormente y la forma unaria.
El unario más o, en otras palabras, el operador más +aplicado a un solo valor, no hace nada a los números. Pero si el operando no es un número, el unario más lo convierte en un número.
Por ejemplo:
// No effect on numbers
let x = 1;
alert( +x ); // 1
let y = -2;
alert( +y ); // -2
// Converts non-numbers
alert( +true ); // 1
alert( +"" ); // 0
Realmente hace lo mismo que Number(...),pero es más corto.
La necesidad de convertir cadenas en números surge con mucha frecuencia. Por ejemplo, si obtenemos valores de campos de formulario HTML, generalmente son cadenas. ¿Y si queremos sumarlos?
El binario más los agregaría como cadenas:
let apples = "2";
let oranges = "3";
alert( apples + oranges ); // "23", the binary plus concatenates strings
Si queremos tratarlos como números, necesitamos convertirlos y luego sumarlos:
let apples = "2";
let oranges = "3";
// both values converted to numbers before the binary plus
alert( +apples + +oranges ); // 5
// the longer variant
// alert( Number(apples) + Number(oranges) ); // 5
Desde el punto de vista de un matemático, la abundancia de ventajas puede parecer extraña. Pero desde el punto de vista de un programador, no hay nada especial: las ventajas unarias se aplican primero, convierten cadenas en números y luego el signo más binario las suma.
¿Por qué se aplican las ventajas unarias a los valores antes que a los binarios? Como veremos, eso se debe a su mayor precedencia .
Precedencia del operador
Si una expresión tiene más de un operador, el orden de ejecución se define por su precedencia o, en otras palabras, el orden de prioridad predeterminado de los operadores.
De la escuela, todos sabemos que la multiplicación en la expresión 1 + 2 * 2debe calcularse antes de la suma. Esa es exactamente la cuestión de la precedencia. Se dice que la multiplicación tiene mayor precedencia que la suma.
Los paréntesis anulan cualquier precedencia, por lo que si no estamos satisfechos con el orden predeterminado, podemos usarlos para cambiarlo. Por ejemplo, escribe (1 + 2) * 2.
Hay muchos operadores en JavaScript. Cada operador tiene un número de precedencia correspondiente. El que tiene el número más grande se ejecuta primero. Si la precedencia es la misma, el orden de ejecución es de izquierda a derecha.
Aquí hay un extracto de la tabla de precedencia (no necesita recordar esto, pero tenga en cuenta que los operadores unarios son más altos que los binarios correspondientes):
	Precedencia
	Nombre
	Firmar
	...
	...
	...
	17
	unario más
	+
	17
	negación unaria
	-
	dieciséis
	exponenciación
	**
	15
	multiplicación
	*
	15
	división
	/
	13
	adición
	+
	13
	sustracción
	-
	...
	...
	...
	3
	asignación
	=
	...
	...
	...
Como podemos ver, el “más unario” tiene una prioridad 17mayor que la 13de “suma” (más binario). Por eso, en la expresión "+apples + +oranges", las ventajas unarias funcionan antes de la suma.
Asignación
Observemos que una asignación =también es un operador. Aparece en la tabla de precedencia con la prioridad muy baja de 3.
Por eso, cuando asignamos una variable, como x = 2 * 2 + 1, los cálculos se hacen primero y luego =se evalúa, almacenando el resultado en x.
let x = 2 * 2 + 1;
alert( x ); // 5
Asignación = devuelve un valor
El hecho de =ser un operador, no un constructo de lenguaje “mágico”, tiene una implicación interesante.
La mayoría de los operadores en JavaScript devuelven un valor. Eso es obvio para +y -, pero también cierto para =.
La llamada x = valueescribe el valueen x y luego lo devuelve .
Aquí hay una demostración que usa una asignación como parte de una expresión más compleja:
let a = 1;
let b = 2;
let c = 3 - (a = b + 1);
alert( a ); // 3
alert( c ); // 0
En el ejemplo anterior, el resultado de la expresión (a = b + 1)es el valor que se le asignó a(es decir 3). Luego se utiliza para evaluaciones adicionales.
Código gracioso, ¿no? Deberíamos entender cómo funciona, porque a veces lo vemos en bibliotecas de JavaScript.
Aunque, por favor no escriba el código así. Estos trucos definitivamente no hacen que el código sea más claro o legible.
Encadenamiento de asignaciones
Otra característica interesante es la capacidad de encadenar asignaciones:
let a, b, c;
a = b = c = 2 + 2;
alert( a ); // 4
alert( b ); // 4
alert( c ); // 4
Las asignaciones encadenadas se evalúan de derecha a izquierda. En primer lugar, la expresión más a la derecha 2 + 2se evalúa y se le asigna a las variables de la izquierda: c, by a. Al final, todas las variables comparten un solo valor.
Una vez más, por motivos de legibilidad, es mejor dividir dicho código en pocas líneas:
c = 2 + 2;
b = c;
a = c;
Eso es más fácil de leer, especialmente cuando se escanea el código rápidamente.
Modificar en el lugar
A menudo necesitamos aplicar un operador a una variable y almacenar el nuevo resultado en esa misma variable.
Por ejemplo:
let n = 2;
n = n + 5;
n = n * 2;
Esta notación se puede abreviar utilizando los operadores +=y *=:
let n = 2;
n += 5; // now n = 7 (same as n = n + 5)
n *= 2; // now n = 14 (same as n = n * 2)
alert( n ); // 14
Breve “modificar y asignar-” existe operadores para todos los operadores aritméticos y bit a bit: /=, -=, etc.
Dichos operadores tienen la misma precedencia que una asignación normal, por lo que se ejecutan después de la mayoría de los demás cálculos:
let n = 2;
n *= 3 + 5;
alert( n ); // 16 (right part evaluated first, same as n *= 8)
Incremento / decremento
Aumentar o disminuir un número en uno es una de las operaciones numéricas más comunes.
Entonces, hay operadores especiales para ello:
· Incremento ++ aumenta una variable en 1:
· let counter = 2;
· counter++; // works the same as counter = counter + 1, but is shorter
alert( counter ); // 3
· El decremento -- disminuye una variable en 1:
· let counter = 2;
· counter--; // works the same as counter = counter - 1, but is shorter
alert( counter ); // 1
Importante:
El incremento / decremento solo se puede aplicar a variables. Intentar usarlo en un valor como 5++dará un error.
Los operadores ++y --se pueden colocar antes o después de una variable.
· Cuando el operador va después de la variable, es en “forma de sufijo”: counter++.
· La “forma de prefijo” es cuando el operador va delante de la variable: ++counter.
Ambas declaraciones hacen lo mismo: aumentar counteren 1.
¿Hay alguna diferencia? Sí, pero solo podemos verlo si usamos el valor devuelto de ++/--.
Aclaremos. Como sabemos, todos los operadores devuelven un valor. El incremento / decremento no es una excepción. La forma de prefijo devuelve el nuevo valor, mientras que la forma de sufijo devuelve el valor anterior (antes de incrementar / disminuir).
Para ver la diferencia, aquí tienes un ejemplo:
let counter = 1;
let a = ++counter; // (*)
alert(a); // 2
En la línea (*), la forma de prefijo++counter aumenta countery devuelve el nuevo valor 2,. Entonces, los alertespectáculos 2.
Ahora, usemos la forma de sufijo:
let counter = 1;
let a = counter++; // (*) changed ++counter to counter++
alert(a); // 1
En la línea (*), el postfix forma counter++también incrementos counterpero vuelve el viejo valor (antes de incremento). Entonces, los alertespectáculos 1.
Para resumir:
· Si no se usa el resultado de incremento / decremento, no hay diferencia en qué forma usar:
· let counter = 0;
· counter++;
· ++counter;
alert( counter ); // 2, the lines above did the same
· Si queremos aumentar un valor y usar inmediatamente el resultado del operador, necesitamos la forma de prefijo:
· let counter = 0;
alert( ++counter ); // 1
· Si deseamos incrementar un valor pero usamos su valor anterior, necesitamos la forma de sufijo:
· let counter = 0;
alert( counter++ ); // 0
Incremento / decremento entre otros operadores
Los operadores también ++/--se pueden usar dentro de expresiones. Su precedencia es mayor que la de la mayoría de las otras operaciones aritméticas.
Por ejemplo:
let counter = 1;
alert( 2 * ++counter ); // 4
Comparar con:
let counter = 1;
alert( 2 * counter++ ); // 2, because counter++ returns the "old" value
Aunque técnicamente está bien, esta notación suele hacer que el código sea menos legible. Una línea hace varias cosas, no es bueno.
Mientras lee el código, un escaneo ocular “vertical” rápido puede fácilmente pasar por alto algo como counter++y no será obvio que la variable aumentó.
Aconsejamos un estilo de "una línea - una acción":
let counter = 1;
alert( 2 * counter );
counter++;
Operadores bit a bitLos operadores bit a bit tratan los argumentos como números enteros de 32 bits y trabajan en el nivel de su representación binaria.
Estos operadores no son específicos de JavaScript. Son compatibles con la mayoría de los lenguajes de programación.
Estos operadores se usan muy raramente, cuando necesitamos jugar con números en el nivel más bajo (bit a bit). No necesitaremos estos operadores en el corto plazo, ya que el desarrollo web tiene poco uso de ellos, pero en algunas áreas especiales, como la criptografía, son útiles. Puede leer el capítulo Operadores bit a bit sobre MDN cuando surja una necesidad.
Coma
El operador de coma ,es uno de los operadores más raros e inusuales. A veces, se usa para escribir código más corto, por lo que necesitamos saberlo para comprender qué está pasando.
El operador de coma nos permite evaluar varias expresiones, dividiéndolas con una coma ,. Cada uno de ellos se evalúa pero solo se devuelve el resultado del último.
Por ejemplo:
let a = (1 + 2, 3 + 4);
alert( a ); // 7 (the result of 3 + 4)
Aquí, 1 + 2se evalúa la primera expresión y se desecha su resultado. Luego, 3 + 4se evalúa y se devuelve como resultado.
La coma tiene una precedencia muy baja
Tenga en cuenta que el operador de coma tiene una precedencia muy baja, inferior a =, por lo que los paréntesis son importantes en el ejemplo anterior.
Sin ellos: a = 1 + 2, 3 + 4evalúa +primero, sumando los números a = 3, 7, luego el operador de asignación =asigna a = 3y el resto se ignora. Es como (a = 1 + 2), 3 + 4.
¿Por qué necesitamos un operador que descarte todo excepto la última expresión?
A veces, la gente lo usa en construcciones más complejas para poner varias acciones en una línea.
Por ejemplo:
// three operations in one line
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}
Estos trucos se utilizan en muchos marcos de JavaScript. Por eso los mencionamos. Pero generalmente no mejoran la legibilidad del código, por lo que debemos pensarlo bien antes de usarlos.
Comparaciones
Conocemos muchos operadores de comparación de las matemáticas.
En JavaScript están escritos así:
· Mayor / menor que: a > b, a < b.
· Mayor / menor que o igual: a >= b, a <= b.
· Es igual a:, a == btenga en cuenta que el signo de doble igualdad ==significa la prueba de igualdad, mientras que uno solo a = bsignifica una asignación.
· No es igual. En matemáticas, la notación es ≠, pero en JavaScript se escribe como a != b.
En este artículo aprenderemos más sobre los diferentes tipos de comparaciones, cómo las hace JavaScript, incluidas peculiaridades importantes.
Al final, encontrará una buena receta para evitar problemas relacionados con las "peculiaridades de JavaScript".
Booleano es el resultado
Todos los operadores de comparación devuelven un valor booleano:
· true - significa "sí", "correcto" o "la verdad".
· false - significa "no", "incorrecto" o "no es la verdad".
Por ejemplo:
alert( 2 > 1 ); // true (correct)
alert( 2 == 1 ); // false (wrong)
alert( 2 != 1 ); // true (correct)
Se puede asignar un resultado de comparación a una variable, como cualquier valor:
let result = 5 > 4; // assign the result of the comparison
alert( result ); // true
Comparación de cadenas
Para ver si una cadena es mayor que otra, JavaScript utiliza el llamado "diccionario" o orden "lexicográfico".
En otras palabras, las cadenas se comparan letra por letra.
Por ejemplo:
alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true
El algoritmo para comparar dos cadenas es simple:
1. Compare el primer carácter de ambas cadenas.
2. Si el primer carácter de la primera cadena es mayor (o menor) que el de la otra cadena, entonces la primera cadena es mayor (o menor) que la segunda. Hemos terminado.
3. De lo contrario, si los primeros caracteres de ambas cadenas son iguales, compare los segundos caracteres de la misma manera.
4. Repita hasta el final de cualquiera de las cuerdas.
5. Si ambas cadenas terminan con la misma longitud, entonces son iguales. De lo contrario, la cuerda más larga es mayor.
En los ejemplos anteriores, la comparación 'Z' > 'A'llega a un resultado en el primer paso, mientras que las cadenas "Glow"y "Glee"se comparan carácter por carácter:
1. Ges lo mismo que G.
2. les lo mismo que l.
3. oes mayor que e. Deténgase aquí. La primera cuerda es mayor.
No es un diccionario real, sino orden Unicode
El algoritmo de comparación proporcionado anteriormente es aproximadamente equivalente al que se utiliza en diccionarios o guías telefónicas, pero no es exactamente el mismo.
Por ejemplo, el caso importa. Una letra mayúscula "A"no es igual a minúscula "a". Cual es mayor? La minúscula "a". ¿Por qué? Debido a que el carácter en minúscula tiene un índice mayor en la tabla de codificación interna que utiliza JavaScript (Unicode). Volveremos a los detalles específicos y las consecuencias de esto en el capítulo Cadenas .
Comparación de diferentes tipos
Al comparar valores de diferentes tipos, JavaScript convierte los valores en números.
Por ejemplo:
alert( '2' > 1 ); // true, string '2' becomes a number 2
alert( '01' == 1 ); // true, string '01' becomes a number 1
Para valores booleanos, se trueconvierte en 1y se falseconvierte en 0.
Por ejemplo:
alert( true == 1 ); // true
alert( false == 0 ); // true
Una consecuencia divertida
Es posible que al mismo tiempo:
· Dos valores son iguales.
· Uno de ellos es truebooleano y el otro es falsebooleano.
Por ejemplo:
let a = 0;
alert( Boolean(a) ); // false
let b = "0";
alert( Boolean(b) ); // true
alert(a == b); // true!
Desde el punto de vista de JavaScript, este resultado es bastante normal. Una verificación de igualdad convierte valores usando la conversión numérica (por lo tanto, se "0"convierte en 0), mientras que la Booleanconversión explícita usa otro conjunto de reglas.
Igualdad estricta
Una verificación de igualdad regular ==tiene un problema. No se puede diferenciar 0de false:
alert( 0 == false ); // true
Lo mismo sucede con una cadena vacía:
alert( '' == false ); // true
Esto sucede porque el operador de igualdad convierte operandos de diferentes tipos en números ==. Una cadena vacía, al igual que false, se convierte en un cero.
¿Qué hacer si nos gustaría diferenciar 0entre false?
Un operador de igualdad estricta ===comprueba la igualdad sin conversión de tipo.
En otras palabras, si ay bson de diferentes tipos, a === bregresa inmediatamente falsesin intentar convertirlos.
Vamos a intentarlo:
alert( 0 === false ); // false, because the types are different
También hay un operador de "no igualdad estricta" !==análogo a !=.
El operador de igualdad estricta es un poco más largo de escribir, pero hace que sea obvio lo que está sucediendo y deja menos espacio para errores.
Comparación con nulo e indefinido
Hay un comportamiento no intuitivo cuando nullo undefinedse comparan con otros valores.
Para un estricto control de igualdad ===
Estos valores son diferentes, porque cada uno de ellos es de un tipo diferente.
alert( null === undefined ); // false
Para un control no estricto ==
Hay una regla especial. Estos dos son una “dulce pareja”: se igualan (en el sentido de ==), pero no en ningún otro valor.
alert( null == undefined ); // true
Para matemáticas y otras comparaciones < > <= >=
null/undefinedse convierten en números: se nullconvierte 0, mientras que se undefinedconvierte NaN.
Ahora veamos algunas cosas divertidas que suceden cuando aplicamos estas reglas. Y, lo que es más importante, cómo no caer en una trampa con ellos.
Resultado extraño: nulo vs 0
Comparemos nullcon un cero:
alert( null > 0 ); // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true
Matemáticamente, eso es extraño. El último resultado indica que " nulles mayor o igual que cero", por lo que en una de las comparaciones anteriores debe serlo true, pero ambos son falsos.
La razón es que una verificación de igualdad ==y las comparaciones > < >= <=funcionan de manera diferente. Las comparaciones se convierten nullen un número, tratándolo como 0. Por eso (3) null >= 0es verdadero y (1) null> 0es falso.
Por otra parte, la comprobación de igualdad ==para undefinedy nullse define de tal manera que, sin ningún tipo de conversiones, que son iguales entre sí y no lo hacen igual todo lo demás. Por eso (2) null == 0es falso.
Un indefinido incomparable
El valor undefinedno debe compararse con otros valores:
alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)
¿Por qué no le gusta tanto el cero? ¡Siempre falso!
Obtenemos estos resultados porque:
· Comparaciones (1)y (2)retorno falseporque undefinedse convierte en un valor numérico especial que devuelve para todas las comparaciones NaNy NaNes un valor numérico especial false.
· La comprobación de la igualdad de (3)rendimientos falseporque undefinedsólo se iguala null, undefinedy ningún otro valor.
Evitar problemas
¿Por qué repasamos estos ejemplos? ¿Debemos recordar estas peculiaridades todo el tiempo? Bueno en realidad no. En realidad, estas cosas complicadas se irán familiarizando gradualmente con el tiempo, pero hay una forma sólida de evitar problemas con ellas:
· Trate cualquier comparación undefined/nullexcepto la estricta igualdad ===con un cuidado excepcional.
· No utilice comparaciones >= > < <=con una variable que pueda serlo null/undefined, a menos que esté realmente seguro de lo que está haciendo. Si una variable puede tener estos valores, verifíquelos por separado.
Resumen
· Los operadores de comparación devuelven un valor booleano.
· Las cadenas se comparan letra por letra en el orden del "diccionario".
· Cuando se comparan valores de diferentes tipos, se convierten en números (con la exclusión de una estricta verificación de igualdad).
· Los valores nully son undefinediguales ==entre sí y no son iguales a ningún otro valor.
· Tenga cuidado al usar comparaciones como >o <con variables que ocasionalmente pueden ser null/undefined. Verificar por null/undefinedseparado es una buena idea.
9. Ramificación condicional: si, '?'
A veces, necesitamos realizar diferentes acciones en función de diferentes condiciones.
Para hacer eso, podemos usar la ifdeclaración y el operador condicional ?, también llamado operador de "signo de interrogación".
La declaración "si"
La if(...)declaración evalúa una condición entre paréntesis y, si el resultado es true, ejecuta un bloque de código.
Por ejemplo:
let year = prompt('In which year was ECMAScript-2015 specification published?', '');
if (year == 2015) alert( 'You are right!' );
En el ejemplo anterior, la condición es una simple verificación de igualdad ( year == 2015), pero puede ser mucho más compleja.
Si queremos ejecutar más de una declaración, tenemos que envolver nuestro bloque de código entre llaves:
if (year == 2015) {
 alert( "That's correct!" );
 alert( "You're so smart!" );
}
Recomendamos envolver su bloque de código con llaves {}cada vez que use una ifdeclaración, incluso si solo hay una declaración para ejecutar. Hacerlo mejora la legibilidad.
Conversión booleana
La if (…)declaración evalúa la expresión entre paréntesis y convierte el resultado en un valor booleano.
Recordemos las reglas de conversión del capítulo Conversiones de tipos :
· Un número 0, una cadena vacía "", null, undefined, y NaNtodos se convierten false. Por eso se les llama valores "falsos".
· Otros valores se vuelven true, por eso se les llama “veracidad”.
Entonces, el código bajo esta condición nunca se ejecutaría:
if (0) { // 0 is falsy
 ...
}
... y dentro de esta condición, siempre:
if (1) { // 1 is truthy
 ...
}
También podemos pasar un valor booleano evaluado previamente a if, como este:
let cond = (year == 2015); // equality evaluates to true or false
if (cond) {
 ...
}
La cláusula "else"
La ifdeclaración puede contener un bloque "else" opcional. Se ejecuta cuando la condición es falsa.
Por ejemplo:
let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year == 2015) {
 alert( 'You guessed it right!' );
} else {
 alert( 'How can you be so wrong?' ); // any value except 2015
}
Varias condiciones: "si no"
A veces, nos gustaría probar varias variantes de una condición. La else ifcláusula nos permite hacer eso.
Por ejemplo:
let year = prompt('In which year was the ECMAScript-2015 specification published?', '');
if (year < 2015) {
 alert( 'Too early...' );
} else if (year > 2015) {
 alert( 'Too late' );
} else {
 alert( 'Exactly!' );
}
En el código anterior, JavaScript comprueba primero year < 2015. Si eso es falso, pasa a la siguiente condición year > 2015. Si eso también es falso, muestra el último alert.
Puede haber más else ifbloques. La final elsees opcional.
Operador condicional '?'
A veces, necesitamos asignar una variable dependiendo de una condición.
Por ejemplo:
let accessAllowed;
let age = prompt('How old are you?', '');
if (age > 18) {
 accessAllowed = true;
} else {
 accessAllowed = false;
}
alert(accessAllowed);
El llamado operador "condicional" o "signo de interrogación" nos permite hacerlo de una manera más breve y sencilla.
El operador está representado por un signo de interrogación ?. A veces se le llama "ternario", porque el operador tiene tres operandos. En realidad, es el único operador en JavaScript que tiene tantos.
La sintaxis es:
let result = condition ? value1 : value2;
Se conditionevalúa: si es veraz, value1se devuelve, de lo contrario - value2.
Por ejemplo:
let accessAllowed = (age > 18) ? true : false;
Técnicamente, podemos omitir los paréntesis age > 18. El operador de signo de interrogación tiene una precedencia baja, por lo que se ejecuta después de la comparación >.
Este ejemplo hará lo mismo que el anterior:
// the comparison operator "age > 18" executes first anyway
// (no need to wrap it into parentheses)
let accessAllowed = age > 18 ? true : false;
Pero los paréntesis hacen que el código sea más legible, por lo que recomendamos usarlos.
Tenga en cuenta:
En el ejemplo anterior, puede evitar usar el operador de signo de interrogación porque la comparación en sí devuelve true/false:
// the same
let accessAllowed = age > 18;
Múltiples '?'
Una secuencia de operadores de signo de interrogación ?puede devolver un valor que depende de más de una condición.
Por ejemplo:
let age = prompt('age?', 18);
let message = (age < 3) ? 'Hi, baby!' :
 (age < 18) ? 'Hello!' :
 (age < 100) ? 'Greetings!' :
 'What an unusual age!';
alert( message );
Al principio puede resultar difícil comprender lo que está sucediendo. Pero después de una mirada más cercana, podemos ver que es solo una secuencia ordinaria de pruebas:
1. El primer signo de interrogación comprueba si age < 3.
2. Si es cierto, vuelve 'Hi, baby!'. De lo contrario, continúa con la expresión después de los dos puntos '":"', comprobando age < 18.
3. Si eso es cierto, regresa 'Hello!'. De lo contrario, continúa con la expresión después de los siguientes dos puntos '":"', marcando age < 100.
4. Si eso es cierto, regresa 'Greetings!'. De lo contrario, continúa con la expresión después de los últimos dos puntos '":"', regresando 'What an unusual age!'.
Así es como se ve esto usando if..else:
if (age < 3) {
 message = 'Hi, baby!';
} else if (age < 18) {
 message = 'Hello!';
} else if (age < 100) {
 message = 'Greetings!';
} else {
 message = 'What an unusual age!';
}
Uso no tradicional de '?'
A veces, el signo de interrogación ?se usa como reemplazo de if:
let company = prompt('Which company created JavaScript?', '');
(company == 'Netscape') ?
 alert('Right!') : alert('Wrong.');
Dependiendo de la condición company == 'Netscape', la primera o la segunda expresión después de ?se ejecuta y muestra una alerta.
Aquí no asignamos un resultado a una variable. En su lugar, ejecutamos un código diferente según la condición.
No se recomienda utilizar el operador de signo de interrogación de esta manera.
La notación es más corta que la ifdeclaración equivalente , lo que atrae a algunos programadores. Pero es menos legible.
Aquí está el mismo código que se usa ifpara comparar:
let company = prompt('Which company created JavaScript?',