[자바스크립트 학습] 고급 5일차

2.1 객체와 프로토타입

1. 객체란?

객체는 데이터를 구조화해서 관리하기 위한 도구입니다.

• 예: 사람, 동물, 자동차 같은 사물을 프로그래밍으로 표현.
• 객체는 속성(데이터)과 행동(함수)을 가집니다.

왜 필요한가?

• 많은 데이터를 묶어서 효율적으로 관리할 수 있습니다.
• 재사용성을 높이고, 유지보수를 쉽게 만듭니다.

어떤 곳에서 쓰이는가?

• 사용자 정보 관리: 사용자 이름, 나이, 이메일 등.
• 게임: 캐릭터 속성(체력, 공격력 등) 관리.
• 쇼핑몰: 상품 정보(가격, 이름, 재고 등) 관리.

2. 프로토타입이란?

프로토타입은 객체들이 공통으로 속성과 기능을 상속받도록 도와주는 템플릿입니다.

• 비유: 부모가 자식에게 물려주는 유전자.

왜 필요한가?

• 같은 기능을 가진 메서드를 여러 객체에 반복 작성하지 않아도 됩니다.
• 객체끼리 메모리를 공유하며 효율적으로 동작합니다.

어떤 곳에서 쓰이는가?

• 모든 배열에 공통으로 사용하는 메서드(map, filter 등).
• 클래스 기반 프로그래밍에서 공통 메서드 상속.

개념 정리

• 객체: 데이터를 담고 있는 상자. (속성 + 함수)
• 프로토타입: 객체들이 공통으로 기능을 공유하는 템플릿.

실제 사용 예시

function 자동차(브랜드, 모델) {
  this.브랜드 = 브랜드;
  this.모델 = 모델;
}

자동차.prototype.달리기 = function () {
  console.log(this.브랜드 + " " + this.모델 + "가 달립니다!");
};

let 차1 = new 자동차("현대", "아반떼");
let 차2 = new 자동차("기아", "소렌토");

차1.달리기(); // 현대 아반떼가 달립니다!
차2.달리기(); // 기아 소렌토가 달립니다!

---

2.2 클로저(Closure)

1. 클로저란?

클로저는 함수 안의 함수가 바깥 함수의 변수를 기억하고 사용할 수 있는 기능입니다.

• 바깥 함수가 종료되어도, 내부 함수는 바깥 변수에 접근 가능합니다.

왜 필요한가?

• 데이터를 캡슐화하고, 외부 접근을 제한할 수 있습니다.
• 데이터 보안 및 재사용성을 높입니다.

어떤 곳에서 쓰이는가?

• 은행 계좌 시스템: 잔액을 외부에서 변경하지 못하도록 보호.
• 버튼 클릭 횟수 저장: 버튼이 몇 번 눌렸는지 추적.

개념 정리

• 클로저: 내부 함수가 외부 함수의 변수를 기억하는 것.
• 캡슐화: 데이터를 숨기고, 안전하게 관리.

실제 사용 예시

function 카운터() {
  let 숫자 = 0;

  return function () {
    숫자++;
    console.log("현재 숫자: " + 숫자);
  };
}

let 증가 = 카운터();
증가(); // 현재 숫자: 1
증가(); // 현재 숫자: 2

활용 예시: 비공개 데이터

function 은행계좌(초기잔액) {
  let 잔액 = 초기잔액;

  return {
    입금: function (금액) {
      잔액 += 금액;
      console.log("잔액: " + 잔액);
    },
    출금: function (금액) {
      잔액 -= 금액;
      console.log("잔액: " + 잔액);
    }
  };
}

let 계좌 = 은행계좌(1000);
계좌.입금(500); // 잔액: 1500
계좌.출금(300); // 잔액: 1200

---

2.3 비동기 처리

1. 비동기란?

작업이 끝날 때까지 기다리지 않고, 다음 작업을 먼저 처리하는 방식입니다. 예: 배달 음식을 기다리는 동안 다른 일을 하는 것.

왜 필요한가?

• 오래 걸리는 작업(파일 읽기, 데이터베이스 요청 등) 동안 프로그램이 멈추지 않도록 하기 위해.

어떤 곳에서 쓰이는가?

• 서버 요청: 쇼핑몰에서 상품 데이터 가져오기.
• 파일 읽기: 이미지나 동영상 파일 처리.
• 실시간 채팅: 메시지를 보내고 받을 때.

2. 콜백 함수

작업이 끝난 뒤 실행되는 함수입니다.

문제점: 콜백이 중첩될수록 코드가 복잡해지는 "콜백 지옥" 문제가 발생합니다.

function 주문(음식, 완료) {
  console.log(음식 + " 준비 중...");
  setTimeout(() => {
    완료(); // 음식 준비가 끝나면 실행
  }, 2000);
}

주문("피자", function () {
  console.log("피자 준비 완료!");
});

3. 프로미스(Promise)

비동기 작업의 성공(resolve)과 실패(reject)를 처리하는 객체입니다.

let 배달 = new Promise(function (resolve, reject) {
  let 준비완료 = true;

  if (준비완료) {
    resolve("배달 성공!");
  } else {
    reject("배달 실패!");
  }
});

배달
  .then((결과) => console.log(결과))
  .catch((오류) => console.log(오류));

4. async/await

프로미스를 더 읽기 쉽게 작성할 수 있는 방법입니다.

async function 배달요청() {
  try {
    console.log("배달 요청 중...");
    let 결과 = await 배달;
    console.log(결과);
  } catch (오류) {
    console.log(오류);
  }
}

배달요청();

---

2.4 이벤트 루프와 태스크 큐

1. 이벤트 루프란?

비동기 코드와 동기 코드의 실행 순서를 관리하는 자바스크립트의 핵심 메커니즘입니다. 동기 작업이 끝난 뒤 비동기 작업을 실행합니다.

왜 필요한가?

• 작업이 동시에 실행되지 않도록 순서를 관리합니다.

어떤 곳에서 쓰이는가?

• 브라우저 이벤트 처리: 버튼 클릭, 키 입력.
• 서버 응답 처리: 데이터가 도착하면 실행.

개념 정리

• 이벤트 루프: 작업 실행 순서를 관리.
• 태스크 큐: 비동기 작업을 저장하는 공간.

실제 사용 예시

console.log("첫 번째 작업");

setTimeout(function () {
  console.log("비동기 작업 실행");
}, 0);

console.log("두 번째 작업");
// 결과: 첫 번째 작업 → 두 번째 작업 → 비동기 작업 실행

---

개념 요약

• 1. 객체와 프로토타입은 데이터를 효율적으로 관리하고 재사용성을 높입니다.
• 2. 클로저는 데이터를 보호하고 캡슐화합니다.
• 3. 비동기 처리는 작업을 병렬로 처리하며, 콜백, 프로미스, async/await로 관리합니다.
• 4. 이벤트 루프는 작업의 실행 순서를 조정합니다.