객체 개요

입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있습니다. ex) 사용자 정보 등

---

학습 목표

• 배열과 객체의 특징을 구분하고 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다.
• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다. (CRUD)
• 객체 속성 조회법 두 가지, dot notation 과 bracket notation 의 차이를 이해한다.
• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

---

객체 개념학습

회원 주소록을 만들어본다고 가정해봅니다.

• 객체 사용안할 때

let userFirstName = 'Yeonwoo';
let userLastName = 'Park';
let userEmail = 'yeonwoopark22@gmail.com`;
let userCiry = 'Suwon';

let user2FirstName = 'Gahyun';
let user2LastName = 'Lee';
let user2Email = 'gahyun@gmail.com`;
let user2City = 'Gunsan';

// 동일한 유저의 정보도 서로 연결되어 있지 않습니다.
// 변수도 너무 과다하게 생성됩니다.

• 배열 사용할 때

let user = [
  'Yeonwoo',
  'Park',
  'yeonwoopark22@gmail.com',
  'Suwon'
];

let user2 = [
  'Gahyun',
  'Lee',
  'gahyun@gmail.com',
  'Gunsan'
]

// 동일한 유저의 정보가 서로 연결되어 있습니다.
// 하지만 각 index가 어떤 정보를 갖고 있는지 미리알고 있어야 하고 index로 접근할 경우 가독성도 떨어집니다.

• 객체 사용할 때

let user = {
  firstName: 'Yeonwoo',
  lastName: 'Park',
  email: 'yeonwoopark22@gmail.com',
  city: 'Suwon'
};

let user2 = {
  firstName: 'Gahyun',
  lastName: 'Lee',
  email: 'gahyun@gmail.com',
  city: 'Gunsan'
}

// 동일한 유저의 정보가 서로 연결되어 있습니다.
// 객체 내 각 키값을 통해 접근하고 가독성이 좋습니다.
// 동일한 속성의 객체를 배열로 묶어서 객체들을 서로 연결하고 함께 관리할 수 있습니다. (객체 배열) 

객체 정의 용법

• 객체는 키와 값 쌍(key-value pair)으로 이루어져 있습니다.
• 키, 값 사이는 콜론(:)으로 구분합니다.
• 중괄호(curly bracket)를 이용해서 객체를 만듭니다.
• 키-값 쌍(key-value pair)은 쉼표(comma)로 구분해줍니다.

객체 속성 접근 용법

1) Dot notation

user.firstName; // 'Yeonwoo'
user.city; // 'Suwon'

user2.firstName; // 'Gahyun'
user2.city; // 'Gunsan'

// Array.length 사용시 많이 사용했었습니다.
// 유저의 속성에 대해서 가져오는 것 입니다.

2) Bracket notation

user['firstName']; // 'Yeonwoo'
user['city']; // 'Suwon'

user2['firstName']; // 'Gahyun'
user2['city']; // 'Gunsan'

// Bracket 안의 값이 문자열로 들어간다는 것이 중요합니다.
---
// Bracket 안의 값은 문자열이 아닐경우 변수로 취급됩니다.
// 그래서 키값을 따로 문자열 변수로 받은 후 Bracket 안에 입력해줘도 사용 가능합니다.

user[firstName]; // 참조 에러

const firstName = 'firstName';
user[firstName]; // 'Yeonwoo'

객체 속성 접근 용법의 차이 및 쓰임새

• 키값이 동적으로 변할때 Bracket notation 을 사용합니다.

  • 보통 특정 함수가 매개변수로 객체이름, 속성이름을 동시에 받아 속성이름에 따라 값을 반환하려고 할때 함수 내에서 Bracket notation 을 사용하게 됩니다.

  // Bracket notation
  
  function getProperty(obj, propertyName) {
    return obj[propertyName];
  }
  
  let output = getProperty(user, 'firstName'); // 'Yeonwoo'
  output = getProperty(user, 'city'); // 'Suwon'
  
  ---
  
  // Dot notation
  
  function getProperty(obj, propertyName) {
    return obj.propertyName;
  }
  
  let output = getProperty(user, 'firstName'); // undefined
  output = getProperty(user, 'city'); // undefined
  
  // Dot natation 사용시 함수 내에서 속성이름을 매개변수로 입력받은 값으로 접근 하는 것이 아니라
  // user { propertyName : *value } 와 같이 정의되지 않은 값에 접근

• Dot/Bracket notation 을 이용해 값을 추가, 삭제할 수도 있습니다.

  // 추가
  
  user['age'] = 29;
  user.nickName = 'HyeonWooGa';
  
  => user {
    ...
    age: 29,
    nickName: 'HyeonWooGa'
  }
  ---
  // 삭제
  
  delete user.age; // 키-값 쌍을 지웁니다.
  
  => user {
    ...
    nickName: 'HyeonWooGa'
  }

• in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있습니다.

  // 확인
  
  'nickName' in user; // true
  'age' in user; // false

객체의 순회

1. for...in : 키값을 반복합니다. (키값 === 문자열)(주의, Array, String, 유사배열 등은 for...of)

   • 상속된 열거 가능한 속성들을 포함하여 모든 열거 가능한 속성에 대해
   • 구문(Syntax) : for(variable in object) { ... }
     • variable : 매번 반복마다 다른 속성이름(키값)이 변수(variable)로 지정됩니다.
     • object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체입니다.

2. Object.entries() (for...of) : [key, value] 쌍의 배열을 반환합니다. (key, value 의 이름은 변경가능)

   • 구문(Syntax) : Object.entries(obj) // return: [key, value]
     • obj : 객체 자체의 열거 가능한 문자열 키를 가진 속성 [key, value] 쌍이 반환되는 객체입니다.
     • 반환값 : 지정된 객체 자체의 열거 가능한 문자속성 [key, value] 쌍의 배열입니다.
   • 예시

   // 예시
   
   const user = { 
     firstName: 'Yeonwoo', 
     city: 'Suwon', 
     age: 29 
   };
   
   console.log(Object.entries(user)); 
   // [ ['firstName', 'Yeonwoo'], ['city', 'Suwon'], ['age': 29] ]

   • 반복문에 사용 예시

   // 반복문에 Object.entries() 사용 예시
   
   for (const [key, value] of Obejct.entries(user)) {
     console.log(`${key}: ${value}`);
   }
   
   // firstName: Yeonwoo
   // city: Suwon
   // age: 29
   

3. Object.keys() : Object.entries() 와 같지만 key 값들만 배열로 반환해줍니다.

4. Object.values() : Object.entries() 와 같지만 value 값들만 배열로 반환해줍니다.