
An active Player in the game of technology


Brian Baliach

JavaScript, a language of many faces, often presents concepts that are deceptively simple yet profound in their implications. Among these, understanding equality checks and the nuanced landscape of JavaScript types stands paramount. Whether you're just dipping your toes into the vast ocean of JavaScript or you're a seasoned sailor navigating through the stormy quirks of the language, grasping these concepts is crucial. 

This blog post sets out to demystify a concept that's often sidelined but deserves a spotlight: JavaScript's identity and equality checks. Despite their critical importance, details on how these checks align with ECMAScript standards are not thoroughly addressed in either React's documentation or the MDN web docs. The ECMAScript Language Specification doc however, does a great job in explaining these concepts. You can find it [here](https://tc39.es/ecma262/multipage/#sec-intro) and hopefully build the next version of Chrome. 

Starting with foundational principles and progressively delving into complex nuances, we aim to explore this topic thoroughly, concluding with a hands-on example to reinforce your grasp on the subject.

### JavaScript Types: The Foundations
JavaScript, at its core, categorizes values into several types — `boolean`, `undefined`, `null`, `number`, `string`, `object`, and `symbol`. Each type serves a unique purpose:
 

##### Boolean: 
Represents a logical entity, having two values: true or false.
 

##### Undefined: 
Denotes a variable that has been declared but not yet assigned a value.
 

##### Null: 
Represents the intentional absence of any object value. It's often used to indicate that a variable should hold an object but currently does not. 
 

##### Number: 
Holds numeric values. JavaScript uses floating-point arithmetic for its numbers.
 

##### String: 
Represents textual data. It's a sequence of characters. Practically every primitive has string representation of itself;.
 

##### Object: 
Unlike the other types that are primitive, objects are collections of properties.
 

##### Symbol: 
Introduced in ES6, symbols are unique and immutable data types used as identifiers for object properties.
 

##### Hear ye, hear ye!
##### Understanding these types is the foundation upon which we build the concept of equality in JavaScript.
 

### The Enigma of Null and Undefined

Both `null` and `undefined` denote the absence of value in a variable, but they are used in subtly different contexts. `undefined` is the JavaScript engine's way of saying, "This variable not only has no value, but also might not even exist (no name has been reserved in memory for that variable)." In contrast, `null` is a deliberate assignment by the developer, saying, "This variable presently has no value but specifically holds an empty or non-existent object. So `null` is an actual value, like `number` or `string`, the only difference being that the variable has no value by design (a name will be reserved in memory for that variable). "
 

### Equality Checks: "== vs ==="
JavaScript offers two operators for equality checks: `==` (abstract equality) and `===` (strict equality).

- `==` checks for equality after performing any necessary type conversions. It means if the values being compared are of different types, JavaScript will try to convert them to a common type before making the comparison. So `"1" == 1` will return true since the value 1 which is a number (no double quotes), will be converted to the value 1 as a string (with double quotes). 
- `===`, or strict equality, checks for value equality without any type conversion. If the values being compared are of different types, the equality check immediately returns false. So in the previous example `"1" === 1` will return false since `string` and `number` are different types.

Understanding these distinctions is vital as they often lead to unexpected results, especially for beginners.
 

### Identity vs. Equality: The Subtlety
In JavaScript, values can either have identity (complex data types like objects, where the value is a reference to a location in memory) or be without identity (primitive values). PAUSE.

What in Sam's hill does it mean to have a value with or without identity? Well, let's dive into that mystery together.

A value with identity basically means a value that includes an extra property whose value is unique to that specific value. Same way your GitHub username is unique to you, and there can never be a situation where someone else might happen to have another account using your username.

A value without identity is a value doesn't have this extra property that declares its uniqueness.

So to put this into even better context, when you declare a variable whose value is an object the object automatically becomes a value with identity, the unique property being the memory location of the variable:
```javascript
const variable = {name: "I am an object"};
```

When you however declare a variable whose value is a primitive, the value itself is the unique property (instead of the memory location):
```javascript
const variable = 1;
```

When comparing primitive values (`string`, `number`, `boolean`, `undefined`, `null`, `symbol`), JavaScript checks their equality by value (which now in this case, is the value itself). However, when comparing objects, JavaScript checks whether they reference the same location in memory — which now is the property that uniquely identifies the object.

So when checking for equality for objects, comparing two objects with the exact same properties and the exact same values for those properties will still return false since these objects have different locations in memory.

```javascript
const myObjectOne = {name: "I am unique!"};
const myObjectTwo = {name: "I am unique!"}
console.log(myObjectOne === myObjectTwo); // returns 'false' since each variable has it's own memory location.
console.log("-----------Boundary----------");

const myObjectOneAgain = {name: "I am unique!"};
const myObjectTwoAgain = myObjectOneAgain;
console.log(myObjectOneAgain === myObjectTwoAgain);// returns 'true' since the second variable's value is the first variable's memory location.
// So basically, the value of [myObjectTwoAgain] resolves to the memory address of [myObjectOneAgain].
console.log("-----------Boundary----------");; // prints out 'false' since each variable has it's own memory location.
```
 

### Practical Application: useObjectEqualityChecker
Now, let's blend theory with practice through a React hook, `useObjectEqualityChecker`, designed to check object equality by comparing their key-value pairs rather than their memory reference.

```typescript
import { useMemo, useRef } from "react";

export type ObjType = { [key: string | number | symbol]: any; };

const useObjectEqualityChecker = (obj: ObjType) => {
 const refObject = useRef<ObjType>({});

 return useMemo(() => {
 if (obj) {
 const keys = Object.keys(obj);
 let valuesMatch = true;
 keys.forEach((k) => {
 if (refObject.current[k] !== obj[k]) {
 valuesMatch = false;
 }
 });
 if (!valuesMatch) {
 refObject.current = { ...refObject.current, ...obj, };
 }
 }
 return refObject.current;
 }, [obj]);
};

export default useObjectEqualityChecker;
```

This hook demonstrates a way to check equality beyond mere reference checking. It iteratively compares each key-value pair of the current and previous objects, updating the reference only when a discrepancy is found. This approaches equality checking with more nuance, especially valuable in React, where re-renders should be minimized for performance.

If you want even more sophisticated equality checks like deep comparisons, there's the: [lodash.iseQual](https://lodash.com/) library that'll do this for you out of the box. At least now you do have a bit of clarity on what's happening under the hood, so there's no harm in using a library.



### Wrapping Up

Equality in JavaScript is a multifaceted concept, laced with subtleties that can lead to nuanced bugs and performance issues if misunderstood. By unraveling these intricacies, from different types to identity checks, and applying them in practical scenarios like the `useObjectEqualityChecker` hook, developers can write more efficient and bug-free code. Understanding equality deeply not only aids in mastering JavaScript but also in harnessing the full power of frameworks such as React.

And there you have it — a journey from the foundational to the advanced, all within the realm of JavaScript's equality checks. May this guide serve as a beacon, illuminating the path for both neophytes and veterans of JavaScript alike. 

Cheers!

JavaScript Equality Under the Lens: Enhancing React's Dependency Checks with an Innovative Hook Example

JavaScript Equality Under the Lens: Enhancing React's Dependency Checks


Dare I say, we've all been there - staring at our perfectly tailor-made Figma designs, only to dread the impending ordeal of translating it pixel-for-pixel in code. The challenge often intensifies when grappling with SVGs, particularly when trying to tweak them to react to user interactions. But worry not - I have a solution worth considering.

### The SVG Ordeal in React

SVGs, with their crisp edges and responsiveness to scaling, have a special place in our developer hearts. The love story, however, has its occasional frictions when you wish your SVGs to be more "reactive"- like changing color on hover, growing, shrinking, coming alive. You end up scrambling for icon libraries, like react-icons, but good luck finding the perfect match for your designs there!

### The Case of UI Libraries

Strapped for alternatives, you resort to using UI libraries. Material UI? Been there. Chakra UI? Done that. Yet, despite bundling your projects with these bulky companions, the SVG remains seemingly aloof. React even comes with the ability to import SVGs directly as React Components. Be it a massive UI library or React's native functionality, they both skip a vital step - processing the SVGs to relinquish their hard-coded aesthetic attributes. The SVGs, regardless of their fancy new wrappers, stay indifferent to the dynamically changing environment.

The colors, strokes, fills and other hardcoded properties remain the same; the SVG refuses to react. The upshot? Your project has accumulated unnecessary weight, and the SVG hasn't budged from its original state.

### Breaking Free: My Alternative Approach

From my trenches, I offer a counterproposal: a streamlined, lightweight alternative that abolishes dependencies and ignores pre-processed icons. My solution transforms your beloved SVG images into stateful, responsive React components, honoring their parent properties like color, font size, etc., and bringing your designs to life with precision. It's also not a library, not a dependency, nor a package - it's literally an approach, a step by step you can try out yourself.

And the best part? You can clone my GitHub repo, and do with the source code as you please. Feed it your SVGs, the tool works its magic (which really isn't anything sophisticated), and out comes a neat zip file with your tailor-made, ready-to-use React SVG components.

### The Walkthrough: A Cake Walk

Here's the [link to the GitHub repo](https://github.com/TylerMutai/svg-to-react-component) for those of you who'd rather jump directly into the code.

To illustrate the simplicity and effectiveness of this new approach, I present a step-by-step guide:

1. [Clone the GitHub repo](https://github.com/TylerMutai/svg-to-react-component) and follow the ReadMe instructions (which is basically `npm install` and `npm run build` and `npm run start`).
2. Upload your SVG images in the interface provided – the exact ones taken from your Figma designs - and click 'Convert'.
3. As the tool processes the SVGs, it automatically attends to all necessary preprocessing steps. It strips them of any hardcoded aesthetic values that usually resist changes, priming them for perfect integration into your project. Since this is just a POC, the tool is changing only the 'fill', 'stroke' and 'strokeWidth' properties, which I believe are enough for this scenario.
4. Download the resulting zip file containing your fully prepped React SVG components.

Embed them in a button, a div, an anchor, or whatever element their new home is. Write your CSS. Here's a sample:

```css
.parent {
  color: red;
}

.parent:hover {
  color: blue;
}
```

As long as your SVG is a child of 'parent', it'll change from red to blue.

### Proving the Pudding

Try it for a spin. Hover on a link – the SVG responds! Resize the parent – the SVG scales seamlessly. Change the text color – similar to its text siblings, it changes color correctly matching parent properties. In my opinion, this method significantly elevates your SVG implementation in React. By abolishing the complexity of integrating additional libraries and detaching your SVGs' visual attributes from their innate structure, it paves the way for a powerful advantage. Now, your SVGs can be styled directly with CSS, enabling them to respond and behave just like their component siblings within React's ecosystem.

(__A side note, I'm still in disbelief that this approach hasn't yet been attempted by anyone. I did my fair share of ransacking the internet, and didn't find any satisfactory solutions, including React's own built-in approach. I'm very open to having my mind changed.__)

### Feedback: A Milestone, Not the Destination

As excited as I am about this solution, I recognize it as an evolving proposition. Therefore, your perspective matters greatly. Questions, insights, alternatives, or a simple pat on the back would be invaluable. After all, progress in our developer community is driven by dialogues and shared genius.

Here's throwing a hat in the SVGs' ring in React. It's not a magic bullet or a universal panacea, but with your help, it can be a steady stride in aligning our SVGs to our tasks. I also believe the application of this approach isn't just restricted to React. This approach can be adapted to Flutter, Vue, and any other declarative framework.

Happy coding!


An alternative approach to reactive, responsive and customizable SVGs in React without needing to compromise nor install bulky libraries

Showing posts from react category

JavaScript Equality Under the Lens: Enhancing React's Dependency Checks

Animating SVGs in React: Breathe Life into Your Images