TIL 6월 16일 - Object methods, Map object, Date object, String.prototype.padStart()

Object methods

Object.keys()

• Example

let obj = {a: 'hi', b:'hello', c:2};

console.log(Object.keys(obj));
// Array ['a', 'b', 'c'];

Object.entries()

• Example

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

• 위는 간단한 사용예시이고, 순서에 관한 내용은 정확히 모르겠다. 반드시 링크를 참조하자.
• 링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Object.fromEntries()

• Example

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

• arr 자리에는 iterable(Array or Map 등)이 들어올 수 있다고 한다. Map object는 무엇인지 알아볼만 할 것 같다.
• 역시 링크를 참조하자
• 링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Object.is()

Object.is(value1, value2)

• javascript의 기본 comparison operators인 '==' 와 '===' 와는 다르게 작동하는 비교 수단이다.

• '==='과 거의 같으나, 아래의 경우가 다르다.

Object.is(0, -0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true

• 6월 25일 추가 : ECMAScript의 SameValueZero와 같은 룰이다. (링크 : https://tc39.es/ecma262/#sec-samevaluezero)

Map object

• Object와 거의 흡사하게 key, value pairs를 가지는 data collection type 중 하나이다. Object와 비교하며 알아보는 것이 개념을 정확히 알기에 더 좋아보인다.
• 차이점
  • Object의 key는 string이나 Symbol만 올 수 있는데 비해, Map은 function, object를 포함해 어떤 primitive value도 올 수 있다. (javascript의 기본으로는 NaN !== NaN이나, Map의 key일때는 같다고 취급한다고 한다.)
  • Map의 key, value pair는 순서를 유지한다. Object는 그렇지 않다.
  • Map은 iterable하다. 따라서 Map의 instance인 map이 있다고 했을 때, map.forEach(...) 등이 가능하다.
• Map이 나을 때
  • 새로운 pair(key, value)를 추가하고 지우는 등의 작업이 많을 때, Map의 성능이 훨씬 좋다고 한다.
  • 많은 데이터를 저장할 때 Map object가 좀 더 퍼포먼스가 좋다고 한다.
  • key로 string이나 symbol만 오는 것을 알 때는 Object가 좋다고 한다.
  • Map은 purely hash라고 한다. (무슨 의미인지 정확히는 모르겠다.)
• Object가 나을 때
  • 간단한 데이터일 때는 Object가 좋다고 한다.
  • Object는 JSON 이용이 편하다.
    등등이 있으므로 링크를 참조하자.
• 참고 링크
  • https://medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Date object

• 정의

Date 객체는 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초(천분의 1초(millisecond, ms)))을 위한 메소드를 제공하는 빌트인 객체이면서 생성자 함수이다.

Date 생성자 함수로 생성한 Date 객체는 내부적으로 숫자값을 갖는다. 이 값은 1970년 1월 1일 00:00(UTC)을 기점으로 현재 시간까지의 밀리초를 나타낸다.

UTC(협정 세계시: Coordinated Universal Time)는 GMT(그리니치 평균시: Greenwich Mean Time)로 불리기도 하는데 UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용된다. 기술적인 표기에서는 UTC가 사용된다.

KST(Korea Standard Time)는 UTC/GMT에 9시간을 더한 시간이다. 즉, KST는 UTC/GMT보다 9시간이 빠르다. 예를 들어, UTC 00:00 AM은 KST 09:00 AM이다.

현재의 날짜와 시간은 자바스크립트 코드가 동작한 시스템의 시계에 의해 결정된다. 시스템 시계의 설정(timezone, 시간)에 따라 서로 다른 값을 가질 수 있다.

• Format example

let dd = new Date();

let Y = dd.getUTCFullYear(); // or dd.getFullYear();
let M = String(dd.getUTCMonth()+1).padStart(2, '0');
let D = dd.getUTCDate();
let h = dd.getUTCHours();
let m = dd.getUTCMinutes();
let s = dd.getUTCSeconds();
let ms = dd.getUTCMilliseconds();

let format = [Y, M, D].join('-') + 'T' + [h, m, s].join(':') + '.' + `${ms}` + 'Z';
// 결과값 '2019-06-16T16:41:48.5Z'

• 출처 : https://poiemaweb.com/js-date

String.prototype.padStart()

• Date를 string으로 원하는 형식으로 포맷하는 등의 작업을 할 때, 자릿수를 맞춰주면서 + 빈 자릿수를 무엇으로 메꿔줄지 정하는 Method이다.

• Example

const str1 = '5';

console.log(str1.padStart(2, '0'));
// expected output: "05"

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// expected output: "************5581"

• 출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

의문점, 더 공부해볼 것

• Map Object (MDN, Map vs Object)
• 그렇다면 Map object의 key로 null 등도 올 수 있는 건가?