[JavaScipt] 14. 객체 리터럴 (Object)

객체 리처럴

마지막으로 배열이나 함수가 아닌 객체를 살펴보자. 객체는 여러 개의 변수를 하나의 변수로 묶을 때 사용한다.

const name = 'Eden''
const month = 5;
const date = 28;
const gender = 'F'

여기서 멈출 것이라면 상관없지만 다른 사람의 정보를 추가로 표현하고 싶을 때 문제가 될 수 있다. 이미 상수로 name, month, date, gender 변수를 선언했기에 다른 사람을 표현할 때 이 변수들을 재사용 할 수 없게 된다. 이럴 때 객체를 사용하면 여러 개의 변수를 하나로 묶을 수 있다.

const me = {
	name: 'Eden',
	month: 5,
	date: 28,
	gender: 'F',
};

me 라는 변수를 선언하고, 그 안에 정보를 모아두었다. 정보들은 {} 안에 묶여있다. 객체 내부에 사용되는 name, month, date, gender 정보들을 속성(property)라고 한다. 속성은 속성 이름과 속성 값으로 구분된다. name: 'Eden' 이라는 속성에서는 name 이 속성 이름 이고 'Eden' 이 속성 값이 된다. 이처럼 {} 를 사용해 객체를 표현하는 것을 객체 리터럴이라고 한다.

//객체 기본형식
const 객체 = {
	속성1 이름: 속성1 값,
	속성2 이름: 속성2 값,
	속성3 이름: 속성3 값,
}

속성 이름에는 숫자가 제일 앞에 있거나 띄어쓰기가 있거나 특수문자가 있는 경우에 '' 로 감싸줍니다!

속성 내부에 접근하기

const me = {
  name: "Eden",
  month: 5,
  date: 28,
  gender: "F",
};
console.log(me.name);
console.log(me["name"]);
console.log(me.date);
console.log(me["date"]);
>Eden
>Eden
>28
>28

객체.['속성 이름'] 이나 객체.속성이름 으로 접근 가능하다.

'' 문자열로 감싸준 속성 이름은 객체.['속성 이름'] 접근해야한다.

객체 속성 수정하기

객체 속성 수정하는 방법은 객체에 접근해 수정하면 된다.

me.gender = 'M';
console.log(me.gender);

>M

변수.속성 = 값; 을 하면 주어진 값으로 속성 값이 바뀌거나 추가된다.

객체 속성 제거하기

delete me.gender;
console.log(me.gender);

>undefined

delete 변수.속성; 을 하면 해당 속성이 제거되고 그 속성 값은 undefined 가 된다.

*배열과 함수가 객체인 이유?

배열과 함수는 객체의 성질을 모두 다 사용할 수 있기 때문이다. 배열과 함수도 속성들을 추가할 수도 있고 수정 및 제거할 수도 있다. 객체는 함수의 배열을 포함하는 개념이라서 {} 를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것이다.

function hello() {}
hello.a = "really?";

const array = [];
array.b = "wow!";

console.log(hello.a);
console.log(array.b);
>really?
>wow!

메서드 이해하기

속성 값으로 자바스크립트의 모든 값을 넣을 수 있다. 문자열도 되고, 숫자, bool값, null, undefined도 된다. 그리고 함수, 배열, 다른 객체까지도 넣을 수 있다.

객체의 속성 값으로 함수를 넣었을 때 이 속성을 특별히 메서드(method)라고 한다.

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

debug.log("Hello, Method");

log 는 debug 객체의 메서드다.

잠깐! 이와 같은 코드를 어디서 많이 보지 않았니? 바로 console.log 다. 지금까지 콘솔 창에 결과를 출력하려고 사용했던 함수가 바로 console 객체의 log 메서드 였다. console 객체와 그 안에 든 log 메서드는 웹 브라우저가 기본으로 만들어둔 객체이므로 따로 선언하지 않아도 사용할 수 있다.

객체의 비교 (원시값과의 차이점)

객체를 다룰 때 가장 많이 실수를 하는 상황이 있다. 바로 객체 간에 비교 연산을 할 때다.

{} === {}
>false

객체끼리는 모양이 같아도 결과는 항상 false 가 나온다.

객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성되기 떄문에 같은 객체인지 비교하고 싶다면 기존 객체를 변수에 저장해 두어야 한다.

const a = { name: "Eden" };
const array = [1, 2, a];

console.log(a === array[2]);
>true
array === [1, 2, a]
>false

*1분 퀴즈

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

//문제
const me = {
  name: {
    first: "Eden",
    last: "Park",
  },
  gender: "F",
};

//정답
//1
me.name.last;
//2
me['name']['last'];