JavaScript 객체

객체(Object)

• 자바스크립트의 모든 건이 다 객체다
• 객체는 중괄호{}로 만든다.
• key, value 한 쌍을 property라고 한다.
• key를 propety name, value를 property value라고도 한다.
• propety name은 문자열(string) 타입
• 따옴표를 생략하고 property name을 만들 때 주의사항
  • 첫 번째 글짜는 반드시 문자, 밑줄(_), 달러 기호($)중 하나도 시작
  • 띄어쓰기 금지
  • 하이픈(-) 금지

• 객체는 key와 value를 콜론(:)으로 구분하는 property들의 집합

let myObject = {
  key: value,
}

• 객체 안에 있는 여러개의 property들은 쉼표,로 구분

let myObject = {
  key: value,
  key: value,
  key: value
}

• 객체의 property는 key를 통해서, 점 표기법 혹은 대괄호 표기법으로 접근 가능
• property vlaue는 모든 자료형 값을 사용 가능

console.log(typeof {
  productName: '연유라떼',
  price: 4600,
  isVeryNice: true,
  worstFlavor: null,
  bestMenu: {
    bread: '크루아상',
    cake: '당근케이크'
  }
})
// object

객체에서 데이터 접근하기

• 점 표기법 (objectName.propertyName)
  • 띄어쓰기가 있는 property name에 접근할 수 없음
• 대괄호 표기법 (objectName['propertyName'])
• 존재하지 않는 프로퍼티에 접근하는 경우: undefined

// 객체에서 데이터 접근하기
let myMenu = {
  'product Name': '연유라떼',
  price: 4600,
  isVeryNice: true,
  worstFlavor: null,
  recommendedMenu: {
    bread: '크루아상',
    cake: '당근케이크'
  }
}

// 점 표기볍 (objectName.propertyName)
// 띄어쓰기가 있는 property name에 접근할 수 없음
console.log(myMenu.price) // 4600
console.log(myMenu.recommendedMenu.bread) // 크루아상

// 대괄포 표기법 (objectName['propertyName'])
console.log(myMenu['product Name']) // 연유라떼
console.log(myMenu['product ' + 'Name']) // 연유라떼

console.log(myMenu.recommendedMenu['cake']) // 당근케이크

// 존재하지 않는 프로퍼티에 접근하는 경우: undefined
console.log(myMenu['product']) // undefined

객체 다루기

• in 연산자를 통해서 객체 내에 property name이 있는지 확인 가능

let profile = {
  '이름': '김아무개',
  '나이': '23',
  '키': 174,
  '여자친구': undefined,
  '좋아하는 메뉴': {
    '한식': '된장찌개',
    '양식': '알리오올리오',
    '중식': '짬뽕'
  }
}

console.log(profile['몸무게']) // undefined
// 존재하는 property를 추가
profile['몸무게'] = 67
console.log(profile['몸무게']) // 67

// 객체 property 삭제
console.log(profile['나이']) // 23
delete profile['나이']
console.log(profile['나이']) // undefined

// 객체 내에 propertyName 있는지 확인
console.log(profile['이름'] !== undefined) // true

// `propertyName' in object
console.log('이름' in profile) // true

// `propertyName' in object 방식이 더 좋은 이유
console.log(profile['여자친구'] !== undefined) // false
console.log('여자친구' in profile) // true

// if문에 사용하기 편리한 in 연산자
if ('name' in profile) {
  console.log(`name 값은 ${profile.name}입니다.`)
} else {
  console.log('name 프로퍼티는 존재하지 않습니다.')
}

메소드 (Method)

• 연관성 있는 여러 함수를 하나로 묶자

let greetings = {
  sayHello: function (name) {
    console.log(`Hello ${name}`)
  },
  sayHi: function() {
    console.log('Hi')
  },
  sayBye: function() {
    console.log('Bye')
  }
}

greetings.sayHello('김씨') // Hello 김씨
greetings['sayHello']('김씨') // Hello 김씨

• method를 쓰면 다른 함수와 이름 중복을 피하고 고유한 동작으로 의미있게 구분 가능

let rectAngle = {
  witdh: 30,
  height: 50,
  getArea: function () {
    return rectAngle.width * rectAngle.height
  }
}

let triAngle = {
  width: 15,
  height: 40,
  getArea: function () {
    return triAngle.width * triAngle.height / 2
  }
}

for ... in

for..in
for (변수 in 객체) {
  동작부분
}

let beverage = {
  '탄산': '제로콜라',
  '주스': '오렌지주스',
  '차': '헛개차'
}

for (let k in beverage) {
  console.log(k)
  console.log(beverage[k])
}
// 탄산
// 제로콜라
// 주스
// 오렌지주스
// 차
// 헛개차

• 출력되는 순서가 다르다.

let testObject1 = {
  '2': '알고리즘',
  '1': '자료구조',
  '5': '자바스크립트'
}

for (let key in testObject1) {
  console.log(testObject1[key])
}
// 자료구조
// 알고리즘
// 자바스크립트

• 숫자형(양수) 프로퍼티 네임
  • 프로퍼티 네임에는 숫자형(양수)도 작성 가능
  • 프로퍼티 네임이 string, 문자열로 출력됨
  • 대괄호표기법으로만 접근 가능

let testObject2 = {
  100: '정수',
  3.5: '소수'
}

for (let key in testObject2) {
  console.log(`${key}의 자료형은 ${typeof key}입니다.`)
}
// 100의 자료형은 string입니다.
// 3.5의 자료형은 string입니다.

console.log(testObject2['100']) // 정수
// console.log(testObject2.100) // 에러 발생

• 정수형 프로퍼티 네임
• 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다

let testObject3 = {
  3: '정수3',
  name: 'test',
  1: '정수1',
  birthDay: '2021.7.3',
  2: '정수2'
}

for (let key in testObject3) {
  console.log(key)
}
// 1
// 2
// 3
// name
// birthDay

Date 객체

let myDate = new Date()

console.log(myDate) // 현재 생성된 시간이 나옴

// new Date(milliseconds)
let myDate1 = new Date(1000)

console.log(myDate1) // 1970-01-01T00:00:01.000Z

// new Date('YYYY-MM-DD')
let myDate2 = new Date('2021-07-03')

let myDate3 = new Date('2021-07-03T19:32:15')

console.log(myDate2) // 2021-07-03T00:00:00.000Z
console.log(myDate3) // 2021-07-03T10:32:15.000Z

// Date.getTime()
// 1070년 11월 1일 00:00:00 UTC 부터 몇 밀리초 지났는지? (타임스탬프(time stamp))
let myDate4 = new Date(2021, 7, 3, 20, 10, 15)
console.log(myDate.getTime()) // 1625312056419

// Date.now()
// 현 시점의 날짜 값을 얻어낼 수 있다.
let myDate5 = new Date()
console.log(Date.now())