JavaScript 함수 & DOM

🛠️ 함수(Function) 기본 개념

• JavaScript에서 함수는 일급 객체(First-class citizen)
  → 변수에 할당 가능, 매개변수로 전달 가능, 반환값으로 사용 가능
• 배열의 요소나 객체의 프로퍼티로도 저장할 수 있음
• 매개변수 개수와 무관하게 호출 가능

---

📚 함수 정의 방법

✔ 함수 선언식 (Function Declaration)

function funcName(param1, param2) {
    // 실행 내용
}

• 함수명 필수

• 호이스팅 발생 → 선언 이전에 호출 가능

✔ 함수 표현식 (Function Expression)

const funcName = function(param1, param2) {
    // 실행 내용
};

• 익명 함수 가능

• 호이스팅 안 됨 → 선언 이후에만 호출 가능

🔁 선언식 vs 표현식 비교

구분	선언식(Function Declaration)	표현식(Function Expression)
호출 시점	선언 전 호출 가능	선언 후 호출 가능
호이스팅	O	X
형태	이름 있는 함수	이름 없는(익명) 함수 가능

---

🔄 함수 실행 흐름

[함수 정의] → [함수 호출] → [실행] → [값 반환 (return)]

• 함수는 호출되기 전까지 메모리에 저장만 되어 있음

• 호출되면 실행(Invoking)되고 결과를 반환

---

📥 함수의 리턴(Return)

• return 키워드로 실행 결과를 반환

• 반환값이 없으면 undefined 반환

function add(a, b) {
    return a + b;
}

---

📞 함수 호출(Call)

• 선언된 함수를 호출해서 실행

• 함수 자체를 다른 함수의 매개변수로 넘기거나 반환할 수도 있음

function callAnother(fn) {
    fn();
}

---

📦 함수 매개변수(Parameter)

• 매개변수 개수와 인자 개수가 다르더라도 호출 가능

• 함수 내부에서 arguments 객체로 인자 접근 가능

• ES6 이후 기본 매개변수(default parameter) 지원

function greet(name = 'Guest') {
    console.log('Hello, ' + name);
}

---

🏹 화살표 함수 (Arrow Function)

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

• 더 간결한 함수 문법

• this가 선언 당시의 스코프를 따른다 (lexical this)

📚 Array Helper Methods

• forEach, map, filter, reduce, find, some, every 등

• 함수형 프로그래밍 스타일의 배열 처리

---

🌳 DOM(Document Object Model) 이해하기

📄 DOM이란?

• HTML 문서를 객체로 표현한 구조화 모델(Tree Structure)

• 문서(Document)의 각 요소를 객체(Object)로 다루어 조작 가능

• 상단의 document 객체를 통해 접근

---

🌟 DOM 트리 구조 (사진 해석)

[document]
    └── [html]
         ├── [head]
         └── [body]
             ├── [h1]
             ├── [div]
             │    ├── [p]
             │    └── [img]
             └── [footer]

• DOM은 노드(Node) 형태로 계층적 구조를 가진다

---

📦 DOM 주요 객체

객체	설명
window	브라우저 전체 창 (최상위 객체)
document	현재 웹 문서 (HTML 페이지)

---

🖥️ window 객체

• 브라우저 최상위 객체

• window 메서드

  • alert(), confirm(), prompt()
  • open()
  • setTimeout(), clearTimeout()
  • setInterval(), clearInterval()
  • parseInt(), parseFloat()

window는 생략 가능 (window.alert() → alert())

📄 document 객체

• 현재 브라우저에 로드된 HTML 문서를 나타냄

• 웹 페이지 요소에 접근/수정/삭제 가능

document.getElementById('id');
document.querySelector('.class');
document.querySelectorAll('div');

🛠️ DOM 조작 흐름

[접근 (Select)] 
    ↓
[조작 (Manipulation)]
    ├── 생성(Create)
    ├── 추가(Append)
    ├── 수정(Update)
    └── 삭제(Delete)

단계별 설명

• 접근(Select): HTML 요소를 찾는다

• 생성(Create): 새 요소를 만든다

• 추가(Append): 문서 트리에 삽입한다

• 수정(Update): 기존 요소 속성 변경

• 삭제(Delete): 요소 제거

예시 코드

// 접근
const div = document.querySelector('div');

// 생성
const newElement = document.createElement('p');
newElement.textContent = 'Hello World!';

// 추가
div.appendChild(newElement);

// 수정
newElement.textContent = 'Updated Text';

// 삭제
newElement.remove();

---

✅ 최종 요약 정리

• JavaScript 함수는 일급 객체로 취급되어 자유롭게 활용 가능
• 함수 선언식은 호이스팅되며 표현식은 호이스팅되지 않는다
• 화살표 함수는 간결하고 this가 렉시컬(선언 시점) 스코프를 따른다
• DOM은 문서 구조를 트리 형태로 표현하는 모델
• window는 브라우저 전체, document는 웹 문서를 의미
• DOM 조작은 (접근 → 생성/추가/수정/삭제) 흐름으로 진행된다