Getter and Setter functions are collectively known as accessor functions. In my previous two articles, I talked about how I created mix because I wanted to use Getter and Setter functions.
But why do we even use Getters and Setters in the first place?
I have two reasons.
I created a library to merge objects last week. It’s called mix. mix lets you perform a deep merge between two objects.
The difference between mix and other deep merging libraries is: mix lets you copy accessors while others don’t.
You can find out more about mix in last week’s article.
I thought it’ll be fun to share the process (and pains) while building the library. So here it is.
Object.assign is the standard way to copy properties from one object to another. It is often used for copying properties that are one-layer deep. (One-layer deep means there are no nested objects).
It can be used to extend settings from a default object. Here’s an example:
const one = { one: 'one' }
const two = { two: 'two' }
const merged = Object.assign({}, one, two)
console.log(merged) // { one: ‘one’, two: ‘two’ }
Unfortunately, Object.assign doesn’t copy accessors. (Accessor is a term for Getter and Setter functions). Object.assign reads the value of a Getter function and copies that value instead.
let count = 0
const one = {}
const two = {
get count () { return count },
set count (value) { count = value }
}
const three = Object.assign({}, one, two)
console.log(‘two:’, two)
console.log(‘three:’, three)
Try logging two and three in a Node environment. Accessors will be logged clearly. You’ll immediately see that three.count is NOT an accessor.
I often find myself needing to calculate the horizontal center and vertical center of an element.
One example is a popover.
To position the popover perfectly, I need to know the horizontal and vertical centers of the button that triggers the popover. Here’s one example of a calculation I had to make.
For the longest time, I thought that “Polymorphing” was about converting something into sheep (thanks to Warcraft). The sheep image stuck with me and made it hard to understand exactly what Polymorphism is.
Today I want to explore what Polymorphism actually is. (Fun fact: Most articles about Polymorphism in JavaScript covers less than 1/3 of what it actually is).
When this is used in an arrow function, this will be the this value in the surrounding lexical scope.
Arrow functions change MANY things, so there are two best practices you need to know.
How do you get a translateX, translateY or translateZ value in JavaScript?
Turns out, you need to read transform matrices. But it can be quite easy.
There are many flavours to arrays in JavaScript. The possible methods you to create or change arrays are: unshift, shift, push, pop, splice, concat, slice, destructuring, rest operators, and spread operators.
There are also looping methods like for, forEach, map, filter, reduce, find, findIndex.
17 different flavours! 😱.
I want to document how I choose the array methods I use. This should help you understand how to pick methods.
I was able to create an Eleventy + Snowpack + Sass + PostCSS setup that works pretty well. I want to share this setup with you in this article.
I was tinkering around with Dynamic Imports this week when I saw Snowpack in the JavaScript Weekly newsletter. It caught my eye and I gave it a whirl.
I managed to get a decent Eleventy + Snowpack + Sass setup in a couple of hours. I’ll share this setup next week. But first, I want to share some things I noticed about Snowpack.