[FE 45] _23.05.11 _ Day 22 (JS_객체 지향 프로그래밍)

---

오늘은 벌써 목요일 한주가 빠르게 지나간다.

---

---

객체

객체의 상태를 나타내는 '변수'

객체의 행동을 나타내는 '함수'

 

객체지향 프로그래밍

프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것.

 

절차지향 프로그래밍

변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것

 

프로퍼티

객체(Object)가 가지는 특징이나 상태를 나타내는 값(Value)입니다.

객체는 프로퍼티들의 집합으로 이루어져 있습니다.

프로퍼티는 이름(Key)과 값(Value)으로 구성되며, 객체 내부에서는 이름을 사용하여 프로퍼티에 접근할 수 있습니다. 자바스크립트에서는 프로퍼티의 이름은 문자열(String) 또는 심볼(Symbol)이 될 수 있습니다.

1. 데이터 프로퍼티(Data Property): 객체가 가지는 상태 정보를 저장합니다. 데이터 프로퍼티는 다시 value, writable, enumerable, configurable 네 가지 속성으로 나뉩니다.

• value: 프로퍼티에 저장된 값입니다.
• writable: 프로퍼티의 값을 변경할 수 있는지 여부를 나타내는 불리언(Boolean) 값입니다.
• enumerable: 프로퍼티가 열거 가능한지 여부를 나타내는 불리언 값입니다.
• configurable: 프로퍼티의 속성을 변경할 수 있는지 여부를 나타내는 불리언 값입니다.

1. 접근자 프로퍼티(Accessor Property): 객체의 상태 정보를 저장하지는 않지만, 객체의 값을 읽거나 쓸 때 호출되는 함수입니다. 접근자 프로퍼티는 get, set 네 가지 속성으로 나뉩니다.

• get: 프로퍼티 값을 읽을 때 호출되는 함수입니다.
• set: 프로퍼티 값을 쓸 때 호출되는 함수입니다.
• enumerable: 데이터 프로퍼티와 동일합니다.
• configurable: 데이터 프로퍼티와 동일합니다.

 

메소드

메소드(Method)는 객체(Object)가 가지는 행동(Action)을 나타내는 함수(Function)입니다.

메소드는 객체에 속해 있으며, 객체가 제공하는 기능을 사용할 수 있도록 도와줍니다.

 

메소드는 객체 리터럴 내부에 함수 형태로 정의할 수 있습니다. 아래는 객체 리터럴 내부에 메소드를 정의하는 예시입니다.

 

const person = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.sayHello(); // 'Hello, my name is John and I am 30 years old.'

위 코드에서 sayHello는 person 객체의 메소드입니다. 메소드 내부에서는 객체의 프로퍼티에 접근하여 값을 사용할 수 있습니다. 위 예시에서는 name과 age 프로퍼티를 사용하여 문자열을 출력하는 기능을 구현하였습니다.

메소드는 객체 리터럴 외부에서도 정의할 수 있습니다. 아래는 생성자 함수를 사용하여 객체를 생성하고, 생성자 함수 외부에서 메소드를 정의하는 예시입니다.

 

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const john = new Person('John', 30);
john.sayHello(); // 'Hello, my name is John and I am 30 years old.'

위 코드에서 Person 함수는 객체를 생성하는 생성자 함수입니다. 생성자 함수 외부에서는 prototype 객체에 메소드를 정의할 수 있습니다. 위 예시에서는 Person.prototype 객체에 sayHello 메소드를 정의하여 객체가 사용할 수 있도록 하였습니다. 이후 new 연산자를 사용하여 john 객체를 생성하고, john 객체에서 sayHello 메소드를 호출하였습니다.

---

추상화 

어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것

객체의 복잡한 세부 사항을 감추고 중요한 부분만 강조하여 간결하게 표현하는 것을 의미합니다. 즉, 객체의 내부 구현을 외부로부터 숨기고, 객체의 핵심 기능에 집중할 수 있도록 하는 것입니다.

 

자바스크립트에서 객체를 추상화하는 방법으로는 클래스(class)와 상속(inheritance)을 사용하는 것이 일반적입니다.

ES6부터는 클래스가 공식적으로 도입되어서, 이전에는 프로토타입 기반으로 구현되었던 객체지향 프로그래밍을 클래스 기반으로 구현할 수 있게 되었습니다.

---

캡슐화(encapsulation)

 

객체의 특정 프로퍼티에 직접 접근하지 못하도록 막는것 .

캡슐화는 객체의 데이터와 메소드를 외부에서 직접적으로 변경하거나 접근하는 것을 막아 코드의 안정성과 유지보수성을 높일 수 있습니다.

 

객체의 프로퍼티와 메소드를 private(비공개)와 public(공개)으로 나누어 접근 권한을 제한합니다.

 

객체를 생성할 때 constructor 내부에서 변수를 선언하여 private으로 만들고,

객체 외부에서는 이 변수에 직접 접근할 수 없도록 getter와 setter 메소드를 제공하는 방법이 있습니다.

이렇게 하면 객체 외부에서는 getter와 setter 메소드를 통해서만 private 변수에 접근할 수 있게 됩니다.

 

function Person(name) {
  // private 변수
  var _name = name;

  // public 메소드
  this.getName = function() {
    return _name;
  }

  this.setName = function(newName) {
    _name = newName;
  }
}

var person1 = new Person("John");
console.log(person1.getName()); // "John"
person1.setName("Alice");
console.log(person1.getName()); // "Alice"
console.log(person1._name); // undefined (private 변수에 직접 접근 불가)

위 예제에서는 Person 함수 내부에서 _name이라는 private 변수를 선언하고, getName과 setName이라는 public 메소드를 제공하여 _name 변수에 접근할 수 있게 합니다. 객체 외부에서는 _name에 직접 접근할 수 없으며, getName과 setName 메소드를 통해서만 _name에 접근할 수 있습니다.

---

상속(Inheritance)

상속(Inheritance)은 객체지향 프로그래밍에서 하위 클래스(Subclass)가 상위 클래스(Superclass)의 특징을 물려받는 것을 의미합니다.

 

상위 클래스에서 정의한 필드와 메소드를 하위 클래스에서 재사용할 수 있게 됩니다. 상속은 코드의 재사용성을 높이고, 코드 중복을 방지하는 등의 장점이 있습니다.

 

자바스크립트에서는 상속을 프로토타입 체인(Prototype chain)을 통해 구현할 수 있습니다. 프로토타입 체인은 객체의 프로토타입(Prototype)이 다른 객체의 프로토타입을 참조하도록 만들어져 있습니다. 이를 이용하여 상속을 구현할 수 있습니다.

 

아래는 자바스크립트에서 상속을 구현하는 예시입니다.

 

// 상위 클래스
class Animal {
  constructor(name) {
    this.name = name;
  }

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

// 하위 클래스
class Dog extends Animal {
  constructor(name) {
    super(name);
  }

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

const dog = new Dog('Puppy');
dog.speak(); // 'Puppy barks.'

위 코드에서 Animal 클래스는 상위 클래스로, Dog 클래스는 Animal 클래스를 상속하는 하위 클래스입니다. Dog 클래스는 Animal 클래스의 필드와 메소드를 상속받으며, speak 메소드를 재정의하여 자신의 동작을 구현합니다. 이후 Dog 클래스의 인스턴스를 생성하고 speak 메소드를 호출하면 하위 클래스에서 재정의한 동작이 실행됩니다.

 

---

다형성(Polymorphism)

객체지향 프로그래밍에서 하나의 인터페이스(Interface)나 추상 클래스(Abstract Class)를 통해 여러 클래스를 사용하는 것을 의미합니다. 즉, 서로 다른 클래스들이 같은 이름의 메소드나 프로퍼티를 가지고 있지만, 각기 다른 동작을 수행하도록 하는 개념입니다. 이를 통해 코드의 가독성과 재사용성을 높일 수 있습니다.

 

자바스크립트에서는 다형성을 프로토타입 체인(Prototype chain)을 통해 구현할 수 있습니다.

아래는 자바스크립트에서 다형성을 구현하는 예시입니다.

 

class Shape {
  getArea() {
    console.log('Shape: This method should be implemented by subclasses.');
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

const shapes = [new Rectangle(10, 20), new Circle(10)];

shapes.forEach(shape => console.log(shape.getArea()));

위 코드에서 Shape 클래스는 추상 클래스로, getArea 메소드를 가지고 있습니다. Rectangle 클래스와 Circle 클래스는 Shape 클래스를 상속하며, 각각 getArea 메소드를 재정의하여 도형의 면적을 계산합니다. 이후 shapes 배열에 Rectangle 인스턴스와 Circle 인스턴스를 추가하고, forEach 메소드를 사용하여 각 도형의 면적을 출력합니다. 이때 Shape 클래스의 getArea 메소드는 Rectangle 클래스와 Circle 클래스에서 재정의되어 실행됩니다.