🤖

S3. JavaScript
SUMARIO
2.1 Introducción
2.1.1 ¿Qué es JavaScript?
2.1.2 Historia y evolución de JavaScript
2.1.3 Rol de JavaScript en el desarrollo web
2.2 Sintaxis Básica y Estructura
2.2.1 Variables y tipos de datos
2.2.2 Operadores
2.2.3 Comentarios en JavaScript
2.3 Estructuras de Control
2.3.1 Sentencias condicionales
2.3.2 Bucles
2.4 Funciones
2.4.1 Definición de funciones
2.4.2 Parámetros y argumentos

S3. JavaScript 1
 2.4.3 Valores de retorno
2.4.4 Funciones anónimas y funciones flecha
2.4.5 Callbacks y funciones de orden superior
2.5 Objetos
2.5.1 Conceptos básicos de objetos
2.5.2 Métodos Avanzados y Utilidades de Objetos
2.6 Arrays en JavaScript
2.6.1 Conceptos Básicos
2.6.2 Métodos y Propiedades de Arrays
2.6.3 Manipulación de Arrays
2.6.4 Arrays Multidimensionales
2.7 Uso Conjunto de Arrays y Objetos
2.7.1 Iterando Objetos con Métodos de Arrays
2.7.2 Manipulación de Datos en Formato JSON

2.1 Introducción
2.1.1 ¿Qué es JavaScript?
JavaScript es un lenguaje de programación de alto nivel, orientado a objetos,
interpretado y dinámico. Originalmente fue diseñado para añadir interactividad a
las páginas web, pero ha evolucionado a lo largo de los años para convertirse en
una pieza fundamental del desarrollo web moderno, con aplicaciones que van
más allá del navegador, como servidores, aplicaciones móviles y de escritorio, e
incluso en hardware y robótica.

2.1.2 Historia y evolución de JavaScript

1995: JavaScript fue creado en tan solo 10 días por Brendan Eich mientras
trabajaba en Netscape. Originalmente fue nombrado "Mocha", después
"LiveScript", y finalmente "JavaScript". Contrario a lo que se podría pensar,

S3. JavaScript 2
 JavaScript no tiene relación directa con Java, a pesar de algunas similitudes
sintácticas.

1996-1997: Microsoft lanza JScript para Internet Explorer, una especie de clon
de JavaScript. Por la necesidad de estandarizar el lenguaje, Netscape lleva
JavaScript a ECMA International, lo que lleva al nacimiento de ECMAScript
(ES).

1999: ECMAScript 3 es lanzado, introduciendo importantes características

que aún son fundamentales en el lenguaje.

2000s: Durante este periodo, JavaScript se establece firmemente como uno

de los tres pilares del desarrollo web, junto con HTML y CSS. Sin embargo,
hubo un largo estancamiento en cuanto a la actualización del lenguaje.

2009: ECMAScript 5 es lanzado. Añade muchas características nuevas, como

"strict mode", y nuevas APIs.

2015: ECMAScript 6 (ES6 o ES2015) es lanzado, siendo una de las

actualizaciones más significativas del lenguaje, introduciendo clases,
módulos, promesas, y muchas otras características. A partir de este punto, se
decide que ECMAScript tendría actualizaciones anuales.

2016-presente: Se siguen liberando nuevas versiones de ECMAScript

anualmente, continuando la evolución y mejoramiento del lenguaje.

2.1.3 Rol de JavaScript en el desarrollo web

Desde sus humildes inicios como un lenguaje diseñado para dar interactividad a
las páginas web, JavaScript ha crecido para convertirse en una herramienta
omnipresente en el desarrollo web. Su rol incluye:

Interactividad en el Lado del Cliente: JavaScript permite la interactividad del

usuario en sitios web. Desde simples animaciones hasta el manejo de
entradas de formularios, ayuda a mejorar la experiencia del usuario.

Manipulación del DOM: Con JavaScript, los desarrolladores pueden cambiar

dinámicamente el contenido, la estructura y los estilos en una página web sin
requerir una recarga de la página.

Desarrollo en el Lado del Servidor: Con la llegada de Node.js, JavaScript

extendió sus capacidades al desarrollo del lado del servidor, permitiendo el

S3. JavaScript 3
 desarrollo web full-stack con un único lenguaje.

Herramientas y ecosistema: El ecosistema alrededor de JavaScript ha

crecido exponencialmente. NPM (Node Package Manager) es uno de los
repositorios de paquetes más grandes del mundo, ofreciendo librerías y
herramientas para casi cualquier necesidad de desarrollo.

Frameworks y Bibliotecas: Numerosos frameworks de JavaScript (como

Angular, React y Vue) y bibliotecas (como jQuery) simplifican y potencian el
desarrollo web, haciéndolo más rápido y eficiente.

Aplicaciones Web Progresivas (PWAs): JavaScript permite la creación de

PWAs, que son aplicaciones web que se pueden instalar y ejecutar sin
conexión, ofreciendo una experiencia casi nativa de la aplicación.

APIs Web: Muchas APIs web son accesibles a través de JavaScript,

permitiendo funcionalidades como geolocalización, almacenamiento web y
orientación del dispositivo.

En resumen, JavaScript ha pasado de ser un simple lenguaje de scripting en el

navegador a ser uno de los lenguajes de programación más importantes y
versátiles en el mundo del desarrollo tecnológico. Su capacidad para adaptarse y
evolucionar ha asegurado su relevancia en el paisaje tecnológico moderno.

2.2 Sintaxis Básica y Estructura

2.2.1 Variables y tipos de datos
En JavaScript, una variable es un contenedor que almacena información que
puede ser utilizada y manipulada durante la ejecución de un programa. La
declaración de variables en JavaScript ha evolucionado con el tiempo, y
actualmente contamos con tres maneras principales de hacerlo: var , let y const .

var: Es la forma tradicional de declarar variables, pero su uso ha disminuido

en favor de let y const por ciertas peculiaridades en su comportamiento,
como el "hoisting".

let: Introducido en ES6, permite declarar variables con un alcance limitado al

bloque, declaración o expresión donde se usa.

S3. JavaScript 4
 const: También introducido en ES6, es similar a let pero, como su nombre
indica, se utiliza para valores que no deben ser reasignados.

JavaScript es un lenguaje de tipado dinámico, lo que significa que no necesitas

especificar un tipo de dato cuando declaras una variable; el lenguaje determina el
tipo de dato de manera automática. A pesar de esto, JavaScript tiene varios tipos
de datos:

Primitivos:

Number: Representa tanto números enteros como flotantes.

String: Representa una secuencia de caracteres.

Boolean: Representa un valor verdadero o falso.

Undefined: Tipo asignado a una variable que no se le ha asignado un

valor.

Null: Representa un valor nulo o "no valor".

Symbol (introducido en ES6): Representa valores únicos.

Compuestos:

Object: Permite almacenar colecciones de datos.

Array: Es un tipo especial de objeto que representa listas de valores.

🔍 Good to Know: A pesar de que sigue siendo funcional en versiones

var

modernas de JavaScript, la comunidad recomienda el uso de let y const por sus

ventajas en cuanto a alcance y predictibilidad.

💡 Tips: Siempre es buena práctica inicializar tus variables con un valor

predeterminado para evitar comportamientos inesperados.

2.2.2 Operadores
Los operadores en JavaScript son símbolos que llevan a cabo operaciones en uno
o más operandos y producen un resultado. Los más comunes son:

Aritméticos: + ,- ,* , / , % (módulo), ++ (incremento), - (decremento).

S3. JavaScript 5
 Comparación: == (igual a), === (valor y tipo igual a), != (no igual a), !==

(valor o tipo no igual a), < , > , <= , >= .

Lógicos: && (AND), || (OR), ! (NOT).

Asignación: = , += , = , = , /= , %= .

Ternario: ? : utilizado para operaciones condicionales.

🔍 Good to Know: El operador == compara el valor de las variables, pero no su

tipo. Por otro lado, === compara tanto el valor como el tipo. Por ello, es
generalmente recomendable usar === para evitar conversiones de tipo
inesperadas.

💡 Tips: El uso excesivo de operadores ternarios en una sola línea puede hacer
que el código sea difícil de leer. Si la lógica se complica, es mejor considerar usar
estructuras condicionales como if y else .

2.2.3 Comentarios en JavaScript

Los comentarios son fragmentos de código que no se ejecutan y se utilizan para
añadir descripciones o notas al código fuente. Son extremadamente útiles para
documentar el código y para qué otros desarrolladores (o uno mismo en el futuro)
entiendan el propósito de ciertas secciones del código.

En JavaScript existen dos tipos de comentarios:

Comentarios de una sola línea: Se inician con // . Todo lo que sigue a estos
dos caracteres en la misma línea será considerado un comentario.

// Este es un comentario de una sola línea

Comentarios de varias líneas: Se encierran entre /* y / . Todo lo que se

encuentra entre estos caracteres será considerado un comentario,
independientemente de cuántas líneas ocupe.

/*
Este es un comentario

S3. JavaScript 6
 que abarca varias líneas
*/

Es esencial utilizar los comentarios de manera adecuada, proporcionando

información relevante sin sobre-comentar, para mantener el código limpio y
legible.

🔍 Good to Know: Los comentarios también pueden ser útiles para "deshabilitar"
temporalmente ciertas partes del código durante la depuración, sin tener que
eliminarlas. Sin embargo, antes de lanzar o publicar tu código, es recomendable
limpiarlo de comentarios innecesarios o de código "deshabilitado".

💡 Tips: No solamente comentes qué hace el código, sino por qué lo hace. A
veces, el propósito de un fragmento de código no es inmediatamente claro, y
entender el "por qué" puede ser crucial para otros desarrolladores (¡o para ti
mismo en el futuro!).

2.3 Estructuras de Control

Las estructuras de control son fundamentales en programación, ya que permiten
manejar el flujo de un programa en función de ciertas condiciones o repeticiones.

2.3.1 Sentencias condicionales

Las sentencias condicionales evalúan si una condición es verdadera o falsa y, en
función de ello, ejecutan diferentes bloques de código.

if: Es la forma más básica de sentencia condicional. Evalúa una condición y

ejecuta un bloque de código si la condición es verdadera.

if (condición) {
// Código a ejecutar si la condición es verdadera
}

else if: Se utiliza para comprobar múltiples condiciones. Si la condición del if

no se cumple, se evalúa la condición del else if .

S3. JavaScript 7
 if (condición1) {
// Código a ejecutar si la condición1 es verdadera
} else if (condición2) {
// Código a ejecutar si la condición2 es verdadera
}

else: Se ejecuta cuando ninguna de las condiciones anteriores es verdadera.

if (condición1) {
// Código si la condición1 es verdadera
} else {
// Código si ninguna condición anterior es verdadera
}

switch: Utilizado para múltiples rutas de ejecución. Evalúa una expresión y

compara su valor con múltiples casos posibles.

switch (expresión) {
case valor1:
// Código a ejecutar si expresión es igual a valor
1
break;
case valor2:
// Código a ejecutar si expresión es igual a valor
2
break;
default:
// Código a ejecutar si ninguna condición anterior
es verdadera
}

2.3.2 Bucles
Los bucles permiten repetir bloques de código mientras se cumpla una condición
o un número determinado de veces.

S3. JavaScript 8
 for: Ejecuta un bloque de código un número específico de veces. Tiene tres
partes: inicialización, condición y actualización.

for (inicialización; condición; actualización) {

// Código a ejecutar en cada iteración
}

while: Ejecuta un bloque de código mientras se cumpla una condición.

while (condición) {
// Código a ejecutar mientras la condición sea verdade
ra
}

do-while: Similar al bucle while , pero garantiza que el bloque de código se

ejecute al menos una vez, ya que la condición se evalúa después de la
ejecución del bloque.

do {
// Código a ejecutar
} while (condición);

💡 Tips: Es fundamental tener cuidado al trabajar con bucles, especialmente con

while y do-while . Si la condición siempre se evalúa como verdadera y no hay una
lógica que la haga falsa en algún momento, se generará un bucle infinito que
puede hacer que la aplicación se bloquee.

2.4 Funciones
Las funciones son bloques de código reutilizables diseñados para realizar una
tarea específica. Son fundamentales en programación, ya que permiten
modularizar y organizar el código, además de hacerlo más legible y mantenible.

2.4.1 Definición de funciones

S3. JavaScript 9
 Una función en JavaScript se define con la palabra clave function , seguida por un
nombre y un conjunto de paréntesis () .

function nombreDeLaFuncion() {
// Código a ejecutar
}

Para invocar o llamar a la función, se utiliza el nombre de la función seguido de

paréntesis:

nombreDeLaFuncion();

2.4.2 Parámetros y argumentos

Los parámetros son variables que se listan como parte de la definición de la
función, mientras que los argumentos son valores que se pasan a la función
cuando se invoca.

function saludar(nombre) { // "nombre" es un parámetro

console.log("Hola, " + nombre);
}

saludar("Alice"); // "Alice" es un argumento

2.4.3 Valores de retorno

Las funciones pueden devolver un valor al código que las llamó utilizando la
palabra clave return .

function sumar(a, b) {
return a + b;
}

let resultado = sumar(5, 3); // resultado será 8

S3. JavaScript 10
 2.4.4 Funciones anónimas y funciones flecha
Funciones anónimas: Son funciones sin nombre. A menudo se utilizan como
argumento de funciones de orden superior o en asignaciones.

let multiplicar = function(a, b) {

return a * b;
};

Funciones flecha: Introducidas en ES6, permiten una sintaxis más breve para
escribir funciones. Son especialmente útiles para funciones cortas.

const sumar = (a, b) => a + b;

2.4.5 Callbacks y funciones de orden superior

Callbacks: Son funciones que se pasan como argumentos a otras funciones y
se invocan después de que la función principal ha terminado su ejecución. Se
utilizan ampliamente en operaciones asíncronas.

function procesar(callback) {
// Código de procesamiento
callback();
}

procesar(function() {
console.log("Proceso terminado!");
});

Funciones de orden superior: Son funciones que toman una o más funciones
como argumentos, o que devuelven una función. Una función de orden
superior común en JavaScript es la función map , que procesa cada elemento
de un array utilizando una función proporcionada.

const numeros = [1, 2, 3];

const doblados = numeros.map(function(num) {

S3. JavaScript 11
 return num * 2;
});

💡 Tips: Utilizar funciones flecha y funciones de orden superior puede mejorar la

legibilidad de tu código, especialmente en situaciones con lógica compleja o con
operaciones asíncronas. Asegúrate de comprender cómo funciona el contexto
this con funciones flecha, ya que se comporta de manera diferente en

comparación con las funciones tradicionales.

2.5 Objetos
Los objetos permiten organizar los datos en pares clave-valor. Son
extremadamente versátiles y forman la base de estructuras de datos más
avanzadas y de la programación orientada a objetos en JavaScript, junto con los
arrays.

2.5.1 Conceptos básicos de objetos

Los objetos se pueden crear utilizando llaves {} y asignando valores a
propiedades con el formato clave: valor .

Propiedades: Las propiedades son valores asociados con un objeto. Puedes

considerarlas como variables dentro de un objeto.

let coche = {
marca: "Toyota",
modelo: "Corolla",
año: 2020
};

Aquí, marca , modelo y año son propiedades del objeto coche .

Puedes acceder a las propiedades de un objeto usando la notación de punto o
la notación de corchetes.

console.log(persona.nombre); // Devuelve "Juan"

console.log(persona["edad"]); // Devuelve 30

S3. JavaScript 12
 Para añadir o modificar propiedades:

persona.pais = "España"; // Añade la propiedad "pais"

persona.edad = 31; // Modifica la edad a 31

Eliminar propiedades se realiza con el operador delete :

delete persona.ocupacion;

Métodos: son simplemente una función asociada a una propiedad de un

objeto. Permiten definir acciones que pueden ser ejecutadas sobre el objeto.

let coche = {
marca: "Toyota",
encender: function() {
console.log("El coche está encendido");
}
};

coche.encender(); // Invoca el método encender del objeto

coche

Instanciación: Se refiere a la creación de una instancia de un objeto a partir

de una clase o un constructor.

function Coche(marca, modelo) {

marca = marca;
modelo = modelo;
encender = function() {
console.log("El coche está encendido");
};
}

let miCoche = new Coche("Toyota", "Corolla"); // Instanci

a un nuevo objeto Coche

S3. JavaScript 13
 2.5.2 Métodos Avanzados y Utilidades de Objetos
JavaScript proporciona una serie de métodos estáticos a través del objeto global
Object que permiten realizar diversas operaciones con objetos.

: Copia los valores de todas las propiedades enumerables de uno o

.assign()

más objetos fuente a un objeto destino.

let detalles = { altura: 180, peso: 75 };

Object.assign(persona, detalles); // Agrega propiedades d
e "detalles" a "persona"

.keys() : Devuelve un array con las claves de las propiedades de un objeto.

console.log(Object.keys(persona)); // ["nombre", "edad",

"pais", "saludar", "altura", "peso"]

.values() : Devuelve un array con los valores de las propiedades de un objeto.

console.log(Object.values(persona));

.entries() : Devuelve un array con pares [clave, valor] de las propiedades de

un objeto.

console.log(Object.entries(persona));

💡 Consejo: Cuando trabajas con objetos, es útil familiarizarte con los métodos
estáticos que proporciona el objeto Object , ya que ofrecen herramientas
poderosas para manipular y trabajar con estructuras de objetos. Además, el uso
adecuado de getters y setters puede ayudarte a escribir código más robusto y
mantener la integridad de los datos.

2.6 Arrays en JavaScript

Los arrays son estructuras de datos fundamentales en JavaScript que permiten
almacenar múltiples valores en una única variable. Vamos a profundizar en sus
conceptos, métodos y formas de manipulación.

S3. JavaScript 14
 2.6.1 Conceptos Básicos
Creación y declaración de arrays:
Los arrays se pueden crear utilizando corchetes
[] y pueden almacenar cualquier tipo de valor.

let frutas = ["manzana", "plátano", "mango"];

let numeros = [1, 2, 3, 4, 5];

Acceso y modificación de elementos:

Se accede a los elementos de un array mediante índices, comenzando desde
0.

console.log(frutas[0]); // Devuelve "manzana"

frutas[2] = "fresa"; // Cambia "mango" por "fresa"

Tamaño del array - propiedad .length :

Esta propiedad indica la cantidad de elementos en el array.

console.log(numeros.length); // Devuelve 5

Métodos básicos:

.push() : Añade uno o más elementos al final del array.

numeros.push(6);

.pop() : Elimina el último elemento del array.

numeros.pop();

.shift() : Elimina el primer elemento del array.

frutas.shift();

.unshift() : Añade uno o más elementos al comienzo del array.

S3. JavaScript 15
 frutas.unshift("uva");

2.6.2 Métodos y Propiedades de Arrays

Métodos para iterar:

.forEach() : Ejecuta una función para cada elemento del array.

// .forEach(callback)
frutas.forEach(fruta => console.log(fruta));

: Crea un nuevo array con los resultados de la llamada a una función

.map()

para cada elemento del array. Con un map, transformamos los elementos
que contiene el array.

// .map(callback)
let cuadrados = numeros.map(num => num * num);

Métodos para buscar:

: Devuelve el primer elemento que cumpla con la función de

.find()

prueba proporcionada.

// .find(callback)
let manzana = frutas.find(fruta => fruta === "manzan
a");

: Crea un nuevo array con todos los elementos que cumplan con
.filter()

la función de prueba.

// .filter(callback)
let frutasConM = frutas.filter(fruta => fruta[0] ===
"m");

.indexOf(): Devuelve el primer índice en el que se encuentra un elemento,

o -1 si no se encuentra.

S3. JavaScript 16
 //.indexOf(elemento)
let indice = frutas.indexOf("plátano");

Métodos para ordenar:

.sort() : Ordena los elementos de un array in situ (modifica el array

original).

// .sort([compareFunction])
frutas.sort();

.reverse() : Invierte el orden de los elementos de un array.

numeros.reverse();

🔍 Good to Know: Si no le especificas una función de comparación a

sort() , el método ordenará los elementos del array convirtiéndolos a
strings y comparando sus secuencias de unidades de código UTF-16. Es
importante tener en cuenta esto porque puede producir resultados
inesperados, especialmente cuando se trabaja con números.

Ejemplo:

let numeros = [10, 2, 15, 1, 23];

numeros.sort();
console.log(numeros); // [1, 10, 15, 2, 23]

Como ves, aunque 10 es menor que 2 cuando se trata de valores

numéricos, cuando se convierten a strings, "10" viene antes de "2" en la
ordenación lexicográfica basada en unidades de código UTF-16.

Del mismo modo, para un array de strings:

let frutas = ["mango", "Manzana", "banana"];

frutas.sort();

S3. JavaScript 17
 console.log(frutas); // ["Manzana", "banana", "mango"]

La razón por la que "Manzana" aparece antes que "banana" a pesar de

que "m" (minúscula) normalmente vendría antes de "M" (mayúscula) en
una ordenación lexicográfica es debido a las unidades de código UTF-16.
Es por esto que, para muchos casos, es recomendable proporcionar una
función de comparación adecuada a sort() para garantizar que los
elementos se ordenen de la manera esperada.

2.6.3 Manipulación de Arrays

Métodos para agregar/quitar elementos:

: Cambia el contenido de un array eliminando, reemplazando o

.splice()

añadiendo elementos.

// .splice(start[, deleteCount[, item1[, item2[,

...]]]])
frutas.splice(1, 0, "kiwi"); // Añade "kiwi" en la pos
ición 1

Copiar y clonar arrays:

.slice() : Devuelve una copia superficial de una porción del array.

//.slice([begin[, end]])
let algunasFrutas = frutas.slice(1, 3);

Spread operator ... : Se utiliza para copiar o combinar arrays.

let frutasClonadas = [...frutas];

Concatenación de arrays:

.concat() : Se utiliza para combinar dos o más arrays.

// .concat(array2[, array3[, ...[, arrayN]]])

let verduras = ["zanahoria", "brocoli"];

S3. JavaScript 18
 let comida = frutas.concat(verduras);

Spread operator ... : También puede usarse para concatenar.

let comida2 = [...frutas, ...verduras];

Transformación de arrays:

.join() : Une todos los elementos de un array en una cadena.

//.join([separador])
let cadenaFrutas = frutas.join(", ");

.toString() : Convierte un array a una cadena de texto.

let strFrutas = frutas.toString();

2.6.4 Arrays Multidimensionales

Creación y acceso a arrays multidimensionales:
Un array multidimensional es un array que contiene uno o más arrays como
elementos.

let matriz = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

console.log(matriz[0][1]); // Devuelve 2

Métodos y manipulación de arrays de arrays:

La manipulación de arrays multidimensionales es similar a la de arrays
simples, pero debes tener en cuenta el nivel adicional de profundidad al
acceder o modificar los elementos.

S3. JavaScript 19
 matriz[1][2] = 10; // Modifica el valor en la segunda fil
a y tercera columna a 10

Puedes usar loops anidados para iterar a través de todos los elementos de un
array multidimensional.

matriz.forEach(fila => {
fila.forEach(valor => {
console.log(valor);
});
});
let dobleMatriz = matriz.map(fila => fila.map(num => num *
2));

💡 Consejo: Es esencial entender la diferencia entre las operaciones que

modifican los arrays originales y las que devuelven un nuevo array. Por ejemplo,
mientras .map() y .filter() devuelven nuevos arrays, .push() , .pop() , .shift() ,
.unshift() , y .splice() modifican el array original.

2.7 Uso Conjunto de Arrays y Objetos

Combinar arrays y objetos es común en JavaScript, especialmente cuando se
trabaja con datos estructurados. Aquí te presentamos cómo trabajar
eficientemente con estas estructuras combinadas.

2.7.1 Iterando Objetos con Métodos de Arrays

Uso de .map(), .filter(), .reduce() en arrays de objetos:
Cuando trabajas con un array de objetos, puedes emplear métodos de arrays
como .map() , .filter() y .reduce() para procesar y transformar los datos.

Supongamos que tenemos el siguiente array de objetos:

let personas = [
{ nombre: "Juan", edad: 30 },
{ nombre: "Ana", edad: 25 },

S3. JavaScript 20
 { nombre: "Luis", edad: 35 }
];

.map(): Crea un nuevo array con los resultados de aplicar una función a
cada elemento del array original.

let nombres = personas.map(persona => persona.nombre);

console.log(nombres); // ["Juan", "Ana", "Luis"]

.filter(): Crea un nuevo array con todos los elementos que cumplan la
condición especificada.

let mayoresDe30 = personas.filter(persona => persona.ed

ad > 30);
console.log(mayoresDe30); // [{ nombre: "Luis", edad:
35 }]

.reduce(): Aplica una función a un acumulador y a cada elemento de un

array (de izquierda a derecha) para reducirlo a un único valor.

let sumaDeEdades = personas.reduce((sum, persona) => su

m + persona.edad, 0);
console.log(sumaDeEdades); // 90

Ordenación de arrays de objetos con .sort():

El método .sort() permite ordenar un array según una función de
comparación. Para ordenar un array de objetos:

personas.sort((a, b) => a.edad - b.edad);

console.log(personas); // Ordena el array "personas" segú
n la edad de forma ascendente

2.7.2 Manipulación de Datos en Formato JSON

S3. JavaScript 21
 JSON es un formato de texto estándar para representar estructuras de datos
basadas en la notación de objetos de JavaScript. Es comúnmente utilizado para
transmitir datos en aplicaciones web ya que es fácil de leer y escribir para
humanos, y fácil de generar y analizar para máquinas.

Ejemplo de objeto en JSON:

{
"nombre": "Alice",
"edad": 25,
"hobbies": ["leer", "correr"]
}

En JavaScript, puedes convertir objetos en cadenas JSON con JSON.stringify() y

convertir cadenas JSON en objetos con JSON.parse() .

Parseo y stringificación de objetos:

JSON.parse(): Convierte una cadena de texto en formato JSON a un

objeto JavaScript.

let datos = '{"nombre": "Juan", "edad": 30}';

let objeto = JSON.parse(datos);
console.log(objeto.nombre); // "Juan"

JSON.stringify(): Convierte un objeto o valor JavaScript a una cadena de

texto en formato JSON.

let persona = { nombre: "Ana", edad: 25 };

let jsonString = JSON.stringify(persona);
console.log(jsonString); // '{"nombre":"Ana","edad":2
5}'

Trabajo con JSON y arrays de objetos:

A menudo, los datos JSON involucran arrays de objetos, lo que permite

representar listas de registros o entidades.

S3. JavaScript 22
 let jsonPersonas = '[{"nombre": "Juan", "edad": 30}, {"nom
bre": "Ana", "edad": 25}]';
let listaPersonas = JSON.parse(jsonPersonas);
console.log(listaPersonas[0].nombre); // "Juan"

Del mismo modo, puedes convertir un array de objetos a una cadena JSON:

let jsonString = JSON.stringify(personas);

💡 Tips: Si bien los objetos y arrays son estructuras flexibles y poderosas en

JavaScript, es importante gestionar y acceder a ellos de manera adecuada para
evitar errores comunes, como la referencia a propiedades no existentes. Además,
al trabajar con JSON, asegúrate de manejar errores potenciales de formato o
sintaxis.

S3. JavaScript 23