Overview​

Every programming language has unique features. The better a developer knows these, the more enjoyable coding becomes. Often, developers who become experts in one language are hesitant to switch to another. This expertise not only makes coding fun but also makes you a pro in that language.

I've been coding in JavaScript for years and have found many useful examples. I always wanted to put them together for reference but never did. Now, I finally have the chance. I'll use this blog to share these examples, so this page will be updated often.

== vs ===​

In JavaScript, we usually use === to compare two variables. In my experience interviewing developers or having casual conversations, I've noticed most know that === checks the variable type, whereas == does not. However, many don't understand what this truly means.

The main issue with == is that JavaScript tries to convert both variables to the same type before comparing them, which can affect performance. Here's an example to understand it better:

function Test(){
    let str1 = "1";
    let bol1 = true;
    let arr1 = [];
    let obj1 = {};
    return(<>
        <div>
            Compare str1 == 1 : 
            <b>
                {str1 == 1 ? "They are same": "They are different"}
            </b>
        </div>
        <div>
            Compare bol1 == 1 : 
            <b>
                {bol1 == 1 ? "They are same": "They are different"}
            </b>
        </div>
        <div>
            Compare arr1 == 1 : 
            <b>
                {arr1 == 1 ? "They are same": "They are different"}
            </b>
        </div>
        <div>
            Compare obj1 == 1 : 
            <b>
                {obj1 == 1 ? "They are same": "They are different"}
            </b>
        </div>

        <hr/>
        <div>
            Compare str1 === 1 : 
            <b>
                {str1 === 1 ? "They are same": "They are different"}
            </b>
        </div>
        <div>
            Compare bol1 === 1 : 
            <b>
                {bol1 === 1 ? "They are same": "They are different"}
            </b>
        </div>
        <div>
            Compare arr1 === 1 : 
            <b>
                {arr1 === 1 ? "They are same": "They are different"}
            </b>
        </div>
        <div>
            Compare obj1 === 1 : 
            <b>
                {obj1 === 1 ? "They are same": "They are different"}
            </b>
        </div>

    </>)
}

When comparing primary data types, JavaScript casts them to the same type. That's why String, Boolean, Number often return true when compared.

Overview​

I recently worked on a small code snippet for reading a list of files from a folder. Each file has a unique ID and may reference another file within it.

The goal of the code is to find a file using its unique ID, search through all folders and subfolders to locate it, and then determine how many files are included within it. It's also possible that files included in the first file have links to other files.

There's no limit on the number of levels or files it can search through. Sometimes the same file ID may appear multiple times, so the code removes duplicates and presents the list as a JSON in hierarchical form.

Steps in Functional Flow​

• Input the file ID.
• Start reading files from the main folder.
• Skip files if their extension doesn't match.
• If the file isn't found, keep searching subfolders recursively until it's found.
• If no file is found, stop and display an error message.
• If a file is found, stop searching further.
• Treat this file as the rootFile.
• Read all files included in the rootFile.
• Check if included files have further files included in a loop.
• If more files are found, search for the next level of included files recursively and store them in a JSON with two keys: id (String) and children (Array).
• Stop searching if a file has no further files included.
• Display the final result.

I initially wrote the code snippet in Python, but as most of my team members are beginners and still learning, I converted the logic to Node.js. I tried to write equivalent JavaScript for most of the code, line by line.

Benchmarks​

Here are the results when I ran the Python and Node.js code for the same purpose, on the same machine, and for the same requirement.

                Node.js                 Python (MM:SS.MS)
----------------------------------------------------------
Product Env     90.731 seconds          02:17.111494 
Cust I Env      120.099 seconds         02:57.662355
Cust II Env     80.626 seconds          01:57.616320

Machine Configuration​

The code was run locally on my laptop, which has the following specs:

• Model:-- Macbook Pro 2018 model
• Processor:-- Intel chipset
• RAM:-- 16 GB

Conclusion​

For this specific use case, running the code locally as a single user, even if it takes 5 minutes, doesn't make much of a difference. Therefore, the speed of one technology over another isn't crucial here. This documentation is only for informational purposes and not to compare Node.js and Python.

Every programming language has its strengths and weaknesses. What works well in one scenario might not in another. Factors like concurrent executions, network speed, and server reliability play significant roles. Before deciding on a technology, thorough research and analysis are essential.

I was writing some React code and encountered a strange issue. While passing data through function parameters, even with correct type definitions, I got this error:

Type '{ name: string; type̵: string; size: string; }' is not assignable to type '{ name: string; type: string; size: string; }'.\n  Object literal may only specify known properties, and '\"type̵\"' does not exist in type '{ name: string; type: string; size: string; }'.

The error message indicated that type̵ didn't exist in { name: string; type: string; size: string; }. There was an extra horizontal mark on the 'e', but it wasn't visible in the code editor. As a TypeScript developer in a React project, I was puzzled by this error. I enjoy coding but am not a full-time developer anymore, and I tend to forget things quickly due to my poor memory.

My strong logical and analytical skills help me, but if I don't use a technology for a while, I tend to forget most of it. It had been almost a year since I last wrote TypeScript/React code.

I felt I had encountered this problem before. Based on the error message, I suspected an issue with TypeScript type declarations and the variable I created. It seemed like a simple warning, not an error, but I wanted to understand its cause. After hours of investigation and no clues, I turned to Google for help but didn't find a solution. I decided to set it aside and focus on other tasks.

The next day, while working on something else, an idea struck me. I copied the error message into a new file in Visual Studio Code (VS Code) and selected the word 'type'. VS Code has a feature that highlights all instances of a selected word. For example, it highlighted the word string like this:

But when I selected other 'type', it didn't highlight all instances:

I zoomed in to see the differences between the 'e's in 'type': Even at maximum zoom, the difference was hard to notice.

I had a hunch it was a hidden character issue since I had copy-pasted part of the code. I've faced similar issues before, but this was different. In the past, pasting text into Notepad on Windows revealed special characters, but this time on my Mac, it took me hours to realize my mistake.

The lesson remains the same: be careful when copy-pasting code.