읽기에는 길겠지만 다시 한 번 말씀드리겠습니다.
JAVASCRIPT는 어렵습니다. 마지막으로 만났을 때 저는 밝은 눈을 가진 희망에 찬 코더가 "얼마나 힘들 수 있니?"라고 말하면서 야생 정글에 들어서면서 자바스크립트의 세계로 들어서고 있었습니다. 내가 얼마나 틀렸어??. 점점 더 힘들어지고 있어요. (간신히) 살아남고 있어요. 여기 내 여정에 대한 약간 혼란스러운 이야기가 있습니다.

변수: 광기의 시작
변수는 데이터를 저장하거나 조작하는 값을 보유하는 컨테이너입니다. 내 말은, 왜 var, let, const라는 세 가지 방법으로 생성할 수 있습니까? 왜? ES6에서 웃으세요.
var: 그들은 var가 느슨한 대포라고 말했습니다. 확률 게임을 하는 것처럼. 가까이 가지 마세요.
let: 변경될 수 있는 변수에 적합합니다. 관리가 더 쉬워졌습니다.
Const: 동일하게 유지되는 값에 사용됩니다. 움직일 수 없는. 아 — const는 값이 변경될 수 없다는 의미가 아니라, 단지 값을 다시 할당할 수 없다는 의미입니다.
참고: ECMAScript 2015 또는 ES6은 JavaScript의 두 번째 주요 개정판이었습니다.
아, 문자열 연결, Hello 템플릿 리터럴에 작별을 고했습니다. 템플릿 리터럴을 사용하면 이제 ${}를 사용하여 백틱 및 포함 변수를 쉽게 사용할 수 있습니다. 여기서 생활은 조금 더 쉬워졌습니다. 하지만 백틱과 따옴표를 언제 사용해야 하는지 알아내셨나요? 또 다른 마음을 사로잡는 사람.

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

기능: AKA Mr. Reusability, Mr. Maintenanceability...
함수는 작업을 수행하는 일련의 명령문입니다. 함수 키워드, 함수 이름, 매개변수 여부, 중괄호 안의 Js 문으로 구성됩니다.

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

처음에는 간단해 보였습니다. 일부 논리를 캡슐화하고 호출하면(호출이라고 말합니다) 펑! 코딩 중입니다.
그런 다음 ES6에서는 "이것은 화살표 기능입니다. 사용하세요"라고 말했습니다. 화살표 함수는 간단해 보이죠? 함수를 작성하는 간단한 방법입니다. 시간이 좀 걸려서 구문을 알아냈습니다.

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

루프: 무한과 춤을 춥니다.
고통받는 다양한 방법. 루프는 코드 블록을 여러 번 실행할 수 있습니다. 매번 다른 값으로 동일한 코드를 반복해서 실행하려는 경우 유용합니다. 그것들은 많습니다:
1. While 루프: 조건이 true인 동안 계속 루프를 반복합니다. 사악한. 그리고 나는 그것의 사촌인 do-while에 대해 말하는 것이 아닙니다.
2. for Loop: for 루프는 오래됐네요, 친구. 신뢰할 수 있는 for 루프. 너무 친숙해요. 변수를 증가시키는 것을 잊었을 때 무한 루프를 던질 수 있는 매우 안전하고 잠재력이 가득합니다.
3. forEach: 이는 for 루프의 더 멋지고 힙스터 사촌과 같습니다. 카운터가 필요하지 않으며 나를 무한으로 데려가지 않습니다. 남편.
4. & 5. for..in 및 for..of: 하나는 객체를 반복하는 데 적합하고 다른 하나는 배열을 반복하는 데 적합합니다. 계속 뒤섞이고 고통을 통해 배웁니다. 아직 배우는 중입니다.

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

배열: 계속해서 사냥하는 목록
어레이는 매우 유망하게 시작되었습니다. 간단한 항목 목록입니다. 물건을 밀어넣고, 물건을 빼냅니다. 쉽죠?

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

필터, 지도, 찾기 및 나머지 배열 방법을 입력하세요. 그 이후로 내 두뇌는 이전과 같지 않았습니다.
filter() 메서드는 함수에서 제공하는 테스트를 통과하는 요소로 채워진 새 배열을 만듭니다.
find() 메소드는 테스트를 통과한 첫 번째 요소의 값을 반환합니다. 배열 메소드가 너무 많아서 각각에 대한 문서가 필요합니까? 즉, 길이, 스플라이스, 슬라이스, 조인, 팝, 푸시, unshift, 시프트, 맵이 있다는 뜻입니다.. 여기서 멈추겠습니다.

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

객체: 배열의 혼란스러운 사촌
그런 다음 물건이 왔습니다. 객체는 일종의 배열과 비슷하지만 키와 값이 있습니다. 나는 "좋아요, 이걸 처리할 수 있어요."라고 생각했어요. 하지만 JavaScript가 메소드를 추가하자 갑자기 객체가 스스로 작업을 수행하게 되었습니다. 그런 다음 객체 배열이 방정식에 입력되었습니다. 속성에 액세스하기 점 표기법이나 대괄호 표기법을 사용하고 있습니다. 그리고 .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 조작: 실제 투쟁이 시작된 곳
배열과 객체에 자신감을 갖게 되자 “DOM을 조작할 시간이다! 이제 저는 거의 웹 개발자가 되었습니다!” 당신은 아무것도 모른다고 Ygritte는 유명하게 말했습니다.
이건 쉬울 거라고 내가 다시 말했다. 요소를 잡고 변경하면 됩니다. ID라면 getElementbyId가 있습니다. 클래스 getElementsbyClassName도 거기에 있거나 쿼리 선택기와 모든 형제가 있는 클래스가 있습니다.
그리고 전체 addEventListener 비즈니스가 있습니다. 물론, 효과가 있지만 때로는 이벤트가 자신의 마음을 가진 것처럼 시작되는 것처럼 보입니다.
그런 다음 장바구니를 만들어 보았습니다. 며칠이 걸렸고 배운 동료들에게 SOS 신호를 많이 보냈습니다. 여기서는appendChild, RemovalChild, CreatingElements, 요소 잡기, 속성 설정, 스타일 지정, 함수에 대한 함수 호출 등을 수행합니다.
그런 다음 모의 데이터베이스를 대담하게 추가했습니다. 나와 또 배열 조작을 하게 됐어. 접근한다, 밀고 있다, 찾는다, 피곤하다(다시 일어난다).

수입 및 수출: 광기를 대담하게 공유??
어떤 시점에서는 JavaScript를 너무 많이 작성하여 코드를 모듈화해야 했습니다. 가져오기 및 내보내기를 입력하세요.

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

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

코드를 작은 조각으로 나누면 작업이 더 쉬워질 것이라고 생각했습니다. 저는 전혀 몰랐고, 결국 산더미 같은 혼란을 가져오게 될 것입니다.

이제 객체지향 프로그래밍(OOP)을 시작하려고 합니다. 듣기엔 거창해 보이지만, 또 헤매기 전에 주말부터 즐겁게 보내도록 할게요.
끝까지 머물러 주셔서 감사합니다. 목표는 여전히 매일 1% 더 나아지는 것입니다. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode