0% encontró este documento útil (0 votos)
30 vistas

Java Script

Este documento explica conceptos básicos de JavaScript como variables, tipos de datos, operadores, condicionales y bucles. Se describen funciones como console.log() para mostrar mensajes en la consola, y métodos para trabajar con arrays.

Cargado por

eve gil paredes
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
30 vistas

Java Script

Este documento explica conceptos básicos de JavaScript como variables, tipos de datos, operadores, condicionales y bucles. Se describen funciones como console.log() para mostrar mensajes en la consola, y métodos para trabajar con arrays.

Cargado por

eve gil paredes
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 25

for each

matrices y logaritmos

https://www.aprendejavascript.dev/

Java script

En el navegador → About:blank → click en la pagina e inspeccionar

Cadenas de texto → string → comillas simples, dobles o acentuadas.

Las simples y dobles son iguales.

Los acentos aumentan el tamaño del texto.

Mayor, menor o mayor/menor o igual que:

> < <= >=

Igual que → son 3 → ===

Comparadores: true or false.

A es menor que B

Mayúsculas son menores que minúsculas.

False es menor que True

&& → and → solo es true y ambos son true. Sino es false.

|| → or → si hay un true, es true.


¡ → not → cambia el valor de true o falso al inverso.

Variables:

Let → permite cambiar el valor que se le asigna → números, boleanos o textos.

El valor se le puede asignar luego

let numero =

let welcomeText =

let isCool =

ejemplos:

LET numero = 0 → numero siempre será 0.

Let numero = 5 → numero es 5.

Numero + 2 → 5 + 2

Const → el valor se le tiene que asignar desde el inicio.

Si hay uns constante: const → el valor no se puede reasignar.

Const PI = 3,14

No se puede PI = 4 → error.

variables: pueden tener letras, números o _ en el nombre. El primer carácter no


puede ser un numero.
- Son sensibles a mayúsculas y minúsculas.

camelCase → consiste en escribir la primera palabra en minúscula y la otra en


mayúscula.

snake_case → ambas apalabras se escriben en minúsculas separadas por _ → nombres


de archivos. Ya que algunos sistemas operativos distinguen entre mayúsculas y
minúsculas.

(kebab-case -< no variables, si nombrar archivos)

SCREAMING_CASE → ambas se escriben en mayúsculas y separadas por _

SCREAMING_CASE. → variables que no cambian, no usarlo con let.

null → hay que especificar que es nulo.

Undefined → se puede asignar o se asigna si no hay valor

Null == undefined → false

Null == null o undefined == undefined -> true.

Typeof -> devuelve el tipo de variable u operando que se ha usado, es decir, el tipo que
es un operando o el tipo que es un valor. Siempre añadir comillas después de un === y
el tipo de variable o lo que queramos.

typeof con null:

Existe, sin embargo, un valor especial en JavaScript, null, que es considerado un bug en
el lenguaje. El operador typeof devuelve "object" cuando se usa con null:

typeof null // "object"


Lo correcto sería que typeof null devolviera "null", pero es un error histórico que no se
puede corregir sin romper el código existente.

Por eso, si quieres comprobar si una variable es null, debes usar la comparación
estricta === “”

Se pueden usar con comparadores:

Una vez que tenemos expresiones lógicas (typeof ===), podemos empezar a encadenar
operadores lógicos para comprobar múltiples condiciones:

typeof age === "number" && age > 18 // true

Comentarios:

En JavaScript, los comentarios son una forma de agregar explicaciones al código que se
ignora al ejecutar el programa.

Comentarios de una sola línea // → se pueden añadir varios, pero habría que añadir //
por cada línea de comentario.

Comentarios de varias líneas /* */

Los comentarios de varias líneas comienzan con /* y terminan con */. Se utilizan para
agregar notas explicativas que ocupan varias líneas de código.

console.log()

se escribe dentro del paréntesis lo que queremos mostrar, ya sea variable, operador o
comparación.

const nombre = 'JavaScript'

console.log('Hola, ' + nombre)

// -> 'Hola, JavaScript'

Además, puedes mostrar varios mensajes y valores de variables en el mismo


console.log() separándolos por comas.

const nombre = 'JavaScript'


const version = 2023

console.log(nombre, version)

// -> 'JavaScript 2023'

Otros:

console.error(): Imprime un mensaje de error en la consola.

console.warn(): Imprime un mensaje de advertencia en la consola.

console.info(): Imprime un mensaje de información en la consola.

Condicionales:

If → true →

Elementos:

if (condición) {

// código que se ejecuta si la condición es verdadera

Else→ no true

If else → no true else, true if.

Es importante que sepas que las llaves {} no siempre son obligatorios. Si el bloque de
código sólo tiene una línea, puedes omitir las llaves:

Se puede escribir en la misma línea de código.

Se pueden mezclar entre ellos → anidación de condicionales, pero es mejor usar


operadores.

if (edad >= 18) {

if (tieneCarnet) {
console.log('Puedes conducir')

} else {

console.log('No puedes conducir')

Ejemplo mejor

const edad = 17

const tieneCarnet = true

// si es mayor de edad y tiene carnet entonces...

if (edad >= 18 && tieneCarnet) {

console.log('Puedes conducir')

} else {

console.log('No puedes conducir')

While: se ejecuta siempre y cuando se cumple la condición, al menos una vez.

Siempre que sea true, se ejecuta en bucle.

while (condition) {

// código a ejecutar mientras se cumpla la condición

Break→ para el bucle

Continue→ se salta esa línea de código y continua en la siguiente.


Se puede la anidacion e bucles:

const NUMERO_REVISIONES = 3

let cuentaAtras = 10

// mientras la cuenta atrás sea mayor que 0

while (cuentaAtras > 0) {

// mostramos el valor de la cuenta atrás

console.log(cuentaAtras)

// creamos una variable para contar las revisiones realizadas

// y la inicializamos a cero

let revisionesRealizadas = 0

// hasta que no hayamos realizado las 3 revisiones...

while (revisionesRealizadas < NUMERO_REVISIONES) {

// y sumamos 1 a las revisiones realizadas

revisionesRealizadas = revisionesRealizadas + 1

console.log(revisionesRealizadas + ' revisiones realizadas...')

// ahora podemos restar 1 a la cuenta atrás

cuentaAtras = cuentaAtras - 1

}
Se puede usar let con los bucles.

Do while→ variable de bucle al menos una vez.

Confirm → permite establecer una respuesta entre dos opciones → true o false.

Ejemplo.

let respuesta

do {

respuesta = confirm("¿Te gusta JavaScript?");

} while (respuesta)

Expresiones → una variable o valor que puede cambiar. ← condicionales.

Declaraciones→ una variable o expresión únicos

For → condicional cuando el contador llega a x numero de veces establecido.

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

// código a ejecutar

Ejemplo:

El siguiente ejemplo muestra cómo se puede usar for para imprimir los números del 1 al
10:
for (let number = 1; number <= 10; number++) {

console.log(number)

La inicialización es la declaración de la variable number y la asignación del valor 1.

La condición es que mientras number <= 10, se itera el bucle.

La actualización es number++ que incrementa el valor de number en 1 después de cada


iteración.

Se pueden usar dos variables a la vez.

Se usa break y continue tmbn

Se pueden anidar bucles de for.

+y-

++ → aumenta en uno

Es una forma abreviada de escribir i = i + 1. Y, como ves, es la forma más típica de usar
en bucles como for para no tener que escribir i = i + 1 cada vez.

-- disminuye en 1

!== x → hasta x umero.

Switch → ejecutar diferentes bloqeus de códigos, según la expresion.

switch (expresión) {

case valor1:

// código a ejecutar si la expresión coincide con valor1


break

case valor2:

// código a ejecutar si la expresión coincide con valor2

break

default:

// código a ejecutar si la expresión no coincide con ningún valor

break

Ejemplo:

const dia = "lunes"

switch (dia) {

case "lunes":

console.log("¡Hoy es lunes! 😢")

break

default:

console.log("No es lunes, YAY! 🚀")

break

}
En JavaScript podemos recuperar la información de la hora y la fecha usando el objeto
Date. Este objeto tiene un método llamado getDay() que nos devuelve el día de la
semana en formato numérico, siendo 0 el domingo y 6 el sábado.

Ejemplo:

const dia = new Date().getDay()

// segun el dia de la semana, mostramos un mensaje diferente

switch (dia) {

case 0:

console.log("¡Hoy es domingo! 😴")

break

case 1:

console.log("¡Nooo, es lunes! 😢")

break

case 2:

console.log("¡Hoy es martes! 🥵")

break

case 3:
console.log("¡Hoy es miércoles! 🤓")

break

default:

console.log("Se acerca el fin de! 🚀")

break

Se pueden ejecutar el mismo caso. Ejemplo:

const dia = new Date().getDay()

switch (dia) {

case 0:

case 6:

console.log("¡Hoy es fin de semana! 🥳")

break

case 1:

case 2:

case 3:

case 4:

console.log("¡Nooo, a trabajar! 😢")

break
case 5:

console.log("¡Hoy es viernes! 🤓")

break

Si no se pone break, se ejecutan todos los casos, HAY que ponerlo.

El patrón switch(true)

Existe un patrón que se usa a veces con switch que es switch(true). Esto es, en lugar de
evaluar una expresión, evalúa una condición ignorando por completo el valor de la
expresión.

No evalua la condición, sino la frase.

Arrays → conexión de elementos.

Para declarar un array usamos los corchetes [] y dentro los elementos de la colección
separados por comas ,. Se pueden datos diferentes o arrays dentro de otros.

Las posiciones empiezan en 0.

Para modificar los valores del array, se accede a la posición y se cambia el valor.

Si hay una variable constante se puede modificar los elementos internos de array, es
decir, el resultado de la posición,, pero sin modificar la constante.

Propiedades arrays:

nombrearray.length → se puede asignar la longitud que mostrar.


Metodos: funciones de los arrays para trabajar con ellos.

Nombrearrey.funcion (nombre elementos/objeto) → nuevo elemento en ultima posicion


→ nueva longitud ← .unshift() → igual pero al principio del array.

Nombrearrey.pop (nombre elementos/objeto) → eliminar el nuevo elemento en ultima


posicion → nueva longitud ← .shift() → igual pero al final de array.

Se pueden añadir varios elementos, siempre con comas.

Concatenar arrays → unir dos arrays.

const numbers = [1, 2, 3]

const numbers2 = [4, 5]

const allNumbers = numbers.concat(numbers2) (primero la variable donde quereoms


añadir y luego la que se añade entre paréntesis)

Otra forma de concatenar arrays es usando el operador ... (spread operator). Este
operador propaga los elementos de un array. Así que podríamos hacer lo siguiente:

const numbers = [1, 2, 3]

const numbers2 = [4, 5]

// 1, 2, 3 4, 5

const allNumbers = [...numbers, ...numbers2]

console.log(allNumbers) // [1, 2, 3, 4, 5]
ejercicio:

En un restaurante se reciben pedidos de comida a domicilio. Vamos a escribir una


función procesarPedido que recibe un pedido, que es un array de platos. Lo que
debemos hacer es:

El primer elemento lo sacamos del array, ya que es el nombre del cliente.

Añadimos al principio del array la cadena de texto "bebida", ya que es una promoción
que tenemos.

Después añadimos al final del array el nombre del usuario que sacamos antes.

Recuerda que debes devolver el array modificado:

Iteración de Arrays en JavaScript

Con índice:

While de array → repite de eleento en elemento.

For → ejecutar un código de array x veces, muestra todos los elementos o como while.

Para sacar los elementos, sin tener que poner le índice → For… of →

.foreach() → a partir de una funcion, ofrece los elementos del indice.

Buscar en arrays

El método indexOf te permite encontrar la posición de un elemento dentro de un Array.


Si el elemento no existe, entonces retorna -1.

El método includes determina si un Array incluye un determinado elemento,


devolviendo true o false según corresponda.

El método .some te permite verificar si al menos uno de los elementos de un Array


cumple con una condición.
Para utilizarlo, le pasas una función como argumento. Esta función recibe como
argumento cada uno de los elementos del Array y debe retornar un valor booleano.

Si al menos uno de los elementos retorna true, entonces el método some retorna true. Si
ninguno de los elementos retorna true, entonces el método some retorna false.

El método every te permite verificar si todos los elementos de un Array cumplen con
una condición. Es similar a some, pero en lugar de verificar si al menos uno de los
elementos cumple con la condición, los verifica todos.

Para utilizarlo, le pasas una función como argumento. Esta función recibe como
argumento el elemento del array que está iterando en ese momento y debe retornar un
valor booleano para saber si el elemento cumple con la condición.

El método find te permite encontrar el primer elemento que cumple con una condición.
Lo interesante es que este método te devuelve el elemento en sí, no un valor booleano
como some y every. Aunque el funcionamiento es igual: hay que pasarle una función
como argumento que retorne un valor booleano.

findIndex: Devuelve el índice del primer elemento que cumple con la condición

Ordenar arrays

JavaScript proporciona un método incorporado en arrays llamado .sort() para ordenar


sus elementos. Por defecto no es muy útil pero puedes personalizar su comportamiento
para que ordene los elementos de la manera que necesites. Ordena según su valor como
cadena, no como valor numérico.

1. Para personalizar cómo sort() ordena los elementos, puedes pasar una función de
comparación como argumento. La función de comparación debe devolver:
.sort() modifica el array original. Si quieres obtener un array ordenado sin modificar el
original, puedes usar el método .toSorted(). Sólo ten en cuenta que, ahora mismo, su
soporte en navegadores es limitado .

2. Operador de propagación (...) para crear una copia del array original y ordenarla:

Transformar arrays

Filter:

El método filter crea un nuevo array con todos los elementos que devuelven true al
ejecutar una función que le pasamos como parámetro.

Map:

El método map crea un nuevo array de la misma longitud que el original, pero con los
elementos transformados por una función que le pasamos como parámetro. Así que la
función recibirá cada elemento del array y tendremos que devolver el elemento
transformado.

map + filter: Un nuevo Array con los elementos transformados y filtrados

reduce: Un solo valor a partir de un array. El método reduce es un poco más complejo
que los anteriores. Este método te permite crear un único valor a partir de un Array.

Matrices:

Acceso a los Elementos de una Matriz

Para acceder a los elementos de una matriz, necesitaremos utilizar dos índices: uno para
la fila y otro para la columna.

El 0 siempre es el primero.

Iteración sobre Matrices → anidaciones de bucles. Puedes usar otros bucles para iterar
sobre una matriz, como un bucle while o un bucle for...of. También puedes utilizar el
método forEach() de los arrays para iterar sobre una matriz, pero tendrás que anidar dos
llamadas a forEach() para iterar sobre todos los elementos de la matriz.

Algoritmos:
Para encontrar un array determinado, hay que recorrer todos los elementos del array.

En programación se usa la notación O(n) para indicar que el número de operaciones que
se realizan es igual al número de elementos del array. En este caso, n es el número de
elementos del array.

Búsqueda binaria algoritmos:

Existe un algoritmo muy popular llamado búsqueda binaria que nos permite encontrar
un elemento en un array ordenado en O(log n). Es decir, el número de operaciones que
se realizan es igual al logaritmo del número de elementos del array

Implementación de la búsqueda binaria: consiste en dividir el array en dos mitades. Si el


elemento que estamos buscando es mayor que el elemento de la mitad del array,
tenemos que buscar en la mitad derecha. Si el elemento que estamos buscando es menor
que el elemento de la mitad del array, tenemos que buscar en la mitad izquierda. Y así
sucesivamente hasta encontrar el elemento que estamos buscando.

Objetos

Para declarar un objeto usamos las llaves {} y dentro las propiedades y métodos
separados por comas ,. Cada propiedad o método se define con una clave y un valor
separados por dos puntos :.

Ejemplo:

const persona = {

name: 'Dani',

age: 30,

isWorking: true

Los objetos s e pueden anidar, para ello hay que añadir el método o propiedad y abrir
llave dentro de la llave final, abriendo y cerrando con su propia llave.
Y, claro, como hemos comentado antes, también podemos tener funciones. Cuando una
función es parte de un objeto se le llama método.

Ejemplo:

walk: function () { // <- método

console.log('Estoy caminando')

Propiedades y metodos

Para acceder a las propiedades y métodos de un objeto usamos el punto . y el nombre de


la propiedad o método.

Si intentamos acceder a una propiedad o método que no existe, nos devolverá


undefined.

usan cuando en el nombre de

const persona = { name: 'Dani' }

console.log(persona.name) // Dani

Puedes usar variables para acceder a las propiedades y métodos de un objeto. Para ello,
tienes que usar la notificación por corchetes [posición del valor especifico]. También se
usa cuando hay espacios en las propiedades, ya que hay que poner comillas y si se usa el
punto, las propiedades van sin comillas y da error.

Ejemplo:

const persona = { “nombre persona”, : 'Dani' }

persona.nombre persona → error

Ejemplo 2:

persona [nombre persona] -> Dani.


Ejemplo 3:

const persona = {name: 'Dani' }

persona[name] → Dani

Acceso con variables

Se puede acceder a un valor con la variable.

Añadir y eliminar propiedades objetos

Añadir → nombre.nombrepropiedad = valor que queremos añadir.

Quitar → nombre.nombrepropiedad = valor.

Ejemplo:

const persona = { name: 'Dani' }

persona.age = 30

console.log(persona) // -> { name: 'Dani', age: 30 }

eliminar propiedad-> delete nombre.nombrepropiedad → se elimina en su totalidad del


objeto original y de todos los sitios de la propiedad.

Atajos para trabajar con objetos

Se puede solo mencionar la propiedad si el valor se llama igual. Todas las propiedades
de pueden tener en una misma linea.

Destructuración: el atajo al recuperar propiedades


A la hora de acceder a las propiedades existe un atajo llamado desestructuración (o
destructuring en inglés) muy interesante que nos permite recuperar el valor de una
propiedad y guardarlo en una variable de una.

Lo importante es que tengamos en cuenta que la variable que se creará tendrá el mismo
nombre que la propiedad que estamos recuperando.

const { universe } = spiderman

console.log(universe) // 42

Además, puedes recuperar tantas propiedades como quieras, separándolas por comas.

const { universe, name, powers } = spiderman

console.log(universe) // 42

console.log(name) // 'Spidey'

console.log(powers) // ['web', 'invisibility', 'spider-sense']

Renombrar variables y valores por defecto

const { universe: universeNumber } = spiderman

console.log(universeNumber) // 42

La variable universeNumber antes no existía, aunque le tengamos el mismo valor.

El valor por defecto es indefinido, si no se le asigna nada.

Si la propiedad no existe, podemos asignarle un valor por defecto:

const { name, isAvenger = false } = Spiderman.

Le decimos que no es un Avenger.

La variable de una propiedad nueva va, atener el valor que le hayamos dado.

Ejemplo: ahora va a salir que Avenger es false, no es.

Objetos anidados y atajo

Para acceder a las propiedades de un objeto anidado, podemos usar la notación de


corchetes o la notación de punto:
console.log(spiderman.partner.name) // 'Mary Jane'

console.log(spiderman['partner']['name']) // 'Mary Jane'

Si queremos recuperar la propiedad name del objeto partner y guardarla en una


variable, podemos hacerlo así:

const { partner } = spiderman

const { name } = partner

console.log(name) // 'Mary Jane'

o se puede hacer en la misma línea → const { partner: { name } } = spiderman

console.log(name) // 'Mary Jane'

y así tenemos la nueva variable independiente «name», que la hemos sacado de partner.

Bucle de objetos → for...in

Itinera sobre las propiedades de un objeto. → lo que contiene.

El for of de los arrays permite recrear en bucle los elementos de un objeto → lo que lo
forma.

Transformar un objeto en un array

Métodos:

Object.keys() -> devuelve las propiedades numerables de un objeto.

Object.values() → devuelve los valores de las propiedades enumerables.

Object.entries() -> retorna las propiedades y los valores, es decir, todo.

Operador de Encadenamiento Opcional

Se usan para evitar que una propiedad de un objeto que no existe rompa la aplicación.
El error fatal de intentar leer una propiedad de undefined → Evitando el error con if,
para comprobar si esta propiedad existe o no con anterioridad.

if (typeof gamesystem.specifications === 'object') {

console.log(gamesystem.specifications.ram)

} else {

console.log('No hay especificaciones')

¡Cuidado con esto! Al usar el operador typeof con un valor null nos dice que es object.
Esto es un error histórico del lenguaje. Así que si la propiedad specifications es null, el
if se ejecutará y obtendremos un error al intentar acceder a ram. Para evitar esto,
podemos añadir una comprobación extra: gamesystem.specifications !== null.

El operador in para comprobar si una propiedad existe → true o false.

console.log('name' in gamesystem) // -> true

ofrece si existe o no la propiedad, pero no si el valor es o no indefinido, hay que


comprobarlo de forma externa.

if (

'specifications' in gamesystem &&

gamesystem.specifications !== undefined &&

gamesystem.specifications !== null) {

console.log(gamesystem.specifications.ram)

} else {

console.log('No hay especificaciones')


}

El operador de Encadenamiento Opcional, ?.

Si la propiedad specifications no existe, el operador ?. devuelve undefined y no se


produce ningún error. Si la propiedad existe, el operador ?. devuelve el valor de la
propiedad.

Sirve para leer el valor de una propiedad.

Ejemplo:

const gamesystem = {

name: 'PS5',

price: 550,

specs: {

cpu: 'AMD Ryzen Zen 2',

gpu: 'AMD Radeon RDNA 2',

console.log(gamesystem.specifications?.cpu)

// -> undefined

console.log(gamesystem.specs?.cpu)

// -> AMD Ryzen Zen 2

Uno de los principales beneficios del operador de encadenamiento opcional es que


simplifica nuestro código y lo hace más legible. En lugar de tener que hacer varias
comprobaciones para asegurarnos de que un objeto y sus propiedades existen, podemos
intentar acceder directamente a la propiedad que nos interesa, y JavaScript no se quejará
si no existe.

También podría gustarte