Skip to content

Instantly share code, notes, and snippets.

@bloodyowl
Last active September 30, 2023 16:49
Show Gist options
  • Star 25 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save bloodyowl/5d8adcf50e890ebafb95 to your computer and use it in GitHub Desktop.
Save bloodyowl/5d8adcf50e890ebafb95 to your computer and use it in GitHub Desktop.
ES6 tl;dr; for beginners
// ES6 tl;dr; for beginners
// 1. variables
// `const` & `let` are scoped at the block level
if(true) {
let foo = "bar"
}
foo // ReferenceError
// `const` prevents reassignation
const foo = "bar"
foo = "baz" // Errors
// 2. functions
// can be that simple
const simpleSquare = (number) => Math.pow(number, 2)
// can be more complex when body is wrapped between curly braces
const square = (number) => {
if(isNaN(number)) {
throw new TypeError()
}
return Math.pow(number, 2)
}
// NOTE: to return an object, you have to wrap it between parentheses,
// otherwise it would think it's the function body:
const getEmptyObject = () => ({})
// fat-arrow functions have no .prototype,
// & their thisValue is the one of the upper-scope
const object = {
// this is a new syntax that replaces `isActiveItem: function isActiveItem(item) {`
isActiveItem(item) {
return item.active
},
getActiveItems() {
return array.filter((item) => {
// `thisValue` the one from the `getActiveItems` body
return this.isActiveItem(item)
})
}
}
// 3. classes
// basically just sugar for prototypal inheritance
class User {
constructor(name) {
this.name = name
} // no commas here
getName() {
return this.name
}
}
let user = new User("foo")
user.getName() // "foo"
// 4. maps & sets
// basically they're like object, but accepting anything as a key
const map = new Map()
map.set(user, "ok")
map.get(user) // "ok"
const set = new Set()
set.add(user)
for(let item of set) {
console.log(item)
}
// logs `user`
set.delete(user)
const weakMap = new WeakMap()
map.set(user, "ok")
map.get(user) // "ok"
user = null
// weakMap doesn't keep `user`
// 5. modules
import Module from "Module" // like `const Module = require("Module")`
export default 1 // like `module.exports = 1`
export function bar() {} // like `exports.foo = function foo(){}`
// 6. destructuring
const options = {
onSuccess: () => {},
onFailure: () => {},
}
const {onSuccess, onFailure} = options
onSuccess // () => {}
// 7. objects enhancements
const enhancedObject = {
onSuccess, // like `onSuccess: onSuccess`,
[1 + 1]: "foo", // like `object[1 + 1] = "foo"`
}
// 8. template strings
const unread = 1
const value = `you have ${ unread } message${ unread !== 1 ? `s` : `` }`
value // you have 1 message
// 9. function arguments
const noop = () => {}
function after(duration = 0) { // default values
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, duration)
})
}
after() // will wait 0ms
after(100) // will wait 100ms
function toArray(...args) {
// rest param, like if you did `const args = Array.prototype.slice.call(arguments, index)`
return args
}
function sum(...args) {
return args.reduce((acc, item) => acc + item, 0)
}
sum(...[1,2,3]) // like `sum.apply(undefined, [1, 2, 3])`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment