Javascript의 자료형 중 하나인 '객체(Object)'

객체 (Object)

객체는 자바스크립트에 존재하는 자료형 중 하나이다.

이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다.

{ } (중괄호) 를 이용하여 객체를 생성할 수 있으며, 이 중괄호 내부에 값을 넣게 되는데 이 때 값을 넣는 방식이 특이하다.

바로 키(Key): 값(Value) 으로 구성해서 이 값을 여러개를 넣을 수 있다. 저 데이터 쌍 하나를 프로퍼티(property)라고 부르며 여기서 키(Key) 는 '값이 가지는 이름'이다. 그리고 값(Value)는 '키 라는 이름을 가진 값'이다.  : (콜론) 을 이용하여 구분하며 키가 : (콜론) 을 기준으로 왼쪽에 값이 오른쪽에 위치해 있다.

키는 부를 때 키, 식별자, 프로퍼티 키, 프로퍼티 이름 정도로 부르면 된다. 

값은 부를 떄 프로퍼티 값, ("키로 선언된 문자열")의 값 정도로 부르면 된다.

 

객체 사용법

객체 선언법

let Person = {}; // 중괄호를 이용하여 객체 생성
let Person = new Object(); // 객체 생성자(new) 를 이용하여 객체 생성

 

비어있는 { } (중괄호)를 이용하여 객체를 생성하거나 new 라는 객체 생성자를 이용하여 객체를 생성하는 방식이 있다.

선언된 객체 초기화

let Person = { // 객체를 선언함과 동시에 초기화
	Name: "Carl", // Key = Name , Value = "Carl"
	age: 25, // Key = age, Value = 25
	Greeting: function(){ // Key = Greeting, Value = function(){...}
		console.log('Hello!');
	}
}

 

객체를 선언하면서 프로퍼티를 같이 넣어서 객체 데이터를 만들 수 있다.

위의 코드에서 Person 이라는 객체에 프로퍼티 3개가 들어가있고

각각 Name, age, Greeting 라는 프로퍼티 이름을 가지고, "Carl", 25, function( ) { ... }라는 값을 가지고 있다.

객체는 어떠한 자료형이든 프로퍼티 값으로 가지고 있을 수 있다.

여기서 객체에 여러가지 프로퍼티가 들어가는 경우에는 각각의 프로퍼티들을 구분하는 , (쉼표) 를 프로퍼티 끝에 붙여줘야 한다. 마지막 프로퍼티에는 , (쉼표) 를 붙여도 되고 안붙여도 된다.

선언된 객체의 프로퍼티 값을 . 을 이용하여 불러오기

let Person = { 
	Name: "Carl", 
	age: 25, 
	Greeting: function(){ 
		console.log("Hello!");
	}
}
/* 값 변수에 담기
let personName = Person.Name;
...
*/
console.log(Person.Name); // "Carl"
console.log(Person.age); // 25
console.log(Person.Greeting); // [Function: Greeting]
Person.Greeting(); // "Hello!"

 

객체에 담겨있는 값을 . (점) 을 이용해서 가져올 수 있다. 이를 점 표기법이라고 한다.

객체 이름.프로퍼티 이름 을 하면 해당 객체에서 프로퍼티 이름의 값을 반환한다.

이 반환된 값은 또 다른 변수에도 저장 가능하다.

객체의 프로퍼티 추가

let Person = { 
	Name: "Carl", 
	age: 25, 
	Greeting: function(){ 
		console.log('Hello!');
    }
}

Person.addProperty = "New Added Property";

console.log(Person); 
/*
{
  Name: 'Carl',
  age: 25,
  Greeting: [Function: Greeting],
  addProperty: 'New Added Property'
}
*/

 

객체에 새로운 프로퍼티를 추가하려면 마찬가지로 점 표기법을 사용하면 된다.

객체 이름.새로운 프로퍼티 이름 = 프로퍼티 값;을 하면 새로운 프로퍼티가 생성된다.

객체의 프로퍼티 삭제

let Person = { 
	Name: "Carl", 
	age: 25, 
	Greeting: function(){ 
		console.log('Hello!');
    }
}

console.log(Person); // { Name: 'Carl', age: 25, Greeting: [Function: Greeting] }

delete Person.Greeting;

console.log(Person); // { Name: 'Carl', age: 25 }

 

delete 연산자를 사용해 원하는 객체의 프로퍼티를 삭제할 수도 있다.

문장으로 되어있는 프로퍼티 이름

let Person = { 
	Name: "Carl", 
	age: 25, 
	Greeting: function(){ 
    	console.log('Hello!');
	},
	"His Job": "Programmer"
}

console.log(Person["His Job"]) // "Programmer"

let name = "His Job";

console.log(Person[name]); // "Programmer"

 

만약, 프로퍼티 이름이 하나의 단어가 아니라 공백이 섞인 문장으로 되어있다면, 프로퍼티 이름을 " " (큰 따옴표) 나 ' ' (작은 따옴표) 로 묶어주어야지 프로퍼티 이름으로 사용할 수 있다.

그리고 공백이 섞인 문장을 이름으로 사용할 경우, 값을 불러올 때 점 표기법을 사용하면 안되고, [ ] (대괄호)를 이용하여 값을 불러와야 한다. 이 떄 대괄호에 들어가는 프로퍼티 이름은 다른 변수에 저장하고 대괄호 안에 넣는 방식으로 사용해도 된다.