객체지향프로그래밍 in Javascript ?

정혜인·2024년 8월 3일

기초공부

목록 보기
6/18

💨 javascript는 그럼?

객체지향프로그래밍에 대해 찾아보다가, 어떤 곳에서는 객체지향프로그램이 아니라고 하고, 어떤 곳에서는 객체지향이라는 것은 개념에 불과하기 때문에 객체지향 이다/아니다로 구분할 수 없다고 하고, 어떤 곳에서는 객체지향을 지원한다고 하는 것을 보았다.

학교의 프로그래밍구조론 수업 첫 시간에 교수님께서 파이썬과 C++의 차이를 설명하며 차이점 중 객체지향을 언급해주신 적이 있었는데, 그렇다면 javascript는 뭘까? 하는 고민을 했었던 것이 기억나 이번에 제대로 찾아보게 되었다.


💥 결론부터

🗣 javascript는 명령형선언형 패러다임을 모두 포함!

🗣 javascript: 프로토타입 기반의 객체지향 프로그래밍 언어
**(Java, C++ 등은 클래스** 기반의 객체지향 프로그래밍 언어)


💦 명령형 vs 선언형 프로그래밍

⭕ 명령형 프로그래밍

💡 내가 어떻게 (how) 할 것인지

💡 절차적, 객체지향적 프로그래밍을 포함하는 개념

// 명령형 프로그래밍

const arr = ['yellow banana', 'red apple', 'black banana'];
function getBananas() {
  const bananas = [];
  for (let i = 0; i < arr.length; i++){
  	if (arr[i].includes('banana'))
      bananas.push(arr[i]);
  }
  return bananas;
}
getBananas(); // ["yellow banana", "black banana"]
  • 💫 if, for 등의 예약어를 사용
  • 💫 선언형 프로그래밍보다 속도가 빠를 때도 O
  • 💫 코드 길이 ↑, 가독성 bad😡

⭕ 선언형 프로그래밍

💡 내가 무엇을 (what) 할 것인지

💡 논리형, 함수형 프로그래밍을 포함하는 개념

const arr = ['yellow banana', 'red apple', 'black banana'];
const getBananas = array => array.filter(el => el.includes('banana'));
getBananas(arr); // ["yellow banana", "black banana"]
  • 💫 선언형 프로그래밍보다 속도가 빠를 때도 O
  • 💫 코드 길이 ↓, 가독성 good😍

💦 프로토타입 기반 객체지향 프로그래밍?

🗣 초기 자바스크립트에는 클래스라는 개념 자체가 없었지만, es6부터 클래스가 도입되었음

🗣 하지만 es6의 클래스는 프로토타입으로 구현되었고, 쉽게 말해 클래스를 흉내내고 있는 것이기에 클래스 기반 객체지향 프로그래밍이라고 볼 수 없음
(js의 클래스 = 클래스의 탈을 쓴 프로토타입)

⭕ 프로토타입

💡 객체를 효율적으로 생성하는 방법을 다루는 패턴 중 하나

💡 객체를 생성할 때 원본이 되는 객체를 복사해서 생성하는 패턴

⭕ js에서의 객체(object)는 함수?!

const person = new Object({
	name: "hyein",
	age: 23,
});

js에서 이런 식으로 Object를 생성하면 함수를 사용해서 객체를 생성해줌

  • typeof Object 콘솔 출력 결과
    console.log(Object); //ƒ Object() { [native code] }
    console.log(typeof Object); // "function"

🔥 js에서 Object함수(function)!
(Java와 같은 클래스 기반 객체지향 언어였다면 Object는 Class였을 것)

⭕ 함수를 이용한 클래스 생성?

function User () {}

const hyein = new User();

console.log(hyein ); //User { __proto__: Object }
console.log(typeof hyein); //object

js에서는 함수를 사용하여 객체를 생성하기 때문에, 위처럼 function 으로 클래스를 생성하는 것처럼 표현 가능

🔥 but, 이 경우 변수 hyeinfunction User 를 복제한 것이 아닌, User 함수의 프로토타입 객체를 복제한 것

js에서 객체는 함수를 사용해서 만들어지고, 객체는 함수의 프로토타입 객체를 복제하여 생성됨

참고하면 좋을 링크 : https://evan-moon.github.io/2019/10/23/js-prototype/


💨 새로 알게된 내용

✨ javascript의 유래

❗ javascript는 ‘script’ 언어

⭕ script 언어?

💡 이미 존재하는 프로그램을 제어하기 위해 사용되는 언어

❗ ⇒ javascript : 브라우저를 제어하기 위해 탄생한 언어

0개의 댓글