JavaScript Tricky Concept

Falsy Values

Falsy values are values that JavaScript’s built-in type coercion converts to false or in a Boolean context are considered false. In simple terms we could say, variables that do not have values or do not exist but it’s more than that. Below are a list of all falsy values

• false
• 0 Both positive and negative
• 0n BigInt, when used as a boolean, follows the same rule as a Number
• ''
• null
• undefined
• NaN

Truthy Values

Anything asides what’s mentioned above is truthy. Simply any variable with a value is truthy.
Below are some truthy values

• true
• {} An object (whether empty or not)
• [] An array (whether empty or not)
• 25 Numbers (whether positive or negative)
• 'true' Non empty strings
• 'false' Non empty strings
• new Date() Date object
• 12n BigInt, when used as a boolean, follows the same rule as a Number
• Infinity

Null

Null is used to represent an intentional absence of value. It represents a variable whose value is undefined. It accepts only one value, which is null. The Null keyword is used to define the Null type in TypeScript, but it is not useful because we can only assign a null value to it.

Example

1. //Variable declared and assigned to null
2. var a = null;
3. console.log( a ); //output: null
4. console.log( typeof(a) ); //output: object

Undefined

It represents uninitialized variables in TypeScript and JavaScript. It has only one value, which is undefined. The undefined keyword defines the undefined type in TypeScript, but it is not useful because we can only assign an undefined value to it.

Example

1. //Variable declaration without assigning any value to it
2. var a;
3. console.log(a); //undefined
4. console.log(typeof(a)); //undefined
5. console.log(undeclaredVar); //Uncaught ReferenceError: undeclaredVar is not defined

Difference between triple equals “===” and double equals “ ==” in JavaScript:

While these are both comparison equality operators, the triple equals, ===, is what’s called a strict equality operator while the double equals is an equality operator.

The strict equality operator will compare both the value and type of the operands (the values on the left/right sides of the operator). If the value is the same but the type is not, the equality will evaluate to false.
For example:
4 === "4" //will evaluate to 'false' as the left operand is of type 'number' while right operand is of type 'string'

However, the following code block, which uses the equality operator instead, will evaluate to true. This is because the operands of the equality operator will be converted to the same type (if they are not already) before the values of the operands are compared.
4 == "4" //will evaluate to 'true'

JavaScript Function Scope

In JavaScript there are two types of scope:

• Local scope
• Global scope

JavaScript has function scope: Each function creates a new scope.

Scope determines the accessibility (visibility) of these variables.

Variables defined inside a function are not accessible (visible) from outside the function.

Local JavaScript Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables have Function scope: They can only be accessed from within the function.

Example

// code here can NOT use carName

function myFunction() {
var carName = “Volvo”;

// code here CAN use carName

}

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Global JavaScript Variables

A variable declared outside a function becomes GLOBAL.

A global variable has the global scope: All scripts and functions on a web page can access it.

Example

var carName = “Volvo”;

// code here can use carName

function myFunction() {

// code here can also use carName

}

Closures

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Encapsulation in JavaScript

While this is no longer late breaking news, it bears repeating: JavaScript is a powerful object oriented language, capable of being used to build sophisticated applications on both the client and the server. However, the more sophisticated the implementation, the bigger our responsibility to create maintainable and flexible code. In this article, I demonstrate how to use one of the pillars of object oriented programming, “encapsulation,” to help achieve these goals.

Encapsulation includes the idea that the data of an object should not be directly exposed. Instead, callers that want to achieve a given result are coaxed into proper usage by invoking methods (rather than accessing the data directly).