[Javascript] 객체 리터럴이란? 형식, 속성, 속성값 접근 방법

여러 가지 변수를 하나의 묶음으로 나타낼 때 객체를 사용한다. 이러한 객체를 표현할 때, 중괄호 {}를 사용하여 나타내는 방식이 바로 객체 리터럴이다. 객체 리터럴의 형태와 속성 값에 접근하는 방법을 알아보자.

 

 

 

 

 

 

 

목차

1. 객체 리터럴 형식
2. 객체 속성 접근
3. 객체 속성 수정
4. 객체 속성 제거
5. 객체 참조

 

 

 

 

1. 객체 리터럴 형식

객체 리터럴 형식에서 속성이 여러 개일 경우 쉼표로 구분해준다. 

const info = {
	name : '김영희',
	age : 28,
}

 

객체 이름	속성 이름	속성 값
info	name, age	김영희, 28

 

 

 

 

2. 객체 속성 접근

객체 리터럴 형식에서는 객체 이름을 통해 속성에 접근할 수 있다. 온점으로 접근하는 방식과 배열처럼 접근하는 방식 두 가지가 있다.

 

const info = {
	name : '김영희',
	age : 28,
	gender : 'w',
}

console.log(info.name); // 온점 접근 방식
consoel.log(info['name']); // 배열 접근 방식

 

const info = {
    name: '정채원',
	birth: {
		month: 3,
		date: 16,
	},
}

console.log(info.birth.date); 
// 16
console.log(info['birth'].date); 
// 16
console.log(info['birth']['date']); 
// 16

 

속성 이름에 띄어쓰기가 있거나 온점이 있는 경우 배열 접근 방식으로만 접근 가능하다. 따라서 속성 이름 형태에 따라 맞는 방식을 사용하면 된다.

 

 

 

 

 

3. 객체 속성 수정

객체 속성에 새로운 값을 대입하면 속성 값이 수정된다.

 

const info = {
	name : '김영희',
	age : 28,
	gender : 'w',
}

info.age = 30;

 

 

 

 

4. 객체 속성 제거

delete 기능을 사용하여 속성을 제거할 수 있다.

 

const info = {
	name : '김영희',
	age : 28,
	gender : 'w',
}

delete info.age;

 

 

 

 

5. 객체의 참조

객체는 객체 외의 값들의 성격과 조금 다른 부분이 있다. 객체와 객체 간에는 서로 참조하는 성질이 있다. 두 개의 변수가 같은 객체를 담고 있다면, 한쪽 객체의 속성이 수정되었을 경우 다른 변수의 객체도 똑같이 수정된다. 이게 바로 참조(reference)이다. 보통 객체의 참조를 검색해보면 너무 어려운 설명들만 많아 더 헷갈리기 마련인데, 아래 예시를 참고하여 쉽게 이해하길 바란다.

 

const info = {
	name : '김영희',
	age : 28,
	gender : 'w',
}

const ref = info; // ref 라는 변수에 info 객체를 담는다.
info.age = 30; // info에 담긴 객체를 수정하면

console.log(ref.name);

// 30 
// ref에 담긴 객체의 속성도 변경된 값으로 출력된다.

 

 

ref에 대입된 객체를 수정해도 마찬가지로 참조 현상이 나타난다. info와 ref에 같은 객체가 담겨있다는 것을 의미한다.

 

const info = {
	name : '김영희',
	age : 28,
	gender : 'w',
}

const ref = info; // ref 라는 변수에 info 객체를 담는다.
info.ref = 30; // ref에 담긴 객체를 수정하면

console.log(info.name);

// 30 
// info에 담긴 객체의 속성도 변경된 값으로 출력된다.

 

 

반면에, 객체가 아닌 변수의 경우로 예를 들어보자. 객체가 아닌 값이 담겨있기 때문에 서로 참조하지 않는다. 이 경우 참조가 아닌 복사 또는 복제(copy)라고 한다.

 

let age = 28;
let ref = age;
age = 30;

console.log(ref);

// 28
// ref의 결괏값은 변하지 않는다.