[JavaScript] 객체(Object)

목차

1. 객체(object)와 속성(property)

2. 객체와 중첩 객체 선언

3. 객체의 속성 접근하기

4. 객체의 속성 추가 / 수정 / 삭제하기

5. 속성 존재 여부 확인하기

 

 

객체(object)

여러 데이터들을 하나로 묶는 역할

 

속성(property)

객체 안에 정의한 데이터 하나 하나

 

 

1. 객체를 선언하는 방법

/* 객체 선언 */
const object1 = {
  name: 'duck',
  bornYear: 1999,
  bornMonth: 1,
  bornDay: 30,
  dept: 'Computer',
};

// (+) property name에서 띄어쓰기가 있거나 숫자로 시작하는 경우 따옴표로 묶는다.
const object2 = {
  name: 'Duck',
  'my birthday': '1999.01.30', 
  '1st student': 'me',
};

위처럼 객체 안에 key: value 형태로 데이터를 넣으며, 다른 데이터와 쉼표로 구분한다.

이 때 key를 property name, value를 property value라고 한다.

 

자바스크립트의 객체는 key가 항상 문자열로 들어가야 하는데, 

대신 띄어쓰기가 있거나 숫자로 시작하는게 아닌 이상, 따옴표는 생략 가능하다.

(자바스크립트 객체와 비슷한 Map은 key로 문자열 외에 숫자나 객체도 들어갈 수 있는 확장판 정도로 생각하면 된다)

 

 

 

2. 객체 속에 객체 선언 (중첩 객체)

property value로 객체 데이터도 넣을 수 있다.

const object1 = {
  name: 'Duck',
  born: {
    year: 1999,
    month: 1,
    day: 30,
  },
  dept: 'Computer',
};

 

 

 

3. 객체 내에 있는 속성 접근하기

(1) 객체명.속성으로 접근

/* 속성 접근하기 */
const object1 = {
  name: 'Duck',
  age: 23,
  dept: 'Computer',
};

// 방법 1. 점(.)을 이용해 접근
console.log(object1.name) //Duck

console.log(object1.age) //23

console.log(object1.dept) //Computer

 

(2) 객체명["속성"]으로 접근

const object2 = {
  name: 'Duck',
  'my birthday': '1999.01.30', 
  '1st student': 'me',
};

// ✅
console.log(object2['my birthday']); // 1999.01.30

// ✅
console.log(object2['1st sutdent']); // me

// ❌
console.log(object2.my birthday);

// ❌
console.log(object2.1st sutdent.]);

위 코드를 보면 알 수 있듯이, 객체명["속성"] 방법이 더 넓은 범위로 사용 가능하다.

객체명.속성의 경우 띄어쓰기나 숫자로 시작하는 property name은 사용할 수 없다.

 

또한 외부 변수로 속성을 접근하는 경우에도 객체명["속성"] 방법으로만 가능하다.

const object2 = {
  name: 'Duck',
  'my birthday': '1999.01.30', 
  '1st student': 'me' 
};

const prop = "name";

// ✅
console.log(object2[prop]); // Duck

// ❌
console.log(object2.prop);

 

 

 

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

(1) 속성 추가하기

새로운 property name으로 값을 할당하면 된다.

const object1 = {
  name: 'Duck',
  age: 23, 
  dept: 'Computer'
};

// 새로운 속성 추가하기
object1.bornYear = 1999;

object1.bornMonth = 1;

object1.bornDay = 30;

실행 결과

 

(2) 속성 value 수정하기

기존의 property name으로 값을 재할당하면 된다.

const object1 = {
  name: 'Duck',
  age: 23, 
  dept: 'Computer'
};

// 2. 속성 수정하기
object1.name = '나오리';

object1.dept = 'Data Analyst';

실행 결과

 

(3) 속성 삭제하기

delete 키워드를 사용하여 해당 property를 삭제한다.

const object1 = {
  name: 'Duck',
  age: 23, 
  dept: 'Computer'
};

delete object1.name;

delete object1.age;

실행 결과

 

 

 

5. 속성이 존재하는지 확인하기

(1) undefined와 비교 연산

const object1 = {
  name: 'Duck',
  age: 23, 
  dept: 'Computer',
};

// 속성이 객체 내에 존재하지 않는다면 undefined를 리턴한다.
console.log(`name 속성이 존재하는가? ${object1.name !== undefined}`); // true

console.log(`born 속성이 존재하는가? ${object1.born !== undefined}`); // false

 

(2) in 문법 사용하기

const object1 = {
  name: 'Duck',
  age: 23, 
  dept: 'Computer',
};

console.log(`name 속성이 존재하는가? ${'name' in object1}`); // true

console.log(`born 속성이 존재하는가? ${'born' in object1}`); // false

실행 결과