[JavaScript] #8 자바스크립트 객체 리터럴(object literal)

이번 글에서는 자바스크립트에서 객체 리터럴(object literal)을 배워보도록 하겠습니다.

객체 리터럴(object literal)이란 ?

중괄호 {} 안에 키(key)-값(value) 쌍으로 이루어진 속성들을 나열하여 객체를 정의합니다.

 

배열(Array) VS 객체 리터럴(object literal) 차이

배열(Array)은 그냥 값만 필요할 경우 배열을 쓰면 되고

객체 리터럴(object literal)은 그 값에 대한 속성이 필요해서 쓰면 된다.

 

객체 리터럴(object literal) 기본 문법

const 객체이름(objectName) = {
	속성이름1(propertyName1) : 속성값1(propertyValue1),
    속성이름2(propertyName2) : 속성값2(propertyValue2),
     // ...
}

objectName은 객체 이름입니다.
중괄호 {} 안에는 객체의 속성들이 나열됩니다.
각 속성은 propertyName: propertyValue 형식으로 이루어져 있습니다.
propertyName은 속성 이름이며, propertyValue는 속성 값입니다. 속성들은 쉼표( ),로 구분됩니다.

 

예시

const person = {
	name : 'channy',
	year : 1994,
	month : 8,
	date : 12,
	gender : 'M',
};

위 코드는 'person' 객체는 'name', 'year', 'month', 'date', 'gender' 세 개의 속성을 가지고 있습니다.

 

객체 리터럴(object literal)에 접근하기

객체의 속성에 접근하려면 . 연산자를 사용합니다.

console.log(person.name); // "channy"
console.log(person.year); // 1994
console.log(person.month); // "8"

 

객체 리터럴(object literal) 추가/수정/삭제하기

객체 리터럴(object literal) 추가

속성을 추가하려면 객체 이름 다음에 . 연산자를 사용해 속성 이름과 값을 할당하면 됩니다.

person.city = "Seoul";

person 객체에 city 속성을 추가하고, 값을 "Seoul"로 할당했습니다.

 

객체 리터럴(object literal) 수정

속성을 수정하려면 객체 이름과 속성 이름을 사용해 해당 속성의 값을 새로운 값으로 할당하면 됩니다.

person.age = 40;

위 코드에서 person 객체의 age 속성 값을 40으로 수정하고 있습니다.

 

객체 리터럴(object literal) 삭제

속성을 삭제하려면 delete 키워드를 사용합니다.

delete person.date;

위 코드에서 person 객체의 date 속성을 삭제하고 있습니다.

 

배열(Array)과 함수(Function)가 객체인 이유

배열과 함수는 객체의 성질을 다 사용 가능

 

메서드(Method)

객체의 속성 값으로 함수를 넣었을 때, 이 속성이 어떤 동작을 의미를 한다.

const debug = {
	log : function(value) {
		console.log(value);
	}
}

 

객체(Object) 간의 비교

그냥 빈 객체끼리는 서로 같지는 않다!

{} === {} // false

 

밑에 경우는 선언한 객체를 돌려 쓴거라서 같다는 결과가 나왔어요!

const a = { name:'zerocho' };
const array = [1,2,a]; // 배열 안에 객체를 씀
console.log( a === array[2] );
// true

 

문) 다음과 같이 객체 안에 객체가 있을 때, ‘조’ 값에 접근하는 방법은 무엇일까요?

const zerocho = {
	name : {
	first : '현영',
	last : '조',
	},
	gender:'m'
}

답)

zerocho.name.last;
zerocho["name"]["last"];

참고

https://youtu.be/1SYv8YgXOyQ?list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt 

2023.04.07 - [Javascript] - [JavaScript] #7 자바스크립트 JavaScript 함수(function)

[JavaScript] #7 자바스크립트 JavaScript 함수(function)