Many Useful Javascript Tricks

Copying Arrays and Objects

const myArray = [1, 2, 3, 4]
// This line doesn't duplicate the array but creates another variable referring to the same array
const myArray2 = myArray
const myArray = [1, 2, 3, 4]
// This creates an actual copy of the array
const myArray2 = [...myArray]
const myObject = { name: "Alex Merced" }
// This creates an actual copy
const myObject2 = { ...myObject }

Destructuring

const myArray = [1, 2, 3, 4, 5]
const One = myArray[0]
const Two = myArray[1]
const mySelf = {
name: "Alex Merced",
age: 35,
}
const name = mySelf.name
const age = mySelf.age
const myArray = [1, 2, 3, 4, 5]
const [One, Two, Three, Four, Five] = myArray
const mySelf = {
name: "Alex Merced",
age: 35,
}
const { name, age } = mySelf

Using the Rest Operator

const myArray = [1,2,3,4,5]
const [One, Two, ...theRest] = myArray
console.log(One, Two, theRest)const mySelf = {
name: "Alex Merced",
age: 35
email: "Alex@AlexMerced.dev"
}
const {name, ...theRest2} = mySelf
console.log(name, theRest2)

Skipping Array Values

const myArray = [1, 2, 3, 4, 5]
const [One, , ...theRest] = myArray
console.log(One, Two, theRest)

Default Values

const myArray = [1, 2, 3, 4, 5]
// Six has a default value
const [One, Two, Three, Four, Five, Six = 6] = myArray
const mySelf = {
name: "Alex Merced",
age: 35,
}
// email has a default value
const { name, age, email = "alex@alexmerced.dev" } = mySelf

Renaming Properties

const mySelf = {
name: "Alex Merced",
age: 35,
}
// We rename the name and age fields
const { name: alex_name, age: alex_age } = mySelf

Destructuring Functions Arguments

const add = ({ first, second }) => {
return first + second
}
//result would be 11
console.log(add({ first: 5, second: 6 }))

Removing Duplicates from an Array

const arrayWithDupes = [
1,
2,
2,
2,
2,
3,
3,
3,
3,
4,
4,
4,
4,
4,
4,
5,
5,
5,
5,
5,
]
const withoutDupes = [...new Set(arrayWithDupes)]
console.log(withoutDupes)

Optional Chaining

const mySelf = {
name: "Alex Merced",
age: 35,
}
// will just log undefined instead of throwing an error
console.log(mySelf?.friends?.bob)

Nullish Coalescence

const num = 0// Will Assign 5
const oldWay = num || 5
// Will Assign 0
const newWay = num ?? 5

Mixins for OOP Composition

class Wizard {
constructor(name) {
this.name = name
}
}
// Adds fire abilities to class
const FireAbilities = base => {
return class extends base {
fire() {
console.log("Fire Powers")
}
}
}
//Adds fire abilities to class
const WaterAbilities = base => {
return class extends base {
water() {
console.log("Water Powers")
}
}
}
const FireWaterWizard = FireAbilities(WaterAbilities(Wizard))
const Merlin = new FireWaterWizard("Merlin")
console.log(Merlin)
Merlin.fire()
Merlin.water()

Closures

// Creates a variable that can only be changed by the returned functions
const createEnclosedVariable = initial => {
let theValue = initial
const get = () => theValue const set = newVal => (theValue = newVal) return [get, set]
}
// Create a variable using this functionconst [get, set] = createEnclosedVariable(1)console.log(get())
set(2)
console.log(get())
set(3)
console.log(get())

Combining Objects and Arrays

const one = [1, 2, 3, 4]
const two = [5, 6, 7, 8]
const mixed = [...one, ...two]
console.log(mixed)
const name = { name: "Alex Merced" }
const age = { age: 35 }
const Alex = { ...name, ...age }
console.log(Alex)

Removing Properties from an Object

const Alex = {
name: "Alex Merced",
age: 35,
email: "cheese@alexmerced.com",
}
//we remove the wrong email like so
const { email, ...fixedAlex } = Alex
console.log(Alex)

Coloring Your Console.log

Browser Based Console.logs

console.log("%c Hello", "color: blue")
module.exports = {
Reset: "\x1b[0m",
Bright: "\x1b[1m",
Dim: "\x1b[2m",
Underscore: "\x1b[4m",
Blink: "\x1b[5m",
Reverse: "\x1b[7m",
Hidden: "\x1b[8m",
FgBlack: "\x1b[30m",
FgRed: "\x1b[31m",
FgGreen: "\x1b[32m",
FgYellow: "\x1b[33m",
FgBlue: "\x1b[34m",
FgMagenta: "\x1b[35m",
FgCyan: "\x1b[36m",
FgWhite: "\x1b[37m",
BgBlack: "\x1b[40m",
BgRed: "\x1b[41m",
BgGreen: "\x1b[42m",
BgYellow: "\x1b[43m",
BgBlue: "\x1b[44m",
BgMagenta: "\x1b[45m",
BgCyan: "\x1b[46m",
BgWhite: "\x1b[47m",
}
const colors = require("./color.js")console.log(colors.FgYellow + "Hello")

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store