Basic Concepts of JavaScript

Syntax Parsers

A program that reads your code and determines what it does and if it's grammar is valid. 

The code we written can not understand by the computer. So the code needed to be read character by character and convert it to the set of instructions that the computer can understand. To do that ,there is a compiler/ interpreter and Syntax Parser is part of it. 

Lexical Environment

Lexical environment is where something sits physically in the code we write. 

Lexical environment stores the variable defined in the function during the execution of that function.

Execution Context

Execution context is a wrapper to help manage the code that is running. There are lot of lexical environments and which one is currently running is managed via execution contexts. 

When ever we run the JavaScript code, it runs inside the execution context.

Name Value Pair

Name value pair is a name which maps to unique value. 

The name may be defined more than once, but only can have one value in a given context.

In below example, Name is "Address" and Value is "Main 100".

Address =  'Main 100'

Objects

Object is a collection of Name Value pairs. 

In below example, Address and Apartment are objects. 

Global Execution Context

Base execution context is the global execution context. When we say Global, it means the things where accessible in everywhere in our code. Global Execution creates two things which are Global Object and  special variable 'this'. 

eg : Inside the browser, the global object is 'window'. 

If there is any variables or functions which are not in the inside of the functions are attached to the global object (window). 

// Below code is not in the inside of the function. So that is global. 	
var a = 'Hello World';

function b(){  
}

Hoisting

Hoisting is setting up memory space for variables and functions. 

Before our code executing line by line, Java Script engine sets up the memory space for variables and functions created in entire code. So those functions and variables exists in the memory. When the code begins to execute line by line, it can access them. However when it comes to variables little bit different. When Java Script engine sets up the memory for a variable, it does not any assigned value for that.  That's why, it returns "undefined'.

See below Example. Even though, 'b' function call  is in top of the code, it will still executing not like other programming languages. And instead of error , 'a' is undefined. 

Undefined

When Java Scripts sets up the memory space for the variables or method,  automatically "undefined"  value will be set to them as the initial value . 

Single Threaded and Synchronous

Single threaded means one command one at a time. 

Synchronous means one line of code is executed at a time in the order it appears. 

Function Invocation

Function invocation means running a function. In Java Script we can use parenthesis '( )'.

Every time function is called a new execution context will be created. 

Variable Environment

Variable environment is the place where the variables lives and how they are related to each other.

When we have declare variable with the same name in different methods, it will be executed their own scope and in their own execution context. Even though they have same name , they are unique, distinct and they don't touch each other.  See the below example. 

Scope Chain

When a variable is used in JavaScript, the JavaScript engine will try to find the variable’s value in the current execution context. If it could not find the variable, it will look into the outer reference somewhere down below in the execution stack until it finds the variable or reaches global scope.  Outer Reference depends on where the function sits lexically. 

In below code, b() function physically sits inside a(). 

Scope

Scope in JavaScript refers to the accessibility or visibility of variables. That is, which parts of a program have access to the variable or where the variable is visible.

•  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.

•   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 a() {
  var greeting = 'Hello World!';
  console.log(greeting);
}

// Prints 'Hello World!'
a();

// Uncaught ReferenceError: greeting is not defined
console.log(greeting);

• Block Scope

ES6(ECMAScript 6) introduced let variable, 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:

function a() {
  var age = 100;
  if (age > 12){
    let dogYears = age * 7; //using let
    var noOfYears = age * 7; //using var
    console.log(`You are ${dogYears} dog years old!`);
  }
 
// Prints '700'
console.log(noOfYears);
    
// Uncaught Reference Error: dogYears is not defined
console.log(dogYears);
}

a();

References: Udemy.com