JavaScript ( / ˈdʒ ɑː v ə s k r ɪ p t / ), a menudo abreviado como JS , es un lenguaje de programación y una tecnología central de la Web , junto con HTML y CSS . El 99% de los sitios web utilizan JavaScript en el lado del cliente para el comportamiento de la página web . [10]
Los navegadores web tienen un motor JavaScript dedicado que ejecuta el código del cliente . Estos motores también se utilizan en algunos servidores y en una variedad de aplicaciones . El sistema de ejecución más popular para uso sin navegador es Node.js.
JavaScript es un lenguaje de alto nivel , a menudo compilado justo a tiempo , que cumple con el estándar ECMAScript . [11] Tiene tipado dinámico , orientación a objetos basada en prototipos y funciones de primera clase . Es multiparadigma y admite estilos de programación basados en eventos , funcionales e imperativos . Tiene interfaces de programación de aplicaciones (API) para trabajar con texto, fechas, expresiones regulares , estructuras de datos estándar y el Modelo de objetos de documento (DOM).
El estándar ECMAScript no incluye ninguna función de entrada/salida (E/S), como funciones de red , almacenamiento o gráficos . En la práctica, el navegador web u otro sistema de ejecución proporciona API de JavaScript para E/S.
Aunque Java y JavaScript son similares en nombre, sintaxis y respectivas bibliotecas estándar , los dos lenguajes son distintos y difieren mucho en diseño.
El primer navegador web popular con una interfaz gráfica de usuario , Mosaic , fue lanzado en 1993. Accesible para personas sin conocimientos técnicos, jugó un papel destacado en el rápido crecimiento de la World Wide Web en sus inicios . [12] Los desarrolladores principales de Mosaic fundaron entonces la corporación Netscape , que lanzó un navegador más refinado, Netscape Navigator , en 1994. Éste se convirtió rápidamente en el más utilizado. [13]
Durante estos años de formación de la Web, las páginas web sólo podían ser estáticas, sin capacidad de comportamiento dinámico una vez que la página se cargaba en el navegador. En la floreciente escena del desarrollo web existía el deseo de eliminar esta limitación, por lo que en 1995, Netscape decidió añadir un lenguaje de programación a Navigator. Para lograrlo, siguieron dos caminos: colaboraron con Sun Microsystems para integrar el lenguaje Java y contrataron a Brendan Eich para integrar el lenguaje Scheme . [6]
El objetivo era un "lenguaje para las masas", [14] "para ayudar a los no programadores a crear sitios web dinámicos e interactivos ". [15] La dirección de Netscape pronto decidió que la mejor opción era que Eich ideara un nuevo lenguaje, con una sintaxis similar a Java y menos parecida a Scheme u otros lenguajes de scripting existentes . [5] [6] Aunque el nuevo lenguaje y su implementación de intérprete se llamaron LiveScript cuando se enviaron por primera vez como parte de una versión beta de Navigator en septiembre de 1995, el nombre se cambió a JavaScript para el lanzamiento oficial en diciembre. [6] [1] [16] [17]
La elección del nombre JavaScript ha causado confusión, ya que se ha dado a entender que está directamente relacionado con Java. En ese momento, el boom de las puntocom había comenzado y Java era un nuevo lenguaje popular, por lo que Eich consideró que el nombre JavaScript era una estrategia de marketing de Netscape. [14]
Microsoft lanzó Internet Explorer en 1995, lo que desencadenó una guerra de navegadores con Netscape. En el ámbito de JavaScript, Microsoft creó su propio intérprete llamado JScript . [18]
Microsoft lanzó por primera vez JScript en 1996, junto con el soporte inicial para CSS y extensiones para HTML . Cada una de estas implementaciones era notablemente diferente de sus contrapartes en Netscape Navigator . [19] [20] Estas diferencias dificultaban que los desarrolladores lograran que sus sitios web funcionaran bien en ambos navegadores, lo que llevó al uso generalizado de los logotipos "mejor visto en Netscape" y "mejor visto en Internet Explorer" durante varios años. [19] [21]
Brendan Eich dijo más tarde sobre este período: "Todavía es una especie de lenguaje secundario . Se considera lento o molesto. La gente hace ventanas emergentes o esos mensajes que se desplazan en la antigua barra de estado en la parte inferior de su viejo navegador ". [14]
En noviembre de 1996, Netscape presentó JavaScript a ECMA International como punto de partida para una especificación estándar a la que todos los proveedores de navegadores pudieran ajustarse. Esto llevó al lanzamiento oficial de la primera especificación del lenguaje ECMAScript en junio de 1997.
El proceso de normalización continuó durante algunos años, con el lanzamiento de ECMAScript 2 en junio de 1998 y ECMAScript 3 en diciembre de 1999. El trabajo en ECMAScript 4 comenzó en 2000. [18]
Sin embargo, el esfuerzo por estandarizar por completo el lenguaje se vio socavado por la creciente posición dominante de Microsoft en el mercado de navegadores. A principios de la década de 2000, la participación de mercado de Internet Explorer alcanzó el 95%. [22] Esto significó que JScript se convirtió en el estándar de facto para la creación de scripts del lado del cliente en la Web.
Microsoft participó inicialmente en el proceso de normalización e implementó algunas propuestas en su lenguaje JScript, pero finalmente dejó de colaborar en el trabajo de ECMA. Por ello, ECMAScript 4 quedó en desuso.
Durante el período de dominio de Internet Explorer a principios de la década de 2000, la creación de scripts del lado del cliente estaba estancada. Esto comenzó a cambiar en 2004, cuando el sucesor de Netscape, Mozilla , lanzó el navegador Firefox . Firefox fue bien recibido por muchos y le arrebató una importante cuota de mercado a Internet Explorer. [23]
En 2005, Mozilla se unió a ECMA International y comenzó a trabajar en el estándar ECMAScript para XML (E4X). Esto llevó a Mozilla a trabajar en conjunto con Macromedia (más tarde adquirida por Adobe Systems ), que estaba implementando E4X en su lenguaje ActionScript 3, que se basaba en un borrador de ECMAScript 4. El objetivo era estandarizar ActionScript 3 como el nuevo ECMAScript 4. Con este fin, Adobe Systems lanzó la implementación de Tamarin como un proyecto de código abierto . Sin embargo, Tamarin y ActionScript 3 eran demasiado diferentes de los scripts del lado del cliente establecidos y, sin la cooperación de Microsoft , ECMAScript 4 nunca llegó a concretarse.
Mientras tanto, se estaban produciendo avances muy importantes en comunidades de código abierto no afiliadas al trabajo de ECMA. En 2005, Jesse James Garrett publicó un libro blanco en el que acuñó el término Ajax y describió un conjunto de tecnologías, de las que JavaScript era la columna vertebral, para crear aplicaciones web en las que se pueden cargar datos en segundo plano, evitando la necesidad de recargar páginas completas. Esto desencadenó un período de renacimiento de JavaScript, encabezado por las bibliotecas de código abierto y las comunidades que se formaron en torno a ellas. Se crearon muchas bibliotecas nuevas, entre ellas jQuery , Prototype , Dojo Toolkit y MooTools .
Google lanzó su navegador Chrome en 2008, con el motor JavaScript V8 que era más rápido que su competencia. [24] [25] La innovación clave fue la compilación justo a tiempo (JIT), [26] por lo que otros proveedores de navegadores necesitaron revisar sus motores para JIT. [27]
En julio de 2008, estas partes dispares se reunieron en una conferencia en Oslo . Esto condujo a un acuerdo final a principios de 2009 para combinar todo el trabajo relevante e impulsar el lenguaje. El resultado fue el estándar ECMAScript 5, publicado en diciembre de 2009.
El ambicioso trabajo en el lenguaje continuó durante varios años, culminando en una extensa colección de adiciones y mejoras que se formalizaron con la publicación de ECMAScript 6 en 2015. [28]
La creación de Node.js en 2009 por Ryan Dahl provocó un aumento significativo en el uso de JavaScript fuera de los navegadores web. Node combina el motor V8 , un bucle de eventos y API de E/S , lo que proporciona un sistema de ejecución de JavaScript independiente. [29] [30] En 2018, millones de desarrolladores habían utilizado Node, [31] y npm tenía la mayor cantidad de módulos de cualquier administrador de paquetes del mundo. [32]
Actualmente, el borrador de la especificación de ECMAScript se mantiene abierto en GitHub [33] y las ediciones se producen mediante instantáneas anuales periódicas. [33] Las posibles revisiones del lenguaje se examinan mediante un proceso de propuesta exhaustivo. [34] [35] Ahora, en lugar de los números de edición, los desarrolladores verifican el estado de las próximas funciones de forma individual. [33]
El ecosistema actual de JavaScript tiene muchas bibliotecas y marcos , prácticas de programación establecidas y un uso sustancial de JavaScript fuera de los navegadores web. [17] Además, con el auge de las aplicaciones de una sola página y otros sitios web con mucho uso de JavaScript, se han creado varios transpiladores para ayudar al proceso de desarrollo. [36]
"JavaScript" es una marca registrada de Oracle Corporation en los Estados Unidos. [37] [38] La marca registrada fue otorgada originalmente a Sun Microsystems el 6 de mayo de 1997, y fue transferida a Oracle cuando adquirió Sun en 2009. [39]
JavaScript es el lenguaje de programación del lado del cliente dominante en la Web, y el 99% de todos los sitios web lo utilizan para este propósito. [10] Los scripts están incrustados o incluidos desde documentos HTML e interactúan con el DOM .
Todos los navegadores web principales tienen un motor JavaScript incorporado que ejecuta el código en el dispositivo del usuario.
Más del 80% de los sitios web utilizan una biblioteca de JavaScript o un marco web de terceros como parte de sus scripts del lado del cliente. [40]
jQuery es por lejos el más utilizado. [40] Otros notables incluyen Angular , Bootstrap , Lodash , Modernizr , React , Underscore y Vue . [40] Se pueden usar múltiples opciones en conjunto, como jQuery y Bootstrap. [41]
Sin embargo, el término "Vanilla JS" fue acuñado para sitios web que no utilizan ninguna biblioteca o marco, y que en su lugar dependen completamente de la funcionalidad estándar de JavaScript. [42]
El uso de JavaScript se ha expandido más allá de sus orígenes en los navegadores web . Los motores de JavaScript ahora están integrados en una variedad de otros sistemas de software, tanto para implementaciones de sitios web del lado del servidor como para aplicaciones que no son de navegador .
Los intentos iniciales de promover el uso de JavaScript del lado del servidor fueron Netscape Enterprise Server y los Servicios de Información de Internet de Microsoft , [43] [44] pero eran nichos pequeños. [45] El uso del lado del servidor finalmente comenzó a crecer a fines de la década de 2000, con la creación de Node.js y otros enfoques . [45]
Electron , Cordova , React Native y otros marcos de aplicaciones se han utilizado para crear muchas aplicaciones con comportamiento implementado en JavaScript. Otras aplicaciones que no son de navegador incluyen la compatibilidad con Adobe Acrobat para la creación de scripts de documentos PDF [46] y extensiones de GNOME Shell escritas en JavaScript. [47]
JavaScript se ha utilizado en algunos sistemas integrados , generalmente aprovechando Node.js. [48] [49] [50]
Un motor de JavaScript es un componente de software que ejecuta código JavaScript . Los primeros motores de JavaScript eran meros intérpretes , pero todos los motores modernos relevantes utilizan la compilación en tiempo real para mejorar el rendimiento. [51]
Los motores de JavaScript suelen ser desarrollados por los proveedores de navegadores web , y todos los navegadores importantes tienen uno. En un navegador, el motor de JavaScript se ejecuta en conjunto con el motor de renderizado a través del Modelo de objetos de documento y los enlaces IDL web . [52] Sin embargo, el uso de motores de JavaScript no se limita a los navegadores; por ejemplo, el motor V8 es un componente central del sistema de ejecución de Node.js. [53]
Dado que ECMAScript es la especificación estandarizada de JavaScript, el motor ECMAScript es otro nombre para estas implementaciones . Con la llegada de WebAssembly , algunos motores también pueden ejecutar este código en el mismo entorno de pruebas que el código JavaScript normal. [54] [53]Un motor de JavaScript debe estar integrado en un sistema de ejecución (como un navegador web o un sistema independiente) para permitir que los scripts interactúen con el entorno más amplio. El sistema de ejecución incluye las API necesarias para las operaciones de entrada/salida , como redes , almacenamiento y gráficos , y brinda la capacidad de importar scripts.
JavaScript es un lenguaje de un solo subproceso . El entorno de ejecución procesa los mensajes de una cola de uno en uno y llama a una función asociada con cada nuevo mensaje, creando un marco de pila de llamadas con los argumentos de la función y las variables locales . La pila de llamadas se reduce y crece según las necesidades de la función. Cuando la pila de llamadas está vacía tras la finalización de la función, JavaScript procede al siguiente mensaje de la cola. Esto se denomina bucle de eventos , descrito como "ejecutar hasta su finalización" porque cada mensaje se procesa por completo antes de que se considere el siguiente mensaje. Sin embargo, el modelo de concurrencia del lenguaje describe el bucle de eventos como no bloqueante : la E/S del programa se realiza utilizando eventos y funciones de devolución de llamada . Esto significa, por ejemplo, que JavaScript puede procesar un clic del ratón mientras espera que una consulta de base de datos devuelva información. [55]
Los entornos de ejecución independientes notables son Node.js , Deno y Bun .
Las siguientes características son comunes a todas las implementaciones de ECMAScript conformes a menos que se especifique explícitamente lo contrario.
JavaScript admite gran parte de la sintaxis de programación estructurada de C (por ejemplo, ifdeclaraciones, whilebucles, switchsentencias, do whilebucles, etc.). Una excepción parcial es el alcance : originalmente, JavaScript solo tenía alcance de función con var; el alcance de bloque se agregó en ECMAScript 2015 con las palabras clave lety const. Al igual que C, JavaScript hace una distinción entre expresiones y declaraciones . Una diferencia sintáctica con C es la inserción automática de punto y coma , que permite omitir los puntos y coma (que terminan las declaraciones). [56]
JavaScript está tipado débilmente , lo que significa que ciertos tipos se convierten implícitamente dependiendo de la operación utilizada. [57]
+convierte ambos operandos en una cadena a menos que ambos sean números. Esto se debe a que el operador de suma también funciona como operador de concatenación.-siempre convierte ambos operandos en un número+, -) siempre convierten el operando a un númeroLos valores se convierten en cadenas como la siguiente: [57]
,)[object Object]donde Objectes el nombre del constructor del objeto.Los valores se convierten en números mediante la conversión a cadenas y luego la conversión de las cadenas a números. Estos procesos se pueden modificar definiendo funciones toStringy valueOfen el prototipo para la conversión a cadenas y números respectivamente.
JavaScript ha recibido críticas por la forma en que implementa estas conversiones, ya que la complejidad de las reglas puede confundirse con inconsistencia. [58] [57] Por ejemplo, al agregar un número a una cadena, el número se convertirá en una cadena antes de realizar la concatenación, pero al restar un número de una cadena, la cadena se convierte en un número antes de realizar la resta.
A menudo también se menciona que {} + []resulta en 0(número). Esto es engañoso: {}se interpreta como un bloque de código vacío en lugar de un objeto vacío, y la matriz vacía se convierte en un número mediante el +operador unario restante. Si la expresión está envuelta entre paréntesis - ({} + [])- las llaves se interpretan como un objeto vacío y el resultado de la expresión es "[object Object]"el esperado. [57]
JavaScript tiene tipos dinámicos como la mayoría de los demás lenguajes de programación . Un tipo se asocia a un valor en lugar de a una expresión. Por ejemplo, una variable inicialmente vinculada a un número puede reasignarse a una cadena . [59] JavaScript admite varias formas de probar el tipo de objetos, incluido el tipado dinámico . [60]
JavaScript incluye una evalfunción que puede ejecutar declaraciones proporcionadas como cadenas en tiempo de ejecución.
Douglas Crockford describe la herencia prototípica en JavaScript de la siguiente manera:
Creas objetos prototipo y luego... creas nuevas instancias. Los objetos son mutables en JavaScript, por lo que podemos aumentar las nuevas instancias, dándoles nuevos campos y métodos. Estos pueden actuar como prototipos para objetos aún más nuevos. No necesitamos clases para crear muchos objetos similares... Los objetos heredan de los objetos. ¿Qué podría ser más orientado a objetos que eso? [61]
En JavaScript, un objeto es una matriz asociativa , aumentada con un prototipo (ver más abajo); cada clave proporciona el nombre de una propiedad del objeto , y hay dos formas sintácticas de especificar dicho nombre: notación de punto ( obj.x = 10) y notación de corchetes ( obj['x'] = 10). Una propiedad se puede agregar, volver a enlazar o eliminar en tiempo de ejecución. La mayoría de las propiedades de un objeto (y cualquier propiedad que pertenezca a la cadena de herencia del prototipo de un objeto) se pueden enumerar mediante un for...inbucle.
JavaScript utiliza prototipos donde muchos otros lenguajes orientados a objetos utilizan clases para la herencia . [62] Es posible simular muchas características basadas en clases con prototipos en JavaScript. [63]
Las funciones también funcionan como constructores de objetos, junto con su función típica. Si se antepone una llamada de función con new se creará una instancia de un prototipo, heredando propiedades y métodos del constructor (incluidas las propiedades del Objectprototipo). [64] ECMAScript 5 ofrece el Object.createmétodo, lo que permite la creación explícita de una instancia sin heredar automáticamente del Objectprototipo (los entornos más antiguos pueden asignar el prototipo a null). [65] La propiedad del constructor prototypedetermina el objeto utilizado para el prototipo interno del nuevo objeto. Se pueden agregar nuevos métodos modificando el prototipo de la función utilizada como constructor. Los constructores integrados de JavaScript, como Arrayo Object, también tienen prototipos que se pueden modificar. Si bien es posible modificar el Objectprototipo, generalmente se considera una mala práctica porque la mayoría de los objetos en JavaScript heredarán métodos y propiedades del Objectprototipo, y es posible que no esperen que se modifique el prototipo. [66]
A diferencia de muchos lenguajes orientados a objetos, en JavaScript no existe distinción entre una definición de función y una definición de método . En cambio, la distinción se produce durante la llamada a una función. Cuando se llama a una función como método de un objeto, la palabra clave this local de la función se vincula a ese objeto para esa invocación.
Las funciones de JavaScript son de primera clase ; una función se considera un objeto. [67] Como tal, una función puede tener propiedades y métodos, como .call()y .bind(). [68]
Una función anidada es una función definida dentro de otra función. Se crea cada vez que se invoca la función externa.
Además, cada función anidada forma un cierre léxico : el alcance léxico de la función externa (incluyendo cualquier constante, variable local o valor de argumento) se convierte en parte del estado interno de cada objeto de función interna, incluso después de que concluya la ejecución de la función externa. [69]
JavaScript también admite funciones anónimas .
JavaScript admite la delegación implícita y explícita .
JavaScript admite de forma nativa varias implementaciones basadas en funciones de patrones Role [70] como Traits [71] [72] y Mixins [73] . Una función de este tipo define un comportamiento adicional mediante al menos un método vinculado a la thispalabra clave dentro de su functioncuerpo. Luego, un Role debe delegarse explícitamente a través de callo applyhacia objetos que necesitan presentar un comportamiento adicional que no se comparte a través de la cadena de prototipos.
Mientras que la delegación explícita basada en funciones cubre la composición en JavaScript, la delegación implícita ya ocurre cada vez que se recorre la cadena de prototipos para, por ejemplo, encontrar un método que podría estar relacionado con un objeto pero que no es propiedad directa de este. Una vez que se encuentra el método, se lo llama dentro del contexto de este objeto. Por lo tanto, la herencia en JavaScript está cubierta por un automatismo de delegación que está vinculado a la propiedad de prototipo de las funciones constructoras.
JavaScript es un lenguaje de índice cero .
Se puede pasar una cantidad indefinida de parámetros a una función. La función puede acceder a ellos a través de parámetros formalesarguments y también a través del objeto local . También se pueden crear funciones variádicas utilizando el bindmétodo.
Al igual que en muchos lenguajes de programación, las matrices y los objetos ( matrices asociativas en otros lenguajes) se pueden crear con una sintaxis abreviada y concisa. De hecho, estos literales forman la base del formato de datos JSON .
De manera similar a Perl , JavaScript también admite expresiones regulares , que proporcionan una sintaxis concisa y poderosa para la manipulación de texto que es más sofisticada que las funciones de cadena integradas. [74]
JavaScript admite promesas y Async/await para gestionar operaciones asincrónicas. [ cita requerida ]
Un objeto Promise integrado proporciona funcionalidad para manejar promesas y asociar controladores con el resultado final de una acción asincrónica. Recientemente, la especificación de JavaScript introdujo métodos combinadores, que permiten a los desarrolladores combinar múltiples promesas de JavaScript y realizar operaciones basadas en diferentes escenarios. Los métodos introducidos son: Promise.race, Promise.all, Promise.allSettled y Promise.any.
Async/await permite estructurar una función asincrónica y no bloqueante de forma similar a una función sincrónica normal. Se puede escribir código asincrónico y no bloqueante, con una sobrecarga mínima, estructurado de forma similar al código sincrónico y bloqueante tradicional.
Históricamente, algunos motores de JavaScript admitían estas características no estándar:
catch(como Java)function(args) expr; esta sintaxis experimental es anterior a las funciones de flecha)Las variables en JavaScript se pueden definir utilizando las palabras claves var, [76] let[77] o const[78] . Las variables definidas sin palabras clave se definirán en el ámbito global.
// Declara una variable con alcance de función denominada `x` y le asigna implícitamente el valor especial `undefined`. Las variables sin valor se establecen automáticamente como undefined. // var generalmente se considera una mala práctica y let y const suelen ser las preferidas. var x ; // Las variables se pueden establecer manualmente como "indefinidas" de la siguiente manera: let x2 = undefined ; // Declara una variable de ámbito de bloque denominada `y` y la establece implícitamente como `undefined`. La palabra clave `let` se introdujo en ECMAScript 2015. let y ; // Declara una variable no reasignable y con alcance de bloque denominada `z` y la establece como // un literal de cadena. La palabra clave `const` también se introdujo en ECMAScript 2015, // y debe asignarse explícitamente.// La palabra clave `const` significa constante, por lo tanto, la variable no se puede reasignar // ya que el valor es `const`. const z = "¡este valor no se puede reasignar!" ; // Declara una variable de ámbito global y asigna 3. Esto generalmente se considera una mala práctica y no funcionará si el modo estricto está activado. t = 3 ; // Declara una variable llamada `myNumber` y le asigna un literal numérico (el valor `2`). let myNumber = 2 ; // Reasigna `myNumber`, estableciéndolo en un literal de cadena (el valor `"foo"`). // JavaScript es un lenguaje tipado dinámicamente, por lo que esto es legal. myNumber = "foo" ; Tenga en cuenta los comentarios en los ejemplos anteriores, todos los cuales fueron precedidos por dos barras diagonales .
En JavaScript no existe una funcionalidad de entrada/salida incorporada , sino que la proporciona el entorno de ejecución. La especificación ECMAScript en la edición 5.1 menciona que "no existen disposiciones en esta especificación para la entrada de datos externos o la salida de resultados calculados". [79]
Sin embargo, la mayoría de los entornos de ejecución tienen un consoleobjeto que se puede utilizar para imprimir la salida. [80] A continuación se muestra un programa minimalista "¡Hola, mundo!" en JavaScript en un entorno de ejecución con un objeto de consola:
consola . log ( "¡Hola, mundo!" );En documentos HTML, se requiere un programa como este para obtener una salida:
// Los nodos de texto se pueden crear usando el método "write". // Esto está mal visto, ya que puede sobrescribir el documento si este está completamente cargado. document . write ( 'foo' );// También se pueden crear elementos. Primero, se deben crear en el DOM. const myElem = document . createElement ( 'span' ); // También se pueden configurar atributos como las clases y el id myElem . classList . add ( 'foo' ); myElem . id = 'bar' ; // Después de configurar esto, la etiqueta se verá así: `<span class="foo" id="bar" data-attr="baz"></span>` myElem . setAttribute ( 'data-attr' , 'baz' ); // Que también podría escribirse como `myElem.dataset.attr = 'baz'` // Finalmente , añádelo como un elemento secundario al <body> en el documento HTML . body.appendChild ( myElem );// Los elementos se pueden capturar de forma imperativa con querySelector para un elemento, o con querySelectorAll para múltiples elementos que se pueden repetir con forEach document . querySelector ( '.class' ); // Selecciona el primer elemento con la clase "class" document . querySelector ( '#id' ); // Selecciona el primer elemento con un `id` de "id" document . querySelector ( '[data-other]' ); // Selecciona el primer elemento con el atributo "data-other" document . querySelectorAll ( '.multiple' ); // Devuelve una NodeList similar a una matriz de todos los elementos con la clase "multiple" Una función recursiva simple para calcular el factorial de un número natural :
function factorial ( n ) { // Comprobando la legitimidad del argumento. Factorial está definido para números enteros positivos. if ( isNaN ( n )) { console.error ( " Argumento no numérico no permitido." ); return NaN ; // El valor especial: No es un número } if ( n === 0 ) return 1 ; // 0! = 1 if ( n < 0 ) return undefined ; // El factorial de números negativos no está definido. if ( n % 1 ) { console.warn ( ` ${ n } se redondeará al entero más cercano. Para números no enteros, considere usar la función gamma en su lugar.` ) ; n = Math.round ( n ) ; } // No es necesario repetir las comprobaciones anteriores en la recursión, por lo que se define la parte recursiva real por separado a continuación. // La siguiente línea es una expresión de función para calcular recursivamente el factorial. Utiliza la sintaxis de flecha introducida en ES6. const recursivelyCompute = a => a > 1 ? a * recursivelyCompute ( a - 1 ) : 1 ; // Nótese el uso del operador ternario `?`. return recursivelyCompute ( n ); } factorial ( 3 ); // Devuelve 6 Una función anónima (o lambda):
const contador = funcion () { dejar contar = 0 ; devolver función () { devolver ++ contar ; } }; const x = counter (); x (); // Devuelve 1 x (); // Devuelve 2 x (); // Devuelve 3 Este ejemplo muestra que, en JavaScript, los cierres de funciones capturan sus variables no locales por referencia.
Las funciones de flecha se introdujeron por primera vez en la sexta edición: ECMAScript 2015. Acortan la sintaxis para escribir funciones en JavaScript. Las funciones de flecha son anónimas, por lo que se necesita una variable para hacer referencia a ellas a fin de invocarlas después de su creación, a menos que estén rodeadas por paréntesis y se ejecuten inmediatamente.
Ejemplo de función de flecha:
// Las funciones de flecha nos permiten omitir la palabra clave `function`. // Aquí `long_example` apunta a un valor de función anónimo. const long_example = ( input1 , input2 ) => { console . log ( "Hola, mundo!" ); const output = input1 + input2 ; retorna salida ; }; // Si no hay llaves, la función de flecha simplemente devuelve la expresión // Entonces aquí es (input1 + input2) const short_example = ( input1 , input2 ) => input1 + input2 ; long_example ( 2 , 3 ); // Imprime "¡Hola, mundo!" y devuelve 5 short_example ( 2 , 5 ); // Devuelve 7 // Si una función de flecha tiene solo un parámetro, se pueden eliminar los paréntesis. const no_parentheses = input => input + 2 ; sin_paréntesis ( 3 ); // Devuelve 5 // Una función de flecha, al igual que otras definiciones de funciones, se puede ejecutar en la misma declaración en la que se crea. // Esto es útil al escribir bibliotecas para evitar llenar el alcance global y para cierres. let three = (( a , b ) => a + b ) ( 1 , 2 ); const generate_multiplier_function = a => ( b => isNaN ( b ) || ! b ? a : a *= b ); const five_multiples = generate_multiplier_function ( 5 ); // El argumento suministrado "sembra" la expresión y es retenido por a. five_multiples ( 1 ); // Devuelve 5 five_multiples ( 3 ); // Devuelve 15 five_multiples ( 4 ); // Devuelve 60 En JavaScript, los objetos se pueden crear como instancias de una clase .
Ejemplo de clase de objeto:
clase Bola { constructor ( radio ) { este . radio = radio ; este . área = Math . PI * ( radio ** 2 ); } // Las clases (y por lo tanto los objetos) pueden contener funciones conocidas como métodos show () { console . log ( this . radius ); } }; const myBall = new Ball ( 5 ); // Crea una nueva instancia del objeto bola con radio 5 myBall . radius ++ ; // Las propiedades del objeto normalmente se pueden modificar desde el exterior myBall . show (); // Usando la función "show" heredada registra "6" En JavaScript, los objetos se pueden instanciar directamente desde una función.
Ejemplo funcional de objeto:
función Bola ( radio ) { const área = Math . PI * ( radio ** 2 ); const obj = { radio , área }; // Los objetos son mutables y se pueden agregar funciones como propiedades. obj . show = () => console . log ( obj . radius ); return obj ; }; const myBall = Ball ( 5 ); // Crea un nuevo objeto de bola con un radio de 5. No se necesita la palabra clave "new". myBall . radius ++ ; // La propiedad de instancia se puede modificar. myBall . show (); // El uso de la función "show" registra "6" - el nuevo valor de instancia. Demostración de función variádica (es una variablearguments especial ): [81]
función suma () { sea x = 0 ; para ( sea i = 0 ; i < argumentos . longitud ; ++ i ) x += argumentos [ i ]; devolver x ; } suma ( 1 , 2 ); // Devuelve 3 suma ( 1 , 2 , 3 ); // Devuelve 6 // A partir de ES6, se utiliza el operador rest. function suma (... args ) { return args . reduce (( a , b ) => a + b ); } suma ( 1 , 2 ); // Devuelve 3 suma ( 1 , 2 , 3 ); // Devuelve 6 Las expresiones de función invocadas inmediatamente se utilizan a menudo para crear cierres. Los cierres permiten reunir propiedades y métodos en un espacio de nombres y hacer que algunos de ellos sean privados:
deje que el contador = ( función () { deje que i = 0 ; // Propiedad privada return { // Métodos públicos get : function () { alert ( i ); }, set : function ( valor ) { i = valor ; }, increment : function () { alert ( ++ i ); } }; })(); // Módulo contador.get (); // Devuelve 0 contador.set ( ) ; contador.incremento ( ) ; // Devuelve 7 contador.incremento ( ) ; // Devuelve 8 Los objetos generadores (en forma de funciones generadoras) proporcionan una función que se puede llamar, salir y volver a ingresar manteniendo el contexto interno (estado). [82]
función * rawCounter () { rendimiento 1 ; rendimiento 2 ; } función * dynamicCounter () { let count = 0 ; while ( true ) { // No se recomienda utilizar bucles while true en la mayoría de los casos. yield ++ count ; } } // Instancias const counter1 = rawCounter (); const counter2 = dynamicCounter (); // Implementación counter1 . next (); // {valor: 1, hecho: falso} counter1 . next (); // {valor: 2, hecho: falso} counter1 . next (); // {valor: indefinido, hecho: verdadero} contador2 . siguiente (); // {valor: 1, hecho: falso} contador2 . siguiente (); // {valor: 2, hecho: falso} contador2 . siguiente (); // {valor: 3, hecho: falso} // ...infinitamente JavaScript puede exportar e importar desde módulos: [83]
Ejemplo de exportación:
/* mymodule.js */ // Esta función permanece privada, ya que no se exporta let sum = ( a , b ) => { return a + b ; } // Exportar variables export let name = 'Alice' ; export let age = 23 ; // Exportar funciones nombradas export function add ( num1 , num2 ) { return num1 + num2 ; } // Exportar clase exportar clase Multiplicación { constructor ( num1 , num2 ) { this . num1 = num1 ; this . num2 = num2 ; } agregar ( ) { devolver suma ( este.num1 , este.num2 ) ; } } Ejemplo de importación:
// Importar una propiedad import { add } from './mymodule.js' ; console . log ( add ( 1 , 2 )); //> 3 // Importar múltiples propiedades import { name , age } from './mymodule.js' ; console . log ( name , age ); // "Alice", 23 // Importar todas las propiedades de un módulo import * from './module.js' console.log ( name , age ) ; // > "Alice", 23 console.log ( add ( 1,2 ) ); // > 3 Este código de muestra muestra varias funciones de JavaScript.
/* Encuentra el mínimo común múltiplo (MCM) de dos números */ function LCMCalculator ( x , y ) { // función constructora if ( isNaN ( x * y )) throw new TypeError ( "No se permiten argumentos no numéricos." ); const checkInt = function ( x ) { // función interna if ( x % 1 !== 0 ) throw new TypeError ( x + "no es un entero" ); devolver x ; }; this . a = checkInt ( x ) // los puntos y comas ^^^^ son opcionales, una nueva línea es suficiente this . b = checkInt ( y ); } // El prototipo de las instancias de objeto creadas por un constructor es // la propiedad "prototipo" de ese constructor. LCMCalculator . prototipo = { // literal de objeto constructor : LCMCalculator , // al reasignar un prototipo, establezca la propiedad del constructor apropiadamente gcd : function () { // método que calcula el máximo común divisor // Algoritmo euclidiano: let a = Math . abs ( this . a ), b = Math . abs ( this . b ), t ; if ( a < b ) { // intercambiar variables // t = b; b = a; a = t; [ a , b ] = [ b , a ]; // intercambiar usando asignación de desestructuración (ES6) } mientras ( b !== 0 ) { t = b ; b = a % b ; a = t ; } // Solo es necesario calcular MCD una vez, por lo que "redefine" este método. // (En realidad no es una redefinición; se define en la instancia misma, // de modo que this.gcd se refiere a esta "redefinición" en lugar de LCMCalculator.prototype.gcd. // Ten en cuenta que esto genera un resultado incorrecto si los miembros del objeto LCMCalculator "a" o "b" se modifican posteriormente). // Además, 'gcd' === "gcd", this['gcd'] === this.gcd this [ 'gcd' ] = function () { return a ; }; devuelve un ; }, // Los nombres de propiedades de objetos se pueden especificar mediante cadenas delimitadas por comillas dobles (") o simples ('). "lcm" : function () { // Los nombres de variables no entran en conflicto con las propiedades de los objetos, por ejemplo, |lcm| no es |this.lcm|. // no usar |this.a*this.b| para evitar problemas de precisión de FP let lcm = this . a / this . gcd () * this . b ; // Solo es necesario calcular mcm una vez, por lo que "redefine" este método. this . lcm = function () { return mcm ; }; devolver mcm ; }, // Los métodos también se pueden declarar usando la sintaxis ES6 toString () { // Usando literales de plantilla ES6 y el operador (+) para concatenar valores return `LCMCalculator: a = ${ this . a } , b = ` + this . b ; } }; // Define una función de salida genérica; esta implementación solo funciona para navegadores web function output ( x ) { document . body . appendChild ( document . createTextNode ( x )); document . body . appendChild ( document . createElement ( 'br' )); } // Nota: map() y forEach() de Array se definen en JavaScript 1.6. // Se utilizan aquí para demostrar la naturaleza funcional inherente de JavaScript. [ [ 25 , 55 ], [ 21 , 56 ], [ 22 , 58 ], [ 28 , 56 ] ]. map ( function ( pair ) { // literal de array + función de mapeo return new LCMCalculator ( pair [ 0 ], pair [ 1 ] ); }). sort (( a , b ) => a.lcm () - b.lcm ( )) // ordenar con esta función comparativa; => es una forma abreviada de una función, llamada "función de flecha" . forEach ( printResult ) ; función printResult ( obj ) { salida ( obj + ", gcd = " + obj.gcd ( ) + " , mcm = " + obj.lcm ( )); } La siguiente salida debería mostrarse en la ventana del navegador.
CalculadoraMCM: a = 28, b = 56, mcd = 28, mcm = 56 CalculadoraMCM: a = 21, b = 56, mcd = 7, mcm = 168 CalculadoraMCM: a = 25, b = 55, mcd = 5, mcm = 275 CalculadoraMCM: a = 22, b = 58, mcd = 2, mcm = 638JavaScript y el DOM ofrecen a los autores malintencionados la posibilidad de enviar secuencias de comandos para que se ejecuten en un equipo cliente a través de la Web. Los autores de navegadores minimizan este riesgo mediante dos restricciones. En primer lugar, las secuencias de comandos se ejecutan en un entorno aislado en el que solo pueden realizar acciones relacionadas con la Web, no tareas de programación de propósito general como la creación de archivos. En segundo lugar, las secuencias de comandos están limitadas por la política del mismo origen : las secuencias de comandos de un sitio web no tienen acceso a información como nombres de usuario, contraseñas o cookies enviadas a otro sitio. La mayoría de los errores de seguridad relacionados con JavaScript son infracciones de la política del mismo origen o del entorno aislado.
Existen subconjuntos de JavaScript general (ADsafe, Secure ECMAScript (SES)) que proporcionan mayores niveles de seguridad, especialmente en código creado por terceros (como anuncios). [84] [85] Closure Toolkit es otro proyecto para la integración y el aislamiento seguros de JavaScript y HTML de terceros. [86]
Content Security Policy is the main intended method of ensuring that only trusted code is executed on a Web page.
A common JavaScript-related security problem is cross-site scripting (XSS), a violation of the same-origin policy. XSS vulnerabilities occur when an attacker can cause a target Website, such as an online banking website, to include a malicious script in the webpage presented to a victim. The script in this example can then access the banking application with the privileges of the victim, potentially disclosing secret information or transferring money without the victim's authorization. One important solution to XSS vulnerabilities is HTML sanitization.
Some browsers include partial protection against reflected XSS attacks, in which the attacker provides a URL including malicious script. However, even users of those browsers are vulnerable to other XSS attacks, such as those where the malicious code is stored in a database. Only correct design of Web applications on the server-side can fully prevent XSS.
XSS vulnerabilities can also occur because of implementation mistakes by browser authors.[87]
Another cross-site vulnerability is cross-site request forgery (CSRF). In CSRF, code on an attacker's site tricks the victim's browser into taking actions the user did not intend at a target site (like transferring money at a bank). When target sites rely solely on cookies for request authentication, requests originating from code on the attacker's site can carry the same valid login credentials of the initiating user. In general, the solution to CSRF is to require an authentication value in a hidden form field, and not only in the cookies, to authenticate any request that might have lasting effects. Checking the HTTP Referrer header can also help.
"JavaScript hijacking" is a type of CSRF attack in which a <script> tag on an attacker's site exploits a page on the victim's site that returns private information such as JSON or JavaScript. Possible solutions include:
Developers of client-server applications must recognize that untrusted clients may be under the control of attackers. The application author cannot assume that their JavaScript code will run as intended (or at all) because any secret embedded in the code could be extracted by a determined adversary. Some implications are:
Package management systems such as npm and Bower are popular with JavaScript developers. Such systems allow a developer to easily manage their program's dependencies upon other developers' program libraries. Developers trust that the maintainers of the libraries will keep them secure and up to date, but that is not always the case. A vulnerability has emerged because of this blind trust. Relied-upon libraries can have new releases that cause bugs or vulnerabilities to appear in all programs that rely upon the libraries. Inversely, a library can go unpatched with known vulnerabilities out in the wild. In a study done looking over a sample of 133,000 websites, researchers found 37% of the websites included a library with at least one known vulnerability.[90] "The median lag between the oldest library version used on each website and the newest available version of that library is 1,177 days in ALEXA, and development of some libraries still in active use ceased years ago."[90] Another possibility is that the maintainer of a library may remove the library entirely. This occurred in March 2016 when Azer Koçulu removed his repository from npm. This caused tens of thousands of programs and websites depending upon his libraries to break.[91][92]
JavaScript provides an interface to a wide range of browser capabilities, some of which may have flaws such as buffer overflows. These flaws can allow attackers to write scripts that would run any code they wish on the user's system. This code is not by any means limited to another JavaScript application. For example, a buffer overrun exploit can allow an attacker to gain access to the operating system's API with superuser privileges.
These flaws have affected major browsers including Firefox,[93] Internet Explorer,[94] and Safari.[95]
Plugins, such as video players, Adobe Flash, and the wide range of ActiveX controls enabled by default in Microsoft Internet Explorer, may also have flaws exploitable via JavaScript (such flaws have been exploited in the past).[96][97]
In Windows Vista, Microsoft has attempted to contain the risks of bugs such as buffer overflows by running the Internet Explorer process with limited privileges.[98] Google Chrome similarly confines its page renderers to their own "sandbox".
Web browsers are capable of running JavaScript outside the sandbox, with the privileges necessary to, for example, create or delete files. Such privileges are not intended to be granted to code from the Web.
Incorrectly granting privileges to JavaScript from the Web has played a role in vulnerabilities in both Internet Explorer[99] and Firefox.[100] In Windows XP Service Pack 2, Microsoft demoted JScript's privileges in Internet Explorer.[101]
Microsoft Windows allows JavaScript source files on a computer's hard drive to be launched as general-purpose, non-sandboxed programs (see: Windows Script Host). This makes JavaScript (like VBScript) a theoretically viable vector for a Trojan horse, although JavaScript Trojan horses are uncommon in practice.[102][failed verification]
In 2015, a JavaScript-based proof-of-concept implementation of a rowhammer attack was described in a paper by security researchers.[103][104][105][106]
In 2017, a JavaScript-based attack via browser was demonstrated that could bypass ASLR. It is called "ASLR⊕Cache" or AnC.[107][108]
In 2018, the paper that announced the Spectre attacks against Speculative Execution in Intel and other processors included a JavaScript implementation.[109]
Important tools have evolved with the language.
A common misconception is that JavaScript is directly related to Java. Both indeed have a C-like syntax (the C language being their most immediate common ancestor language). They are also typically sandboxed, and JavaScript was designed with Java's syntax and standard library in mind. In particular, all Java keywords were reserved in original JavaScript, JavaScript's standard library follows Java's naming conventions, and JavaScript's Math and Date objects are based on classes from Java 1.0.[112]
Both languages first appeared in 1995, but Java was developed by James Gosling of Sun Microsystems and JavaScript by Brendan Eich of Netscape Communications.
The differences between the two languages are more prominent than their similarities. Java has static typing, while JavaScript's typing is dynamic. Java is loaded from compiled bytecode, while JavaScript is loaded as human-readable source code. Java's objects are class-based, while JavaScript's are prototype-based. Finally, Java did not support functional programming until Java 8, while JavaScript has done so from the beginning, being influenced by Scheme.
JSON is a data format derived from JavaScript; hence the name JavaScript Object Notation. It is a widely used format supported by many other programming languages.
Many websites are JavaScript-heavy, so transpilers have been created to convert code written in other languages, which can aid the development process.[36]
TypeScript and CoffeeScript are two notable languages that transpile to JavaScript.
WebAssembly is a newer language with a bytecode format designed to complement JavaScript, especially the performance-critical portions of web page scripts. All of the major JavaScript engines support WebAssembly,[113] which runs in the same sandbox as regular JavaScript code.
asm.js is a subset of JavaScript that served as the forerunner of WebAssembly.[114]
Eich: The immediate concern at Netscape was it must look like Java.
Eich: "function", eight letters, I was influenced by AWK.
[S]ince the 1996 introduction of JScript version 1.0 ... we've been seeing a steady increase in the usage of JScript on the server—particularly in Active Server Pages (ASP)
Definitions from Wiktionary
Media from Commons
Textbooks from Wikibooks
Resources from Wikiversity
Documentation from MediaWiki
