"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Javascript es DIFÍCIL (con ESadness)

Javascript es DIFÍCIL (con ESadness)

Publicado el 2024-11-06
Navegar:278

Javascript is HARD (with ESadness)

Esta será una lectura larga, pero déjame decirlo de nuevo.
JAVASCRIPT es difícil. La última vez que nos vimos, yo estaba entrando en el mundo de Javascript, un codificador esperanzado y con ojos brillantes que se adentraba en la jungla salvaje y decía: "¿Qué tan difícil podría ser?". Que equivocado estaba??. Se volvió más difícil, estoy sobreviviendo (apenas), aquí hay una pequeña historia caótica sobre mi viaje.

Variables: comienzo de la locura
Las variables son contenedores que contienen valores, donde se almacenan o manipulan datos. Quiero decir, ¿por qué tenemos 3 formas de crearlos: var, let y const? ¿por qué? risa en ES6.
var: Dijeron que var es un arma suelta. como jugar un juego de azar. No te acerques.
let: Ideal para variables que pueden cambiar. Más fácil de gestionar.
Const: es para valores que permanecen iguales. inamovible. Ohh, constante no significa que el valor no pueda cambiar, solo significa que no puedes reasignarlo.
Nota: ECMAScript 2015 o ES6 fue la segunda revisión importante de JavaScript.
Oh, nos despedimos de la concatenación de cadenas, hola, literales de plantilla. Con los literales de plantilla, ahora puede usar acentos graves e incrustar variables fácilmente con ${}. La vida se volvió un poco más fácil aquí, pero ¿descubrir cuándo usar comillas invertidas o comillas? Otro trastorno mental.

// Good old concat
const message = "Hi, "   name   ". You are "   age   " years old.";
// Template literal
const message = `Hi, ${name}! You are ${age} years old.`;

Funciones: También conocido como Sr. Reutilización, Sr. Mantenibilidad...
Una función es un conjunto de declaraciones que realiza una tarea. Consta de la palabra clave de la función, el nombre de la función, el parámetro o no, la declaración Js entre llaves.

function greet() {
  console.log("Hello, fellow strugglers?!");
}

Al principio parecían simples: encapsular algo de lógica, llamarla (digo invocarla) y ¡boom! Estás codificando.
Entonces ES6 dijo "Estas son funciones de flecha, úsalas". Las funciones de flecha parecen simples, ¿verdad? Sólo una forma breve de escribir funciones. Me tomó un tiempo entender la sintaxis.

const greet = () => {
   console.log("Hello, fellow strugglers?!");
}

Bucles: Bailando con el Infinito.
Las muchas maneras de sufrir. Los bucles pueden ejecutar un bloque de código varias veces. Son útiles si desea ejecutar el mismo código una y otra vez, cada vez con un valor diferente. Son muchos:
1. Mientras que Loop: continúa en bucle mientras la condición sea verdadera. Demonio. y no me refiero a su primo, do- while.
2. for Loop: Buen bucle for, amigo. el confiable bucle for. Tan familiar. Tan seguro y tan lleno de potencial para generar bucles infinitos cuando olvidas incrementar una variable.
3. forEach: que es como el primo más cool y hipster del bucle for. No necesita contadores, no me lleva al infinito. mi hombre.
4. & 5. for..in y for..of: uno es excelente para recorrer objetos, el otro está diseñado para iterar sobre matrices. Sigo mezclándolos y aprendo a través del dolor. todavía estoy aprendiendo.

//for loop
for (let i = 0; i  console.log(num));

Arreglos: La lista que sigue buscando
Las matrices comenzaron de manera muy prometedora. Una lista simple de elementos. Empujar cosas hacia adentro, sacar cosas. Fácil, ¿verdad?

let shoppingList = ["apples", "bananas", "chocolate"];
shoppingList.push("ice cream");
console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']

Ingrese filtro, mapa, búsqueda y el resto del grupo de métodos de matriz. Mi cerebro no ha sido el mismo desde entonces.
El método filter() crea una nueva matriz llena de elementos que pasan una prueba proporcionada por una función.
El método find() devuelve el valor del primer elemento que pasa una prueba. Los métodos de matriz son tantos, ¿necesito documentación para cada uno? Quiero decir, hay longitud, empalme, corte, unión, extracción, inserción, desplazamiento, desplazamiento, mapa..., detengámonos aquí.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

Objetos: El primo confuso de las matrices
Luego vinieron los objetos. Los objetos son como matrices, pero con claves y valores. Pensé: "Genial, puedo manejar esto". Pero luego JavaScript agregó métodos y, de repente, los objetos comenzaron a hacer cosas por sí solos. Y entonces una serie de objetos entró en la ecuación. Accediendo a las propiedades, estoy usando notación de puntos o notación de corchetes. Y no me hagas empezar con .este

//Without method
let shoppingCart = {
  apples: 3,
  bananas: 2,
  chocolate: 1
};
// with method
let cart = {
  items: ["apple", "banana"],
  addItem(item) {
    this.items.push(item);
  }
};
cart.addItem("chocolate");
console.log(cart.items); // ['apple', 'banana', 'chocolate']

Manipulación DOM: donde comenzaron las verdaderas luchas
Una vez que me sentí seguro con las matrices y los objetos, pensé: “¡Es hora de manipular el DOM! ¡Ahora soy prácticamente un desarrollador web! No sabes nada, dijo Ygritte.
Esto debería ser fácil, dije de nuevo. Simplemente toma un elemento y cámbialo. Si es una identificación, getElementbyId está ahí para ayudarme. También hay una clase getElementsbyClassName o queryselector y la que tiene All su hermano.
Y luego está todo este asunto de addEventListener. Claro, funciona, pero a veces los eventos parecen desencadenarse como si tuvieran mente propia.
Luego intenté crear un carrito de compras. Me llevó días y mucha señal de SOS a mis eruditos compañeros. Aquí estoy agregandoChild, eliminandoChild, creandoElements, tomando elementos, configurando atributos, aplicando estilo, llamando funciones sobre funciones.
Luego, audazmente, agregó una base de datos simulada; Yo y la manipulación de matrices nuevamente. Estoy accediendo, estoy empujando, estoy encontrando, estoy cansado (se levanta nuevamente).

Importaciones y exportaciones: ¿Compartir audazmente la locura?
En algún momento, había escrito tanto JavaScript que necesitaba modularizar mi código. Ingrese importar y exportar.

Copy code
// module.js
export function greet() {
  console.log("Hello from the module!");
}

// main.js
import { greet } from './module.js';
greet();

Pensé que dividir mi código en partes más pequeñas lo haría más fácil. No lo sabía, terminaría importando una montaña de confusión.

Ahora que estoy a punto de comenzar con la programación orientada a objetos (POO), suena elegante, pero primero déjame disfrutar de mi fin de semana antes de perderme otra vez.
Gracias por quedarte hasta el final. El objetivo sigue siendo un 1% mejor cada día. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode

Declaración de liberación Este artículo se reproduce en: https://dev.to/rockhillz/javascript-is-hard-with-es6-madness-47j9?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3