본문 바로가기

💻 개발자/🔨 HTML, CSS, JS

[JS] 객체(Object) 기초

반응형

1. 객체란?

주소록과 같이 한 대상의 다양한 정보들을 한 눈에 보기 좋게 정리할 때 필요한 자료 구조

 

객체는 키와 값 쌍(key-value pair)으로 이루어져 있다.

또한 객체는 중괄호(curly bracket) 내부에 키와 값이 존재한다.

let user = {
  firstName: 'Adam',
  lastName: 'Kim',
  email: 'bobokook@gmail.com',
  city: 'Busan'
};
// firstName, lastName 등을 키(key)
// 'Adam', 'Kim' 등을 값(value)

2. 객체의 값을 사용하는 방법 2가지

  • 방법1: Dot notation
user.firstName; // 'Adam'
user.city; // 'Busan'

 

  • 방법2: Bracket notation
user['firstName']; // 'Adam'
user['city']; // 'Busan'

* 주의사항: Bracket notation 사용 시 키(key)에 무조건 따옴표 붙이기!


3. 객체에 값 변경 & 추가 & 삭제 방법

user.lastName = 'Lee'; 
user['city'] = 'Seoul';
// 변경하는 방법

console.log(user)
//   {firstName: 'Adam',
//   lastName: 'Lee',
//   email: 'bobokook@gmail.com',
//   city: 'seoul'
//  }
user.phoneNum = '010-1234-5678'
// 추가하는 방법

console.log(user)
//   {firstName: 'Adam',
//   lastName: 'Lee',
//   email: 'bobokook@gmail.com',
//   city: 'seoul',
//   phoneNum: '010-1234-5678'
//  }
delete user['email']
// 삭제하는 방법

console.log(user)
//   {firstName: 'Adam',
//   lastName: 'Lee',
//   city: 'seoul',
//   phoneNum: '010-1234-5678'
//  }
반응형