JavaScript: Essentials & Interview Questions - Part 1

→ Part 2

We will try to cover essential JavaScript questions that are asked in interviews and also beneficial to understand core concepts of JavaScript, for becoming better developer.

( Note: Content taken from multiple resources i.e. w3school, mdn )

Article will be keep updating by time and will be introduced in multiple parts.

Introduction:

JavaScript is high level interpreted language, as it doesn’t need to be compile to be executed, as other languages .i.e C, Typescript.

Interpreted languages are translated upon execution.

1. Hoisting

Let first understand it by code

console.log(a); // undefined
var a = 10;
// Is executed by browser as below
var a; // declaration
console.log(a); // undefined
a = 10; // initialization 

Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript.

Only declarations are hoisted. JavaScript only hoists declarations, not initialization. If a variable is declared and initialized after using it, the value will be undefined.

If you declare the variable after it is used, but initialize it beforehand, it will return the value:

a = 10;
console.log(a);// 6
var a;

2. var, [ let, const ] ( introduced in es2015 or ES6 )

3. defer Attribute

The defer attribute is a boolean attribute. The defer attribute is only for external scripts (should only be used if the src attribute is present).

<script defer>

There are several ways an external script can be executed:

• If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
• If async is not present and defer is present: The script is executed when the page has finished parsing
• If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

4. Function declaration, expression, arrow & hoisting.

We will explore the multiple ways, we can declare a function and how hoisting works for function.

// 1. function declaration
function log(text){
   console.log(text);
}
// 2. function expression
const log = function(text) {
   console.log(text);
}
// 3. arrow function
const log = (text) => console.log(text);

In above examples, if you try to access function before declaration, you can call as it's hoisted by interpreter on execution.

log('hi');// hi
// 1. function declaration
function log(text){
   console.log(text);
}

Only declarations are hoisted. JavaScript only hoists declarations, not initialization.

But in case of function expression or arrow function you cannot call before declaration.

Error: Uncaught ReferenceError: Cannot access 'log' before initialization

log('some text');
let log = function(text) { console.log(text)};

Same for arrow function

Error: Uncaught ReferenceError: Cannot access ‘logName’ before initialization

logName('some text');
let logName = (name) => console.log(name);

5. Function parameters and defaults

With ES6 or es2015 introduces multiples features, one of them is default parameter. Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed

// 0. function name with parameter name with default
function name(text = 'Default text'){
   console.log(text);
}
// 1. No arguments passed 
name();// Default text
// 2. argument passed
name('Hi'); // Hi
function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5, 2));
// expected output: 10
console.log(multiply(5));
// expected output: 5

6. Function lexical scope and closures

Lexical scope

function prefix(pre){
   const prefix_ = pre;
   function name(name_){
   console.log(`Hello ${prefix_}.${name_}`);
  }
  function name('Narendra');
}
prefix('Mr'); // "Hello Mr.Narendra"

This is an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. The word “lexical” refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.

Closure

function prefix(pre){
   const prefix_ = pre;
   return function name(name_){
      return `Hello ${prefix_}.${name_}`;
   }
}
prefix('Mr')('Narendra'); // "Hello Mr.Narendra"

A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.

7. IIFE — Immediately-Invoked Function Expressions