[Javascript] 객체를 만드는 방법, (class, function)

자바스크립트에서 객체(object)를 만드는 방법은 크게 2가지 정도(세분화하면 3가지)가 있다.

(더 있으면 댓글로 알려주세여...)

---

1. 리터럴로 객체 만들기

이 방법은 앞선 object(기본)포스팅에서 다룬적이 있으므로 넘어가겠다.

[Javascript] Object(기본,리터럴)

객체(object)는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티(proprty)와 메소드(method)라고 부름)의 집합이다. 1. 선언 curly bracket({})사이에..

artdev.tistory.com

2.1 객체 생성자로 객체 만들기 (function) - ES5

생성자로 객체를 만드는법은 객체지향 프록래밍을 이용하는법이라고 할 수 있겠다.

class 라는 일종의 틀을 만들고 그 틀을 이용하여 객체를 찍어내는식(인스턴스 생성)으로 프로그래밍 하는것이다.

 

es5까지는 자바스크립트는 클래스도 함수로 만든다.

// class정의
function Car (name, model){
  this.name = namel;
  this.model = model;
}

const sonata = new Car('myCar','sonata');
// 생성자 함수를 이용하여 객체 만들기


// 내부 모습을 보면,
console.log(sonata.name, sonata,model);
console.dir(sonata);

함수를 이용하여 객체를 만들수 있는 틀(class)을 정의하는 방법이다. 함수이름의 첫 글자를 대문자로 해주는 convention이 있다.

여기서 this라는 키워드가 나오게 되는데 생성자 함수로 객체를 만들게 되면 this키워드가 해당 객체로 바인딩되면서 인스턴스 객체를 리턴하게 된다. (즉, 위의 7번째 줄의 sonata변수에 Car 함수로 만든 객체가 할당되게 된다.)

이해가 잘 되지 않을 수 있다. 이 this 에 대해서는 추후 좀 더 포스팅할것임.

브라우저에서의 실행결과이다. sonata변수가 가리키는 Car객체의 이름과 모델명이 console.log로 보이고 ,

sonata변수가 가리키는 Car객체의 속성과 매서드가 무엇이 있는데 보여준다.

2.2 객체 생성자로 객체 만들기 (class) - ES6

es6에서 새로 추가된 문법 (function 키워드로 만드는것과 문법적 차이만 있을뿐 기능은 동일하다.)

아마 다른 객체 지향언어를 아는 사람이면 아주 익숙한 문법일것이다.

class Car{
  constructor(name,model){
    this.name = name;
    this.model = model;
  }
}

const myCar2 = new Car('gogogo','tico');

console.log(myCar2.name,myCar2.model);
console.dir(myCar2);

class키워드를 이용한 객체 만들기

---

필자의 경우는 객체 리터럴을 이용해서 프로그래밍을 많이 하는것 같다.

그렇다고 리터럴만으로 객체를 만드는 방법만 알면 다른사람이 어떤식으로 코드를 짜는지 잘 모를것이다.

예를들면 mongoose라는 자바스크립트 패키지를 보면 객체를 만들때 2.1번 방식으로 객체를 만든다. 

mongoose 패키지의 일부인 schema.js의 일부 코드

여기서도 function으로 객체를 만드는 코드를 쓰는것을 볼수가 있다. 

this 키워드 또한 사용을하고 있다. 

mongoose패키지 뿐만 아니라 다른 유명한 패키지들도 function을 이용하 객체 생성 코드를 사용하는곳이 많기 때문에 이 문법을 분명 알고 가야한다고 생각한다.