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

2.1 객체와 프로토타입

1. 객체란 무엇인가요?

객체는 현실 세계의 사물을 코드로 표현한 것입니다. 예를 들어, 사람은 이름, 나이, 키 같은 속성(데이터)과 걸어다니기, 말하기 같은 행동(함수)을 가지고 있습니다.

예시

let 사람 = {
  이름: "철수",
  나이: 10,
  인사하기: function () {
    console.log("안녕하세요! 저는 " + this.이름 + "입니다.");
  }
};

console.log(사람.이름); // 결과: 철수
사람.인사하기(); // 결과: 안녕하세요! 저는 철수입니다.
    

설명: 사람 객체는 이름, 나이라는 속성과 인사하기라는 행동을 가지고 있습니다. this는 현재 객체를 가리키는 특별한 키워드입니다.

2. 프로토타입이란?

프로토타입은 객체가 공통으로 사용할 속성이나 메서드를 정의하는 틀입니다. 자바스크립트는 상속이라는 기능을 제공하며, 객체들이 프로토타입을 통해 재사용할 수 있습니다.

예시: 프로토타입 상속

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

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

let 강아지 = new 동물("강아지");
강아지.소리내기(); // 결과: 강아지가 소리를 냅니다!
    

설명: 동물은 프로토타입을 가지고 있으며, 소리내기 메서드를 모든 동물이 공통으로 사용합니다. 비유: 프로토타입은 가족 유전자를 물려받는 것과 같습니다.

 

---

 

2.2 클로저(Closure)

1. 클로저란 무엇인가요?

클로저는 함수가 외부 함수의 변수에 접근할 수 있는 기능입니다. 비유: 외부 함수의 변수는 비밀 금고이고, 클로저는 금고의 열쇠를 가진 특수한 함수입니다.

예시

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

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

설명: 금고 함수는 비밀번호라는 변수를 내부에 숨깁니다. 열쇠는 비밀번호에 접근할 수 있는 클로저입니다.

2. 클로저 활용: 비공개 데이터

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

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

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

설명: 잔액 변수는 외부에서 직접 접근할 수 없고, 오직 입금과 출금 메서드로만 변경할 수 있습니다.

 

---

 

2.3 비동기 처리

1. 비동기란 무엇인가요?

비동기 처리는 한 작업이 끝나기를 기다리지 않고 다른 작업을 계속 진행하는 것입니다. 비유: 음식을 주문한 후 기다리는 동안 다른 일을 하는 것.

동기 처리 예시

console.log("주문 받기");
for (let i = 0; i < 1000000000; i++) {} // 시간이 오래 걸림
console.log("음식 준비 완료!");
    

설명: 동기 처리에서는 모든 작업이 끝나야 다음으로 넘어갑니다.

비동기 처리 예시

console.log("주문 받기");
setTimeout(function () {
  console.log("음식 준비 완료!");
}, 3000); // 3초 뒤 실행
console.log("다른 일 하기");
    

설명: 비동기 처리에서는 시간이 오래 걸리는 작업(음식 준비)이 끝날 때까지 다른 작업(다른 일 하기)을 진행합니다.

2. 콜백 함수란?

콜백 함수는 어떤 일이 끝난 뒤 실행되는 함수입니다.

예시

function 음식준비(완료) {
  console.log("음식 준비 중...");
  완료(); // 음식 준비가 끝나면 호출
}

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

3. 프로미스(Promise)

프로미스는 비동기 작업을 처리할 때 사용하는 객체입니다. 비유: 프로미스는 배달 시간 보장처럼 "약속"을 뜻합니다.

예시

let 음식약속 = new Promise(function (resolve, reject) {
  let 준비완료 = true;

  if (준비완료) {
    resolve("음식이 준비되었습니다!");
  } else {
    reject("음식 준비 실패!");
  }
});

음식약속
  .then(function (결과) {
    console.log(결과);
  })
  .catch(function (오류) {
    console.log(오류);
  });
    

4. async/await

async/await는 프로미스를 더 쉽게 작성할 수 있게 도와줍니다.

예시

async function 음식주문() {
  console.log("음식 주문 중...");
  let 결과 = await 음식약속;
  console.log(결과);
}

음식주문();
// 결과: 음식 주문 중...
//       음식이 준비되었습니다!
    

 

---

 

2.4 이벤트 루프와 태스크 큐

1. 이벤트 루프란?

자바스크립트는 단일 쓰레드로 동작합니다. 한 번에 한 가지 일만 처리할 수 있지만, 이벤트 루프가 이를 관리합니다. 비유: 이벤트 루프는 주방장이 배달 주문과 홀 손님 주문을 순서대로 처리하는 과정입니다.

예시

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

setTimeout(function () {
  console.log("두 번째 작업");
}, 0);

console.log("세 번째 작업");
// 결과: 첫 번째 작업 → 세 번째 작업 → 두 번째 작업
    

설명: setTimeout은 비동기 작업으로 태스크 큐에 들어갑니다. 이벤트 루프가 메인 작업이 끝난 뒤 태스크 큐에서 setTimeout을 처리합니다.

연습 문제

• 객체와 메서드

  let 자동차 = {
    브랜드: "현대",
    모델: "아반떼",
    주행: function () {
      console.log(this.브랜드 + " " + this.모델 + "가 달립니다!");
    }
  };
  
  자동차.주행(); // 결과: ?
              

• 클로저

  function 카운터() {
    let 숫자 = 0;
  
    return function () {
      숫자++;
      console.log("현재 숫자: " + 숫자);
    };
  }
  
  let 증가 = 카운터();
  증가(); // 결과: ?
  증가(); // 결과: ?
              

• 비동기 처리

  function 늦게인사() {
    setTimeout(function () {
      console.log("안녕하세요!");
    }, 2000);
  }
  
  console.log("시작");
  늦게인사();
  console.log("끝");
  // 결과는?