Things to know about Javascript.

Types in Javascript

There are basically two types of Javascript. One is Primitive and the other is Reference. Let's talk about the Primitive type.

Primitive Types

Primitive types in JavaScript are:

  • numeric

Null is a special primitive type. If you run typeOf null you’ll get ‘object’ back, but it’s actually a primitive type. Everything that is not a primitive type is an object. Let's explain one by one

Numeric

For an explicit conversion just apply the number() function.

Implicit conversion is tricky because it’s triggered in more cases:

  • comparison operators (>, <, ≥,≤)
Number('123')   // explicit
+'123' // implicit
123 != '456' // implicit
4 > '5' // implicit
5/null // implicit
true | 0 // implicit

Here is how primitive values are converted to numbers:

Number(null)                   // 0
Number(undefined) // NaN
Number(true) // 1
Number(false) // 0
Number(" 12 ") // 12
Number("-12.34") // -12.34
Number("\n") // 0
Number(" 12s ") // NaN
Number(123) // 123

String

To explicitly convert values to a string applying the string() function. Implicit coercion is triggered by the binary + operator when any operand is a string:

String(123) // explicit
123 + '' // implicit

All primitive values are converted to strings naturally as you might expect:

String(123)                   // '123'
String(-12.3) // '-12.3'
String(null) // 'null'
String(undefined) // 'undefined'
String(true) // 'true'
String(false) // 'false'

Symbol conversion is a bit tricky, because it can only be converted explicitly, but not implicitly.

String(Symbol('my symbol'))   // 'Symbol(my symbol)'
'' + Symbol('my symbol') // TypeError is thrown

Boolean

To explicitly convert a value to a boolean apply the Boolean() function.
Implicit conversion happens in a logical context, or is triggered by logical operators ( || && !!).

Boolean(2)          // explicit
if (2) { ... } // implicit due to logical context
!!2 // implicit due to logical operator
2 || 'hello' // implicit due to logical operator
// returns number 123, instead of returning true
// 'hello' and 123 are still coerced to boolean internally to calculate the expression
let x = 'hello' && 123; // x === 123

As soon as there are only 2 possible results of boolean conversion: true or false, it’s just easier to remember the list of falsy values.

Boolean('')           // false
Boolean(0) // false
Boolean(-0) // false
Boolean(NaN) // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(false) // false

Any value that is not in the list is converted to true, including object, function, Arrays, Date, a user-defined type, and so on. Symbols are truthy values. Empty object and arrays are truthy values as well:

Boolean({})             // true
Boolean([]) // true
Boolean(Symbol()) // true
!!Symbol() // true
Boolean(function() {}) // true

Scope

Scope in JavaScript defines what variables you have access to. There are two kinds of scope — global scope and local scope.

Global scope

If a variable is declared outside curly braces ({}), it is said to be defined in the global scope.

const hello = 'Hello Earth'function sayHello () {
console.log(hello)
}
console.log(hello) // 'Hello Earth'
sayHello() // 'Hello Earth'

Local Scope

Variables that are usable only in a specific part of your code are considered to be in a local scope. These variables are also called local variables.

There are two kinds of local scope in Javascript: function scope and block scope.

Let’s talk about function scopes first.

Function scope

When you declare a variable in a function, you can access this variable only within the function. You can’t get this variable once you get out of it.

In the example below, the variable hello is in the sayHello scope:

function sayHello () {
const hello = 'Hello Reader!'
console.log(hello)
}sayHello() // 'Hello Reader!'
console.log(hello) // 'Error, hello is not defined'

Block scope

When you declare a variable with const or let within a curly brace ({}), you can access this variable only within that curly brace.

In the example below, you can see that hello is scoped to the curly brace:

{
const hello = 'Hello CSS-Tricks Reader!'
console.log(hello) // 'Hello CSS-Tricks Reader!'
}console.log(hello) // Error, hello is not defined

The block scope is a subset of a function scope since functions need to be declared with curly braces (unless you’re using arrow functions with an implicit return).

Function hoisting and scopes

Functions, when declared with a function declaration, are always hoisted to the top of the current scope. So, these two are equivalent:

// This is the same as the one below
sayHello()
function sayHello () {
console.log('Hello CSS-Tricks Reader!')
}// This is the same as the code above
function sayHello () {
console.log('Hello CSS-Tricks Reader!')
}
sayHello()

When declared with a function expression, functions are not hoisted to the top of the current scope.

sayHello() // Error, sayHello is not defined
const sayHello = function () {
console.log(aFunction)
}

Because of these two variations, function hoisting can potentially be confusing, and should not be used. Always declare your functions before you use them.

Closures

When you create a function inside another function, you have created a closure. The inner function is the closure. This closure is usually returned so you can use the outer function’s variables later.

function outerFunction () {
const outer = `outer variable!` function innerFunction() {
console.log(outer)
} return innerFunction
}outerFunction()() //'outer variable!'

When the inner function is returned, you can also shorten the code a little by writing a return to declaring the function.

function outerFunction () {
const outer = `outer variable!` return function innerFunction() {
console.log(outer)
}
}outerFunction()() // 'outer variable!'

Cross-browser testing

Cross-browser testing refers to testing in the application in multiple browsers like Internet Explorer, Chrome, Firefox, Edge to test our application/website effectively. Cross-browser testing involves comparing and analyzing the behavior of your website in different browser environments. It helps ensure that your website delivers an optimal user experience, independent of the browser used to access it.