📘 JavaScript 핵심 문법 정리

---

✅ [1] 변수와 상수: let, const, var

let count = 10;         // 변수 선언 및 초기화
count = 20;             // 변수 값 수정 가능

const count2 = 20;      // 상수 선언 (값 수정 불가)

const obj = { name: "포레스텔라" };        // 객체 저장 가능
const method = () => {};                   // 함수 저장 가능
const forestella = ["배두훈", "강형호", "조민규", "고우림"]; // 배열 저장 가능

// 과거 사용되던 var 키워드
var count3 = 30;
var count3 = 40;        // 중복 선언 가능 → 혼란 유발 → let/const 사용 권장

---

✅ [2] 백틱(``)과 템플릿 문자열

console.log(`Hello, world! ${count}`);

let html = ``;
html += `<div>Hello, world! ${count}</div>`;
console.log(html);

---

✅ [3] 조건문

📌 if - else if - else

const point = 85;

if (point >= 90) {
    console.log("A학점");
} else if (point >= 80) {
    console.log("B학점");
} else {
    console.log("C학점");
}

📌 삼항 연산자

console.log(point >= 90 ? "A학점" : point >= 80 ? "B학점" : "C학점");

📌 단축 평가

console.log(point >= 90 && "A학점"); // 조건이 true면 결과 출력
console.log(point >= 90 || "B학점"); // 조건이 false면 결과 출력

---

✅ [4] 반복문

const array = [10, 20, 30, 40, 50];

📌 for 문

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

📌 for...in (index 반복)

for (let i in array) {
    console.log(array[i]);
}

📌 for...of (값 반복)

for (let value of array) {
    console.log(value);
}

📌 forEach (return 불가)

array.forEach((value) => {
    console.log(value);
});

📌 map (return 가능) ⭐

let newArray = array.map((value) => {
    console.log(value);
    return value;
});
console.log(newArray);

📌 filter (조건에 따라 return) ⭐

let newArray2 = array.filter((value) => {
    console.log(value);
    return value > 20;
});
console.log(newArray2);

---

✅ [5] 함수

📌 선언형 함수

function func1(param1, param2) {}

📌 익명 함수

const func2 = function (param1, param2) {};

📌 화살표 함수

const func3 = (param1, param2) => {};

📌 기본 매개변수

const func4 = (param1, param2 = "배두훈") => {};

📌 함수 호출

func1(4, 10);
func3(100, "Forestella");
func3(100, { name: "Forestella" });

---

✅ [6] 객체

const obj1 = { name: "배두훈", age: "40" };
const obj2 = ["배두훈", "강형호", "조민규", "고우림"];

const name2 = "고우림";
const age2 = "31";

const obj3 = { name2, age2 };

console.log(obj3);         // { name2: '고우림', age2: '31' }
console.log(obj3.name2);   // 고우림
console.log(obj2[1]);      // 강형호

---

✅ [7] 스프레드 연산자 ... ⭐

const obj4 = { ...obj1, phone: "010-0000-0000" };
console.log(obj4);

const obj5 = [...obj2];
console.log(obj5);

const obj6 = [...obj2, "김주택", "박강현", "정필립", "한태인"];
console.log(obj6);

💡 복사된 객체/배열은 새로운 주소값을 가지므로 원본과 독립적

---

✅ [8] 구조 분해 할당 ⭐

const user = { name: "배두훈", age: 40 };
const { name, age } = user;

console.log(name, age); // 배두훈 40

---

✅ [9] 비구조화 할당 + 나머지 연산자 ...

const [num, ...intArray] = [1, 2, 3, 4];

console.log(num);       // 1
console.log(intArray);  // [2, 3, 4]

---

✅ [10] async / await (비동기 처리) ⭐

📌 기본 fetch (비동기)

const method1 = () => {
    fetch("url")
        .then(r => r.json())
        .then(d => console.log(d));
};

📌 async/await (동기처럼 처리)

const method2 = async () => {
    const r = await fetch("url");
    const d = await r.json();
    console.log(d);
};

📌 Promise 사용

const PromiseFunc = async () => {
    return await new Promise((resolve, reject) => {
        if (10 > 13) {
            resolve("10이 13보다 큽니다");
        } else {
            reject("10이 13보다 작습니다");
        }
    });
};