자바스크립트 객체와 프로토타입 상속 🚀

안녕하세요, 여러분! 오늘은 자바스크립트의 핵심 개념 중 하나인 '객체와 프로토타입 상속'에 대해 깊이 파헤쳐볼 거예요. 이 주제는 처음 들으면 좀 어렵게 느껴질 수 있지만, 걱정 마세요! 우리 함께 차근차근 알아가 보겠습니다. 😊

자, 이제부터 우리는 자바스크립트의 세계로 여행을 떠날 거예요. 마치 재능넷에서 새로운 재능을 찾아 떠나는 여행처럼 말이죠! 🌟 재능넷이 다양한 재능을 연결해주듯, 우리도 자바스크립트의 다양한 개념들을 연결해볼 거예요.

잠깐! 혹시 "객체가 뭐야?" "프로토타입은 또 뭐고?" 하고 궁금해하시는 분들! 걱정 마세요. 우리 함께 천천히 알아갈 거예요. 마치 재능넷에서 새로운 재능을 배우듯이 말이죠! 😉

1. 자바스크립트 객체: 우리의 주인공 🦸‍♂️

자, 먼저 '객체'에 대해 알아볼까요? 객체는 자바스크립트의 핵심이에요. 마치 우리 일상생활의 물건들처럼, 자바스크립트의 객체도 여러 가지 특성을 가지고 있죠.

객체란 뭘까요? 간단히 말해서, 관련된 데이터와 함수의 집합이에요.

예를 들어볼까요? 우리가 커피숍에서 주문한 '아메리카노'를 객체로 표현해볼게요:


let americano = {
  name: '아메리카노',
  price: 4500,
  size: 'Grande',
  temperature: 'Hot',
  order: function() {
    console.log(`${this.temperature} ${this.name} 주문이 완료되었습니다!`);
  }
};

이렇게 생긴 게 바로 자바스크립트 객체예요! 😎

여기서 name, price, size, temperature는 객체의 '속성(property)'이고, order는 '메소드(method)'라고 해요. 속성은 객체의 특성을 나타내고, 메소드는 객체가 할 수 있는 행동을 나타내죠.

꿀팁! 객체를 이해하는 좋은 방법은 현실 세계의 물건들을 객체로 상상해보는 거예요. 예를 들어, 여러분의 스마트폰을 객체로 생각해볼까요? 브랜드, 모델, 색상 등이 속성이 되고, 전화걸기, 문자보내기 같은 기능들이 메소드가 되겠죠? 👍

자, 이제 우리는 객체가 뭔지 알았어요. 그럼 이 객체를 어떻게 만들 수 있을까요? 자바스크립트에서는 여러 가지 방법으로 객체를 만들 수 있어요. 가장 간단한 방법부터 알아볼게요!

1.1 객체 리터럴로 객체 만들기

가장 쉽고 직관적인 방법은 '객체 리터럴'을 사용하는 거예요. 아까 본 아메리카노 예제가 바로 이 방법이죠!


let macbook = {
  brand: 'Apple',
  model: 'MacBook Pro',
  year: 2023,
  turnOn: function() {
    console.log('반짝!');
  }
};

이렇게 중괄호 {} 안에 속성과 메소드를 나열하면 객체가 만들어져요. 초간단! 👌

1.2 생성자 함수로 객체 만들기

하지만 같은 종류의 객체를 여러 개 만들어야 한다면? 그럴 때는 '생성자 함수'를 사용해요.


function Smartphone(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
  this.turnOn = function() {
    console.log(`${this.brand} ${this.model} 전원 켜짐!`);
  };
}

let myPhone = new Smartphone('Samsung', 'Galaxy S21', 2021);
let friendPhone = new Smartphone('Apple', 'iPhone 13', 2022);

이렇게 하면 Smartphone 객체를 쉽게 여러 개 만들 수 있어요. 마치 공장에서 제품을 찍어내듯이 말이죠! 🏭

주의! 생성자 함수의 이름은 보통 대문자로 시작해요. 이건 규칙은 아니지만, 개발자들 사이의 약속 같은 거예요. 마치 재능넷에서 서로 예의를 지키는 것처럼요! 😊

1.3 Object.create()로 객체 만들기

또 다른 방법으로 Object.create()를 사용할 수 있어요. 이 방법은 이미 있는 객체를 기반으로 새로운 객체를 만들 때 유용해요.


let vehicleProto = {
  start: function() {
    console.log('부릉부릉!');
  },
  stop: function() {
    console.log('끼이익!');
  }
};

let car = Object.create(vehicleProto);
car.wheels = 4;
car.start(); // "부릉부릉!" 출력

이렇게 하면 car 객체는 vehicleProto의 메소드들을 상속받게 돼요. 이게 바로 프로토타입 상속의 시작이에요! 🚗💨

2. 프로토타입: 객체들의 숨은 연결고리 🔗

자, 이제 프로토타입에 대해 알아볼 차례예요. 프로토타입이라... 뭔가 어려워 보이죠? 하지만 걱정 마세요. 우리가 함께 파헤쳐볼 거예요! 🕵️‍♀️

프로토타입은 자바스크립트 객체들 사이의 연결 고리예요. 모든 자바스크립트 객체는 프로토타입이라는 다른 객체를 참조하고 있죠.

음... 좀 추상적인가요? 그럼 예를 들어볼게요!


let array = [1, 2, 3];
console.log(array.toString()); // "1,2,3" 출력

여기서 우리는 toString() 메소드를 정의한 적이 없는데, 어떻게 사용할 수 있을까요? 바로 프로토타입 덕분이에요!

모든 배열은 Array.prototype이라는 객체를 프로토타입으로 가지고 있어요. 그리고 이 Array.prototype에는 toString(), push(), pop() 등의 메소드가 정의되어 있죠. 우리가 배열을 만들면, 자동으로 이 프로토타입의 메소드들을 사용할 수 있게 되는 거예요!

재미있는 사실! 프로토타입은 마치 재능넷에서 선배들의 노하우를 후배들에게 전수하는 것과 비슷해요. 선배들(프로토타입)이 가진 지식과 기술(메소드와 속성)을 후배들(새로운 객체)이 물려받아 사용하는 거죠! 👨‍🎓👩‍🎓

2.1 프로토타입 체인

프로토타입의 또 다른 중요한 특징은 '프로토타입 체인'이에요. 객체에서 속성이나 메소드를 찾을 때, 자바스크립트는 먼저 객체 자체를 살펴보고, 없으면 그 객체의 프로토타입을 찾아보고, 또 없으면 그 프로토타입의 프로토타입을 찾아보는... 이런 식으로 계속 올라가요.

이걸 그림으로 표현하면 이렇게 될 거예요:

이런 식으로 체인처럼 연결되어 있어서 '프로토타입 체인'이라고 부르는 거예요. 😎

2.2 프로토타입 상속

자, 이제 프로토타입 상속에 대해 알아볼까요? 프로토타입 상속은 기존의 객체를 재사용해서 새로운 객체를 만드는 방법이에요. 이렇게 하면 코드를 재사용할 수 있어서 효율적이죠!

예를 들어볼게요:


// 동물 객체 생성
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
}

// 고양이 객체 생성
function Cat(name) {
  Animal.call(this, name); // Animal 생성자 호출
}

// Cat의 프로토타입을 Animal의 새 인스턴스로 설정
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

// Cat에 특화된 메소드 추가
Cat.prototype.speak = function() {
  console.log(this.name + ' meows.');
}

let kitty = new Cat('Kitty');
kitty.speak(); // "Kitty meows." 출력

이 예제에서 Cat은 Animal을 상속받았어요. 그래서 Cat 객체는 Animal의 속성과 메소드를 사용할 수 있죠. 하지만 speak 메소드는 고양이에 맞게 오버라이드(재정의)했어요.

알쏭달쏭 포인트! Object.create(Animal.prototype)이 뭐하는 거냐고요? 이건 Animal.prototype을 프로토타입으로 하는 새로운 객체를 만드는 거예요. 이렇게 하면 Cat.prototype이 Animal.prototype을 가리키게 되죠. 프로토타입 체인의 시작이에요! 🔗

3. 객체와 프로토타입의 실전 활용 💪

자, 이제 우리는 객체와 프로토타입에 대해 꽤 많이 알게 됐어요. 그럼 이걸 실제로 어떻게 활용할 수 있을까요? 재능넷에서 새로운 재능을 배우듯이, 우리도 이 지식을 활용하는 방법을 배워볼까요? 😉

3.1 메소드 추가하기

프로토타입을 이용하면 이미 만들어진 객체에도 새로운 메소드를 추가할 수 있어요. 예를 들어볼게요:


String.prototype.reverse = function() {
  return this.split('').reverse().join('');
};

console.log("Hello".reverse()); // "olleH" 출력

우와! 이제 모든 문자열에 reverse() 메소드를 사용할 수 있게 됐어요. 😮

주의! 내장 객체의 프로토타입을 수정하는 건 위험할 수 있어요. 다른 코드와 충돌할 수 있거든요. 실제 프로젝트에서는 조심해서 사용해야 해요!

3.2 private 속성 만들기

자바스크립트에서는 기본적으로 모든 속성이 public이에요. 하지만 클로저를 이용하면 private 속성을 만들 수 있죠. 어떻게 하는지 볼까요?


function Counter() {
  let count = 0;  // private 변수

  this.increment = function() {
    count++;
    console.log(count);
  };

  this.decrement = function() {
    count--;
    console.log(count);
  };
}

let counter = new Counter();
counter.increment();  // 1 출력
counter.increment();  // 2 출력
counter.decrement();  // 1 출력
console.log(counter.count);  // undefined

이렇게 하면 count 변수는 외부에서 직접 접근할 수 없어요. 오직 increment()와 decrement() 메소드를 통해서만 조작할 수 있죠. 이런 걸 '캡슐화'라고 해요. 😎

3.3 믹스인(Mixin) 패턴

자바스크립트는 단일 상속만 지원해요. 하지만 믹스인 패턴을 사용하면 여러 객체의 기능을 한 객체에 추가할 수 있어요. 재능넷에서 여러 가지 재능을 조합하는 것처럼 말이죠!


// 믹스인 객체들
let swimmable = {
  swim: function() {
    console.log(`${this.name} is swimming.`);
  }
};

let flyable = {
  fly: function() {
    console.log(`${this.name} is flying.`);
  }
};

// 기본 객체
function Duck(name) {
  this.name = name;
}

// 믹스인 적용
Object.assign(Duck.prototype, swimmable, flyable);

let donald = new Duck('Donald');
donald.swim();  // "Donald is swimming." 출력
donald.fly();   // "Donald is flying." 출력

이렇게 하면 Duck 객체는 swimmable과 flyable의 메소드를 모두 사용할 수 있게 돼요. 꽥! 🦆

4. 최신 자바스크립트와 객체 지향 프로그래밍 🚀

자바스크립트는 계속 발전하고 있어요. ES6(ECMAScript 2015)부터는 객체 지향 프로그래밍을 더 쉽게 할 수 있는 문법들이 추가됐죠. 이제 그 내용들을 살펴볼게요!

4.1 클래스(Class) 문법

ES6에서는 class 키워드가 도입됐어요. 이를 통해 더 직관적으로 객체를 만들 수 있게 됐죠. 예를 들어볼게요:


class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 부모 클래스의 constructor 호출
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog = new Dog('Rex');
dog.speak(); // "Rex barks." 출력

이렇게 하면 더 명확하게 객체의 구조를 볼 수 있어요. 그리고 extends 키워드로 상속도 쉽게 구현할 수 있죠. 👍

알아두세요! 클래스 문법은 '문법적 설탕(Syntactic sugar)'이라고 불러요. 즉, 기존의 프로토타입 기반 상속을 더 보기 좋게 포장한 것뿐이에요. 내부적으로는 여전히 프로토타입을 사용하고 있답니다!

4.2 getter와 setter

ES6에서는 getter와 setter를 더 쉽게 정의할 수 있게 됐어요. 이를 통해 속성에 접근하거나 수정할 때 특별한 동작을 추가할 수 있죠.


class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value <= 0) {
      throw new Error('반지름은 양수여야 합니다!');
    }
    this._radius = value;
  }

  get area() {
    return Math.PI * this._radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.radius); // 5
console.log(circle.area);   // 약 78.54

circle.radius = 10;
console.log(circle.area);   // 약 314.16

circle.radius = -1; // Error: 반지름은 양수여야 합니다!

이렇게 하면 radius를 설정할 때 유효성 검사를 할 수 있고, area는 실시간으로 계산되는 값을 반환할 수 있어요. 👀

4.3 정적 메소드(Static Method)

클래스에 정적 메소드를 추가할 수도 있어요. 정적 메소드는 클래스의 인스턴스가 아닌 클래스 자체에 속한 메소드예요.


class MathOperations {
  static add(x, y) {
    return x + y;
  }

  static multiply(x, y) {
    return x * y;
  }
}

console.log(MathOperations.add(5, 3));      // 8
console.log(MathOperations.multiply(4, 2)); // 8

이렇게 하면 MathOperations 클래스의 인스턴스를 만들지 않고도 add()와 multiply() 메소드를 사용할 수 있어요. 편리하죠? 😊