Many Useful Javascript Tricks

Learn more Javascript with my Javascript Video Playlist => Javascript Playlist

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

The reason this is an issue is cause it means modifying the myArray2 modifies the same array in myArray. This also translates to function arguments, where modifying an array or object passed in as an argument to a JS function modifies the original. The solution is to use the spread operator.

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

To make this easier we can use destructuring syntax.

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

Destructuring has a lot of other cool aspects to it…

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")

Inside of a color.js copy this. You could also just use the chalk npm library.

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",
}

You can use it in other files like this.

const colors = require("./color.js")console.log(colors.FgYellow + "Hello")

--

--

--

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Upgrading a React-Native App running on 0.59.8 to 0.65.2

React Native or Native App Development: Which one to choose for your Business?

Beagle: a new way of doing Server-Driven UI

DIY Connected Espresso Machine: Main Class and Indicators (Part 5)

How to Docker with Node, a guide to Dev Ops in the Cloud.

Useful Tips to Optimize Your React Application

JavaScript basic concepts that you need to know

HackerRank — Time Conversion Solution — Javascript

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
Alex Merced Coder

Alex Merced Coder

Alex Merced is a Developer Advocate for Dremio and host of the Web Dev 101 and Datanation Podcasts.

More from Medium

JAVASCRIPT TERNARY OPERATORS

Tutorial: How JavaScript Works

JavaScript: Some Cool Console Methods in 2022.

JavaScript Basics #8: Drawing on Canvas