[javascript] 객체(object), 속성(property)

---

 

객체(object)와 속성(property)

 

▶객체(object)

· 객체는 중괄호({})를 통해 만들어짐

 

▶객체(object)의 속성(property)

· 객체 내부에 있는 값을 속성(property)이라고 한다.

· 구성

속성명(Property Name) + 속성값(Property Value)

아래 예시로 보자면 name: '홍길동' → 요런 것들이 속성(property)에 해당됨

· 객체 안의 속성(property)들은 쉼표(,)로 구분한다.

 

▶기본형 - 속성

{
  속성명: 속성값,
  속성명: 속성값,
  속성명: 속성값
}

 

▶예시

{
  name: '홍길동',
  bornYear: 1900,
  isVeryNice: true,
  worstCharacter: null
}

 

객체(object)의 속성(property)에 접근하기

 

2가지 방법으로 접근할 수 있다.

1. 점 표기법

2. 대괄호 표기법

 

1.점 표기법

▶기본형

(objectName.propertyName)
(객체명.앞의객체에속하는속성명)

점 표기법의 단점은

속성명(property name)이 문자열 형식('')인 경우, 해당 속성명을 표기할 수 없다.

 

▶예시1

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//점 표기법(objectName.propertyName)
console.log(gilDong.isVeryNice);
console.log(gilDong.bestHabit.habitName);

 

▶예시1 - 출력된 결과

true
운동

 

2. 대괄호 표기법

▶기본형

(objectName['propertyName'])
(객체명['앞의객체에속하는속성명'])

대괄호 표기법으로 작성시, 대괄호 내부는 문자열 형식('', 작은 따옴표)으로 나타내야 한다.

 

점 표기법과 달리

속성명(property name)이 문자열 형식('')이더라도, 해당 속성명을 표기할 수 있다.

단, 그렇다고 작은 따옴표를 연이어 붙이지는 않음. 

그냥 문자열 형식이 아닌 다른 property name들처럼 한 번만 작은 따옴표를 쓰면 된다.

 

▶예시1

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//대괄호 표기법(objectName['propertyName'])
console.log(gilDong['isVeryNice']);
console.log(gilDong.bestHabit['habitName']);

console.log(gilDong['born Year']);
console.log(gilDong['born' + ' Year']);

let propertyName = 'name';
console.log(gilDong[propertyName]);

 

▶예시1 - 출력된 결과

true
운동
1900
1900
홍길동

 

기존에 있는 속성(property)을 수정, 추가, 삭제하기

 

▶기존에 있는 속성(property)을 수정 

· 예시1

gilDong.name = '허균';

property를 할당시킬 때 작은 따옴표('')를 잊지 말 것

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//객체의 속성(property)을 수정
gilDong.name = '허균';
console.log(gilDong.name);

 

· 예시1 - 출력된 결과

홍길동
허균

 

▶기존에 없던 속성(property)을 새로 추가

· 예시1

gilDong.nationality = '대한민국';

property를 할당시킬 때 작은 따옴표('')를 잊지 말 것

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//기존에 없던 속성(property)을 추가
gilDong.nationality = '대한민국';
console.log(gilDong.nationality);

 

· 예시1 - 출력된 결과

대한민국

 

▶기존에 있는 속성(property)을 삭제

delete를 이용한다.

 

· 예시1

delete gilDong.name;
delete gilDong.worstHabit;

//객체(Object)
let gilDong = {
  name: '홍길동',
  'born Year': 1900,
  isVeryNice: true,
  worstHabit: null,
  bestHabit: {
    habitName: '운동',
    habitLevel: '우수함'
  }
};

//기존에 있는 속성(property)을 삭제
delete gilDong.name;
delete gilDong.worstHabit;
console.log(gilDong);

 

· 예시1 - 출력된 결과

{
  'born Year': 1900,
  isVeryNice: true,
  bestHabit: { habitName: '운동', habitLevel: '우수함' }
}

name속성과 worstHabit속성이 삭제되었다.

이 둘은 undefined처리 된 것임!(중요!!!)