객체 (Object)

• 이름과 값을 가진 속성(property)들의 집합으로 이루어진 자료구조
  • 중괄호 내부에 key와 value의 쌍으로 표현
• key
  • 문자열 타입만 가능
  • key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현
• value
  • 모든 타입(함수포함) 가능
• 객체 요소 접근
  • 점(.) 또는 대괄호([])로 가능
  • key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능

객체 예시

• 객체는 속성으로 함수를 정의할 수 있음 (메서드)

// 객체 리터럴 방식으로 객체 생성
const person = {
    name: 'Jieun',
    age: 27,
    greeting: function () {
        console.log(`Hello, my name is ${this.name}.`)
    }
};

// 객체의 메서드 호출
person.greeting();  // Hello, my name is Jieun.

생성자 함수

• 동일한 구조의 객체를 여러 개 만들고 싶다면?
• 생성자 함수는 특별한 함수를 의미하는 것이 아님
• new 연산자로 사용하는 함수
  • 함수 이름은 반드시 대문자로 시작

function Member(name, age, sId) {
    this.name = name
    this.age = age
    this.sId = sId
}
const member = new Member('isaac', 21, 2022654321)
console.log(member)  // Member {name: 'isaac', age: 21, sId: 2022654321}

객체 관련 문법

• ES6에 새로 도입된 문법들로 객체 생성 및 조작에 유용하게 사용 가능
  1. 속성명 축약
  2. 메서드명 축약
  3. 계산된 속성명 사용하기
  4. 구조 분해 할당
  5. 객체 전개 구문(Spread Operator)

속성명 축약

• 객체를 정의할 때 key와 할당 받는 변수의 이름이 같으면 예시와 같이 축약 가능

// ES5
var bookShop = {
    books: books,
    magazines: magazines,
}
console.log(bookShop)
/*
{
    books: ['Learnig JavaScript', 'Learnig Python'],
    magazines: ['Vogue', 'Science']
}
*/
// ES6+
const bookShop2 = {
    books,
    magazines,
}
console.log(bookShop2)
/*
{
    books: ['Learnig JavaScript', 'Learnig Python'],
    magazines: ['Vogue', 'Science']
}
*

• 메서드 선언 시 function 키워드 생략 가능

// ES5
var obj = {
	greeting: function () {
		console.log('Hi!')
	}
}

obj.greeting()  // Hi!

// ES6+
var obj = {
	greeting() {
		console.log('Hi!')
	}
}

obj.greeting()  // Hi!

계산된 속성 (computed property name)

• 객체를 정의할 때 key의 이름을 표현식을 이용하여 동적으로 생성 가능

const key = 'country'
const value = ['한국', '미국', '일본', '중국']

const myObj = {
	[key]: value,
}

console.log(myObj) // { country: [ '한국', '미국', '일본', '중국' ]}
console.log(myObj.country) // [ '한국', '미국', '일본', '중국' ]

구조 분해 할당 (destruction assignment)

• 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

// ES5
const userInformation = {
    name: 'jieun moon',
    userId: 'mjieun',
    email: 'jieun@jieun.com'
}
const name = userInformation.name
const userId = userInformation.userId
const email = userInformation.email

// ES6+
const userInformation = {
    name: 'jieun moon',
    userId: 'mjieun',
    email: 'jieun@jieun.com'
}
const {name} = userInformation
// 아래와 같은 형태로도 가능
const {userId, email} = userInformation

Spread syntax(…)

• 배열과 마찬가지로 전개구문을 사용해 객체 내부에서 객체 전개 가능
• 얕은 복사에 활용 가능

const obj = {b: 2, c: 3, d: 4}
const newObj = {a:1, ...obj, e:5}
console.log(newObj)  // {a: 1, b: 2, c: 3, d: 4, e: 5}

JSON

• JavaScript Object Notation
• Key-Value 형태로 이루어진 자료 표기법
• JavaScript의 Object와 유사한 구조를 가지고 있지만 Object는 그 자체로 타입이고, JSON은 형식이 있는 ‘문자열’
• 즉, JSON을 Object로 사용하기 위해서는 변환 작업 필요

JSON 변환

const jsObject = {
    coffee: 'Americano',
    iceCream: 'Cookie and cream',
}

// Object -> JSON
const objToJson = JSON.stringify(jsObject)
console.log(objToJson)  // {"coffee":"Americano","iceCream":"Cookie and cream"}
console.log(typeof objToJson)  // string

// JSON -> Object
const JsonToObj = JSON.parse(objToJson)
console.log(JsonToObj)  // {coffee: 'Americano', iceCream: 'Cookie and cream'}
console.log(typeof JsonToObj)  // object

[참고] 배열은 객체다

• 배열은 키와 속성들을 담고 있는 참조 타입의 객체
• 배열은 인덱스를 키로 가지며 length 프로퍼티를 갖는 특수한 객체