Day 4
Truthy and Falsy values :
let x;
x = 1; // x is a number
x = ‘1’; // x is a string
x = [1]; // x is an array
Seemingly different values equate to true when compared with
== (loose or abstract equality) because JavaScript (effectively) converts each to a string representation before comparison:
// all true
1 == ‘1’;
1 == [1];
‘1’ == [1];
A more obvious false result occurs when comparing with === (strict equality) because the type is considered:
// all false
1 === ‘1’;
1 === [1];
‘1’ === [1];
Null Vs Undefined :
In JavaScript undefined is a type, whereas null an object. It means a variable declared, but no value has been assigned a value.
Whereas, null in JavaScript is an assignment value.
== vs ===
Double Equals (==) checks for value equality only. And triple
It will verify whether the variables being compared have both the same value AND the same type.
Types of Scope :
There are three types of scope in JavaScript — 1) Global Scope, 2) Function Scope, and, 3) Block Scope.
1. Global Scope
Any variable that’s not inside any function or block (a pair of curly braces), is inside the global scope. The variables in global scope can be accessed from anywhere in the program. For example:
var greeting = ‘Hello World!’;
function greet() {
console.log(greeting);
}
// Prints ‘Hello World!’
greet();
2. Local Scope or Function Scope
Variables declared inside a function is inside the local scope. They can only be accessed from within that function, that means they can’t be accessed from the outside code. For example:
function greet() {
var greeting = ‘Hello World!’;
console.log(greeting);
}
// Prints ‘Hello World!’
greet();
// Uncaught ReferenceError: greeting is not defined
console.log(greeting);
3. Block Scope
ES6 introduced let and const variables, unlike var variables, they can be scoped to the nearest pair of curly braces. That means, they can’t be accessed from outside that pair of curly braces. For example:
{
let greeting = ‘Hello World!’;
var lang = ‘English’;
console.log(greeting); // Prints ‘Hello World!’
}
// Prints ‘English’
console.log(lang);
// Uncaught ReferenceError: greeting is not defined
console.log(greeting);
We can see that var variables can be used outside the block, that is, var variables are not block scoped.
Nested Scope
Just like functions in JavaScript, a scope can be nested inside another scope. For example:
var name = ‘Peter’;
function greet() {
var greeting = ‘Hello’;
{
let lang = ‘English’;
console.log(`${lang}: ${greeting} ${name}`);
}
}
greet();
Here we have 3 scopes nested within each other. First, the block scope (created due to the let variable) is nested inside the local or function scope which is in turn nested inside the global scope.
Lexical Scope
Lexical Scope (also known as Static Scope) literally means that scope is determined at the lexing time (generally referred to as compiling) rather than at runtime. For example:
let number = 42;
function printNumber() {
console.log(number);
}
function log() {
let number = 54;
printNumber();
}
// Prints 42
log();
Here the console.log(number) will always print 42 no matter from where the function printNumber() is called. This is different from languages with the dynamic scope where the console.log(number) will print different value depending on from where the function printNumber() is called.
If the above code was written in a language that supports dynamic scoping, the console.log(number) would have printed 54 instead.
Using lexical scope we can determine the scope of the variable just by looking at the source code. Whereas in the case of dynamic scoping the scope can’t be determined until the code is executed.
Most of the programming languages support lexical or static scope such as C, C++, Java, JavaScript. Perl supports both static and dynamic scoping.
Scope Chain
When a variable is used in JavaScript, the JavaScript engine will try to find the variable’s value in the current scope. If it could not find the variable, it will look into the outer scope and will continue to do so until it finds the variable or reaches global scope.
If it’s still could not find the variable, it will either implicitly declare the variable in the global scope (if not in strict mode) or return an error.
For example:
let foo = ‘foo’;
function bar() {
let baz = ‘baz’;
// Prints ‘baz’
console.log(baz);
// Prints ‘foo’
console.log(foo);
number = 42;
console.log(number); // Prints 42
}
bar();
When the function bar() is executed, the JavaScript engine looks for the baz variable and finds it in the current scope. Next, it looks for foo variable in the current scope and it can’t find it there, so it looks for the variable in outer scope and finds it there (i.e global scope).
After that, we assign 42 to the number variable, so the JavaScript engine looks for the number variable in the current scope and after that in the outer scope.
If the script is not in strict mode, the engine will create a new variable named number and assign 42 to it or return an error (if not in strict mode).
So when a variable is used the engine will traverse the scope chain until it finds the variable.
Call( ):
The call() method invokes a function with a given ‘this’ value and arguments provided one by one. This means that we can call any function, and explicitly specify what ‘this’ should reference within the calling function.
Apply( ):
Invokes the function and allows you to pass in arguments as an array.
Bind():
returns a new function, allowing you to pass in an array and any number of arguments.
The window object :
The window object represents an open window in a browser.
If a document contain frames (<iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
DOM :
When you are about to develop a web application that involves high user interaction and view updates, like the new form builder on JotForm 4.0, you have to consider the possible performance issues. Although today’s javascript engines are fast enough to handle such complex applications, DOM manipulations are still not that fast. Updating DOM is usually the bottleneck when it comes to the web performance. React is trying to solve this problem by using something called virtual DOM; a DOM kept in memory. Any view changes are first reflected to virtual DOM, then an efficient diff algorithm compares the previous and current states of the virtual DOM and calculates the best way (minimum amount of updates needed) to apply these changes. Finally those updates are applied to the DOM to ensure minimum read/write time. This is the main reason behind React’s high performance.