You Dont Know Js-Up and Going

YOU DON’T KNOW JS – 01: UP & GOING
¿Qué fue lo último que aprendiste?
Tal vez era una lengua extranjera, como el italiano o el alemán. O quizás fue un editor gráfico,
como Photoshop. O una técnica de cocina, carpintería o una rutina de ejercicios. Quiero que
recuerdes ese sentimiento cuando finalmente lo tuviste: el momento de la bombilla. Cuando las
cosas pasaron de borrosas a cristalinas, cuando entendió la diferencia entre los substantivos
masculinos y femeninos en francés. ¿Cómo te sentiste? Bastante increíble, ¿verdad?
Ahora quiero que vuelvas un poco más atrás en tu memoria, justo antes de que aprendieras tu
nueva habilidad. ¿Cómo se sintió eso? Probablemente un poco intimidante y un poco frustrante,
¿no? En un momento dado, todos nosotros no sabíamos las cosas que sabemos ahora y eso está
totalmente bien; todos empezamos en alguna parte. Aprender nuevo material es una aventura
emocionante, especialmente si estás buscando aprender el tema eficientemente.
Enseño muchas clases de codificación para principiantes. Los estudiantes que toman mis clases a
menudo han tratado de enseñarse a sí mismos materias como HTML o JavaScript leyendo entradas
en blogs o copiando y pegando código, pero no han sido capaces de dominar realmente el material
que les permitirá codificar el resultado deseado. Y debido a que no comprenden realmente los
pormenores de ciertos temas de codificación, no pueden escribir código poderoso o depurar su
propio trabajo, ya que no entienden realmente lo que está sucediendo.
Siempre creo en enseñar mis clases de la manera correcta, lo que significa que enseño estándares
web, marcado semántico, código bien comentado y otras mejores prácticas. Cubriré el tema de una
manera minuciosa para explicar cómo y por qué, sin simplemente tirar el código para copiar y
pegar. Cuando te esfuerzas por comprender tu código, creas un mejor trabajo y te vuelves mejor
en lo que haces. El código ya no es sólo tu trabajo, es tu oficio. Esto es por lo que me encanta Up &
Going. Kyle nos lleva en una inmersión profunda a través de la sintaxis y la terminología para dar
una gran introducción a JavaScript sin cortar esquinas. Este libro no escatima en la superficie, sino
que nos permite entender realmente los conceptos que vamos a escribir.
Como no es suficiente con poder duplicar fragmentos de jQuery en su sitio web, tampoco es
suficiente con aprender a abrir, cerrar y guardar un documento en Photoshop. Claro, una vez que
aprenda algunos conceptos básicos sobre el programa, podría crear y compartir un diseño que
hice. Pero sin conocer legítimamente las herramientas y lo que hay detrás de ellas, ¿cómo puedo
definir una cuadrícula, o crear un sistema de tipo legible, u optimizar gráficos para uso web? Lo
mismo ocurre con JavaScript. Sin saber cómo funcionan los bucles, o cómo definir variables, o qué
alcance es, no estaremos escribiendo el mejor código que podamos. No queremos conformarnos
con nada menos, después de todo, esta es nuestra nave.
Cuanto más te acercas a JavaScript, más claro se vuelve. Palabras como cierres, objetos y métodos
pueden parecer fuera de su alcance ahora, pero este libro ayudará a aclarar esos términos. Quiero
que mantengas esos dos sentimientos de antes y después de que aprendas algo en mente
mientras comienzas este libro. Puede parecer abrumador, pero usted ha recogido este libro
porque está comenzando un viaje impresionante para afinar su conocimiento. Up & Going es el
comienzo de nuestro camino para entender la programación. Disfruta los momentos de la bombilla!
Jenn Lukas jennlukas. com, @jennlukas Consultor de primera línea
Estoy seguro de que te has dado cuenta, pero "JS" en el título de la serie de libros no es una
abreviatura de las palabras que se usan para maldecir sobre JavaScript, ¡aunque maldecir las
peculiaridades del lenguaje es algo con lo que probablemente todos nos podamos identificar!
Desde los primeros días de la web, JavaScript ha sido una tecnología fundamental que impulsa la
experiencia interactiva en torno al contenido que consumimos. Mientras que las pistas de ratón
parpadeantes y las molestas indicaciones emergentes pueden estar donde comenzó JavaScript,
casi dos décadas más tarde, la tecnología y la capacidad de JavaScript ha crecido muchos órdenes
de magnitud, y pocos dudan de su importancia en el corazón de la plataforma de software más
ampliamente disponible del mundo: la web.
Pero como lengua, ha sido objeto de constantes críticas, en parte debido a su patrimonio, pero
sobre todo a su filosofía de diseño. Incluso el nombre evoca, como dijo una vez Brendan Eich, el
estatus de "hermano menor tonto" junto a su hermano mayor más maduro "Java". Pero el nombre
no es más que un accidente de la política y el marketing. Los dos idiomas son muy diferentes en
muchos aspectos importantes. "JavaScript" es tan relacionado con "Java" como "Carnaval" es con
"Coche".
Debido a que JavaScript toma prestados conceptos y lenguajes de sintaxis de varios idiomas,
incluyendo orgullosas raíces procedimentales estilo C, así como sutiles y menos obvias raíces
funcionales estilo Scheme/Lisp, es extremadamente accesible a una amplia audiencia de
desarrolladores, incluso aquellos con poca o ninguna experiencia de programación. El "Hello World"
de JavaScript es tan simple que el lenguaje es atractivo y fácil de usar en una exposición temprana.
Mientras que JavaScript es quizás uno de los lenguajes más fáciles de usar, sus excentricidades
hacen que el dominio del lenguaje sea mucho menos común que en muchos otros lenguajes.
Cuando se necesita un conocimiento bastante profundo de un lenguaje como C o C++ para escribir
un programa a gran escala, la producción a gran escala de JavaScript puede, y a menudo lo hace,
apenas araña la superficie de lo que el lenguaje puede hacer.
Los conceptos sofisticados que están profundamente enraizados en el lenguaje tienden a aparecer
en vez de ello de maneras aparentemente simplistas, como pasar funciones como llamadas de
retorno, lo que anima al desarrollador de JavaScript a usar el lenguaje tal como es y no
preocuparse demasiado por lo que está pasando bajo el capó.
Simultáneamente, es un lenguaje sencillo y fácil de usar que tiene un amplio atractivo, y una
colección compleja y matizada de mecánica del lenguaje que, sin un estudio cuidadoso, eludirá la
comprensión verdadera incluso para los desarrolladores de JavaScript más experimentados.
Ahí radica la paradoja del JavaScript, el talón de Aquiles del lenguaje, el reto al que nos
enfrentamos actualmente. Debido a que JavaScript se puede usar sin entender, la comprensión del
lenguaje a menudo no se logra.
Misión
Si en cada punto en el que te encuentras con una sorpresa o frustración en JavaScript, tu respuesta
es añadirlo a la lista negra, como algunos están acostumbrados a hacer, pronto serás relegado a un
shell hueco de la riqueza de JavaScript.
Mientras que este subconjunto ha sido conocido como "Las partes buenas", le imploro, querido
lector, que en su lugar lo considere como "Las partes fáciles","Las partes seguras", o incluso "Las
partes incompletas".
Esta serie de libros de JavaScript ofrece un reto contrario: aprender y comprender a fondo todo el
JavaScript, incluso y especialmente "The Tough Parts".
Aquí, nos enfocamos en la tendencia de los desarrolladores de JS a aprender "lo suficiente" para
sobrevivir, sin forzarse a aprender exactamente cómo y por qué el lenguaje se comporta de la
manera en que lo hace. Además, evitamos el consejo común de retirarnos cuando el camino se
pone difícil.
No estoy contento, ni deberías estarlo tú, de detenerte una vez que algo funciona, y no realmente
sabiendo por qué. Te desafío a que recorras ese "camino menos transitado" y aceptes todo lo que
JavaScript es y puede hacer. Con ese conocimiento, ninguna técnica, ningún marco, ninguna
palabra de moda popular de la semana, estará más allá de su comprensión.
Cada uno de estos libros aborda partes específicas del lenguaje que son las más comunes
malinterpretado o malentendido, y se sumerge muy profundo y exhaustivamente en ellos. Tú debe
salir de la lectura con una firme confianza en su comprensión, no sólo de la lectura lo que necesitas
saber ".
El JavaScript que usted conoce en este momento es probablemente partes transmitidas a usted por
otros que han sido quemados por un entendimiento incompleto. Ese JavaScript no es más que una
sombra del verdadero lenguaje. Todavía no conoces realmente JavaScript, pero si buscas en esta
serie, lo harás. Sigan leyendo, amigos míos. JavaScript le espera.
Resumen
JavaScript es impresionante. Es fácil aprender parcialmente, y mucho más difícil de aprender
completamente (o incluso lo suficiente). Cuando los desarrolladores encuentran confusión,
generalmente culpan al lenguaje en vez de su falta de comprensión. Estos libros apuntan a arreglar
eso, inspirando un fuerte aprecio por el idioma que ahora puedes y debes conocer profundamente.
Nota: Muchos de los ejemplos de este libro asumen entornos de motor JavaScript modernos (y de
gran alcance en el futuro), como ES6. Es posible que algunos códigos no funcionen como se
describe si funcionan en motores anteriores (pre-ES6).
Hacia la programación
Bienvenido a la serie You Don' t Know JS (YDKJS). Up & Going es una introducción a varios
conceptos básicos de programación -por supuesto, nos inclinamos hacia JavaScript (a menudo
abreviado JS) específicamente- y cómo abordar y entender el resto de los títulos de esta serie.
Especialmente si estás entrando en programación y/o JavaScript, este libro explorará brevemente
lo que necesitas para ponerte en marcha.
Este libro comienza explicando los principios básicos de la programación a un nivel muy alto. Está
pensado sobre todo si usted está comenzando YDKJS con poca o ninguna experiencia previa de
programación, y está buscando estos libros para ayudarle a comenzar a lo largo de un camino a la
comprensión de la programación a través de la lente de JavaScript.
El capítulo 1 debe ser abordado como una visión general rápida de las cosas que usted querrá
aprender y practicar para entrar en programación. Hay también muchos otros recursos fantásticos
de introducción a la programación que pueden ayudarle a profundizar más en estos temas, y le
animo a que aprenda de ellos, además de este capítulo.
Una vez que se sienta cómodo con los fundamentos generales de programación, el Capítulo 2 le
ayudará a familiarizarse con el sabor de programación de JavaScript. El capítulo 2 introduce de qué
se trata JavaScript, pero una vez más, no es una guía comprensiva -- ¡para eso están los demás
libros de YDKJS!
Si ya te sientes bastante cómodo con JavaScript, primero revisa el Capítulo 3 como un breve vistazo
a lo que puedes esperar de YDKJS, ¡entonces entra directamente!
Código
Empecemos desde el principio.
Un programa, a menudo denominado código fuente o simplemente código, es un conjunto de

instrucciones especiales para decirle al equipo qué tareas realizar. Por lo general, el código se
guarda en un archivo de texto, aunque con JavaScript también puede escribir código directamente
en una consola de desarrollo en un navegador, que cubriremos en breve.
Las reglas para el formato válido y las combinaciones de instrucciones se denominan lenguaje
informático, a veces conocido como su sintaxis, al igual que el inglés le dice cómo deletrear
palabras y cómo crear oraciones válidas usando palabras y puntuación.
Sentencias
En un lenguaje informático, un grupo de palabras, números y operadores que realizan una tarea
específica es una expresión. En JavaScript, una sentencia puede tener el siguiente aspecto:
a = b * 2;
Los caracteres a y b se llaman variables (ver "Variables"), que son como simples casillas en las que
se puede almacenar cualquiera de tus cosas. En los programas, las variables contienen valores
(como el número 42) que debe utilizar el programa. Piense en ellos como marcadores de posición
simbólicos para los propios valores.
Por el contrario, el 2 es sólo un valor en sí mismo, llamado valor literal, porque se encuentra solo
sin ser almacenado en una variable.
Los caracteres = y * son operadores (ver "Operadores") -- realizan acciones con los valores y
variables como asignación y multiplicación matemática.
La mayoría de las expresiones en JavaScript terminan con un punto y coma (;) al final.
La sentencia a = b * 2; le dice al ordenador, aproximadamente, que obtenga el valor actual

almacenado en la variable b, multiplique ese valor por 2, y luego almacene el resultado de nuevo en
otra variable que llamamos a.
Los programas son sólo colecciones de muchas de estas afirmaciones, que en conjunto describen
todos los pasos que toma para cumplir con 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, por ejemplo:
a = b * 2;
Esta declaración tiene cuatro expresiones:
● 2 es una expresión de valor literal

● b es una expresión variable, lo que significa que recupera su valor actual
● b * 2 es una expresión aritmética, lo que significa hacer la multiplicación
● a = b * 2 es una expresión de asignación, lo que significa asignar el resultado de la función `b *
2v expresión de la variable a (más información sobre las asignaciones posteriores)
Una expresión general que sobresale por sí sola también se llama una declaración de expresión,
como la expresión siguiente:
b * 2;
Este tipo de expresión no es muy común o útil, ya que generalmente no tendría ningún efecto en la
ejecución del programa -- recuperaría el valor de b y lo multiplicaría por 2, pero luego no haría nada
con ese resultado.
Una expresión más común es una una declaración de expresión de llamada (ver "Funciones"), ya
que la declaración entera es la expresión de llamada de función en sí misma:
alert(a);
Ejecución de un programa
¿Cómo le dicen al ordenador qué hacer esas colecciones de frases de programación? El programa
necesita ser ejecutado, también conocido como ejecución del programa.
Declaraciones como a = b * 2 son útiles para los desarrolladores cuando leen y escriben, pero en
realidad no están en una forma que la computadora pueda entender directamente. Por lo tanto, se
utiliza una utilidad especial en la computadora (ya sea un intérprete o un compilador) para traducir
el código que escribes en comandos que una computadora puede entender.
Para algunos lenguajes de computadora, esta traducción de comandos se hace típicamente de

arriba a abajo, línea por línea, cada vez que se ejecuta el programa, lo que generalmente se llama
interpretación del código.
Para otros idiomas, la traducción se hace con anticipación, llamada compilación del código, de
modo que cuando el programa se ejecuta más tarde, lo que se está ejecutando es en realidad las
instrucciones de la computadora ya compiladas listas para usar.
Típicamente se afirma que JavaScript es interpretado, porque su código fuente JavaScript es

procesado cada vez que se ejecuta. Pero eso no es del todo exacto. El motor JavaScript compila el
programa sobre la marcha e inmediatamente ejecuta 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 Alcance y cierres de esta serie.
Pruébelo usted 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 usted pasa por este capítulo - y puede que necesite
pasar el tiempo para repasarlo varias veces - debería practicar cada uno de estos conceptos
escribiendo el código usted mismo. La forma más fácil de hacerlo es abrir la consola de
herramientas del desarrollador en su navegador más cercano (Firefox, Chrome, IE, etc.).
Sugerencia: Típicamente, puede iniciar la consola del desarrollador con un método abreviado de
teclado o desde un elemento del menú. Para obtener información más detallada sobre cómo
iniciar y utilizar la consola en su navegador favorito, consulte "Dominio de la consola de
herramientas para desarrolladores"
(http://blog.teamtreehouse.com/mastering-developer-tools-console). Para escribir varias líneas en
la consola a la vez, utilice <shift> + <enter> para pasar a la siguiente línea nueva. Una vez que
pulse <enter> por sí mismo, la consola ejecutará todo lo que acaba de escribir.
Familiaricémonos con el proceso de ejecutar código en la consola. Primero, sugiero abrir una
pestaña vacía en su navegador. Prefiero hacer esto escribiendo: about:blank: en la barra de
direcciones. A continuación, asegúrese de que su consola de desarrollador está abierta, como
acabamos de mencionar.
Ahora, escriba este código y vea cómo funciona:
a = 21;
b = a * 2;
console.log( b );
Escribir el código anterior en la consola de Chrome debería producir algo como el archivo siguiente:
42
Vamos, inténtalo. La mejor manera de aprender a programar es empezar a codificar!
Salida
En el fragmento de código anterior, usamos console.log(..). Brevemente, veamos de qué se trata

esa línea de código.
Puede que lo hayas adivinado, pero así es exactamente como imprimimos el texto (también
conocido como salida al usuario) en la consola de desarrollo. Hay dos características de esa
afirmación que deberíamos explicar.
En primer lugar, la parte de log(b) se denomina función; véase "Funciones"). Lo que está
sucediendo es que estamos entregando la variable b a esa función, que le pide que tome el valor
de b y lo imprima en la consola.
Segundo, la consola. es una referencia de objeto donde se encuentra la función log(...).
Abarcamos los objetos y sus propiedades con más detalle en el capítulo 2.
Otra forma de crear un resultado que se puede ver es ejecutar una declaración de alerta(...).
Por ejemplo, por ejemplo:
alert(b);
Si lo ejecuta, notará que en lugar de imprimir la salida a la consola, muestra un cuadro emergente
"OK" con el contenido de la variable b. Sin embargo, el uso de console.log(..) generalmente hará
que aprender a codificar y ejecutar sus programas en la consola sea más fácil que el uso de
alert(...), ya que puede imprimir muchos valores a la vez sin interrumpir la interfaz del
navegador.
Para este libro, usaremos console.log(..) para la salida.
Entrada
Mientras discutimos la salida, también puede preguntarse acerca de la entrada (es decir, recibir
información del usuario).
La forma más común de hacerlo es que la página TML muestre elementos de formulario (como
cuadros de texto) a un usuario en el que puede escribir, y luego usar JS o leer esos valores en las
variables de su programa.
Pero hay una manera más fácil de obtener información para fines de ganancia y demostración
sencillos, como lo que usted estará haciendo a lo largo de este libro. Utilice la función prompt(...):
age = prompt( "Please tell me your age:" );

console.log( age );
Como usted puede haber adivinado, el mensaje que usted pasa al prompt(...) - en este caso,"Por
favor dígame su edad:" - se imprime en la ventana emergente.
Una vez que envíe el texto de entrada haciendo clic en "Aceptar", observará que el valor que ha
escrito se almacena en la variable de edad, que luego emitimos con console.log(..).
Para mantener las cosas simples mientras aprendemos conceptos básicos de programación, los
ejemplos de este libro no requerirán comentarios. Pero ahora que ya has visto cómo usar prompt
(...), si quieres desafiarte a ti mismo puedes tratar de usar input en tus exploraciones de los
ejemplos.
Operadores
Los operadores son cómo realizamos acciones sobre variables y valores. Ya hemos visto dos
operadores JavaScript, el = y el *.
El operador * realiza la multiplicación matemática. Bastante simple, ¿verdad?
El operador = igual se utiliza para la asignación -- primero calculamos el valor en el lado derecho
(valor fuente) del = y luego lo ponemos en la variable que especificamos en el lado izquierdo
(variable objetivo).
Advertencia: Esto puede parecer un extraño orden inverso para especificar la asignación. En lugar
de a = 42, algunos pueden preferir voltear el orden para que el valor fuente esté a la izquierda y la
variable de destino esté a la derecha, por ejemplo 42 -> a (¡esto no es válido JavaScript!).
Desafortunadamente, la forma ordenada a = 42, y variaciones similares, prevalece en los lenguajes
de programación modernos. Si se siente poco natural, simplemente pasar un tiempo ensayando
ordenando en su mente para acostumbrarse a ella.
Consideranso lo siguiente:
a = 2;
b = a + 1;
Aquí, asignamos el valor 2 a una variable. Entonces, obtenemos el valor de la variable a (todavía 2),
sumar 1 al mismo resultando en el valor 3, luego almacenar ese valor en la variable b.
Aunque no sea técnicamente un operador, necesitarás la palabra clave var en cada programa, ya
que es la forma principal de declarar (o crear) variables (ver "Variables").
Siempre debe declarar la variable por nombre antes de usarla. Pero usted solo necesita declarar un
variable una vez para cada alcance (ver "Alcance"); puede ser usado tantas veces como sea
necesario. Por ejemplo:
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áticos: + (adición), - (sustracción), * (multiplicación), y / (división), como en un a*3.
● Asignación compuesta: +=, -=, *=, *=, y /= son operadores compuestos que combinan una
operación matemática con asignación, como en += 2 (igual que a = a + 2).
● Incremento/Disminución: ++ (incremento), -- decremento), como en a++ (similar a = a + 1).
● Acceso a la propiedad de objetos:. como en console.log(). Los objetos son valores que
contienen otros valores en ubicaciones específicas denominadas propiedades. obj.a significa un
valor de objeto llamado obj con una propiedad del nombre a. Alternativamente se puede acceder
a las propiedades como obj["a"]. Véase el capítulo 2.
● Igualdad: == (iguales), === (estríctamente iguales),!= (no iguales), !== (no estríctamente iguales),
como en a == b. Consulte "Valores y tipos" y el Capítulo 2.
● Comparación: < (menos de), > (mayor que), <= (menos o iguales),>= (mayores o iguales), como en a
<= b. Consulte "Valores y tipos" y el Capítulo 2.
● Lógicos: && (y), || (o), como en un a || b que selecciona a o b. Estos operadores se utilizan para
expresar condicionales compuestos (ver "Condicionales"), como si a o b son true (verdaderos).
Nota: Para más detalles y cobertura de operadores no mencionados aquí, ver Mozilla Expresiones y
operadores de Developer Network (MDN)
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators).
Valores y Tipos
Si usted le pregunta a un empleado en una tienda de teléfonos cuánto cuesta un teléfono

determinado y le dicen "noventa y nueve, noventa y nueve" (es decir, $99.99), le están dando una
cifra numérica real en dólares que representa lo que tendrá que pagar (más impuestos) para
comprarlo. Si usted desea comprar dos de esos teléfonos, usted puede fácilmente hacer el cálculo
mental y duplicar ese valor para obtener $199.98.
Si ese mismo empleado recoge otro teléfono similar pero dice que es "gratis" (quizás
entrecomillando), no le está dando un número, sino otro índice de representación de su costo
esperado ($0.00) -- la palabra "gratis".
Cuando más tarde pregunte si el teléfono incluye un cargador, esa respuesta sólo podría haber
sido "sí" o "no".
De maneras muy similares, cuando expresas valores en un programa, eliges diferentes

representaciones para esos valores en función de lo que piensas hacer con ellos.
Estas diferentes representaciones de valores se denominan tipos en la 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, necesitará una cadena de texto (uno o más
caracteres, palabras, frases. En adelante los denominaremos string).
● Cuando usted necesita tomar una decisión en su programa, necesita un booleano (ya sea true,
verdadero o false, falso).
Los valores que se incluyen directamente en el código fuente se llaman literales. Los literales de
string y están rodeados por comillas dobles "..." o comillas simples ('...') -- la única diferencia
es la preferencia estilística. number y literales booleanos se presentan tal como están (es decir, 42,
true, etc.).
Fíjese en lo siguiente:
"I am a string";
'I am also a string';
42;
true;
false;
Más allá de los tipos de cadena / número / valor booleano, es común que los lenguajes de
programación proporcionen arrays, objetos, funciones y mucho 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 tiene un número pero necesita imprimirlo en la pantalla, debe convertir el valor a un string, y en
JavaScript esta conversión se llama "coercion" (coerción, coacción). Del mismo modo, si alguien
introduce una serie de caracteres numéricos en un formulario de una página de comercio
electrónico, eso es un string, pero si necesita usar ese valor para realizar operaciones
matemáticas, debe transformarlo a un número.
JavaScript proporciona varias facilidades diferentes para realizar transformaciones a la fuerza entre
tipos. Por ejemplo:
var a = "42";
var b = Number( a );
console.log( a ); // "42"
console.log( b ); // 42
El uso del Number(...) (una función propia de Javascript) como se muestra es una coerción
explícita de cualquier otro tipo a la directiva tipo de number. Eso debería ser bastante sencillo.
Pero un tema controvertido es lo que ocurre cuando se intenta comparar dos valores que no son
del mismo tipo, lo que requeriría una coerción implícita.
Al comparar la cadena "99.99" con el número 99.99, la mayoría de las personas estarían de
acuerdo en que son equivalentes. Pero no son exactamente iguales, ¿verdad? Es el mismo valor en
dos representaciones diferentes, dos tipos diferentes. Podrías decir que son "vagamente iguales",
¿no?
Para ayudarle en estas situaciones comunes, JavaScript a veces se activa e implícitamente

transforma los valores a los tipos correspondientes.
Por lo tanto, si utiliza el operador == 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 se convierte
entonces en 99.99 == 99.99, lo cual es por supuesto cierto.
Aunque diseñado para ayudarte, la coerción implícita puede crear confusión si no te has tomado el
tiempo para aprender las reglas que gobiernan su comportamiento. La mayoría de los
desarrolladores de JS nunca lo han hecho, así que la sensación común es que la coerción implícita
está confundiendo y perjudicando a los programas con errores inesperados, y por lo tanto debe
ser evitada. Incluso a veces se le 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 tomarse en serio la programación JavaScript. No sólo no es
confuso una vez que usted aprende las reglas, sino que en realidad puede mejorar sus programas!
El esfuerzo bien vale la pena.
Nota: Para más información sobre la coerción, véase el capítulo 2 de este título y el capítulo 4 del
título Tipos y gramática de esta serie.
Comentarios de código
El empleado de la tienda telefónica podría anotar algunas notas sobre las características de un
teléfono recién lanzado o sobre los nuevos planes que su compañía ofrece. Estas notas son sólo
para el empleado -- no son para que los clientes las lean. Sin embargo, estas notas ayudan al
empleado a hacer mejor su trabajo al documentar el cómo y el por qué de lo que debe decir a los
clientes.
Una de las lecciones más importantes que puedes aprender sobre la escritura de código es que no
es sólo para el ordenador. El código es cada bit tanto, si no más, para el desarrollador como para el
compilador.
Su ordenador 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ías escribir que producen la
misma serie de 0s y 1s. Las decisiones que usted toma sobre cómo escribir su programa son
importantes, no sólo para usted, sino también para los demás miembros de su equipo e incluso
para su futuro.
Usted debe esforzarse no sólo para escribir programas que funcionan correctamente, sino
programas que tengan sentido cuando se examinan. Se puede avanzar mucho en ese esfuerzo
eligiendo buenos nombres para las variables (véase "Variables") y funciones (véase "Funciones").
Pero otra parte importante son los comentarios de código. Estos son fragmentos de texto en su
programa que se insertan para explicarle cosas a un humano. El intérprete/compilador siempre
ignorará estos comentarios.
Hay muchas opiniones sobre lo que hace al código bien comentado; no podemos definir realmente
normas universales absolutas. Pero algunas observaciones y directrices son bastante útiles:
● El código sin comentarios es subóptimo.

● Demasiados comentarios (uno por línea, por ejemplo) es probablemente un signo de mal escrito.
código.
● Los comentarios deberían explicar por qué, no qué. Pueden opcionalmente 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 multilínea.
Consida lo siguiente:
// This is a single-line comment
/* But this is
a multiline
comment.
*/
El comentario // de una línea es apropiado si va a poner un comentario justo encima de una sola
frase, o incluso al final de una línea. Todo lo que aparece en la línea después de // es tratado como
comentario (y por lo tanto ignorado por el compilador), hasta el final de la línea. No hay
restricciones a lo que puede aparecer dentro de un comentario de una sola línea.
Por ejemplo:
var a = 42; // 42 is the meaning of life
El comentario /*... */ multilínea es apropiado si tiene varias líneas por valor de explicación que
hacer en su comentario.
He aquí un uso común de los comentarios multilínea:
/* 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 medio de una línea, porque
el */ termina con ella. Por ejemplo:
var a = /* arbitrary value */ 42;
Lo único que no puede aparecer dentro de un comentario multilínea es un */, porque eso sería
interpretado para terminar el comentario.
Definitivamente querrá comenzar su aprendizaje de programación empezando con el hábito de

comentar código. A lo largo del resto de este capítulo, verás que usaré comentarios para explicarte
las cosas, así que haz lo mismo en tu propia práctica. Confía en mí, todos los que lean tu código te
lo agradecerán!
Variables
La mayoría de los programas útiles necesitan rastrear un valor a medida que cambia en el curso
del programa, sometiéndose a diferentes operaciones según lo requieran las tareas previstas de su
programa.
La manera más fácil de hacer esto en su programa es asignar un valor a un contenedor simbólico,
llamado variable -- así llamado 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 mantener un tipo
específico de valor, como number o string. El tipado estático, también conocido como ejecución de
tipo, es típicamente citado como un beneficio para la corrección del programa al prevenir
conversiones de valor no deseadas.
Otros lenguajes enfatizan tipos de valores en vez de variables. La tipado débil, también conocido
como tipado dinámico, permite que una variable contenga cualquier tipo de valor en cualquier
momento. Típicamente se cita como un beneficio para la flexibilidad del programa al permitir que
una sola variable represente un valor, independientemente del tipo de forma que pueda tomar ese
valor en cualquier momento dado en el flujo lógico del programa.
JavaScript utiliza el último enfoque, el tipado dinámico, lo que significa que las variables pueden
contener valores de cualquier tipo sin ningún tipo de imposición.
Como se mencionó anteriormente, declaramos una variable usando la sentencia var -- note que no
hay otro tipo de información en la declaración. Considere este sencillo programa:
var amount = 99.99;

amount = amount * 2;
console.log( amount ); // 199.98
// convert àmount` to a string, and

// add "$" on the beginning
amount = "$" + String( amount );
console.log( amount ); // "9.98"
La variable amount comienza con el número 99.99, y luego retiene el resultado numerico de amount
* 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, la sentencia amount = "$" + String(amount) coacciona explícitamente el valor 199.98 a

un valor de tipo string y añade un carácter "$" al principio. En este punto, el importe ahora
contiene el valor de string "$199.98", así que el segundo console.log(...) no necesita hacer
ninguna coerción para imprimir el valor.
Los desarrolladores de JavaScript notarán la flexibilidad de usar la variable amount para cada uno
de los 99.99, 199.98, y los valores de "$199.98". Los entusiastas del tipado estático preferirían una
variable separada como amountStr para mantener la representación final de "$199.98" del valor,
porque es un tipo diferente.
De cualquier manera, notará que esa cantidad tiene un valor de ejecución que cambia en el curso
del programa, ilustrando el propósito principal de las variables: administrar el estado del programa.
En otras palabras, el estado está rastreando los cambios en los valores a medida que se ejecuta el
programa.
Otro uso común de las variables es para centralizar la configuración de valores. Esto es más
comúnmente llamado constantes, cuando se declara una variable con un valor y se intenta que ese
valor no cambie en todo el programa.
Usted declara estas constantes, a menudo en la parte superior de un programa, de modo 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 estar en mayúsculas, con subrayados _ entre varias
palabras.
Aquí hay un ejemplo tonto:
var TAX_RATE = 0.08; // 8% sales tax

var amount = 99.99;
amount = amount + (amount * TAX_RATE);

console.log( amount.toFixed( 2 ) ); // "215.98"
Nota: Similar a como sucede en console.log(..) donde la función log(...) es accedida accede a
travess de una propiedad del objeto console, toFixed(...) aquí es una función a la que se puede
acceder con valores numéricos. Los números en JavaScript no están formateados automáticamente
para los dólares -- el motor no sabe cuál es su intención y no hay ningún tipo de moneda.
toFixed(..) nos permite especificar con cuántos decimales queremos que se redondee el número,
y produce un string según sea necesario.
La variable TAX_RATE sólo es constante por convención -- no hay nada especial en este programa
que impida que se cambie. Pero si la ciudad eleva la tasa del impuesto a las ventas al 9%, todavía
podemos actualizar fácilmente nuestro programa estableciendo el valor asignado de TAX_RATE a
0.09 en un sólo lugar, en vez de encontrar muchas ocurrencias del valor 0.08 esparcidas por todo
el programa y actualizarlas todas.
La última versión de JavaScript en el momento de escribir este artículo (comúnmente llamada

"ES6") incluye una nueva forma de declarar constantes, usando const en lugar de var:
// as of ES6:
const TAX_RATE = 0.08;
var amount = 99.99;

// ..
Las constantes son útiles al igual que las variables con valores inalterados, excepto que las
constantes también evitan el cambio accidental de valor en otro lugar después del ajuste inicial. Si
usted trató de asignar cualquier valor diferente a TAX_RATE después de esa primera declaración, su
programa rechazaría el cambio (y en modo estricto, fallaría con un error -- vea "Modo Estricto" en el
Capítulo 2).
A propósito, esa clase de "protección" contra errores es similar a la ejecución de tipo estático, así
que usted 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 de los programas, consulte el título Tipos y gramática de esta serie.
Bloques
El empleado de la tienda telefónica debe seguir una serie de pasos para completar el proceso de
pago al comprar su nuevo teléfono.
Del mismo modo, en el código a menudo necesitamos agrupar una serie de frases, que a menudo
llamamos bloque. En JavaScript, un bloque se define envolviendo una o más sentencias dentro de
un par de llaves {.. }.
Consida lo siguiente:
var amount = 99.99;
// a general block
{
console.log( amount );// 199.98
}
Este tipo de bloque general autónomo {... } es válido, pero no es tan comúnmente visto en los
programas JS. Típicamente, los bloques se adjuntan a alguna otra instrucción de control, como una
instrucción if (ver "Condicionales") o un bucle (ver "Bucles"). Por ejemplo:
var amount = 99.99;
// is amount big enough?

if (amount > 10) { // <-- block attached to ìf`
}
Explicaremos si las declaraciones 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 las condicionales pasan.
Nota: A diferencia de la mayoría de las otras sentencias como console.log(amount);, una

sentencia de bloque no necesita un punto y coma (;) para concluirla.
Condicionales
"¿Quieres añadir en la pantalla protectores extra a tu compra, por $9.99?" El empleado de la tienda
telefónica le ha pedido que tome una decisión. Y es posible que necesite consultar primero el
estado actual de su billetera o cuenta bancaria para responder a esa pregunta. Pero obviamente,
esta es una simple pregunta de "sí o no".
Hay bastantes maneras en que podemos expresar los condicionales (también conocidos como
decisiones) en nuestros programas. La más común es la declaración if. Básicamente, estás
diciendo: "Si esta condición es cierta, haz lo siguiente...". Por ejemplo, por ejemplo:
var bank_balance = 302.13;

var amount = 99.99;
if (amount < bank_balance) {

console.log( "I want to buy this phone!" );
}
La sentencia if requiere una expresión entre paréntesis () que puede ser tratada como verdadera
o falsa. En este programa, proporcionamos la expresión amount < balance_banco, el cual
efectivamente se evaluará como true o false dependiendo del importe en la variable
bank_balance.
Incluso puede proporcionar una alternativa si la condición no es verdadera, llamada cláusula

diferente. Considere lo siguiente:
const ACCESSORY_PRICE = 9.99;

var amount = 99.99;
// 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 verdadera, vamos a imprimir "Me llevaré el accesorio!" y
sumamos el 9,99 a nuestra variable amount. De lo contrario, la cláusula dice que responderemos
cortésmente con "No, gracias". y dejar la cantidad sin cambios.
Como discutimos anteriormente en "Valores y Tipos", los valores que no son del tipo esperado son
a menudo coaccionados a ese tipo. La sentencia if espera un booleano, pero si le pasa algo que no
lo es, ocurrirá la coerción.
JavaScript define una lista de valores específicos que se consideran "Falsy" porque al ser forzados a
un booleano, se vuelven false -- estos incluyen valores como 0 y "". Cualquier otro valor que no
aparezca en la lista de "falsy" es automáticamente "Truthy" -- cuando se coacciona a un booleano
se convierte en true. Los valores de Truthy incluyen cosas como 99.99 y "gratis". 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 sentencia switch puede
usarse como abreviatura para una serie de sentencias if... else (ver Capítulo 2). Los bucles (ver
"Bucles") utilizan un condicional para determinar si el bucle debe continuar o detenerse.
Nota: Para información más profunda sobre las coerciones que pueden ocurrir implícitamente en
las expresiones de prueba de los condicionales, véase el capítulo 4 del título Tipos y gramática de
esta serie.
Bucles
Durante los momentos de mucho trabajo, hay una lista de espera para los clientes que necesitan
hablar con el empleado de la tienda telefónica. Mientras que todavía hay gente en esa lista, ella
sólo necesita seguir sirviendo al próximo cliente.
Repetir un conjunto de acciones hasta que una determinada condición falla -- en otras palabras,
repetir sólo mientras la condición se mantiene -- es el trabajo de programar bucles; 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 (típicamente como {... }). Cada vez
que el bloque de bucle se ejecuta, eso se llama una iteración.
Por ejemplo, los modalidades de loops while y do... while ilustran el concepto de repetir un
bloque de sentencias hasta que una condición ya no se evalúa como true:
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 (whilw) o después de la primera iteración (do...while).
En cualquier forma, si las pruebas condicionales son false, la siguiente iteración no se ejecutará.
Eso significa que si la condición es inicialmente false, un bucle while nunca se ejecutará, pero un
do... while se ejecutará sólo la primera vez.
A veces usted está haciendo bucles con el propósito de contar un determinado conjunto de
números, como por ejemplo de 0 a 9 (diez números). Esto se puede hacer estableciendo una
variable de iteración de bucle como i en el valor 0 y aumentando 1 por cada iteración.
Advertencia: Por una variedad de razones históricas, los lenguajes de programación casi siempre
cuentan las cosas empezando por 0 en lugar de 1. Si usted no está familiarizado con ese modo de
pensar, puede ser bastante confuso al principio. Tómese un tiempo para practicar el conteo
empezando con 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 dentro del
bucle.
Podemos usar la sentencia break de JavaScript para detener un bucle. También, podemos observar
que es terriblemente fácil crear un bucle que de otro modo funcionaría para siempre sin un
mecanismo break de ruptura.
Vamos a ilustrarlo:
var i = 0;
// El bucle `while..true` se ejecutará por siempre no?
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: Esta no es necesariamente una forma práctica que usted querría usar para 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 bucle for para ese propósito:
for (var i = 0; i <= 9; i = i + 1) {

console.log( i );
}
// 0 1 2 3 4 5 6 7 8 9
Como se puede ver, en ambos casos el condicional i <= 9 es verdadero para las primeras 10
iteraciones (i de los valores 0 a 9) de cualquiera de las dos formas de bucle, pero se convierte en
false una vez que i es el 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, for es una forma más compacta y a menudo más fácil de entender y escribir.
Hay otras formas de bucle especializadas que intentan iterar sobre valores específicos, como las
propiedades de un objeto (ver Capítulo 2) donde la prueba condicional implícita es si todas las
propiedades han sido procesadas. El concepto de "bucle hasta que una condición falla" es válido
independientemente de la forma del bucle.
Funciones
El empleado de la tienda telefónica probablemente no lleva una calculadora para calcular los
impuestos y el monto final de la compra. Esa es una tarea que necesita definir una vez y reutilizar
una y otra vez. Lo más probable es que la empresa tenga un registro de caja (ordenador, tableta,
etc.) con esas "funciones" incorporadas.
De manera similar, su programa seguramente querrá dividir las tareas del código en partes
reutilizables, en vez de repetirse repetirse repetidamente (juego de palabras intencionadas!). La
manera de hacer es definir una función.
Una función es generalmente una sección de código con nombre que puede ser "llamada" por
nombre, y el código dentro de ella se ejecutará cada vez.
Considera lo siguiente:
function printAmount() {
console.log( amount.toFixed( 2 ) );
}
var amount = 99.99;

printAmount(); // "99.99"
printAmount(); // "199.98"
Las funciones pueden opcionalmente tomar argumentos (alias parámetros) -- valores que usted
transfiere. Opcionalmente, también pueden devolver un valor.
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"
La función printAmount(..) toma un parámetro que llamamos amt. La función formatAmount()

devuelve un valor. Por supuesto, también puede combinar estas dos técnicas en la misma función.
Las funciones se utilizan a menudo para el código que planea llamar varias veces, pero también
pueden ser útiles sólo para organizar los bits de código relacionados en colecciones de nombre,
incluso si sólo planea llamarlos una vez.
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, al organizar su

comportamiento en una función con nombre separado, el código que usa su lógica (la sentencia
amount = calculateFinal...) es más limpio. Si la función tuviera más enunciados en ella, los
beneficios serían aún más pronunciados.
Alcance (scope)
Si le pide al empleado de la tienda telefónica que le pida un modelo de teléfono que su tienda no
tenga, no podrá venderle el teléfono que usted desea. Sólo tiene acceso a los teléfonos del
inventario de su tienda. Tendrás que probar en otra tienda para ver si encuentras el teléfono que
estás buscando.
La programación tiene un término para este concepto: alcance (técnicamente llamado alcance, o
también ámbito o scope). En JavaScript, cada función tiene su propio alcance. El alcance es
básicamente una colección de variables, así como las reglas para acceder a ellas por su nombre.
Sólo el código dentro de esa función puede acceder a las variables incluídas en esa función.
Un nombre de variable tiene que ser único dentro del mismo alcance -- no puede haber dos
variables diferentes sentadas una al lado de la otra. Pero el mismo nombre de variable podría
aparecer en diferentes ámbitos.
function one() {
// this à` only belongs to the òne()` function
var a = 1;
console.log( a );
}
function two() {
// this à` only belongs to the `two()` function
var a = 2;
console.log( a );
}
one(); //1
two(); //2
También, un alcance puede ser anidado dentro de otro alcance, como si un payaso en una fiesta
de cumpleaños volara un globo dentro de otro globo. Si un alcance está anidado dentro de otro, el
código dentro del alcance más interno puede acceder a las variables desde cualquier parte del
alcance.
function outer() {
var a = 1;
function inner() {
var b = 2;
// we can access both à` and `b` here
console.log( a + b ); // 3
}
inner();
// we can only access à` here
}
outer();
Las reglas del lenguage para el alcance dicen que el código en un alcance de aplicación puede
acceder a variables de ese alcance de aplicación o de cualquier otro alcance 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 external() sólo tiene acceso a a -- no puede acceder a la variable b porque esa variable sólo
está dentro de inner().
Recuerda este fragmento de código de antes:
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.
Nota: Para obtener más información sobre el alcance de lenguaje, consulte los tres primeros
capítulos del título Alcance y cierres de esta serie.
Práctica
No hay absolutamente ningún sustituto para la práctica en el aprendizaje de programación.

Ninguna cantidad de escritura articulada por mi parte te va a convertir en programador.
Con eso en mente, tratemos de practicar algunos de los conceptos que aprendimos aquí en este
capítulo. Le daré los "requisitos", y tú lo intentas primero. A continuación, consulte el siguiente
listado de códigos para ver cómo me acerqué a él.
● Escriba un programa para calcular el precio total de su compra telefónica. Seguirá comprando
teléfonos (consejo: bucle!) hasta que se quede sin dinero en su cuenta bancaria. También
comprará accesorios para cada teléfono siempre y cuando la cantidad de su compra esté por
debajo del umbral de gasto mental.
● Una vez que haya calculado el importe de la compra, añada el impuesto y, a continuación,
imprima el importe de la compra calculado, formateado correctamente.
● Finalmente, verifique la cantidad contra el saldo de su cuenta bancaria para ver si usted puede
pagarla o no.
● Debe establecer algunas constantes para el "tipo impositivo","precio telefónico","precio accesorio"
y "umbral de gasto", así como una variable para el "saldo de su cuenta bancaria".
● Debe definir funciones para calcular el impuesto y para dar formato al precio con un "$"y
redondear a dos decimales.
Desafío de bonificación: Trate de incorporar aportes a este programa, tal vez con el prompt(...)
cubierto anteriormente en "Entrada". Puede solicitar al usuario el saldo de su cuenta bancaria, por
ejemplo. Diviértete y sé creativo!
OK, adelante. Inténtalo. No mires mi código hasta que no lo hayas intentado tú mismo!
Nota: Debido a que este es un libro de JavaScript, obviamente voy a resolver el ejercicio de práctica
en JavaScript. Pero por ahora puedes hacerlo en otro idioma si te sientes más cómodo.
Aquí está mi solución JavaScript para este ejercicio:
const SPENDING_THRESHOLD = 200;

const PHONE_PRICE = 99.99;
const ACCESSORY_PRICE = 9.99;

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: 4.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.
¿Qué tal te fue? No estaría mal intentarlo de nuevo ahora que has visto mi código. Y juega con
cambiar algunas de las constantes para ver cómo funciona el programa con diferentes valores.
Revisión
Aprender a programar no tiene que ser un proceso complejo y abrumador. Hay sólo algunos
conceptos básicos que usted necesita interiorizar.
Actúan como bloques de construcción. Para construir una torre alta, empiece primero colocando el
bloque en la parte superior del bloque. Lo mismo ocurre con la programación. Éstos son algunos
de los componentes esenciales 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 strings.
● Usted necesita variables para almacenar datos (también conocido como estado) durante la
ejecución de su programa.
● Necesitas condicionales como las sentencias if para tomar decisiones.
● Necesitas bucles para repetir tareas hasta que una condición deje de ser cierta.
● Necesitas funciones para organizar su código en partres lógicos y reutilizables.
Los comentarios de código son una manera efectiva de escribir código más legible, lo que hace que
su es más fácil de entender, mantener y arreglar después si hay problemas.
Finalmente, no descuide el poder de la práctica. La mejor manera de aprender a escribir código es

a través de escribir código.
Estoy emocionado de que estés bien encaminado a aprender a codificar, ¡ahora!. Sigue así. No
olvides consultar otros recursos de programación para principiantes (libros, blogs, formación
online, etc.). Este capítulo y este libro son un gran comienzo, pero son sólo una breve introducción.
El próximo 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 temas principales que se tratan con
más detalle en el resto de la serie.
Into Javascript
En el capítulo anterior, presenté los componentes básicos de la programación, tales como variables,
bucles, condicionales y funciones. Por supuesto, todo el código mostrado ha sido en JavaScript.
Pero en este capítulo, queremos centrarnos específicamente en las cosas que necesitas saber
sobre JavaScript para empezar a trabajar como desarrollador de JS.
Introduciremos bastantes conceptos en este capítulo que no serán explorados completamente

hasta los libros subsecuentes de YDKJS. Usted puede pensar en este capítulo como una visión
general de los temas tratados en detalle a lo largo del resto de esta serie.
Especialmente si usted es nuevo en JavaScript, debe esperar pasar bastante tiempo revisando los
conceptos y ejemplos de código aquí varias veces. Cualquier buen cimiento es colocado ladrillo por
ladrillo, así que no espere que inmediatamente lo entienda todo el primer paso.
Su viaje para aprender a fondo JavaScript comienza aquí.
Nota: Como dije en el Capítulo 1, deberías definitivamente probar todo este código tú mismo
mientras lees y trabajas a través de este capítulo. Tenga en cuenta que algunos de los códigos aquí
asumen capacidades introducidas en la versión más reciente de JavaScript en el momento de esta
escritura (comúnmente referido como "ES6" para la sexta edición de ECMAScript -- el nombre
oficial de la especificación JS). Si está usando un navegador anterior, pre-ES6, es posible que el
código no funcione. Debe utilizarse una actualización reciente de un navegador moderno (como
Chrome, Firefox o IE).
Valores y Tipos
Como afirmamos en el Capítulo 1, JavaScript ha escrito valores, no variables. Están disponibles los
siguientes tipos incorporados:
● `string
● number
● booleano
● null y undefined
● objet
● symbol (nuevo a ES6)
JavaScript proporciona un tipo de operador que puede examinar un valor y decirle qué tipo es:
var a; // "undefined"
typeof a;
a = "hello world";
typeof a; // "string"
a = 42;
typeof a; // "number"
a = true;
typeof a; // "boolean"
a = null;
typeof a; // "object" -- weird, bug
a = undefined;
typeof a; // "undefined"
a = { b: "c" };
typeof a; // "object"
El valor de operador de retorno typeof es siempre uno de los seis valores strin (siete a partir de
ES6! - el tipo "symbol"). Es decir, typeof "abc" devuelve "string", no string.
Note cómo en este fragmento una variable contiene cada tipo de valor diferente, y que a pesar de
las apariencias, typeof a no está pidiendo el "tipo de a", sino más bien el "tipo del valor
actualmente en a.". Sólo los valores tienen tipos en JavaScript; las variables son simples
contenedores para esos valores.
typeof null es un caso interesante, porque devuelve erróneamente "object", cuando esperas que
devuelva "null".
Advertencia: Se trata de un fallo arraigado en JS, pero probablemente nunca se solucionará.

Demasiado código en la Web se basa en el fallo y por lo tanto la corrección causaría muchos más
errores!
También, note a = undefined. Estamos fijando explícitamente a al valor undefined, pero eso no es
conductualmente diferente de una variable que todavía no tiene ningún valor fijado, como con var
a; línea en la parte superior del fragmento. Una variable puede llegar a este estado de valor
"undefined" de varias maneras diferentes, incluyendo funciones que no devuelven ningún valor y el
uso del operador void (vacío).
Objetos
El tipo objet se refiere a un valor compuesto en el que se pueden establecer propiedades (llámese
ubicaciones) en las que cada uno de ellas tiene sus propios valores de cualquier tipo. Este es quizás
uno de los tipos de valor más útiles en todo JavaScript.
var obj = {
a: "hello world",
b: 42,
c: true
};
obj.a;// "hello world"
obj.b;// 42
obj.c;// true
obj["a"];// "hello world"

obj["b"];// 42
obj["c"];// true
Se puede acceder a las propiedades con notación de puntos (es decir, obj.a) o notación de
corchetes (es decir, obj["a"]). La notación de puntos es más corta y generalmente más fácil de leer,
por lo que es preferible cuando sea posible.
La notación Bracket es útil si tienes un nombre de propiedad que tiene caracteres especiales, como
obj["hello world!"]. Estas propiedades suelen denominarse claves cuando se accede a ellas
mediante la notación de corchetes. La notación [] requiere ya sea una variable (explicada a
continuación) o una string literal (que necesita ser envuelta en "..." o "...").
Por supuesto, la notación de corchetes también es útil si desea acceder a una propiedad/clave pero
el nombre se almacena en otra variable, como por ejemplo:
var obj = {
a: "hello world",
b: 42
};
var b = "a";
obj[b]; // "hello world"
obj["b"]; // 42
Nota: Para obtener más información sobre objetos JavaScript, consulte el título de esta serie this &
Object Prototypes, específicamente el Capítulo 3.
Hay un par de otros tipos de valores con los que normalmente interactuarás en programas
JavaScript: array y function. Pero en lugar de ser tipos incorporados apropiados, éstos deben
pensarse en más bien como subtipos -- versiones especializadas del tipo objet.
Arrays
Un array es un objet que contiene valores (de cualquier tipo) no particularmente nombradas en
propiedades/claves, sino más bien en posiciones indexadas numéricamente. Por ejemplo:
var arr = [
"hello world",
42,
true
];
arr[0];// "hello world"
arr[1];// 42
arr[2];// true
arr.length;// 3
typeof arr;// "object"
Nota: Los lenguajes que comienzan a contar a cero, como lo hace JS, usan 0 como la posición del
primer índice del array.
Debido a que los arrays son objetos especiales (como typeof muestra), también pueden tener
propiedades, incluyendo la propiedad length automáticamente actualizada.
Teóricamente podría utilizar un array como un objeto normal con sus propias propiedades
nombradas, o podría usar un objeto pero sólo darle propiedades numéricas (0,1, etc.) similares a
un array. Sin embargo, esto se consideraría generalmente como un uso inadecuado de los tipos
respectivos.
El mejor y más natural enfoque es el uso de arrays para valores numéricamente posicionados y
usar objetos para las propiedades nombradas.
Funciones
El otro subtipo de objet que utilizará en todos los programas JS es una función:
function foo() {
return 42;
}
foo.bar = "hello world";
typeof foo; // "function"

typeof foo(); // "number"
typeof foo.bar; // "string"
Una vez más, las funciones son un subtipo de objetos -- typeof devuelve "function", lo que implica
que function es un tipo principal -- y por lo tanto puede tener propiedades, pero normalmente
sólo utilizará propiedades de objeto de función (como foo.bar) en casos limitados.
Nota: Para más información sobre los valores JS y sus tipos, ver los dos primeros capítulos del título
Tipos y gramática de esta serie.
Métodos de tipos incorporados
Los tipos y subtipos incorporados que acabamos de discutir tienen comportamientos expuestos
como propiedades y métodos que son bastante poderosos y útiles.
Por ejemplo:
var a = "hello world";

var b = 3.14159;
a.length; // 11
a.toUpperCase(); // "HELLO WORLD"
b.toFixed(4); // "3.1416"
El "cómo" detrás de ser capaz de llamar a.toUpperCase() es más complicado que sólo ese método
existente en el valor.
Brevemente, hay una forma de envoltura de objeto String (capital S), típicamente llamada "nativa",
que se combina con el tipo string primitivo; es este objeto de envoltura que define el método
toUpperCase() en su prototipo.
Cuando se usa un valor primitivo como "hello world" como un objet haciendo referencia a una
propiedad o método (por ejemplo, a.toUpperCase() en el fragmento anterior), JS automáticamente
"encaja" el valor en su contraparte de envoltura de objeto (oculta tras el telón).
Un valor string puede ser envuelto por un objeto String, un nnmber puede ser envuelto por un
objeto Number, y un boolean puede ser envuelto por un objeto Boolean. En la mayoría de los casos,
usted no tiene que preocuparse o utilizar directamente estas formas de envoltorio de objetos de
los valores -- prefiera las formas de valores primitivas en prácticamente todos los casos y JavaScript
se encargará del resto por usted.
Nota: Para más información sobre los nativos de JS y "boxing(encajes)", vea el Capítulo 3 del título
Tipos y Gramática de esta serie. Para entender mejor el prototipo de un objeto, vea el Capítulo 5
del título de esta serie this & Object Prototypes.
Comparación de valores
Hay dos tipos principales de comparación de valores que usted necesitará hacer en sus programas
JS: igualdad y desigualdad. El resultado de cualquier comparación es un valor estrictamente
boolean (valor true o false), independientemente de los tipos de valores que se comparen.
Coerción
Hablamos brevemente sobre la coerción en el capítulo 1, pero revisémoslo aquí.
La coerción viene en dos formas en JavaScript: explícita e implícita. La coerción explícita es

simplemente que usted puede ver directamente en el código que una conversión de un tipo a otro
ocurre, mientras que la coerción implícita es cuando la conversión de tipo puede ocurrir como un
efecto secundario no obvio de alguna otra operación.
Probablemente has escuchado sentimientos como "la coerción es malvada" que se derivan del
hecho de que hay claramente lugares donde la coerción puede producir resultados sorprendentes.
Quizás nada evoca más frustración de los desarrolladores que cuando el lenguaje les sorprende.
La coerción no es mala, ni tiene que ser sorprendente. De hecho, la mayoría de los casos que se
pueden construir con el tipo de coerción son bastante razonables y comprensibles, e incluso se
pueden utilizar para mejorar la legibilidad de su código. Pero no iremos mucho más lejos en ese
debate -- el capítulo 4 del título Types & Grammar de esta serie cubre todos los aspectos.
Aquí hay un ejemplo de coerción explícita:
var a = "42";
var b = Number( a );
a; // "42"
b; // 42 -- the number!
Aquí un ejemplo de coerción implícita:
var a = "42";
var b = a * 1;// "42" implicitly coerced to 42 here
a;// "42"
b;// 42 -- the number!
Truthy & Falsy
En el capítulo 1, mencionamos brevemente la naturaleza "Thruthy(veraz)" y "Falsy(falsa)" de los

valores: cuando un valor no booleano es coaccionado a un booleano, ¿se convierte en verdadero o
falso, respectivamente?
La lista específica de valores "falsy" en JavaScript es la siguiente:

● "" (string vacío)
● 0, -0, NaN (number no válido)
● null, undefined
● false
Cualquier valor que no esté en esta lista de "falsy" es "veraz". He aquí algunos ejemplos:
● "Hola"
● 42
● true
● [],[ 1,"2", 3] (arrays)
● { }, { a: 42 } (objetos)
● function foo () {... } (funciones)
Es importante recordar que un valor no boolean sólo sigue esta coerción "verídica"/"falsa" si en
realidad es coercionada a un boolean. No es tan difícil confundirse con una situación que parece
estar coercionando un valor a un booleano cuando no lo es.
Igualdad
Hay cuatro operadores de igualdad:==, ===,!=, y !==. Las formas ! ,por supuesto, son las versiones
"simétricas no iguales" de sus contrapartes; la no-igualdad no debe confundirse con la desigualdad.
La diferencia entre == y === se caracteriza normalmente que == verifica la igualdad de valores y ===
comprueba la igualdad de valores y tipos. Sin embargo, esto es inexacto. La manera apropiada de
caracterizarlos es que == comprueba la igualdad de valores con coerción permitida, y ===
comprueba la igualdad de valores sin permitir la coerción; === se suele llamar "igualdad estricta"
por esta razón.
Considere la coerción implícita que permite la comparación de == igualdad-debil y que no está

permitida con la comparación de === igualdad-estricta:
var a = "42";
var b = 42;
a == b; // true
a === b; // false
En la comparación a == b, JS nota que los tipos no coinciden, por lo que pasa por una serie
ordenada de pasos para coaccionar uno o ambos valores a un tipo diferente hasta que los tipos
coinciden, donde entonces se puede comprobar una igualdad de valores simple.
Si lo piensas, hay dos maneras posibles en las que a == b podría dar true a través de la coerción. O
bien la comparación podría terminar en 42 == 42 o bien podría ser "42" == "42". Entonces, ¿cuál
es?
La respuesta:"42" se convierte en 42, para hacer la comparación 42 == 42. En un ejemplo tan
simple, no parece importar realmente qué camino toma ese proceso, ya que el resultado final es el
mismo. Hay casos más complejos en los que importa no sólo cuál es el resultado final de la
comparación, sino cómo se llega allí.
La comparción a === b produce false, porque la coerción no está permitida, por lo que la
comparación de valores sencillos falla obviamente. Muchos desarrolladores creen que === es más
predecible, por lo que abogan por usar siempre ese formulario y mantenerse alejados de ==. Creo
que esta visión es muy corta de miras. Creo que == es una herramienta poderosa que ayuda a su
programa, si usted se toma el tiempo para aprender cómo funciona.
No vamos a cubrir todos los detalles minuciosos de cómo funciona la coerción en comparaciones
==. Mucho de esto es bastante sensato, pero hay algunos casos importantes en las esquinas de los
que hay que tener cuidado. Puede leer la sección 11.9.3 de la especificación ES5
(http://www.ecma-international.org/ecma-262/5.1/) para ver las reglas exactas, y se sorprenderá de
lo sencillo que es este mecanismo, comparado con toda la publicidad negativa que lo rodea.
Para reducir un montón de detalles a unos cuantos pasos simples que seguir, y ayudarte a saber si
usar == o ==== en varias situaciones, aquí están mis reglas simples:
● Si cualquiera de los dos valores (también llamados lados) en una comparación puede ser el valor
true o false, evite == y use ===.
● Si cualquiera de los valores en una comparación puede ser de estos valores específicos (0,"", o []
-- matriz vacía), evite == y use ===.
● En todos los demás casos, puede utilizar ==. No sólo es seguro, sino que en muchos casos
simplifica su código de una manera que mejora la legibilidad.
A lo que estas reglas se reducen es a exigirle que piense críticamente sobre su código y sobre qué
tipos de valores pueden venir a través de variables que se comparan para la igualdad. Si puede
estar seguro de los valores, y == es seguro, ¡utilícelo! Si no puede estar seguro de los valores, utilice
===. Es así de simple.
El operador != de no igualdad es la pareja de ==, y el !== de ===. Todas las reglas y observaciones
que acabamos de discutir se sostienen simétricamente para estas comparaciones de no igualdad.
Debe tener en cuenta especialmente las reglas de comparación == y === si está comparando dos
valores no primitivos, como los objetos (incluyendo function y array). Debido a que esos valores
se mantienen realmente por referencia, tanto las comparaciones == como === simplemente
verificarán si las referencias coinciden, y no verifican nada acerca de los valores subyacentes.
Por ejemplo, los array se coaccionan por defecto a string simplemente uniendo todos los valores
con comas (,) en medio. Podrías pensar que dos matrices con el mismo contenido serían == iguales,
pero no lo son:
var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";
a == c; // true
b == c; // true
a == b; // false
Nota: Para obtener más información sobre las reglas de comparación == igualdad, véase la
especificación ES5 (sección 11.9.3) y consulte también el capítulo 4 del título Tipos y gramática de
esta serie; consulte el capítulo 2 para obtener más información sobre valores versus referencias.
Desigualdad
Los operadores <, >, <= y >= se utilizan para la desigualdad, referida en la especificación como
"comparación relacional". Normalmente se utilizan con valores ordinariamente comparables como
números. Es fácil de entender que 3 < 4.
Pero los valores de las cadenas JavaScript también pueden ser comparados para la desigualdad,
usando reglas alfabéticas típicas ("bar" < "foo").
¿Qué hay de la coerción? Reglas similares como la comparación == (aunque no exactamente

idénticas!) se aplican a los operadores de desigualdad. En particular, no hay operadores de
"desigualdad estricta" que no permiten la coerción de la misma manera que la "estricta igualdad"
=== lo hace.
Considere esto:
var a = 41;
var b = "42";
var c = "43";
a < b; // true
b < c; // true
¿Qué sucede aquí? En la sección 11.8.5 de la especificación ES5, se dice que si ambos valores en la
comparación < son string, como es el caso de b < c, la comparación se realiza lexicograficamente
(alias alfabéticamente, como un diccionario). Pero si uno o ambos no es una cadena, como ocurre
con a < b, entonces ambos valores son coaccionados para que sean números, y ocurre una
comparación numérica típica.
El problema más grande que se puede encontrar aquí con comparaciones entre tipos de valores
potencialmente diferentes -recuerde, no hay formas de "desigualdad relacional estricta" que usar-
es cuando uno de los valores no puede convertirse en un número válido, como por ejemplo:
var a = 42;
var b = "foo";
a < b; // false
a > b; // false
a == b; // false
Espera, ¿cómo pueden las tres comparaciones ser false? Porque el valor b está siendo coercionado
al "valor numérico inválido" NaN en las comparaciones < y >, y la especificación dice que NaN no es ni
mayor que ni menor que cualquier otro valor.
La comparación == falla por una razón diferente. a == b podría fallar si se interpreta como 42 ==
NaN o "42" == "foo" -- como explicamos anteriormente, es el primer caso.
Nota: Para obtener más información sobre las reglas de comparación de la desigualdad, véase la
sección 11.8.5 de la especificación ES5 y consulte también el capítulo 4 del título Tipos y gramática
de esta serie.
Variables
En JavaScript, los nombres de variables (incluyendo nombres de función) deben ser identificadores
válidos. Las reglas estrictas y completas de caracteres válidos en los identificadores son un poco
complejas cuando se consideran caracteres no tradicionales como Unicode. Sin embargo, si sólo
considera caracteres alfanuméricos ASCII típicos, las reglas son sencillas.
Un identificador debe comenzar con a - z, A - Z, $ o _. Puede entonces contener cualquiera de esos

caracteres más los números 0 - 9.
Generalmente, las mismas reglas se aplican a un nombre de propiedad que a un identificador de

variable. Sin embargo, ciertas palabras no pueden ser usadas como variables, pero están bien
como nombres de propiedad. Estas palabras se llaman "palabras reservadas" e incluyen las
palabras clave JS (for, in, if, etc.), así como las palabras null, true y false.
Nota: Para obtener más información sobre las palabras reservadas, consulte el Apéndice A del
título Tipos y gramática de esta serie.
Ámbitos de función (scopes, alcances)
Utilice la palabra clave var para declarar una variable que pertenezca al ámbito de función actual, o
el ámbito global si se encuentra en el nivel superior fuera de cualquier función.
Elevación (hoisting)
Dondequiera que var aparece dentro de un ámbito, esa declaración se considera que pertenece a
todo ese ámbito y es accesible en todas partes.
Metafóricamente, este comportamiento se llama elevación, cuando una declaración var es "movida"
conceptualmente a la cima delámbito. Técnicamente, este proceso se explica más exactamente por
la forma en que se compila el código, pero por ahora podemos saltarnos esos detalles.
Considera esto:
var a = 2;
foo(); // works because `foo()` declaration is "hoisted"
function foo() {
a = 3;
console.log( a );// 3
var a; // declaration is "hoisted" to the top of `foo()`
}
Advertencia: No es común o una buena idea confiar en la elevación para utilizar una variable en su
ámbito antes de la aparición de la declaración de la variable; puede ser bastante confuso. Es
mucho más común y aceptado usar declaraciones de función alzada, como lo hacemos con la
llamada foo() que aparece antes de su declaración formal.
Ámbitos anidados
Cuando se declara una variable, está disponible en cualquier lugar de ese ámbito, así como en
cualquier ámbito inferior/interior. Por ejemplo:
function foo() {
var a = 1;
function bar() {
var b = 2;
function baz() {
var c = 3;
console.log( a, b, c ); // 1 2 3
}
baz();
console.log( a, b ); // 1 2
}
bar();
}
foo();
Note que c no está disponible dentro de la bar(), porque se declara sólo dentro del ámbito interno
baz(), y que b no está disponible para foo() por la misma razón.
Si intentas acceder al valor de una variable en un ámbito donde no está disponible, obtendrás un
error de referencia. Si intentas establecer una variable que no ha sido declarada, acabarás creando
una variable en el alcance global de nivel superior (¡malo!) u obtendrás un error, dependiendo del
"modo estricto" (ver "Modo Estricto"). Echemos un vistazo:
function foo() {
a = 1; // à` not formally declared
}
foo();
a; // 1 -- oops, auto global variable :(
Es una práctica muy mala. No lo hagas! Siempre declara formalmente tus variables.
Además de crear declaraciones para variables a nivel de función, ES6 permite declarar variables
para que pertenezcan a bloques individuales (pares de {... }), utilizando la palabra clave let. Aparte
de algunos matizes, las reglas de alcance se comportarán más o menos igual que lo que acabamos
de ver con las funciones:
function foo() {
var a = 1;
if (a >= 1) {
let b = 2;
while (b < 5) {
let c = b * 2;
b++;
console.log( a + c );
}
}
}
foo(); // 5 7 9
Debido al uso de let en lugar de var, b pertenecerá sólo a la sentencia if y por lo tanto no al
ámbito de la función foo(). Del mismo modo, c sólo pertenece al bucle while. El scoping de
bloques es muy útil para gestionar el ámbito de las variables de una manera más fina, lo que
puede hacer que su código sea mucho más fácil de mantener con el tiempo.
Nota: Para obtener más información sobre el alcance, consulte el título Alcance y cierres de esta
serie. Vea el título ES6 & Beyond de esta serie para obtener más información sobre el alcance del
bloque.
Condicionales
Además de la declaración if que presentamos brevemente en el Capítulo 1, JavaScript proporciona

algunos otros mecanismos condicionales que deberíamos examinar.
A veces puede que te encuentres escribiendo una serie de declaraciones if...else...if como
esta:
if (a == 2) {
// do something
}
else if (a == 10) {
// do another thing
}
else if (a == 42) {
// do yet another thing
}
else {
// fallback to here
}
Esta estructura funciona, pero es un poco repetitiva porque hay que especificar cada caso. Aquí hay
otra opción, la declaración switch:
switch (a) {
case 2:
// do something
break;
case 10:
// do another thing
break;
case 42:
// do yet another thing
break;
default:
// fallback to here
}
El break es importante si desea que sólo se ejecute la(s) declaración(es) en un case. Si omite el
break de un case y ese case coincide o se ejecuta, la ejecución continuará con las declaraciones del
siguiente case independientemente de la coincidencia de los case. Esto es tambien conocido como
"caaer en picado" (continuar hacia abajo) y a veces es útil/deseado:
switch (a) {
case 2:
case 10:
// algunas cosas geniales
break;
case 42:
// other stuff
break;
default:
// fallback
}
Aquí, si a es 2 o 10, ejecutará las declaraciones de código "algunas cosas geniales".
Otra forma de condicional en JavaScript es el "operador condicional", a menudo llamado "operador

ternario". Es como una forma más concisa de un sólo if...else declaración, como por ejemplo:
var a = 42;
var b = (a > 41) ? "hello" : "world";
// similar to:
// if (a > 41) {
// b = "hello";
// }
// else {
// b = "world";
// }
Si la expresión de prueba (a > 41) evalúa como true, la primera cláusula ("hello") se aplica, de lo
contrario la segunda cláusula ("world") se aplicará, y cualquiera que sea el resultado se asigna a b.
El operador condicional no tiene que ser utilizado en una asignación, pero es definitivamente el uso
más común.
Nota: Para obtener más información sobre las condiciones de prueba y otros patrones switch y ?:
ver el título Tipos y gramática de esta serie.
Modo Estricto
El ES5 agregó un "modo estricto" al lenguaje, que endurece las reglas para ciertos
comportamientos. En general, se considera que estas restricciones mantienen el código en un
conjunto de directrices más adecuado y seguro. Además, la adherencia al modo estricto hace que
su código sea generalmente más optimizable por el motor. El modo estricto es una gran ganancia
para el código, y debería usarlo para todos sus programas.
Puede optar por el modo estricto para una función individual o un fichero completo, según dónde
pusiste el modo estricto:
function foo() {
"use strict";
// this code is strict mode
function bar() {
}
}
// this code is not strict mode
En vez de:
"use strict";
function foo() {
function bar() {
}
}
Una diferencia clave (mejora!) con el modo estricto es que la declaración implícita de la variable
auto-global no permite omitir la palabra reservada var:
function foo() {
"use strict";// turn on strict mode
a = 1;// `var` missing, ReferenceError
}
foo();
Si usted activa el modo estricto en su código, y obtiene errores, o el código empieza a comportarse
mal, su tentación podría ser evitar el modo estricto. Pero ese instinto sería una mala idea para
complacerse. Si el modo estricto causa problemas en su programa, es casi seguro que es una señal
de que usted tiene cosas en su programa que debe arreglar.
No sólo el modo estricto mantendrá su código en un camino más seguro, y no sólo hará que su
código sea más optimizable, sino que también representa la dirección futura del lenguaje. Sería
más fácil para ti acostumbrarte al modo estricto ahora que seguir posponiéndolo -- ¡sólo te será
más difícil convertirte más tarde!
Nota: Para obtener más información sobre el modo estricto, consulte el capítulo 5 de Tipos y
gramática de esta serie de libros.
Funciones como valores
Hasta ahora, hemos discutido las funciones como el principal mecanismo de alcance en JavaScript.
La sintaxis típica de la declaración de función se recupera como se indica a continuación:
function foo() {
// ..
}
Aunque no parezca obvio a partir de esa sintaxis, foo es básicamente sólo una variable en el
ámbito exterior que que la engloba y que da una referencia a la función que se está declarando. Es
decir, la función en sí misma es un valor, como lo serían 42 o [1,2,3].
Esto puede sonar como un concepto extraño al principio, así que tómese un momento para
pensarlo. No sólo se puede pasar un valor (argumento) a una función, sino que la función en sí
misma puede ser un valor asignado a variables, o transferido o devuelto desde otras funciones.
Como tal, un valor de función debe ser considerado como una expresión, al igual que cualquier
otro valor o expresión.
Consida esto:
var foo = function() {

// ..
};
var x = function bar(){

// ..
};
La primera expresión de función asignada a la variable foo se llama anónima porque no tiene
ninguna nombre.
La segunda expresión de la función se llamada bar, aunque también se asigna una referencia a la
variable x. Las expresiones de función nombradas son generalmente más preferibles, aunque las
expresiones de función anónimas siguen siendo extremadamente comunes.
Para obtener más información, consulte el título Alcance y cierres de esta serie.
Expresiones de función invocadas inmediatamente (IIFE)
En el fragmento anterior, ninguna de las expresiones de función se ejecuta -- podríamos si

hubiéramos incluido foo() o x(), por ejemplo.
Hay otra forma de ejecutar una expresión de función, a la que normalmente se le conoce como
expresión de función invocada inmediatamente (IIFE):
(function IIFE(){
console.log( "Hello!" );
})();
// "Hello!"
La expresión exterior (..) que rodea la función (función IIFE (){... }) es sólo un matiz de la
gramática JS necesaria para evitar que sea tratada como una declaración de función normal.
El final () al final de la expresión -- la línea })(); -- es lo que realmente ejecuta la expresión de la

función referenciada inmediatamente antes de ella.
Eso puede parecer extraño, pero no es tan extraño como a primera vista. Considere las similitudes
entre foo e IIFE aquí:
function foo() { .. }
// `foo` function reference expression,

// then `()` executes it
foo();
// ÌIFE` function expression,
// then `()` executes it
(function IIFE(){ .. })();
Como se puede ver, listar la (función IIFE (){... }) antes de su ejecución () es esencialmente
lo mismo que incluir foo antes de su ejecución (); en ambos casos, la referencia de función se
ejecuta con () inmediatamente después de él.
Debido a que una IIFE es sólo una función, y las funciones crean un alcance variable, el uso de una
IIFE de esta manera se utiliza a menudo para declarar variables que no afectarán al código
circundante fuera de la IIFE:
var a = 42;
(function IIFE(){
var a = 10;
console.log( a );//10
})();
console.log( a );//42
Los IIFEs también pueden tener valores de retorno:
var x = (function IIFE(){

return 42;
})();
x; // 42
El valor 42 se devuelve desde la función IIFE que se está ejecutando y se asigna a x.
Closures (Cierres)
Closure o cierre es uno de los conceptos más importantes, y a menudo menos comprendidos, en
JavaScript. No lo cubriré con más detalle aquí, y en su lugar me referiré al título Alcance y cierres de
esta serie. Pero quiero decir algunas cosas para que entienda el concepto general. Será una de las
técnicas más importantes en sus habilidades JS.
Se puede pensar en el cierre como una forma de "recordar" y continuar accediendo al alcance de
una función (sus variables) incluso una vez que la función ha terminado de ejecutarse.
Considera esto:
function makeAdder(x) {
// el parámetro `x` es una variable interna
// la función interna àdd()` usa `x`, por lo que tiene un 'cierre' sobre ella
function add(y) {
return y + x;
};
return add;
}
La referencia a la función add() interna que se devuelve con cada llamada externa a makeAdder(..)
es capaz de recordar cualquier valor x que se haya pasado a makeAdder(..).
Ahora, usemos makeAdder(..):
// `plusOne` obtiene una referencia a la función àdd(..)` interna con cierre sobre
el parámetro `x` de`makeAdder(..)` externa
var plusOne = makeAdder( 1 );
// `plusTen` obtiene una referencia a la función àdd (..)` interna con cierre
sobre el parámetro `x` de `makeAdder(..)` externa.
var plusTen = makeAdder( 10 );
plusOne( 3 ); // 4 <-- 1 + 3
plusOne( 41 ); // 42 <-- 1 + 41
plusTen( 13 ); // 23 <-- 10 + 13
Más información sobre cómo funciona este código:
1. Cuando llamamos makeAdder(1), obtenemos de nuevo una referencia a su interna add(...) que
recuerda x como 1. Llamamos a esta referencia de función plusOne(...).
2. Cuando llamamos makeAdder(10) obtenemos de nuevo otra referencia a su interna add(...)
que recuerda x como 10. Llamamos a esta referencia de función plusTen(..).
3. Cuando llamamos plusOne(3) se suman 3 (su interno y) al 1 (recordado por x) y se obtiene 4
como resultado.
4. Cuando llamamos a plusTen(13) suma 13 (su interno y) a los 10 (recordado por x), y obtenemos
23 como resultado.
No se preocupe si esto parece extraño y confuso al principio -- ¡puede serlo! Hará falta mucha
práctica para entenderlo completamente.
Pero confía en mí, una vez que lo hagas, es una de las técnicas más poderosas y útiles en toda la
programación. Definitivamente vale la pena el esfuerzo de dejar que tu cerebro hierva a fuego
lento en los cierres por un rato. En la próxima sección, tendremos un poco más de práctica con el
cierre.
Módulos
El uso más común del cierre en JavaScript es el patrón de módulo. Los módulos le permiten definir
detalles privados de implementación (variables, funciones) que están ocultos al mundo exterior, así
como una API pública a la que se puede acceder desde el exterior.
Considera esto:
function User(){
var username, password;
function doLogin(user,pw) {
username = user;
password = pw;
// do the rest of the login work
}
var publicAPI = {
login: doLogin
};
return publicAPI;
}
// create a Ùser` module instance

var fred = User();
fred.login( "fred", "12Battery34!" );
La función User() sirve como un alcance externo que contiene las variables username y password,
así como la función doLogin(); todos estos son detalles internos privados de este módulo de
usuario a los que no se puede acceder desde el mundo exterior.
Advertencia: No estamos llamando a new User() aquí, a propósito, a pesar del hecho de que
probablemente parezca más común para la mayoría de los lectores. User() es sólo una función, no
una clase para ser instanciada, así que se llama normalmente. Utilizar nuevos recursos sería
inapropiado y, de hecho, malgastaría recursos.
Ejecutando User() crea una instancia del módulo Usuario -- se crea todo un nuevo alcance, y por lo
tanto una nueva copia de cada una de estas variables/funciones internas. Asignamos esta instancia
a fred. Si ejecutamos User() de nuevo, tendremos una nueva instancia completamente separada
de fred.
La función interna doLogin() tiene un cierre sobre username y password, lo que significa que
mantendrá su acceso a ellos incluso después de que la función User() termine de ejecutarse.
publicAPI es un objeto con una propiedad/método en él, login, que es una referencia a la función
doLogin(). Cuando regresamos publicAPI de User(), se convierte en la instancia que llamamos
fred.
En este punto, la función externa User() ha finalizado la ejecución. Normalmente, pensarías que
las variables internas como username y password han desaparecido. Pero aquí no lo han hecho,
porque hay un cierre en la función login() que los mantiene vivos.
Es por eso que podemos llamar a fred.login(..) -- lo mismo que llamar al doLogin(..) interno --
y todavía puede acceder a variables internas username y password.
Hay una buena posibilidad de que con sólo un breve vistazo al cierre y al patrón del módulo, algo
de esto siga siendo un poco confuso. ¡Eso está bien! Se necesita algo de trabajo para envolver tu
cerebro alrededor.
Desde aquí, vaya a leer el título de Scope & Closures de esta serie para una exploración mucho más
profunda.
Identificador this
Otro concepto muy comúnmente malentendido en JavaScript es el identificador this. Una vez más,
hay un par de capítulos sobre este tema en el título de esta serie de libros this & Object prototypes,
así que aquí presentaremos brevemente el concepto.
Aunque a menudo puede parecer que this está relacionado con "patrones orientados a objetos",
en JS this es un mecanismo diferente.
Si una función tiene una referencia a this en su interior, la referencia rhis suele apuntar a un
object. Pero el object al que apunta depende de cómo se haya llamado la función.
Es importante darse cuenta de que this no se refiere a la función en sí, es el concepto erróneo más
común.
Aquí hay una ilustración rápida:
function foo() {
console.log( this.bar );
}
var bar = "global";
var obj1 = {
bar: "obj1",
foo: foo
};
var obj2 = {
bar: "obj2"
};
// --------
foo(); // "global"
obj1.foo(); // "obj1"
foo.call( obj2 ); // "obj2"
new foo(); // undefined
Hay cuatro reglas sobre cómo se establece this, y se muestran en las últimas cuatro líneas de ese
fragmento.
1. foo() establece this en el objeto global en modo no estricto -- en modo estricto, this sería
undefined y se obtendría un error al acceder a la propiedad bar -- entonces "global" es el valor
encontradothis.bar.
2. obj1.foo() fija thisen el objeto obj1.
3. foo.call(obj2) ajusta this al objeto obj2.
4. new foo() establece this en un objeto vacío nuevo.
Conclusión: para entender a qué apunta this, hay que examinar cómo se llamó a la función en
cuestión. Será una de esas cuatro formas que acabamos de mostrar, y eso luego responderá a lo
que es this.
Nota: Para obtener más información sobre this, consulte los capítulos 1 y 2 de this & Object
Prototypes del título de esta serie de libros.
Prototipos
El mecanismo del prototipo en JavaScript es bastante complicado. Sólo le echaremos un vistazo

aquí. Usted querrá pasar mucho tiempo revisando los capítulos 4-6 del título this & Object
Prototypes para todos los detalles.
Cuando se hace referencia a una propiedad en un objeto, si esa propiedad no existe, JavaScript
utilizará automáticamente la referencia interna del prototipo de ese objeto para encontrar otro
objeto en el que buscar la propiedad. Usted podría pensar en esto casi como un remanente si la
propiedad está desaparecida.
El enlace de referencia interno del prototipo de un objeto a su respaldo ocurre en el momento en

que se crea el objeto. La manera más simple de ilustrarlo es con una utilidad incorporada en el
lenguage llamada Object.create(..).
Considera esto:
var foo = {
a: 42
};
// create `bar` and link it to `foo`

var bar = Object.create( foo );
bar.b = "hello world";
bar.b; // "hello world"

bar.a; // 42 <-- delegated to `foo`
La propiedad a no existe realmente en el objeto bar, sino porque bar es un prototipo ligado a foo,
JavaScript automáticamente busca a hacia atrás en el objeto foo, donde se encuentra.
Este vínculo puede parecer un rasgo extraño del lenguaje. La forma más común en que se usa esta
característica -y yo diría que abusada- es tratar de emular/falsificar un mecanismo de "clase" con
"herencia".
Pero una forma más natural de aplicar prototipos es un patrón llamado "delegación de
comportamiento," donde intencionalmente diseñas tus objetos vinculados para poder delegar de
uno a otro partes del comportamiento necesarias.
Nota: Para obtener más información sobre prototipos y delegación de comportamiento, consulte
los capítulos 4-6 de this & Object Prototypes.
Viejo y Nuevo
Algunas de las características de JS que ya hemos cubierto, y ciertamente muchas de las

características cubiertas en el resto de esta serie, son adiciones más nuevas y no necesariamente
estarán disponibles en navegadores antiguos. De hecho, algunas de las funciones más nuevas de la
especificación aún no se han implementado en ningún navegador estable.
¿Qué haces con las cosas nuevas? ¿Sólo tienes que esperar durante años o décadas para que todos
los navegadores antiguos se desvanezcan en la oscuridad?
Eso es lo que piensa una gran cantidad de personas, pero en realidad no es un enfoque saludable
para JS.
Hay dos técnicas principales que puede utilizar para "llevar" el material JavaScript más reciente a
los navegadores antiguos: polyfilling y transpiling.
Polyfilling
La palabra "polyfill" es un término inventado por Remy Sharp

(https://remysharp.com/2010/10/08/what-is-a-polyfill) que se usa para referirse a tomar la
definición de una característica más nueva y producir un código equivalente al comportamiento,
pero que es capaz de ejecutarse en entornos JS más antiguos.
Por ejemplo, ES6 define una utilidad llamada Number.isNaN(...) para proporcionar una
comprobación precisa y no depreciando la utilidad original isNaN(...). Pero es fácil hacer polyfill
de esa utilidad para que puedas empezar a usarla en tu código sin importar si el usuario final está
en un navegador ES6 o no.
Considera esto:
if (!Number.isNaN) {
Number.isNaN = function isNaN(x) {
return x !== x;
};
}
La sentencia if protege contra la aplicación de la definición polyfill en navegadores ES6 donde ya

existirá. Si aún no está presente, definimos Number.isNaN(...).
Nota: La comprobación que hacemos aquí aprovecha una peculiaridad con los valores de NaN, que
es que son el único valor en todo el lenguaje que no es igual a sí mismo. Por lo tanto, el valor de
NaN es el único que haría que x !== x sea verdadero.
No todas las nuevas características son completamente "polifillables". A veces la mayoría de los
comportamientos pueden ser "polifillados", pero todavía hay pequeñas desviaciones. Usted debe
ser realmente muy cuidadoso en la implementación de un polyfill usted mismo, para asegurarse de
que se adhiere a la especificación tan estrictamente como sea posible.
O mejor aún, utilice un conjunto de "polifylls" ya creados en los que pueda confiar, como los
proporcionados por ES5-Shim (https://github.com/es-shims/es5-shim) y ES6-Shim
(https://github.com/es-shims/es6-shim).
Transpilación
No hay forma de "polifilar" una nueva sintaxis que se haya añadido al lenguaje. La nueva sintaxis
arrojaría un error en el viejo motor JS como no reconocido/invalido.
Por lo tanto, la mejor opción es usar una herramienta que convierta su nuevo código en
equivalentes de código más antiguos. Este proceso es comúnmente llamado "transpiling", un
término para transformar + compilar.
Esencialmente, su código fuente está escrito en la nueva forma de sintaxis, pero lo que usted
despliega en el navegador es el código transpiado en la antigua forma de sintaxis. Normalmente se
inserta el transpilador en el proceso de construcción, similar al linter(validador) de código o el
minificador de código.
Usted podría preguntarse por qué se tomaría la molestia de escribir una nueva sintaxis sólo para
tenerla transportada a un código anterior -- ¿por qué no simplemente escribir el código anterior
directamente?
Hay varias razones importantes por las que debe preocuparse por transpilar:
● La nueva sintaxis añadida al lenguaje está diseñada para hacer su código más legible y
mantenible. Los equivalentes más antiguos son a menudo mucho más complicados. Usted debe
preferir escribir sintaxis más nueva y limpia, no sólo para usted mismo sino para todos los demás
miembros del equipo de desarrollo.
● Si usted transpila sólo para navegadores más antiguos, pero sirve la nueva sintaxis a los
navegadores más nuevos, puede aprovechar las optimizaciones de rendimiento del navegador
con la nueva sintaxis. Esto también permite a los fabricantes de navegadores tener más código
del mundo real para probar sus implementaciones y optimizaciones.
● El uso de la nueva sintaxis anterior permite probarla con mayor solidez en el mundo real, lo que
proporciona una retroalimentación previa al comité JavaScript (TC39). Si los problemas se
detectan lo suficientemente temprano, pueden ser cambiados o corregidos antes de que los
errores de diseño de lenguaje se conviertan en permanentes.
He aquí un ejemplo rápido de transpilación. ES6 añade una función llamada "Valores de
parámetros por defecto". Se parece a esto:
function foo(a = 2) {
console.log( a );
}
foo(); //2
foo( 42 ); //42
Simple, ¿verdad? Útil, también! Pero la nueva sintaxis es inválida en los motores pre-ES6. Entonces,
¿qué hará un transpiler con ese código para que funcione en entornos antiguos?
function foo() {
var a = arguments[0] !== (void 0) ? arguments[0] : 2;
console.log( a );
}
Como puede ver, comprueba si el valor de los arguments[0] es void 0 (alias undefined), y si es así
proporciona el valor por defecto 2; de lo contrario, asigna lo que se haya pasado.
Además de poder utilizar ahora la sintaxis más agradable incluso en navegadores antiguos, mirar el
código transpilado realmente explica el comportamiento pretendido más claramente.
Es posible que no te hayas dado cuenta de que, al mirar la versión ES6, el único valor que no se
puede transferir explícitamente para un parámetro de valor predeterminado es el indefinido, pero
el código transpuesto lo hace mucho más claro.
El último detalle importante a destacar sobre los transpilers es que ahora deben ser considerados
como una parte estándar del ecosistema y proceso de desarrollo de JS. JS va a seguir
evolucionando, mucho más rápido que antes, por lo que cada pocos meses meses se añadirán
nuevas sintaxis y nuevas funciones.
Si utiliza un transpirador de forma predeterminada, siempre podrá cambiar a una sintaxis más
nueva cuando lo encuentre útil, en lugar de esperar años para que los navegadores actuales dejen
de funcionar.
Hay bastantes grandes transpilers para que usted elija. Aquí están algunas buenas opciones en el
momento de esta escritura:
● Babel (https://babeljs.io) (antes 6to5): Transpila ES6+ a ES5

● Traceur (https://github.com/google/traceur-compiler): Transpila ES6, ES7 y más allá en ES5
No JavaScript
Hasta ahora, lo único que hemos tratado es el lenguaje JS en sí mismo. La realidad es que la
mayoría de JS está escrito para funcionar e interactuar con entornos como los navegadores. Una
buena parte de lo que escribes en tu código no está, stríctament hablando, directamente
controlado por JavaScript. Eso probablemente suena un poco extraño.
El Javascript "no JavaScript" más común que encontrará es la API de DOM. Por ejemplo:
var el = document.getElementById( "foo" );
La variable document existe como variable global cuando el código se ejecuta en un navegador. No
es proporcionado por el motor JS, ni es particularmente controlado por la especificación JavaScript.
Toma la forma de algo que se parece muchísimo a un objeto JS normal, pero no es exactamente
eso. Es un objeto especial, a menudo llamado "objeto huésped".
Además, el método getElementById(..) en el documento se parece a una función JS normal, pero

es sólo una interfaz poco visible a un método incorporado proporcionado por el DOM de su
navegador. En algunos navegadores (de nueva generación), esta capa también puede estar en JS,
pero tradicionalmente el DOM y su comportamiento se implementa en algo más parecido a C++.
Otro ejemplo es con entrada/salida (I/O).
Favorita de todo el mundo, alert(..) muestra un cuadro de mensaje en la ventana del navegador
del usuario. alerta(...) es proporcionada a su programa JS por el navegador, no por el propio
motor JS. La llamada que realiza envía el mensaje a los mecaismos internos del navegador y
maneja la presentación el cuadro de mensaje.
Lo mismo ocurre con console.log(..);, su navegador proporciona tales mecanismos y los conecta
a las herramientas del desarrollador.
Este libro, y toda esta serie, se centra en el lenguaje JavaScript. Por eso es por lo que no ves
ninguna cobertura sustancial de estos mecanismos JavaScript "no JavaScript".
Sin embargo, usted necesita estar consciente de ellos, ya que estarán en cada programa JS que
escriba!
Revisión
El primer paso para aprender el sabor de programación de JavaScript es obtener un entendimiento

básico de sus mecanismos básicos como valores, tipos, cierres de funciones, this y prototipos.
Por supuesto, cada uno de estos temas merece una cobertura mucho mayor que la que usted ha
visto aquí, pero por eso tienen capítulos y libros dedicados a ellos durante el resto de esta serie.
Después de que te sientas bastante cómodo con los conceptos y ejemplos de código en este
capítulo, el resto de la serie te espera para que realmente entiendas y conozcas el lenguaje en
profundidad.
El capítulo final de este libro resumirá brevemente cada uno de los otros títulos de la serie y los
otros conceptos que cubren, además de lo que ya hemos explorado.
Into YDKS
¿De qué se trata esta serie? En pocas palabras, se trata de tomar en serio la tarea de aprender
todas las partes de JavaScript, no sólo un subconjunto del lenguaje que alguien llamó "las partes
buenas", y no cualquier cantidad mínima que necesite para hacer su trabajo.
Los desarrolladores serios en otros idiomas esperan poner en el esfuerzo de aprender la mayoría o
todos los idiomas en los que escriben principalmente, pero los desarrolladores de JS parecen
diferenciarse de la multitud en el sentido de que típicamente no aprenden mucho del idioma. Esto
no es bueno, y no es algo que debamos seguir permitiendo que siga siendo la norma.
La serie You Don' t Know JS (YDKJS) contrasta marcadamente con los enfoques típicos del
aprendizaje de JS, y es diferente a casi cualquier otro libro de JS que usted pueda leer. Le desafía a
ir más allá de su zona de comodidad y a hacer preguntas más profundas de "por qué" para cada
uno de los comportamientos que encuentras. ¿Estás listo para ese desafío?
Voy a usar este capítulo final para resumir brevemente lo que se puede esperar del resto de los
libros de la serie, y cómo construir una base de JS aprendiendo sobre YDKJS.
Alcance y cierres
Tal vez una de las cosas más fundamentales que necesitará comprender rápidamente es cómo
funciona realmente el alcance de las variables en JavaScript. No basta con tener creencias
anecdóticas confusas sobre el alcance.
El título de Scope & Closures comienza por desacreditar el concepto erróneo común de que JS es
un "lenguaje interpretado" y por lo tanto no se compila. No.
El motor JS compila su código justo antes (y a veces durante) la ejecución. Por lo tanto, utilizamos
una comprensión más profunda del enfoque del compilador de nuestro código para entender
cómo encuentra y trata las declaraciones de variables y funciones. A lo largo del camino, vemos la
metáfora típica para la gestión de alcance variable JS,"Hoisting (elevación)".
Este entendimiento crítico del "alcance" es en lo que entonces basamos nuestra exploración del
cierre(closure) para el último capítulo del libro. El cierre es quizás el concepto más importante en
todo JS, pero si usted no ha captado primero con firmeza cómo funciona el alcance o ámbito, es
probable que el cierre permanezca fuera de su dominio.
Una aplicación importante del cierre es el patrón modular, tal como lo presentamos brevemente
en este libro en el capítulo 2. El patrón de módulo es quizás el patrón de organización de código
más frecuente en todo JavaScript; una de sus máximas prioridades debería ser la comprensión
profunda del mismo.
this & Object Prototypes

Quizás una de las verdades erróneas más extendidas y persistentes sobre JavaScript es que la
palabra clave this se refiere a la función en la que aparece. Terriblemente equivocado.
La palabra clave this está ligada dinámicamente en función de cómo se ejecuta la función en
cuestión, y resulta que hay cuatro reglas simples para entender y determinar completamente esta
vinculación.
Estrechamente relacionado con la palabra clave this se encuentra el mecanismo de prototipo de

objeto, que es una cadena de búsqueda de propiedades, similar a cómo se encuentra el alcance de
variables. Pero envuelto en los prototipos está la otra gran equivocación sobre JS: la idea de emular
clases (falsas) y herencia (llamada "prototipo").
Desafortunadamente, el deseo de llevar a JavaScript el pensamiento de patrones de diseño de

clase y herencia es lo peor que se puede intentar hacer, porque aunque la sintaxis puede
engañarte para que pienses que hay algo parecido a clases presentes, de hecho el mecanismo del
prototipo es fundamentalmente opuesto en su comportamiento.
Lo que está en juego es si es mejor ignorar el desajuste y pretender que lo que se está
implementando es "herencia", o si es más apropiado aprender y abrazar cómo funciona realmente
el sistema prototipo de objetos. Este último se denomina más adecuadamente "Delegación de
comportamiento".
Esto es más que una preferencia sintáctica. La delegación es un patrón de diseño completamente
diferente y más poderoso, que reemplaza la necesidad de diseñar con clases y herencia.
Pero estas afirmaciones se pondrán rebatir absolutamente en casi cualquier post, libro y
conferencia sobre el tema durante toda la vida de JavaScript.
Las afirmaciones que hago con respecto a la delegación contra la herencia no provienen de una
aversión al lenguaje y su sintaxis, sino del deseo de ver potenciada la verdadera capacidad del
lenguaje y borradas la confusión y frustración interminables.
Pero el caso que expongo en relación con los prototipos y la delegación es mucho más complejo
que el que voy a permitirme aquí. Si estás listo para reconsiderar todo lo que crees saber sobre las
"clases" y la "herencia" de JavaScript, te ofrezco la oportunidad de "tomar la píldora roja" (Matrix
1999) y echar un vistazo a los capítulos 4-6 de este & Object Prototypes título de esta serie.
Tipos y gramática
El tercer título de esta serie se centra principalmente en otro tema muy controvertido: la coerción
tipográfica. Tal vez ningún tema causa más frustración con los desarrolladores de JS que cuando se
habla de las confusiones que rodean la coerción implícita.
Con mucho, la sabiduría convencional es que la coerción implícita es una "mala parte" del lenguaje
y debe evitarse a toda costa. De hecho, algunos han llegado a llamarlo un "defecto" en el diseño del
lenguaje. De hecho, hay herramientas cuyo trabajo es no hacer más que escanear tu código y
quejarse si estás haciendo algo remotamente como la coerción.
¿Pero la coerción es realmente tan confusa, tan mala, tan traidora, que tu código está condenado
desde el principio si lo usas?
Después de haber construido una comprensión de cómo funcionan realmente los tipos y valores
en los capítulos 1-3, el capítulo 4 aborda este debate y explica plenamente cómo funciona la
coerción, en todos sus rincones y grietas. Vemos qué partes de la coerción son realmente
sorprendentes y qué partes tienen sentido si se les da tiempo para aprender.
Pero no estoy simplemente sugiriendo que la coerción es sensata y fácil de aprender, estoy
afirmando que la coerción es una herramienta increíblemente útil y totalmente subestimada que
deberías estar usando en tu código. Estoy diciendo que la coerción, cuando se usa correctamente,
no sólo funciona, sino que hace que tu código sea mejor. Todos los detractores y los que dudan
seguramente se burlarán de tal posición, pero creo que es una de las claves principales para
mejorar tu juego de JS.
¿Quiere usted simplemente seguir lo que la multitud dice, o está dispuesto a dejar de lado todas las
suposiciones y mirar la coerción con una perspectiva fresca? El título Types & Grammar de esta
serie coaccionará su pensamiento.
Rendimiento y asincronía
Los tres primeros títulos de esta serie se centran en la mecánica básica del lenguaje, pero el cuarto
título se ramifica ligeramente para cubrir patrones por encima de la mecánica del lenguaje para
gestionar la programación asíncrona. La asincronía no sólo es crítica para el rendimiento de
nuestras aplicaciones, sino que se está convirtiendo cada vez más en el factor crítico para la
capacidad de escritura y mantenimiento.
El libro comienza primero aclarando una gran cantidad de terminología y confusión conceptual en
torno a cosas como "asincronía","paralelo" y "concurrente", y explica en profundidad cómo estas
cosas se aplican y no se aplican a JS.
Luego pasamos a examinar las llamadas de retorno como el método primario para habilitar la
asincronía. Pero es aquí donde rápidamente vemos que la llamada de respuesta por sí sola es
desesperadamente insuficiente para las exigencias modernas de la programación asíncrona.
Identificamos dos deficiencias principales de la codificación de las llamadas de retorno: Inversion of
Control (IoC) pérdida de confianza y falta de razonabilidad lineal.
Para abordar estas dos deficiencias principales, ES6 introduce dos nuevos mecanismos (y de hecho,
patrones): promesas y generadores.
Las promesas son una envoltura independiente del tiempo alrededor de un "valor futuro", que le
permite razonar y componer sin importar si el valor está listo o no todavía. Además, resuelven
eficazmente los problemas de confianza IoC encaminando las llamadas de retorno a través de un
mecanismo de promesa confiable y componible.
Los generadores introducen un nuevo modo de ejecución para las funciones JS, en el que el
generador puede detenerse en los puntos de frenado y reanudarse asincrónicamente más tarde.
La capacidad de pausa y reanudación permite que el código síncrono y de apariencia secuencial en
el generador se procese asincrónicamente entre bastidores. Haciendo esto, nos dirigimos a las
confusiones no lineales, saltos no locales de las llamadas de retorno y por lo tanto hacemos que
nuestro código asincrónico parezca sincronizado de manera que sea más razonable.
Pero es la combinación de promesas y generadores lo que "produce" nuestro patrón de

codificación asíncrono más efectivo hasta la fecha en JavaScript. De hecho, gran parte de la
sofisticación futura de la asincronía que viene en ES7 y más tarde seguramente se construirá sobre
esta base. Para ser serio sobre programación efectiva en un mundo asincrónico, vas a necesitar
estar realmente cómodo con la combinación de promesas y generadores.
Si las promesas y los generadores tratan de expresar patrones que permiten a nuestros programas
funcionar más simultáneamente y así obtener más procesamiento logrado en un período más
corto, JS tiene muchas otras facetas de optimización del rendimiento que vale la pena explorar.
El capítulo 5 profundiza en temas como el paralelismo de programas con los Web Workers y el
paralelismo de datos con SIMD, así como técnicas de optimización de bajo nivel como ASM.js. El
capítulo 6 examina la optimización del rendimiento desde la perspectiva de las técnicas de
benchmarking adecuadas, incluyendo qué tipos de rendimiento preocuparse y qué ignorar.
Escribir JavaScript efectivamente significa escribir código que puede romper las barreras de
restricción de ser ejecutado dinámicamente en una amplia gama de navegadores y otros entornos.
Requiere un montón de planificación intrincada y detallada y el esfuerzo en nuestras partes para
llevar un programa de "funciona" a "funciona bien".
El título Async & Performance está diseñado para darle todas las herramientas y habilidades que
necesita para escribir código JavaScript razonable y eficaz.
ES6 y más allá

No importa cuánto usted sienta que ha dominado JavaScript hasta este punto, la verdad es que
JavaScript nunca va a dejar de evolucionar, y además, la tasa de evolución está aumentando
rápidamente. Este hecho es casi una metáfora del espíritu de esta serie, para abrazar que nunca
conoceremos completamente todas las partes de JS, porque tan pronto como lo domines todo,
habrá cosas nuevas que llegarán a la línea que necesitarás aprender.
Este título está dedicado a las visiones a corto y medio plazo de hacia dónde se dirige el lenguaje,
no sólo lo conocido como ES6, sino lo que más allá es probable.
Mientras que todos los títulos de esta serie abarcan el estado de JavaScript en el momento de la
redacción de esta serie, que es a mitad de camino a través de la adopción de ES6, el enfoque
principal de la serie ha sido más bien en ES5. Ahora, queremos centrar nuestra atención en ES6,
ES7 y...
Como ES6 está casi completo en el momento de escribir este artículo, ES6 & Beyond comienza
dividiendo el material concreto del paisaje de ES6 en varias categorías clave, incluyendo nuevas
sintaxis, nuevas estructuras de datos (colecciones) y nuevas capacidades de procesamiento y APIs.
Cubrimos cada una de estas nuevas características del sistema ES6, con diferentes niveles de
detalle, incluyendo la revisión de los detalles que se mencionan en otros libros de esta serie.
Algunas cosas emocionantes de ES6 para leer sobre: estructuración, valores de parámetros por
defecto, símbolos, métodos concisos, propiedades calculadas, funciones de flecha, exploración de
bloques, promesas, generadores, iteradores, módulos, proxies, mapas débiles, y mucho, mucho
más! ¡Uf, el ES6 es un buen golpe!
La primera parte del libro es un mapa de ruta de todo lo que necesitas aprender para prepararte
para el nuevo y mejorado JavaScript que estarás escribiendo y explorando en los próximos dos
años.
La última parte del libro se centra en las cosas que probablemente podemos esperar ver en el
futuro cercano de JavaScript. La realización más importante aquí es que post-ES6, JS
probablemente va a evolucionar característica por característica en lugar de la versión por versión,
lo que significa que podemos esperar ver estas cosas del futuro cercano que vienen mucho antes
de lo que usted podría imaginar.
El futuro de JavaScript es brillante. ¿No es hora de que empecemos a aprenderlo??
Revisión
La serie YDKJS está dedicada a la proposición de que todos los desarrolladores JS pueden y deben
aprender todas las partes de este gran lenguaje. La opinión de ninguna persona, las suposiciones
de ningún marco, y la fecha límite del proyecto no deben ser la excusa por la que nunca se aprende
y por la que no se puede aprender, entender profundamente JavaScript.
Tomamos cada área de enfoque importante en el lenguaje y dedicamos un libro corto pero muy
denso para explorar a fondo todas las partes del mismo que tal vez usted pensó que conocía, pero
probablemente no completamente.
"You Don' t Know JS" no es una crítica o un insulto. Es una realización con la que todos nosotros, yo
mismo incluido, debemos llegar a un acuerdo. Aprender JavaScript no es un objetivo final, sino un
proceso. Aún no sabemos JavaScript. ¡Pero lo haremos!

You Dont Know Js-Up and Going

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

You Dont Know Js-Up and Going

Cargado por

Copyright:

Formatos disponibles

YOU DON’T KNOW JS – 01: UP & GOING

¿Qué fue lo último que aprendiste?

Jenn Lukas jennlukas. com, @jennlukas Consultor de primera línea

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

La sentencia a = b * 2; le dice al ordenador, aproximadamente, que obtenga el valor actual

Por ejemplo, por ejemplo:

Esta declaración tiene cuatro expresiones:

● 2 es una expresión de valor literal

Para algunos lenguajes de computadora, esta traducción de comandos se hace típicamente de

Típicamente se afirma que JavaScript es interpretado, porque su código fuente JavaScript es

Pruébelo usted mismo

Ahora, escriba este código y vea cómo funciona:

Vamos, inténtalo. La mejor manera de aprender a programar es empezar a codificar!

En el fragmento de código anterior, usamos console.log(..). Brevemente, veamos de qué se trata

Segundo, la consola. es una referencia de objeto donde se encuentra la función log(...).

Abarcamos los objetos y sus propiedades con más detalle en el capítulo 2.

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

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

El operador * realiza la multiplicación matemática. Bastante simple, ¿verdad?

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

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

De maneras muy similares, cuando expresas valores en un programa, eliges diferentes

Estas diferentes representaciones de valores se denominan tipos en la terminología de

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

Conversión entre tipos

Para ayudarle en estas situaciones comunes, JavaScript a veces se activa e implícitamente

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

// This is a single-line comment

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

He aquí un uso común de los comentarios multilínea:

/* The following value is used because

var a = /* arbitrary value */ 42;

Definitivamente querrá comenzar su aprendizaje de programación empezando con el hábito de

var amount = 99.99;

// convert `amount` to a string, and

console.log( amount ); // "9.98"

Entonces, la sentencia amount = "$" + String(amount) coacciona explícitamente el valor 199.98 a

Aquí hay un ejemplo tonto:

var TAX_RATE = 0.08; // 8% sales tax

console.log( amount ); // 215.9784

La última versión de JavaScript en el momento de escribir este artículo (comúnmente llamada

var amount = 99.99;

var amount = 99.99;

var amount = 99.99;

// is amount big enough?

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

var bank_balance = 302.13;

if (amount < bank_balance) {

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

const ACCESSORY_PRICE = 9.99;

// can we afford the extra purchase?

while (numOfCustomers > 0) {

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

var amount = 99.99;

La función printAmount(..) toma un parámetro que llamamos amt. La función formatAmount()

const TAX_RATE = 0.08;

// return the new amount

var amount = 99.99;

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

Recuerda este fragmento de código de antes:

const TAX_RATE = 0.08;

// return the new amount

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