(JS) 객체

객체 (Object)

키(key)과 값(value)으로 구성된 속성(property)들의 집합

자바스크립트는 객체 기반의 언어이고, 자바스크립트의 기본 데이터 타입은 객체이다.
원시타입(primitive type)을 제외한 모든 것이 객체로 정의된다.

1. 객체 생성 방법

- 객체 리터럴 ( object literal )

const 객체명 = {
  key1: value1,
  key2: value2,
  ...
};  

객체를 생성할 때 가장 쉽고 일반적인 방법은 객체 리터럴이다.
중괄호({}) 안에 키와 값을 콜론(:)으로 연결하고 쉼표를 사용하여 프로퍼티 끼리 구별을 해준다.

<예시>

const myPhone = {
  name: 'iphone',
  series: '12pro',
  made: 'apple',
  color: 'spaceGray',
};

console.log(myPhone); // { name: 'iphone', series: '12pro', made: 'apple', color: 'spaceGray' }

- new 연산자 & Object ()

const myPhone = new Object ();
myPhone.name = 'iphone';
myPhone.series = '12pro';
myPhone.made = 'apple';
myPhone.color = 'spacegray';

console.log(myPhone); // { name: 'iphone', series: '12pro', made: 'apple', color: 'spacegray' }

new Object()를 이용하여 빈 객체를 생성 후에, 프로퍼티를 추가하여 객체를 만드는 방법이다.
다만, 가독성 면에서 객체 리터럴을 이용하는 방법이 더 좋아보이기는 한다.

- 생성자 함수

프로퍼티의 키(key)가 같고 값만 다른 객체들을 리터럴 방식으로 만든다고 하자.

<리터럴>

const iphone = {
  name: 'iphone',
  series: '12pro',
  made: 'apple',
  color: 'spaceGray',
};

const galaxy = {
  name: 'galaxy',
  series: 's22',
  made: 'samsung',
  color: 'black',
};

같은 키를 가지지만 값만 다른 객체들을 계속 반복해서 만들어야 한다.
이런 같은 프로퍼티의 객체들을 쉽게 만들 수 있는 것이 생성자 함수이다.

<생성자 함수>

function Phone (name, series, made, color) {
    this.name = name;
    this.series = series;
    this.made = made;
    this.color = color;
};

const iphone = new Phone ('iphone', '12pro', 'apple', 'spaceGray');
const galaxy = new Phone ('galaxy', 's22', 'samsung', 'black');

console.log(iphone); 
// Phone { name: 'iphone', series: '12pro', made: 'apple', color: 'spaceGray' }
console.log(galaxy);
// Phone { name: 'galaxy', series: 's22', made: 'samsung', color: 'black' }

• 객체 내에서 해당 객체를 호출할 때 this 이용.
• 생성자 함수는 대문자로 지음.

다른 함수와 똑같이 함수를 선언한 후에, new 연산자와 함께 호출하게되면 해당 함수는 생성자 함수로 쓰여진다.
값만 다른 같은 프로퍼티의 객체들을 반복해서 만들어야 할 때 효율적일 것이다.

2. 객체 프로퍼티에 접근

const myPhone = {
    name: 'iphone',
    series: '12pro',
    made: 'apple',
    color: 'spaceGray',
    display: function () {
        console.log(`제 휴대폰은 ${this.name} ${this.series} 입니다.`);
    }
  };

- 마침표 표기법 ( dot notation )

위에 있는 myPhone 객체에 있는 프로퍼티 값에 접근해보자.

console.log(myPhone.name); // iphone
console.log(myPhone.made); // apple
myPhone.display(); // 제 휴대폰은 iphone 12pro 입니다.
console.log(myPhone.display); // [Function: display] (잘못된 예시)

마침표(.)를 이용하여 객체명.key의 형태로 접근할 수 있다.
메소드에 접근하기 위해서는 괄호()를 붙여줘야 한다.

- 대괄호 표기법 ( bracket notation )

console.log(myPhone['name']); // iphone
console.log(myPhone['made']); // apple

대괄호 표기법을 사용할 때 프로퍼티 이름은 반드시 문자열이어야 한다. (따옴표 사용)
마침표 표기법과 비교를 하면, 대괄호 표기법은 예약어나 유효하지 않은 key이름일 때 사용할 수 있다.
즉, 동적으로 접근하고자 할 때 사용할 수 있다.

//마침표 표기법
const myPhone = {
    name: 'iphone',
    series: '12pro',
    made: 'apple',
    color: 'spaceGray',
  };

  function getValue(obj, key) {
    return obj.key; //마침표
}
console.log(getValue(myPhone, 'name')); //undefined

//대괄호 표기법
const myPhone = {
    name: 'iphone',
    series: '12pro',
    made: 'apple',
    color: 'spaceGray',
  };

  function getValue(obj, key) {
    return obj[key]; //대괄호
}
console.log(getValue(myPhone, 'name')); //iphone

3. 프로퍼티 추가 및 삭제

- 프로퍼티 추가

추가할 프로퍼티의 key와 값을 할당한다.

const myPhone = {
    name: 'iphone',
    series: '12pro',
    made: 'apple',
    color: 'spaceGray',
  };
myPhone.os = 'ios' ; // 프로퍼티 추가

console.log(myPhone.os); // ios

- 프로퍼티 삭제

delete 연산사 뒤에 프로퍼티의 key를 붙여서 해당 프로퍼티를 삭제한다.

const myPhone = {
    name: 'iphone',
    series: '12pro',
    made: 'apple',
    color: 'spaceGray',
  };
delete myPhone.color; //프로퍼티 삭제

console.log(myPhone.color); // undefined
console.log(myPhone); // { name: 'iphone', series: '12pro', made: 'apple' }