Discussion

JavaScript gotchas

JavaScript is one of the most widely used programming languages. It can be found in Pega Platform internals too. Despite being popular, JavaScript is also said to be the world's most misunderstood programming language.

Its syntax may look familiar for engineers with experience in Java or C#.
However, the results and side effects of JavaScript code are not always easy to predict.

Let's explore some of the most common JavaScript gotchas and misconceptions:

0. Language name

There are several names that people use to refer to specific versions of JavaScript.

In short:

JavaScript 5th edition == ES5 == ECMAScript 5
JavaScript 6th edition == ES6 == ECMAScript 2015
JavaScript 7th edition == ES7 == ECMAScript 2016
...

1. Unintended global variables

If you assign a value to an undeclared variable, JavaScript will not throw an error. Instead, it will create (or override) a global variable with such name.

  1. function f(heavyObject){
  2. myConfig = heavyObject; // undeclared variable becomes a global variable holding a heavy object
  3. if(myConfig.isValid){
  4. // ...
  5. }
  6. }

So forgetting the 'var' keyword or misspelling a variable name may cause a memory leak or breaking the global state of the application.

2. Unexpected scope of variables

For years variables were declared with 'var' keyword in JavaScript. Since ES6 there are 3 keywords for declaring variables:

  • const (block scope)
  • let (block scope)
  • var (function scope)

Variables declared with 'const' or 'let' have the well-known block scope. They are valid from the place of declaration to the end of the block in which they are declared. They can be shadowed by another variable declaration with the same name.

  1. function f(){
  2. let x = 123;
  3.  
  4. console.log("Outer block scope, x=" + x);
  5. // y does not exist
  6.  
  7. if(true){
  8. let x = 4; // inner-scope declaration shadows outer-scope declaration
  9. let y = 5;
  10.  
  11. console.log(" Inner block scope, x=" + x);
  12. console.log(" Inner block scope, y=" + y);
  13. }
  14.  
  15. console.log("Outer block scope, x=" + x);
  16. // y does not exist
  17. }
  18.  
  19. f();

Output:

  1. Outer block scope, x=123
  2. Inner block scope, x=4
  3. Inner block scope, y=5
  4. Outer block scope, x=123

On the other hand, variables declared with the 'var' keyword behave differently. They have function scope. Even if you try to redeclare a variable name several times in different block scopes, there will be just one variable with a given name per function. What's more, JavaScript moves all declarations of function-scoped variables to the beginning of the function. Therefore, function-scoped variables exist from the very first line of the function, even if they are declared later in an inner block.

  1. function f(){
  2. var x = 123;
  3.  
  4. console.log("Outer block scope, x=" + x);
  5. console.log("Outer block scope, y=" + y); // local y already exists, but its value is undefined
  6.  
  7. if(true){
  8. var x = 4; // redeclaration is ignored, there is still only one x variable
  9. var y = 5; // declaration is automatically moved to the beginning of the function
  10.  
  11. console.log(" Inner block scope, x=" + x);
  12. console.log(" Inner block scope, y=" + y);
  13. }
  14.  
  15. console.log("Outer block scope, x=" + x);
  16. console.log("Outer block scope, y=" + y);
  17. }
  18.  
  19. f();

Output:

  1. Output:
  2. Outer block scope, x=123
  3. Outer block scope, y=undefined
  4. Inner block scope, x=4
  5. Inner block scope, y=5
  6. Outer block scope, x=4
  7. Outer block scope, y=5

3. Comparing with == operator

The == operator is tricky. It tries to compare values even if their type is different.

Examples:

  1. "0" == 0 // -> true
  2. 0 == "" // -> true
  3. "0" == "" // -> false
  4.  
  5. false == 0 // -> true
  6. !false == !0 // -> true
  7. false == "0" // -> true
  8. !false == !"0" // -> false
  9.  
  10. 3 == "3" // -> true
  11. 3 == "003" // -> true
  12. "3" == "003" // -> false
  13.  
  14. null == undefined // -> true
  15. null == 0 // -> false
  16. false == 0 // -> true

It's usually better to use === operator that compares both value and its type.

4. Checking if value exists

Checking if a variable or property has a value is simple in Java and C#. You just make sure that the value is not null.

Things are more complicated in JavaScript. You need to check that the value is neither null nor undefined.

  1. if(localVar !== null && localVar !== undefined){
  2. /* do something with localVar */
  3. }

An alternative solution is using != operator, that will work for both null and undefined. But in general people don't like != and == operators in JavaScript.

  1. if(localVar != null){
  2. /* do something with localVar */
  3. }

The above two code examples might not work in case of global variables. If the global variable does not exist, then trying to read its value will throw ReferenceError.

You can check if the global variable exists with the following code:

  1. if(typeof globalVariable !== "undefined" && globalVariable !== null){
  2. /* do something with globalVariable */
  3. }

In case of objects, accessing a property that does not exist will not throw an Error. It will return undefined.

  1. var person = {name:"John", surname:"Smith"};
  2. console.log(person.age); // -> undefined

However, some properties may be "inherited" from the object prototype.

  1. var person = {name:"John", surname:"Smith"};
  2. console.log(person.toString); // -> ƒ toString() { [native code] }

If you are not interested in inherited properties, you can filter them out with hasOwnProperty function.

  1. var person = {name:"John", surname:"Smith"};
  2. console.log(person.hasOwnProperty("name")); // -> true
  3. console.log(person.hasOwnProperty("toString")); // -> false

There is also a short way to check properties.

  1. if(person.name){
  2. /* do something with person.name */
  3. }

This can be tricky though. The condition will be false not only for null and undefined. It will also be false for any "falsy" value like 0, "", false, null, NaN, etc.

5. What is 'this'?

In JavaScript the meaning of 'this' keyword depends on the way the function was invoked.
If the function is invoked with the new keyword, then 'this' points to a new empty object.
If the function is invoked as an object member, then 'this' points to the that object.
If the function is invoked as an ordinary function, then 'this' points to the global window object.

Let's see an example:

  1. function Person(name){
  2. this.personName = name;
  3. this.sayHello = function(){
  4. return "Hello, I'm " + this.personName;
  5. };
  6. }
  7. var p = new Person("John");
  8.  
  9. p.personName; // -> "John"
  10. p.sayHello(); // -> "Hello, I'm John"

Let's change the person's name, to ensure that sayHello function can see the change.

  1. p.personName = "George";
  2. p.sayHello(); // -> "Hello, I'm George"

Let's copy the sayHello function to a different object

  1. var cat = {
  2. personName: "Garfield"
  3. }
  4. cat.saySomething = p.sayHello;
  5. cat.saySomething(); // -> "Hello, I'm Garfield"

Now, let's store the sayHello function in a variable. When we call it, 'this' will point to the global window object. Window does not have a personName property, so it will be undefined.

  1. var f = p.sayHello;
  2. f(); // -> "Hello, I'm undefined"

Let's call the Person function without the 'new' keyword. 'this' should again point to the global window object;

var p2 = Person("The Global Window Object");

This time no new object was created, so p2 is undefined.

p2; // -> undefined

Let's check the window object:

window.personName; // -> "The Global Window Object"

Let's call the f function again. 'this' will point to window object.

f();  // -> "Hello, I'm The Global Window Object"

6. Wasting memory while creating objects

There are several ways you can create objects in JavaScript.

You can create a constructor method that sets all properties and methods, e.g.

  1. function Person(name){
  2. this.personName = name;
  3. this.sayHello = function(){
  4. return "Hello, I'm " + this.personName;
  5. };
  6. }

Please note that each time you create a new Person, a new copy of the sayHello function is created. Each object has a separate (though exactly the same) implementation. So we are wasting memory for several copies of the same function.

  1. var p1 = new Person("Jessica");
  2. var p2 = new Person("Victoria");
  3. p1.sayHello === p2.sayHello // -> false;

The same thing happens when you create a method that returns objects as literals

  1. function createPerson(name){
  2. return {
  3. personName: name,
  4. sayHello: function(){
  5. return "Hello, I'm " + this.personName;
  6. }
  7. }
  8. }
  9.  
  10. var p3 = createPerson("Jim");
  11. var p4 = createPerson("Denzel");
  12. p3.sayHello === p4.sayHello; // -> false

The solution is to define the method in prototype object:

  1. function Person(name){
  2. this.personName = name;
  3. }
  4. Person.prototype.sayHello = function(){
  5. return "Hello, I'm " + this.personName;
  6. };
  7.  
  8. var p5 = new Person("Amanda");
  9. var p6 = new Person("Alex");
  10. p5.sayHello === p6.sayHello // -> true

Now, instances of the Person class share the same single implementation of sayHello function.

Comments

Keep up to date on this post and subscribe to comments