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

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

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

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 메소드는 고양이에 맞게 오버라이드(재정의)했어요.

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 키워드로 상속도 쉽게 구현할 수 있죠. 👍

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() 메소드를 사용할 수 있어요. 편리하죠? 😊

5. 객체와 프로토타입의 고급 기법 🧙‍♂️

자, 이제 우리는 객체와 프로토타입에 대해 꽤 많이 알게 됐어요. 하지만 아직 더 깊이 들어갈 내용이 남아있어요. 마치 재능넷에서 고급 과정을 배우는 것처럼, 우리도 좀 더 고급 기법들을 살펴볼까요? 🤓

5.1 Object.create()의 두 번째 인자

Object.create() 메소드는 두 번째 인자로 프로퍼티 설명자(Property Descriptor)를 받을 수 있어요. 이를 통해 객체의 속성을 더 세밀하게 제어할 수 있죠.

let person = Object.create(Object.prototype, {
  firstName: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Doe',
    writable: false,
    enumerable: true,
    configurable: false
  },
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    enumerable: true,
    configurable: true
  }
});

console.log(person.firstName);  // "John"
console.log(person.lastName);   // "Doe"
console.log(person.fullName);   // "John Doe"

person.firstName = 'Jane';
console.log(person.fullName);   // "Jane Doe"

person.lastName = 'Smith';      // 에러 발생 안 함, 하지만 값이 변경되지 않음
console.log(person.lastName);   // 여전히 "Doe"

여기서 writable, enumerable, configurable은 각각 속성의 수정 가능 여부, 열거 가능 여부, 삭제 및 속성 변경 가능 여부를 나타내요. 이렇게 하면 객체의 속성을 아주 세밀하게 제어할 수 있답니다! 👨‍🔧

5.2 Object.defineProperty()와 Object.defineProperties()

이 메소드들을 사용하면 이미 존재하는 객체에 새로운 속성을 추가하거나 기존 속성을 수정할 수 있어요.

let car = {brand: 'Toyota'};

Object.defineProperty(car, 'model', {
  value: 'Corolla',
  writable: false
});

Object.defineProperties(car, {
  year: {
    value: 2023,
    writable: true
  },
  color: {
    get: function() {
      return this._color;
    },
    set: function(value) {
      if (typeof value === 'string') {
        this._color = value;
      }
    }
  }
});

console.log(car.model);  // "Corolla"
car.model =  'Camry';  // 변경되지 않음
console.log(car.model);  // 여전히 "Corolla"

car.year = 2024;
console.log(car.year);   // 2024

car.color = 'red';
console.log(car.color);  // "red"
car.color = 123;         // 무시됨
console.log(car.color);  // 여전히 "red"

이렇게 하면 객체의 속성을 아주 세밀하게 제어할 수 있어요. 특히 get과 set을 이용하면 속성에 접근하거나 수정할 때 특별한 로직을 추가할 수 있죠. 👨‍💻

5.3 프록시(Proxy) 객체

ES6에서 도입된 Proxy 객체를 사용하면 객체의 기본적인 동작을 가로채고 재정의할 수 있어요. 이를 통해 객체의 행동을 커스터마이즈할 수 있죠.

let target = {
  name: 'John',
  age: 30
};

let handler = {
  get: function(target, property) {
    console.log(`Getting ${property}`);
    return property in target ? target[property] : 'Property not found';
  },
  set: function(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    if (property === 'age' && typeof value !== 'number') {
      throw new Error('Age must be a number');
    }
    target[property] = value;
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);  // "Getting name" 출력 후 "John" 반환
console.log(proxy.job);   // "Getting job" 출력 후 "Property not found" 반환

proxy.age = 31;           // "Setting age to 31" 출력
proxy.age = '32';         // Error: Age must be a number

이렇게 하면 객체의 속성에 접근하거나 수정할 때 특별한 동작을 추가할 수 있어요. 로깅, 유효성 검사, 기본값 설정 등 다양한 용도로 활용할 수 있죠. 😎

6. 실전 응용: 재능넷 스타일의 객체 모델링 🎨

자, 이제 우리가 배운 내용을 활용해서 재능넷 스타일의 객체 모델을 만들어볼까요? 재능 공유 플랫폼의 핵심 요소들을 객체로 모델링해보겠습니다.

// 사용자 클래스
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.skills = [];
  }

  addSkill(skill) {
    this.skills.push(skill);
  }

  static validateEmail(email) {
    return /\S+@\S+\.\S+/.test(email);
  }
}

// 재능 클래스
class Talent {
  constructor(name, category, difficulty) {
    this.name = name;
    this.category = category;
    this.difficulty = difficulty;
  }

  static categories = ['Music', 'Art', 'Programming', 'Language', 'Sports'];
}

// 수업 클래스
class Lesson {
  constructor(talent, teacher, price) {
    this.talent = talent;
    this.teacher = teacher;
    this._price = price;
    this.students = [];
  }

  get price() {
    return this._price;
  }

  set price(value) {
    if (value < 0) throw new Error('Price cannot be negative');
    this._price = value;
  }

  addStudent(student) {
    if (this.students.length >= 5) {
      throw new Error('Class is full');
    }
    this.students.push(student);
  }
}

// 사용 예시
let john = new User('John Doe', 'john@example.com');
let guitar = new Talent('Guitar', 'Music', 'Intermediate');
john.addSkill(guitar);

let guitarLesson = new Lesson(guitar, john, 50);
let jane = new User('Jane Smith', 'jane@example.com');
guitarLesson.addStudent(jane);

console.log(john);
console.log(guitarLesson);
console.log(User.validateEmail('test@example.com'));  // true

이 모델에서는 사용자(User), 재능(Talent), 수업(Lesson) 클래스를 정의했어요. 각 클래스는 필요한 속성과 메소드를 가지고 있죠. 특히 주목할 만한 점들을 살펴볼까요?

• User 클래스에는 정적 메소드 validateEmail이 있어요. 이메일 유효성을 검사하는데 사용할 수 있죠.
• Talent 클래스에는 정적 속성 categories가 있어요. 가능한 카테고리 목록을 저장하고 있죠.
• Lesson 클래스에는 getter와 setter를 사용해 price 속성을 제어해요. 음수 가격을 설정하려고 하면 에러가 발생해요.
• Lesson 클래스의 addStudent 메소드는 학생 수를 제한하고 있어요. 5명 이상이 되면 에러가 발생하죠.

이렇게 객체 지향 프로그래밍을 활용하면 복잡한 시스템도 체계적으로 모델링할 수 있어요. 각 객체의 책임이 명확히 구분되고, 코드의 재사용성과 유지보수성이 높아지죠. 👍

7. 마무리: 객체와 프로토타입의 미래 🔮

자, 우리는 지금까지 자바스크립트의 객체와 프로토타입에 대해 깊이 있게 살펴봤어요. 기본 개념부터 시작해서 고급 기법까지, 정말 긴 여정이었죠? 하지만 이게 끝이 아니에요. 자바스크립트는 계속 발전하고 있고, 객체와 프로토타입 관련 기능도 계속 개선되고 있어요.

앞으로 우리가 주목해야 할 몇 가지 트렌드가 있어요:

1. 클래스 필드 제안: 클래스 내에서 바로 필드를 선언할 수 있게 하는 제안이 진행 중이에요. 이렇게 되면 생성자 함수가 더 간결해질 거예요.
2. Private 필드: 진정한 의미의 private 필드를 클래스에 추가하는 제안도 있어요. 이를 통해 캡슐화가 더욱 강화될 거예요.
3. Decorators: 클래스와 클래스 멤버에 메타데이터를 추가하거나 그 동작을 수정할 수 있는 Decorator 문법이 제안되고 있어요.

이런 변화들은 자바스크립트를 더욱 강력하고 표현력 있는 언어로 만들어갈 거예요. 하지만 근본적으로 자바스크립트의 객체 지향적 특성은 변하지 않을 거예요. 프로토타입 기반 상속은 여전히 자바스크립트의 핵심이 될 테니까요.

자, 이제 우리의 긴 여정이 끝났어요. 객체와 프로토타입이라는 복잡한 주제를 함께 탐험해봤죠. 어떠셨나요? 처음에는 어려워 보였지만, 하나씩 알아가다 보니 그리 어렵지만은 않았죠?

여러분이 이 지식을 가지고 멋진 프로그램을 만들어내길 바라요. 마치 재능넷에서 새로운 재능을 익혀 세상을 더 풍요롭게 만드는 것처럼 말이에요. 코딩의 세계에서 여러분의 무한한 가능성을 펼쳐보세요! 🚀🌟

행운을 빕니다, 그리고 즐거운 코딩 되세요! 👋😊