객체

객체란?

키와 값이 쌍으로 이루어져 있는 데이터 타입으로,

중괄호를 이용해서 만들고, 키-값 쌍(key-value pair)은 쉼표(,)로 구분,

키와 값 사이는 콜론(:)으로 구분한다.

let user = {
  firstName: "Seulgi",
  lastName: "Yoo",
  city: "Seoul",
};

객체는 위와 같이 user의 정보를 담아야 할 때(보통 주소록과 같은 데이터를 담을 때 사용한다), 각 항목마다 변수를 따로 선언하는 번거로움을 줄일 수 있고, 서로 관계가 있는 데이터라는 점을 명확히 알 수 있음.
인덱스와 요소로 이루어진 배열의 경우, 각 값들이 어떤 정보를 의미하는지 명확히 알기 어려워 가독성이 떨어짐.

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

• 아래의 user 객체가 있다고 했을 때,

   let user = {
     firstName: "Seulgi",
     lastName: "Yoo",
     city: "Seoul",
   };

1. Dot notation: dot(.)을 이용하여 값을 사용하는 방법
   변수명.key 형식으로 작성한다.

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

2. Bracket notation: 대괄호([])를 이용하여 값을 사용하는 방법
   변수명 뒤 대괄호 안에 문자열 형태로 key를 작성한다. (’ ’, “ ”, 모두 사용 가능)

    user['firstName']; // 'Seulgi'
    user[city]; // → error 발생함! city is not defined

   이 때, key name을 변수로 선언해 준다면 문자열 형태가 아니여도 값을 사용할 수 있다. 
   (단, Dot notation으로 사용 시에는 undefined로 나옴)
   말로 설명하기 어려우니 아래 예제로 살펴보자.

    let cityKey = 'city';
    user[cityKey]; // 'Seoul'
    user.city === user[cityKey]; // true
    
    user.cityKey; // undefined

   그럼 Bracket notation을 써야 할 때가 언제인가? → key 값이 변할 때!
   아래 코드를 보면 output1과 output2에서 불러오고자 하는 key 값이 다른데,
   getProperty 함수에서 return을 obj.name 으로 작성했기 때문에 두 개 모두 person의 name 값인 ‘Seulgi’가 나오는 것을 볼 수 있다.

    let person = {
      name: "Seulgi",
      age: 16,
    };
    
    function getProperty(obj, propertyName) {
      return obj.name;
    }
    
    let output1 = getProperty(person, "name");
    console.log(output1); // 'Seulgi'
    
    let output2 = getProperty(person, "age");
    console.log(output2); // 'Seulgi'

   그럼 getProperty 함수를 호출할 때 두번 째 인자에 들어가는 key에 따라 다르게 출력하려면?
   아래 코드처럼 함수 내 return 문에 Bracket notation으로 작성하니 key 값이 달라져도 잘 출력된다.

    let person = {
      name: "Seulgi",
      age: 16,
    };
    
    function getProperty(obj, propertyName) {
      return obj[propertyName];
    }
    
    let output1 = getProperty(person, "name");
    console.log(output1); // 'Seulgi'
    
    let output2 = getProperty(person, "age");
    console.log(output2); // '16'

객체에 값을 추가/삭제/확인하기

1. 추가: dot/bracket notation을 이용해 값을 추가할 수 있음

   let person = {
     name: "Seulgi",
     age: 16,
   };
   
   person.address = ['Korea', 'Seoul'];
   person['gender'] = 'woman';
   
   console.log(person)// {name: 'Seulgi', age: 16, address: ['Korea', 'Seoul'], gender: 'woman'}

2. 삭제: delete 키워드를 이용해 값을 삭제할 수 있음

   let person = {
     name: "Seulgi",
     age: 16,
     gender: 'woman',
   };
   
   delete person.gender;
   
   console.log(person)// {name: 'Seulgi', age: 16, }

3. 확인: in 연산자를 이용해 해당하는 키가 있는지 확인할 수 있음

   let person = {
     name: "Seulgi",
     age: 16,
     gender: 'woman',
   };
   
   'name' in person; // trun
   
   // 이 아래는 궁금해서 콘솔에 찍어봄
   let age = 'age';
   age in person; // trun
   
   gender in person // error! → gender is not defined