Some important topics for JavaScript Interview.

P.C: ZUAN Education

As a part of my JavaScript job preparation,I made a note on below 10 important topics:

i)Hoisting

ii)Let Vs Const Vs Var

iii)Rest parameter

iv)Spread operator

v)Object Destructuring

vi)Array Destructuring

vii)Class-Like Structures in ECMAScript 5

viii)Classes as First-Class Citizens/Functions

ix)Computed Member Names

x)Inheritance with Derived Classes

Lets see in details —

1) Hoisting:

When we declare a var keyword anywhere to declare a variable, it acts as a global variable and that is called hoisting. For example if we declare a value variable inside an if block like as —

//hoisting
function getValue(condition) {
if (condition) {
var value = “blue”;
return value;
} else {
// value exists here with a value of undefined
}
// value exists here with a value of undefined
}

But it acts like as —

function getValue(condition) {
var value;
if (condition) {
value = “blue”;
// other code
return value;
} else {
return null;
}
}

2) Let Vs Const Vs Var:

i) var act as a global variable that can be reassign whenever want.

ii) Let can be accessible and also reassign in declarative scope.

iii) Const can’t reassign that’s why it should initialize during declaration otherwise it takes undefined value. It can accessable in declarative scope only.

3) Rest parameter:

By using rest parameters we can gather any number of arguments into an array and do what we want with them. Rest parameters should have to be the last argument, because it collects all remaining arguments into an array.

Here is an example —

function xyz(x, y, …z) {
console.log(x, ‘ ‘, y); // hey hello
console.log(z); // [“wassup”, “goodmorning”, “hi”, “howdy”]
console.log(z[0]); // wassup
console.log(z.length); // 4
}
xyz(“hey”, “hello”, “wassup”, “goodmorning”, “hi”, “howdy”)

4) Spread operator:

Spread operator does exactly the reverse of rest operator. That means it converts an array elements to individual variables. It has many uses. Some of are —

i) copy an array

ii) Create an array from characters in a string

iii) Add an array to the end of another array

iv) Find the smallest/largest number in an array

v) Merge objects

vi) Destructuring an object and so on.

Let’s illustrate first example —

const arr1 = [1,2,3,4];
const arr2 = […arr1];
console.log(arr2);

5) Object Destructuring:

Object destructuring takes individual object property values and assigning them to the variables. For example —

let node = {type: "Identifier",name: "foo"};
let { type, name } = node;
console.log(type);      // "Identifier"
console.log(name);      // "foo"

6) Array Destructuring:

Array destructuring syntax is very similar to object destructuring; it just uses array literal syntax instead of object literal syntax

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor);        // "red"
console.log(secondColor);       // "green"

7) Class-Like Structures in ECMAScript 5:

Before ECMAScript 6,JavaScript has no class, instead of create a custom type approach where creating a constructor and then assigningmethods to the constractors prototype like as —

function PersonType(name) {
this.name = name;
}
PersonType.prototype.sayName = function() {
console.log(this.name);
};
let person = new PersonType(“Nicholas”);
person.sayName(); // outputs “Nicholas”
console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // true

8) Classes as First-Class Citizens/Functions:

First-class citizen is called an approach where it can be used a class as a parameter of a function then returned from a function, and assigned to a variable. That allows classes to be used in a lot of different ways. For example, they can be passed into functions as arguments —

function createObject(classDef) {
return new classDef();
}
let obj = createObject(class {
sayHi() {
console.log(“Hi!”);
}
});
obj.sayHi(); // “Hi!”

In this example, the createObject() function is called with an anonymous class expression as an argument, creates an instance of that class with new, and returns the instance. The variable obj then stores the returned instance.

One more example –

let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}(“Nicholas”);
person.sayName(); // “Nicholas”

Here, creating singletons by immediately invoking the class constructor without leaving a class reference available for inspection.

9) Computed Member Names:

Class methods and accessor properties can also have computed names. Instead of using an identifier, use square brackets around an expression like as —

//for method
let methodName = “sayName”;
class PersonClass {
constructor(name) {
this.name = name;
}
[methodName]() {
console.log(this.name);
}
}
let me = new PersonClass(“Nicholas”);
me.sayName();
//for property
let propertyName = “html”;
class CustomHTMLElement {
constructor(element) {
this.element = element;
}
get [propertyName]() {
return this.element.innerHTML;
}
set [propertyName](value) {
this.element.innerHTML = value;
}
}

10) Inheritance with Derived Classes:

In JavaScript, each class can only be derived from other class. That class is called a superclass, or parent class. The subclass is called derived class or child class.

By using extends, it can be inherit all the properties and method except private properties.

Here is an example —

class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length);
}
}
var square = new Square(3);
console.log(square.getArea()); //9

So that’s all for today.Happy learning. Allah Hafiz