프로그래밍과 데이터 in JavaScript_객체

객체와 프로퍼티

• 객체 (object): 여러가지 값을 한 번에 저장하고 싶을 때 사용
  • 객체는 변수에 담겨서 이름을 만듦
  • 중괄호를{} 이용해서 만들며 다양한 값들을 쉼표로 구분해서 저장함
  • 값이름: 값을 속성 (property)라고 함
  • 값이름을 key, 값을 value라고 함
  • 값이름은 문자열로 원래는 따옴표로 감싸줘야 하지만 암묵적 형변환으로 인해 생략 가능함
• property name 주의사항
  1) 첫 번째 글자는 반드시 문자, 언더바_, 달러 기호$ 중 하나로 시작함
  2) 띄어 쓰기 금지
  3) 하이픈- 금지
  ** 이 규칙을 벗어날 떄는 따옴표로 감싸 주어야 함

let codeit = {
  'brand Name': '코드잇',
  'born-Year': 2017,
  isVeryNice: true,
  worstCourse: null
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
}

• 객체 안애 객체를 넣을 수도 있음
• typeof(객체): object

객체에서 데이터 접근하기

• 점 표기법 (간단함)
  objectName.propertyName

console.log(codeit.isVeryNice); // true

• 대괄호[] 표기법 (유연함)
  objectName['propertyName']

console.log(codeit['Brand Name']); // 코드잇

let propertyName = 'born-year';
console.log(codeit[propertyName]); // 2017

• 객체 안의 객체 접근

console.log(codeit.bestCourse.title); // 자바스크립트 프로그래밍 기초
console.log(codeit.bestCourse['title']); // 자바스크립트 프로그래밍 기초

• 존재하지 않는 프로퍼티에 접근하려 할 때

console.log(codeit.bestCourse.teacher); // undefined

객체 다루기

• 프로퍼티 재할당

codeit['brand Name'] = 'codeit';
console.log(codeit['brand Name']); // codeit

• 프로퍼티 추가

codeit.ceo = '강영훈';
console.log(codeit.ceo); // 강영훈

• 프로퍼티 삭제

delete codeit.worstCourse;
console.log(codeit.worstCourse); // undefined

• 프로퍼티 존재 확인

console.log(codeit['brand Name']) !== undefined); // true

propertyName in object

console.log('brand Name' in codeit); // true

객체와 메소드

• 연관된 여러 값을 하나로 묶은 것 처럼 연관성 있는 여러 함수들을 하나로 묶을 때도 객체를 활용할 수 있음
• 객체의 메소드: 객체의 프로퍼티는 어떤 자료형이든 저장할 수 있음 따라서 프로퍼티 값으로 함수를 넣어주면 됨 이를 객체의 메소드라고 부름

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

greetings.sayHello('Codeit'); // Hello Codeit!
greetings['sayHello']('Codeit'); // Hello Codeit!

for...in 반복문

• 객체 안의 프로퍼티들을 가지고 반복적인 동작을 할 때 사용함
• 객체의 프로퍼티 네임을 가져옴
• 객체의 프로퍼티 네임이 변수에 할당되고 프로퍼티 개수 만큼 for문이 돌아감

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

for (let k in codeit) {
  console.log(k); // 프로퍼티 네임들이 출력됨
  console.log(codeit[k]); // 프로퍼티 값들이 출력됨
};

for...in 주의사항

• 숫자형(양수) 프로퍼티 네임
  자료형은 string임
  예외적인 파라미터 네임은 접근할 때도 대괄호표기법으로만 접근이 가능함
• 정수형 프로퍼티 네임
  객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있음

Date 객체

• 내장 객체(Standard built-in objects): 자바스크립트가 미리 가지고 있는 객체
• Date 객체 만들기

let myDate = new Date();
console.log(myDate); // 객체를 생성한 순간의 시간이 출력됨 (요일, 월, 일, 년도, 시간, 시간대)

• 원하는 날짜 생성하기

//new Date(milliseconds)
let myDate = new Date(1000); // 1970년 1월 1일 00:00:00 UTC + 1000밀리초!

//new Date('YYYY-MM-DD')
let myDate1 = new Date('2017-05-18');
//new Date('YYYY-MM-DDThh:mm:ss')
let myDate2 = new Date('2017-05-18T19:11:16');

console.log(myDate1); // Thu May 18 2017 00:00:00 GMT+0900 (대한민국 표준시)
console.log(myDate2); // Thu May 18 2017 19:11:16 GMT+0900 (대한민국 표준시)

//new Date(year, month, date, hours, minutes, seconds, ms) -> year, month 외는 생략가능
let myDate3 = new Date(2017, 4); // month는 0부터 시작함

console.log(myDate3); // Mon May 01 2017 00:00:00 GMT+0900 (대한민국 표준시)

• 객체에서 필요한 값만 따로 가져오기 (메소드 이용)
  getTime method: date 객체의 기준 날짜인 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초가 지났는지 알 수 있음
  이 정수 값을 타임스탬프(time stamp)라고 부름
  예를 들어 지금으로부터 시간이 얼마나 흘렀는지 알 수 있음

//Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);
let today = new Date();

let timeDiff = myDate.getTime() - today.getTime();

console.log(timeDiff + '밀리초');
console.log(timeDiff + '초');
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 / 60 + '시간');

• month는 0부터 시작함
• date는 일자, day는 요일을 뜻함(일요일을 시작으로 0 ~ 6)

• set으로 시작하는 다양한 메소드를 활용하면, 생성된 Date객체의 정보를 수정할 수도 있음
• 간단하게 시간정보를 표현하고 싶으면 toLocaleDateString, toLocaleTimeString, toLocaleString을 이용하면 됨
• Date 객체엔 자동으로 날짜를 수정해주는 유용한 기능이 있음 따라서 범위를 벗어나는 값을 설정하려고 하면 자동으로 날짜를 수정해줌
• Date.now() 메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환함