[JS] 자바스크립트 객체 생성, 접근 방법

# 자바스크립트 객체(Object)

자바스크립트에서 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체다.

객체는 여러가지 값을 가질 수 있으며, 함수도 가질 수 있다.

 

객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다.

(둘다 프로퍼티라고 하기도 한다)

 

객체의 프로퍼티와 메서드들은 '키값'으로 구분된다.

var object ={

    key1: value1,
    key2: value2,
    ...

}

 

 

 

# 객체 생성 방식

객체를 생성하는 방법은 3가지 정도가 있다.

1) 객체 리터럴, 2) 생성자 함수, 3) Object.create()

 

1. 객체 리터럴 방식(Object Literal)

 var obj = { key: value, ... }  : 변수처럼 객체를 생성하는 방식으로, 중괄호 { } 안에 key:value를 쉼표(,)로 구분하여 만든다.

var myObj = {

    name: '카레유',
    age: 20,

    hello: function(){
        return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
    }
};

console.log(myObj);  // { name: '카레유', age: 20, hello: [Function: hello] }

 

* myObj 객체가 생성되었다. name, age는 '프로퍼티'이며, hello는 '메서드'다.

 

키값은 문자열(string)로 작성해야 한다.

따옴표로 감싸는게 원칙이지만, '식별자 네이밍 규칙'을 준수한다면 생략할 수 있다.

* 식별자 네이밍 규칙 : 문자/숫자/언더스코어(_)/달러기호($)로 구성되며, 숫자로 시작하지 않아야 한다.(예약어 제외)

 

(참고) ES6에 추가된 symbol타입도 key로 사용 가능하다.

 

▼ ES6부터 추가된 새로운 기능은 아래 글 참고.

[JS] 자바스크립트: ES6 객체 리터럴 기능 3가지

 

 

 

2. 생성자 방식(Constructor)

: new Constructor() 방식으로 객체를 생성하는 방식이다.

 

1)  new Object()  : new 연산자를 통해 Object객체의 생성자함수를 호출한다.

var myObj = new Object();

myObj.name = '카레유';
myObj['age'] = 20;

myObj.hello = function(){
    return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
};

console.log(myObj);  // { name: '카레유', age: 20, hello: [Function] }

* hello() 메서드에 사용된 백틱(``), 달라${} 표기법 참고 ▼

[JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법

 

 

2)  new 생성자()  :  Number, String, Array 등의 내장 객체도 생성할 수 있다.

// String객체 생성하기
var strObj = new String('hello');
console.log(strObj); //[String: 'hello']


// Array(배열)객체 생성하기
var arrObj = new Array([1, 2, 3]);
console.log(arrObj); //[ [ 1, 2, 3 ] ]

 

 

3)  new 사용자 정의 생성자()  : 직접 생성자 함수를 만들어 객체를 생성할 수 있다.

// 생성자 함수 만들기
var SelfObj = function(name, age){
    this.name = name;  // this는 자신이 속한 객체를 참조하는 '자기 참조 변수'다.
    this.age = age;
    this.hello = function(){
        return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
    }
}

// 객체 생성하기
var selfObj = new SelfObj('카레유', 20);
console.log(selfObj); // SelfObj { name: '카레유', age: 20, hello: [Function] }

 

 

 

3. Object.create() 방식

 Object.create(프로토타입)  : 프로토타입 상속을 통해 객체를 만드는 방식이다.

  *이 방식은 프로토타입, 상속 등의 개념이 필요한 관계로 여기선 간단한 예만 정리한다.

// 부모 객체 생성
var parent = {a:10, b:20};

// 자식 객체 생성(부모의 프로퍼티를 상속 받음)
var child = Object.create(parent);
console.log(child.a);  // 10

 

* child객체에서 parent객체의 프로퍼티인 a값을 참조할 수 있게 되었다.

 

# 프로퍼티/메서드 접근 방법

객체.key, 객체['key'] 방식으로 접근한다. 메서드(함수)는 마지막에 괄호()를 붙여 호출해야 한다.

 

1.  객체.key : 마침표(Dot Notation)로 프로퍼티에 접근한다.

var myObj = {

    name: '카레유',
    age: 20,

    hello: function(){
        return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`;
    }
};

myObj.name;	// '카레유'
myObj.age;	// 20
myObj.hello();	// '이름은 카레유이고, 나이는 20입니다.'

 

// key는 객체의 프로퍼티만 허용되기 때문에, 다른 변수를 통해 key값을 참조할 수 없다.(객체['key']방식은 가능!)

var key_name = 'name';
console.log(myObj.key_name); // undefined

// key_name은 myObj에 정의된 프로퍼티가 아니다.
// myObj.name 으로만 접근 가능하다.

2)  객체['key'] : 대괄호[ ] 사이에 키값을 '문자열'로 넣어 접근한다.

myObj['name']; // '카레유'
myObj['age'];  // 20
myObj['hello'](); // '이름은 카레유이고, 나이는 20입니다.'

 

// 객체[key] 방식은 key가 따옴표로 감싸져 있지 않으면 변수로 해석해서 참조한다.(객체.key방식은 불가!)

var key_age = 'age'
myObj[key_age]; // 20

---

▼ 관련 글 참고

[JS] 자바스크립트 객체 프로퍼티 생성, 삭제 방법