DEV Community: Subaash

Referential equality: Where variables check-in and rarely check-out.

Subaash — Fri, 19 Jan 2024 17:05:14 +0000

Hi fellow devs, we are here to dive deep into the heart of JavaScript's strict equality operator ('===') and figure out why some variables behave like identical twins while others behave like awkward strangers in an alumni reunion.
Before knowing about the equality operator, we should understand what are primitive values and non-primitive values in JavaScript.

Primitive values

Primitives are basic, fundamental data types that serve as the building blocks to build a complex data type. The following are some primitives in JavaScript.

String
Number
Boolean
Undefined
Null

Non-Primitives

Any data type other than the primitives are Non-Primitives. Some of them are,

Array
Object
Function
RegExp
Set
Map
Promise

Examples

1) Primitives and the effect of Equality
Whenever we strictly equate('===') two primitives of a similar data type, they always yield true.

let fruit_1 = 'apple'
let fruit_2 = 'apple'
console.log(fruit_1 === fruit_2) //Output: true

2) Non-Primitives and the effects of Referential Equality
When two non-primitives of the same data type are strict-equated, the results will be surprising. Look at the following snippet where two arrays with similar data types and similar items are equated.

let basket_1 = [ 'apple', 'banana' ]
let basket_2 = [ 'apple', 'banana' ]
console.log(basket_1 === basket_2) //Output: false

But, when we check the equality criteria of basket_3 and basket_1, it returns true

let basket_1 = [ 'apple', 'banana' ]
let basket_2 = [ 'apple', 'banana' ]
let basket_3 = basket_1
console.log(basket_3 === basket_1) //Output: true;

Let's try one more thing.
When we push another item into basket_3, it should not affect basket_1. But it does.

let basket_1 = [ 'apple', 'banana' ]
let basket_2 = [ 'apple', 'banana' ]
let basket_3 = basket_1
basket_3.push('orange')
console.log(basket_1) //Output: [ 'apple', 'banana', 'orange' ]
console.log(basket_3) //Output: [ 'apple', 'banana', 'orange' ]

But why is this happening?
This is where we should know about Referential equality.

Referential Equality

This seems to be a Jargon, doesn't it? Actually No.
Referential Equality is like asking, "Are these two non-primitive things pointing to the same spot in the computer's memory ?" If yes, they are referentially equal(i.e., true) otherwise, they aren't(i.e., false). As simple as that.
Take a look at the following representation to get it better.

Even though the basket_1and basket_2arrays have similar items, they occupy different locations in memory. When we use strict equality (===) to compare them, JavaScript checks whether they refer to the same location in memory, and since they are on distinct memory locations, the result is false.

But, things changed when we declared basket_3 and assigned it to basket_1

By assigning let basket_3 = basket_1, we forced the variable basket_3to point to the exact memory address as basket_1. So the result was true when we did console.log(basket_3===basket_1).

As basket_3and basket_1 point the same memory location, changes made through one of the variables will reflect in the other. Therefore, when we push the item 'orange' only into basket_3, we observe that the item 'orange' is now present in both arrays

However, for primitive types like strings, numbers etc., we are more interested in comparing their values rather than their references. JavaScript decides whether to compare a variable by the value or by its reference based on its primitive and non-primitive nature.

How to work with Non-primitives?

How do we work with them if they keep sharing their addresses? JavaScript has nothing to do with this. Even some of the libraries like React, utilize this uniqueness of the non-primitives to control the component renders.
But, we can prevent them from sharing memory locations or memory addresses.
If the array is on the top level (i.e., no nesting within arrays) we can shallow copy the existing array into the other.
Create a shallow copy using the spread operator (...)

let fruit_1 = ['apple'];
let fruit_2 = ['apple'];
let fruit_3 = [...fruit_1]
fruit_3.push('orange')
console.log(fruit_3) //Output: ['apple', 'orange']
console.log(fruit_1) //Output: ['apple']

Now you may get a question. What about the other non-primitives? Will this even work with JavaScript objects? The answer is, YES.
Let's take a complex example of an object whose values are nested deeper than the top level.

Wait, What? The shallow copy is supposed to copy the contents into a new memory address. But in the above case, making changes in the inventoryobject changes the shopobject as well. So, this is the catch with the shallow copy. You cannot use shallow copy with deeply nested objects and arrays.
We can overcome this by using JSON.stringify() and JSON.parse()

According to the above representation, changes made on inventoryobject have no impact on the shopobject. And this is how we perform deep copy of nested objects.
If you are confused with JSON.parse() and JSON.stringify(), please refer to the official documentation available at the end of this article.
Using JSON methods has its drawbacks. They can be rectified by using appropriate methods and techniques. Given the article's length, let's wrap up our discussion here and I look forward on to delving another article, discussing the alternatives to the JSON methods. Thank you for reading and have a nice day.

Here are the official MDN docs on JSON.parse() and JSON.strigify() methods

JSON.parse() - JavaScript | MDN

The JSON.parse() static method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

developer.mozilla.org

JSON.stringify() - JavaScript | MDN

The JSON.stringify() static method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

developer.mozilla.org

Follow me on X, if you wish to see my progress in becoming a full-stack Java developer.

twitter.com

Simplify, Groupify, Conquer: The convenience of Object.GroupBy() in JavaScript

Subaash — Sun, 17 Dec 2023 17:22:34 +0000

It was a regular day of coding when I decided to revisit an old project of mine. As I scrolled through my code, I noticed a piece of code I had written during the earlier days of my JavaScript journey. The project was an Expense Tracker web application that allowed users to manually enter transactions and store them in LocalStorage. The specific code snippet I encountered was related to the grouping of data.

Back then, I remember grappling with the challenges of grouping data and attempting solutions using filter(), map(), and even forEach(). However, to my surprise, I discovered that there was an actual method designed for conveniently grouping data.

A sample from the actual set of data to be handled is as follows:



const transacHistory = [
    { type: 'Income', desc: 'Salary', amount: '52000', date: '09/01/2023' },
    { type: 'Expense', desc: 'House rent', amount: '7500', date: '09/03/2023'},
    { type: 'Expense', desc: 'Shopping', amount: '8000', date: '09/11/2023' },
    { type: 'Income', desc: 'YouTube', amount: '3508', date: '09/12/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '550', date: '9/02/2023' },
    { type: 'Expense', desc: 'Internet', amount: '2250', date: '09/11/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '350', date: '9/18/2023' },
]

Now, I wanted to group them based on the type of transaction made ( expense or income )

The old-school data grouping technique



const groupedTransacHistory = transacHistory.reduce((acc, item)=>{
    if(!Object.keys(acc).includes(item.type)){
        acc[item.type] = [item]
    }
    else{
        acc[item.type].push(item)
    }
    return acc;
}, [])
console.log(groupedTransacHistory)

{*
OUTPUT:
[
  Income: [
    { type: 'Income', desc: 'Salary', amount: '52000', date: '09/01/2023' },
    { type: 'Income', desc: 'YouTube', amount: '3508', date: '09/12/2023' }
  ],
  Expense: [
    { type: 'Expense', desc: 'House rent', amount: '7500', date: '09/03/2023' },
    { type: 'Expense', desc: 'Shopping', amount: '8000', date: '09/11/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '550', date: '9/02/2023' },
    { type: 'Expense', desc: 'Internet', amount: '2250', date: '09/11/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '350', date: '9/18/2023' }
  ]
]
*}

The code to achieve the above output might seem to be a bit complex, but anyone familiar with the filter() method might understand the logic. If you wish to know more about JavaScript's filter() method, refer to the official MDN docs embedded at the bottom of this article. The same logic can also be implemented using map() and forEach() methods as well. As their logic is similar, I've included only the code associated with the filter() method.

Know more about the `groupBy()` method:

Before letting you know the actual solution using the proposed groupBy() method, let's analyse how to use that in the first place.
The Object.groupBy() method is used to categorize individual items of an iterable. The categorization is done according to the coerced string values returned by the provided callback function. The grouped/categorized object thus returned contains unique keys with each key corresponding to an array of related values. Is it sound confusing? You are on the right path. Follow along to see this method in action.

SYNTAX

where,

The iterableis the element to be grouped
The callbackFunctionis the function to be passed to execute each element in the iterable. This function should return a value which is then coerced into a string.
function callbackFunction(element, index){...}
The callbackFunctionaccepts elementand indexas its arguments
where,
The element represents the current element which is being passed to the callbackFunction at the moment and the index is the index of the element itself.
Let's look at some general and simple examples to grasp the concept.

Examples

The following code groups items based on whether they start with a vowel or a consonant.

1. The traditional approach:



const vowels = ['a', 'e', 'i', 'o', 'u']
const cartItems = ['apples', 'bananas', 'cherries', 'umbrellas', 'cat food', 'pedigree', 'cupcakes']
const res2 = cartItems.reduce((accumulator, item) => {
    if (vowels.includes(item.slice(0, 1))) {
        if (!accumulator['vowels']) {
            accumulator['vowels'] = [];
        }
        accumulator['vowels'].push(item);
    } else {
        if (!accumulator['non-vowels']) {
            accumulator['non-vowels'] = [];
        }
        accumulator['non-vowels'].push(item);
    }
    return accumulator;
}, {});
{*
OUTPUT: 
{
  vowels: ['apples', 'umbrellas'],
  non-vowels: ['bananas', 'cherries', 'cat food', 'pedigree', 'cupcakes']
}
*}

2. The Object.groupBy() approach:



const vowels = ['a', 'e', 'i', 'o', 'u']
const cartItems = ['apples', 'bananas', 'cherries', 'umbrellas', 'cat food', 'pedigree', 'cupcakes']
Object.groupBy(cartItems, (item)=>vowels.includes(item.slice(0, 1)))
//item.slice(0,1) returns the first letter of the currently iterated item and checks whether it is a vowel.
{*
OUTPUT: 
{
  true: ['apples', 'umbrellas'],
  false: ['bananas', 'cherries', 'cat food', 'pedigree', 'cupcakes']
}
*}

If there are no object properties to be displayed in the case of arrays, the Object.groupBy() method simply uses the Boolean values as keys. If we need precisely set keys, then we should implement Map.groupBy() method which is the replica of our former method but lets us set keys instead of the default Boolean.



const fictionalCharacters = [
  { character: 'Ironman', ability: 'Fights bad guys' },
  { character: 'Barbie', ability: "Doesn't fight" },
  { character: 'Black widow', ability: 'Fights bad guys' },
  { character: 'Oggy', ability: "Doesn't fight" },
  { character: 'Peppa Pig', ability: "Doesn't fight" }
]
Object.groupBy( fictionalCharacters, (item)=>item.ability )
{* The value of item.ability is type-converted into a string and used as a key to group similar items in arrays, where the key's value is an array of corresponding items. Example: { item.ability: [{}, {}] } *}
{*
OUTPUT:
[
   Fights bad guys: [
      { character: 'Ironman', ability: 'Fights bad guys' },
      { character: 'Black widow', ability: 'Fights bad guys' },
   ],
   Doesn't fight: [
      { character: 'Barbie', ability: "Doesn't fight" },
      { character: 'Oggy', ability: "Doesn't fight" },
      { character: 'Peppa Pig', ability: "Doesn't fight" }
   ]
]
*}

So, as now we have a pretty decent understanding of how it works, let's get back to our expense tracker example.



const transacHistory = [
    { type: 'Income', desc: 'Salary', amount: '52000', date: '09/01/2023' },
    { type: 'Expense', desc: 'House rent', amount: '7500', date: '09/03/2023'},
    { type: 'Expense', desc: 'Shopping', amount: '8000', date: '09/11/2023' },
    { type: 'Income', desc: 'YouTube', amount: '3508', date: '09/12/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '550', date: '9/02/2023' },
    { type: 'Expense', desc: 'Internet', amount: '2250', date: '09/11/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '350', date: '9/18/2023' },
]
Object.groupBy(transacHistory, (item)=>item.type)
{*
OUTPUT:
[
  Income: [
    { type: 'Income', desc: 'Salary', amount: '52000', date: '09/01/2023' },
    { type: 'Income', desc: 'YouTube', amount: '3508', date: '09/12/2023' }
  ],
  Expense: [
    { type: 'Expense', desc: 'House rent', amount: '7500', date: '09/03/2023' },
    { type: 'Expense', desc: 'Shopping', amount: '8000', date: '09/11/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '550', date: '9/02/2023' },
    { type: 'Expense', desc: 'Internet', amount: '2250', date: '09/11/2023' },
    { type: 'Expense', desc: 'Veggies', amount: '350', date: '9/18/2023' }
  ]
]
*}

Simple as that. This is how the groupBy() method is convenient to use and understand.

NOTE:

Instead of making a huge leap to the static methods like Object.groupBy(), beginners should be comfortable using map(), filter() and reduce() methods.
The Object.groupBy() method, as of 17th Dec 2023, is not supported in all browsers and it is expected to be in the near future.

Refer to the following document to learn more about the filter() method in JavaScript:

Array.prototype.filter() - JavaScript | MDN

The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

developer.mozilla.org

To know more about Object.groupBy() method, refer to the following official docs by MDN

Object.groupBy() - JavaScript | MDN

The Object.groupBy() static method groups the elements of a given iterable according to the string values returned by a provided callback function. The returned object has separate properties for each group, containing arrays with the elements in the group.

developer.mozilla.org

Follow me along my web development journey on twitter/X

Redefine your Logic for stricter, safer JavaScript defaults with the '??' operator

Subaash — Sun, 10 Dec 2023 15:48:46 +0000

The title is not a clickbait. There exists an actual '??' operator in JavaScript known as the Nullish coalescing operator. This operator accepts operands on either side and returns the right-hand side operand only when the left-hand side operand is a nullish value. This operator is absolutely a newer one and it was introduced during ES2020 to JavaScript.

`falsy` and `nullish`. Aren't these the same?

No. A value is considered falsy if it coerces to false when evaluated in a boolean expression. In this regard, the following values are considered to be falsy

null - Absence of any object value or a direct null is falsy
undefined - Variable that hasn't assigned any value is falsy
false - The boolean false is falsy
0 - The integer 0 is falsy
-0 - The integer negative 0 is falsy
"" - An empty string is falsy
NaN - Not a Number is falsy

So, what is considered nullish in JavaScript?. Values that are either null or undefined are nullish in JavaScript.

Before getting hands-on with this operator, we should understand the working of short circuit operators.

Short circuit operators

Short circuit operators are basically 'Logical AND' && and 'Logical OR' || operators. They are used to perform concise conditional logic.

&& operator

Syntax: expression1 && expression2

returns expression1 if it is falsy and expression2 is not evaluated at all
returns expression2 if expression1 is truthy(anything other than a falsy value)
Take a look at this example

// Case when the '&&' returns expression1
const number = 0 && 100
console.log(number) //0 because number1 i.e., expression1 was falsy and JavaScript never had a chance to execute expression2
---------------------------------------------------------------------------------------------------------------------------------
//Case when '&&' returns expression2
const heroes = 'IronMan' && 'CaptainAmerica'
console.log(heroes) //'CaptainAmerica' As string1 which is on the left hand side of the && operator is true, it has returned string2 from the right hand side.

|| operator

Syntax: expression1 || expression2

returns expression1 if expression1 is truthy
returns expression2 if expression1 is falsy
Simple as that.
Example:

//Case when expression1 is being returned
const heroes = 'IronMan' || 'CaptainAmerica'
console.log(heroes) // 'IronMan' because 'IronMan' is a truthy value
------------------------------------------------------------------------
//Case when expression2 is being returned
const number = 0 || 100
console.log(number) //100 because Number 0 is a falsy value

The '??' operator

In addition to the && and || there exists another operator called as the Nullish Coalescing Operator. This operator is moreover, like a special case of the logical OR operator and its operation is similar to that of the || operator.

As the || operator returns the right-hand side expression when the left hand side is falsy, the Nullish Coalescing operator ?? returns the right-hand side expression only when the left-hand side operand is either null or undefined. So, the ?? operator is more strict than the existing || operator.
Syntax: expression1 ?? expression2
The ?? operator returns expression2 only if expression1 is either null or undefined. Meanwhile, expression1 is returned if it is simply any value other than a nullish value.

//Case 1
const number = 0 ?? 100
console.log(number) //returns '0' because it is not nullish
------------------------------------------------------------
//Case 2
let fruit = ''
let veggie = 'Carrot'
const basket = fruit ?? veggie
console.log(basket) // '' because an empty string('') is not nullish but falsy
------------------------------------------------------------------------------------
//Case 3
let halves = 'fullPortion' / 2
let full = 1
const portion = halves ?? full
console.log(portion) // NaN. Obtained by the evaluation of the left hand side expression and it is not nullish but falsy.
----------------------------------------------------------------------------------------------------------------------------
//Case 4
let hero1
let hero2 = 'CaptainAmerica'
const heroes = hero1 ?? hero2
console.log(heroes) // 'CaptainAmerica' because 'hero1' is undefined

The ?? operator is designed in such a way that it cannot be used along with the && and || without proper brackets.

null || undefined ?? 'hi' // SyntaxError: missing ) after argument list

(null || undefined) ?? 'hi' //'hi'

But why them?

This question arises as soon as we see some unfamiliar syntax that makes some work. Can't we just stick with the classic if else statement to quantify expressions? Yes we can, but No. Let me explain why is that.
We can use if else conditions as long as we use plain JavaScript. But when it comes to using frontend UI libraries like ReactJs, it is impossible to embed 'if statements' within the JSX structure. We should use only expressions that use logical operators in this regard. Confused about expressions and statements? Scroll down to the bottom and you can find the relevant resource.

This is not the only use case. But these short circuit operators including the nullish coalescing operator avoids unnecessary execution of expressions with a single line of code.

You are open to construct a more complex logic using short-circuit operators as follows:

const gameConfig1 = { 
 playerName: 'John',
 score: 22500,
 highScore: 35000,
}
const gameConfig2 = { 
 playerName: undefined, 
 score: undefined,
 highScore: undefined
}
function getPlayerInfo( player ){
 const { playerName, score, highScore } = player
 const currentPlayerName= playerName ?? 'Guest'
 const currentPlayerScore = ( score >= 100 && score ) || 'No scores yet'
 const currentPlayerHighScore = highScore ?? 'No high scores yet'
 return { currentPlayerName, currentPlayerScore , currentPlayerHighScore }
}
const player1 = getPlayerInfo( gameConfig1 ) // { name: John, score: 22500, highScore: 35000 }
const player2 = getPlayerInfo( gameConfig2 ) // { name: 'Guest', score: 'No scores yet', highScore: 'No high scores yet' }

That's all about the Nullish coalescing operator. Practice more to get familiar with this operator. It may take some to do so, but it's worth the time you spend.
Following is the article distinguishing between Expression and Statement in JavaScript

Statement vs Expression – What's the Difference in Programming?

By Ogundiran Ayobami Learning the syntax of a programming language is key if you want to use that language effectively. This is true for both new and experienced developers. And one of the most important things to pay attention to while learning a pr...

freecodecamp.org

To know more about the nullish coalescing operator, refer to the following docs by MDN.

Nullish coalescing operator (??) - JavaScript | MDN

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

developer.mozilla.org

7 Amazing use cases of Array.from() method in JavaScript

Subaash — Tue, 05 Dec 2023 06:04:40 +0000

The Array.from() method creates a shallow-copied array instance from an array like object or an iterable. The iterable object could be an array, a string, a set, an object or anything with an iterable property.

Syntax:

Array.from(iterable, mapFunction, thisArg)
where,

iterable: the object to convert into an array
mapFunction (optional): A function to call on each element of the array. The mapFunction accepts two parameters as any regular Javascript map function does. The first parameter is the current element and the second one its index in the array.
thisArg (optional): An object to pass as this when using the map function.
Let's look at their use cases in brief

1. Generate numbers up to a specific range:

The traditional method of generating numbers up to a specific range is always to use loops. But the Array.from() method is a one-liner which does the same job as the Javascript loops in this case.

// The traditional method: 
const numberCount = [];
for( let i=0; i < 5; i++){
    numberCount.push( i+1 )
}
console.log(numberCount) // Output: [ 1, 2, 3, 4, 5 ]

// Using Array.from() method to do the same job: 
Array.from( { length: 5 }, (_, index)=> index+1 )
// Output: [ 1, 2, 3, 4, 5 ]

2. Creating a Matrix:

While working with mathematical concepts or engaging in complex use cases, dealing with multi-dimensional arrays can be a cumbersome task, especially during the creation phase. To create one, we use nested for loops, and a small mistake in the logic can end up in vain. But the task is made easier with Array.from() method and it is easy to debug as well.

// Create a grid of Default value
let defaultValue = 0;
let grid = Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => defaultValue ));
// Output: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
// Create a grid with numbers in the increasing order
let grid = Array.from({ length: 3 }, () => Array.from({ length: 3 }, (_, i) => i+1));
// Output: [ [ 1, 2, 3 ], [ 1, 2, 3 ], [ 1, 2, 3 ] ]

3. Mapping object properties into arrays

If you wish to map either the keys or values of an object into an array, it is better to use Array.from() in addition to Objectmethods

const user = { name: 'Ram', age: 23, city: 'Chennai' }
const userInfo = Array.from( Object.values(user) )
// Output: [ 'Ram', 23, 'Chennai' ]

4. Creating an HTML nodelist

let listItems = Array.from( { length: 5 }, (item, index)=>{
    const item = document.createElement('li');
    item.textContent = index + 1;
    return item
})
// Output: NodeList [ <li>, <li>, <li>, <li>, <li> ]

5. Converting NodeList into an Array

In addition to the previous use case at 4, the DOM items could be converted back into arrays using Array.from() method

const listItems = document.querySelectorAll('.listItems')
const listItemsArray = Array.from( listItems )

6. Customizing array elements

Customizing array elements is made easier with Array.from() javascript method. The Array.from() method creates a shallow copy of the array being passed and manipulates each element while creating a new array. Let's get it clear from the following example.

const numbers = [ 1, 2, 3, 4, 5 ]
const multiplyByTwo = Array.from( numbers, (number)=>number*2 )
// Output: [ 2, 4, 6, 8, 10 ]

// Strings can be manipulated as well
const tags = [ webDev, grateful, mentorship, frontend ] 
const twitterTags = Array.from( tags, ( tag, index )=>'#'+tag )
//Output: [ '#webDev', '#grateful', '#mentorship', '#frontend' ]

7. Creating a character frequency map

Array.from() can be used to find how frequently a letter occurs in a sentence or in a given passage. We could achieve this by simply utilising some basic JavaScript functions and methods.

const greet = 'Hello, world!';
const freqMap = Array.from( greet, ( letter )=>({[letter]: greet.split( letter ).length-1 }))
// Output: 
[
  { H: 1 },   { e: 1 },
  { l: 3 },   { l: 3 },
  { o: 2 },   { ',': 1 },
  { ' ': 1 }, { w: 1 },
  { o: 2 },   { r: 1 },
  { l: 3 },   { d: 1 },
  { '!': 1 }
]

These are some use cases of JavaScript's Array.from() method. Please note that, some of the use cases could efficiently be solved using alternate methods available within Javascript, though I wanted to showcase the abilities of this method. For details about the basics and more basic examples, visit the official MDN docs page.

Exploring the unusual: JavaScript arrays and the 'in' operator

Subaash — Fri, 24 Nov 2023 13:30:28 +0000

The 'in' operator of JavaScript

JavaScript is one of the weirdest programming languages both syntactically and by use case. JavaScript is widely used to create fullstack websites, cross-platform mobile applications and even desktop applications. Inspite of it wide usage, JavaScript with its different features can make the developer go nuts. One such thing is the 'in' operator.

In other programming languages like Python, the 'in' keyword directly represents its semantic meaning, i.e., usage of 'in' keyword checks for the presence of an item in an iterable. Whereas in Javascript, the 'in' operator checks for the presence of a particular property in an object. Doesn't sound strange right? The peculiarity becomes even more evident when using 'in' operator with arrays.

'in' operator with JavaScript objects

As mentioned earlier, the 'in' operator is used to check for the presence of a property in a JavaScript object.
For example,

const shoppingCart = { 'apple': 1, 'banana': 5, 'pears': 3 }
console.log( 'apple' in shoppingCart ) //Output: true

The above code is said to return true. But what if it was used in an array?

'in' operator with JavaScript arrays

const shoppingCart = [ 'apple', 'banana', 'pears' ] 
console.log( 'apple' in shoppingCart ) //Output: false

Semantically, it should return true instead, it returns false. Why is this happening ? Behind the hood, Javascript's 'in' operator checks for the existence of an index and so the unexpected answer. Let's see something more weird.

const shoppingCart = [ 'apple', 'banana', 'pears' ]
console.log( '1' in shoppingCart ) //Output: true

The above snippet returns true, because the 'in' operator checks for the presence of an element at the '1'st index instead of checking for the presence of an actual '1' in the array. Let's see what happens under the hood in JavaScript arrays.

Behind the scenes of JavaScript arrays

Arrays are interpreted as objects by JavaScript. The _shoppingCart _array defined above is interpreted by JavaScript as follows:

const shoppingCart = { 0: 'apple', 1: 'banana', 2: 'pears', length: 3}

This clearly explains the behaviour of the 'in' operator. So, it checks whether the '1'st index is actually not undefined. If it does, it returns true else false. But why do someone dare to use it with the JavaScript arrays? The answer is, 'in' operator with the JavaScript arrays checks for the presence of a particular index. If you wish to learn more about the 'in' operator, check out the official docs on MDN:

in - JavaScript | MDN

The in operator returns true if the specified property is in the specified object or its prototype chain.

developer.mozilla.org

DEV Community: Subaash

Referential equality: Where variables check-in and rarely check-out.

Primitive values

Non-Primitives

Examples

Referential Equality

How to work with Non-primitives?

JSON.parse() - JavaScript | MDN

JSON.stringify() - JavaScript | MDN

Simplify, Groupify, Conquer: The convenience of Object.GroupBy() in JavaScript

The old-school data grouping technique

Know more about the groupBy() method:

Examples

Array.prototype.filter() - JavaScript | MDN

Object.groupBy() - JavaScript | MDN

Redefine your Logic for stricter, safer JavaScript defaults with the '??' operator

falsy and nullish. Aren't these the same?

Short circuit operators

The '??' operator

But why them?

Statement vs Expression – What's the Difference in Programming?

Nullish coalescing operator (??) - JavaScript | MDN

7 Amazing use cases of Array.from() method in JavaScript

Syntax:

1. Generate numbers up to a specific range:

2. Creating a Matrix:

3. Mapping object properties into arrays

4. Creating an HTML nodelist

5. Converting NodeList into an Array

6. Customizing array elements

7. Creating a character frequency map

Exploring the unusual: JavaScript arrays and the 'in' operator

The 'in' operator of JavaScript

'in' operator with JavaScript objects

'in' operator with JavaScript arrays

Behind the scenes of JavaScript arrays

in - JavaScript | MDN

Know more about the `groupBy()` method:

`falsy` and `nullish`. Aren't these the same?