제니의 프로덕트 블로그

JS는 객체지향 프로그래밍 언어입니다. MDN 공식홈페이지의 JS 참고서를 살펴보면:

In JavaScript, most things are objects, from core JavaScript features like arrays to the browser APIs built on top of JavaScript.

JS에서 아주 중요한 개념인 '배열'부터 '브라우저 API'까지 대부분의 것들이 '객체'라고 하니, 짚고 넘어가지 않을 수 없겠네요.

객체 문법을 본격적으로 공부하기 전, JS에서는 왜 모든 걸 객체로 만드는 건지, 왜 이 객체 문법을 공부해야 하는 건지 궁금해졌습니다!

✨ 객체지향 프로그래밍이란 무엇일까요?

객체지향 프로그래밍은, 자동차를 만드는 공장과 같습니다.

자동차 공장에서는 자동차 도면(class)을 만들어 둘 수 있는데요. 그 도면에 따라 자동차(object)를 여러 대 만들 수 있습니다.

이 자동차들은 같은 도면으로 만들었기에 도면에서 정의한 '자동차라면 갖춰야 할 필수 속성(property)과 기능(method)'을 모두 동일하게 가지고 있을 거예요.

✨ 그럼 왜 '객체'라는 개념으로 데이터를 묶어서 프로그래밍 하는 걸까요?

코드의 재사용성을 높이기 위해서요.

같은 코드를 여기저기 반복해서 작성하면 코드가 엄청 지저분해지고 길어지겠죠!

자주 쓰이는 코드를 미리 모듈화 해 두고 필요할 때 간단히 호출할 수 있도록 하면, 전체적으로 코드가 깔끔해 지고 결국 유지보수 하기 좋아집니다.

✨ 절차지향 프로그래밍과 객체지향 프로그래밍은 어떻게 다를까요?

절차지향 프로그래밍에서는 단계적인 명령문 실행을 중점으로 코드가 구성 됩니다.

// 파스타 레시피 
function makePasta() {
  console.log('물 끓이기');
  console.log('파스타 삶기');
  console.log('재료 섞기');
  console.log('접시에 담기');
}

// 샐러드 레시피 
function makeSalad() {
  console.log('야채 썰기');
  console.log('재료 섞기');
  console.log('접시에 담기');
}

// 파스타랑 샐러드 만들기
makePasta();
makeSalad();

❓ 만약, makeCreamPasta() 라는 함수를 만들고 싶다면, 다시 물끓이기 부터 새로 함수를 정의해야 할까요? 기존에 있었던 makePasta() 라는 함수와 레시피가 모두 겹치는데요?

객체지향 프로그래밍에서는 먼저 객체를 만들고 이 객체들이 서로 상호작용하며 문제를 해결 할 수 있도록 코드가 구성 됩니다.

// 파스타 레시피
class makePasta {
  boilWater() {
    console.log('물 끓이기');
  }

  boilPasta() {
    console.log('파스타 삶기');
  }
  
  mixIngredients() {
    console.log('재료 섞기');
  }
  
  serve() {
    console.log('접시에 담기');
  }
}

// 크림파스타 레시피
class makeCreamPasta extends makePasta {
  addCreamSauce() {
    console.log('크림소스 추가하기');
  }
}

const pasta = new makePasta();
const creamPasta = new makeCreamPasta();

// 기존에 있었던 파스타 레시피를 이용해 크림파스타 만들기
creamPasta.boilWater(); // 물 끓이기
creamPasta.boilPasta(); // 파스타 삶기
creamPasta.mixIngredients(); // 재료 섞기
creamPasta.addCreamSauce(); // 크림소스 추가하기
creamPasta.serve(); // 접시에 담기

✅ 기존에 있었던 makePasta()의 레시피를 모두 받아와 makeCreamPasta()를 간단하게 정의했고, 이제 다른 파스타 레시피도 makePasta()를 활용해서 쉽게 추가할 수 있을 거예요.

✨ 이제 객체를 만들어 봅시다. 4가지 방법이 있습니다.

1. 객체 리터럴(Object Literal)
   : 중괄호 {}를 사용하여 객체를 직접 만드는 방법입니다. 이 방법은 간단하고 빠르게 객체를 생성할 수 있어요.
2. 생성자 함수(Constructor Function)
   : new 키워드와 함께 함수를 사용하여 객체를 만드는 방법입니다. 함수 내부에서 this를 사용하여 속성을 정의하고 객체를 생성합니다.
3. Class
   : ES6부터 도입된 클래스 문법을 사용하여 객체를 만드는 방법입니다. 클래스는 생성자와 메서드를 포함하는 객체를 쉽게 만들 수 있도록 도와줘요.
4. Object.create() 메서드
   : 기존 객체를 프로토타입으로 활용하여 새로운 객체를 만드는 방법입니다.

다양한 상황과 개발자의 선호도에 따라 방법은 다를 수 있습니다. 하지만, 요즘엔 ES6(ECMAScript 2015)부터 도입된 class 문법을 가장 많이 사용합니다.

class 기반의 객체 생성 방법은 객체지향 프로그래밍 개념을 더 명확하게 표현하고, 코드를 구성하는 데 도움을 주기 때문에 많은 개발자들이 선호한다고 하지만,,

전 아직 이해 못했기 때문에 🤷🏼‍♀️ 앞으로 공부를 해 나가며 답을 알아 가보도록 하겠습니다,,^^;

답을 알게 되면 이 포스트에 추가 해 둘게요!