자바스크립트 Numbers, Dates, Intl, Timers

keepitupcoding

Numbers

Parsing

console.log(23 === 23.0); // true

// base 10 - 0 to 9, 1/10 = 0.1, 2/10= 3.3333333
// binary base 2 - 0 1
console.log(0.1 + 0.2); // 0.30000000000000004 - fraction because of binary base
console.log(0.1 + 0.2 === 0.3); // false

console.log(Number(23)); // 23
console.log(+'23'); // 23(Number-type coercion)

// Parsing - global function
console.log(Number.parseInt('30px', 10)); // 30, 두번째 인자로 10을 넣을 경우 binary base로 파싱
console.log(Number.parseInt('e23', 10)); // NaN

console.log(Number.parseInt('2.5rem')); // 2
console.log(Number.parseFloat('   2.5rem')); // 2.5
  • parseInt, parseFloat으로 int, float을 파싱할 수 있다.

Checking

// is Not A Number
console.log(Number.isNaN(20)); // false
console.log(Number.isNaN('20')); // false
console.log(Number.isNaN(+'20X')); // true
console.log(Number.isNaN(23 / 0)); // Infinity: false

// is Finite - best way to check value is number
console.log(Number.isFinite(20)); // true
console.log(Number.isFinite('20')); // false
console.log(Number.isFinite(+'20X')); // false
console.log(Number.isFinite(23 / 0)); // Infinity: false

console.log(Number.isInteger(23)); // true
console.log(Number.isInteger(23.0)); // true
console.log(Number.isInteger(23 / 0)); // false
  • 데이터가 숫자 타입인지 확인하는 가장 적절한 함수는 isFinite이다.

Math, Rounding

Math

// 제곱근
console.log(Math.sqrt(25)); // 5
console.log(25 ** (1 / 2)); // 5
console.log(8 ** (1 / 3)); // 5

// max, min - type coercion
console.log(Math.max(5, 18, 23)); // 23
console.log(Math.min('5', 18, '23')); // 5

// PI
console.log(Math.PI * Number.parseFloat('10px') ** 2);

// random
console.log(Math.trunc(Math.random() * 6) + 1);
const randomInt = (min, max) => Math.trunc(Math.random() * (max - min) + 1) + min;
// 0...1 -> 0...(max-min) -> min...(max-min+min)
console.log(randomInt(10, 20));

Rounding

// Rounding integers - type coercion
console.log(Math.trunc(23.3)); // 23
console.log(Math.trunc(23.9)); // 23

// 반올림
console.log(Math.round(23.3)); // 23
console.log(Math.round(23.9)); // 24

// 올림
console.log(Math.ceil(23.9)); // 24
console.log(Math.ceil(23.3)); // 24

// 내림
console.log(Math.floor(23.9)); // 23
console.log(Math.floor(23.3)); // 23

// negative에서 내림으로 사용하려면 floor를 사용해야 함
console.log(Math.trunc(-23.3)); // -23
console.log(Math.floor(-23.3)); // -24

// Rounding decimals
console.log((2.7).toFixed(0)); // 3 - string
console.log((2.7).toFixed(3)); // 2.700 - string
console.log((2.234).toFixed(1)); // 2.2 - string
console.log(+(2.234).toFixed(1)); // 2.2 - number

Remainder 연산자(나머지 연산자 %)

console.log(5 % 2); // 1
console.log(8 % 2); // 0

const isEven = n => n % 2 === 0;
console.log(isEven(3));
  • 나머지 연산자는 홀수, 짝수를 확인 할 때 유용하다.

Numeric Seperators

const diameter = 287_560_000_000;
console.log(diameter); // 287560000000

const priceCents = 345_99;
console.log(priceCents); // 34599

const transferFee1 = 15_00;
const transferFee2 = 1_500;

console.log(transferFee1); // 1500
console.log(transferFee2); // 1500

const PI = 3.14_15;
console.log(PI)

console.log(Number('233_333')); // NaN
console.log(parseInt('233_333')); // 233
  • 큰 수를 읽기 편하도록 _ 를 숫자 사이에 추가하여 seperator로 사용할 수 있다.
  • _가 들어 있더라도 정상적인 숫자로 읽는다.
  • 단 문자열 안에 넣는 것은 parseInt 함수를 제외하고는 작동하지 않으므로 주의해야 한다.

BigInt

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991

// BigInt
console.log(488883483124184812848124821842141324821482184812841n);
console.log(BigInt(48248241));

console.log(10000n + 10000n);

const num = 122;
const huge = 201241352316513513515134134n;
// console.log(huge * num); // not allowed

console.log(20n > 15); // true
console.log(20n === 20); // false
console.log(20n == '20'); // true

// console.log(hute + ' is REALLY big'); // not allowed

// BigInt divisions
console.log(10n / 3n); // 3n: closest BigInt
  • 이전에는 53비트 크기의 숫자(2**53-1)만 지원했으나 이제는 BigInt로 더 큰 숫자를 사용할 수 있게 되었다.
    • Number.MAX_SAFE_INTEGER

Date

Create

const now = new Date();
console.log(now); // Thu Mar 07 2024 16:34:40 GMT+0900 

// auto parsing
console.log(new Date('Thu Mar 07 2024 16:34:06'));
console.log(new Date('December 24, 2015'));
console.log(new Date(account1.movementsDates[0])); // Tue Nov 19 2019 06:31:17 GMT+0900
console.log(new Date(2037, 10, 19, 15, 23, 5)); // Thu "Nov" 19 2037 15:23:05 GMT+0900
console.log(new Date(2037, 10, 31)); // Tue "Dec" 01 2037 00:00:00 GMT+0900

// unix timestamp to date
console.log(new Date(0)); // Unix Time: Thu Jan 01 1970 09:00:00 GMT+0900
console.log(new Date(3 * 24 * 60 * 60 * 1000)); // Sun Jan 04 1970 09:00:00 GMT+0900
  • 월이 제로 베이스로 동작하므로 10으로 설정하면 November가 되는 것을 알아두자.
  • 10, 31 같이 없는 날로 설정해도 자동으로 다음날(Dec, 1)로 변환해준다.

Parsing methods

// useful methods
const future = new Date(2037, 10, 19, 15, 23);
console.log(future);
console.log(future.getFullYear()); // 2037
console.log(future.getMonth()); // 10
console.log(future.getDate()); // 19
console.log(future.getDay()); // 4 (thursday)
console.log(future.getHours());
console.log(future.getMinutes());
console.log(future.getSeconds());
console.log(future.toISOString()); // 2037-11-19T06:23:00.000Z
console.log(future.getTime()); // unix timestamp

future.setFullYear(2040);
console.log(future); // Mon Nov 19 2040 15:23:00 GMT+0900

Operations

const future = new Date(2037, 10, 19, 15, 23);
console.log(Number(future));
console.log(+future);

const calcDaysPassed = (date1, date2) => (date2 - date1)

const days1 = calcDaysPassed(new Date(2037, 3, 14), new Date(2037, 3, 24))
console.log(days1); // 864000000 (milliseconds 단위)

const calcDaysPassed2 = (date1, date2) => Math.abs(date2 - date1) / (1000 * 60 * 60 * 24)
const days2 = calcDaysPassed2(new Date(2037, 3, 14), new Date(2037, 3, 24))
console.log(days2) // 10
  • 날짜를 숫자로 변경할 경우 자동으로 timestamp로 변환해주므로 편리하게 연산 할 수 있다.

Intl

Internationalizing Dates

const now = new Date();
console.log(new Intl.DateTimeFormat('en-US').format(now)); // 3/7/2024
console.log(new Intl.DateTimeFormat('en-UK').format(now)); // 07/03/2024
console.log(new Intl.DateTimeFormat('ko-KR').format(now)); // 2024. 3. 7.

const options = {
  hour: 'numeric',
  minute: 'numeric',
  day: 'numeric',
  month: 'long',
  year: 'numeric',
  weekday: 'long',
}
console.log(new Intl.DateTimeFormat('en-US', options).format(now)); // Thursday, March 7, 2024 at 5:23 PM

const locale = navigator.language;
console.log(locale); // ko-KR
console.log(new Intl.DateTimeFormat(locale, options).format(now)); // 2024년 3월 7일 목요일 오후 5:25
  • Intl은 날짜와 시간 데이터를 쉽게 국제화해주는 API다.
  • Language Code로 포매터 기준을 선택하므로 참고

Internationalizing Numbers

const num = 3884241.23;
console.log(new Intl.NumberFormat('en-US').format(num)); // 3,884,241.23

const optionsNumbers = {
  style: 'unit', // percent, currency
  unit: 'mile-per-hour',
}

console.log(new Intl.NumberFormat('en-US', optionsNumbers).format(num)); // 3,884,241.23 mph
console.log(new Intl.NumberFormat('de-DE', optionsNumbers).format(num)); // 3.884.241,23 mi/h
  • Intl을 통해서 숫자를 출력하는 포맷도 쉽게 변환할 수 있다.
  • 옵션 객체를 인자로 넣어 다양한 단위를 같이 출력할 수 있다.

Timers

setTimeout / setInterval

setTimeout(() => console.log('Here is your pizza 🍕'), 3000);
console.log('Waiting...')

// with arguments
setTimeout((ing1, ing2) => console.log(`Here is your pizza 🍕 with ${ing1}, ${ing2}`), 3000, 'olives', 'spinach');

// clear timeout function
const ingredients = ['olives', 'spinach']
const pizzaTimer = setTimeout((ing1, ing2) => console.log(`Here is your pizza 🍕 with ${ing1}, ${ing2}`), 3000, ...ingredients);
if (ingredients.includes('spinach')) clearTimeout(pizzaTimer)
  • setTimeout 함수의 인자로 시간이 지난 뒤 실행할 콜백 함수와, 시간을(milliseconds 단위) 넣어준다.
  • 타임아웃 함수는 비동기로 동작하기 때문에 첫번째 라인이 실행될 때부터 백그라운드에서 시간을 재기 시작하고 그 다음 라인의 코드가 바로 실행된다.
setInterval(function () {
  const now = new Date();
  console.log(now);
}, 1000);
  • 특정 시간마다 반복적으로 특정 코드를 실행하고 싶으면 setInterval 함수를 사용한다.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *