YOU DON’T KNOW JS – 01: UP & GOING - webkodeaprenda algunos conceptos básicos sobre el...

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 querecuerdes ese sentimiento cuando finalmente lo tuviste: el momento de la bombilla. Cuando lascosas pasaron de borrosas a cristalinas, cuando entendió la diferencia entre los substantivosmasculinos 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 tunueva 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 aventuraemocionante, especialmente si estás buscando aprender el tema eficientemente.

Enseño muchas clases de codificación para principiantes. Los estudiantes que toman mis clases amenudo han tratado de enseñarse a sí mismos materias como HTML o JavaScript leyendo entradasen blogs o copiando y pegando código, pero no han sido capaces de dominar realmente el materialque les permitirá codificar el resultado deseado. Y debido a que no comprenden realmente lospormenores de ciertos temas de codificación, no pueden escribir código poderoso o depurar supropio 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ándaresweb, marcado semántico, código bien comentado y otras mejores prácticas. Cubriré el tema de unamanera minuciosa para explicar cómo y por qué, sin simplemente tirar el código para copiar ypegar. Cuando te esfuerzas por comprender tu código, creas un mejor trabajo y te vuelves mejoren 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 daruna gran introducción a JavaScript sin cortar esquinas. Este libro no escatima en la superficie, sinoque 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 essuficiente con aprender a abrir, cerrar y guardar un documento en Photoshop. Claro, una vez queaprenda algunos conceptos básicos sobre el programa, podría crear y compartir un diseño quehice. Pero sin conocer legítimamente las herramientas y lo que hay detrás de ellas, ¿cómo puedodefinir una cuadrícula, o crear un sistema de tipo legible, u optimizar gráficos para uso web? Lomismo 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 conformarnoscon 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. Quieroque mantengas esos dos sentimientos de antes y después de que aprendas algo en mentemientras comienzas este libro. Puede parecer abrumador, pero usted ha recogido este libroporque está comenzando un viaje impresionante para afinar su conocimiento. Up & Going es elcomienzo 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 unaabreviatura de las palabras que se usan para maldecir sobre JavaScript, ¡aunque maldecir laspeculiaridades 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 laexperiencia interactiva en torno al contenido que consumimos. Mientras que las pistas de ratónparpadeantes 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 órdenesde magnitud, y pocos dudan de su importancia en el corazón de la plataforma de software másampliamente disponible del mundo: la web.

Pero como lengua, ha sido objeto de constantes críticas, en parte debido a su patrimonio, perosobre todo a su filosofía de diseño. Incluso el nombre evoca, como dijo una vez Brendan Eich, elestatus de "hermano menor tonto" junto a su hermano mayor más maduro "Java". Pero el nombreno es más que un accidente de la política y el marketing. Los dos idiomas son muy diferentes enmuchos 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ícesfuncionales estilo Scheme/Lisp, es extremadamente accesible a una amplia audiencia dedesarrolladores, 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 excentricidadeshacen 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 escribirun 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 apareceren vez de ello de maneras aparentemente simplistas, como pasar funciones como llamadas deretorno, lo que anima al desarrollador de JavaScript a usar el lenguaje tal como es y nopreocuparse 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 unacolecció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 nosenfrentamos actualmente. Debido a que JavaScript se puede usar sin entender, la comprensión dellenguaje a menudo no se logra.

MisiónSi en cada punto en el que te encuentras con una sorpresa o frustración en JavaScript, tu respuestaes añadirlo a la lista negra, como algunos están acostumbrados a hacer, pronto serás relegado a unshell hueco de la riqueza de JavaScript.

Mientras que este subconjunto ha sido conocido como "Las partes buenas", le imploro, queridolector, que en su lugar lo considere como "Las partes fáciles","Las partes seguras", o incluso "Laspartes incompletas".

Esta serie de libros de JavaScript ofrece un reto contrario: aprender y comprender a fondo todo elJavaScript, incluso y especialmente "The Tough Parts".

Aquí, nos enfocamos en la tendencia de los desarrolladores de JS a aprender "lo suficiente" parasobrevivir, sin forzarse a aprender exactamente cómo y por qué el lenguaje se comporta de lamanera en que lo hace. Además, evitamos el consejo común de retirarnos cuando el camino sepone difícil.

No estoy contento, ni deberías estarlo tú, de detenerte una vez que algo funciona, y no realmentesabiendo por qué. Te desafío a que recorras ese "camino menos transitado" y aceptes todo lo queJavaScript es y puede hacer. Con ese conocimiento, ninguna técnica, ningún marco, ningunapalabra 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 comunesmalinterpretado o malentendido, y se sumerge muy profundo y exhaustivamente en ellos. Tú debesalir de la lectura con una firme confianza en su comprensión, no sólo de la lectura lo que necesitassaber ".

El JavaScript que usted conoce en este momento es probablemente partes transmitidas a usted porotros que han sido quemados por un entendimiento incompleto. Ese JavaScript no es más que unasombra del verdadero lenguaje. Todavía no conoces realmente JavaScript, pero si buscas en estaserie, 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 aprendercompletamente (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 arreglareso, 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 degran alcance en el futuro), como ES6. Es posible que algunos códigos no funcionen como sedescribe si funcionan en motores anteriores (pre-ES6).

Hacia la programaciónBienvenido a la serie You Don' t Know JS (YDKJS). Up & Going es una introducción a variosconceptos básicos de programación -por supuesto, nos inclinamos hacia JavaScript (a menudoabreviado 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á brevementelo 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 deprogramación, y está buscando estos libros para ayudarle a comenzar a lo largo de un camino a lacomprensió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ásticosde introducción a la programación que pueden ayudarle a profundizar más en estos temas, y leanimo 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 leayudará 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áslibros de YDKJS!

Si ya te sientes bastante cómodo con JavaScript, primero revisa el Capítulo 3 como un breve vistazoa 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 deinstrucciones especiales para decirle al equipo qué tareas realizar. Por lo general, el código seguarda en un archivo de texto, aunque con JavaScript también puede escribir código directamenteen 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 lenguajeinformático, a veces conocido como su sintaxis, al igual que el inglés le dice cómo deletrearpalabras 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 tareaespecí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 quese 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ónsimbólicos para los propios valores.

Por el contrario, el 2 es sólo un valor en sí mismo, llamado valor literal, porque se encuentra solosin ser almacenado en una variable.

Los caracteres = y * son operadores (ver "Operadores") -- realizan acciones con los valores yvariables 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 actualalmacenado en la variable b, multiplique ese valor por 2, y luego almacene el resultado de nuevo enotra variable que llamamos a.

Los programas son sólo colecciones de muchas de estas afirmaciones, que en conjunto describentodos 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 auna 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 laejecución del programa -- recuperaría el valor de b y lo multiplicaría por 2, pero luego no haría nadacon ese resultado.

Una expresión más común es una una declaración de expresión de llamada (ver "Funciones"), yaque 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 programanecesita 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 enrealidad no están en una forma que la computadora pueda entender directamente. Por lo tanto, seutiliza una utilidad especial en la computadora (ya sea un intérprete o un compilador) para traducirel 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 dearriba a abajo, línea por línea, cada vez que se ejecuta el programa, lo que generalmente se llamainterpretación del código.

Para otros idiomas, la traducción se hace con anticipación, llamada compilación del código, demodo que cuando el programa se ejecuta más tarde, lo que se está ejecutando es en realidad lasinstrucciones de la computadora ya compiladas listas para usar.

Típicamente se afirma que JavaScript es interpretado, porque su código fuente JavaScript esprocesado cada vez que se ejecuta. Pero eso no es del todo exacto. El motor JavaScript compila elprograma 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 primeroscapí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 necesitepasar el tiempo para repasarlo varias veces - debería practicar cada uno de estos conceptosescribiendo el código usted mismo. La forma más fácil de hacerlo es abrir la consola deherramientas 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 deteclado o desde un elemento del menú. Para obtener información más detallada sobre cómoiniciar y utilizar la consola en su navegador favorito, consulte "Dominio de la consola deherramientas para desarrolladores"(http://blog.teamtreehouse.com/mastering-developer-tools-console). Para escribir varias líneas enla consola a la vez, utilice <shift> + <enter> para pasar a la siguiente línea nueva. Una vez quepulse <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 unapestaña vacía en su navegador. Prefiero hacer esto escribiendo: about:blank: en la barra dedirecciones. A continuación, asegúrese de que su consola de desarrollador está abierta, comoacabamos 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 trataesa línea de código.

Puede que lo hayas adivinado, pero así es exactamente como imprimimos el texto (tambiénconocido como salida al usuario) en la consola de desarrollo. Hay dos características de esaafirmació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 valorde 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 dealert(...), ya que puede imprimir muchos valores a la vez sin interrumpir la interfaz delnavegador.

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

Entrada

Mientras discutimos la salida, también puede preguntarse acerca de la entrada (es decir, recibirinformación del usuario).

La forma más común de hacerlo es que la página TML muestre elementos de formulario (comocuadros de texto) a un usuario en el que puede escribir, y luego usar JS o leer esos valores en lasvariables de su programa.

Pero hay una manera más fácil de obtener información para fines de ganancia y demostraciónsencillos, 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,"Porfavor 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 haescrito 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, losejemplos 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 losejemplos.

Operadores

Los operadores son cómo realizamos acciones sobre variables y valores. Ya hemos visto dosoperadores 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 lugarde a = 42, algunos pueden preferir voltear el orden para que el valor fuente esté a la izquierda y lavariable 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 lenguajesde programación modernos. Si se siente poco natural, simplemente pasar un tiempo ensayandoordenando 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, yaque 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 unvariable una vez para cada alcance (ver "Alcance"); puede ser usado tantas veces como seanecesario. 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 unvalor de objeto llamado obj con una propiedad del nombre a. Alternativamente se puede accedera 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 yoperadores 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éfonodeterminado y le dicen "noventa y nueve, noventa y nueve" (es decir, $99.99), le están dando unacifra numérica real en dólares que representa lo que tendrá que pagar (más impuestos) paracomprarlo. Si usted desea comprar dos de esos teléfonos, usted puede fácilmente hacer el cálculomental y duplicar ese valor para obtener $199.98.

Si ese mismo empleado recoge otro teléfono similar pero dice que es "gratis" (quizásentrecomillando), no le está dando un número, sino otro índice de representación de su costoesperado ($0.00) -- la palabra "gratis".

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

De maneras muy similares, cuando expresas valores en un programa, eliges diferentesrepresentaciones 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 deprogramación. JavaScript tiene tipos incorporados para cada uno de estos llamados valoresprimitivos:

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 destring y están rodeados por comillas dobles "..." o comillas simples ('...') -- la única diferenciaes 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 deprogramación proporcionen arrays, objetos, funciones y mucho más. Cubriremos mucho mássobre 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 enJavaScript esta conversión se llama "coercion" (coerción, coacción). Del mismo modo, si alguienintroduce una serie de caracteres numéricos en un formulario de una página de comercioelectrónico, eso es un string, pero si necesita usar ese valor para realizar operacionesmatemáticas, debe transformarlo a un número.

JavaScript proporciona varias facilidades diferentes para realizar transformaciones a la fuerza entretipos. 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ónexplí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 sondel 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 deacuerdo en que son equivalentes. Pero no son exactamente iguales, ¿verdad? Es el mismo valor endos 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ícitamentetransforma los valores a los tipos correspondientes.

Por lo tanto, si utiliza el operador == para hacer la comparación "99.99" == 99.99, JavaScriptconvertirá el lado izquierdo "99.99" a su número equivalente 99.99. La comparación se convierteentonces 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 eltiempo para aprender las reglas que gobiernan su comportamiento. La mayoría de losdesarrolladores de JS nunca lo han hecho, así que la sensación común es que la coerción implícitaestá confundiendo y perjudicando a los programas con errores inesperados, y por lo tanto debeser 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 seraprendido por cualquiera que desee tomarse en serio la programación JavaScript. No sólo no esconfuso 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 deltí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 unteléfono recién lanzado o sobre los nuevos planes que su compañía ofrece. Estas notas son sólopara el empleado -- no son para que los clientes las lean. Sin embargo, estas notas ayudan alempleado a hacer mejor su trabajo al documentar el cómo y el por qué de lo que debe decir a losclientes.

Una de las lecciones más importantes que puedes aprender sobre la escritura de código es que noes sólo para el ordenador. El código es cada bit tanto, si no más, para el desarrollador como para elcompilador.

Su ordenador sólo se preocupa por el código de máquina, una serie de 0s y 1s binarios, que vienede la compilación. Hay un número casi infinito de programas que podrías escribir que producen lamisma serie de 0s y 1s. Las decisiones que usted toma sobre cómo escribir su programa sonimportantes, no sólo para usted, sino también para los demás miembros de su equipo e inclusopara su futuro.

Usted debe esforzarse no sólo para escribir programas que funcionan correctamente, sinoprogramas que tengan sentido cuando se examinan. Se puede avanzar mucho en ese esfuerzoeligiendo 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 suprograma que se insertan para explicarle cosas a un humano. El intérprete/compilador siempreignorará estos comentarios.

Hay muchas opiniones sobre lo que hace al código bien comentado; no podemos definir realmentenormas 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 uncomentario multilínea.

Consida lo siguiente:

// This is a single-line comment

/* But this isa multilinecomment.*/

El comentario // de una línea es apropiado si va a poner un comentario justo encima de una solafrase, o incluso al final de una línea. Todo lo que aparece en la línea después de // es tratado comocomentario (y por lo tanto ignorado por el compilador), hasta el final de la línea. No hayrestricciones 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 quehacer en su comentario.

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

/* The following value is used becauseit has been shown that it answersevery 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, porqueel */ termina con ella. Por ejemplo:

var a = /* arbitrary value */ 42;

console.log( a ); // 42

Lo único que no puede aparecer dentro de un comentario multilínea es un */, porque eso seríainterpretado para terminar el comentario.

Definitivamente querrá comenzar su aprendizaje de programación empezando con el hábito decomentar código. A lo largo del resto de este capítulo, verás que usaré comentarios para explicartelas cosas, así que haz lo mismo en tu propia práctica. Confía en mí, todos los que lean tu código telo agradecerán!

Variables

La mayoría de los programas útiles necesitan rastrear un valor a medida que cambia en el cursodel programa, sometiéndose a diferentes operaciones según lo requieran las tareas previstas de suprograma.

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 tiemposegún sea necesario.

En algunos lenguajes de programación, se declara una variable (contenedor) para mantener un tipoespecífico de valor, como number o string. El tipado estático, también conocido como ejecución detipo, es típicamente citado como un beneficio para la corrección del programa al prevenirconversiones de valor no deseadas.

Otros lenguajes enfatizan tipos de valores en vez de variables. La tipado débil, también conocidocomo tipado dinámico, permite que una variable contenga cualquier tipo de valor en cualquiermomento. Típicamente se cita como un beneficio para la flexibilidad del programa al permitir queuna sola variable represente un valor, independientemente del tipo de forma que pueda tomar esevalor 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 puedencontener valores de cualquier tipo sin ningún tipo de imposición.

Como se mencionó anteriormente, declaramos una variable usando la sentencia var -- note que nohay 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 `amount` to a string, and// add "$" on the beginningamount = "$" + 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 unacadena para imprimirlo.

Entonces, la sentencia amount = "$" + String(amount) coacciona explícitamente el valor 199.98 aun valor de tipo string y añade un carácter "$" al principio. En este punto, el importe ahoracontiene el valor de string "$199.98", así que el segundo console.log(...) no necesita hacerninguna 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 unavariable 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 cursodel 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 elprograma.

Otro uso común de las variables es para centralizar la configuración de valores. Esto es máscomúnmente llamado constantes, cuando se declara una variable con un valor y se intenta que esevalor no cambie en todo el programa.

Usted declara estas constantes, a menudo en la parte superior de un programa, de modo que esconveniente para usted tener un lugar para ir a alterar un valor si es necesario. Por convención, lasvariables JavaScript como constantes suelen estar en mayúsculas, con subrayados _ entre variaspalabras.

Aquí hay un ejemplo tonto:

var TAX_RATE = 0.08; // 8% sales taxvar amount = 99.99;

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

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

Nota: Similar a como sucede en console.log(..) donde la función log(...) es accedida accede atravess de una propiedad del objeto console, toFixed(...) aquí es una función a la que se puedeacceder con valores numéricos. Los números en JavaScript no están formateados automáticamentepara 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 programaque impida que se cambie. Pero si la ciudad eleva la tasa del impuesto a las ventas al 9%, todavíapodemos actualizar fácilmente nuestro programa estableciendo el valor asignado de TAX_RATE a0.09 en un sólo lugar, en vez de encontrar muchas ocurrencias del valor 0.08 esparcidas por todoel 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 lasconstantes también evitan el cambio accidental de valor en otro lugar después del ajuste inicial. Siusted trató de asignar cualquier valor diferente a TAX_RATE después de esa primera declaración, suprograma rechazaría el cambio (y en modo estricto, fallaría con un error -- vea "Modo Estricto" en elCapí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 lasvariables 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 depago al comprar su nuevo teléfono.

Del mismo modo, en el código a menudo necesitamos agrupar una serie de frases, que a menudollamamos bloque. En JavaScript, un bloque se define envolviendo una o más sentencias dentro deun par de llaves {.. }.

Consida lo siguiente:

var amount = 99.99;

// a general block{ amount = amount * 2; console.log( amount );// 199.98}

Este tipo de bloque general autónomo {... } es válido, pero no es tan comúnmente visto en losprogramas JS. Típicamente, los bloques se adjuntan a alguna otra instrucción de control, como unainstrucció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 `if` amount = amount * 2; console.log( amount ); // 199.98

}

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ólose procesarán si las condicionales pasan.

Nota: A diferencia de la mayoría de las otras sentencias como console.log(amount);, unasentencia 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 tiendatelefónica le ha pedido que tome una decisión. Y es posible que necesite consultar primero elestado 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 comodecisiones) en nuestros programas. La más común es la declaración if. Básicamente, estásdiciendo: "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 verdaderao falsa. En este programa, proporcionamos la expresión amount < balance_banco, el cualefectivamente se evaluará como true o false dependiendo del importe en la variablebank_balance.

Incluso puede proporcionar una alternativa si la condición no es verdadera, llamada cláusuladiferente. Considere lo siguiente:

const ACCESSORY_PRICE = 9.99;var bank_balance = 302.13;var amount = 99.99;amount = amount * 2;

// can we afford the extra purchase?if ( amount < bank_balance ) { console.log( "I'll take the accessory!" ); amount = amount + ACCESSORY_PRICE;}// otherwise:else { console.log( "No, thanks." );

}

Aquí, si amount < bank_balance es verdadera, vamos a imprimir "Me llevaré el accesorio!" ysumamos el 9,99 a nuestra variable amount. De lo contrario, la cláusula dice que responderemoscorté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 sona menudo coaccionados a ese tipo. La sentencia if espera un booleano, pero si le pasa algo que nolo es, ocurrirá la coerción.

JavaScript define una lista de valores específicos que se consideran "Falsy" porque al ser forzados aun booleano, se vuelven false -- estos incluyen valores como 0 y "". Cualquier otro valor que noaparezca en la lista de "falsy" es automáticamente "Truthy" -- cuando se coacciona a un booleanose 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 puedeusarse 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 enlas expresiones de prueba de los condicionales, véase el capítulo 4 del título Tipos y gramática deesta serie.

Bucles

Durante los momentos de mucho trabajo, hay una lista de espera para los clientes que necesitanhablar con el empleado de la tienda telefónica. Mientras que todavía hay gente en esa lista, ellasó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 buclespueden 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 vezque 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 unbloque 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 primeraiteració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 undo... while se ejecutará sólo la primera vez.

A veces usted está haciendo bucles con el propósito de contar un determinado conjunto denúmeros, como por ejemplo de 0 a 9 (diez números). Esto se puede hacer estableciendo unavariable 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 siemprecuentan las cosas empezando por 0 en lugar de 1. Si usted no está familiarizado con ese modo depensar, puede ser bastante confuso al principio. Tómese un tiempo para practicar el conteoempezando 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 delbucle.

Podemos usar la sentencia break de JavaScript para detener un bucle. También, podemos observarque es terriblemente fácil crear un bucle que de otro modo funcionaría para siempre sin unmecanismo 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 10iteraciones (i de los valores 0 a 9) de cualquiera de las dos formas de bucle, pero se convierte enfalse 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 pruebacondicional (i <=9) y la cláusula de actualización (i = i + 1). Así que si vas a contar con tusiteraciones 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 laspropiedades de un objeto (ver Capítulo 2) donde la prueba condicional implícita es si todas laspropiedades han sido procesadas. El concepto de "bucle hasta que una condición falla" es válidoindependientemente de la forma del bucle.

Funciones

El empleado de la tienda telefónica probablemente no lleva una calculadora para calcular losimpuestos y el monto final de la compra. Esa es una tarea que necesita definir una vez y reutilizaruna 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 partesreutilizables, en vez de repetirse repetirse repetidamente (juego de palabras intencionadas!). Lamanera de hacer es definir una función.

Una función es generalmente una sección de código con nombre que puede ser "llamada" pornombre, 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"

amount = amount * 2;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énpueden ser útiles sólo para organizar los bits de código relacionados en colecciones de nombre,incluso si sólo planea llamarlos una vez.


const TAX_RATE = 0.08;

function calculateFinalPurchaseAmount(amt) { // calculate the new amount with the tax amt = amt + (amt * TAX_RATE);

// return the new amount return amt;}

var amount = 99.99;amount = calculateFinalPurchaseAmount( amount );console.log( amount.toFixed( 2 ) ); // "107.99"

Aunque calculateFinalPurchaseAmount(..) sólo se llama una vez, al organizar sucomportamiento en una función con nombre separado, el código que usa su lógica (la sentenciaamount = calculateFinal...) es más limpio. Si la función tuviera más enunciados en ella, losbeneficios 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 notenga, no podrá venderle el teléfono que usted desea. Sólo tiene acceso a los teléfonos delinventario de su tienda. Tendrás que probar en otra tienda para ver si encuentras el teléfono queestás buscando.

La programación tiene un término para este concepto: alcance (técnicamente llamado alcance, otambién ámbito o scope). En JavaScript, cada función tiene su propio alcance. El alcance esbá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 dosvariables diferentes sentadas una al lado de la otra. Pero el mismo nombre de variable podríaaparecer 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(); //1two(); //2

También, un alcance puede ser anidado dentro de otro alcance, como si un payaso en una fiestade cumpleaños volara un globo dentro de otro globo. Si un alcance está anidado dentro de otro, elcódigo dentro del alcance más interno puede acceder a las variables desde cualquier parte delalcance.


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 console.log( a ); // 1}outer();

Las reglas del lenguage para el alcance dicen que el código en un alcance de aplicación puedeacceder 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ódigoen 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:

const TAX_RATE = 0.08;

function calculateFinalPurchaseAmount(amt) { // calculate the new amount with the tax amt = amt + (amt * TAX_RATE);

// return the new amount return amt;}

La constante TAX_RATE (variable) es accesible desde dentro de la funcióncalculateFinalPurchaseAmount(...), aunque no la pasamos, debido al alcance.

Nota: Para obtener más información sobre el alcance de lenguaje, consulte los tres primeroscapí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 estecapítulo. Le daré los "requisitos", y tú lo intentas primero. A continuación, consulte el siguientelistado 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éncomprará accesorios para cada teléfono siempre y cuando la cantidad de su compra esté pordebajo 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, porejemplo. 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ácticaen 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 TAX_RATE = 0.08;const PHONE_PRICE = 99.99;const ACCESSORY_PRICE = 9.99;

var bank_balance = 303.91;var amount = 0;

function calculateTax(amount) { return amount * TAX_RATE;}

function formatAmount(amount) { return "$" + amount.toFixed( 2 );}

// keep buying phones while you still have moneywhile (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, tooamount = 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 dedesarrollo 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 concambiar 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 algunosconceptos básicos que usted necesita interiorizar.

Actúan como bloques de construcción. Para construir una torre alta, empiece primero colocando elbloque en la parte superior del bloque. Lo mismo ocurre con la programación. Éstos son algunosde 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 quesu 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 esa través de escribir código.

Estoy emocionado de que estés bien encaminado a aprender a codificar, ¡ahora!. Sigue así. Noolvides consultar otros recursos de programación para principiantes (libros, blogs, formaciónonline, 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 perspectivamás específica de JavaScript, que resaltará la mayoría de los temas principales que se tratan conmá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 sabersobre JavaScript para empezar a trabajar como desarrollador de JS.

Introduciremos bastantes conceptos en este capítulo que no serán explorados completamentehasta los libros subsecuentes de YDKJS. Usted puede pensar en este capítulo como una visióngeneral 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 losconceptos y ejemplos de código aquí varias veces. Cualquier buen cimiento es colocado ladrillo porladrillo, 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ú mismomientras 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 estaescritura (comúnmente referido como "ES6" para la sexta edición de ECMAScript -- el nombreoficial de la especificación JS). Si está usando un navegador anterior, pre-ES6, es posible que elcódigo no funcione. Debe utilizarse una actualización reciente de un navegador moderno (comoChrome, Firefox o IE).

Valores y Tipos

Como afirmamos en el Capítulo 1, JavaScript ha escrito valores, no variables. Están disponibles lossiguientes 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, buga = 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 deES6! - 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 delas apariencias, typeof a no está pidiendo el "tipo de a", sino más bien el "tipo del valoractualmente en a.". Sólo los valores tienen tipos en JavaScript; las variables son simplescontenedores 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áserrores!

También, note a = undefined. Estamos fijando explícitamente a al valor undefined, pero eso no esconductualmente diferente de una variable que todavía no tiene ningún valor fijado, como con vara; 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 eluso del operador void (vacío).

Objetos

El tipo objet se refiere a un valor compuesto en el que se pueden establecer propiedades (llámeseubicaciones) en las que cada uno de ellas tiene sus propios valores de cualquier tipo. Este es quizásuno 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;// 42obj.c;// true

obj["a"];// "hello world"obj["b"];// 42obj["c"];// true

Se puede acceder a las propiedades con notación de puntos (es decir, obj.a) o notación decorchetes (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, comoobj["hello world!"]. Estas propiedades suelen denominarse claves cuando se accede a ellasmediante la notación de corchetes. La notación [] requiere ya sea una variable (explicada acontinuació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 peroel 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 programasJavaScript: array y function. Pero en lugar de ser tipos incorporados apropiados, éstos debenpensarse 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 enpropiedades/claves, sino más bien en posiciones indexadas numéricamente. Por ejemplo:

var arr = [ "hello world", 42, true];arr[0];// "hello world"arr[1];// 42arr[2];// truearr.length;// 3typeof arr;// "object"

Nota: Los lenguajes que comienzan a contar a cero, como lo hace JS, usan 0 como la posición delprimer índice del array.

Debido a que los arrays son objetos especiales (como typeof muestra), también pueden tenerpropiedades, incluyendo la propiedad length automáticamente actualizada.

Teóricamente podría utilizar un array como un objeto normal con sus propias propiedadesnombradas, o podría usar un objeto pero sólo darle propiedades numéricas (0,1, etc.) similares aun array. Sin embargo, esto se consideraría generalmente como un uso inadecuado de los tiposrespectivos.

El mejor y más natural enfoque es el uso de arrays para valores numéricamente posicionados yusar 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 implicaque function es un tipo principal -- y por lo tanto puede tener propiedades, pero normalmentesó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ítuloTipos y gramática de esta serie.

Métodos de tipos incorporados

Los tipos y subtipos incorporados que acabamos de discutir tienen comportamientos expuestoscomo propiedades y métodos que son bastante poderosos y útiles.

Por ejemplo:

var a = "hello world";var b = 3.14159;

a.length; // 11a.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étodoexistente 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étodotoUpperCase() en su prototipo.

Cuando se usa un valor primitivo como "hello world" como un objet haciendo referencia a unapropiedad 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 unobjeto 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 delos valores -- prefiera las formas de valores primitivas en prácticamente todos los casos y JavaScriptse 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ítuloTipos y Gramática de esta serie. Para entender mejor el prototipo de un objeto, vea el Capítulo 5del 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 programasJS: igualdad y desigualdad. El resultado de cualquier comparación es un valor estrictamenteboolean (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 essimplemente que usted puede ver directamente en el código que una conversión de un tipo a otroocurre, mientras que la coerción implícita es cuando la conversión de tipo puede ocurrir como unefecto secundario no obvio de alguna otra operación.

Probablemente has escuchado sentimientos como "la coerción es malvada" que se derivan delhecho 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 sepueden construir con el tipo de coerción son bastante razonables y comprensibles, e incluso sepueden utilizar para mejorar la legibilidad de su código. Pero no iremos mucho más lejos en esedebate -- 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 losvalores: cuando un valor no booleano es coaccionado a un booleano, ¿se convierte en verdadero ofalso, 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 enrealidad es coercionada a un boolean. No es tan difícil confundirse con una situación que pareceestar 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 decaracterizarlos 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; // truea === b; // false

En la comparación a == b, JS nota que los tipos no coinciden, por lo que pasa por una serieordenada de pasos para coaccionar uno o ambos valores a un tipo diferente hasta que los tiposcoinciden, 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. Obien la comparación podría terminar en 42 == 42 o bien podría ser "42" == "42". Entonces, ¿cuáles?

La respuesta:"42" se convierte en 42, para hacer la comparación 42 == 42. En un ejemplo tansimple, no parece importar realmente qué camino toma ese proceso, ya que el resultado final es elmismo. Hay casos más complejos en los que importa no sólo cuál es el resultado final de lacomparación, sino cómo se llega allí.

La comparción a === b produce false, porque la coerción no está permitida, por lo que lacomparación de valores sencillos falla obviamente. Muchos desarrolladores creen que === es máspredecible, por lo que abogan por usar siempre ese formulario y mantenerse alejados de ==. Creoque esta visión es muy corta de miras. Creo que == es una herramienta poderosa que ayuda a suprograma, 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 losque 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á delo 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 siusar == 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 puedeestar 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 observacionesque 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 dosvalores no primitivos, como los objetos (incluyendo function y array). Debido a que esos valoresse mantienen realmente por referencia, tanto las comparaciones == como === simplementeverificará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 valorescon 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; // trueb == c; // truea == b; // false

Nota: Para obtener más información sobre las reglas de comparación == igualdad, véase laespecificación ES5 (sección 11.9.3) y consulte también el capítulo 4 del título Tipos y gramática deesta 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 comonú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 exactamenteidé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; // trueb < c; // true

¿Qué sucede aquí? En la sección 11.8.5 de la especificación ES5, se dice que si ambos valores en lacomparació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 ocurrecon a < b, entonces ambos valores son coaccionados para que sean números, y ocurre unacomparación numérica típica.

El problema más grande que se puede encontrar aquí con comparaciones entre tipos de valorespotencialmente 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; // falsea > b; // falsea == b; // false

Espera, ¿cómo pueden las tres comparaciones ser false? Porque el valor b está siendo coercionadoal "valor numérico inválido" NaN en las comparaciones < y >, y la especificación dice que NaN no es nimayor 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 lasección 11.8.5 de la especificación ES5 y consulte también el capítulo 4 del título Tipos y gramáticade esta serie.

Variables

En JavaScript, los nombres de variables (incluyendo nombres de función) deben ser identificadoresválidos. Las reglas estrictas y completas de caracteres válidos en los identificadores son un pococomplejas cuando se consideran caracteres no tradicionales como Unicode. Sin embargo, si sóloconsidera 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 esoscaracteres más los números 0 - 9.

Generalmente, las mismas reglas se aplican a un nombre de propiedad que a un identificador devariable. Sin embargo, ciertas palabras no pueden ser usadas como variables, pero están biencomo nombres de propiedad. Estas palabras se llaman "palabras reservadas" e incluyen laspalabras 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 deltí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, oel á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 atodo 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 porla 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()`

}console.log( a ); // 2

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. Esmucho más común y aceptado usar declaraciones de función alzada, como lo hacemos con lallamada 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 encualquier á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(); console.log( a ); // 1}

foo();

Note que c no está disponible dentro de la bar(), porque se declara sólo dentro del ámbito internobaz(), 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 unerror de referencia. Si intentas establecer una variable que no ha sido declarada, acabarás creandouna variable en el alcance global de nivel superior (¡malo!) u obtendrás un error, dependiendo del"modo estricto" (ver "Modo Estricto"). Echemos un vistazo:

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í hayotra 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 elbreak de un case y ese case coincide o se ejecuta, la ejecución continuará con las declaraciones delsiguiente 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 "operadorternario". Es como una forma más concisa de un sólo if...else declaración, como por ejemplo:

}}// this code is strict mode

Una diferencia clave (mejora!) con el modo estricto es que la declaración implícita de la variableauto-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 comportarsemal, su tentación podría ser evitar el modo estricto. Pero ese instinto sería una mala idea paracomplacerse. Si el modo estricto causa problemas en su programa, es casi seguro que es una señalde 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 sucódigo sea más optimizable, sino que también representa la dirección futura del lenguaje. Seríamá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 ygramá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. Esdecir, 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 parapensarlo. 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 cualquierotro 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 tieneninguna nombre.

La segunda expresión de la función se llamada bar, aunque también se asigna una referencia a lavariable x. Las expresiones de función nombradas son generalmente más preferibles, aunque lasexpresiones 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 sihubié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 comoexpresió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 lagramá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 lafunción referenciada inmediatamente antes de ella.

Eso puede parecer extraño, pero no es tan extraño como a primera vista. Considere las similitudesentre foo e IIFE aquí:

function foo() { .. }

// `foo` function reference expression,// then `()` executes itfoo();

// `IIFE` function expression,// then `()` executes it(function IIFE(){ .. })();

Como se puede ver, listar la (función IIFE (){... }) antes de su ejecución () es esencialmentelo mismo que incluir foo antes de su ejecución (); en ambos casos, la referencia de función seejecuta 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 unaIIFE de esta manera se utiliza a menudo para declarar variables que no afectarán al códigocircundante 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, enJavaScript. No lo cubriré con más detalle aquí, y en su lugar me referiré al título Alcance y cierres deesta serie. Pero quiero decir algunas cosas para que entienda el concepto general. Será una de lastécnicas más importantes en sus habilidades JS.

Se puede pensar en el cierre como una forma de "recordar" y continuar accediendo al alcance deuna 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 `add()` 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 `add(..)` interna con cierre sobreel parámetro `x` de`makeAdder(..)` externavar plusOne = makeAdder( 1 );

// `plusTen` obtiene una referencia a la función `add (..)` interna con cierresobre el parámetro `x` de `makeAdder(..)` externa.var plusTen = makeAdder( 10 );

plusOne( 3 ); // 4 <-- 1 + 3plusOne( 41 ); // 42 <-- 1 + 41plusTen( 13 ); // 23 <-- 10 + 13

Más información sobre cómo funciona este código:

Cuando llamamos makeAdder(1), obtenemos de nuevo una referencia a su interna add(...) que1.recuerda x como 1. Llamamos a esta referencia de función plusOne(...).Cuando llamamos makeAdder(10) obtenemos de nuevo otra referencia a su interna add(...)2.que recuerda x como 10. Llamamos a esta referencia de función plusTen(..).Cuando llamamos plusOne(3) se suman 3 (su interno y) al 1 (recordado por x) y se obtiene 43.como resultado.Cuando llamamos a plusTen(13) suma 13 (su interno y) a los 10 (recordado por x), y obtenemos4.23 como resultado.

No se preocupe si esto parece extraño y confuso al principio -- ¡puede serlo! Hará falta muchaprá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 laprogramación. Definitivamente vale la pena el esfuerzo de dejar que tu cerebro hierva a fuegolento en los cierres por un rato. En la próxima sección, tendremos un poco más de práctica con elcierre.

Módulos

El uso más común del cierre en JavaScript es el patrón de módulo. Los módulos le permiten definirdetalles 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:

Hay una buena posibilidad de que con sólo un breve vistazo al cierre y al patrón del módulo, algode esto siga siendo un poco confuso. ¡Eso está bien! Se necesita algo de trabajo para envolver tucerebro alrededor.

Desde aquí, vaya a leer el título de Scope & Closures de esta serie para una exploración mucho másprofunda.

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 unobject. 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áscomú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 esefragmento.

foo() establece this en el objeto global en modo no estricto -- en modo estricto, this sería1.

undefined y se obtendría un error al acceder a la propiedad bar -- entonces "global" es el valorencontradothis.bar.obj1.foo() fija thisen el objeto obj1.2.foo.call(obj2) ajusta this al objeto obj2.3.new foo() establece this en un objeto vacío nuevo.4.

Conclusión: para entender a qué apunta this, hay que examinar cómo se llamó a la función encuestión. Será una de esas cuatro formas que acabamos de mostrar, y eso luego responderá a loque es this.

Nota: Para obtener más información sobre this, consulte los capítulos 1 y 2 de this & ObjectPrototypes del título de esta serie de libros.

Prototipos

El mecanismo del prototipo en JavaScript es bastante complicado. Sólo le echaremos un vistazoaquí. Usted querrá pasar mucho tiempo revisando los capítulos 4-6 del título this & ObjectPrototypes para todos los detalles.

Cuando se hace referencia a una propiedad en un objeto, si esa propiedad no existe, JavaScriptutilizará automáticamente la referencia interna del prototipo de ese objeto para encontrar otroobjeto en el que buscar la propiedad. Usted podría pensar en esto casi como un remanente si lapropiedad está desaparecida.

El enlace de referencia interno del prototipo de un objeto a su respaldo ocurre en el momento enque se crea el objeto. La manera más simple de ilustrarlo es con una utilidad incorporada en ellenguage 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 estacaracterí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 decomportamiento," donde intencionalmente diseñas tus objetos vinculados para poder delegar deuno a otro partes del comportamiento necesarias.

Nota: Para obtener más información sobre prototipos y delegación de comportamiento, consultelos 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 lascaracterísticas cubiertas en el resto de esta serie, son adiciones más nuevas y no necesariamenteestarán disponibles en navegadores antiguos. De hecho, algunas de las funciones más nuevas de laespecificació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 todoslos navegadores antiguos se desvanezcan en la oscuridad?

Eso es lo que piensa una gran cantidad de personas, pero en realidad no es un enfoque saludablepara JS.

Hay dos técnicas principales que puede utilizar para "llevar" el material JavaScript más reciente alos 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 ladefinició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 unacomprobación precisa y no depreciando la utilidad original isNaN(...). Pero es fácil hacer polyfillde 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 yaexistirá. 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 deNaN 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 loscomportamientos pueden ser "polifillados", pero todavía hay pequeñas desviaciones. Usted debeser realmente muy cuidadoso en la implementación de un polyfill usted mismo, para asegurarse deque 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 losproporcionados 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 sintaxisarrojarí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 enequivalentes de código más antiguos. Este proceso es comúnmente llamado "transpiling", untérmino para transformar + compilar.

Esencialmente, su código fuente está escrito en la nueva forma de sintaxis, pero lo que usteddespliega en el navegador es el código transpiado en la antigua forma de sintaxis. Normalmente seinserta el transpilador en el proceso de construcción, similar al linter(validador) de código o elminificador de código.

Usted podría preguntarse por qué se tomaría la molestia de escribir una nueva sintaxis sólo paratenerla transportada a un código anterior -- ¿por qué no simplemente escribir el código anteriordirectamente?

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 debepreferir escribir sintaxis más nueva y limpia, no sólo para usted mismo sino para todos los demásmiembros 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 navegadorcon la nueva sintaxis. Esto también permite a los fabricantes de navegadores tener más códigodel 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 sedetectan lo suficientemente temprano, pueden ser cambiados o corregidos antes de que loserrores 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(); //2foo( 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 elcó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 sepuede transferir explícitamente para un parámetro de valor predeterminado es el indefinido, peroel código transpuesto lo hace mucho más claro.

El último detalle importante a destacar sobre los transpilers es que ahora deben ser consideradoscomo una parte estándar del ecosistema y proceso de desarrollo de JS. JS va a seguirevolucionando, mucho más rápido que antes, por lo que cada pocos meses meses se añadiránnuevas sintaxis y nuevas funciones.

Si utiliza un transpirador de forma predeterminada, siempre podrá cambiar a una sintaxis másnueva cuando lo encuentre útil, en lugar de esperar años para que los navegadores actuales dejende funcionar.

Hay bastantes grandes transpilers para que usted elija. Aquí están algunas buenas opciones en elmomento 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 lamayoría de JS está escrito para funcionar e interactuar con entornos como los navegadores. Unabuena 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. Noes 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 exactamenteeso. 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, peroes sólo una interfaz poco visible a un método incorporado proporcionado por el DOM de sunavegador. 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 navegadordel usuario. alerta(...) es proporcionada a su programa JS por el navegador, no por el propiomotor JS. La llamada que realiza envía el mensaje a los mecaismos internos del navegador ymaneja la presentación el cuadro de mensaje.

Lo mismo ocurre con console.log(..);, su navegador proporciona tales mecanismos y los conectaa las herramientas del desarrollador.

Este libro, y toda esta serie, se centra en el lenguaje JavaScript. Por eso es por lo que no vesninguna cobertura sustancial de estos mecanismos JavaScript "no JavaScript".

Sin embargo, usted necesita estar consciente de ellos, ya que estarán en cada programa JS queescriba!

Revisión

El primer paso para aprender el sabor de programación de JavaScript es obtener un entendimientobá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 havisto 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 estecapítulo, el resto de la serie te espera para que realmente entiendas y conozcas el lenguaje enprofundidad.

El capítulo final de este libro resumirá brevemente cada uno de los otros títulos de la serie y losotros 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 aprendertodas las partes de JavaScript, no sólo un subconjunto del lenguaje que alguien llamó "las partesbuenas", 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 otodos los idiomas en los que escriben principalmente, pero los desarrolladores de JS parecendiferenciarse de la multitud en el sentido de que típicamente no aprenden mucho del idioma. Estono 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 delaprendizaje de JS, y es diferente a casi cualquier otro libro de JS que usted pueda leer. Le desafía air más allá de su zona de comodidad y a hacer preguntas más profundas de "por qué" para cadauno 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 loslibros 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ómofunciona realmente el alcance de las variables en JavaScript. No basta con tener creenciasanecdóticas confusas sobre el alcance.

El título de Scope & Closures comienza por desacreditar el concepto erróneo común de que JS esun "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, utilizamosuna comprensión más profunda del enfoque del compilador de nuestro código para entendercómo encuentra y trata las declaraciones de variables y funciones. A lo largo del camino, vemos lametá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 delcierre(closure) para el último capítulo del libro. El cierre es quizás el concepto más importante entodo JS, pero si usted no ha captado primero con firmeza cómo funciona el alcance o ámbito, esprobable que el cierre permanezca fuera de su dominio.

Una aplicación importante del cierre es el patrón modular, tal como lo presentamos brevementeen este libro en el capítulo 2. El patrón de módulo es quizás el patrón de organización de códigomás frecuente en todo JavaScript; una de sus máximas prioridades debería ser la comprensiónprofunda del mismo.

this & Object Prototypes

Quizás una de las verdades erróneas más extendidas y persistentes sobre JavaScript es que lapalabra 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 encuestión, y resulta que hay cuatro reglas simples para entender y determinar completamente estavinculación.

Estrechamente relacionado con la palabra clave this se encuentra el mecanismo de prototipo deobjeto, que es una cadena de búsqueda de propiedades, similar a cómo se encuentra el alcance devariables. Pero envuelto en los prototipos está la otra gran equivocación sobre JS: la idea de emularclases (falsas) y herencia (llamada "prototipo").

Desafortunadamente, el deseo de llevar a JavaScript el pensamiento de patrones de diseño declase y herencia es lo peor que se puede intentar hacer, porque aunque la sintaxis puedeengañarte para que pienses que hay algo parecido a clases presentes, de hecho el mecanismo delprototipo 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 realmenteel sistema prototipo de objetos. Este último se denomina más adecuadamente "Delegación decomportamiento".

Esto es más que una preferencia sintáctica. La delegación es un patrón de diseño completamentediferente 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 yconferencia 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 unaaversión al lenguaje y su sintaxis, sino del deseo de ver potenciada la verdadera capacidad dellenguaje 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 complejoque 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" (Matrix1999) 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óntipográfica. Tal vez ningún tema causa más frustración con los desarrolladores de JS que cuando sehabla 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 lenguajey debe evitarse a toda costa. De hecho, algunos han llegado a llamarlo un "defecto" en el diseño dellenguaje. 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á condenadodesde el principio si lo usas?

Después de haber construido una comprensión de cómo funcionan realmente los tipos y valoresen los capítulos 1-3, el capítulo 4 aborda este debate y explica plenamente cómo funciona lacoerción, en todos sus rincones y grietas. Vemos qué partes de la coerción son realmentesorprendentes 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, estoyafirmando que la coerción es una herramienta increíblemente útil y totalmente subestimada quedeberí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 dudanseguramente se burlarán de tal posición, pero creo que es una de las claves principales paramejorar tu juego de JS.

¿Quiere usted simplemente seguir lo que la multitud dice, o está dispuesto a dejar de lado todas lassuposiciones y mirar la coerción con una perspectiva fresca? El título Types & Grammar de estaserie 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 cuartotítulo se ramifica ligeramente para cubrir patrones por encima de la mecánica del lenguaje paragestionar la programación asíncrona. La asincronía no sólo es crítica para el rendimiento denuestras aplicaciones, sino que se está convirtiendo cada vez más en el factor crítico para lacapacidad de escritura y mantenimiento.

El libro comienza primero aclarando una gran cantidad de terminología y confusión conceptual entorno a cosas como "asincronía","paralelo" y "concurrente", y explica en profundidad cómo estascosas se aplican y no se aplican a JS.

Luego pasamos a examinar las llamadas de retorno como el método primario para habilitar laasincronía. Pero es aquí donde rápidamente vemos que la llamada de respuesta por sí sola esdesesperadamente 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 ofControl (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 lepermite razonar y componer sin importar si el valor está listo o no todavía. Además, resuelveneficazmente los problemas de confianza IoC encaminando las llamadas de retorno a través de unmecanismo de promesa confiable y componible.

Los generadores introducen un nuevo modo de ejecución para las funciones JS, en el que elgenerador 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 enel generador se procese asincrónicamente entre bastidores. Haciendo esto, nos dirigimos a lasconfusiones no lineales, saltos no locales de las llamadas de retorno y por lo tanto hacemos quenuestro 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 decodificación asíncrono más efectivo hasta la fecha en JavaScript. De hecho, gran parte de lasofisticación futura de la asincronía que viene en ES7 y más tarde seguramente se construirá sobreesta base. Para ser serio sobre programación efectiva en un mundo asincrónico, vas a necesitarestar 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 programasfuncionar más simultáneamente y así obtener más procesamiento logrado en un período máscorto, 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 elparalelismo de datos con SIMD, así como técnicas de optimización de bajo nivel como ASM.js. Elcapítulo 6 examina la optimización del rendimiento desde la perspectiva de las técnicas debenchmarking adecuadas, incluyendo qué tipos de rendimiento preocuparse y qué ignorar.

Escribir JavaScript efectivamente significa escribir código que puede romper las barreras derestricció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 parallevar un programa de "funciona" a "funciona bien".

El título Async & Performance está diseñado para darle todas las herramientas y habilidades quenecesita 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 queJavaScript nunca va a dejar de evolucionar, y además, la tasa de evolución está aumentandorápidamente. Este hecho es casi una metáfora del espíritu de esta serie, para abrazar que nuncaconoceremos 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 laredacción de esta serie, que es a mitad de camino a través de la adopción de ES6, el enfoqueprincipal 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 comienzadividiendo el material concreto del paisaje de ES6 en varias categorías clave, incluyendo nuevassintaxis, 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 dedetalle, 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 pordefecto, símbolos, métodos concisos, propiedades calculadas, funciones de flecha, exploración debloques, promesas, generadores, iteradores, módulos, proxies, mapas débiles, y mucho, muchomá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 preparartepara el nuevo y mejorado JavaScript que estarás escribiendo y explorando en los próximos dosaños.

La última parte del libro se centra en las cosas que probablemente podemos esperar ver en elfuturo cercano de JavaScript. La realización más importante aquí es que post-ES6, JSprobablemente 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 antesde 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 debenaprender todas las partes de este gran lenguaje. La opinión de ninguna persona, las suposicionesde ningún marco, y la fecha límite del proyecto no deben ser la excusa por la que nunca se aprendey 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 muydenso para explorar a fondo todas las partes del mismo que tal vez usted pensó que conocía, peroprobablemente no completamente.

"You Don' t Know JS" no es una crítica o un insulto. Es una realización con la que todos nosotros, yomismo incluido, debemos llegar a un acuerdo. Aprender JavaScript no es un objetivo final, sino unproceso. Aún no sabemos JavaScript. ¡Pero lo haremos!

YOU DON’T KNOW JS – 01: UP & GOING - webkodeaprenda algunos conceptos básicos sobre el...

Documents

Transcript of YOU DON’T KNOW JS – 01: UP & GOING - webkodeaprenda algunos conceptos básicos sobre el...