Many Useful Javascript Tricks

Copying Arrays and Objects

One thing that you always have to be careful in programming is that collections (Arrays, Objects, Maps, Sets, etc.) aren’t primitive values so variables that hold them don’t hold the data but a reference to where the data is located in memory. This creates a syntactical annoyance.

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

If you wanted to assign array elements and object properties to separate variables it can be quite tedious.

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

What if you want a remainder to be added to a separate object or array, the rest operator has got your back.

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

If you want to skip particular array values, that’s an option too.

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

Default Values

You can set default values in case an element or property doesn’t exist.

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

To avoid variable name collisions, you can rename properties you destructure from objects.

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

You can use destructuring when defining your function parameters.

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

Removing Duplicates from an Array

Using the Set Object removing duplicate primitives from an array is pretty easy.

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

When accessing object properties we can make the old torture of the “cannot access property of undefined” error go away by using nullish chaining, which checks if the property exists before drilling to the next level.

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

Nullish Coalescence

While you can use || to set default values, things like 0 and “” will trigger the default value. The Nullish Coalescence operator will allow you to set a default value only if the underlying value is undefined or null.

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

Mixins for OOP Composition

One way to achieve Object composition is by using functions that return a class with the additional methods and properties you may need. Check out the following example. Using this approach you can this of your classes in terms of features and assemble them like a build-a-bear doll.

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

A function can take advantage of its local scope and return functions that have access to it. This is fundamental to how React Hooks work, check out this example.

// 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

Using the spread operator we can mash together arrays and objects with ease.

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

Using the spread operator and destructuring we can remove items from an object with ease.

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

Use %c to specify that you want to apply css to string.

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