DEV Community

loading...
Cover image for (Javascript) My learning journey: Numbers, Dates and Timer

(Javascript) My learning journey: Numbers, Dates and Timer

ericchapman profile image Eric Chapman ・3 min read

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.

Numbers

In Javascript numbers are always represented as decimal

console.log(20 === 20.0) // true
Enter fullscreen mode Exit fullscreen mode

In Javascript numbers are represent internally by binary base

console.log(0.1 + 0.2 === 0.3) // false because of binary rounding
Enter fullscreen mode Exit fullscreen mode

Numbers methods

// convert string to number
console.log(Number('20')) // 20
// or
console.log(+'20') // 20

// parsing (extracting) number from string
console.log(Number.parseInt('100px') // 100
console.log(Number.parseFloat('100.5 pixel') // 100.5

// Check if is number
console.log(Number.isFinite(20)) // true
console.log(Number.isFinite('20')) // false
console.log(Number.isFinite('Test 20')) // false
Enter fullscreen mode Exit fullscreen mode

Math

// Max
console.log(Math.max(5, 10, 25, 7, 2) // 25
console.log(Math.max(5, 10, '25', 7, 2) // 25

// Random between 0 and 1
console.log(Math.random()) // 0.92

// Rounding integer
console.log(Math.trunc(20.5)) // 20

// Round
console.log(Math.round(20.5)) // 21

// Ceil
console.log(Math.ceil(20.2)) // 21

// Floor
console.log(Math.floor(20.5)) // 20

// Round decimal (string decimal)
console.log((20.5).toFixed(2)) // '21.50'
console.log(+(20.5).toFixed(2)) // 21.50

Enter fullscreen mode Exit fullscreen mode

Remainder operator

console.log(10 % 2) // 0
console.log(5 % 2) // 1

// Check if number is even
console.log(6 % 2 === 0) // true
console.log(5 % 2 === 0) // false

// Check if number is odd
console.log(6 % 2 !== 0) // false
console.log(5 % 2 !== 0) // true
Enter fullscreen mode Exit fullscreen mode

Date and Time

// Create a date
const now = new Date()
const myDate = new Date('Aug 02 1999')
const myLongDate = new Date('January 1, 2021')
// Month is zero base (0 = January, 1 = February, ...)
const dateTime = new Date(2021, 02, 28, 22, 17, 30)
console.log(now) // Wed Mar 03 2021 12:47:59 GMT-0500
console.log(myDate) // Mon Aug 02 1999 00:00:00 GMT-0400
console.log(myLongDate) // Fri Jan 01 2021 00:00:00 GMT-0500
console.log(dateTime) // Sun Mar 28 2021 22:17:30 GMT-0400

Enter fullscreen mode Exit fullscreen mode

Date methods

const firstDate = new Date('January 1, 2021')
console.log(firstDate.getFullYear()) // 2021
console.log(firstDate.getMonth()) // 1
console.log(firstDate.getDate()) // 5 (zero base)
console.log(firstDate.getDay()) // 1
console.log(firstDate.getHours())
console.log(firstDate.getMinutes())
console.log(firstDate.getSeconds())

// Set
firstDate.setFullYear = 2021

// Current timestamps
console.log(Date.now())

Enter fullscreen mode Exit fullscreen mode

Date internationalisation

const firstDate = new Date('January 1, 2021')
console.log(new Intl.DateTimeFormat('en-US').format(firstDate)) // 1/1/2021
console.log(new Intl.DateTimeFormat('fr-CA').format(firstDate)) // 2021-01-01
Enter fullscreen mode Exit fullscreen mode

Format date options

const options = {
    hour: 'numeric',
    minute: 'numeric',
    day: 'numeric',
    month: 'long',
    year: 'numeric',
    weekday: 'short',
  }
  const firstDate = new Date('January 1, 2021')
  console.log(new Intl.DateTimeFormat('en-US', options).format(firstDate)) // Fri, January 1, 2021, 12:00 AM
Enter fullscreen mode Exit fullscreen mode

Get local from navigator

console.log(navigator.language) // en-US
Enter fullscreen mode Exit fullscreen mode

Numbers internationalisation

console.log(new Intl.NumberFormat('en-US').format(9999.95)) // 9,999.95
console.log(new Intl.NumberFormat('fr-CA').format(9999.95)) // 9 999,95

const options = {
    style: 'currency',
    currency: 'USD' // CAD for Canadian
}
console.log(new Intl.NumberFormat('en-US', options).format(9999.95)) // $9,999.95
Enter fullscreen mode Exit fullscreen mode

Timer

// Wait 5 seconds
setTimeout(() => console.log('5 sec wait'), 5000)
console.log('Waiting...')

// pass parameters to setTimeout
setTimeout((message) => console.log(`${message}`), 5000, 'Wait is over')

// Clear Timer
const timer1 = setTimeout((message) => console.log(`${message}`), 5000, 'Wait is over')
const condition = true
if (condition) clearTimeout(timer1)

// Set Interval
setInterval(() => console.log('Execute every 3 sec'), 3000)
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide