안녕하세요. Tay 입니다.
이전 글을 통해서 객체, 배열, 함수 에 대해 간략하게 설명을 봤습니다.
객체
- Key : Value 형태의 프로퍼티들을 저장하는 컨테이너
- 하나의 값만 가지는 기본 타입과 달리, 객체는 여러개의 프로퍼티들을 포함 할 수 있다
객체 생성 방법 3가지
1. 기본 제공 Object( ) 객체 생성자 함수를 이용하는 방법
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="objects.js"></script>
</body>
</html>2) objects.js
// 1. Object( )
let kim = new Object();
kim.kind = 'Object';
kim.name = 'geuntae';
kim.age = 24;
kim.gender = 'male';
console.log(typeof kim);
console.log(kim);나는 kim 이라는 객체를 생성하여 위와 같이 프로퍼티(kind, name, age, gender)를 추가하였다.
과연 console log 로 타입과 객체를 찍으면 어떤 결과가 나올까?
결과 :
type은 object 이다. 당연하다 우리는 new Object( ) 로 생성자 함수로 변수를 생성했기 때문이다.
2. 객체 리터럴을 이용하는 방법 (이 방법 또한 Object 내장 생성자 함수로 생성된다.)
※ 리터럴 : 예를 들어 X＝‘30’에서 값을 나타내는 '30' 이 리터럴이다.
객체 리터럴은 var x = { } 형식으로 객체를 생성하고, { } 안에 아무것도 적지 않으면 빈 객체가 생성된다.
프로퍼티를 생성할 때에는 "프로퍼티 이름" : "값" 형태로 표기하여 객체를 생성한다.
프로퍼티 이름은 문자열, 숫자 가 올 수 있고,
프로퍼티 값으로는 값을 나타내는 어떤 표현식도 올 수 있으며, 함수 또한 올 수 있다.
1) objects.js
// 1. Object( )
let kim = new Object();
kim.kind = 'Object';
kim.name = 'geuntae';
kim.age = 24;
kim.gender = 'male';
console.log(typeof kim);
console.log(kim);
// 2. Literal
var litKim = {
kind : 'literal',
name : 'geuntae',
age : 24,
gender : 'male'
};
console.log(typeof litKim);
console.log(litKim);
2번째 리터럴 방식으로 선언 된 객체의 결과는 어떨까?
결과 :
단지 선언 방식의 차이 일 뿐, 두 객체의 데이터 형식은 똑같다.
단, 두 객체를 구분하기 위해서 프로퍼티 kind 를 1은 Object 생성자 , 2는 리터럴 로 선언했다.
3. 생성자 함수를 이용하는 방법
생성자 함수를 선언해서 그 함수로 객체를 만드는 방법
1) objects.js
// 1. Object( )
let kim = new Object();
kim.kind = "Object";
kim.name = "geuntae";
kim.age = 24;
kim.gender = "male";
console.log(typeof kim);
console.log(kim);
// 2. Literal
var litKim = {
kind: "literal",
name: "geuntae",
age: 24,
gender: "male"
};
console.log(typeof litKim);
console.log(litKim);
// 3. Constructor
function Person(name, age, gender) {
this.kind = "constructor";
this.name = name;
this.age = age;
this.gender = gender;
}
let constKim = new Person("geuntae", "24", "male");
console.log(constKim);- 생성자 함수의 첫 문자는 대문자로한다. (js 스타일 가이드)
- this 의 개념은 후에 나오니까 생략.
- 생성자 함수를 사용할 때는 new 키워드를 사용해야한다.
결과 :
생성자 함수로 생성된 객체는 위 두 방식과 유사하지만 조금 다르다.
결과적으로 생성자의 프로토타입에서 차이가 있다.
객체의 프로토타입은 부모객체를 갖게된다. 생성자함수로 만들어진 객체의 프로토타입은 생성자 함수가 된다. 이 부분은 후에 좀더 다루겠다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
