Javascript Notes

Table of Contents

Operators
Functions
Objects
Recursions

Operators,  producing Boolean (True, False) results

1. Equality (==)

== can be used to check whether two operands (i.e. values in a function) are equal, and Boolean results (i.e. True / False) will be produced.

Strings will be converted into numbers when compared with numbers.

2. Strict Equality (===)

=== compares two operands strictly, taking account of the different type of values, then produces Boolean results accordingly.

E.g. Strings are distinguished from numbers, hence "false" in results.

3. Inequality (!=) and Strict Inequality (!==)

Inequality operators compare whether two operands are distinguished (i.e. True) or not (i.e. False) by producing Boolean results.

Strict operators distinguish the types of operands as usual.

4. Greater than (>) and Smaller than (<)

5. Greater than or equal (>=) and Smaller than or equal (<=)

6. Logical AND (&&)

ALL criteria must be satisfied.
E.g. let x = 10; console.log(x > 8 && x < 15 && x < 11) will produce "True" results.

7. Logical OR (||)

EITHER criteria must be satisfied.
E.g. let x = 10; console.log(x > 8 || x > 15 || x > 11) will still produce "True" results.

Functions -  Order matters, as scripts are executed from top to bottom in order.

Examples of Application in HTML

<html>
 <body>
  <p>First Example: <span id="demo1"></span></p>
  <p>Second Example: <span id="demo2"></span></p>
  <p>Third Example: <span id="demo3"></span></p>
  <p>Chained if (Else-If) Example: <span id="demo4"></span></p>

 <script>
  let g = functionExample(2, 1, 3);
  document.getElementById("demo1").innerHTML = g;
  function functionExample(x, y, z) {
    return (x + y) * z ;
  }
 </script>

 <script>
  let y = [2, 2];
  let x = functionExample2(y[0], y[1]);
  document.getElementById("demo2").innerHTML = x;

  function functionExample2(a, b) {
    if (a == b) {
      return "Both values are equal or true because y = " + y;
      }
      return "Both values are not equal";
    }
 </script>

 <script>
  w = [2, "'2'"];
  z = functionExample3(w[0], w[1]);
  document.getElementById("demo3").innerHTML = z;

  function functionExample3(a, b) {
    if (a === b) {
      return "Both values are equal or true because w = " + w;
      } else {
        return "Both values are NOT equal because w = " + w;
        }
    }
 </script>

 <script>
  let num = 50;
  document.getElementById("demo4").innerHTML = functionExample4(num);

  function functionExample4(num) {
    if (num > 70) {
      return num + " is larger than 70";
      } else if (num >= 60) {
      return num + " is larger than or equal to 60";
      } else {
      return num + " is smaller than 60"
      }
    }
 </script>

 </body>
</html>


Results

First Example:

Second Example:

Third Example:

Chained if (Else-If) Example:

Objects

Example

const exampleObj = {
"property1": "eg1",
"property2": "eg2",
"property3": 3
};

console.log(exampleObj.property1);
//or
console.log(exampleObj["property2"]);

Results

eg1

eg2

Recursions

Example

function displayNumbersFromTo(startNum, endNum) {
 if(startNum > endNum) {
 return [];
 } else {

  const display = displayNumbersFromTo(startNum + 1, endNum);
  display.unshift(startNum);
  return display;
 }

};

console.log(displayNumbersFromTo(4, 20));

Results

[ 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ]

// If we replace .unshift() with .push(), the sequence will be reversed, i.e. [ 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4 ] .

//Detailed explanation at https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-recursion-to-create-a-countdown/305925/2.