[웹개발] JavaScript 요약

변수 선언

let name = "Alice";   // 변경 가능
const age = 25;       // 변경 불가능
var city = "Seoul";   // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)

자료형

// 기본 자료형 (Primitive Types)
let str = "Hello";    // 문자열
let num = 42;         // 숫자
let bool = true;      // 논리값
let nothing = null;   // 값 없음
let unknown = undefined; // 정의되지 않음
let symbol = Symbol(); // 유일한 값

// 객체 자료형 (Object Types)
let obj = { key: "value" };  // 객체
let arr = [1, 2, 3];         // 배열 (실제론 객체)
let func = function() {};     // 함수 (JavaScript에선 함수도 객체!)

연산자

// 산술 연산자
console.log(5 + 3); // 8
console.log(10 % 3); // 1 (나머지)

// 비교 연산자
console.log(5 == "5");  // true (자동 형 변환)
console.log(5 === "5"); // false (엄격한 비교)

// 논리 연산자
console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false

함수

// 기본 함수
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!

// 화살표 함수
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // Hello, Bob!

제어문(조건문)

let score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}

// switch 문
let color = "blue";
switch (color) {
  case "red":
    console.log("빨강");
    break;
  case "blue":
    console.log("파랑");
    break;
  default:
    console.log("알 수 없음");
}

제어문(반복문)

// for 문
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while 문
let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

// forEach (배열 순회)
let arr = [1, 2, 3];
arr.forEach((num) => console.log(num));

// map (새로운 배열을 반환)
let squared = arr.map((num) => num * num);
console.log(squared); // [1, 4, 9]

객체

let person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};
person.greet(); // Hello, my name is Alice

배열

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // Banana

// 배열 조작
fruits.push("Grapes"); // 추가
fruits.pop(); // 마지막 요소 제거
console.log(fruits.includes("Apple")); // true

비동기 처리

// Promise
let fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("데이터 로드 완료!"), 2000);
});

fetchData.then((result) => console.log(result)); // 2초 후 "데이터 로드 완료!"

// Async/Await(최신 비동기)
async function fetchData() {
  let result = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  let data = await result.json();
  console.log(data);
}
fetchData();

DOM 조작

// HTML 요소 선택
let btn = document.getElementById("myButton");
let items = document.querySelectorAll(".item");

// HTML 변경
let title = document.getElementById("title");
title.innerText = "새로운 제목";

// 이벤트 리스너
btn.addEventListener("click", () => {
  console.log("버튼 클릭됨!");
});

JavaScript ES6+ 최신 문법

// 템플릿 리터럴
let name = "Alice";
console.log(`Hello, ${name}!`);

// 구조 분해 할당
let user = { name: "Bob", age: 30 };
let { name, age } = user;
console.log(name, age); // Bob 30

let colors = ["red", "green", "blue"];
let [first, second] = colors;
console.log(first); // red

// 스프레드 연산자
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

let user1 = { name: "Alice" };
let user2 = { ...user1, age: 25 }; // { name: "Alice", age: 25 }