Javascript 很難（有悲傷）

This will be a long read but Let me say it again.
JAVASCRIPT is hard. last we met, i was stepping into the world of Javascript, bright-eyed, hopeful coder stepping into the wild jungle saying "How hard could it be?". How wrong i was??. It got harder, I'm surviving (barely), here's a little chaotic story about my journey.

Variables: beginning of madness
Variables are containers that holds values, where you store or manipulate data. I mean, why do we have 3 ways to create them: var, let, and const? why? laugh in ES6.
var: They said var is a loose cannon. like playing a game of chance. Don't go near it.
let: Great for variables that can change. Easier to manage.
Const: is for values that stay the same. immovable. Ohh — const doesn't mean the value can’t change, it just means you can’t reassign it.
Note: ECMAScript 2015 or ES6 was the second major revision to JavaScript.
Ooh, we said goodbye to String Concatenation, Hello Template Literals. With Template literals You can now use backticks and embed variables easily with ${}. Life became a little easier here, but figuring out when to use backticks vs quotes? Another mind-bender.

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

Functions: AKA Mr. Reusability, Mr. Maintainability...
A Function is a set of statement that performs a task. Consists of the function keyword, function name, parameter or not, Js statement in curly bracket.

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

They seemed simple at first: encapsulate some logic, call it (i say invoke it), and boom! You’re coding.
Then ES6 said "This is arrow functions, use it". Arrow functions look simple, right? Just a short way to write functions. Took a while i got the syntax.

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

Loops: Dancing with the Infinite.
The Many Ways to Suffer. Loops can execute a block of code a number of times. They are handy, if you want to run the same code over and over again, each time with a different value. They are many:
1. While Loop: keeps looping as long as the condition is true. Evil. and I'm not talking about its cousin, do-while.
2. for Loop: Good old for loop, my man. the trusty for loop. So familiar. So safe and So full of potential to throw infinite loops when you forget to increment a variable.
3. forEach: which is like the for loop’s cooler, more hipster cousin. It doesn’t need counters, doesn't take me to infinite. my man.
4. & 5. for..in and for..of: One’s great for looping over objects, the other is meant for iterating over arrays. I keep mixing them up and i learn through pain. still learning.

//for loop
for (let i = 0; i < 10; i++) {
  console.log(i); // Simple. Right? RIGHT?!
}

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

Arrays: The list that keeps hunting
Arrays started out so promisingly. A simple list of items. Push things in, pull things out. Easy, right?

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

Enter filter, map, and find and the rest of the array method gang. My brain hasn’t been the same since.
The filter() method creates a new array filled with elements that pass a test provided by a function.
The find() method returns the value of the first element that passes a test. Array methods are so many, i need documentation for each?, i mean there's length, splice, slice, join, pop, push, unshift, shift, map.., lets stop here.

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

Objects: The Confusing Cousin of Arrays
Then came objects. Objects are kind of like arrays, but with keys and value. I was like, “Cool, I can handle this.” But then JavaScript threw in methods, and suddenly objects were doing things on their own. And then array of objects entered the equation. Accessing properties I'm either using dot notation or bracket notation. And don't get me started with .this

//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']

DOM Manipulation: Where the Real Struggles Began
Once I felt confident with arrays and objects, I thought, “Time to manipulate the DOM! I’m practically a web developer now!” You know nothing, Ygritte famously said.
This should be easy, i said again. Just grab an element and change it. If its an ID, getElementbyId is there for me. A class getElementsbyClassName is also there or queryselector and the one with All its brother.
And then there’s this whole addEventListener business. Sure, it works, but sometimes, events seem to fire off like they have a mind of their own.
Then i tried creating a shopping cart. Took me days and lots of SOS signal to my learned colleagues. Here I'm appendChild, removingChild, creatingElements, grabbing elements, setting attributes, styling, calling functions upon functions.
Then boldly added a mock database; me and array manipulation again. I'm accessing, I'm pushing, I'm finding, I'm tired (gets up again).

Imports and Exports: Boldly sharing the Madness??
At some point, I had written so much JavaScript that I needed to modularize my code. Enter import and export.

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

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

I thought breaking my code into smaller pieces would make it easier. Little did I know, I would end up importing a mountain of confusion.

Now I'm about to start Object-Oriented Programming (OOP) sounds fancy, But let me enjoy my weekend first before i get lost again.
Thanks for staying till the end. The goal still remains 1% better everyday. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode

以上是Javascript 很難（有悲傷）的詳細內容。更多資訊請關注PHP中文網其他相關文章！