#3 Object, Class

공부의 기록·2022년 1월 31일

목록 보기

10/16

Introduce

본문은 2022년 1월 31일 에 작성되었습니다.

과거에 Object 클래스를 공부하지 않고 넘어갔습니다.
실제로 이 클래스를 공부하지 않고도 코드를 작성하는 데에는 큰 문제가 없었습니다.

하지만 JavaScript 시리즈 를 작성하게 되면서,
문득 object, Obejct, Class 가 무엇이 다른가 라는 생각을 하게 되었습니다.
해당 내용을 포함하여 연관된 내용을 MDN 및 stackoverflow, reddit 을 참고하여 작성하게 되었습니다.

Thoery

소개글에서 말했듯 많은 게시글을 참고했습니다만,
게시글의 작성일이 2022년과 거리감이 있거나 작성자 외부 인원들과의 충돌 이 많았습니다.

따라서 해당 내용이 신뢰도가 높은지 확신할 수 없어서,
저 스스로 100% 신뢰할 수 없는 부분은 ✅ Opinion 안에 포함하고 본문 하단에 배치하였습니다.

✅ Object

Object 클래스는 JavaScript 데이터 유형 중 하나를 나타냅니다.
다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다.

Constructor

객체 생성은 대표적으로 2가지 방식으로 할 수 있습니다.

Object Contstructor
Object Literal

const user1=new Object(); // {}
const user2={}; // {}

Prototype Instance

Object 클래스를 통해서 만들어진 프로토타입 인스턴스 object 는,
Object.prototype.method() 와 내부에 변수를 가질 수 있습니다.

const user={
  username: "unchaptered"
};

내부의 변수에는 원시값, 객체 등을 모두 저장할 수 있으며,
또한 함수도 저장할 수 있습니다.

const user={
  username: "unchaptered",
  setUsername: function setUsername(name) {
    this.username=name;
  },
  getUsername: function getUsername() {
    return this.username;
  }
};
user.setUsername("new username");
console.log(user.getUsername); // new unchaptered

또한 setter mdn, getter mdn 와 같은 바인딩 함수를 추가할 수도 있습니다.
구문이 약간 달라짐을 유의해야 합니다.

const user={
  username: "unchaptered",
  set setUsername(name) {
    this.username=name;
  },
  get getUsername(name) {
    return this.username;
  }
};
user.setUsername="new unchaptered";
console.log(user.getUsername); // new unchaptered

Static Method

Object > Static Method mdn

Prototype Method

객체의 프로토타입, 인스턴스에서 사용할 수 있는 함수
[Object > Instance Method mdn](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4_%EB%A9%94%EC%84%9C%EB%93%

Object.Function

✅ Classes

Class 는 객체를 생성하기 위한 탬플릿으로 함수의 일종입니다.
JavaScript 의 탬플릿은 프로토타입을 이용해서 만들어졌지만, ES5 클래스 의미와는 다른 문법과 의미를 지닙니다.
*Classes mdn

Constructor

클래스는 다음과 같이 생성할 수 있습니다.

class User {
  constructor(username) {
    this.username=username;
  }
}

setter, getter

또한 setter , getter 와 같은 바인딩 함수를 추가할 수도 있습니다.

class User {
  constructor(username) {
    this.username=username;
  }
  set setUsername(name) {
    this.username=name;
  }
  get getUseranem() {
    return this.username;
  }
}

Prototype method

또한 프로토타입 메서드를 추가할 수 있습니다.

class User {
  constructor (매개변수) { /* 매개변수 할당 */ }
  
  set setUsername(매개변수) { /* setter */ }
  set getUsername() { /* getter */ }
  
  calcNameLength() {
    return this.username.length;
  }
}

Field

class User {
  username="";

  constructor (매개변수) { /* 매개변수 할당 */ }
  
  set setUsername(매개변수) { /* setter */ }
  set getUsername() { /* getter */ }
  
  calcNameLength() { /* 길이 반환*/ }
}

Private Field

class User {
  #username="";

  constructor (name) { 
    this.#username=name;
  }

  set setUsername(매개변수) { /* setter */ }
  set getUsername() { /* getter */ }
  
  calcNameLength() { /* 길이 반환*/ }
}

Extends

실제 프로젝트에서 사용 후에 추가하도록 하겠습니다.

Species

실제 프로젝트에서 사용 후에 추가하도록 하겠습니다.

Super

실제 프로젝트에서 사용 후에 추가하도록 하겠습니다.

Mix-ins

실제 프로젝트에서 사용 후에 추가하도록 하겠습니다.

✅ Opinion

🤔 { } vs new Object( )

# 원제목 | object litreral vs object contstructor

본문을 작성하면서 가장 궁금했던 것은 다음과 같았다.
일반적으로 내가 사용하던 변수와 Object 클래스가 다른건가?

하지만 실제로 { } 를 사용해서 객체를 만들고 이를 열어보면,
constructor 를 사용한 것과 동일한 객체를 반환함을 알 수 있다.

Object Literal MDN
Object Constructor MDN

🤔 Object vs Class

# 원제목 | Object 와 Class 의 차이가 무엇일까?

또 이 문서를 작성하면서 Class 라는 친구가 JavaScript 에 있음을 알게 되었다.

Java 시리즈 를 작성하면서 공부를 했을 때, Object 와 Class 에 대해서 배웠지만,
JavaScript 의 Object 와 Class 에 대한 모든 것들이 같다고 확신할 수 없었습니다.

# Object 란?

Object 는 JavaScript 의 데이터 타입 중 하나입니다.
이는 다양한 변수 조합이나 복잡한 Entity(유저 정보와 같은 데이터 모델)을 저장하기 위해서 사용됩니다. Object mdn

전술한 object literal, constructor 등을 사용해서 프로토타입을 만들 수 있고
이를 객체, 즉 object 라고 부릅니다.

# Classes 란?

Classes 는 object 를 생성하기 위한 탬플릿입니다.
이는 특별한 함수의 일종으로 class 표현식, class 선언 으로 구성됩니다.Classes mdn

Object 클래스와 Classes 클래스 모두
하나의 데이터 묶음을 저장하기 위한 수단으로 object 를 사용하고 있습니다.
따라서, 두 방식으로 동일한 데이터 묶음을 가진 object 를 확인해보면 다음과 같습니다.

Classes 를 통해서 만들면 constructor : class User 항목이 생깁니다.

🤔 Syntax > Object vs Classes

JavaScript 에서 setter() 와 같은 함수를 만드는 방법은,
최초에는 object 의 내부에 setter function 을 만들어 두는 것이었습니다.

이후 setter 와 같은 바인딩 함수가 나왔으며,
이는 Object 와 Classes 에서 모두 사용이 가능했습니다.

🤔 More > JavaScript.Class vs Java.Class

1. 컴파일 언어 vs 인터프리터 언어

JavasCript 를 배우며 JavaScript 의 클래스는 가짜다 라는 말을 들어봤습니다.
해당 발언에 대한 주장은 보통 Java 와 같은 전통적인 OOP 개념의 컴파일 언어와 다르다 라는 것이었습니다.

언어	구분	특징
Java	Compile Language	컴파일러가 코드를 모두 읽고 실행한다. .java > .class 로 바뀌는 것과 같이...
JavaScript	Interpreter Language	엔진이 코드를 바로 실행시킨다.

Chrome V8 가상머신은 경우에 따라서 반복 빈도가 높은 구문을 컴파일 하는 것 으로 최적화 과정을 거치고 있으며 현재의 JavaScript 는 이러한 엔진 위에서 돌아갑니다.

JavaScript 인터프리터 언어일까

이렇듯, Java와 JavaScript 는 기본적으로 다른 언어라고 합니다.

2. 클래스 기반 언어 vs 프로토 타입 언어

다른 해석으로는 Java는 클래스 기반, JavaScript는 프로토타입 기반 언어 라는 내용이었습니다.

Java 가 클래스 상속 관계를 가진다면,
JavaScript(~ES5) 는 프로토타입 상속 관계를 가지고 있습니다.

그러나 JavaScript 에서 프로토 타입은 클래스에서 시작되고 있습니다.

공식 문서에서는 이를 Standard Built in Object 라고 부르고 있습니다.
또한, 이러한 친구를 상속받아 만들어진 친구를 Prototype(in Object) 이라고 부릅니다.

Array.of(); 와 같이 object 없이도 사용가능한 함수들과
Array.prototype.forEach(); 와 같이 prototype object 를 만들어야 사용가능한 함수들을 본적 있을 것입니다.

이러한 점들은 Java 의 유틸리티 클래스와 그 외의 클래스 등과 개념적으로 유사하게 느껴집니다.

3. JavaScript : 타입 안정성의 부재?

JavaScript ES6(2015) 에서 Class 가 도입되었고 클래스 간의 inheritance 가 구현되었습니다.
물론 호환성 여부가 있기 때문에 이를 사용하기 위해서는 다음과 같은 절차가 필요한 건 사실입니다.

Babel / 호환성이 낮은 구문들을 호환이 되는 친구들로 바꿔주는 모듈
Webpack / Babel 과 같은 친구들을 가동하기 위한 번들러 모듈
Node.JS / 브라우저 외부에서 JavaScript 를 가동시키고 서버를 구현하는 등의 기능을 가진 모듈
NPM / Node Package Manager 로 Node.JS 에 필요한 모듈을 손쉽게 다운로드 관리할 수 있는 모듈

물론 Classes 는 결국 함수의 일종이지만, ....
해당 기능을 사용하면 적어도 외관적으로는 큰 차이가 없어 보입니다.

가장 두드러지는 차이 중 하나는
클래스 내부에 선언된 변수들에 대한 타입 안정성이 확보되지 않는 점이 있다는 것입니다.

4. JavaScript : 안정성 확보 방법?

저는 다음과 같은 방법으로 안정성 확보가 가능하다고 생각합니다.

타입 체크 모듈 사용
TypeScript 사용

5. JavaScript : 그 외에도...

물론,
아직 그 외에도 private 과 같은 제어자가 없다거나
복잡하게 연결되는 프로토타입 상속 관계로 안정성이 떨어진다라는 문제가 있다고 합니다.

하지만, 이 부분에 대해서는 아직 체감되는 문제점이 크게 없습니다.

6. References

Reddit / Why are JS classes not real classes?

공부의 기록

2022년 12월 9일 부터 노션 페이지에서 작성을 이어가고 있습니다.

#3 Object, Class

JavaScript

Introduce

Thoery

✅ Object

Constructor

Prototype Instance

Static Method

Prototype Method

Object.Function

✅ Classes

Constructor

setter, getter

Prototype method

Field

Private Field

Extends

Species

Super

Mix-ins

✅ Opinion

🤔 { } vs new Object( )

# 원제목 | object litreral vs object contstructor

🤔 Object vs Class

# 원제목 | Object 와 Class 의 차이가 무엇일까?

# Object 란?

# Classes 란?

🤔 Syntax > Object vs Classes

🤔 More > JavaScript.Class vs Java.Class

1. 컴파일 언어 vs 인터프리터 언어

2. 클래스 기반 언어 vs 프로토 타입 언어

3. JavaScript : 타입 안정성의 부재?

4. JavaScript : 안정성 확보 방법?

5. JavaScript : 그 외에도...

6. References

#3 Math

#4 Symbol

0개의 댓글