Data Types in JavaScript




### **What is JavaScript?**

JavaScript is a scripting language that enables interactive web pages. It's commonly used to create dynamic content, control multimedia, and handle user interactions like clicks and form submissions. JavaScript is executed on the client's browser, allowing developers to build responsive and engaging websites.

### **Who created JavaScript?**

JavaScript was created by Brendan Eich in 1995 during his work at Netscape Communications. Initially named Mocha, it was later renamed JavaScript. The language was designed to enable dynamic and interactive elements within web browsers.

### **What are variables in JavaScript?**

Variables in JavaScript are used to store data that can be accessed and modified throughout the program. You can declare variables using `var`, `let`, or `const`. The `let` and `const` keywords are more modern and provide better scoping compared to `var`. For example, `let name = "John";` creates a variable that holds the value `"John"`.

### **What are operators in JavaScript?**

Operators in JavaScript are symbols used to perform operations on values and variables. These operations include arithmetic (`+`, `-`, `*`, `/`), comparison (`==`, `===`, `!=`), logical (`&&`, `||`, `!`), and assignment (`=`, `+=`, `-=`) operators. For example, `let x = 10 + 5;` uses the `+` operator to add two values together.

### **What are comments in JavaScript, and how do you write them?**

Comments in JavaScript are used to leave explanatory notes in the code. They are ignored by the JavaScript engine during execution and do not affect the program.

* **Single-line comment:**

   Use 

  `//`

   for a comment on one line.
  Example: 

  `// This is a single-line comment`
* **Multi-line comment:**

   Use 

  `/*`

   to start and 

  `*/`

   to end a multi-line comment.
  Example:


Basic Question of JavaScript

> **Interviewer :** Tell me all data types in JavaScript?

**You:** There are total **8 built** in data types in JavaScript.

1. string
2. number
3. boolean
4. null
5. undefined
6. object
7. symbol ( ES6 feature)
8. bigInt 

### typeof Operator

JavaScripts Provides typeof operator to check the value and its type

```jsx
var a;

typeof a; // undefined ( because there is no value in it)

a ='JS Snippets'
typeof a; // string

a=23;
typeof a; // number

a= undefined;
typeof a; // undefiend

a= true;
typeof a; // boolean

a= null;
typeof a; // object ( this is bug in JS, Google it to learn more about it)

a= {name:'Ashutosh'}
typeof a; // object
```


Where to practice JavaScript Questions 

E900: Where to ptactice javascript questions

Best video sources for JavaScript

E901: Best video sources for JavaScript

Polyfills are code snippets that fill the gap for older browsers to support modern web features.

More precisely, **a polyfill is a piece of code that enables older browsers to use modern web features.** Polyfills are often written in JavaScript but can also be implemented in other programming languages.

### How It Works?

1. A polyfill first checks if the browser supports a feature.
2. If the browser supports it, the polyfill does nothing.
3. If the browser doesn’t support it, the polyfill provides its own implementation.

Now, let's explore polyfills for some JavaScript features and learn how they work.

### Polyfill for `forEach`

```jsx
Array.prototype.myForEach=function(cb){
  console.log('this is', this)
  for(i=0;i<this.length;i++){
    cb(this[i],i,this)
  }
} 

const arr= [1,2,3,4,4,5]

arr.myForEach(function(item, index){
  console.log("Hey", index, item)
})

```

### Polyfill of Map

```jsx

Array.prototype.myMap=function(cb){
  const result=[] 
  for(i=0;i<this.length;i++){
   const val=  cb(this[i],i,this)
   result.push(val)
  }
  return result
}
const res =  arr.myMap(function(item){
  console.log("hey map", item)
  return item*2
})

console.log('res is',res)
```

### Polyfill of Filter

```jsx
const arr= [3,4,2,13,4,2]
Array.prototype.myFilter= function(cb){
    const result=[] 
  for(i=0;i<this.length;i++){
   const isTrue=  cb(this[i],i,this)
   isTrue ?   result.push(this[i]) : ''
  }

  return result
}

const filteredArr= arr.myFilter(item=>item%2==0)

console.log("filteredArr",filteredArr)

```

### Polyfill of reduce

```jsx
const arr= [3,4,2,13,4,2]
const res= arr.reduce((acc,curr)=>{
  return acc +curr
},0)

console.log("res",res) //43

Array.prototype.myReduce = function (cb, acc) {
  let result = 0 || acc;
  for (i = 0; i < this.length; i++) {
     result = result+  cb(this[i], i, this);
  }
  console.log("result",result)
  return result
};

const newReducedVal= arr.myReduce((acc, val)=>{
  return acc +val

},100)

console.log("newReducedVal",newReducedVal)  //143

```

### Polyfill for call

```jsx
const person = {
  name: "heyashu",
};
function printName(host) {
  console.log("this is ", this);
  console.log("Name of website is ", this.name, "Hosted on ", host);
}

const person2 = {
  name: "google",
};

 printName.call(person2, 'netlify')
  printName.call(person, 'aws')

Function.prototype.myCall = function (obj = {}, ...args) {
  console.log(">>>>", args);
  console.log("this is", this);
  if (typeof this !== "function") throw new Error("Not callable");
  console.log("Obj is", obj);
  obj.fn = this;
  console.log("Obj is", obj);
  obj.fn(...args);
};
printName.myCall(person, "aws");

```

### Polyfill for Apply

```jsx
Function.prototype.myApply = function (obj = {}, args) {
  if (typeof this !== "function") throw new Error("Not callable");
  if (!Array.isArray(args)) throw new Error("Arguments should be an array");
  obj.fn = this;
  obj.fn(...args);
  delete obj.fn;
};

printName.myApply(person, ['netlifyv3'])
```

### Polyfill for bind

```jsx
const newBindFn= printName.bind(person)

newBindFn('renerr')

Function.prototype.myBind = function (obj = {}, ...args1) {
  console.log("obj is", obj)
  if (typeof this !== "function") throw new Error("Not callable");
  obj.fn= this

  return function(...args2){
    obj.fn(...args1,...args2)
  }
  
};

const myNewBind= printName.myBind(person,'new host')

myNewBind("Test is test")
```

### Polyfill for Array flat

```jsx
const nestedArray= [1,2,3,4,[5,6,7],8]
console.log(nestedArray.flat(2))  //[ 1, 2, 3, 4, 5, 6, 7, 8]

//polyfill of flat

Array.prototype.myFlat= function(depth){
  if(!Array.isArray(this))
    throw new Error('Provide an array')

  let res= []
  this.forEach((el)=>{
    if(Array.isArray(el) && depth>0){
      res.push(...el.myFlat(depth-1))
    }else{
      res.push(el)
    }
  })
  console.log("res is ", res)
  return res
 
}

console.log(nestedArray.myFlat(1))
```

### Polyfill Promise.all

```jsx
//Promise.all takes an array of promises and returns a single promise. If any promise rejects, it returns the first rejected promise.
const p1 = new Promise((res, rej) => {
  setTimeout(() => {
    res("I am resolved p1");
  }, 2000);
});

const p2 = new Promise((res, rej) => {
  setTimeout(() => {
    rej("I am rej p2");
  }, 1000);
});

const p3 = new Promise((res, rej) => {
  setTimeout(() => {
    res("I am resolved p3");
  }, 3000);
});

Promise.all([p1, p2, p3])
  .then((res) => {
    console.log("Res is", res);
  })
  .catch((err) => {
    console.log("Err is", err);
  });

Promise.myAll = function (promiseArr) {
  let arr = [];
  let counter = 0;

  return new Promise((resolve, rej) => {
    promiseArr?.forEach((promise, index) => {
      promise
        .then((res) => {
          counter++;
          arr[index] = res;
          if (counter == promiseArr.length) {
            resolve(arr);
          }
        })
        .catch((err) => {
          rej(err);
        });
    });
  });
};

Promise.myAll([p1, p2, p3])
  .then((res) => {
    console.log("Res is", res);
  })
  .catch((err) => {
    console.log("Err is", err);
  });

```


Polyfills in JavaScript with Code

This is ES6 feature

### Spread Operator

The spread operator is used to expand elements of an iterable, such as an array, object, or string, into individual elements.

It is used for:

* Copying arrays
* Merging arrays and objects
* Passing arguments to functions

```jsx
let arr1= [1,2,3]
// copy an array
let arr2 =[...arr1]
// merge an array
let mergedArray=[...arr1,...arr2]
// same goes for object
let obj1={
  name:"heyashu",
  year: 2025

}
// copy an obj 
let newObj= {...obj1}

let obj2={
 city: 'Ayodhya'

}
// merge two objects
let mergedObj= {...obj1,...obj2}

function sum(a,b){
  console.log("a is ",a)
  console.log("b is ", b)
  console.log("Sum is ",a+b)
}

const numbers=[1,3]
// passing arguments 
sum(...numbers)

console.log(arr1)
console.log(arr2)
```

### Rest Operator

The rest operator is the opposite of the spread operator. While the spread operator expands values from an array, object, or iterable, the rest operator collects multiple values into a single data structure.

It is mainly used for receiving function arguments, array destructuring, and object destructuring.

```jsx
//Function Arguments
function sum(...args){
  console.log("arg are ", args) //[ 1, 2, 3, 4, 5, 5 ]
}

let arr= [1,2,3,4,5,5]
sum(arr)

// array Destructuring
let [a,b,c,...x] =arr

console.log(a,b,c,x) //1 2 3 [ 4, 5, 5 ]

// Object Destructuring 

let obj2={
  name:'heyashu',
 city: 'Ayodhya',
 year:2025

}

let {name, ...moreKeys }= obj2
console.log("name is ", name)  //heyashu
console.log("moreKeys",moreKeys) //{ city: 'Ayodhya', year: 2025 }
```


Revise JavaScript

Data Types in JavaScript

typeof Operator