[Javascript] 객체 생성

Javascript에서 객체를 생성하는 방법은 클래스 기반의 객체 생성 방법을 사용하는 java와 C++와 다르다.

 

Javascript 자체엔 class 자체가 없기 때문이다.

그래서 기존의 객체를 복사하여 새로운 객체를 만드는 프로토타입 기반의 언어이다. 

객체를 생성 할 수 있는 3가지 방법이 있다.

 

1. 기본 객체의 생성자 함수 이용(new)
2. 리터럴과 프로퍼티
3. 생성자 함수 이용

코드를 보면서 공부해보자!

---

기본 객체(Object())의 생성자 함수 이용(new)

 

object 객체를 생성하고 여기에 프로퍼티를 추가한다. new 연산자를 이용해서 생성이 가능하므로 기본 객체를 만들어보자. 

 

let user = new Object();

기본 객체를 생성한 뒤에 필요한 프로퍼티를 추가해준다. 

user.name = "venny";
user.score = 9;
user.sex = "male";

변수의 타입과 변수를 출력해보자.

console.log(typeOf user);
console.log(user);

// object

// {id: "venny", score: 9, sex : "male"}

 

변수 user에 여러 프로퍼티가 담겨 객체가 된 것을 확인할 수 있다. 

---

리터럴과 프로퍼티

두 번째는 기본 객체를 생성하여 프로퍼티를 넣었던 첫 번쨰 방법과는 다르게 , 자체로 바로 객체를 생성하는 방법이다.

javascript 객체 생성 방법 중 가장 쉬운 방법이다. 먼저 변수를 생성할 때 { }(중괄호) 안에 원하는 프로퍼티를 넣으면 된다. 이때 아무 프로퍼티도 넣지않으면 빈 객체가 생성된다. 

프로퍼티를 넣는 방법은 다음과 같다.

const user = {
  name: 'venny',
  score: 9,
  sex: 'male',
}

 

 

프로퍼티의 이름(key) : 프로퍼티의 값(value)

 

*리터럴(literal)이란?

코드 상에서 데이터를 표현하는 방식

let aaa = "delicious"; 						// 문자열
let bbb = 2; 								// 숫자
let ccc = true;								// boolean
let ddd = [1,2,3,4];						// 배열
let eee = [a: 1, b:2, c:3]; 				// 객체
let fff = undefined;						// undefined
let ggg = null;							 	// null
let ggg = function(){'hello world'};		// function

 

*프로퍼티(property)란?

어떤 객체가 가지고 있는 항목의 쌍(key, value)을 프로퍼티라고 한다. 한국어로는 속성 이라고 부른다.

 

const myObj = {
  foo: true,
  bar: 12345,
  baz: 'hello',
}

위 코드에서 foo, bar, baz 를 프로퍼티라고 합니다.

여기서 foo, bar, baz 라는 글자는 프로퍼티의 키 에 해당하고, 그 키가 담고있는 각각의 값 true, 12345, 'hello'들을 모두 통틀어 부를때 쓰는 명칭입니다.

 

프로퍼티의 값이 어떤 함수일 경우, 특별히 메서드(method) 라고 부릅니다.

 

---

생성자 함수 이용

 

자바스크립트의 함수는 생성자 함수로도 정의할 수 있다. 생성자 함수라는 것은 일정한 형식이 정해진 것이 아니라, 정의한 함수에 new 키워드를 붙여 변수에 호출하면 그 자체로 생성자 역할을 한다. 

생성자 함수와 일반 함수의 차이가 명확하지 않아 이 구분을 위해 생성자 함수의 첫 글자는 대문자로 쓰는 것을 권장하고 있다.

 

생성자 함수를 new키워드로 이용해서 생성하는 객체는 다음과 같이 작동한다.

 

1. 먼저 빈 객체를 생성하고, this를 이 객체에 바인딩한다.(new 키워드를 사용하지 않을 경우엔  this는 전역 객체 window에 바인딩된다.) 또한 생성한 객체의 프로토타입 객체를 (__proto__) 자신의 생성자의 프로토타입 프로퍼티로 설정한다.

 

2. 생성자 내부에 this 키워드로 정의된 프로퍼티를 객체 내에 동적으로 생성한다.

 

3. 생성자 내부에 return문이 따로 명시되어 있지 않으면, 생성한 객체를 리턴한다. 또한 this 키워드를 리턴해도 생성한 객체를 리턴한다.(new 키워드를 사용하지 않았고(즉, 일반 함수로 사용), return문을 사용하지 않았을 경우 undefined가 리턴된다.)

 

생성자는 다음과 같이 정의한다.

 

const Member = function(id, score, sex){
    this.id = id;
    this.score = score;
    this.sex = sex;
}

const Member = function(id, score, sex){
    this.id = id;
    this.score = score;
    this.sex = sex;
    return this;
}

 

생성자에 프로퍼티를 넣어주고 new키워드로 호출해서, console.log로 출력을 해보면

 

const member = new Member("venny", 20, "male")
console.log(member);

 //Member {id: "venny", score: 20, sex: "male"}

 

가 출력되어 변수 member가 객체로 생성되었음을 알 수 있다.

 

정리

자바스크립트에는 class라는 것이 없다. 그래서 기존의 객체를 복사하여 새로운 객체를 만드는 방식을 쓴다.

그에따른 3가지 방법에는

리터럴과 프로퍼티 추가 방식, 기본 객체를 이용한 생성자 함수 생성, new키워드로 호출하는 생성자 함수

가 있다!

 

추가 공부

*프로토 타입?

*동적으로 생성?