[Javascript] 자바스크립트 객체 리터럴 이란?

 

 

배열이나 함수가 아닌 것들 중에 특정 모양을 가지면 객체 리터럴 이라고 부릅니다.

객체 리터럴은 여러개의 정보를 하나의 변수로 묶을 때 사용합니다.

---

객체 리터럴을 왜 사용하는가?

 

const name = '짱구'
const year = 1990
const contry = 'Japan'
const gender = 'Male'

 

▲ 위와 같이 짱구에 대한 정보를 쉽게 정의할 수는 있지만,

이와 동일하게 다른 사람의 정보를 추가하고 싶을때는 같은 변수명 (name, year, contry, gender)을 쓸 수 없기때문에

다른 변수를 정의해야하는 불편함이 있습니다.

 

이럴 때 객체를 사용하여 관계가 있는 여러개의 변수를 하나로 묶어 재사용할 수 있습니다.

const myBoy = {
  name : '짱구',
  year : 1990,
  contry : 'Japan',
  gender : 'Male',
  };

 

▲ 변수명으로 myBoy를 사용하고 {} 안에 관련된 정보를 묶어두었습니다.

객체 내부에 모아놓은 name, year, contry, gender 같은 정보들을 속성(property)라고 합니다.

const 객체 = {
  속성 이름 1 : 속성 값 1,
  속성 이름 2 : 속성 값 2,
  속성 이름 3 : 속성 값 3,
}

 

▲ 속성 값의 마지막에는 쉽표를 붙이든 붙이지 않든 상관없지만, 속성을 추가할 때 복사 붙여넣기 하다가 쉼표를 빼먹어서 에러날 수도 있으므로 그냥 다 붙이는 것을 추천드립니다 ㅎㅎ

 

const 객체 = {
  abc : 'Test',
  '3abc' : 34,
  '4+9' : 'test',
}

 

▲ 속성명은 문자열이 들어가야하고 따옴표를 붙이지 않아도 되지만, 첫글자에 숫자가 들어가거나 띄어쓰기/특수문자가 있는 경우 따옴표가 필요합니다!

---

객체의 속성 값 불러오기

 

const myBoy = {
  name : '짱구',
  year : 1990,
  contry : 'Japan',
  gender : 'Male',
  };
  
console.log(myBoy.name)
console.log(myBoy.year)
console.log(myBoy.contry)
console.log(myBoy.gender)
console.log(myBoy['gender'])


(결과)--------------------
짱구
1990
Japan
Male
Male

객체에서 정의한 속성 값은 대괄호나 .을 사용하여 불러올 수 있습니다.

다만, 속성명에 따옴표를 넣은 속성명은 대괄호를 사용해야만 불러올 수 있습니다! 

따옴표 없이 .을 사용하여 불러오면 Error

---

객체 속성 수정하기

 

myBoy.contry = 'Korea';

console.log(myBoy.contry);

(결과)--------
Korea

---

객체 속성 제거하기

 

delete myBoy.contry;

console.log(myBoy.contry);

(결과)--------
undefined

 

▲ contry 속성은 제거되어 undefined 이 표시됩니다.

 

 

참고로, 처음 myBoy 를 상수로 선언하였기 때문에 객체 자체는 변경할 수 없지만, 

객체 내부의 속성은 수정이 가능합니다.

 

---

배열과 객체 리터럴의 차이

 

const 짱구 = [1990,'Japan','Male']

▲ 배열을 사용하여 위와 같이 짱구라는 변수를 정의할 수도있겠지만

객체 리터럴을 사용하면 속성명을 포함하여 저장할 수 있습니다.

 

배열은 여러 값들을 인덱스만으로 구별하여 모아놓은 것이기 때문에

단순히 관련 정보를 묶어놓기만 하시려면 배열을 사용하시고, 각 속성 값마다 속성명을 부여하고 싶다면 객체 리터럴을 사용하시면 됩니다.