8.7 JS Mistakes

Misunderstanding Floats

• All numbers in JavaScript are stored as 64-bits Floating point numbers (Floats).
• All programming languages, including JavaScript, have difficulties with precise floating point values:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3

Try it yourself

To solve the problem above, it helps to multiply and divide:

Example 1: JS Common JavaScript Mistakes

var z = (x * 10 + y * 10) / 10;       // z will be 0.3

Breaking a JavaScript String

JavaScript will allow you to break a statement into two lines:

Example 2a: JS Breaking a JavaScript Statement part 1

var x =
"Hello World!";

But, breaking a statement in the middle of a string will not work:

Example 2b: JS Breaking a JavaScript Statement part 2

var x = "Hello
World!";

You must use a "backslash" if you must break a statement in a string:

Example 2c: JS Breaking a JavaScript Statement part 3

var x = "Hello \
World!";

Breaking a Return Statement

• It is a default JavaScript behavior to close a statement automatically at the end of a line.
• Because of this, these two examples will return the same result:

Example 3a: JS Breaking a Return Statement part a

function myFunction(a) {
  var power = 10 
  return a * power
}

Example 3b: JS Breaking a Return Statement part b

function myFunction(a) {
  var power = 10;
  return a * power;
}

• JavaScript will also allow you to break a statement into two lines.
• Because of this, example 3c will also return the same result:

Example 3c: JS Breaking a Return Statement part c

function myFunction(a) {
  var
  power = 10; 
  return a * power;
}

But, what will happen if you break the return statement in two lines like this:

Example 3d: JS Breaking a Return Statement part d

function myFunction(a) {
  var
  power = 10; 
  return
  a * power;
}

• The function will return undefined!
• Why? Because JavaScript thought you meant:

Example 3e: JS Breaking a Return Statement part 3e

function myFunction(a) {
  var
  power = 10; 
  return;
  a * power;
}

Accessing Arrays with Named Indexes

• Many programming languages support arrays with named indexes.
• Arrays with named indexes are called associative arrays (or hashes).
• JavaScript does not support arrays with named indexes.
• In JavaScript, arrays use numbered indexes:

Example 4: JS Accessing Arrays with Named Indexes part 1

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;       // person.length will return 3
var y = person[0];           // person[0] will return "John"

• In JavaScript, objects use named indexes.
• If you use a named index, when accessing an array, JavaScript will redefine the array to a standard object.
• After the automatic redefinition, array methods and properties will produce undefined or incorrect results:

Example 5: JS Accessing Arrays with Named Indexes part 2

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;      // person.length will return 0
var y = person[0];          // person[0] will return undefined

Undefined is Not Null

• JavaScript objects, variables, properties, and methods can be undefined.
• In addition, empty JavaScript objects can have the value null.
• This can make it a little bit difficult to test if an object is empty.
• You can test if an object exists by testing if the type is undefined:

Example 6: JS Objects - Undefined is Not Null

if (typeof myObj === "undefined") 

But you cannot test if an object is null, because this will throw an error if the object is undefined:

Incorrect:

if (myObj === null)

• To solve this problem, you must test if an object is not null, and not undefined.
• But this can still throw an error:

Incorrect:

if (myObj !== null && typeof myObj !== "undefined")

Because of this, you must test for not undefined before you can test for not null:

Correct:

if (typeof myObj !== "undefined" && myObj !== null)

Try it yourself