Alex MercedLearn 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 function
const [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")
