JavaScript 기초- Object

Object

: 객체는 속성의 집합이며, 중괄호 내부에 key와 value 쌍으로 표현

• key는 문자열 타입만 가능 -> 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서
• value는 모든 타입 가능
• 객체 요소 접근은 점(.) 또는 대괄호([])로 가능 -> key 이름에 띄어쓰기 값은 구분자가 있으면 대괄호 접근만 가능

const myInfo = {
  name : 'Tom',
  phoneNumber: '123456', 
  'apple product' : {
    airpot : 'airpot pro',
    iphone : '12',
  },
}

console.log(myInfo.name)       // Tom
console.log(myInfo['name'])    // Tom
// console.log(myInfo.'apple product')  // 불가능
console.log(myInfo['apple product'])     // { airpot: 'airpot pro', iphone: '12' }
console.log(myInfo['apple product'].iphone)  // 12

 

 

 

 

객체 관련 문법

 

1. 속성명 축약

: 객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 축약 가능

const clothes = ['shirt', 'skirt', 'pants']
const items = ['hat', 'watch']

const shop = {
  // clothes : clothes,
  clothes,
  // items : items,
  items,
}
console.log(shop)    // { clothes: [ 'shirt', 'skirt', 'pants' ], items: [ 'hat', 'watch' ]}

 

 

2. 메서드명 축약

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

const obj1 = {
  greeting : function () {
    console.log('hello!')
  }
}

const obj2 = {
  greeting() {
    console.log('hello!')
  }
}

obj1.greeting()  // hello!
obj2.greeting()  // hello!

 

 

3. 계산된 속성명 사용하기

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

const key = 'country'
const value = ['한국', '캐나다', '미국', '중국']

const obj3 = {
  [key] : value,
}

console.log(obj3)          // { country: [ '한국', '캐나다', '미국', '중국' ] }
console.log(obj3.country)  // [ '한국', '캐나다', '미국', '중국' ]

 

4. 구조 분해 할당

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

const myInfo = {
  name : 'yuna kim',
  userId : 'Udragon',
  phoneNumber : '010-1234-1234',
  email : 'dragon@email.com'
}

// const name = myInfo.name
// const userId = myInfo.userId
// const phoneNumber = myInfo.phoneNumber
// const email = myInfo.email

const { name } = myInfo
const { userId } = myInfo
const { phoneNumber } = myInfo
const { email } = myInfo

// 여러개도 가능
const { name, userId } = myInfo

 

 

5. 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 형태로 이루어진 자료 표기법

- JavaScipt의 Object와 유사한 구조를 가지고 있지만 Object 는 그 자체로 타입이고, JSON은 형식이 있는 문자열

즉, JSON을 Object로 사용하기 위해서는 변환 작업 필요

 

const jsonData = {
  coffee : 'latte',
  iceCream : 'vanilla'
}

// Object => JSON
const objToJson = JSON.stringify(jsonData)
console.log(objToJson)          // {"coffee":"latte","iceCream":"vanilla"}
console.log(typeof objToJson)   // string (JSON은 문자열)


// JSON => Object
const jsonToObj = JSON.parse(objToJson)
console.log(jsonToObj)          // { coffee: 'latte', iceCream: 'vanilla' }
console.log(typeof jsonToObj)   // object

-> 출력에는 차이가 없지만 형변환이 되었음!