[2주차] 객체와 메서드

객체 리터럴

객체의 종류에서 마지막으로 배열이나 함수가 아닌 객체를 알아보겠다. 객체는 여러 변수를 하나의 변수로 붂을 때 사용한다.

1. 객체 생성하기

const name = '조현영';
const year = 1994;
const month = 8;
const date = 12;
const gender = 'M';

여기에 추가로 다른 사람의 정보도 변수로 표현하고 싶다면 이미 사용된 이름인 name, year, month, date, date, gender 대신에 사용할 변수를 생각해야 되는데 막막하니 이때 사용하는 것이 객체를 사용해 여러 변수에 저장된 정보를 하나로 묶을 수 있다.

const zerocho = {
	name = '조현영',
	year = 1994,
	month = 8,
	date = 12,
	gender = 'M',
};

zerocho라는 변수를 선언하고 정보를 모아 중괄호({})로 묶어 변수에 대입했다. 중괄호로 묶인 name, year, month, date, date, gender와 같은 정보들을 속성(property)이라고 한다. name: '조현영'이란 속성에서는 name이 속성 이름이고, '조현영'이 속성 값이다. 이처럼 중괄호를 사용해 객체를 표현하는 것을 객체 리터럴이라고 한다.

 

2. 객체 속성에 접근하기

속성 이름을 통해 속성 값에 접근하는 것이다.

속성에는 변수로 접근할 수 있다. 접근하는 방식은 두 가지이다. 첫 번째, 마침표(.)를 사용해 변수.속성 형태로 접근하면 된다. 두 번째, 배열처럼 대괄호([])를 사용해 변수['속성'] 형태로 접근할 수 있다. 이때 [] 안에는 문자열을 넣어야 한다.

const zerocho = {
	name = '조현영',
	year = 1994,
	month = 8,
	date = 12,
	gender = 'M',
};
zerocho.name;
< '조현영'
zerocho['name'];
< '조현영'
zerocho.date;
< 12
zerocho['date'];
< 12

[]에는 문자열을 넣어야 하므로 zerocho[name]이 아닌 zerocho['name']이라고 작성해야 한다. zerocho[name]이라고 작성하면 name 자리에 name의 값을 넣어 사용하게 된다. 어떤 차이가 있는지 다음 예제로 확인해 보자.

const name = 'date';
zerocho['name'];
< '조현영'
zerocho[name]; // zerocho['date']와 같은 의미, 변수가 되어 버림
< 12
zerocho.hello;
< undefined

 

객체는 속성으로 변수를 가질 수도 있다.

const name = '조현영';
const year = 1994;
const zerocho = {
	name: name,
	year: year,
};
zerocho.name; // 조현영
zerocho.year; // 1994

이렇게 속성 이름과 속성 값으로 사용된 변수 이름이 같을 때는 다음과 같이 줄여 쓸 수 있다.

const name = '조현영';
const year = 1994;
const zerocho = { name, year };
zerocho.name; // 조현영
zerocho.year; // 1994

줄여 쓰더라도 속성에 접근하는 방식은 동일하다.

 

3. 객체 속성을 추가/수정/삭제하기

객체에 새로운 속성을 추가하거나 객체 속성에 접근해 값을 수정할 수 있다. 먼저 값을 추가하려면 변수.속성 = 값; 형태로 코드를 실행하면 된다.

zerocho.married = false; // false
zerocho.married; // false

값을 수정할 때도 변수.속성 = 값; 형태로 코드를 실행하면 된다. 그러면 지정한 값으로 속성 값이 바뀐다. 추가냐 수정이냐의 차이는 속성이 객체에 이미 존재하냐 아니냐의 차이이다.

zerocho.gender = 'F'; // F

객체의 속성을 삭제할 수도 있다. 속성을 삭제하고 싶을 때는 delete 변수.속성; 형태로 코드를 실행한다. 이때 삭제된 속성에 접근하면 undefined가 나온다.

delete zerocho.gender; // true
zerocho.gender; // undefined

 

4. 메서드 이해하기

속성 값으로 자바스크립트의 모든 값을 넣을 수 있다고 했다. 문자열도 되고, 숫자, 불 값, null, undefined도 된다. 심지어 함수, 배열, 다른 객체까지도 넣을 수 있다. 이때 겍체의 속성 값으로 함수가 들어가면 이 속성을 특별히 메서드라고 한다.

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

 

5. 객체 간 비교하기

객체를 다룰 때 가장 많이 실수하는 상황이 있다. 바로 객체끼리 비교 연산을 할 때이다. 다음과 같이 숫자, 문자열, 불 값, null, undefined를 비교하면 모두 true를 반환한다. 단, NaN은 false가 나온다.

'str' === 'str'; // true
123 === 123; // true
false === false; // true
null === null; // true
undefined === undefined; // true
NaN === NaN; // false

그런데 객체를 비교하면 false를 반환한다.

({} === {});
< false

 

객체는 모양이 같아도 생성할 때마다 새로운 객체가 생성된다. 따라서 기존 객체를 변수에 저장해야 같은 객체인지 비교할 수 있다.

cons a = { name: 'zerocho' };
const array = [1, 2, a];
a === array[2];
< true

 

6. 중첩된 객체와 옵셔널 체이닝 연산자

배열 안에 배열이 들어갈 수 있듯이 객체 안에도 다른 객체가 들어갈 수 있다. 다음 코드와 같이 속성 값으로 다른 객체를 넣으면 된다. 그래서 zerocho.name도 객체 리터럴이다.

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

이렇게 중첩된 객체일 때 '현영'에는 zerocho.name.last로 접근한다. 또는 zerocho['name']['first']나 zerocho['name'].first, zerocho.name['first']로도 가능하다.

사실 배열에 객체가 들어갈 수도, 객체에 배열이 들어갈 수도 있다. 다음과 같이 가족 정보 객체를 배열로 저장할 수 있다.

const family = {
	{ name: '제로초', age: 29, gender: '남' },
	{ name: '레오', age: 5, gender: '남' },
	{ name: '체리', age: 3, gender: '여' },
};

이때 존재하지 않는 중첩 객체의 속성에 접근하면 에러가 발생한다.

zerocho.girlfriend.name;
Uncaught TypeError: Cannot read properties of undefined (reading 'name')

객체에 어떤 속성이 있는지 잘 모를 때는 ?. 연산자를 사용하면 된다. 옵셔널 체이닝 연산자라고 하는데, 존재하지 않는 속성에 접근할 때 에러가 발생하는 것을 막아준다.

zerocho.girlfriend?.name;
< undefined
zerocho.name?.first;
< '현영'