Last active
September 30, 2023 16:49
-
-
Save bloodyowl/5d8adcf50e890ebafb95 to your computer and use it in GitHub Desktop.
ES6 tl;dr; for beginners
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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