🌟 JavaScript 정리 끝판왕 🔥 (기초부터 고급, 비동기까지)

📌 1. JavaScript란?

HTML은 구조, CSS는 디자인,
JavaScript는 동작을 담당하는 언어입니다!

• 버튼 클릭 시 알림창 띄우기
• 사용자가 입력한 값 처리
• 서버에서 데이터 가져오기
• HTML 태그를 동적으로 생성하기
  이런 모든 일을 JavaScript가 해요!

 

 

---

🔤 2. 기본 문법

✅ 변수 선언

let name = "철수";
const age = 20;

키워드	설명
var	옛 방식 (사용 자제)
let	변경 가능한 변수
const	한 번만 선언 가능한 상수

---

✅ 함수 정의

function sayHello() {
  console.log("안녕!");
}

✅ 조건문 & 반복문

if (age >= 18) {
  console.log("성인입니다");
}

for (let i = 0; i < 3; i++) {
  console.log(i);
}

 

---

🧩 3. DOM 조작 (HTML과 연결)

<button onclick="sayHi()">눌러봐!</button>

<script>
  function sayHi() {
    alert("안녕하세요!");
  }
</script>

• document.getElementById("id") → 요소 선택
• addEventListener("click", 함수) → 이벤트 연결

 

---

🧱 4. 배열 & 객체

✅ 배열

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // 사과

자주 쓰는 메서드

• push(), pop()
• filter(), map()
• forEach(), includes()

 

---

✅ 객체

 

let person = {
  name: "영희",
  age: 23,
  sayHi: function() {
    console.log("안녕!");
  }
};

console.log(person.name); // "영희"

---

🚀 5. 화살표 함수 & 구조 분해

✅ 화살표 함수

const add = (a, b) => a + b;

✅ 구조 분해 할당

 

const add = (a, b) => a + b;

---

📂 6. JSON

서버와 데이터를 주고받을 때 사용하는 형식

 

let obj = { name: "철수", age: 22 };
let json = JSON.stringify(obj); // 객체 → JSON 문자열
let parsed = JSON.parse(json);  // JSON 문자열 → 객체

---

⏳ 7. 비동기 처리 (Async)

🔁 setTimeout

setTimeout(() => {
  console.log("3초 후 출력!");
}, 3000);

 

---

📦 Promise

 

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("완료!");
  }, 2000);
});

myPromise.then(result => console.log(result));

---

⚡ async / await

async function fetchData() {
  let res = await fetch("https://api.example.com/data");
  let data = await res.json();
  console.log(data);
}

---

🌐 fetch (API 요청)

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data));

---

✅ 전체 요약표

구분	핵심 내용
변수	let, const 사용
함수	일반 함수, 화살표 함수
배열	map(), filter(), forEach()
객체	키-값 쌍, 메서드 포함 가능
구조 분해	const { name } = person;
DOM	버튼, 이벤트 처리 등
JSON	서버와 데이터 주고받기
비동기	setTimeout, Promise, async/await, fetch

 

---