Skip to content

Instantly share code, notes, and snippets.

View thawkin3's full-sized avatar

Tyler Hawkins thawkin3

154 followers · 0 following
View GitHub Profile
@thawkin3
thawkin3 / es2020.optionalChaining.before.js
Last active April 15, 2020 19:51
Accessing deeply nested object properties without the optional chaining operator
const user = {
firstName: 'John',
lastName: 'Doe',
address: {
street: '123 Anywhere Lane',
city: 'Some Town',
state: 'NY',
zip: 12345,
},
}
@thawkin3
thawkin3 / es2020.optionalChaining.after.js
Last active March 4, 2020 19:43
Accessing deeply nested object properties with the optional chaining operator
const user = {
firstName: 'John',
lastName: 'Doe',
address: {
street: '123 Anywhere Lane',
city: 'Some Town',
state: 'NY',
zip: 12345,
},
}
@thawkin3
thawkin3 / es2020.nullishCoalescing.before.js
Last active April 15, 2020 19:46
Finding values that are not null or undefined without nullish coalescing
const useCoolFeature1 = true
const useCoolFeature2 = false
const useCoolFeature3 = undefined
const useCoolFeature4 = null
const getUserFeaturePreference = (featurePreference) => {
if (featurePreference || featurePreference === false) {
return featurePreference
}
return true
@thawkin3
thawkin3 / es2020.nullishCoalescing.after.js
Last active March 4, 2020 20:40
Finding values that are not null or undefined with nullish coalescing
const useCoolFeature1 = true
const useCoolFeature2 = false
const useCoolFeature3 = undefined
const useCoolFeature4 = null
const getUserFeaturePreference = (featurePreference) => {
return featurePreference ?? true
}
getUserFeaturePreference(useCoolFeature1) // true
@thawkin3
thawkin3 / es2020.bigInt.before.js
Last active March 4, 2020 20:39
Working with large numbers without BigInt
const biggestNumber = Number.MAX_SAFE_INTEGER // 9007199254740991
const incorrectLargerNumber = biggestNumber + 10
// should be: 9007199254741001
// actually stored as: 9007199254741000
@thawkin3
thawkin3 / es2020.bigInt.after.js
Last active March 4, 2020 20:39
Working with large numbers with BigInt
const biggestNumber = BigInt(Number.MAX_SAFE_INTEGER) // 9007199254740991n
const correctLargerNumber = biggestNumber + 10n
// should be: 9007199254741001n
// actually stored as: 9007199254741001n
@thawkin3
thawkin3 / es2020.dynamicImport.after.js
Last active March 4, 2020 23:22
Using a dynamic import to lazy load some JS
const exportPdfButton = document.querySelector('.exportPdfButton')
exportPdfButton.addEventListener('click', () => {
import('./pdf-download.js')
.then(module => {
// call some exported method in the module
module.exportPdf()
})
.catch(err => {
// handle the error if the module fails to load
@thawkin3
thawkin3 / es2020.dynamicImport.before.js
Created March 4, 2020 23:22
Using an import to initially load some JS
import { exportPdf } from './pdf-download.js'
const exportPdfButton = document.querySelector('.exportPdfButton')
exportPdfButton.addEventListener('click', exportPdf)
// this code is short, but the 'pdf-download.js' module is loaded on page load rather than when the button is clicked
@thawkin3
thawkin3 / es2020.globalThis.after.js
Last active April 3, 2020 20:52
Usage of ES2020 feature globalThis
// assuming you're in a browser
window.alert('Hi from the window!')
globalThis.alert('Hi from globalThis, which is also the window!')
@thawkin3
thawkin3 / es2020.promiseAll.js
Last active March 5, 2020 21:22
Example usage of Promise.all()
// promises 1-3 all will be resolved
const promise1 = new Promise((resolve, reject) => setTimeout(() => resolve('promise 1 resolved!'), 100))
const promise2 = new Promise((resolve, reject) => setTimeout(() => resolve('promise 2 resolved!'), 200))
const promise3 = new Promise((resolve, reject) => setTimeout(() => resolve('promise 3 resolved!'), 300))
// promise 4 and 6 will be resolved, but promise 5 will be rejected
const promise4 = new Promise((resolve, reject) => setTimeout(() => resolve('promise 4 resolved!'), 1100))
const promise5 = new Promise((resolve, reject) => setTimeout(() => reject('promise 5 rejected!'), 1200))
const promise6 = new Promise((resolve, reject) => setTimeout(() => resolve('promise 6 resolved!'), 1300))