exercise-2

Exercise 2 - Equality

You will learn about:

• Equality
• Truthy/falsy values

Required software and tools for this exercise

• Visual Studio Code
• Node.js

1.1 - Equality

📖 We often need to compare values when programming in JavaScript. JavaScript provides two types of value-comparison operations:

• Loose equality using == (also called "double equals")
• Strict equality using === (also called "triple equals")

These operators both takes one operand on the left and right side and returns a boolean.

1.1.1 - Loose equality

Consider the following code:

var a = 1;
var b = '1';

function areEqual(x, y) {
  return x == y;
}

if(areEqual(a, b)) {
  console.log('a and b are equal!');
} else {
  console.log('a and b are not equal :(');
}

❓ What do you think the output of this code will be?

📖 The answer is that it will print a and b are equal!. To understand this we need to look at the loose equality operator (==) does.

Before comparing the two values on each side of the operator, it looks at the data types.

💡 JavaScript has seven data types:

• Boolean (true, false)
• Null (null)
• Undefined (undefined)
• Number (3.14, 1)
• String ("Nerdschool rocks")
• Object ({a:1}, ["apples", "pears", "oranges"] )
• Symbol (New in ES2015, created via the Symbol() function)

❗ If the types are identical, for example a string and a string, the loose equality operator (==) just performs the equality comparison. However, if the types are _not identical, it converts both values to a common type before doing the equality comparison.

📖 In the code above, we compare a string and a number (1 and "1"). In this case the second operand ("1") is converted to a number (1). 1 equals 1, so the result is true.

This behaviour can have some some potentially unintended effects.

Let's pretend we are going to compare a number and a boolean:

var a = 0;
var b = false;

function areEqual(x, y) {
  return x == y;
}

if(areEqual(a, b)) {
  console.log('a and b are equal!');
} else {
  console.log('a and b are not equal :(');
}

❓ What do you think the output of this code will be?

✏️ Try typing it into the exercise-2.js file and run it in using Node.js.

✏️ Try setting a and b to the following and see what the output is. Does the result equal what you'd expect?

a	b
''	0
0	''
0	'0'
false	'false'
false	'0'
false	undefined
false	null
null	undefined
'\t\r\n'	0
[]	null

1.1.2 - Strict equality

📖 We can perform a strict equality comparison using ===. The strict equality operator has two conditions. In order to match, operands need to:

• be of the same type
• have the same value

✏️ Modify the areEqual function to use === unstead of ==.

❓ What do you think the output of this code will be after replacing the comparison operator?

✏️ Try running the code again using Node.js.

📖 Because we are trying to compare a number (0) and a boolean (false), the strict equality comparison returns false.

❗ Best practice: Always use strict equality instead of loose equality to prevent unintended behaviour

1.1.3 - Linting rules for equality

📖 To help you remember to use the correct way of testing for equality, we can set up ESLint to enforce strict mode using the eqeqeq rule.

✏️ Add the eqeqeq-rule to \exercise-2\.eslintrc.json. It should look like this:

{
    "rules": {
      "semi": "error",
      "brace-style": "error",
      "eqeqeq": "error"
    }
}

❗ Remember the trailing commas at the end of the third and fourth line above.

✏️ Open exercise-2.js and add the following code:

var x = 1;
var y = '0';
var areTheyEqual = x == y;

The linter should alert you that you have an error related to the eqeqeq rule in your code on line three.

✏️ Try fixing the code to get rid of the error.

2.1 - Truthy/falsy values

📖 From MDN: In JavaScript, a truthy value is a value that is considered true when evaluated in a Boolean context. All values are truthy unless they are defined as falsy.

In other words, truthy values are true-ish and falsy values are false-ish. This is one of the major gotchas in JavaScript.*

Consider the following code:

var x = false;
if (x) {
  console.log('Value is truthy');
}
else {
  console.log('Value is falsy');
}

✏️ Run the code above.
✏️ Set x to be the following values:

x
false
0
""
null
undefined
NaN

❓ Was the result as you expected? Take extra note of how 0 and "" is treated - these are often the source of equality checks gone bad.

💡 the if(x) boolean test is behind the scenes actually doing a loose equality comparison: ìf(x == true).

❗ Best practice: Use explicit null-or-undefined checks if you're checking if a variable has any value at all. Use if (x) { ... } truthy/falsy check if you know this is the behavior you need.

Exercise 2 best practices summary

In this exercise we learned:

• Always use strict equality instead of loose equality to prevent unintended behaviour
• Use explicit null-or-undefined checks if you're checking if a variable has any value at all. Use if (x) { ... } truthy/falsy check if you know this is the behavior you need.

Go to exercise 3 ==>