1. 객체

자바스크립트의 참조 자료형 (혹은 비원시타입).
객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을수 있게 해준다.

키(key):값(vlaue) 쌍으로 구성된 프로퍼티를 여러 개 넣을 수 있다.
키에는 문자형, 값에는 모든 자료형이 들어갈 수 있다.

객체에 프로퍼티로 들어간 함수는 메서드(method)라고 부르고, 함수가 아닌 프로퍼티들은 멤버라고 부른다.

2. 객체를 생성하는 방법

(1) 생성자 함수를 사용하기

자바스크립트에 내장되어 있는 Object() 생성자 함수를 사용하는 방법이다.

// 빈 객체 생성
const book1 = new Object();

// book1 객체 프로퍼티 할당
book1.name = '수학의 개념원리';
book1.number = 3421;
book1.intro = function(){
  console.log(`${this.name}은 초급자용 입니다.`)
}

console.log(book1);		// {name: "수학의 개념원리", number: 3421, intro: ƒ ()}

(2) 객체 리터럴 방식 사용하기

객체 리터럴 방식은 {} 중괄호를 사용하여 객체를 색성한다.
중괄호 안에 키:값 쌍으로 이루어진 프로퍼티가 들어간다.
프로퍼티 키는 식별자라고도 부른다.

const book1 = {
  name: '수학의 개념원리',
  number: 3421,
  intro: function(){
    console.log(`${this.name}은 초급자용 입니다.`)
  }
}

console.log(book1);		// {name: "수학의 개념원리", number: 3421, intro: ƒ intro()}

아래의 이유로 객체 리터럴 방식을 더 많이 사용한다.

• 객체의 프로퍼티들이 한 곳에 모아져있기 때문에 직관적이다.
• Object() 생성자 방식은 객체를 생성한 후 프로퍼티를 할당하지만 객체 리터럴 방식은 객체 생성과 동시에 프로퍼티를 할당한다.

3. 객체 프로퍼티

3-1. 객체 프로퍼티에 접근하기

(1) 점 표기법

.을 통해 객체 프로퍼티에 접근한다. 유효한 변수 식별자인 경우에만 사용할 수 있다.

• 유효한 식별자 : 공백이 없고 숫자로 시작하지 않아야하며 $, _를 제외한 특수문자가 없어야한다.

객체이름.프로퍼티키이름

const book1 = {
  name: '수학의 개념원리',
  number: 3421,
  intro: function(){
    console.log(`${this.name}은 초급자용 입니다.`)
  }
}

console.log(book1.name);	// 수학의 개념원리 

메서드 안에서는 this를 사용해서 자기 자신의 객체에 접근할 수 있다.

(2) 대괄호 표기법

여러 단어를 조합하거나 유효한 변수 식별자가 아닌 프로퍼티 키를 만든 경우는, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
이럴 때는 대괄호 표기법(square bracket notation)을 사용한다.
대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작한다.

console.log(book1["name"]);		// 수학의 개념원리 

대괄호 표기법에서는 대괄호 안에 문자열을 따옴표로 묶어줘야한다.
그렇지 않으면 변수로 인식한다.

객체의 프로퍼티 키를 통해 값을 받아오는 함수를 만들 경우에도 대괄호 표기법을 사용하면 편리하다.
즉, 동적으로 파라미터를 전달받는 상황 / 키가 고정되어 있지 않은 상황에 사용할 수 있다.

function getPropertyValue(key) {
  return book1[key];
}

console.log(getPropertyValue("number"));	// 3421

계산된 프로퍼티

객체를 만들 때, 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여있는 경우를 계산된 프로퍼티(coumputed property)라고 부른다.

계산된 프로퍼티는 프로퍼티 이름을 변수에서 가져온다.

const passenger = prompt('어떤 승객이 탔지?');		// 학생 입력
const bus = {
 [passenger]: 3,
 max: 30
}
console.log(bus);		// {학생: 3, max: 30}

아래처럼 복잡한 표현식을 사용 할 수 도 있다.

const passenger = prompt('어떤 승객이 탔지?');
const bus = {
 ['여자'+passenger]: 3,
 max: 30
}
console.log(bus);		// {여자학생: 3, max: 30}

3-2. 객체 프로퍼티 수정하기

점표기법과 대괄호 표기법 모두 사용할 수 있다.

(1) 프로퍼티 추가와 수정

추가할 때는 추가할 키와 값을 추가하면 되고
수정할 때는 수정할 키와 값을 추가하면 된다.

// 추가: 점 표기법
book1.totalPage = 500;

// 추가: 대괄호 표기법
book1["comment"] = '우주를 알기 쉬운 책!'

// 수정: 점 표기법
book1.name = '우주의 과학';

// 수정: 대괄호 표기법
book1["number"] = 1000;

console.log(book1);		// {name: "우주의 과학", number: 1000, intro: ƒ intro(), totalPage: 500, comment: "우주를 알기 쉬운 책!"}

(2) 프로퍼티 삭제

삭제는 delete 연산자 사용한다. 역시 점 표기법, 대괄호 표기법 모두 사용가능하다.

delete book1.number;

하지만 이 방법은 객체와 프로퍼티간의 연결을 끊을 뿐 메모리에서 지워지지는 않는다.
메모리에서 지우기 위해서는 null을 대입하는 방법이 더 권장된다.

book1.number = null;

상수 객체

const는 상수를 선언할 때 사용한다. 하지만 cosnt로 선언된 객체는 수정될 수 있다.
book1은 const로 객체를 만들었는데 왜 값을 변경해도 상관이 없을까?
프로퍼티를 수정하는 것은 상수 자체를 수정하는 것이 아니기 때문이다.
상수 자체를 수정하는 것은 아래와 같이 book1에 새로운 객체를 대입하는 것이다.

const book1 = {
  name: '수학의 개념원리',
  number: 3421,
  intro: function(){
    console.log(`${this.name}은 초급자용 입니다.`)
  }
}

// Error
book1 = {
  writer: '민민'
}

3-3. 프로퍼티 존재 여부 확인하기

자바스크립트의 객체에서는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다.
이 특징을 사용해 아래와 같이 존재 여부를 확인 할 수도 있지만

console.log(book1.bookmark  === undefined);	// true면 해당 프로퍼티가 존재하지 않음

in 연산자를 사용하면 프로퍼티의 존재 여부를 확인할 수 있다.
존재한다면 true, 존재하지 않는다면 false를 반환한다.

console.log("bookmark" in book1);	// false

4. 객체 순회하기

for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.

// 기본문법
for (key in object) {}

예시 :

const book1 = {
  name: '수학의 발견',
  number: 3421,
  intro: function(){
    console.log(`${this.name}은 초급자용 입니다.`)
  }
};

for (let key in book1) {
  console.log('키:' +key);
  console.log('값: ' + book1[key])
};

결과 :