JavaScript[8] - 객체

JavaScript [8] - 객체

 

객체

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

// 객체 리터럴 방식으로 객체 생성
const person = {
  name : 'Viktor',
  age : 30,
  greeting: function() {
    console.log(`Hello, my name is ${this.name}`)
  }
}
// 객체의 메서드 호출
person.greeting() // Hello, my name is Viktor

생성자 함수

• 동일한 객체를 여러 개 만들 때

// 기존
const member = {
  name : 'Viktor',
  age : 22,
  sId : 2022311491
}

const member2 = {
  name : 'Tony',
  age : 20,
  sId : 2022311492
}

• new 연산자로 사용하는 함수

function Member(name, age, sId) {
  this.name = name;
  this.age = age;
  this.sId = sId;
}

const member3 = new Member('issac', 23, 2022654321)

• 함수 이름은 반드시 대문자로 시작
• 생성자 함수를 사용할 때는 반드시 new 연산자를 사용

객체 관련 문법

객체 관련 ES6 문법

1. 속성명 축약
2. 메서드명 축약
3. 계산된 속성명 사용
4. 구조 분해 할당
5. 객체 전개 구문(Spread Operator)

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

const book = ['Learning JavaScript', 'Learning Node.js']
const magazines = ['Vogue', 'Science']

// 기존
const bookShop = {
  books : book,
  magazines : magazines,
}
console.log(bookShop)
/*
{
  books : ['Learning JavaScript', 'Learning Node.js'],
  magazines : ['Vogue', 'Science'],
}*/

// 축약
const bookShop2 = {
  books,
  magazines,
}
console.log(bookShop2)
/*
{
  books : ['Learning JavaScript', 'Learning Node.js'],
  magazines : ['Vogue', 'Science'],
}*/

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

// 기존
const obj = {
  greeting: function () {
    console.log('Hi!')
  }
}

obj.greeting() // Hi!

// 생략
const obj2 = {
  greeting() {
    console.log('Hi!')
  }
}

obj2.greeting() // Hi!

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

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

const myObj = {
  [key]: value,
}

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

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

const userInformation = {
  name: 'mandu',
  userId: 'manduStudent1133',
  email: 'mandu@mandu.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로 사용하기 위해서는 변환 작업이 필요

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

// Object to Json
const objToJson = JSON.stringify(jsObject)

console.log(objToJson) // {coffee: 'Americano', iceCream: 'Cookie and cream'}
console.log(typeof objToJson) // string

//Json  to Object
const jsonToObj = JSON.parse(objToJson)

console.log(jsonToObj) // {coffee: 'Americano', iceCream: 'Cookie and cream'}
console.log(typeof jsonToObj) // object