Date 객체와 JSON

345·2023년 5월 8일
JavaScript

모던 JavaScript

목록 보기
14/23

🔔 Date 객체와 날짜 표현

자바스크립트 내장 객체 Date 사용하면 다음과 같은 활동이 가능합니다.

  • 현재 날짜, 시간 받아오기
  • 특정 코드 수행에 걸리는 시간 측정하기
  • 시간 비교하기

Date 객체 생성

new Date 를 호출하여 Date 객체를 생성할 수 있습니다.
생성자에 들어가는 매개변수를 달리하여 목적에 맞는 결과를 얻습니다.

  1. new Date()
    아무런 인수 없이 호출하면 현재 날짜와 시간 정보가 저장된 Date 객체를 반환합니다.
let now = new Date();
alert( now ); // Mon May 08 2023 15:07:31 GMT+0900 (한국 표준시)
  1. new Date(milliseconds)
    UTC 기준(UTC+0) 1970년 1월 1일 0시 0분 0초에서 milliseconds 밀리초(1/1000 초) 후의 시점이 저장된 Date 객체를 반환합니다.
// 1970년 1월 1일 0시 0분 0초(UTC+0)를 나타내는 객체
let Jan01_1970 = new Date(0);
alert( Jan01_1970 );
  1. new Date(datestring)
    문자열을 인수로 주면 Date.parse 를 통해 날짜로 변환하여 넘겨줍니다. datestring 에 해당하는 날짜, 시간 정보를 가지는 Date 객체를 반환합니다.
let date = new Date("2017-01-26");
alert(date);

let now = new Date("2023/05/08");
// 시간 지정이 없으면 GMT 자정이라고 가정
  1. new Date(year, month, date, hours, minutes, seconds, ms)
    주어진 인수를 조합하여 날짜, 시간 정보에 반영한 Date 객체를 반환합니다.
new Date(2011, 0, 1, 0, 0, 0, 0); // 2011년 1월 1일, 00시 00분 00초
new Date(2011, 0, 1); // hours를 비롯한 인수는 기본값이 0이므로 위와 동일

날짜 구성요소 얻기

Date 객체의 메서드를 사용하여 년도, 월, 일, 시간 등의 값을 얻을 수 있습니다.

  • getFullYear(): 연도(네 자릿수) 반환
  • getMonth(): 월 반환(0부터 시작, 11까지)
  • getDate(): 일 반환
  • getHours(), getMinutes(), getSeconds(), getMilliseconds(): 시, 분, 초, 밀리초 반환
  • getTime(): 객체의 일시와 1970년 1월 1일 00시 00분 00 초 사이의 간격(밀리초 단위) 반환
  • Date.now(): 새로운 객체를 생성하지 않고 현재 시간 얻기

✅ 시간 측정, 비교하기

Date 객체끼리 연산이 가능합니다.

const christmas = new Date("2023/12/25");
const now = Date.now(); // 현재 시간 Date 객체

// 지금으로부터 크리스마스까지 시간 간격을 밀리초로 반환
alert(christmas - now);

위처럼 Date 객체로 연산하면 각 객체의 타임스탬프(date.getTime()) 를 구하고, 밀리초 단위의 간격 차를 반환합니다.

  • getTime() 이용하기
const christmas = new Date("2023/12/25");
const now = Date.now(); // 현재 시간 Date 객체

// 지금으로부터 크리스마스까지 시간 간격을 밀리초로 반환
alert(christmas.getTime() - now.getTime());

날짜를 밀리초 단위로 얻기 위해 getTime() 메서드를 사용하면 더 빠른 연산이 가능합니다. 단순히 마이너스 연산자만 사용했을 경우 객체를 숫자형으로 변환하는 과정이 필요하기 때문입니다.


문자열과 Date 객체

Date 객체를 문자열과 함께 다루는 방법을 알아봅시다.

Date.parse

Date.parse(str) 메서드를 이용하여 문자열에서 날짜를 읽어옵니다.
문자열의 형식은 다음과 같아야 합니다.

  • YYYY-MM-DDTHH:mm:ss.sssZ
    • 날짜(연-월-일)
    • T: 구분 기호
    • 시:분:초:밀리초
    • Z: 옵션

Date.parse(str) 를 호출하면 해당 날짜의 타임스탬프를 얻을 수 있고, 이 타임스탬프를 new Date() 생성자 인수로 넘기면 새로운 Date 객체를 만들 수 있습니다.

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417  (타임스탬프)

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

alert(date);

Date 포맷팅

그냥 Date 객체를 출력하면 Fri Jan 27 2012 05:51:50 GMT+0900 (한국 표준시) 이와 같이 나타납니다.

Date 객체에서 날짜를 포맷팅한 문자열 형태로 얻어봅시다.

// ISO 형식으로 변환한 문자열 반환, 그 문자열을 자르기
const date = new Date().toISOString().slice(0, 10);

alert(date); //'2023-05-08'

다만 ISO 가 UTC 표준시를 사용하기 때문에 한국 표준시와는 9시간 차이가 납니다. 따라서 오프셋을 설정하여 시간 차이를 보정하거나 toLocaleString() 을 사용하는 등 조정이 필요합니다.


🟢 JSON

JSON (JavaScript Object Notation)은 값이나 객체를 나타내주는 범용 포맷입니다.
본래 자바스크립트에서 쓰일 목적이었으나 현재는 데이터 교환 목적으로 사용하여 다양한 언어에서도 다뤄지고 있습니다.

  • 객체, 배열, 원시값(undefined 제외) 등을 JSON 포맷으로 변경하여 사용
    • JSON 에서는 작은 따옴표나 백틱 사용 ❌
    • 문자열이나 객체 프로퍼티 이름은 큰 따옴표로 감쌈
  • 데이터 교환 목적, 언어에 종속 ❌ 인 포맷
    • 자바스크립트 특유의 객체 프로퍼티
      (함수, 심볼형, 값이 undefined 인 것) 는 JSON 으로 인코딩 ❌

다른 언어에서도 사용하는 포맷이니 자바스크립트에만 존재하는 특정한 문법이나 자료형은 JSON 으로 인코딩할 수 없습니다.

JSON 메서드는 다음과 같습니다.

  • JSON.stringify(value[, replacer, space]): 값을 JSON 형식으로 변경
  • JSON.parse(str, [reviver]): JSON 으로 인코딩 된 값을 다시 디코딩

JSON.stringify

JSON.stringify(obj);
// 객체를 JSON 포맷 문자열로 변환하여 반환

인수로 받은 객체를 JSON 형식의 문자열로 바꾸어 반환해줍니다.

단, 변환하려는 객체가 순환 참조 상태에 있는 경우 JSON 으로 바꿀 수 없습니다. 이 때 replacer 를 사용합니다.

replacer

replacer 는 JSON 으로 인코딩할 프로퍼티가 담긴 배열, 또는 매핑 함수 function(key, value) 입니다.

  • 배열로 프로퍼티 지정
JSON.stringify(student, ["name", "age"]);
// student 객체에서 name, age 프로퍼티만 JSON 으로 인코딩

변환을 원하는 프로퍼티 이름만을 배열 형식으로 넘겨주면 됩니다.


  • 매핑 함수로 프로퍼티 지정

배열 지정 방식은 변환을 원하는 프로퍼티가 많을 때 번거롭습니다.
따라서 매핑 함수를 넘겨주기도 합니다.

매핑 함수는 프로퍼티 (키, 값) 쌍 전체를 대상으로 호출되며, 반환값이 해당 프로퍼티 값을 대신하여 사용됩니다.

JSON 은 undefined 값을 지원하지 않으므로, JSON 으로 인코딩되길 원하지 않는 프로퍼티의 경우 undefined 를 반환하도록 하여 배제합니다.

JSON.stringify(student, function replacer(key, value) {
  // 프로퍼티의 키 값이 name 일 경우, undefined 를 반환하여 JSON 으로 인코딩하지 않게 함
  
  // 프로퍼티 키 값이 name 이 아닌 경우, 본래의 value 를 반환하도록 함
  return (key == 'name') ? undefined : value;
})

toJSON

객체에 toJSON 이라는 메서드를 구현하면 JSON.stringify 를 적용했을 때 자동으로 toJSON 을 호출해줍니다.

let room = {
  number: 23,
  toJSON() {
    return this.number;
  }
};

alert( JSON.stringify(room) ); // 23

JSON.parse

JSON.parse 를 사용하면 JSON 형식으로 작성된 문자열을 분석하여
자바스크립트 값이나 객체를 결과로 반환합니다. 

JSON.parse(str, [reviver]);
// JSON 형식의 문자열 str 을 넘기면 디코딩 함
  • new Date() 와 같은 스크립트가 담긴 문자열은 변환할 수 없음
    • 순수 값만 가능
  • 프로퍼티와 값을 큰 따옴표로 감싸야 함

reviver

new Date() 같은 값의 경우 디코딩이 불가능 합니다.
그러나 문자열을 다시 객체로 만들 때 프로퍼티 값으로 문자열이 아닌 new Date() 처럼 값을 주고 싶다면 reviver 을 사용합니다.

reviver 매핑 함수는 (키, 값) 쌍 전체에 대해 호출되며, 값으로 사용할 값을 반환하도록 합니다.

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});
// 프로퍼티 키가 date 인 경우, value 의 시간대에 해당하는 Date 객체가 프로퍼티 값이 되도록 함

alert( meetup.date.getDate() );
profile
345
기록용 블로그 + 오류가 있을 수 있습니다🔥
이전 포스트

구조 분해 할당

다음 포스트

함수: 심화 | 매개변수

0개의 댓글