DEV Community

Cover image for A Case for Hungarian Notation in JavaScript

A Case for Hungarian Notation in JavaScript

Toby Farley (Shadow Chicken) on March 25, 2024

The most lowly newbie JavaScript programmer knows that JavaScript, for good or bad, is a dynamically typed language and that a variable can take on...
Read full post
Collapse
 
htho profile image
Hauke T. •

Hi, thanks for your article.

Hungarian notation did not gain popularity when it was used to mark the type. It gained popularity when it was used to mark the intention of a variable. This was very useful when they developed Microsoft Word and wanted to make sure not to confuse document- and window-coordinates. - This is called "Apps Hungarian"

It lost popularity when it was adopted to other projects and used to mark the type. - This is called "Systems Hungarian"

The Wikipedia-Article on Hungarian Notation has all the details.

This article from '05 actually is a strong case for Hungarian notation. It is a good read, I recommend to every developer:
joelonsoftware.com/2005/05/11/maki...

IMO, it does not make sense to use Hungarian notation in the quick-sort example. In fact, it does not make sense to use Hungarian notation for types at all. (Except if you have a jQuery codebase that is splattered with $-prefixed $myElement variables. Then you should keep them. So you can easily spot the messy places you need to clean up).

Small JS Projects that are simple enough don't need Hungarian notation. Once the project becomes so complex it could actually benefit from Hungarian Notation, it is justified to use JSDoc or even TypeScript.

Collapse
 
tobyfarley profile image
Toby Farley (Shadow Chicken) •

Quicksort was included merely for example purposes and not as an example of a real world application that would include many js files and requisite imports.

Collapse
 
lionelrowe profile image
lionel-rowe • • Edited

I think the jQuery element = $ convention is useful beyond knowing where to clean up code. I frequently use cheerio (a modern, server-side library with an API based on jQuery's) for working with XML and HTML data, and I frequently want to have a similarly-named variable in scope for both an element and its underlying data. For example:

const $rects = $('rect')
const rects = [...$rects].map((r) => {
    const $rect = $(r)
    const x = Number($rect.attr('x'))
    const y = Number($rect.attr('y'))
    const width = Number($rect.attr('width'))
    const height = Number($rect.attr('height'))

    const rect = { x, y, width, height }
    return rect
})
Enter fullscreen mode Exit fullscreen mode

It can also be useful when used more loosely to represent DOM elements when you're interacting with them directly:

const input = 'foo'
const $input = document.querySelector('#input')
$input.value = input
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ajborla profile image
Anthony J. Borla •

Back in the day, the approach was very common on the Windows-family platform. A sample from a best-seller:

Programming Windows 3.1 by Charles Petzold - HelloWin.c

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

It's nice to remember that it existed but I believe it's better to leave Hungarian notation where it belongs: 40 years in the past 😅

You can use JSDoc to accomplish the pretext of this post; See here.

As you can see it offers much more of what Hungarian notation can offer: error checking in dev time, real type information, ability to define types...

Collapse
 
fyodorio profile image
Fyodor •

It’s easy to build a type checking tool for Hungarian notation, np 🏃🏻‍♂️🤣

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

😂😂

Collapse
 
fyodorio profile image
Fyodor •

Interesting approach indeed, never met it in real life but can imagine it making sense for some projects. Looks ugly but efficient… kinda like tailwind 😄

Collapse
 
efpage profile image
Eckehard •

I'm not sure it enhances readability, but it would allow to implement a universal type check routine. Nice Idea anyway....

Collapse
 
efpage profile image
Eckehard • • Edited

I tried to build a type check routine for Hungarian notation, but this was not as easy as I thought. You need to access the variable names inside a function, which seems to be a very special job in Javascript (If I missed something, please provide some code example).

Anyway, your post inspired me to come up with a slightly different solution, which is very nice and exactly what I've been looking for for a long time. See this post for more information

Image description

Collapse
 
anuragvohraec profile image
Anurag Vohra •

Thanx for sharing it. It was helpfull. This notation can really be helpfull.