객체 리터럴

객체 사용 전 문제

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

const name = '헨도';
const year = '1999';
const gender = 'M';

언뜻 보기에는 문제가 없는 것 같지만, 다른 사람의 정보를 추가로 표현하고 싶을 때 문제가 생긴다.
이미 name, year, gender를 사용했기 때문에 재사용할 수 없다는 문제이다.

이럴 때 객체를 사용하면 여러 개의 변수를 하나로 묶을 수 있다.

객체 사용하기

const user = {
	name = '헨도';
    year = '1999';
    gender = 'M';
}

이처럼 {}를 사용하여 객체를 표현하는 것이 '객체 리터럴'이라고 한다.

속성 이름은 문자열을 사용한다.
user 변수의 name과 year에 접근해보겠다.

객체 내 변수 접근하기

console.log(user.name);
>>> 헨도
console.log(user['name']);
>>> 헨도

객체 내 변수 접근 시 주의사항

대괄호를 사용할 때는 ''(따옴표) 표시에 주의해야 한다.

const name = '뿡쭝이';

console.log(user['name']);
>>> 뿡쭝이

console.log(user[name]);
// ''(따옴표를 사용하지 않았을 시)
// console.log(user['뿡쭝이']) 와 같아진다.

>>> Undefined

객체 수정하기

객체를 만들고, 객체 내부의 속성에 접근해보았다.

user.gender = 'F';

console.log(user.gender);
<<< F

위처럼, 변수를 수정하기 위해서는 '변수.속성 = 값;'을 사용하면 주어진 값으로 속성 값이 바뀐다.

객체 삭제하기

객체 내부의 속성을 제거할 수도 있다.

delete user.gender;

console.log(user.gender);
<<< Undefined

위처럼 'delete 변수.속성;'을 입력하면 해당 속성이 제거된다.
이 때, 제거된 속성 값은 Undefined 가 출력된다.

배열과 함수가 객체인 이유

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

function hello() {
	hello.a = 'really?';
    const array = [];
    array.b = 'wow';
    console.log(hello.a);
    console.log(array.b);
}

<<< really?
<<< wow

다만, 함수와 배열은 주로 객체 리터럴과는 다른 목적으로 사용하기에 함수와 배열에 임의 속성을 넣는 경우는 드물다.
임의 속성을 넣을 거라면 처음부터 객체 리터럴을 사용하지, 함수와 배열을 사용할 이유가 없다.

메서드 (method)

속성 값으로 javascript 의 모든 값을 다 넣을 수 있다.
문자열, 숫자, Boolean, Null, Undefined 값도 다 가능하다.
그리고 함수, 배열, 다른 객체까지도 넣을 수 있다.

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

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

debug.log('Hello, method!');

log는 debug 객체의 메서드이다.

근데 이 코드 익숙하지 않나요?
바로 console.log이다.
지금까지 콘솔 창에 결과를 출력하려고 사용했던 함수가 바로 console 객체의 log 메서드였다.
console 객체와 그 안에 든 log 메서드는 웹 브라우저가 기본으로 만들어둔 객체이므로 따로 선언하지 않아도 사용이 가능하다.