DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Arindam Dawn
Arindam Dawn

Posted on • Originally published at tabandspace.com

Javascript Quirks πŸ˜•

Javascript is amazing but it has some gotchas which can be a bit unusual to someone new to the language. I have often been confused while dealing with some of them so would like to share some of the many quirks that exist in javascript.

Here are some examples. Enjoy!

  • Pitfall: truthiness-based existence checks are imprecise

  • Use case: was a parameter provided?

function(x){
    if(!x) //falsy check
{
    //This block will be reached if x is either null, undefined, 0, false
    throw new Error('Please provide a value');
}
}

function(x) {
    if(x!== undefined || x!== null) 
    {
    //This block will be reached if x is either null or undefined
    throw new Error('Please provide a value');
    }
}

Enter fullscreen mode Exit fullscreen mode
  • Use case: does a property exist?
function readFile(fileDesc) {
  if (!fileDesc.path) {
    throw new Error('Missing property: .path');
  }
  // Β·Β·Β·
}
readFile({ path: 'foo.txt' }); // no error
readFile({ path: '' }); // Missing property: .path

function readFile(fileDesc) {
  if ('path' in fileDesc) {
    throw new Error('Missing property: .path');
  }
  // Β·Β·Β·
}
readFile({ path: 'foo.txt' }); // no error
readFile({ path: '' }); // no error
Enter fullscreen mode Exit fullscreen mode
  • Strict vs loose equality check
'' == 0 // true
[1,2,3] == '1,2,3'//true
[1,2,3] == ['1','2','3'] //false

'' === 0 //false
[1,2,3] === '1,2,3' //false
[1,2,3] === ['1','2','3'] //false
Enter fullscreen mode Exit fullscreen mode
  • Searching for a NaN value
const array = [1, 'text', NaN];
array.findIndex(el => el === NaN); // -1 (unable to find)
array.findIndex(el => Object.is(el,NaN)) //2 (Object.is is able to find NaN)
array.findIndex(el => Number.isNaN(el,NaN)) //3 (Preferred)
Enter fullscreen mode Exit fullscreen mode
  • Syntactic pitfall: properties of integer literals
7.toString(); // syntax error
7.0.toString() // '7'
(7).toString() // '7'
7..toString() // '7'
7 .toString()  // space before dot
Enter fullscreen mode Exit fullscreen mode
  • % operator

  • JavaScriptβ€˜s % operator is a remainder operator.

  • Python’s % operator is a modulo operator.

https://2ality.com/2019/08/remainder-vs-modulo.html

  • NaN (Not a number)
typeof NaN // number 😜 
//(NaN is the only JavaScript value that is not strictly equal to itself)
Enter fullscreen mode Exit fullscreen mode
  • Safe computations
9007199254740990 + 3 // 9007199254740992 (Since result is unsafe)
Number.isSafeInteger(9007199254740990 + 3) //false
//Both operands and result must be safe
Enter fullscreen mode Exit fullscreen mode
  • Number.parseFloat
Number(' 123.4#') // NaN
Number.parseFloat(' 123.4#') // 123.4
Enter fullscreen mode Exit fullscreen mode

These are some of the many other gotchas that are there in javascript. I would like to share some of the others in
some other post.
I often have this imposter's syndrome(in a good way) that makes me feel that I am very incompetent in JavaScript and I start exploring the basics from scratch. It helps me unlearn and re-learn the features of this amazing language and be a better JavaScript craftsman and sharpen some programming skills.
Hopefully someday I will be able to know all the knitty gritty details of this language πŸ˜„

My favorite javascript resources

As a sidenote I would like to share the places I like to visit again and again to attain some wisdom each time

  • 2ality - I personally feel is one of the best blogs on JavaScript (ECMAScript).
  • ExploringJs - Maintained by Dr. Axel Rauschmayer of 2ality. Phenomenal books
  • Javascript.info - Very well maintained and documented
  • MDN - Very robust and highly informative

Have a great one!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.