🎸 자바스크립트

📜 역사

• 원래는 브라우저 전용 언어로 시작
• 이후 크롬의 V8 엔진을 기반으로 한 Node.js가 등장하며 서버에서도 사용 가능 → 자바스크립트 독립!

🌐 관련 기술

• AJAX: 비동기 통신의 대표 기술, 자바스크립트를 활용해 페이지 새로고침 없이 데이터 교환
• jQuery: DOM 조작, AJAX 요청을 간편하게 처리해주는 라이브러리
• Node.js: 서버 사이드에서 자바스크립트를 실행할 수 있게 만든 런타임

🧱 DOM 프로그래밍

• HTML 문서 구조를 자바스크립트에서 다루는 방법
• DOM 트리를 탐색/조작해서 화면 내용을 실시간으로 바꾸는 기술

---

🔧 주요 연산자

• 비교 연산자: ==, ===, !=, !==, <, >, <=, >=
• 대입 연산자: =, +=, =, =, /=, %= 등
• 비트 연산자: &, |, ^, ~, <<, >>, >>>
• 타입 점검: typeof, instanceof
• 삭제 연산자: delete (객체의 프로퍼티 제거)

---

❗️특이한 점

• OOP 언어 같지만 완전한 OOP는 아님
  • 클래스는 생겼지만, 프로토타입 기반 언어
• 불리언 타입이 멋대로인 경우 있음

  Boolean(0) // false
  Boolean([]) // true
  Boolean("") // false
  Boolean("0") // true

• 암묵적 형 변환이 자유로움

  "5" - 1 // 4
  "5" + 1 // "51"
  null == undefined // true

---

🔁 반복 및 조건문

• for, while, do...while
• if, switch
• forEach: 배열을 순회
• for...in: 객체의 키 순회
• for...of: 배열(이터러블) 순회

🔎  for..in vs for..of

const arr = ['사과', '바나나', '체리'];
const obj = { a: 1, b: 2, c: 3 };

// for...in : 객체나 배열의 "키(인덱스)" 순회
console.log('for...in with array');
for (let index in arr) {
  console.log(index, arr[index]);  // index는 0, 1, 2
}

console.log('for...in with object');
for (let key in obj) {
  console.log(key, obj[key]);  // key는 'a', 'b', 'c'
}

// for...of : 배열이나 이터러블의 "값" 순회
console.log('for...of with array');
for (let fruit of arr) {
  console.log(fruit);  // '사과', '바나나', '체리'
}

// for...of는 객체에는 직접 사용할 수 없음 → 에러 발생
// for (let value of obj) { ... } ❌
// 객체에서 값을 순회하려면 Object.values(obj) 또는 Object.entries(obj) 사용

console.log('for...of with Object.entries');
for (let [key, value] of Object.entries(obj)) {
  console.log(key, value);  // 'a' 1, 'b' 2, 'c' 3
}

📘 자바스크립트 함수 정리

---

1. 🧾 명시적 함수 정의 (Function Declaration)

function sayHello(name) {
  console.log('안녕, ' + name);
}

sayHello('강아지'); // 출력: 안녕, 강아지

• 함수 이름이 있어야 함 (sayHello)
• 호이스팅(끌어올림)이 일어나므로, 함수 선언 이전에 호출 가능

---

2. 🙈 익명 함수 정의 (Function Expression)

const sayBye = function(name) {
  console.log('잘가, ' + name);
};

sayBye('고양이'); // 출력: 잘가, 고양이

• 이름 없는 함수를 변수에 할당해서 사용하는 방식
• 함수 자체는 익명이며, 변수명이 곧 함수 이름 역할
• 호이스팅 X → 선언 이전에 호출하면 에러

---

3. 🎯 람다 함수 (화살표 함수, Arrow Function)

const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3)); // 출력: 5

한 줄이면 return 생략 가능

const square = x => x * x;

console.log(square(4)); // 출력: 16

특징

• function 키워드를 쓰지 않음
• this가 바인딩되지 않음 (상위 스코프의 this를 사용)
• 간결한 문법 덕분에 콜백 함수나 간단한 처리에 자주 사용됨

---

✍️ 정리

구분	키워드	호이스팅	this 바인딩	사용 예
명시적 함수	function	O	함수 내부 this	일반적인 함수 정의
익명 함수	function	X	함수 내부 this	변수에 담아 사용하는 함수
화살표 함수 (람다)	=>	X	상위 스코프의 this	짧고 간결한 함수, 콜백 등