1.

1 Código

Empecemos desde el principio.

Un programa, a menudo denominado código fuente o código, es un conjunto de

instrucciones especiales para indicar al equipo qué tareas realizar. Normalmente, el
código se guarda en un archivo de texto, aunque con JavaScript también se puede
escribir código directamente en una consola de desarrollador en un navegador, que
veremos en breve.

Las reglas para el formato válido y las combinaciones de instrucciones se llaman un

lenguaje informático, a veces se refiere como su sintaxis, lo mismo que el inglés te
dice cómo deletrear palabras y cómo crear oraciones válidas usando palabras y
signos de puntuación.

Declaraciones

En un lenguaje de computadora, un grupo de palabras, números y operadores que

realiza una tarea específica es una sentencia/declaración. En JavaScript, una
declaración podría verse como sigue:

```js

a = b * 2;

```

Los caracteres `a` y `b` se llaman variables \(vea "Variables"\), que son como
simples cajas en las que puede almacenar cualquiera de sus cosas. En los
programas, las variables contienen valores \(como el número 42\) que debe usar el
programa. Piense en ellos como marcadores de posición simbólicos para los valores
mismos.

Por el contrario, el 2 es sólo un valor en sí mismo, llamado un valor literal, porque

está solo sin ser almacenado en una variable.
Los caracteres `=` y `*` son operadores \(ver "Operadores"\) - realizan acciones con
valores y variables tales como asignación y multiplicación matemática.

La mayoría de las declaraciones en JavaScript terminan con un punto y coma \(`;`\)

al final.

La afirmación `a = b * 2`; Le dice a la computadora, aproximadamente, que obtenga

el valor actual almacenado en la variable `b`, multiplique ese valor por 2, y luego
guarde el resultado en otra variable a la que llamamos `a`.

Los programas son sólo colecciones de muchas declaraciones de este tipo, que en
conjunto describen todos los pasos que se requieren para realizar el propósito de
su programa.

Expresiones

Las declaraciones se componen de una o más expresiones. Una expresión es

cualquier referencia a una variable o valor, o un conjunto de variables y valores
combinados con operadores.

Por ejemplo:

```js

a = b * 2;

```

Esta declaración tiene cuatro expresiones en ella:

2 es una expresión de valor literal

b es una expresión variable, lo que significa recuperar su valor actual

b \* 2 es una expresión aritmética, que significa hacer la multiplicación

a = b \* 2 es una expresión de asignación, lo que significa asignar el resultado de la

expresión b \* 2 a la variable a \(sobre las asignaciones posteriores\)
Una expresión general que se mantiene sola también se denomina declaración de
expresión, como la siguiente:

```js

b * 2;

```

Esta declaración de una expresión no es muy común o útil, ya que en general no

tendría ningún efecto en el funcionamiento del programa: recuperaría el valor de b
y lo multiplicaría por 2, pero luego no haría nada con ese resultado.

Una sentencia de expresión más común es una instrucción de expresión de llamada

\(véase "Funciones"\), ya que la sentencia completa es la expresión de llamada de
la función en sí:

```js

alert( a );

```

Ejecutar un programa

¿De qué manera esas colecciones de declaraciones de programación le dicen a la

computadora qué hacer? El programa necesita ser ejecutado, también conocido
como ejecutar el programa.

Declaraciones como `a = b * 2` son útiles para los desarrolladores al leer y escribir,

pero en realidad no están en una forma en que la computadora pueda entender
directamente. Así que una utilidad especial en la computadora \(ya sea un intérprete
o un compilador\) se utiliza para traducir el código que escribe en comandos que
una computadora puede entender.

Para algunos lenguajes de computadora, esta traducción de los comandos se hace

típicamente de arriba a abajo, línea por línea, cada vez que se ejecuta el programa,
se llama generalmente interpretar el código.
Para otros idiomas, la traducción se hace antes de tiempo, llamada compilación del
código, por lo que cuando el programa se ejecuta más tarde, lo que está en
ejecución es en realidad las instrucciones de la computadora ya compilada listo para
ejecutarse.

Normalmente, se afirma que JavaScript se interpreta, porque el código fuente de

JavaScript se procesa cada vez que se ejecuta. Pero eso no es del todo exacto. El
motor de JavaScript en realidad compila el programa sobre la marcha y luego
ejecuta inmediatamente el código compilado.

Nota: Para obtener más información sobre la compilación de JavaScript, consulte

los dos primeros capítulos del título Scope & Closures de esta serie.

1.10 Funciones

El empleado de la tienda de teléfonos probablemente no lleva consigo una

calculadora para calcular los impuestos y la cantidad final de la compra. Esa es una
tarea que necesita definir una vez y reutilizar una y otra vez. Las probabilidades son,
que la empresa tenga un registro de pago \(computadora, tableta, etc.\) con esas
"funciones" incorporadas.

Del mismo modo, su programa casi seguramente querrá dividir las tareas del código
en piezas reutilizables, en lugar de repetir repetidamente repetidamente \(juego de
palabras!\). La forma de hacerlo es definir una función.

Una función es generalmente una sección con el nombre del código que puede ser
"llamada" por ese nombre, y el código dentro de ella se ejecutará cada vez que se
llama. Considere:

```js

function printAmount() {

console.log( amount.toFixed( 2 ) );

}
var amount = 99.99;

printAmount(); // "99.99"

amount = amount * 2;

printAmount(); // "199.98"

```

Opcionalmente, las funciones pueden tomar argumentos \(también conocidos como

parámetros\), valores que se le "pasan". Además, también pueden devolver un
valor.

```js

function printAmount(amt) {

console.log( amt.toFixed( 2 ) );

function formatAmount() {

return "$" + amount.toFixed( 2 );

var amount = 99.99;

printAmount( amount * 2 ); // "199.98"

amount = formatAmount();

console.log( amount ); // "$99.99"

```
La función `printAmount(..)` toma un parámetro que llamamos `amt`. La función
`formatAmount()` devuelve un valor. Por supuesto, también puedes combinar esas
dos técnicas en la misma función.

Las funciones se usan a menudo para el código que se planea llamar varias veces,
pero también pueden ser útiles sólo para organizar fragmentos de código
relacionados en las colecciones con nombre, incluso si sólo planea llamarlas una
vez.

Considere:

```js

const TAX_RATE = 0.08;

function calculateFinalPurchaseAmount(amt) {

// calculate the new amount with the tax

amt = amt + (amt * TAX_RATE);

// return the new amount

return amt;

var amount = 99.99;

amount = calculateFinalPurchaseAmount( amount );

console.log( amount.toFixed( 2 ) ); // "107.99"

```

Aunque `calculateFinalPurchaseAmount(..)` sólo se llama una vez, organizar su

comportamiento en una función denominada separadamente hace que el código
que utiliza su lógica \(la declaración `amount = calculateFinal...` \) más limpia. Si la
función tenía más declaraciones en ella, los beneficios serían aún más
pronunciados.

1.11 Scope \(Ámbito\)

Si le pregunta al empleado de la tienda de teléfonos por un modelo de teléfono que

su tienda no tiene, no podrá venderle el teléfono que desea. Sólo tiene acceso a los
teléfonos en el inventario de su tienda. Tendrás que buscar otra tienda para ver si
puedes encontrar el teléfono que estás buscando.

La programación tiene un término para este concepto: scope \(técnicamente

llamado ámbito léxico\). En JavaScript, cada función obtiene su propio ámbito. El
scope es básicamente una colección de variables, así como las reglas de cómo se
accede a esas variables por nombre. Sólo el código dentro de esa función puede
acceder a las variables de ámbito de la función.

Un nombre de variable tiene que ser único dentro del mismo ámbito - no puede
haber dos variables diferentes una al lado del otro. Pero el mismo nombre de
variable podría aparecer en diferentes ámbitos.

```js

function one() {

// ésta `a` solo pertenece a la funcion `one()`

var a = 1;

console.log( a );

function two() {

// ésta `a` solo pertenece a la funcion `two()`

var a = 2;

console.log( a );
}

one(); // 1

two(); // 2

```

También, un scope puede estar anidado dentro de otro scope, apenas como si un
payaso en una fiesta del cumpleaños sopla encima de un globo dentro de otro globo.
Si un scope está anidado dentro de otro, el código dentro del ámbito más interno
puede acceder a las variables desde cualquiera de los ámbitos.

Considere:

```js

function outer() {

var a = 1;

function inner() {

var b = 2;

// puede acceder a ambos `a` y `b` aqui

console.log( a + b ); // 3

inner();

// solo puede acceder a `a` aqui

console.log( a ); // 1

outer();

```
Las reglas de ámbito léxico dicen que el código en un ámbito puede acceder a la
variable `a` de ese ámbito o de cualquier ámbito fuera de él.

Por lo tanto, el código dentro de la función `inner()` tiene acceso a las variables `a`
y `b`, pero el código en `outer()` sólo tiene acceso a `a` - no puede acceder a `b`
porque esa variable sólo está dentro de `inner()`.

Recuerde este fragmento de código anterior:

```js

const TAX_RATE = 0.08;

function calculateFinalPurchaseAmount(amt) {

// calculate the new amount with the tax

amt = amt + (amt * TAX_RATE);

// return the new amount

return amt;

```

La constante `TAX_RATE` \(variable\) es accesible desde dentro de la función

`calculateFinalPurchaseAmount(..)`, aunque no la pasamos, debido al alcance
léxico.

Nota: Para obtener más información sobre el ámbito léxico, consulte los tres
primeros capítulos del título Scope & Closures de esta serie.

1.12 Práctica

No hay absolutamente ningún sustituto para la práctica en el aprendizaje de la

programación. Ninguna cantidad de escritura articulada de mi parte harà por si sola
de usted un buen programador.
Con esto en mente, intentemos practicar algunos de los conceptos que hemos
aprendido aquí en este capítulo. Daré los "requisitos", y lo intentarás primero. Luego
consulte la lista de códigos que hay a continuación para ver cómo me llegué a ella.

* Escriba un programa para calcular el precio total de la compra de su teléfono.

Usted continuará comprando teléfonos \(sugerencia: loop!\) Hasta que se quede sin
dinero en su cuenta bancaria. También comprará accesorios para cada teléfono,
siempre y cuando su cantidad de compra esté por debajo de su umbral de gasto
mental.

* Después de haber calculado el importe de su compra, agregue el impuesto y, a

continuación, imprima el importe de compra calculado, correctamente formateado.

* Por último, compruebe la cantidad en contra del saldo de su cuenta bancaria para
ver si se lo puede permitir o no.

* Debe establecer algunas constantes para la "tasa de impuesto", "precio de

teléfono", "precio de accesorio" y "umbral de gasto", así como una variable para su
"saldo de cuenta bancaria". "

* Debe definir funciones para calcular el impuesto y para formatear el precio con un
"$" y redondear a dos decimales.

* Desafío de bonificación: Trate de incorporar la entrada a este programa, tal vez

con el `prompt(..)` cubierto en la "Entrada" anterior. Por ejemplo, puede solicitar al
usuario el saldo de su cuenta bancaria. ¡Diviértase y sea creativo!

OK, adelante. Intentalo. ¡No eche un vistazo a mi lista de códigos hasta que lo haya
intentado usted mismo!

Nota: Debido a que este es un libro de JavaScript, obviamente voy a resolver el

ejercicio de práctica en JavaScript. Pero usted puede hacerlo en otro idioma por
ahora si se siente más cómodo.
Aquí está mi solución de JavaScript para este ejercicio:

```js

const SPENDING_THRESHOLD = 200;

const TAX_RATE = 0.08;

const PHONE_PRICE = 99.99;

const ACCESSORY_PRICE = 9.99;

var bank_balance = 303.91;

var amount = 0;

function calculateTax(amount) {

return amount * TAX_RATE;

function formatAmount(amount) {

return "$" + amount.toFixed( 2 );

// keep buying phones while you still have money

while (amount < bank_balance) {

// buy a new phone!

amount = amount + PHONE_PRICE;

// can we afford the accessory?

if (amount < SPENDING_THRESHOLD) {

amount = amount + ACCESSORY_PRICE;

}
// don't forget to pay the government, too

amount = amount + calculateTax( amount );

console.log(

"Your purchase: " + formatAmount( amount )

);

// Your purchase: $334.76

// can you actually afford this purchase?

if (amount > bank_balance) {

console.log(

"You can't afford this purchase. :("

);

// You can't afford this purchase. :(

```

Nota: La forma más sencilla de ejecutar este programa JavaScript es escribirlo en

la consola de desarrollo de su navegador más cercano.

¿Cómo hiciste? No haría daño intentarlo otra vez ahora que usted ha visto mi
código. Y jugar con el cambio de algunas de las constantes para ver cómo se ejecuta
el programa con diferentes valores.
1.13 - Revisión

El aprendizaje de programación no tiene que ser un proceso complejo y abrumador.

Sólo hay algunos conceptos básicos que necesita retener en la cabeza.

Estos actúan como bloques de construcción. Para construir una torre alta, empiece
primero colocando el bloque en la parte superior del bloque en la parte superior del
bloque. Lo mismo ocurre con la programación. Éstos son algunos de los elementos
fundamentales de la programación:

* Necesita que los operadores realicen acciones sobre valores.

* Necesita valores y tipos para realizar diferentes tipos de acciones como

matemáticas en números o salida con cadenas.

* Necesita variables para almacenar datos \(también conocido como estado\)

durante la ejecución de su programa.

* Necesitas condicionales como declaraciones `if` para tomar decisiones.

* Necesitas bucles para repetir las tareas hasta que una condición deja de ser
verdad.

* Necesita funciones para organizar su código en trozos lógicos y reutilizables.

Los comentarios de código son una manera eficaz de escribir un código más legible,
lo que hace que su programa sea más fácil de entender, mantener y corregir más
tarde si hay problemas.

Por último, no descuiden el poder de la práctica. La mejor manera de aprender a

escribir código es escribir código.

¡Estoy emocionado de que estés bien en tu camino de aprender a codificar, ahora!

Seguid así. No olvide consultar otros recursos de programación para principiantes
\(libros, blogs, formación en línea, etc.\). Este capítulo y este libro son un gran
comienzo, pero son sólo una breve introducción.
El siguiente capítulo revisará muchos de los conceptos de este capítulo, pero desde
una perspectiva más específica de JavaScript, que resaltará la mayoría de los
principales temas que se abordan con más detalle en el resto de la serie.

# 1.2 Inténtalo tú mismo

Este capítulo va a introducir cada concepto de programación con simples

fragmentos de código, todos escritos en JavaScript \(obviamente!\).

No se puede enfatizar lo suficiente: mientras que usted va a través de este capítulo

- y usted necesitará darle el tiempo para repasarlo varias veces - usted debe
practicar cada uno de estos conceptos escribiendo el código usted mismo. La forma
más sencilla de hacerlo es abrir la consola de herramientas de desarrollador en el
navegador más cercano \(Firefox, Chrome, IE, etc.\).

Sugerencia: Normalmente, puede iniciar la consola del programador con un acceso

directo de teclado o desde un elemento de menú. Para obtener información más
detallada acerca del inicio y el uso de la consola en su navegador favorito, consulte
"Dominar de la consola de herramientas de desarrollo"
\([http://blog.teamtreehouse.com/mastering-developer-tools-
console](http://blog.teamtreehouse.com/mastering-developer-tools-console)\). Para
escribir varias líneas en la consola a la vez, use &lt;shift&gt; + &lt;enter&gt; para
pasar a la nueva línea siguiente. Una vez que pulse &lt;enter&gt; por sí mismo, la
consola ejecutará todo lo que acaba de escribir.

Vamos a familiarizarnos con el proceso de ejecución de código en la consola. En

primer lugar, sugiero abrir una pestaña vacía en su navegador. Prefiero hacer esto
escribiendo: en blanco en la barra de direcciones. A continuación, asegúrese de que
su consola de desarrollo está abierta, como acabamos de mencionar.

Ahora, escriba este código y vea cómo se ejecuta:

```js

a = 21;
b = a * 2;

console.log( b );

```

Escribir el código anterior en la consola en Chrome debería producir algo como lo

siguiente:


Vamos, prueba. La mejor manera de aprender la programación es empezar a

codificar!

### Salida

En el fragmento de código anterior, utilizamos console.log \(..\). En pocas palabras,

veamos de qué se trata esa línea de código.

Usted puede haber adivinado, pero eso es exactamente cómo imprimimos el texto
\(aka salida al usuario\) en la consola del navegador. Hay dos características de esa
afirmación que debemos explicar.

En primer lugar, la parte log \(b\) se denomina llamada de función \(véase

"Funciones"\). Lo que pasa es que estamos entregando la variable b a esa función,
que le pide tomar el valor de b e imprimirlo en la consola.

En segundo lugar, la parte console es una referencia de objeto donde se encuentra

la función log \(..\). Cubrimos los objetos y sus propiedades con más detalle en el

Capítulo 2.

Otra forma de crear resultados que puede ver es ejecutar una instrucción de
alert\(..\). Por ejemplo:

```js

alert( b );
```

Si ejecuta eso, notará que en lugar de imprimir la salida a la consola, muestra un

cuadro emergente "Aceptar" con el contenido de la variable b. Sin embargo, usar
console.log \(...\) generalmente hará que el aprendizaje sobre la codificación y
ejecución de sus programas en la consola sea más fácil que usar la alert \(..\), ya
que puede generar muchos valores a la vez sin interrumpir la interfaz del navegador.

Para este libro, usaremos console.log \(..\) para la salida.

Entrada

Mientras estamos discutiendo la salida, también puede preguntarse sobre la entrada

\(es decir, recibir información del usuario\).

La forma más común que ocurre es que la página HTML muestre elementos de
formulario \(como cuadros de texto\) en un usuario al que puedan escribir y, a
continuación, utilizar JS para leer esos valores en las variables del programa.

Pero hay una manera más fácil de obtener información para fines sencillos de
aprendizaje y demostración, como la que estará haciendo a lo largo de este libro.
Utilice la función de prompt \(..\):

```js

age = prompt( "Please tell me your age:" );

console.log( age );

```

Como ya habrás adivinado, el mensaje que pasas al prompt \(..\) - en este caso,
"Por favor, dime tu edad:" - se imprime en el popup.

Esto debería ser similar a lo siguiente:



Una vez que envíe el texto de entrada haciendo clic en "Aceptar", observará que el
valor que escribió se almacena en la variable de edad, que luego se emite con
console.log \(..\):


Para mantener las cosas simples mientras estamos aprendiendo conceptos básicos
de programación, los ejemplos en este libro no requerirán entrada. Pero ahora que
has visto cómo usar el prompt \(..\), si quieres desafiarte puedes intentar usar la
entrada en tus exploraciones de los ejemplos.

1.3 Operadores

Los operadores son la forma en que realizamos acciones sobre variables y valores.
Ya hemos visto dos operadores de JavaScript, el `=` y el `*`.

El operador `*` realiza la multiplicación matemática. Lo suficientemente simple, ¿no?

El operador `=` igual se utiliza para la asignación - primero calculamos el valor en el

lado derecho \(valor fuente\) de la = y luego ponerlo en la variable que especificamos
en el lado izquierdo \(variable objetivo\).

Advertencia: Esto puede parecer un orden inverso extraño para especificar

asignación. En lugar de a = 42, algunos podrían preferir voltear el orden para que el
valor de origen esté a la izquierda y la variable de destino a la derecha, como 42 -
&gt; a \(JavaScript no válido\). Desafortunadamente, la forma ordenada a = 42, y
variaciones similares, es bastante frecuente en los lenguajes de programación
modernos. Si se siente antinatural, sólo pase algún tiempo ensayando y el orden en
su mente lo acostumbrará a ella.

Considere:

```js

a = 2;

b = a + 1;
```

Aquí, asignamos el valor 2 a la variable a. A continuación, obtenemos el valor de la

variable a \(todavía 2\), agregamos 1 a ella resultando en el valor 3, luego
almacenamos ese valor en la variable b.

Si bien técnicamente no es un operador, necesitará la palabra clave `var` en cada

programa, ya que es la forma principal de declarar \(aka crear\) variables \(consulte
"Variables"\).

Siempre debe declarar la variable por nombre antes de usarla. Pero sólo es
necesario declarar una variable una vez para cada ámbito \(ver "Alcance"\); Se
puede utilizar tantas veces como sea necesario. Por ejemplo:

```js

var a = 20;

a = a + 1;

a = a * 2;

console.log( a ); // 42

```

Éstos son algunos de los operadores más comunes en JavaScript:

* Asignación: = como en a = 2.

* Matemáticas: + \(adición\), - \(sustracción\), \* \(multiplicación\) y / \(división\), como

en a \* 3.

* Asignación Compuesta : + =, - =, \* =, y / = son operadores compuestos que

combinan una operación matemática con asignación, como en a + = 2 \(igual que a
= a + 2\).

* Incremento / Decremento: ++ \(incremento\), - \(decremento\), como en a ++

\(similar a a = a + 1\).
* Acceso a la propiedad del objeto:. Como en console.log \(\). Los objetos son
valores que contienen otros valores en determinadas ubicaciones denominadas
propiedades. `obj.a` significa un valor de objeto llamado obj con una propiedad del
nombre a. Las propiedades se pueden acceder alternativamente como obj \["a"\].
Consulte el Capítulo 2.

* Igualdad: == \(suelto-igual\), === \(estricto-igual\),! = \(Suelto no-igual\),! ==

\(estricto no igual\), como en a == b.

* Consulte "Valores y Tipos" y el Capítulo 2.

* Comparación: &lt;\(menor que\),&gt; \(mayor que\), &lt;= \(menor que o suelto-

igual\),&gt; = \(mayor que o suelto-igual\), como en a &lt;= b.

* Consulte "Valores y Tipos" y el Capítulo 2.

* Lógico: && \(y\), \|\| \(O\), como en a \|\| b que selecciona a o b. Estos operadores
se usan para expresar condicionales compuestos \(ver "Condicionales"\), como si a
o b es verdadero.

Nota: Para obtener más detalles y cobertura de los operadores que no se

mencionan aquí, consulte las "Expresiones y operadores" de Mozilla Developer
Network \(MDN\) [\(https://developer.mozilla.org/en-US/docs/Web/JavaScript / Guía
/ Expresiones\_y\_Operadores\).](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Expressions_and_Operators)

1.4 Valores y Tipos

Si le preguntas a un empleado en una tienda de teléfono cuánto cuesta un teléfono

determinado, y dicen "noventa y nueve, noventa y nueve" \(es decir, $ 99.99\), te
están dando una cifra numérica real que representa lo que vas a necesitar pagar
\(más impuestos\) para comprarlo. Si usted quiere comprar dos de esos teléfonos,
puede hacer fácilmente las matemáticas mentales para duplicar ese valor para
obtener $ 199.98 por su costo base.
Si ese mismo empleado coge otro teléfono similar, pero dice que es "gratis", no le
están dando un número, sino otro tipo de representación de su costo esperado \($
0.00\) - la palabra "free ."

Cuando más tarde pregunte si el teléfono incluye un cargador, esa respuesta sólo
podría haber sido "sí" o "no".

De manera muy similar, cuando expresa valores en un programa, elige diferentes

representaciones para esos valores en función de lo que planea hacer con ellos.

Estas diferentes representaciones de los valores se denominan tipos en

terminología de programación. JavaScript tiene tipos incorporados para cada uno
de estos llamados valores primitivos:

* Cuando necesitas hacer matemáticas, quieres un número.

* Cuando necesite imprimir un valor en la pantalla, necesita una cadena \(uno o más
caracteres, palabras, oraciones\).

* Cuando necesite tomar una decisión en su programa, necesita un booleano

\(verdadero o falso\).

Los valores que se incluyen directamente en el código fuente se llaman literales.

Los literales de cadenas están rodeados por comillas dobles "..." o comillas simples
\('...'\) - la única diferencia es la preferencia estilística. El número y los literales
booleanos se presentan como es \(es decir, 42, true, etc.\).

Considere:

```js

"I am a string";

'I am also a string';

42;

true;

false;
```

Más allá de los tipos de valores string / number / boolean, es común que los
lenguajes de programación proporcionen arrays, objetos, funciones y más.
Cubriremos mucho más sobre valores y tipos a lo largo de este capítulo y el
siguiente.

Conversión entre tipos

Si tienes un número pero necesitas imprimirlo en la pantalla, necesitas convertir el

valor en una cadena, y en JavaScript esta conversión se llama "coerción". Del
mismo modo, si alguien introduce una serie de caracteres numéricos en un
formulario en una página de comercio electrónico, es una cadena, pero si necesita
utilizar ese valor para realizar operaciones matemáticas, debe coaccionarla a un
número.

JavaScript proporciona varias facilidades diferentes para forzar la coerción entre

tipos. Por ejemplo:

```js

var a = "42";

var b = Number( a );

console.log( a ); // "42"

console.log( b ); // 42

```

El uso de Number \(..\) \(una función incorporada\) como se muestra es una coerción
explícita de cualquier otro tipo al tipo de número. Eso debería ser bastante sencillo.

Pero un tema polémico es lo que sucede cuando se intenta comparar dos valores
que ya no son del mismo tipo, lo que requeriría coerción implícita.

Al comparar la cadena "99.99" con el número 99.99, la mayoría de la gente estaría

de acuerdo en que son equivalentes. Pero no son exactamente iguales, ¿verdad?
Es el mismo valor en dos representaciones diferentes, dos tipos diferentes. Se
podría decir que son "vagamente iguales", ¿no?

Para ayudarte en estas situaciones comunes, JavaScript a veces se activa y obliga

implícitamente a los valores a los tipos coincidentes.

Así que si usas el operador == loose igual para hacer la comparación "99.99" ==
99.99, JavaScript convertirá el lado izquierdo "99.99" a su número equivalente
99.99. La comparación entonces se convierte en 99.99 == 99.99, que es por
supuesto verdad.

Si bien está diseñado para ayudarlo, la coerción implícita puede crear confusión si
no se ha tomado el tiempo para aprender las reglas que rigen su comportamiento.
La mayoría de los desarrolladores de JS nunca lo tienen, por lo que la sensación
común es que la coerción implícita es confusa y daña los programas con errores
inesperados, por lo que debe evitarse. Incluso a veces se llama un defecto en el
diseño del lenguaje.

Sin embargo, la coerción implícita es un mecanismo que se puede aprender, y

además debe ser aprendido por cualquiera que desee tomar la programación de
JavaScript en serio. ¡No sólo no confunde una vez que aprende las reglas, él puede
realmente hacer sus programas mejores! El esfuerzo vale la pena.

Nota: Para obtener más información sobre la coerción, consulte el Capítulo 2 de

este título y el Capítulo 4 del título de Tipos y Gramática de esta serie.

# 1.5 Comentarios del Código

El empleado de la tienda telefónica puede anotar algunas notas sobre las

características de un teléfono recién lanzado o sobre los nuevos planes que su
empresa ofrece. Estas notas son sólo para el empleado - no son para los clientes
leer. Sin embargo, estas notas ayudan al empleado a hacer su trabajo mejor
documentando de los comos y los porqués de lo que ella debe decir a los clientes.
Una de las lecciones más importantes que puede aprender sobre la escritura de
código es que no es sólo para la computadora. El código es mucho más, si no más,
para el desarrollador tanto como lo es para el compilador.

Su computadora sólo se preocupa por el código de máquina, una serie de 0s y 1s

binarios, que viene de la compilación. Hay un número casi infinito de programas que
podría escribir que producen la misma serie de 0s y 1s. Las opciones que hagas
sobre cómo escribir tu programa son importantes, no sólo para ti, sino para los
demás miembros del equipo e incluso para tu futuro yo.

Usted debe esforzarse no sólo en escribir programas que funcionen correctamente,

sino programas que tienen sentido cuando se examinan. Puede recorrer un largo
camino en ese esfuerzo eligiendo buenos nombres para sus variables \(ver
"Variables"\) y funciones \(ver "Funciones"\).

Pero otra parte importante es los comentarios del código. Éstos son pedacitos de
texto en su programa que se insertan puramente para explicar cosas a un ser
humano. El intérprete / compilador siempre ignorará estos comentarios.

Hay un montón de opiniones sobre lo que debe ser un buen código comentado; No
podemos definir reglas universales absolutas. Pero algunas observaciones y
directrices son muy útiles:

* El código sin comentarios es subóptimo.

* Demasiados comentarios \(uno por línea, por ejemplo\) es probablemente un signo

de código mal escrito.

* Los comentarios deben explicar por qué, no qué hacen. Opcionalmente pueden
explicar cómo si eso es particularmente confuso.

En JavaScript, hay dos tipos de comentarios posibles: un comentario de una sola

línea y un comentario de varias líneas.
Considere:

```js

// This is a single-line comment

/* But this is

a multiline

comment.

*/

```

El // comentario de una sola línea es apropiado si vas a poner un comentario justo

encima de una sola sentencia, o incluso al final de una línea. Todo en la línea
después de // se trata como el comentario \(por lo tanto es ignorado por el
compilador\), todo el camino hasta el final de la línea. No hay ninguna restricción a
lo que puede aparecer dentro de un comentario de una sola línea.

Considere:

```js

var a = 42; // 42 is the meaning of life

```

El comentario de / \* .. \* / multiline es apropiado si tienes varias líneas de explicación

para hacer en tu comentario.

Aquí está un uso común de comentarios multilínea:

```js

/* The following value is used because

it has been shown that it answers

every question in the universe. */

var a = 42;

```

También puede aparecer en cualquier parte de una línea, incluso en el centro de

una línea, porque el \* / lo termina. Por ejemplo:

```js

var a = /* arbitrary value */ 42;

console.log( a ); // 42

```

Lo único que no puede aparecer dentro de un comentario de varias líneas es un \*

/, porque eso sería interpretado para finalizar el comentario.

Usted definitivamente querrá comenzar su aprendizaje de programación

comenzando con el hábito de comentar el código. A lo largo del resto de este
capítulo, verás que utilizo los comentarios para explicar las cosas, así que haz lo
mismo en tu propia práctica. Confía en mí, todo el mundo que lea su código se lo
agradecerá!

1.6 Variables

La mayoría de los programas útiles necesitan rastrear un valor a medida que cambia
a lo largo del programa, pasando por diferentes operaciones según lo solicitado por
las tareas previstas de su programa.

La forma más sencilla de hacerlo en su programa es asignar un valor a un

contenedor simbólico, llamado variable, llamado así porque el valor en este
contenedor puede variar con el tiempo según sea necesario.

En algunos lenguajes de programación, se declara una variable \(contenedor\) para

contener un tipo específico de valor, como número o cadena. La tipificación estática,
también conocida como ejecución de tipo, se cita típicamente como un beneficio
para la corrección del programa al evitar conversiones de valor no deseadas.

Otros idiomas enfatizan tipos para valores en lugar de variables. La tipificación débil,
también conocida como escritura dinámica, permite que una variable contenga
cualquier tipo de valor en cualquier momento. Se suele citar como un beneficio para
la flexibilidad del programa al permitir que una única variable represente un valor sin
importar la forma de tipo que el valor pueda tomar en un momento dado en el flujo
lógico del programa.

JavaScript utiliza el último enfoque, el tipo dinámico, lo que significa que las
variables pueden contener valores de cualquier tipo sin ningún tipo de aplicación.

Como se mencionó anteriormente, declaramos una variable usando la instrucción

`var` - note que no hay otra información de tipo en la declaración. Considere este
sencillo programa:

```js

var amount = 99.99;

amount = amount * 2;

console.log( amount ); // 199.98

// convert `amount` to a string, and

// add "$" on the beginning

amount = "$" + String( amount );

console.log( amount ); // "$199.98"

```

La variable `amount` comienza teniendo el número 99.99, y luego tiene el resultado

del número de la cantidad \* 2, que es 199.98.
El primer comando console.log \(..\) tiene que coaccionar implícitamente ese valor
numérico a una cadena para imprimirlo.

Entonces el valor de la sentencia `= "$" + String (amount)` coacciona explícitamente

el valor 199.98 a una cadena y agrega un carácter "$" al principio. En este punto,
`amount` ahora tiene el valor de cadena "$ 199.98", por lo que la segunda
instrucción console.log \(..\) no necesita hacer ninguna coerción para imprimirlo.

Los desarrolladores de JavaScript notarán la flexibilidad de usar la variable `amount`

para cada uno de los valores de 99.99, 199.98 y "$ 199.98". Los entusiastas de la
tipificación estática preferirían una variable independiente como `amountStr` para
mantener la representación final de "$ 199.98" del valor, porque es un tipo diferente.

De cualquier manera, notará que `amount` tiene un valor de ejecución que cambia
a lo largo del programa, ilustrando el propósito principal de las variables: administrar
el estado del programa.

En otras palabras, `state` es el seguimiento de los cambios a los valores a medida

que su programa se ejecuta.

Otro uso común de variables es para centralizar la configuración de valores. Esto

se llama más comúnmente constantes, cuando usted declara una variable con un
valor y la intención es que el valor no cambie a través del programa.

Usted declara estas constantes, a menudo en la parte superior de un programa, por

lo que es conveniente para usted tener un lugar para ir a alterar un valor si es
necesario. Por convención, las variables JavaScript como constantes suelen ser
mayúsculas, con guiones bajos \_ entre varias palabras.

He aquí un ejemplo tonto:

```js

var TAX_RATE = 0.08; // 8% sales tax

var amount = 99.99;

amount = amount * 2;
amount = amount + (amount * TAX_RATE);

console.log( amount ); // 215.9784

console.log( amount.toFixed( 2 ) ); // "215.98"

```

Nota: Similar a cómo `console.log (..)` es un registro de `function(..)` que se accede

como una propiedad de objeto en el valor de la consola, `toFixed(..)` aquí es una
función a la que se puede acceder en valores numéricos. Los números de
JavaScript no se formatean automáticamente para dólares - el motor no sabe cuál
es su intención y no hay un tipo de moneda. `ToFixed(..)` nos permite especificar
cuántos números decimales queremos que el número sea redondeado, y produce
la cadena según sea necesario.

La variable `TAX_RATE` es sólo constante por convención - no hay nada especial

en este programa que impide que se cambie. Pero si la ciudad eleva la tasa del
impuesto a las ventas al 9%, podemos actualizar fácilmente nuestro programa
estableciendo el valor `TAX_RATE` asignado a 0,09 en un lugar, en lugar de buscar
y encontrar muchas ocurrencias del valor 0.08 puesto a lo largo del programa y
actualizandolo en todas ellas.

La versión más reciente de JavaScript en el momento de escribir este documento

\(comúnmente llamado "ES6"\) incluye una nueva forma de declarar constantes,
utilizando `const` en lugar de `var`:

```js

// as of ES6:

const TAX_RATE = 0.08;

var amount = 99.99;

// ..

```
Las constantes son útiles al igual que las variables con valores sin cambios, excepto
que las constantes también evitan el cambio accidental de valor en algún otro lugar
después de la configuración inicial. Si intentó asignar un valor diferente a
`TAX_RATE` después de esa primera declaración, su programa rechazaría el
cambio \(y en modo estricto, fallará con un error; consulte "Modo estricto" en el
Capítulo 2\).

Por cierto, ese tipo de "protección" contra los errores es similar al tipo de tipificación
estática, por lo que puede ver por qué los tipos estáticos en otros idiomas pueden
ser atractivos!

Nota: Para obtener más información sobre cómo se pueden utilizar diferentes
valores en las variables en sus programas, consulte el título Tipos y Gramática de
esta serie.

1.7 Bloques

El cliente de la tienda telefónica debe pasar por una serie de pasos para completar
la compra mientras compra su nuevo teléfono.

Del mismo modo, en código a menudo es necesario agrupar una serie de

declaraciones en conjunto, que a menudo llamamos un bloque. En JavaScript, un
bloque se define envolviendo una o más instrucciones dentro de un par de llaves
`{..}`. Considere:

```js

var amount = 99.99;

// un bloque general

amount = amount * 2;

console.log( amount ); // 199.98

}
```

Este tipo de bloque independiente general `{..}` es válido, pero no es tan

comúnmente visto en los programas de JS. Por lo general, los bloques se adjuntan
a alguna otra instrucción de control, como una instrucción `if` \(consulte
"Condicionales"\) o un bucle \(consulte "Loops"\). Por ejemplo:

```js

var amount = 99.99;

// is amount big enough?

if (amount > 10) { // <-- block attached to `if`

amount = amount * 2;

console.log( amount ); // 199.98

```

Vamos a explicar las declaraciones `if` en la siguiente sección, pero como puede
ver, el bloque `{..}` con sus dos declaraciones se adjunta a `if (amount > 10)`; Las
declaraciones dentro del bloque sólo se procesarán si pasa el condicional.

Nota: A diferencia de la mayoría de otras sentencias como `console.log(amount);`,

una instrucción de bloque no necesita un punto y coma \(;\) para concluirlo.

1.8 Condicionales

"¿Desea agregar los protectores de pantalla adicionales a su compra, por $ 9.99?"

El empleado de la tienda telefónica le ha pedido que tome una decisión. Y puede
que necesite consultar primero el estado actual de su cartera o cuenta bancaria para
responder a esa pregunta. Pero, obviamente, esto es sólo una simple pregunta "sí
o no".

Hay bastantes maneras de expresar condicionales \(aka decisiones\) en nuestros

programas.
La más común es la instrucción `if`. Esencialmente, usted está diciendo: "Si esta
condición es cierta, haga lo siguiente ...". Por ejemplo:

```js

var bank_balance = 302.13;

var amount = 99.99;

if (amount < bank_balance) {

console.log( "I want to buy this phone!" );

```

La instrucción `if` requiere una expresión entre los paréntesis `()` que puede tratarse
como verdadero o falso. En este programa, hemos proporcionado la expresión
`amount < bank_balance`, que de hecho se evaluará a `true` o `false` dependiendo
de la cantidad en la variable `bank_balance`.

Incluso puede proporcionar una alternativa si la condición no es verdadera, llamada

cláusula `else`. Considere:

```js

const ACCESSORY_PRICE = 9.99;

var bank_balance = 302.13;

var amount = 99.99;

amount = amount * 2;

// can we afford the extra purchase?

if ( amount < bank_balance ) {

console.log( "I'll take the accessory!" );

amount = amount + ACCESSORY_PRICE;

}

// otherwise:

else {

console.log( "No, thanks." );

```

Aquí, si `amount < bank_balance` es `true`, imprimiremos "¡Tomaré el accesorio!" Y

agregue 9.99 a nuestra variable `amount`. De lo contrario, la cláusula `else` dice
que simplemente responderemos cortésmente con "No, gracias". Y dejar la cantidad
sin cambios.

Como discutimos en "Valores y Tipos" anteriormente, los valores que no son ya de

un tipo esperado son a menudo coaccionados a ese tipo. La sentencia `if` espera
un booleano, pero si se pasa algo que no sea ya booleano, la coerción se producirá.

JavaScript define una lista de valores específicos que se consideran "falseados"

porque cuando se coaccionan a un booleano, se convierten en falsos - estos
incluyen valores como `0` y `""`. Cualquier otro valor que no esté en la lista de
"falsos" es automáticamente "verdad" - cuando se coacciona a un booleano se
convierten en verdaderos. Los valores Truthy incluyen cosas como 99.99 y "free".
Vea "Truthy & Falsy" en el Capítulo 2 para más información.

Los condicionales existen en otras formas además del `if`. Por ejemplo, la
instrucción `switch` puede usarse como una abreviatura para una serie de
instrucciones `if..else` \(vea el Capítulo 2\). Los bucles \(ver "Loops"\) usan un
condicional para determinar si el bucle debe continuar o detenerse.

Nota: Para obtener información más detallada sobre las coerciones que pueden
ocurrir implícitamente en las expresiones de prueba de condicionales, consulte el
Capítulo 4 del título de Tipos y Gramática de esta serie.
1.9 Bucles

Durante las horas pico, hay una lista de espera para los clientes que necesitan
hablar con el empleado de la tienda telefónica. Aunque todavía hay personas en
esa lista, sólo tiene que seguir sirviendo al próximo cliente.

Repetir un conjunto de acciones hasta que cierta condición falla - en otras palabras,
repetir sólo mientras la condición se mantiene - es el trabajo de los bucles de
programación; Los bucles pueden tomar diferentes formas, pero todos satisfacen
este comportamiento básico.

Un bucle incluye la condición de prueba, así como un bloque \(normalmente como

`{..}`\). Cada vez que se ejecuta el bloque del bucle, se llama iteración.

Por ejemplo, el bucle `while` y las formas de bucle `do..while` ilustran el concepto
de repetir un bloque de sentencias hasta que una condición ya no se evalúa como
verdadera:

```js

while (numOfCustomers > 0) {

console.log( "How may I help you?" );

// help the customer...

numOfCustomers = numOfCustomers - 1;

// versus:

do {

console.log( "How may I help you?" );

// help the customer...

numOfCustomers = numOfCustomers - 1;

} while (numOfCustomers > 0);

```

La única diferencia práctica entre estos bucles es si el condicional se prueba antes

de la primera iteración \(`while`\) o después de la primera iteración \(`do..while`\).

De cualquier forma, si las pruebas condicionales son falsas, la siguiente iteración

no se ejecutará. Esto significa que si la condición es inicialmente falsa, un bucle
while nunca se ejecutará, pero un bucle `do..while` se ejecutará sólo la primera vez.

A veces usted está haciendo un bucle con el propósito de contar un cierto conjunto
de números, como de 0 a 9 \(diez números\). Puede hacerlo estableciendo una
variable de iteración de bucle como `i` en el valor `0` e incrementándola en `1` cada
iteración.

Advertencia: Por una variedad de razones históricas, los lenguajes de programación

casi siempre cuentan las cosas de manera cero, es decir, comenzando con 0 en
lugar de 1. Si no está familiarizado con ese modo de pensar, puede ser muy confuso
al principio. Tómese su tiempo para practicar el conteo empezando por 0 para
sentirse más cómodo con él.

El condicional se prueba en cada iteración, como si hubiera una declaración

implícita `if `dentro del bucle.

Podemos usar la instrucción `break` de JavaScript para detener un bucle. También,

podemos observar que es extremadamente fácil crear un bucle que de otra manera
funcionaría para siempre sin un mecanismo para detenerla.

Vamos a ilustrar esto:

```js

var i = 0;

// a `while..true` loop would run forever, right?

while (true) {

// stop the loop?

 if ((i <= 9) === false) {

break;

console.log( i );

i = i + 1;

// 0 1 2 3 4 5 6 7 8 9

```

Advertencia: esto no es una forma práctica en la que desearía utilizar sus bucles.
Se presenta aquí sólo con fines ilustrativos.

Mientras que un `while` \(o `do..while`\) puede realizar la tarea manualmente, hay
otra forma sintáctica llamada un bucle `for` sólo para ese propósito:

```js

for (var i = 0; i <= 9; i = i + 1) {

console.log( i );

// 0 1 2 3 4 5 6 7 8 9

```

Como puede ver, en ambos casos el condicional` i <= 9` es verdadero para las
primeras 10 iteraciones \(`i `de valores de 0 a 9\) de cualquier forma de bucle, pero
se convierte en falso una vez que `i` es un valor 10.

El bucle `for` tiene tres cláusulas: la cláusula de inicialización \(`var i = 0`\), la

cláusula de prueba condicional \(`i <= 9`\) y la cláusula de actualización \(`i = i + 1`\).
Así que si vas a contar con tus iteraciones de bucle, es una forma más compacta
ya menudo más fácil de entender y escribir.
Existen otros formularios de bucle especializados que tienen la intención de iterar
sobre valores específicos, como las propiedades de un objeto \(véase el capítulo
2\), donde la prueba condicional implícita es justamente si se han procesado todas
las propiedades. El concepto de "bucle hasta que falla una condición" no importa
cuál sea la forma del bucle.