[AFO028L7M] Curso de Analista Programador Javascript

[MOD024H2Y] Analista Programador Javascript

[UDI152LMM] Sintáxis de JavaScript

Introducción

JavaScript, el lenguaje de programación esencial para la web, ofrece un conjunto diverso de

características y conceptos fundamentales que todo desarrollador debe comprender para crear

aplicaciones web dinámicas y eficientes. Desde variables y tipos de datos hasta eventos y manejo de

objetos, este conjunto de conocimientos constituye la base sólida sobre la cual se construyen las

aplicaciones web modernas.

om
En esta sección de aprendizaje, se explorarán diversos aspectos clave de JavaScript, abarcando

desde la sintaxis básica hasta estructuras de datos más avanzadas. A través de explicaciones claras y

.c
ejemplos prácticos, se sumergirán en temas como control de flujo, funciones, manipulación de

objetos, y la gestión de eventos.

s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
1 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Objetivos

Adquirir una sólida comprensión de los conceptos fundamentales de JavaScript, incluyendo

variables, tipos de datos, operadores y estructuras de control de flujo.

Familiarizarse con la creación y utilización de funciones, así como entender la manipulación de

objetos en JavaScript.

Dominar el concepto de eventos en el contexto web y aprender a gestionarlos mediante

om
manejadores de eventos.

s .c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
2 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Mapa Conceptual

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
3 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

1. Variables y tipos de datos

En todos los lenguajes de programación, se encuentran incorporadas estructuras de datos, si bien

suelen variar de un lenguaje a otro. En este artículo, se pretende listar las estructuras de datos

integradas disponibles en JavaScript, junto con sus propiedades. Estas estructuras pueden

emplearse para la construcción de otras formas de datos. En la medida de lo posible, se realizan

comparaciones con otros lenguajes.

om
Se caracteriza por su tipado dinámico, siendo JavaScript un lenguaje débilmente tipado y dinámico.

Las variables en JavaScript no están directamente vinculadas a un tipo específico de valor,

.c
permitiendo asignar y reasignar valores de diversos tipos a cualquier variable.

s
ro
ha
l ap

Tipado dinámico
au

A continuación, se definirá:
a.
os

Estructuras y tipos de datos.

Valores primitivos.
m

Objetos y funciones.
ce

Colecciones con clave: mapas, conjuntos, WeakeMaps, WeakeSets.

1.1. Estructuras y tipos de datos

El último estándar ECMAScript define nueve tipos:

1. Seis tipos de datos primitivos, controlados por el operador typeof:

BigInt: typeof instancia === "bigint"

cemosa.aulapharos.com
4 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Symbol: typeof instancia === "symbol"

String: typeof instancia === "string"

Boolean: typeof instancia === "boolean"

Number: typeof instancia === "number"

Undefined: typeof instancia === "undefined"

Null: typeof instancia === "object". Este es un tipo primitivo especial con un uso adicional

para su valor: si el objeto no se hereda, se muestra como null.

om
2. Object: typeof instancia === "object". Este es un tipo estructural especial que no es de datos,

pero se utiliza para cualquier instancia de objeto construido que también funciona como estructura

.c
de datos. Incluye objetos creados con new Object, new Array, new Map, new Set, new

s
WeakMap, new WeakSet, new Date, y prácticamente todo lo creado con la palabra clave new.

ro
3. Function: una estructura sin datos, aunque también responde al operador typeof: typeof
ha
instancia === "function". Este tipo representa funciones y sirve como una forma abreviada para
ap

identificar instancias que son funciones. Es importante destacar que cada constructor de funciones

se deriva del constructor Object.

l
au

Es crucial tener en cuenta que el único propósito valioso del uso del operador typeof es verificar el

tipo de dato. Si se desea verificar cualquier tipo estructural derivado de Object, no tiene sentido
a.

utilizar typeof para eso, ya que siempre se obtendrá "object". La forma correcta de verificar el tipo
os

de objeto es mediante la palabra clave instanceof. Sin embargo, incluso en ese caso, puede haber

conceptos erróneos y es necesario tener precaución al interpretar los resultados obtenidos.

m
ce

1.2. Valores primitivos

Los valores primitivos, a diferencia de los objetos, son inherentemente inmutables, lo que significa

que no pueden modificarse. Un ejemplo de esto es que, a diferencia de en C, las cadenas son

inmutables. Este conjunto de valores se denomina "valores primitivos":

Boolean representa una entidad lógica y puede tener dos valores: true y false.

El tipo Null tiene un único valor: null. Se suele usar cuando no se ha definido el valor de un

cemosa.aulapharos.com
5 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

objeto, de normal lo asigna el propio lenguaje para evitar usar objetos vacíos.

Una variable a la que no se le ha asignado un valor tiene el valor undefined.

ECMAScript presenta dos tipos numéricos integrados: Number y BigInt (ver más abajo).

El tipo Number representa un valor en formato binario de 64 bits de doble precisión IEEE 754,

abarcando números entre -(2^53 - 1) y 2^53 - 1. Además de representar números de punto

flotante, el tipo Number incluye tres valores simbólicos: +Infinity, -Infinity y NaN (que

significa "Not a Number" o No es un número). Para verificar el valor más grande disponible o el

valor más pequeño dentro del rango de ±Infinity, puedes utilizar las constantes

om
Number.MAX_VALUE o Number.MIN_VALUE.

.c
A partir de ECMAScript 2015, también es posible verificar si un número se encuentra en el rango de

s
los números de punto flotante de doble precisión mediante el uso de Number.isSafeInteger(), junto

ro
con las constantes Number.MAX_SAFE_INTEGER y Number.MIN_SAFE_INTEGER (en-US). Más allá
ha
de este rango, los enteros en JavaScript dejan de ser seguros y se convierten en una aproximación

de punto flotante de doble precisión del valor.

ap

Estas adiciones permiten una verificación más precisa y segura de enteros dentro de los límites
l

seguros definidos por Number.MAX_SAFE_INTEGER y Number.MIN_SAFE_INTEGER, brindando

au

mayor control sobre el manejo de números enteros en aplicaciones JavaScript. Es importante utilizar
a.

estas funciones y constantes cuando se trabaja con enteros críticos para garantizar la integridad y

precisión de los cálculos.

os

En el tipo number, existe un único entero con dos representaciones: 0 se puede representar como -0
m

y +0, siendo 0 un alias de +0.

ce

En la práctica, esto tiene un impacto casi nulo. Por ejemplo, la afirmación +0 === -0 es verdadera.

No obstante, puedes notar esta distinción al realizar operaciones como la división entre cero:

cemosa.aulapharos.com
6 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
Infinito

Aunque ambas representaciones de cero son consideradas iguales en la mayoría de las

.c
comparaciones, ciertas operaciones, como la división entre cero, pueden dar lugar a resultados

s
diferentes. Es esencial estar consciente de este comportamiento en situaciones donde se requiere

ro
una precisión extrema o en cálculos críticos.
ha
Otros tipos a tener en cuenta son:
ap

El tipo BigInt en JavaScript es un primitivo numérico concebido para representar números

enteros con precisión arbitraria. Con BigInts, es posible almacenar y realizar operaciones de
l
au

manera segura con números enteros grandes, incluso superando el límite seguro de enteros

establecido para los Numbers convencionales. La creación de un BigInt se logra añadiendo "n"
a.

al final de un número entero o mediante la llamada al constructor correspondiente. A

os

diferencia de los Numbers, que tienen un límite seguro definido por la constante

Number.MAX_SAFE_INTEGER, los BigInts te permiten operar con números más allá de este
m

límite. El siguiente ejemplo ilustra cómo incrementar el Number.MAX_SAFE_INTEGER

ce

devuelve el resultado esperado. Los operadores como +, *, -, ** y % pueden utilizarse con

BigInts de manera similar a como se haría con Numbers. Aunque un BigInt no es estrictamente

igual a un Number, comparten similitudes en términos generales. Cuando se convierte a

Boolean, un BigInt se comporta como un Number en casos como if, ||, &&, Boolean, y !. Es

importante destacar que los BigInts no son intercambiables con los Numbers. Intentar realizar

operaciones entre ellos lanzará un TypeError.

cemosa.aulapharos.com
7 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
BInt

El tipo "String" en JavaScript se utiliza para representar datos textuales y está compuesto por

.c
un conjunto de "elementos" de valores enteros sin signo de 16 bits. Cada elemento ocupa una

s
posición en la cadena, comenzando desde el índice 0 y continuando secuencialmente. La

ro
longitud de una cadena se mide por el número de elementos que contiene. A diferencia de
ha
algunos lenguajes de programación, como C, las cadenas en JavaScript son inmutables, lo que

significa que no se pueden modificar una vez que se han creado. Sin embargo, es posible
ap

generar nuevas cadenas basadas en la cadena original mediante operaciones como la selección

de subcadenas o la concatenación. Por ejemplo:

l
au

Crear una subcadena seleccionando letras individuales o utilizando String.substr().

a.

Concatenar dos cadenas mediante el operador de concatenación (+) o String.concat().

Es crucial tener precaución al evitar "convertir a cadenas" el código. Aunque puede ser
os

tentador representar datos complejos como cadenas debido a la facilidad de construir y

m

depurar, es preferible utilizar cadenas solo para datos textuales. Utilizar cadenas para

estructuras de datos complejas puede llevar a convenciones propensas a errores y a una

ce

carga de mantenimiento innecesaria.

1.3. Objetos y funciones

Un objeto en JavaScript se define como una asociación entre claves y valores, donde las claves

pueden ser cadenas o Symbols, y los valores pueden ser de cualquier tipo. Esta característica hace

que los objetos sean adecuados para funcionar como hashmaps.

cemosa.aulapharos.com
8 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Las funciones en JavaScript son objetos regulares con la capacidad adicional de ser invocables.

Para representar fechas en JavaScript, la opción más apropiada es utilizar la utilidad Date

incorporada.

Con respecto a las colecciones indexadas, los arreglos en JavaScript son objetos regulares que

establecen una relación específica entre las propiedades con claves enteras y la propiedad "length".

Estos heredan de Array.prototype, lo que les brinda métodos convenientes como indexOf (para

om
buscar un valor en el arreglo) o push (para agregar un elemento al arreglo), entre otros. Esto

convierte a los Arrays en estructuras ideales para representar listas o conjuntos.

.c
Los Arrays tipados, introducidos en ECMAScript 2015, ofrecen una vista similar a un arreglo de un

s
búfer de datos binarios subyacente. La siguiente tabla ayuda a determinar los tipos de datos

ro
equivalentes en C: [se proporciona una tabla que no se incluyó en la respuesta, pero puedes

consultarla en la fuente original]. Estos arreglos tipados proporcionan una forma eficiente de
ha
trabajar con datos binarios y son particularmente útiles en situaciones donde se requiere
ap

manipulación directa de la memoria:

l

Int8Array:
au

Intervalo de valores: -128 a 127

a.

Tamaño en bytes: 1
os

Descripción: Dos enteros complementarios de 8 bits con signo

Tipo de IDL web: byte

m

Tipo C equivalente: int8_t

ce

Uint8Array:

Intervalo de valores: 0 a 255

Tamaño en bytes: 1

Descripción: Entero de 8 bits sin signo

Tipo de IDL web: octet

Tipo C equivalente: uint8_t

Uint8ClampedArray:

cemosa.aulapharos.com
9 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Intervalo de valores: 0 a 255

Tamaño en bytes: 1

Descripción: Entero de 8 bits sin signo (sujeto)

Tipo de IDL web: octet

Tipo C equivalente: uint8_t

Int16Array:

Intervalo de valores: -32768 a 32767

om
Tamaño en bytes: 2

Descripción: Dos enteros complementarios de 16 bits con signo

.c
Tipo de IDL web: short

s
Tipo C equivalente: int16_t

ro
Uint16Array:
ha
Intervalo de valores: 0 a 65535

Tamaño en bytes: 2
ap

Descripción: Entero de 16 bits sin signo

l

Tipo de IDL web: unsigned short

au

Tipo C equivalente: uint16_t

a.

Int32Array:
os

Intervalo de valores: -2147483648 a 2147483647

Tamaño en bytes: 4
m

Descripción: Dos enteros complementarios de 32 bits con signo

ce

Tipo de IDL web: long

Tipo C equivalente: int32_t

Uint32Array:

Intervalo de valores: 0 a 4294967295

Tamaño en bytes: 4

Descripción: Enteros de 32 bits sin signo

Tipo de IDL web: unsigned long

Tipo C equivalente: uint32_t

cemosa.aulapharos.com
10 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Float32Array:

Intervalo de valores: 1.2×10^-38 a 3.4×10^38

Tamaño en bytes: 4

Descripción: Número de coma flotante IEEE de 32 bits (7 dígitos significativos)

Tipo de IDL web: float

Tipo C equivalente: float sin restricciones

Float64Array:

om
Intervalo de valores: 5.0×10^-324 a 1.8×10^308

Tamaño en bytes: 8

.c
Descripción: Número de coma flotante IEEE de 64 bits (16 dígitos significativos)

s
Tipo de IDL web: double

ro
Tipo C equivalente: double sin restricciones
ha
BigInt64Array:
ap

Intervalo de valores: -2^63 a 2^63-1

Tamaño en bytes: 8
l

Descripción: Dos enteros complementarios de 64 bits con signo

au

Tipo de IDL web: bigint

a.

Tipo C equivalente: int64_t (long long con signo)

os

BigUint64Array:

Intervalo de valores: 0 a 2^64-1

m

Tamaño en bytes: 8
ce

Descripción: Entero de 64 bits sin signo

Tipo de IDL web: bigint

Tipo C equivalente: uint64_t (long long sin signo)

1.4. Colecciones con clave: mapas, conjuntos, WeakeMaps,

WeakeSets

cemosa.aulapharos.com
11 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Las estructuras de datos introducidas en ECMAScript Edition 6, como Set, WeakSet, Map, y

WeakMap, son herramientas poderosas para manejar conjuntos y asociaciones de datos en

JavaScript. Aquí se proporciona un resumen de estas estructuras:

Set

Representa un conjunto de valores únicos, donde cada valor puede ser de cualquier tipo. No

om
permite duplicados, asegurando que cada elemento sea único. Útil para almacenar una
colección de elementos sin necesidad de asociar valores adicionales.

WeakSet

.c
Es similar a Set, pero solo acepta objetos como elementos. Los elementos en WeakSet son

s
débiles, lo que significa que no impiden que los objetos referenciados sean recolectados por

ro
el recolector de basura si no tienen otras referencias. Se utiliza cuando la vida útil de los
objetos en el conjunto está vinculada a la vida útil de las instancias que los contienen.
ha
Map
ap

Asocia claves a valores, permitiendo la creación de estructuras de datos más complejas.

Permite cualquier tipo de valor como clave, incluidos objetos y funciones. A diferencia de
WeakMap, las claves de Map se pueden enumerar, lo que facilita la iteración a través de
l

ellas.
au

WeakMap
a.

Similar a Map, pero solo acepta objetos como claves. Al igual que WeakSet, las claves en
WeakMap son débiles, lo que significa que no impiden la recolección de basura si no hay
os

otras referencias al objeto clave. Útil cuando se necesita asociar datos privados a objetos sin
afectar la recolección de basura.
m

La diferencia clave entre Maps y WeakMaps radica en la capacidad de enumerar las claves y la
ce

resistencia a la recolección de basura. Las Maps son útiles cuando se requiere acceso a las claves

para iterar o realizar operaciones específicas, mientras que las WeakMaps son más adecuadas

cuando se busca asociar datos a objetos sin interferir en la recolección de basura.

cemosa.aulapharos.com
12 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

2. Operadores

En JavaScript, se encuentran disponibles tanto operadores binarios como unarios, junto con un

operador ternario especial conocido como el operador condicional. Un operador binario implica dos

operandos, uno situado antes del operador y otro después del operador:

operando1 operador operando2

operando1 operador operando2

om
Por ejemplo, 7+2 o z∗w.

.c
En cambio, un operador unario requiere únicamente un operando, que puede ubicarse tanto antes

s
ro
como después del operador: ha
operador operando

operando operador
ap

Por ejemplo, y-- o --y.

l
au

A continuación, se verán los siguientes apartados:

a.

Operadores de asignación.
os

Operadores de comparación.
m

Operadores aritméticos.

Operadores bit a bit.

ce

Operadores lógicos.

Operadores relacionales.

2.1. Operadores de asignación

La función primordial de un operador de asignación radica en asignar un valor a su operando

izquierdo en base al valor de su operando derecho. El operador elemental de asignación es el igual

cemosa.aulapharos.com
13 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

(=), el cual asigna el valor de su operando derecho al operando izquierdo, es decir, w=z otorga el

valor de z a w.

Además, se encuentran operadores de asignación compuestos que constituyen una forma abreviada

de las operaciones detalladas en la siguiente tabla:

Nombre Operador
Asignación w=z
Adición w+=z

om
Resta w-=z
Multiplicación w*=z

.c
División w/=z
Residuo w%=z

s
Exponenciación w**=z

ro
Desplazamiento a la izquierda w<<=z
Desplazamiento a la derecha w>>=z
ha
Desplazamiento a la derecha sin signo w>>>=z
AND bit a bit w&=z
ap

OR bit a bit w||=z

AND lógico w&&=z
l
au

OR lógico w|| ||=z

Es crucial destacar que, al igual que con la mayoría de las expresiones, las asignaciones como w=z
a.

tienen un valor de retorno. Este valor coincide con la expresión a la derecha del signo == en la tabla
os

anterior. Por ejemplo, (w=z) devuelve z, (w+=z) devuelve la suma resultante w+z, y así

sucesivamente.
m

Al encadenar estas expresiones, cada asignación se evalúa de derecha a izquierda. Por ejemplo,
ce

w=z=x=z es equivalente a w=(z=(x=z)) o z=x; w=z.

En el caso de asignaciones lógicas, como (w&&=z), (w∥∥=z) y (w??=z), el valor de retorno es el

resultado de la operación lógica sin la asignación, es decir, w∥∥z y w??z, respectivamente.

Es relevante señalar que los valores de retorno siempre se basan en los valores de los operandos

antes de la operación.

cemosa.aulapharos.com
14 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

2.2. Operadores de comparación

Un operador de comparación analiza sus operandos y genera un valor lógico según si la

comparación es verdadera (true) o falsa (false). Estos operandos pueden incluir valores numéricos,

de cadena, lógicos u objetos. En el caso de cadenas, la comparación se realiza siguiendo el orden

lexicográfico estándar, utilizando valores Unicode. En la mayoría de las situaciones, si los dos

operandos no son del mismo tipo, NodeJS intenta convertirlos a un tipo adecuado para la

comparación, lo cual generalmente resulta en una comparación numérica de los operandos. Sin

om
embargo, existen excepciones a la conversión de tipos en las comparaciones, específicamente con

los operadores === y !==, que realizan comparaciones estrictas de igualdad y desigualdad. Estos

.c
operadores no intentan convertir los operandos a tipos compatibles antes de verificar la igualdad.

s
Nombre Operador

ro
== Devuelve true si los operandos son iguales.
ha
!= Devuelve true si los operandos no son iguales.
=== Devuelve true si los operandos son iguales y del mismo tipo.
ap

!== Devuelve true si los operandos no son iguales, pero si del mismo tipo.
> Devuelve true si op1 es mayor a op2
l

>= Devuelve true si op1 es mayor o igual a op2

au

< Devuelve true si op1 es menor a op2

<= Devuelve true si op1 es menor o igual a op2
a.
os

2.3. Operadores aritméticos

m

Un operador aritmético realiza operaciones sobre valores numéricos, ya sean literales o variables, y

produce un único valor numérico como resultado. Los operadores aritméticos convencionales
ce

abarcan la suma (+), resta (-), multiplicación (*) y división (/). Estos operadores operan de manera

análoga a como lo hacen en la mayoría de los otros lenguajes de programación cuando se emplean

con números de punto flotante. Es fundamental resaltar que la división por cero en NodeJS resulta

en Infinity. Por ejemplo:

1 / 2; // 0.5

1 / 2 == 1.0 / 2.0; // Esto es true

cemosa.aulapharos.com
15 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Además de las operaciones aritméticas estándar, NodeJS también ofrece otros operadores

aritméticos, como se detalla en la siguiente tabla:

Nombre Operador
Operador unario de incremento. Añade uno a su operando. Cuando se utiliza como
operador prefijo (++x), devuelve el valor de su operando después de incrementarlo; si se
++
usa como operador sufijo (x++), devuelve el valor de su operando antes de realizar el
incremento.
Operador unario de decremento. Resta uno de su operando. Si se utiliza como operador
-- prefijo (--x), devuelve el valor de su operando después de decrementarlo; si se usa como

om
operador sufijo (x--), devuelve el valor de su operando antes de realizar la resta.
Operador unario de negación. Devuelve la negación de su operando. Si el operando es
- verdadero (true), la negación devuelve falso (false), y si el operando es falso, la negación
devuelve verdadero.

.c
Operador unario de más (+). Intenta convertir el operando en un número, si aún no lo

s
es. Este operador fuerza la conversión del operando a un tipo numérico en JavaScript. Si
+
el operando es una cadena que representa un número válido, o un valor lógico, se

ro
realizará la conversión. En caso contrario, el resultado será NaN (Not a Number).
Para calcular la base elevada a la potencia del exponente en JavaScript, se puede utilizar
ha
**
el operador de exponente ** (disponible en ECMAScript 2016) o la función Math.pow().
% Operador binario. Devuelve el resto entero de dividir los dos operandos.
ap

2.4. Operadores de bit a bit

l
au

Un operador de bits opera sobre sus operandos tratándolos como conjuntos de 32 bits,
a.

considerándolos como secuencias de ceros y unos en lugar de interpretarlos como números

decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación
os

binaria de 1001. Los operadores de bits realizan sus operaciones en estas representaciones binarias,
m

pero devuelven valores numéricos estándar de NodeJS.

ce

La siguiente tabla resume los operadores bit a bit disponibles en NodeJS:

Nombre Operador
El operador AND a nivel de bits (&) en JavaScript realiza la operación que estás
& describiendo. Devuelve un 0 en cada posición de bit para la cual los bits
correspondientes de ambos operandos son 0.
Devuelve un cero en cada posición de bit para el cual los bits correspondientes de
|
ambos operandos son ceros.
El operador XOR a nivel de bits (^) en JavaScript realiza la operación que describiste.
^ Devuelve un 1 en cada posición de bit donde los bits correspondientes son diferentes y
un 0 donde son iguales.
~ Invierte los bits de su operando.

cemosa.aulapharos.com
16 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Desplaza a en representación binaria b bits a la derecha, descartando los bits

<<
desplazados.

2.5. Operadores lógicos

Un operador bit a bit opera sobre sus operandos como conjuntos de 32 bits, tratándolos como

secuencias de ceros y unos en lugar de considerarlos como números decimales, hexadecimales u

octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los

om
operadores bit a bit realizan sus operaciones en estas representaciones binarias, pero devuelven

valores numéricos estándar de NodeJS.

.c
La siguiente tabla resume los operadores bit a bit disponibles en NodeJS:

s
Nombre Operador

ro
Devuelve un uno en cada posición del bit para los que los bits correspondientes de
&
ambos operandos son unos.
ha
Devuelve un cero en cada posición de bit para el cual los bits correspondientes de
|
ambos operandos son ceros.
ap

El operador XOR a nivel de bits (^) en JavaScript realiza la operación que estás
^ describiendo. Devuelve un 1 en cada posición de bit donde los bits correspondientes
son diferentes y un 0 donde son iguales.
l
au

~ Invierte los bits de su operando.

Desplaza a en representación binaria b bits a la derecha, descartando los bits
<<
desplazados.
a.
os

2.6. Operadores relacionales

m

El operador in en JavaScript devuelve true si la propiedad especificada está presente en el objeto

ce

indicado. La sintaxis es: propNameOrNumber in objectName;, donde propNameOrNumber es

una expresión de cadena, numérica o de símbolo que representa el nombre de una propiedad o el

índice de un arreglo, y objectName es el nombre de un objeto.

A continuación, se presentan algunos ejemplos de uso del operador in:

cemosa.aulapharos.com
17 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
.c
s
In

ro
Por otro lado, el operador instanceof devuelve true si el objeto especificado es del tipo de objeto
ha
indicado. La sintaxis es: objectName instanceof objectType, donde objectName es el nombre del

objeto a comparar con objectType, y objectType es un tipo de objeto, como Date o Array.
ap

Este operador es útil para confirmar el tipo de un objeto durante la ejecución del programa. Un
l
au

ejemplo sería verificar si un objeto llamado theDay es de tipo Date:

a.
os
m
ce

Instanceof

cemosa.aulapharos.com
18 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

3. Estructura de control de flujo

Las estructuras de control de flujo son instrucciones que permiten evaluar si se cumple una

condición, usándose comúnmente para repetir un proceso n veces hasta que se haga verdadera la

condición.

Los más comunes son:

om
Condiciones: las declaraciones condicionales en programación permiten evaluar si una

condición es verdadera o falsa y, en función de ese resultado, ejecutar bloques de código

.c
específicos. La sintaxis básica incluye una estructura if que se puede complementar con else y

else if para manejar diferentes situaciones. Aquí hay un ejemplo básico en JavaScript:

s
ro
ha
l ap
au
a.

If
os

Bucles: los ciclos o bucles son estructuras fundamentales en programación que permiten
m

ejecutar repetidamente un bloque de código mientras se cumpla una condición específica.

ce

Existen varios tipos de bucles, entre los más comunes se encuentran for y while.

For: es útil cuando se conoce de antemano el número de iteraciones que se desea realizar.

Su estructura típica incluye una inicialización, una condición de continuación y una

expresión de iteración.

cemosa.aulapharos.com
19 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

For

While: se utiliza cuando la condición de continuación no se conoce de antemano y debe

evaluarse antes de cada iteración.

om
.c
While

s
ro
Switch: se utiliza para tomar decisiones basadas en el valor de una expresión. Es una
ha
alternativa a la serie de declaraciones if-else if-else. La sintaxis básica de un switch es la

siguiente:
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
20 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
.c
s
ro
ha
l ap
au
a.

Switch
os
m
ce

cemosa.aulapharos.com
21 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

4. Funciones

Las funciones representan uno de los elementos fundamentales en la construcción de programas en

JavaScript. En JavaScript, una función se asemeja a un procedimiento, es decir, un conjunto de

instrucciones diseñado para realizar tareas específicas o calcular valores. Sin embargo, para que un

procedimiento sea considerado una función, debe recibir algún tipo de entrada y proporcionar una

salida, estableciendo así una relación clara entre los datos de entrada y el resultado. La utilización

de una función implica su definición en un contexto específico desde el cual puede ser invocada.

om
En la declaración de una función en JavaScript, también conocida como declaración de función o

.c
expresión de función, se utiliza la palabra clave function, seguida de los siguientes elementos:

s
ro
El nombre de la función.

Una lista de parámetros de la función, entre paréntesis y separados por comas.

ha
Declaraciones de JavaScript que definen el comportamiento de la función, encerradas entre

llaves { ... }.
l ap
au
a.
os

Definir función
m

En este ejemplo, la función square toma un parámetro llamado number, y su definición incluye una
ce

declaración que indica que la función debe devolver el resultado de multiplicar el parámetro por sí

mismo, utilizando la palabra clave return.

Es importante destacar que los parámetros primitivos, como un número (number), se pasan a las

funciones por valor. Esto significa que el valor se transfiere a la función, pero si la función modifica

el valor del parámetro, ese cambio no afecta globalmente ni a la función que realiza la llamada.

En el caso de pasar un objeto (un valor no primitivo, como un array o un objeto definido por el

usuario) como parámetro, y la función modifica las propiedades del objeto, ese cambio es visible

cemosa.aulapharos.com
22 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

fuera de la función, como se ilustra en el siguiente ejemplo:

om
.c
Objeto como parámetro

s
ro
Existen diversas formas de llamar funciones en JavaScript. En ocasiones, es necesario llamar a una
ha
función dinámicamente, el número de argumentos puede variar, o se requiere establecer el contexto

de la llamada a la función en un objeto específico en tiempo de ejecución.

ap

No es posible acceder a las variables que se han definido dentro de una función desde fuera de la
l

misma, ya que estas variables tienen un alcance limitado al ámbito de la función. A pesar de esto, la
au

función puede acceder a todas las variables y funciones que han sido definidas en el mismo ámbito

en el que ella misma está definida.

a.
os

En JavaScript, es posible anidar una función dentro de otra función. La función anidada, también

conocida como función interna, es privada y solo puede ser accedida desde declaraciones dentro de
m

su función contenedora, también llamada función externa.

ce

Este patrón de anidación de funciones también crea lo que se conoce como un "cierre" (closure). Un

cierre es una expresión, comúnmente una función, que puede tener variables libres junto con un

entorno que une esas variables. En otras palabras, la función interna puede "heredar" los

argumentos y variables de su función contenedora:

La función interna solo se puede acceder desde declaraciones dentro de la función externa.

La función interna forma un cierre, lo que significa que puede utilizar los argumentos y

variables de la función externa, mientras que la función externa no puede acceder a los

cemosa.aulapharos.com
23 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

argumentos y variables de la función interna.

om
Anidamiento

.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
24 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

5. Objetos y arrays

Un array se constituye como una lista organizada de valores a los cuales se hace referencia

mediante un nombre e índice asociado.

Por ejemplo, se puede considerar un arreglo denominado "emp", que almacena los

Los identificadores numéricos de los empleados se asignan a los nombres, donde el empleado

número cero sería representado por emp[0], el empleado número uno por emp[1], y así

om
sucesivamente.

.c
En el contexto de JavaScript, no existe una declaración explícita de tipo de datos array. Sin embargo,

es factible utilizar el objeto Array predefinido y sus métodos para interactuar con aplicaciones que

s
ro
emplean arreglos. Este objeto posee métodos diseñados para modificar arreglos de diversas

maneras, como la combinación, inversión y clasificación. Además, cuenta con una propiedad que
ha
indica la longitud del arreglo, junto con otras propiedades útiles para su aplicación en expresiones

regulares.
ap

Los arreglos equivalentes son generados por las siguientes directrices:

l
au
a.
os

Crear Array
m

Cuando se proporcionan valores como element0, element1, ..., elementN, se están asignando a un
ce

arreglo como sus elementos. Estos valores inicializan el arreglo, y la propiedad length del arreglo se

ajusta al número de argumentos suministrados.

Para crear un arreglo con una longitud diferente de cero, pero sin ningún elemento, se puede

utilizar cualquiera de las siguientes formas:

cemosa.aulapharos.com
25 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Crear array vacío

om
En estos casos, arrayLength representa la longitud deseada del arreglo.

.c
Es posible llenar un arreglo asignando valores a sus elementos. Por ejemplo:

s
ro
ha
ap

Llenar array
l
au

En este caso, se ha creado un arreglo llamado emp, y se han asignado los valores "Casey Jones",

"Phil Lesh" y "August West" a los elementos con índices 0, 1 y 2 respectivamente.

a.

A continuación, se verá:
os

Iterar en arrays.
m

Métodos sobre arrays.

ce

5.1. Iterar en arrays

Iterar sobre los valores de un arreglo es una operación común y puede lograrse mediante un bucle

"for". En el siguiente ejemplo se presenta una forma de hacerlo:

cemosa.aulapharos.com
26 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Iterar en array

En el caso de tener la certeza de que ninguno de los elementos del arreglo se evalúa como falso en

un contexto booleano (por ejemplo, si el arreglo consta solo de nodos DOM), se puede optar por un

om
enfoque más eficiente:

s .c
Iterar de forma eficiente
ro
ha
Esta técnica evita la sobrecarga de verificar la longitud del arreglo y garantiza que la variable "div"
ap

se reasigne al elemento actual en cada iteración del bucle.

l

Otra opción para iterar sobre un arreglo es aprovechar el método forEach():

au
a.
os
m
ce

For each

En una variante más concisa, se pueden utilizar funciones de flecha (ES2015):

cemosa.aulapharos.com
27 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

For each con fecha

5.2. Métodos sobre arrays

El objeto Array proporciona diversos métodos para manipular arreglos. A continuación, se describen

algunos de estos métodos:

Concat(): genera un nuevo arreglo resultante al combinar dos o más arreglos.

om
Join(delimiter = ','): forma una cadena al unir todos los elementos de un arreglo, utilizando un

delimitador opcional.

.c
Push(): obtiene la longitud actualizada del arreglo al agregar uno o más elementos al final del

s
mismo.

ro
Pop(): retorna el último elemento eliminado al quitar el último elemento de un arreglo.
ha
Shift(): retorna el primer elemento eliminado al quitar el primer elemento de un arreglo.

Unshift(): obtiene la nueva longitud del arreglo al agregar uno o más elementos al inicio del
ap

mismo.

Slice(start_index, upto_index): genera un nuevo arreglo con los elementos de una sección
l
au

específica extraída de otro arreglo.

Splice(index, count_to_remove, addelement1, addelement2...): retorna los elementos

a.

eliminados al eliminar elementos de un arreglo y, opcionalmente, reemplazarlos con nuevos

os

elementos.

Reverse(): retorna una referencia al arreglo al invertir in situ los elementos, convirtiendo el
m

primer elemento en el último y viceversa.

ce

Sort(): retorna una referencia al arreglo ordenado al ordenar in situ los elementos del arreglo.

cemosa.aulapharos.com
28 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

Métodos sobre arrays

cemosa.aulapharos.com
29 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

6. Eventos

Los eventos son sucesos que ocurren en el sistema que se está programando. El sistema emite una

señal de un tipo específico cuando se produce un evento y proporciona un mecanismo para ejecutar

automáticamente una acción (código) cuando dicho evento tiene lugar. Los eventos suelen

desencadenarse dentro de la ventana del navegador y están comúnmente asociados a un elemento

específico dentro de dicha ventana. Este elemento puede ser único, un grupo de elementos, el

documento HTML cargado en la pestaña actual o la ventana completa del navegador. Existen

om
diversos tipos de eventos que pueden ocurrir.

.c
Algunos ejemplos de eventos incluyen:

s
ro
El usuario selecciona, hace clic o pasa el ratón por encima de un elemento específico.

El usuario presiona una tecla del teclado.

ha
El usuario redimensiona o cierra la ventana del navegador.

Una página web ha terminado de cargarse.

ap

Un formulario ha sido enviado.

Un vídeo se reproduce, se pausa o termina.

l
au

Se produce un error.
a.

Para responder a un evento, se puede asociar un manejador de eventos, un bloque de código,

os

comúnmente una función de JavaScript creada por el programador, que se ejecuta cuando el evento

ocurre. Al configurar uno de estos bloques de código para ejecutarse en respuesta a un evento, se
m

está registrando un manejador de eventos. Es importante destacar que a veces se utiliza el término
ce

"detectores de eventos" en lugar de "manejadores de eventos". En este contexto, ambos términos

son intercambiables, aunque estrictamente hablando, se refieren a dos mecanismos colaborativos.

Los detectores de eventos están atentos a la ocurrencia de un evento, mientras que el manejador es

el código que se ejecuta en respuesta al evento.

cemosa.aulapharos.com
30 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
Ejemplo manejador de eventos

.c
En el ejemplo anterior, se observa que los objetos capaces de generar eventos utilizan el método

s
addEventListener(), siendo este el mecanismo recomendado para registrar manejadores de

ro
eventos.
ha
El elemento HTML <button> generará un evento cuando el usuario haga clic en él. Aquí se está

definiendo la función addEventListener(), a la que se el proporciona dos parámetros:

ap

La cadena "click", para indicar que se desea detectar el evento de clic. Los botones pueden
l
au

generar muchos otros eventos, como "mouseover" cuando el usuario mueve el ratón sobre el

botón, o "keydown" cuando el usuario presiona una tecla y el botón está enfocado.
a.

Una función que se llamará cuando ocurra el evento. En este caso, la función genera un color
os

RGB aleatorio y establece el background-color de la etiqueta <body> a ese color.

m

También es válido crear una función manejadora con su propio nombre, como se muestra a
ce

continuación:

cemosa.aulapharos.com
31 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

om
Ejemplo manejador de eventos propia

.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
32 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Recuerda

En JavaScript, se declaran variables usando let o const.

let permite reasignación, mientras que const no.

if, else if, y else se utilizan para la ejecución condicional de bloques de código.

Operadores lógicos (&&, ||, !) combinan expresiones condicionales.

break y continue modifican el flujo de ejecución en bucles.

om
break y continue modifican el flujo de ejecución en bucles.

Las funciones en JavaScript se definen con function.

Los parámetros se pasan a funciones, y estas pueden devolver valores con return.

.c
Los eventos son acciones que suceden en el sistema.

s
addEventListener() se utiliza para registrar manejadores de eventos.

ro
Un manejador de eventos es una función que se ejecuta en respuesta a un evento específico.
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
33 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

Autoevaluación

¿Cómo se declaran las variables en JavaScript?

variable x = 10;

var x = 10;

om
int x = 10;

s.c
ro
¿Cuál de las siguientes afirmaciones es cierta respecto a los condicionales?
ha
If y else son lo mismo.
ap

Else if solo se puede usar una vez en una estructura condicional.

l
au

Los operadores lógicos (&&, ||, !) son irrelevantes en condicionales.

a.
os

¿Cómo se define una función en JavaScript?

m
ce

Function miFuncion() {}.

Definir función miFuncion() {}.

Create function miFuncion() {}.

¿Qué método de array se utiliza para agregar elementos al final del mismo?

cemosa.aulapharos.com
34 / 35
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMM] Sintáxis de JavaScript

push()

Add()

Append()

om
¿Cuál de las siguientes afirmaciones es correcta sobre addEventListener()?

.c
Se utiliza para ejecutar eventos solo una vez.

s
ro
No puede manejar eventos del teclado.
ha
Registra eventos solo en elementos específicos.
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
35 / 35