객체(Object)

🌻 자바스크립트에서 객체는 게임 캐릭터에 비유할 수 있다. 나의 캐릭터와 다른 사람의 캐릭터는 직업과 능력을 가지고 있지만, 서로 다른 직업과 능력을 가지고 있다. 회원가입 시 입력하는 정보도 각자 다르지만, 입력해야 하는 정보의 종류는 동일하다.

객체 기초

---

Achievement Goals

• 배열 및 객체 구조를 이해하고 어떻게 사용하는 지 이해할 수 있다.
  • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
    
    
• 객체 속성(property)의 추가, 삭제, 조회를 자유자재로 할 수 있다.
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
  • obj.a = "hello"와 같은 이질적인 객체 할당 방식을 능숙하게 다룰 수 있다.
  • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
  • 객체를 위한 for문 for ... in 문의 기본을 이해하고 다룰 수 있다.
    
    
• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

---

객체란?

• 회원 주소록을 만든다고 가정해보자.
  
• 객체는 이러한 주소록에 적합한 자료구조이다. 객체의 선언은 다음과 같다.

let user = {
  firstName: 'Steve';
  lastName: 'Lee';
  email: 'steve@codesates.com';
  city: 'Seoul';
};

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

---

객체 값 사용 방법

• 객체의 값을 사용하는 방법에는 두 가지가 있다.

let user = {
  firstName: 'Steve';
  lastName: 'Lee';
  email: 'steve@codesates.com';
  city: 'Seoul';
};

[방법 1] : Dot notation

user.firstName;    // 'Steve'
user.city;         // 'Seoul'


[방법 2] : Bracket notation

user['firstName']; // 'Steve'
user['city'];      // 'Seoul'

• 단, Bracket notation을 사용할 때에는 bracket 안쪽의 내용을 문자열 형식으로 전달해야 한다.
  
  
• Dot/Bracket notation을 이용해 값을 추가할 수도 있다.
  
  • 3가지 속성이 잘 추가된 모습이다.
    
    
• delete 키워드를 이용해 속성 삭제가 가능하다.
  
  • 객체 안에 color 키-값 쌍이 삭제된 모습이다.
    
    
• in 연산자를 이용해 객체 안에 해당하는 키가 있는지 확인할 수 있다.
  
  • name에 해당하는 키는 존재하므로 true, color에 해당하는 키는 위에서 삭제되었기 때문에 false가 나오는 모습이다.

---

배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글 달아주시면 수정하겠습니다. 감사합니다 :)