Titbits of JavaScript

Truthy & Falsy: In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context.
A falsy value is a value that is considered false when encountered in a Boolean context.
All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN).

Type coercion vs Type conversion: Type coercion "implicitly" converts one data type to another. But in case of type conversion, it can either be implicit or explicit.

const value1 = '5';
const value2 = 9;
let sum = value1 + value2;

console.log(sum); 

In the above example, 9 which is a number value has been coerced into string by JavaScript. And it's done implicitly. We have no hand in that. The result of this operation is 59, which not a number but a string. So, if wanted to get the result what we expected then we need to convert the "value1" into a number first and then do the operation. Like so, sum = Number(value1) + value2;

== vs ===: When we are using (==) in JS, we are actually testing for loose equality. Another interesting thing happens here, which is type coercion.

77 === '77'
// false (Number v. String)

false == 0
// true

0 == ""
// true

"" == false
// true 

null == null
// true

undefined == undefined
// true

null == undefined
// true

NaN == null
// false

NaN == undefined
// false

NaN == NaN
// false
//NaN is not equivalent to anything. Cool fact: it’s not even itself!

When using triple equals === in JavaScript, we are testing for strict equality. This means both the type and the value we are comparing have to be the same.

5 === 5
// true

5 === 5
// true

77 === '77'
// false (Number v. String)

'cat' === 'dog'
// false (Both are Strings, but have different values)

false === 0
// false (Different type and different value)

Scope: It determines the accessibility of the variables.
In JavaScript there are three kinds of scope:

1. Global Scope: Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.

var carName = "Volvo";

// code here can use carName

function myFunction() {
  // code here can also use carName
}

1. Function/Local Scope: Variables declared Locally (inside a function) have Function Scope. Local variables can only be accessed from inside the function where they are declared.

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

1. Block Scope: Variables declared with the let or const keyword can have Block Scope. Variables declared inside a block {} cannot be accessed from outside the block.

{
  let x = 2;
}
// x can NOT be used here

Closure: Closure means that an inner function always has access to the variables and parameters of its outer function, even after the outer function has returned.

function OuterFunction() {
  var outerVariable = 100;

  function InnerFunction() {
    alert(outerVariable);
    }
    return InnerFunction;
}

var innerFunc = OuterFunction();
innerFunc(); // 100

In the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

Window: The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object: window.document.getElementById("header"); is same as document.getElementById("header");

this keyword: In a method, this refers to the owner object.

var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
person.fullName(); // John Doe

Alone, this refers to the global object. var x = this // [object Window]

In a function, this refers to the global object.

function myFunction() {
  return this;
}

myFuction() // [object Window]

In an event, this refers to the element that received the event.
<button onclick="this.style.display='none'">Click to Remove Me!</button>. Here this will refer to the button element.

setTimeOut: The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
setTimeout(function(){ alert("Hello"); }, 3000);.
Display an alert box after 3 seconds (3000 milliseconds).

setInterval: The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
setInterval(function(){ alert("Hello"); }, 3000);.
Alert "Hello" every 3 seconds (3000 milliseconds).

call method: The call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter).

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1);  // Will return "John Doe"

This example calls the fullName method of person, using it on person1.