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

2.1 객체와 프로토타입

객체란?

객체는 데이터를 묶어서 관리하는 도구입니다.

• 객체는 속성(데이터)과 메서드(함수)를 포함합니다.
• 속성: 객체의 특징을 나타냄 (예: 이름, 나이).
• 메서드: 객체가 할 수 있는 행동 (예: 걷기, 말하기).

왜 객체가 중요한가?

• 데이터를 구조적으로 관리할 수 있음.
• 코드 재사용성이 높아짐.

비유:

• 객체는 자동차와 같음.
• 속성: 브랜드, 색상, 최고속도
• 메서드: 출발하기, 멈추기

기본 예제: 사람 객체

let 사람 = {
  이름: "철수",
  나이: 10,
  걷기: function () {
    console.log(this.이름 + "가 걷고 있습니다.");
  }
};

console.log(사람.이름); // 결과: 철수
사람.걷기(); // 결과: 철수가 걷고 있습니다.

프로토타입이란?

프로토타입은 공통 기능을 상속하기 위해 사용하는 틀입니다.

• 객체는 부모 프로토타입의 메서드와 속성을 "물려받습니다".

왜 필요한가?

• 공통 기능을 반복 작성하지 않아도 됨.
• 코드가 더 간결하고 효율적으로 동작함.

비유:

• 프로토타입은 공통 유전자와 같음.
• 예: 모든 사람은 눈, 코, 입을 가지고 있음.

활용 예제

function 동물(종류) {
  this.종류 = 종류;
}

동물.prototype.소리내기 = function () {
  console.log(this.종류 + "가 소리를 냅니다!");
};

let 강아지 = new 동물("강아지");
let 고양이 = new 동물("고양이");

강아지.소리내기(); // 결과: 강아지가 소리를 냅니다!
고양이.소리내기(); // 결과: 고양이가 소리를 냅니다!

---

2.2 클로저(Closure)

클로저란?

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

• 외부 함수가 끝나도, 내부 함수는 외부 변수에 접근할 수 있음.

왜 필요한가?

• 데이터를 숨기고 보호할 수 있음. (캡슐화)
• 함수가 특정 상태를 기억하게 할 수 있음.

비유:

• 클로저는 비밀 금고와 같음.
• 금고 속 내용물은 외부에서 보이지 않지만, 금고 열쇠(내부 함수)를 통해 접근 가능.

기본 예제

function 비밀금고(비밀번호) {
  return function () {
    console.log("비밀번호는 " + 비밀번호 + "입니다.");
  };
}

let 열쇠 = 비밀금고("1234");
열쇠(); // 결과: 비밀번호는 1234입니다.

클로저 활용: 데이터 보호

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

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

let 내계좌 = 은행계좌(1000);
내계좌.입금(500); // 결과: 잔액: 1500
내계좌.출금(200); // 결과: 잔액: 1300

---

2.3 비동기 처리

비동기란?

비동기 작업은 한 작업이 끝나기를 기다리지 않고 다음 작업을 먼저 처리하는 방식입니다.

• 동기 작업은 한 번에 하나씩만 실행.

비유: 비동기는 음식점과 같음. 주문한 뒤 음식을 기다리는 동안 다른 일을 함.

콜백 함수

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

기본 예제

function 음식준비(완료) {
  console.log("음식 준비 중...");
  완료(); // 음식 준비 후 실행
}

음식준비(function () {
  console.log("음식 준비 완료!");
});
// 결과: 음식 준비 중...
//       음식 준비 완료!

프로미스(Promise)

비동기 작업의 성공(resolve)과 실패(reject)를 관리합니다.

기본 예제

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

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

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

async/await

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

기본 예제

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

배달요청();
// 결과: 배달 요청 중...
//       배달 성공!

---

2.4 이벤트 루프와 태스크 큐

이벤트 루프란?

이벤트 루프는 비동기 작업이 실행될 타이밍을 관리합니다.

• 동기 작업이 끝난 뒤 비동기 작업을 실행합니다.

비유: 이벤트 루프는 주방장과 같음. 주문을 처리하고, 시간이 오래 걸리는 작업(예: 요리)을 나중에 실행.

기본 예제

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

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

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

---

복습 문제

객체

아래의 코드를 완성해 "철수는 10살입니다."를 출력하세요.

let 사람 = {
  이름: "철수",
  나이: 10,
  소개하기: function () {
    // 여기에 코드를 작성하세요.
  }
};

클로저

클로저를 활용해 "현재 숫자: 1", "현재 숫자: 2"가 출력되도록 코드를 작성하세요.

function 숫자세기() {
  let 숫자 = 0;

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

let 증가 = 숫자세기();

비동기 처리

setTimeout을 사용해 2초 뒤 "안녕하세요!"가 출력되도록 코드를 작성하세요.

setTimeout(function () {
  // 여기에 코드를 작성하세요.
}, 2000);

---

개념 요약

• 객체: 데이터를 구조화하고, 메서드로 행동을 정의합니다.
• 프로토타입: 공통 속성과 메서드를 상속합니다.
• 클로저: 내부 함수가 외부 함수의 변수를 기억합니다.
• 비동기 처리: 작업을 동시에 실행해 효율성을 높입니다.