├── ArrayMethodspolyfills
├── README.md
├── concat.js
├── every.js
├── filter.js
├── find.js
├── findIndex.js
├── flat.js
├── map.js
├── reduce.js
├── reverse.js
├── slice.js
└── some.js
├── README.md
├── js-concepts
├── Execution context (JS basics-1).md
├── Functions
│ ├── arrowFunctions.md
│ ├── callbackFunctions.md
│ ├── functions-basics.md
│ └── functions-under the-hood.md
├── Hoisting
│ ├── HoistingInterviewQuestions.md
│ └── hoisting.md
├── Objects
│ ├── Object-basics.md
│ └── ObjectInterviewQues.md
├── block-scope-shadowing.md
├── closures.md
├── curryTransformation.md
├── let-const-var.md
├── memoize.md
├── polyfill-callapplybind.md
├── scope.md
└── undefined.md
└── machine-coding-problems
├── 2023
├── react-coding
│ └── calculator
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ │ └── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── components
│ │ ├── Keypad.js
│ │ └── Result.js
│ │ ├── constants
│ │ └── keybutton.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── reportWebVitals.js
│ │ └── setupTests.js
└── vanilla-js
│ ├── comment-widget
│ ├── index.html
│ ├── index.js
│ ├── sampleComment.json
│ └── styles.css
│ └── todo-app
│ ├── index.css
│ ├── index.html
│ └── index.js
├── Bootstrap-Components-using-React
└── toast-component
│ ├── .gitignore
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── components
│ ├── Button
│ │ └── Button.js
│ ├── Tabs
│ │ ├── Tabs.css
│ │ └── Tabs.js
│ └── Toast
│ │ ├── Toast.css
│ │ ├── Toast.js
│ │ └── constants.js
│ ├── index.css
│ └── index.js
├── ExpenseTracker
├── index.html
├── index.js
└── styles.css
├── Google-typeahead-suggestions
├── index.html
├── readme.md
└── src
│ ├── data.js
│ ├── index.js
│ ├── styles.css
│ └── utils.js
├── Qr-code-generator
├── README.md
├── img
│ └── qr-code.svg
├── index.html
├── index.js
└── styles.css
├── README.md
├── Rentomojo-assignment
└── index.html
├── Splitwise
├── README.md
├── index.html
├── index.js
└── styles.css
├── accordion
├── index.css
├── index.html
└── index.js
├── carousel
├── index.html
├── index.js
└── styles.css
├── day-calender
├── data
│ └── normalData.js
├── index.html
├── index.js
└── styles.css
├── infinite-scroll
├── index.html
├── index.js
└── styles.css
├── product-listing-page
├── data.js
├── index.css
├── index.html
└── index.js
├── star-rating
├── index.html
├── index.js
└── style.css
├── tabComponent
├── index.css
├── index.html
└── index.js
├── to-do-app-no-css
├── index.html
├── index.js
└── styles.css
└── to-do-app
├── README.md
├── index.html
├── index.js
└── styles.css
/ArrayMethodspolyfills/README.md:
--------------------------------------------------------------------------------
1 | # Array methods polyfills
2 |
3 | - [x] map
4 | - [x] filter
5 | - [x] reduce
6 | - [x] some
7 | - [x] find
8 | - [x] concat
9 | - [x] slice
10 | - [x] findIndex
11 | - [x] flat
12 | - [x] reverse
13 | - [ ] fill
14 | - [ ] splice
15 | - [ ] flatMap
16 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/concat.js:
--------------------------------------------------------------------------------
1 | const array1 = ["a", "b", "c", "e", "d"];
2 | const array2 = ["d", "e", "f"];
3 | const array4 = ["jena", "jen", "puja"];
4 |
5 | const array3 = array1.concat(array2, array4);
6 |
7 | // console.log(array3);
8 |
9 | //merging two arrays
10 | Array.prototype.myConcat = function (array2) {
11 | let output = [];
12 | for (let i = 0; i < this.length; i++) {
13 | output.push(this[i]);
14 | }
15 | for (let i = 0; i < array2.length; i++) {
16 | output.push(array2[i]);
17 | }
18 | return output;
19 | };
20 |
21 | const res = array1.concat(array2);
22 | // console.log(res);
23 |
24 | //merging N arrays
25 | Array.prototype.myConcat1 = function (...arrays) {
26 | let result = [];
27 | let len = result.length;
28 | for (let i = 0; i < this.length; i++) {
29 | result[len] = this[i];
30 | len++;
31 | }
32 | for (const arr of arrays) {
33 | if (Array.isArray(arr)) {
34 | for (let i = 0; i < arr.length; i++) {
35 | result[len] = arr[i];
36 | len++;
37 | }
38 | } else {
39 | result[len] = arr;
40 | len++;
41 | }
42 | }
43 | return result;
44 | };
45 |
46 | const res2 = array1.myConcat1(array2, array4);
47 | console.log(res2, "ans");
48 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/every.js:
--------------------------------------------------------------------------------
1 | const array1 = [1, 30, 39, 29, 10, 13];
2 |
3 | console.log(
4 | array1.every((element) => element < 40),
5 | "default"
6 | );
7 |
8 | Array.prototype.myEvery = function (cb) {
9 | for (let i = 0; i < this.length; i++) {
10 | if (!cb.call(undefined, this[i], i, this)) {
11 | return false;
12 | }
13 | }
14 | return true;
15 | };
16 |
17 | console.log(
18 | array1.myEvery((element) => element < 40),
19 | "polyfill"
20 | );
21 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/filter.js:
--------------------------------------------------------------------------------
1 | const words = [
2 | "spray",
3 | "limit",
4 | "elite",
5 | "exuberant",
6 | "destruction",
7 | "present",
8 | ];
9 |
10 | const result = words.filter((word) => word.length > 6);
11 | console.log(result, "original");
12 |
13 | Array.prototype.myFilter = function (cb) {
14 | let output = [];
15 | for (let i = 0; i < this.length; i++) {
16 | if (cb(this[i], i, this)) {
17 | output.push(this[i]);
18 | }
19 | }
20 | return output;
21 | };
22 |
23 | const res = words.myFilter((word) => word.length > 6);
24 | console.log(res, "polyfill");
25 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/find.js:
--------------------------------------------------------------------------------
1 | const array1 = [5, 12, 8, 130, 44];
2 |
3 | const found = array1.find((element) => element > 150);
4 |
5 | console.log(found, "default");
6 |
7 | Array.prototype.myFind = function (cb) {
8 | for (let i = 0; i < this.length; i++) {
9 | if (cb.call(undefined, this[i], i, this)) return this[i];
10 | }
11 | };
12 |
13 | const found1 = array1.find((element) => element > 150);
14 |
15 | console.log(found1, "polyfill");
16 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/findIndex.js:
--------------------------------------------------------------------------------
1 | const array1 = [5, 12, 8, 1, 130, 44];
2 |
3 | const isLargeNumber = (element) => element > 5;
4 |
5 | console.log(array1.findIndex(isLargeNumber));
6 |
7 | Array.prototype.myFindIndex = function (cb) {
8 | for (let i = 0; i < this.length; i++) {
9 | if (cb.call(undefined, this[i], i, this)) return i;
10 | }
11 | return -1;
12 | };
13 |
14 | console.log(array1.myFindIndex(isLargeNumber));
15 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/flat.js:
--------------------------------------------------------------------------------
1 | const arr1 = [0, 1, 2, [3, 4]];
2 |
3 | // console.log(arr1.flat());
4 | // Expected output: Array [0, 1, 2, 3, 4]
5 |
6 | const arr2 = [0, 1, 2, [[[3, 4]]]];
7 |
8 | // console.log(arr2.flat(2));
9 | // Expected output: Array [0, 1, 2, Array [3, 4]]
10 |
11 | Array.prototype.myFlat = function (depth) {
12 | let output = [];
13 | for (let i = 0; i < this.length; i++) {
14 | if (Array.isArray(this[i]) && depth > 0) {
15 | output.push(...this[i].myFlat(depth - 1));
16 | } else {
17 | output.push(this[i]);
18 | }
19 | }
20 | return output;
21 | };
22 |
23 | console.log(arr2.myFlat(2));
24 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/map.js:
--------------------------------------------------------------------------------
1 | const array1 = [1, 4, 9, 16];
2 |
3 | Array.prototype.myMap = function (cb) {
4 | let output = [];
5 | for (let i = 0; i < this.length; i++) {
6 | output.push(cb(this[i], i, this));
7 | }
8 | return output;
9 | };
10 |
11 | const map1 = array1.map((item) => item * 2);
12 | console.log(map1, "default");
13 | const map2 = array1.myMap((item) => item * 2);
14 | console.log(map2, "polyfill");
15 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/reduce.js:
--------------------------------------------------------------------------------
1 | const array1 = [1, 2, 3, 4];
2 | const initialValue = 0;
3 | const sumWithInitial = array1.reduce(
4 | (accumulator, currentValue) => accumulator + currentValue,
5 | initialValue
6 | );
7 |
8 | console.log(sumWithInitial, "default");
9 |
10 | Array.prototype.myReduce = function (cb, initialValue) {
11 | let accumulator = initialValue;
12 | for (let i = 0; i < this.length; i++) {
13 | accumulator = accumulator
14 | ? cb.call(undefined, accumulator, this[i])
15 | : this[i];
16 | }
17 | return accumulator;
18 | };
19 |
20 | const sumWithInitial1 = array1.reduce(
21 | (accumulator, currentValue) => accumulator + currentValue,
22 | initialValue
23 | );
24 |
25 | console.log(sumWithInitial1, "polyfill");
26 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/reverse.js:
--------------------------------------------------------------------------------
1 | //reverse changes the original array
2 |
3 | const array1 = ["one", "two", "three"];
4 | console.log("array1:", array1);
5 |
6 | const reversed = array1.reverse();
7 | console.log("reversed:", reversed);
8 |
9 | console.log("array1:", array1);
10 |
11 | Array.prototype.myReverse = function () {
12 | let left = 0;
13 | let right = this.length - 1;
14 | for (let i = 0; i < this.length; i++) {
15 | while (left < right) {
16 | let temp = this[left];
17 | this[left] = this[right];
18 | this[right] = temp;
19 | left++;
20 | right--;
21 | }
22 | }
23 | return this;
24 | };
25 |
26 | const arr2 = ["one", "two", "three", "four"];
27 | let arr3 = [1, 2, 3, 4];
28 | console.log(arr2.myReverse());
29 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/slice.js:
--------------------------------------------------------------------------------
1 | const animals = ["ant", "bison", "camel", "duck", "elephant"];
2 |
3 | Array.prototype.mySlice = function (start, end) {
4 | let result = [];
5 | let len = this.length;
6 | start = !start ? 0 : start >= 0 ? start : Math.max(start + len, 0);
7 | end = !end ? len : end >= 0 ? end : end + len;
8 |
9 | for (let i = start; i < end; i++) {
10 | result[result.length] = this[i];
11 | }
12 | return result;
13 | };
14 | console.log(animals.slice(2));
15 | console.log(animals.mySlice(2), "polyfill");
16 |
17 | console.log(animals.slice(2, 4));
18 | console.log(animals.mySlice(2, 4), "polyfill");
19 |
20 | console.log(animals.slice(-2));
21 | console.log(animals.mySlice(-2), "polyfill");
22 |
23 | console.log(animals.slice(2, -1));
24 | console.log(animals.mySlice(2, -1), "polyfill");
25 |
26 | console.log(animals.slice());
27 | console.log(animals.mySlice(), "polyfill");
28 |
--------------------------------------------------------------------------------
/ArrayMethodspolyfills/some.js:
--------------------------------------------------------------------------------
1 | const array = [1, 2, 3, 4, 5];
2 |
3 | console.log(
4 | array.some((el) => el % 2 == 0),
5 | "default"
6 | );
7 |
8 | Array.prototype.mySome = function (cb) {
9 | let res = false;
10 | for (let i = 0; i < this.length; i++) {
11 | if (cb(this[i])) {
12 | res = true;
13 | }
14 | }
15 | return res;
16 | };
17 |
18 | console.log(
19 | array.mySome((el) => el % 2 == 0),
20 | "polyfill"
21 | );
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Hi, I'm Pujarini! 👋
2 |
3 | ## 🚀 About Me
4 | I'm a frontend developer...
5 |
6 | I am preparing for my JS interviews and this is the documenting of my JS preparation.
7 |
8 | It will have interview questions and short notes.
9 |
10 | ### Support
11 |
12 | Give a ⭐️ to support it.
13 |
14 |
15 | ## Contents
16 |
17 | - [x] [Functions](https://github.com/Pujarini/JS-prep-101/blob/develop/functions.md)
18 | - [x] [Callback functions]()
19 | - [x] [Arrow functions]()
20 | - [x] Hoisting Interview Questions
21 | - [ ] [var, let and const]()
22 | - [ ] [Call, bind and apply]()
23 | - [x] [Execution context]()
24 | - [ ] More Coming soon...
25 |
26 |
27 | ## Resources
28 |
29 |
30 | | Topic | Resource |
31 | | ------------- | ------------- |
32 | | Spread Operator | [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) |
33 | | Rest Operator | [Rest Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) |
34 | | Function Concepts | [Function Concepts - Akshay Saini on YouTube ](https://www.youtube.com/watch?v=SHINoHxvTso) |
35 | | JavaScript.info - Functions | [JavaScript.info - Functions](https://javascript.info/function-basics) |
36 | | MDN - call Stack | [MDN - call Stack ](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack) |
37 | | MDN - Callback function | [MDN - Callback function ](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) |
38 | | JavaScript.info - Arrow functions | [JavaScript.info - Arrow functions](https://javascript.info/arrow-functions) |
39 | | Execution context | [Execution context](https://www.youtube.com/watch?v=iLWTnMzWtj4&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=3) |
40 | | Hoisting | [Hoisting](https://www.youtube.com/watch?v=Fnlnw8uY6jo) |
41 |
42 |
43 | ## 🔗 My Links
44 | [](https://pujarini-portfolio-v2.netlify.app/)
45 | [](https://www.linkedin.com/in/pujarini-jena/)
46 | [](https://twitter.com/pujarini_codeit)
47 |
48 | ## Authors
49 |
50 | - [@Pujarini jena](https://twitter.com/pujarini_codeit)
51 |
52 |
53 | ## Feedback
54 |
55 | If you have any feedback, please reach out to us at pujaj296@gmail.com
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/js-concepts/Execution context (JS basics-1).md:
--------------------------------------------------------------------------------
1 |
2 | # How does your JS code execute behind the scene?
3 |
4 | - Everything in JS happens inside a execution context.
5 |
6 | ### What is Execution context?
7 |
8 | Execution context has two components :
9 |
10 | 1. ```memory component (variable environment)``` which stores variables and functions in key-value pairs.
11 | 2. ```Code component(Thread of Execution)``` where code is executed line by line.
12 |
13 | ### JS is a synchronous single-threaded language
14 |
15 | ```Single-threaded``` : It can execute one command at a time
16 |
17 | ```Synchronous``` : It can execute one command at a time in a specific order.
18 |
19 | Moves to next line once the line executed before it.
20 |
21 |
22 | ### What happens when you run JS code?
23 |
24 | Things happen inside JS engine when JS code is executed.
25 |
26 | ```javascript
27 |
28 | var n=4;
29 | function square (num){
30 | var ans= num*num;
31 | return ans;
32 | }
33 | var square1 = square(n);
34 | var square 2 = square(4);
35 | ```
36 | ## Steps
37 |
38 |
39 | 1. ```Global execution context``` is created which has two components
40 |
41 | i. Memory component
42 |
43 | ii. Code component
44 |
45 | 2. Execution context is created in 2 phases
46 |
47 | i. Memory Creation phase
48 |
49 | ii. Code Execution phase
50 |
51 |
52 | ### Memory Creation phase
53 |
54 | JS skims through the whole program and allocates memory to JS variables and functions inside global space.
55 |
56 | So the above code in the memory component will look like
57 |
58 | ```
59 |
60 | n : undefined
61 |
62 | square : {...} whole function
63 |
64 | square1 : undefined
65 |
66 | square2 : undefined
67 |
68 | ```
69 |
70 | variables are assigned a special variable called "undefined"
71 | where as
72 |
73 | incase of function it stores the whole code inside the memory space.
74 |
75 | ### Code Execution phase
76 |
77 | In this phase code is executed line by line
78 |
79 | - 2 is assigned to n.
80 | - It will skip the function part and move to next line where function invocation takes place.
81 |
82 |
83 | What is function invocation?
84 |
85 | Function call with brackets having or not having arguments.
86 |
87 | Functions behave differently in JS. When a function is invoked a new execution context is created.
88 |
89 | Functions are heart of JS and they behave like mini programs
90 |
91 | So for square(n) a new execution context is created.
92 |
93 | It gets executed in 2 phases.
94 |
95 | 1. Memory Creation phase
96 |
97 | - Here memory is allocated to variables and functions in case square(n),
98 | `num` and `ans` will be assigned undefined.
99 |
100 | P.S. : `num` is a parameter and `ans` is a variable inside square().
101 |
102 | 2. Code execution phase
103 |
104 | - Each line is executed the value of `n` which is the argument of the function is passed to `num` which is a parameter of function.
105 |
106 | - `ans` is assigned num*num which is 4.
107 |
108 | - then we encounter return keyword which means that we have to return the control of the program where it was invoked.
109 |
110 | - square1 gets the value of ans which is 4.
111 |
112 | - The execution context gets deleted after the control is passed.
113 |
114 |
115 | P.S. : Same thing happens for square2.
116 |
117 | - square2 gets the value 16 which was earlier undefined.
118 |
119 | As soon as the JS is done with the work and program is executed The global execution context gets deleted.
120 |
121 |
122 |
123 | ### Call stack
124 |
125 | It is difficult for JS engine to manage the creation, deletion of execution context
126 |
127 | It manages a stack for all the operations of execution context.
128 |
129 | Initially when the global execution context is created we push it to the stack.
130 |
131 | When a new execution context is created inside global execution context we push it on top and when the work is done it gets deleted or pop out of the stack.
132 |
133 | This is how a code is executed inside a JS engine.
134 |
135 | ```Call stack maintains the order of execution of the execution context.```
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
--------------------------------------------------------------------------------
/js-concepts/Functions/arrowFunctions.md:
--------------------------------------------------------------------------------
1 | # How Arrow functions work?
2 |
3 | ## Arrow Functions
4 |
5 | ### Syntax :
6 |
7 | ```javascript
8 | let sum = (a, b) => a + b;
9 |
10 | ```
11 |
12 | - Arrow functions have no ```this```.
13 |
14 | - They take this from outer normal function.
15 |
16 |
17 | ```javascript
18 |
19 | let user = {
20 | firstName: "jen",
21 | sayHi() { //outer normal function
22 | let arrow = () => alert(this.firstName); // arrow function
23 | arrow();
24 | }
25 | };
26 | user.sayHi(); // jen
27 |
28 | ```
29 | Arrow function's outer normal function is sayHi() which has firstName.
30 |
31 | ```javascript
32 | let group = {
33 | title: "Our Group",
34 | students: ["John", "Pete", "Alice"],
35 |
36 | showList() {
37 | const that = this
38 | this.students.forEach(function(student) {
39 | console.log(that.title + ': ' + student); // Here "this" is undefined
40 | });
41 | }
42 | };
43 |
44 | group.showList();// : John. : Pete : Alice
45 | ```
46 | ### Fix using arrow function
47 |
48 | ```javascript
49 | let group = {
50 | title: "Our Group",
51 | students: ["John", "Pete", "Alice"],
52 |
53 | showList() {
54 | this.students.forEach(
55 | student => alert(this.title + ': ' + student)
56 | );
57 | }
58 | };
59 |
60 | group.showList(); // Our Group : John Our Group : Pete Our Group : Alice
61 |
62 | ```
63 |
64 | Here this.title in it is exactly the same as in the outer method showList
65 |
66 |
67 | ## No Arguments
68 |
69 | Arrow functions also have no arguments variable.
70 |
71 |
72 | #To be solved
73 |
74 | ```javascript
75 |
76 | const obj = {
77 | dev: 'bfe',
78 | a: function() {
79 | return this.dev // bfe
80 | },
81 | b() {
82 | return this.dev // bfe
83 | },
84 | c: () => {
85 | return this.dev //undefined since it is an arrow function
86 | },
87 | d: function() {
88 | return (() => {
89 | return this.dev // returns (return this.dev);
90 | })()
91 | // bfe
92 | },
93 | e: function() {
94 | return this.b() // bfe
95 | },
96 | f: function() {
97 | return this.b //undefined this will return b function and then the this inside b is window object
98 | },
99 | g: function() {
100 | return this.c() // undefined since c is an arrow function.
101 | },
102 | h: function() {
103 | return this.c // undefined since c is an arrow function
104 | },
105 | i: function() {
106 | return () => {
107 | return this.dev // bfe first call it will return arrow function and then second call will return bfe
108 | }
109 | }
110 | }
111 |
112 | console.log(obj.a())
113 | console.log(obj.b())
114 | console.log(obj.c())
115 | console.log(obj.d())
116 | console.log(obj.e())
117 | console.log(obj.f()())
118 | console.log(obj.g())
119 | console.log(obj.h()())
120 | console.log(obj.i()())
121 |
--------------------------------------------------------------------------------
/js-concepts/Functions/callbackFunctions.md:
--------------------------------------------------------------------------------
1 |
2 | # Callback functions
3 |
4 | A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
5 |
6 |
7 | - callbacks are often used to continue code execution after an asynchronous operation has completed — these are called ```asynchronous callbacks```.
8 |
9 | Example :
10 |
11 |
12 | ```javascript
13 | setTimeout(() => console.log("You called me after 2s"),2000);
14 | ```
15 |
16 |
17 | ```javascript
18 | button.addEventListener("click",()=> console.log("button clicked"));
19 | ```
20 |
21 | # What is Call Stack?
22 |
23 | - A call stack is a mechanism for an interpreter.
24 |
25 | - It keeps track of the its place in a script that calls multiple functions - like which is the function being currently executed and which functions are currently been called within other function.
26 |
27 | ### How does the call stack work?
28 |
29 | Let'see this through an example 👇🏻
30 |
31 | ```javascript
32 |
33 | setTimeout(()=>{
34 | console.log("Hi I am called after 5s")
35 | }, 5000);
36 |
37 | function x(){
38 | console.log("x called");
39 | y();
40 | }
41 |
42 | function y(){
43 | console.log("y called");
44 | }
45 |
46 | x(y);
47 |
48 | ```
49 |
50 | - setTimeout has a delay of 5s which means the callback function will get executed after 5s.
51 |
52 | - call stack has now function x and function y which gets gets executed and "x called" and "y called" are console logged.
53 |
54 | - After 5s expire the callback function of setTimeout gets pushed to callstack and gets executed which gives "Hi I am called after 5s"
55 |
56 | ```Call Stack is also called the main thread and JS has only one call stack.```
57 |
58 | Anything executing on a page is executed through call stack.
59 |
60 | # Closures with event Listeners
61 |
62 |
63 | ```javascript
64 | var count=0;
65 | document.getElementById("clickMe").addEventListener("click",()=>{
66 | console.log(`button was clicked ${++count} times`);
67 | })
68 | ```
69 | We are using global variables here inside callback functions which might not be a good idea. So we make a closure by putting this code inside a function.
70 |
71 | ```javascript
72 | function onClickListener(){
73 | var count=0;
74 | document.getElementById("clickMe").addEventListener("click",function xyz(){
75 | console.log(`button was clicked ${++count} times`);
76 | })
77 | onClickListener();
78 | }
79 |
80 | ```
81 |
82 | Here the ```xyz``` forms a closure with global scope and the local scope. So we have count value in check.
83 |
84 | # RemoveEventlisteners and Garbage collection
85 |
86 | Event listeners are heavy.Even though the call stack is empty the memory is not freed Since they form closures with the lexical scope.
87 | So we use removeEventlisteners to free up the space once is event handler is executed.
88 | the variables which formed closures get garbage collected once removeEventListeners is executed.
89 |
90 |
91 |
--------------------------------------------------------------------------------
/js-concepts/Functions/functions-basics.md:
--------------------------------------------------------------------------------
1 |
2 | ## Function statement
3 |
4 | create a function with keyword ```function``` and a name.
5 |
6 | ## Function expression
7 |
8 | functions that are assigned as values.
9 |
10 | ## Difference b/w function statement & function declaration
11 |
12 |
13 | ```javascript
14 | a(); // hello
15 | c(); //TypeError, c is not a function
16 |
17 | function a(){
18 | console.log("hello");
19 | }
20 |
21 | var c= function (){
22 | console.log("hello");
23 | }
24 | ```
25 | ## Anonymous function
26 | - functions with no name.
27 |
28 | - They are used as values to assign it to a variable like in function expression.
29 |
30 | ```javascript
31 | function (){}
32 |
33 | ```
34 | ## Named Function expressions
35 |
36 | functions expressions having a named function
37 |
38 | ```javascript
39 | let c = function abc(){
40 | console.log("c called");
41 | }
42 | c();// c called ✅
43 | ```
44 | Can we do ```abc()```?
45 |
46 | No!! It will throw ```ReferenceError```.
47 | Why? Since xyz is not defined in outerscope. It is inside defined in the local scope of c.
48 | So xyz will be a ```local variable```.👇🏼
49 |
50 | ## Local variable
51 | A variable declared inside a function is only visible inside that function.
52 |
53 | ## Parameters and arguments
54 |
55 | - data passed to functions are called Parameters.
56 | - They are local variables in the function scope.
57 |
58 |
59 | ```
60 | function abc(param1, param2){
61 | console.log(param1, param2)
62 | }
63 | ```
64 | ### Arguments
65 |
66 | values passed to the functions are called Arguments.
67 |
68 | ````abc(4,5);````
69 |
70 |
71 | ### First class functions / First class citizens
72 |
73 | The ability of functions to be used as values in called first class functions.
74 |
75 | How? 👇🏼
76 |
77 | - They can be passed as arguments.
78 |
79 | ```javascript
80 | let b = function (param1){
81 | console.log(param1); /* ƒ xyz(){
82 | console.log("xyz called")*/
83 | }
84 |
85 | }
86 | function xyz(){
87 | console.log("xyz called")
88 | }
89 | b(xyz);
90 | ```
91 |
92 | - They can be returned as a function from another function.
93 |
94 | ```javascript
95 | let b = function (param1){
96 | return param1(); // xyz called
97 | }
98 | }
99 | function xyz(){
100 | console.log("xyz called")
101 | }
102 | b(xyz);
103 | ```
104 |
105 | ## Hoisting in functions
106 |
107 | - Functions are hoisted completely in JavaScript.
108 | - The whole function is put in global scope.
109 |
110 |
111 |
112 | For example 👇🏼
113 |
114 | ```javascript
115 |
116 | xyz()
117 |
118 | function xyz(){
119 | console.log("hi 👋"); //hi 👋
120 | }
121 | ```
122 |
123 | ## Function scope
124 |
125 | variables declared inside a function can be referenced within that function which is known as function scope.
126 |
127 | ```javascript
128 | function xyz(){
129 | console.log(x); // undefined
130 | var x=6;
131 | console.log("xyz called"); // xyz called
132 | }
133 |
134 | xyz();
135 | ```
136 |
137 | Q2
138 | ```javascript
139 | var x=21;
140 | function xyz(){
141 | console.log(x); // undefined ; since x is not defined in local scope of the function
142 | var x=6;
143 | console.log("xyz called"); // xyz called
144 | }
145 | xyz();
146 |
147 | ```
148 |
149 | ### spread v/s rest Parameters
150 |
151 | Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element.
152 |
153 | Let's see that in action 👇🏼
154 |
155 | ```javascript
156 | function xyz(x,y){
157 | return x+y;
158 | }
159 | xyz(...[4,5]); // spread parameters
160 |
161 | ```
162 |
163 | ```javascript
164 | function xyz(name,...roles){ // rest parameters
165 | return `${name} works as ${roles[0]} `
166 | }
167 | xyz("pujarini", "developer","nobody","😎"); //pujarini works as developer
168 |
169 | ```
170 |
171 | with rest and spread parameters both
172 |
173 | ```javascript
174 | function xyz(name,...roles){ // rest parameters
175 | return `${name} works as ${roles[0]} `//pujarini works as developer
176 | }
177 | xyz(...["pujarini", "developer","nobody","😎"]); //spread parameters
178 | ```
179 |
180 | ```javascript
181 | const fn = (a,...numbers,x,y){
182 | console.log(x,y); //SyntaxError: Rest parameter must be last formal parameter
183 | }
184 | fn(5,6,8,9);
185 | ```
186 | So technically the rest parameter or spread parameters should the last parameters of the parameter list.
187 |
188 |
189 |
190 |
--------------------------------------------------------------------------------
/js-concepts/Functions/functions-under the-hood.md:
--------------------------------------------------------------------------------
1 | # How functions work behind the scenes?
2 |
3 | ```javascript
4 | var x=5;
5 | a();
6 | console.log(x)
7 |
8 | function a(){
9 | var x=10;
10 | console.log(x);
11 | }
12 | Output:
13 | 10
14 | 5
15 | ```
16 |
17 | ## How does function invocation and variable environment work?
18 |
19 | How this program works behind the scene line by line?
20 |
21 | Steps :
22 |
23 | - A global execution context is created when JS engine executes a program
24 |
25 | 1. GEC has 2 components :
26 |
27 | - memory component (also known as variable environment) and code component
28 |
29 | 2. Initally when the program is NOT executed the memory is allocated
30 |
31 | So in the memory component x is ```undefined``` and ```function a``` has the function code.
32 |
33 | 3. When the program is executed at step first line
34 |
35 | ```x is assigned a value of 5 ==> x:5``` in the code component.
36 |
37 | 4. Then we encounter a function invocation of a();
38 |
39 | in this case, a local execution context is created with 2 components again
40 |
41 | - memory component
42 | - code component
43 |
44 | - Memory component has x as ```undefined``` in the initial state and
45 |
46 | - then we execute var x=10 in the code component and then we execute ```console.log(x)```.
47 |
48 | 5. Now when we encounter the last line in the function and executed the local execution context gets deleted and the control goes back to the global execution context where function invocation takes place.
49 |
50 | 6. Then ```console.log(x)``` is executed which prints the value of x in the available local context which is ```x= 5```
51 |
52 | ## Call stack working
53 |
54 | - Global execution context is pushed to the call stack when the program starts executing.
55 |
56 | - When a function invocation is encountered a local global execution context is created and then pushed on top of GEC.
57 |
58 | - Once the function is executed fully then the local execution context is popped out of the call stack.
59 |
60 | - After the program is executed fully then GEC gets popped out of the call stack.
61 |
62 |
--------------------------------------------------------------------------------
/js-concepts/Hoisting/HoistingInterviewQuestions.md:
--------------------------------------------------------------------------------
1 | ## Hoisting Interview questions
2 |
3 | ### Q1
4 |
5 | ```javascript
6 | const a = 1;
7 | console.log(a); //1
8 |
9 | var b;
10 | console.log(b); //undefined
11 | b = 2;
12 |
13 | console.log(c); //undefined
14 | var c = 3;
15 |
16 | console.log(d); // ReferenceError
17 | let d = 2;
18 | ```
19 |
20 | ### Q2
21 |
22 | ```javascript
23 | const func1 = () => console.log(1);
24 |
25 | func1(); //1
26 |
27 | func2(); // 2
28 |
29 | function func2() {
30 | console.log(2);
31 | }
32 |
33 | func3(); // TypeError: c3 is not a function
34 |
35 | var func3 = function func4() {
36 | console.log(3);
37 | };
38 | ```
39 |
40 | ### Q3
41 |
42 | ```javascript
43 | function func() {
44 | const a = (b = c = 1);
45 | }
46 | func();
47 | console.log(typeof a, typeof b, typeof c); //undefined number number
48 | ```
49 |
50 | ### Q4
51 |
52 | ```javascript
53 | var a = 1;
54 |
55 | function func() {
56 | a = 2;
57 | console.log(a); //2
58 | var a;
59 | }
60 |
61 | func();
62 |
63 | console.log(a);
64 | 1;
65 |
66 | if (!("b" in window)) {
67 | var b = 1;
68 | }
69 |
70 | console.log(b); // undefined
71 | ```
72 |
73 | ### Q5
74 |
75 | ```javascript
76 | let foo = 10;
77 | function func1() {
78 | console.log(foo); // undefined
79 | var foo = 1;
80 | }
81 | func1();
82 |
83 | function func2() {
84 | console.log(foo); //ReferenceError
85 | let foo = 1;
86 | }
87 | func2();
88 | ```
89 |
90 | ### Q6
91 |
92 | ```javascript
93 |
94 | ### All are IIFE functions
95 |
96 | (() => {
97 | // fn is hoisted hence the fn is undefined and !undefined is true.
98 | if (!fn) {
99 | function fn() {
100 | console.log("2"); // 2
101 | }
102 | }
103 | fn();
104 | })();
105 |
106 | function fn() {
107 | console.log("1");
108 | }
109 |
110 | function fn1() {
111 | console.log("3");
112 | }
113 |
114 | (() => {
115 | // fn1 is hoisted hence the fn is undefined and !undefined is true.
116 | if (!fn1) {
117 | function fn1() {
118 | console.log("4"); //4
119 | }
120 | }
121 | fn1();
122 | })()
123 |
124 | (() => {
125 | // this won't executed and hence there will be no fn3
126 | if (false) {
127 | function fn3() {
128 | console.log("5");
129 | }
130 | }
131 | fn3(); // TypeError
132 | })();
133 | ```
134 |
135 | ### Q7
136 |
137 | ```javascript
138 | var foo = 1;
139 | (function () {
140 | console.log(foo); //undefined
141 | foo = 2;
142 | console.log(window.foo); //1
143 | console.log(foo); //2
144 | var foo = 3;
145 | console.log(foo); //3
146 | console.log(window.foo); //1
147 | })();
148 | ```
149 |
150 | ### Q8
151 |
152 | ```javascript
153 | var a = 1;
154 | function a() {}
155 |
156 | console.log(typeof a); //Number
157 |
158 | var b;
159 | function b() {}
160 | b = 1;
161 |
162 | console.log(typeof b); // Number
163 |
164 | function c() {}
165 | var c = 1;
166 |
167 | console.log(typeof c); //Number
168 |
169 | var d = 1;
170 |
171 | (function () {
172 | d = "2";
173 | console.log(typeof d); // String
174 | function d() {}
175 | })();
176 |
177 | console.log(typeof d); //Number
178 |
179 | var e = 1;
180 | const f = function e() {};
181 |
182 | console.log(typeof e); // Number
183 | ```
184 |
--------------------------------------------------------------------------------
/js-concepts/Hoisting/hoisting.md:
--------------------------------------------------------------------------------
1 |
2 | # Hoisting
3 |
4 | Hoisting is a phenomenon where you access the variables or functions even before ```initialization```.
5 |
6 | ```javascript
7 |
8 | console.log(x);
9 | getName();
10 |
11 | var x=7;
12 | function getName(){
13 | console.log("print me");
14 | }
15 | ```
16 |
17 | Let's see what will be the ouput
18 |
19 | - x will print ```undefined```
20 | - getName () will ```print me```
21 |
22 | How?
23 | Execution context
24 | The execution context gets created in 2 phases
25 | 1. Memory creation
26 | 2. Code execution
27 |
28 | In memory creation undefined is assigned to the variables and functions are assigned the whole code of functions.
29 |
30 | Example :
31 |
32 | ```javascript
33 | console.log(x);
34 | getName();
35 |
36 | var x=7;
37 | //arrow function
38 | const getName = () => {
39 | console.log("print me");
40 | }
41 | ```
42 |
43 | Here the ouput will be :
44 |
45 | undefined
46 |
47 | ReferenceError : getName is not defined
48 |
49 | Why ReferenceError?
50 | - Because here ```getName``` is a variable which is being called as function.
51 |
52 | ```javascript
53 | console.log(x);
54 | console.log(getName);
55 |
56 | var x=7;
57 | //arrow function
58 | function getName(){
59 | console.log("print me");
60 | }
61 | ```
62 | This will print :
63 | undefined
64 | function getName(){
65 | console.log("print me");
66 | }
67 |
68 | Why? Because in the memory execution phase whole function is stored in the memory space.
--------------------------------------------------------------------------------
/js-concepts/Objects/Object-basics.md:
--------------------------------------------------------------------------------
1 |
2 | # Objects
3 |
4 |
5 | ## Object basics
6 |
7 | What are Objects?
8 |
9 | Objects are used to store key collections of various data and complex entities.
10 |
11 | - Object propety ---> key (only string) : value (anything)
12 |
13 | ### Creation of Objects
14 |
15 | 1. let user = new Object(); // "object constructor" syntax
16 | 2. let user = {}; "object literal" syntax
17 |
18 |
19 | ### Accessing an object
20 |
21 | We can access a property value using
22 | 1. dot (.) notation.
23 | 2. Square [] brackets. (in case of multiword key)
24 |
25 |
26 |
27 | ```javascript
28 | const user = {
29 | "name":"Jen",
30 | "age":25,
31 | "hobbies todo": "play"
32 | }
33 |
34 | console.log(user.name); // Jen
35 | console.log(user.age);// 25
36 |
37 | console.log(user.["hobbies todo"]);// play
38 |
39 | ```
40 |
41 | ### Delete an object property
42 |
43 | ```delete user.age;```
44 |
45 |
46 | ### Property naming limitation
47 |
48 |
49 |
50 | A variable cannot have a name equal to one of the language-reserved words
51 |
52 | But for an object property, there’s no such restriction
53 |
54 | ```javascript
55 | let obj = {
56 | for: 1,
57 | let: 2,
58 | return: 3
59 | };
60 |
61 | alert( obj.for + obj.let + obj.return ); //6
62 | ```
63 |
64 | ⭐️ Gotcha
65 |
66 | - there is a special property called __proto__ attached. to every object.
67 |
68 | - We can't set a non-object value to __proto__.
69 |
70 | ### Check a property existance in an object
71 |
72 | ```javascript
73 | let user = { name: "Jen", age: 23 };
74 | console.log("name" in user); // Jen
75 | ```
76 |
77 | ### Iteration through Objects
78 |
79 | We can use ```for..in``` to iterate through objects.
80 |
81 | ```javascript
82 |
83 | let user = {
84 | name: "Jen",
85 | age: 20,
86 | isAdmin: false
87 | };
88 |
89 | user.todo = "play"
90 |
91 | for (let key in user) {
92 | console.log( key ); // name, age, isAdmin
93 | // values for the keys
94 | console.log( user[key] ); // John, 20, false, play
95 | }
96 | ```
97 | - they are printed in the order of creation of object properties.
98 |
99 |
100 | Q. check the properties of an object are empty or not using a function
101 | ```isEmpty(user)```
102 |
103 | ```javascript
104 |
105 | function isEmpty(obj){
106 | for(key in obj){
107 | return false
108 | } return true;
109 | }
110 |
111 |
112 | ```
113 |
--------------------------------------------------------------------------------
/js-concepts/Objects/ObjectInterviewQues.md:
--------------------------------------------------------------------------------
1 |
2 | # Objects Interview questions
3 |
4 | Q1
5 |
6 | ```javascript
7 | const user = {
8 | name:"puja",
9 | age:25
10 | }
11 |
12 | console.log(user.name); //puja
13 | delete user.age;
14 | console.log(user); // {"name":"puja"}
15 |
16 | ```
17 |
18 | Q2
19 |
20 | ```javascript
21 | const func = (function (a){
22 | delete a;
23 | return a;
24 | })(5);
25 |
26 | console.log(func); // 5 because delete works on an object property so nothing will get deleted
27 |
28 | ```
29 |
30 | Q3
31 |
32 | Dynamically adding property to the object
33 |
34 | ```javascript
35 | const property = "firstName";
36 | const name = "Jen";
37 |
38 | const user = {
39 | [property]: name
40 | };
41 |
42 | console.log(user); // {firstName: 'Jen'}
43 |
44 | ```
45 |
46 | Q4
47 |
48 | Print the key- values pairs of an object.
49 |
50 | ```javascript
51 | const user = {
52 | name:"Puja",
53 | age: 25
54 | }
55 |
56 | for(key in user){
57 | console.log(`${key} - ${user[key]} `); // name - Puja age - 25
58 | }
59 |
60 | ```
61 |
62 | Q5
63 |
64 | Print the key- values pairs of an object.
65 |
66 | ```javascript
67 |
68 | const obj = {
69 | b: "po"
70 | a:"one",
71 | b: "two",
72 | }
73 | console.log(obj); // {b : 'two' , a: 'one'}
74 |
75 | why ? Two key with same name will have the last value as it's current value
76 |
77 | ```
78 |
79 | Q6
80 |
81 | ```javascript
82 | const a ={};
83 | const b= {key :"b"};
84 | const c = {key : "c"};
85 |
86 | a[b]= 123;
87 | a[c]= 256;
88 |
89 | console.log(a[b]); //256
90 |
91 | ```
92 |
93 | why?
94 |
95 | when we assign a[b] = 123 it gets assigned as a["object Object"]= 123 again when we assign
96 | a[c]=256 it is a["object Object"]= 256;
97 |
98 | hence a[b]= 256
99 |
100 |
101 | Q7 difference b/w JSON.parse v/s JSON.stringify
102 |
103 | - JSON is a general format to represent values and objects.
104 |
105 | - ```JSON.stringify``` is used to to convert objects into JSON.
106 |
107 | - ```JSON.parse``` to convert JSON back into an object.
108 |
109 | ### JSON.stringify
110 |
111 | ```javascript
112 |
113 | let student = {
114 | name: 'Jen',
115 | age: 20,
116 | isAdmin: false,
117 | courses: ['js', 'react'],
118 | spouse: null
119 | };
120 |
121 | console.log(JSON.stringify(student)); '{"name":"Jen","age":20,"isAdmin":false,"courses":["js","react"],"spouse":null}'
122 | ```
123 |
124 | In the output if you see
125 |
126 | - ```name:'Jen'``` --> ```name:"Jen"``` see double quotes in case of string no single quotes or backticks
127 | - ```age: 20``` --> ```"age":20``` number is a number in JSON
128 | - ```isAdmin: false``` --> ```"isAdmin":false``` no change
129 | - ```courses: ['js', 'react']``` --> ```"courses": ["js", "react"]``` array items are in double quotes
130 |
131 | Some properties are rejected by ```JSON.stringify```
132 |
133 | - Function properties (methods).
134 | - Symbolic keys and values.
135 | - Properties that store undefined.
136 |
137 |
138 | ```javascript
139 | let user = {
140 | sayHi() { // ignored
141 | alert("Hello");
142 | },
143 | [Symbol("id")]: 123, // ignored
144 | something: undefined // ignored
145 | };
146 |
147 | console.log(JSON.stringify(user)); // '{}'
148 | ```
149 |
150 | ## Nested objects using JSON.stringify
151 |
152 | ```javascript
153 | let user = {
154 | name:"jen",
155 | school:{
156 | city:"Delhi",
157 | name: "DPS"
158 | }
159 | };
160 |
161 | console.log(JSON.stringify(user)); // '{"name":"jen","school":{"city":"Delhi","name":"DPS"}}
162 | ```
163 |
164 | limitation : circular structure cannot be converted to JSON
165 | example :
166 |
167 | ```javascript
168 | let room = {
169 | number: 23
170 | };
171 |
172 | let meetup = {
173 | title: "Conference",
174 | participants: ["john", "ann"]
175 | };
176 |
177 | meetup.place = room; // meetup references room
178 | room.occupiedBy = meetup; // room references meetup
179 |
180 | JSON.stringify(meetup); // ERROR
181 | ```
182 |
183 | ### JSON.parse
184 |
185 |
186 | ```javascript
187 | let numbers = "[0,2,5]";
188 | console.log(JSON.parse(numbers)); // [0,2,5]
189 |
190 | ```
191 |
192 | Q7
193 |
194 | ```javascript
195 | console.log([..."hello"]); // ['h', 'e', 'l', 'l', 'o']
196 |
197 | ```
198 |
199 | Q8
200 |
201 | ```javascript
202 |
203 | const user = {name : "Po", age: 20};
204 | const admin = {admin : true, ...user};
205 |
206 | console.log(admin); // {admin: true, name: 'Po', age: 20}
207 | ```
208 |
209 | Q9
210 |
211 | ```javascript
212 |
213 | const user = {name : "Po", age: 20, admin: false};
214 |
215 | console.log(JSON.stringify(user,["age","admin"])); // {"age":20,"admin":false}
216 |
217 | ```
218 |
219 | why?
220 |
221 | The syntax for ```JSON.stringify``` is below and we added replacer which says to stringify only the properties that are mentioned in the replacer.
222 |
223 | ```let json = JSON.stringify(value[, replacer, space])```
224 |
225 |
226 |
227 | Q10
228 |
229 | ```javascript
230 | const user = {
231 | name : "Po",
232 | age: 25,
233 | displayAge(){
234 | return this.age;
235 | }
236 | displayName : () => this.name;
237 | }
238 |
239 | console.log(user.displayAge()); // 25
240 | console.log(user.displayName()); // won't display because it points to window object
241 | ```
242 |
243 | Q11
244 |
245 | ```javascript
246 | let user = {
247 | name : "Po",
248 | age: 25,
249 | fullName : {
250 | name:"PO1",
251 | last : "lotus"
252 | }
253 | }
254 |
255 | const name = "Pi";
256 |
257 | const {fullName: {name : fname}}= user;
258 | console.log(fname); // PO1
259 |
260 | const {name: firstName} = user;
261 | console.log(firstName); // Po
262 | console.log(name); // Pi
263 | ```
264 |
265 | Q12
266 |
267 | rest parameter will be there in the last of the arguments.
268 |
269 | ```javascript
270 | function getItems(fruitList,favouriteList, ...args){
271 | return [...fruitList,...args,favouriteList]
272 | }
273 |
274 | console.log(getItems(["🍎 ","🍊"],"🍐"," 🍌 ","🍅 ")); // ['🍎 ', '🍊', ' 🍌 ', '🍅 ', '🍐']
275 | ```
276 |
277 | Q13
278 |
279 | ## Object Referencing
280 |
281 | ```javascript
282 | let c = {greeting : "hey"}
283 | let d= c;
284 | c.greeting = "Bye";
285 | console.log(d.greeting); //Bye
286 | ```
287 |
288 | Q14
289 |
290 | ## Object Referencing
291 |
292 | ```javascript
293 | console.log({a:1} == {a:1}); // false
294 | console.log({a:1} === {a:1}); // false
295 | ```
296 |
297 | They point to differentr object in memory space hence they are not equal
298 |
299 |
300 | Q15
301 |
302 | ## Object Referencing
303 |
304 | ```javascript
305 | let person ={name : "lia"},
306 | const members = [person];
307 | person = null;
308 |
309 | console.log(members);// {name : "lia"}
310 | ```
311 |
312 | Q16
313 |
314 | ## Object Referencing
315 |
316 | ```javascript
317 |
318 | const value={number :10};
319 |
320 | const multiply = (x={...value})=>{
321 | console.log(x.number*=2);
322 | }
323 | multiply(); //20 x => {number:10}
324 | multiply(); //20 x => {number:10}
325 | multiply(value); //20 x => {number:10}
326 | multiply(value);//40 x => {number:20}
327 | ```
328 |
329 | Q17
330 |
331 | ## Object Referencing
332 |
333 | ```javascript
334 |
335 | function changeAgeAndReference(person){
336 | person.age = 30;
337 | person = {
338 | name : "Po",
339 | age :40
340 | }
341 | return person;
342 | }
343 |
344 | const personObj1={
345 | name: "Heli",
346 | age: 20
347 | }
348 |
349 | const personObj2= changeAgeAndReference(personObj1);
350 |
351 | console.log(personObj1); //{name: 'Heli', age: 30}
352 |
353 | console.log(personObj2); // {name: 'Po', age: 40} Here the reference to the whole object is changed than what is passed as an argument to the function
354 | ```
355 |
356 | Q18 Difference b/w shallow copy v/s deep copy.
357 |
358 | - A variable assigned an object stores the reference to the object not the object itself.
359 |
360 | - when we copy an object we copy the reference to the object. Meaning the same door has two keys now to be accessed.
361 |
362 | ### Comparison
363 |
364 | ```javascript
365 | const a={};
366 |
367 | const b=a;
368 |
369 | console.log(a == b); // true variable reference to same object.
370 | console.log(a === b); // true
371 |
372 | const c= {};
373 | const d = {};
374 |
375 | console.log(c == d); //false ; independent object though look alike different references
376 | console.log( c===d); // false
377 |
378 | ```
379 |
380 | ### Gotcha
381 |
382 | - const objects can be modified
383 |
384 | ```javascript
385 | const user = {
386 | user : "puja",
387 | age:20
388 | }
389 |
390 | user.age =10;
391 |
392 | console.log(user); //{user: 'puja', age: 10}
393 |
394 | ```
395 |
396 | ### How to duplicate an object?
397 |
398 | ```javaScript
399 | const user = {
400 | user : "puja",
401 | age:20
402 | }
403 |
404 | const clone= {};
405 |
406 | for(key in user){
407 | clone[key]= user[key];
408 | }
409 | console.log(clone);
410 |
411 | clone.age = 80;
412 |
413 | console.log(clone); // {user: 'puja', age: 80}
414 | console.log(user); //{user: 'puja', age: 20} // no effect on the original object
415 |
416 | ```
417 |
418 | ```Object.assign``` is used to clone an object
419 |
420 | We can merge many objects into one object.
421 |
422 | ```javascript
423 | let user = { name: "John" };
424 |
425 | let permissions1 = { canView: true };
426 | let permissions2 = { canEdit: true };
427 |
428 | Object.assign(user, permissions1, permissions2); //user = { name: "John", canView: true, canEdit: true }
429 | ```
430 | - Object properties get overwritten if having same name.
431 |
432 | ```javascript
433 | let user = { name: "John" };
434 |
435 | Object.assign(user, { name: "Pete" });
436 |
437 | console.log(user.name); // {name:"Pete"}
438 | ```
439 |
440 | ### Deep copy (Nested Objects)
441 |
442 | ```javascript
443 | let user = {
444 | name: "John",
445 | sizes: {
446 | height: 182,
447 | width: 50
448 | }
449 | };
450 |
451 | let clone = structuredClone(user);
452 | let clone1 = Object.assign({}, user);
453 |
454 | console.log( user.sizes === clone.sizes );// false
455 | console.log(clone1.sizes === user.sizes);
456 |
457 |
458 |
459 | ```
460 | In case of an object having object inside we need to copy the whole object as well.
461 |
462 | The call structuredClone(object) clones the object with all nested properties.
463 |
464 | Q19 three ways to clone an object
465 |
466 | - Object.assign
467 |
468 | ```javascript
469 | const user = {
470 | name: "Puja",
471 | age:55
472 | }
473 | const clone = Object.assign({},user);
474 | console.log(clone); // it won't change user
475 | ```
476 |
477 | - using JSON.parse(JSON.stringify(obj))
478 |
479 |
480 | ```javascript
481 | const user = {
482 | name: "Puja",
483 | age:55
484 | }
485 | const clone = JSON.parse(JSON.stringify(user));
486 | console.log(clone); // it won't change user
487 | ```
488 |
489 | - using spread operator
490 |
491 | ```
492 | const clone = {...user};
493 | console.log(clone);
494 | ```
495 |
--------------------------------------------------------------------------------
/js-concepts/block-scope-shadowing.md:
--------------------------------------------------------------------------------
1 | # block scope and shadowing
2 |
3 |
4 | ### What is a block?
5 |
6 | block (compound statement) is defined as the code within curly braces
7 | - They are used to combine a lot of JS statement into a group.
8 |
9 | - we use a block in a place where JS expects single statement
10 |
11 | ### What is a block-scope?
12 |
13 | - the variables and function which are accessible inside the block.
14 |
15 | - let and const are considered block-scope since they are initialised in different scope.
16 |
17 | - you can't access let and const declared in a block outside the block but you can acces var outside the variable.
18 |
19 |
20 | ```javascript
21 | {
22 | let a=90;
23 | const b=70;
24 | var c=60;
25 | console.log(a); //90
26 | console.log(b); //70
27 | console.log(c); //60
28 | }
29 |
30 | console.log(a); // Reference Error --> it will stop here
31 | console.log(b);
32 | console.log(c);
33 | ```
34 |
35 | ### What is shadowing?
36 |
37 | shadowing occurs when the let and const variables are declared with same name in different scope.
38 |
39 | ```javascript
40 |
41 | const c=90;
42 | let b=80;
43 | var a=100
44 | {
45 | const c=100;
46 | let b=800;
47 | var a=1000;
48 | console.log(c);//100
49 | console.log(b);//800
50 | console.log(a);//1000
51 | }
52 | console.log(c);//90
53 | console.log(b);//80
54 | console.log(a);//1000
55 | ```
56 | the var variable gets shadowed as var is in global scope where as in case let and const outside the block are in scipt scope instead of global and inside the block are in block scope.
57 |
58 | ### Illegal shadowing
59 |
60 | we cannot shadow a let variable with var variable.
61 |
62 | ```javascript
63 | let b=90;
64 | {
65 | var b=90;
66 | console.log(b);
67 | }
68 | console.log(b); //SyntaxError: Identifier 'b' has already been declared
69 | ```
70 |
71 | - no variable should cross the boundary of it's limits.
72 |
73 | example in the above example var is crossing limit by breaking the rule of redeclaration is invalid in let.
74 | but var is function-scoped
75 |
76 | ```javascript
77 | let b=90;
78 | function x(){
79 | var b=90;
80 | console.log(b);//90
81 | }
82 | x();
83 | console.log(b); //90
84 | ```
85 |
86 | - block-scope also follows lexical scope.
87 |
88 | - Every block has its own lexical scope
89 |
90 |
91 | ```javascript
92 | let b=90;
93 | {
94 | let b=900;
95 | {
96 | let b=9000;
97 | console.log(b); //9000
98 | }
99 | console.log(b);//900
100 | }
101 | console.log(b); //90
102 | ```
103 |
104 | - arrow and normal functions have same scope.
105 |
--------------------------------------------------------------------------------
/js-concepts/closures.md:
--------------------------------------------------------------------------------
1 | # Closures
2 |
3 | A closure is a combination of function bundled together with it's lexical environment.
4 |
5 | ```javascript
6 |
7 | function x(){
8 | var a=10;
9 | function y(){
10 | console.log(a);
11 | }
12 | y();
13 | }
14 | x();
15 |
16 | ```
17 |
18 | In the above example function y forms a closure with the lexical parent and hence it prints the value of a as 10.
19 |
20 | or say,
21 |
22 | - y is bundled together with the reference to variables of x and can access it's parent lexical scope
23 |
24 | ```javascript
25 | function x(){
26 | var a=10;
27 | function y(){
28 | console.log(a);
29 | }
30 | return y;
31 | }
32 | var z=x();
33 | z(); //10
34 |
35 | ```
36 |
37 | - Functions maintain their lexical scope when returned from a function so here z() will give a output of 10.
38 |
39 | They remember where they are actually present.
40 |
41 | - At return y a closure was returned instead of only function y.
42 |
43 |
44 | ```javascript
45 | function x(){
46 | var a=10;
47 | function y(){
48 | console.log(a);
49 | }
50 | a=90;
51 | return y;
52 | }
53 | var z=x();
54 | z(); //100
55 |
56 | ```
57 |
58 | Here , we see that the output is 100 because function y forms a closure with the reference to variables of it's lexical parent.
59 |
60 | So here a is poiniting to reference to a. So when we modify the value of a it takes the current value of a and prints 100.
61 |
62 |
63 | ```javascript
64 |
65 | function z(){
66 | var b=90;
67 | function x(){
68 | var a=10;
69 | function y(){
70 | console.log(a,b); ---?
71 | }
72 | y();
73 | }
74 | x();
75 | }
76 | z();
77 | ```
78 | function y forms a closure with x and x forms a closure with z so it prints 10 and 90 respectively.
79 |
80 | so y forms a closure with it's parent and with parent of parent.
81 |
82 | ### Uses of Closures
83 |
84 | - module design pattern
85 | - setTimeout
86 | - currying
87 | - memoize
88 | - Iterators
89 |
90 |
91 | ### Interview Questions
92 |
93 | ## Q1
94 |
95 | ```javascript
96 | function x(){
97 | var i=1;
98 | setTimeout(()=>{
99 | console.log(i);
100 | },2000);
101 | console.log("hello");
102 | }
103 | x();
104 | hello
105 | 1 (after 2000 ms)
106 | ```
107 | JS will print what comes in call stack first so it prints hello and after 2s it will print 1.
108 |
109 | setTimeout callback has the reference to a and it stores the reference with itself.
110 |
111 |
112 | ## Q2 Print 1-5 after 2 seconds. (Asked in ShareChat)
113 |
114 | ```javascript
115 | function x(){
116 | for(let i=1;i < 6;i++){
117 | setTimeout(()=>{
118 | console.log(i);
119 | },2000);
120 | }
121 | }
122 | x();
123 |
124 | 1
125 | 2
126 | 3
127 | 4
128 | 5
129 |
130 | ```
131 | So here let is used which is block scoped so the callback creates closure with a new variable everytime and hence we get all the values of i.
132 |
133 | ## Q3 Give the output of the following questions
134 |
135 | ```javascript
136 | function x(){
137 | for(var i=1;i < 6;i++){
138 | setTimeout(()=>{
139 | console.log(i);
140 | },2000);
141 | }
142 | }
143 | x();
144 |
145 | 6
146 | 6
147 | 6
148 | 6
149 | 6
150 | ```
151 |
152 | So here the callback is creating closure with the reference of i 5 times so after the timer expires the value of i is already 6 so it prints 6 (5 times)
153 |
154 | ## Q4 Resolve the issue in above code without using let
155 |
156 | - We need to create a closure since we know it is poiniting to the reference of i.
157 |
158 | ```javascript
159 | function x(){
160 | for(var i=1;i<6;i++){
161 | function p(x){
162 | setTimeout(()=>{
163 | console.log(x);
164 | },x*1000);
165 | }
166 | p(i)
167 | }
168 | }
169 | x();
170 |
171 | 1
172 | 2
173 | 3
174 | 4
175 | 5
176 | ```
177 | So here we enclosed the setTimeout with another function by passing the value of i into function call. Every function call is different value of i hence it prints 1 2 3 4 5.
178 |
179 | ## Q5 Find the output of the below code snippet.
180 |
181 | ```javascript
182 | function outer(){
183 | let a=10;
184 | function inner(){
185 | console.log(a);
186 | }
187 | a=90;
188 | return i;
189 | }
190 | outer()(); //90
191 | ```
192 | Here inner function creates a closure with the parent function's reference to variable and so when the value of the reference changes we get 90 as output.
193 |
194 |
195 | ## Q6 Find the output of the below code snippet.
196 |
197 | ```javascript
198 |
199 | function helloFunc(){
200 | let c = 900;
201 | function outer(b){
202 | let a = 10;
203 | function inner(){
204 | console.log(a,b,c);
205 | }
206 | a = 90;
207 | return inner;
208 | }
209 | return outer;
210 | }
211 |
212 | helloFunc()("hello"); //10 hello 900
213 | ```
214 | Here inner function creates a closure with the parent function's reference to variable and so when the value of the reference changes we get 90 as output.
215 |
216 |
217 | ## Q7 Find the output of the below code snippet.
218 |
219 | ```javascript
220 |
221 | function helloFunc(){
222 | let c = 900;
223 | function outer(b){
224 | function inner(){
225 | console.log(a,b,c);
226 | }
227 | return inner;
228 | }
229 | return outer;
230 | }
231 | let a = 100;
232 | helloFunc()("hello")(); //100 hello 900
233 | ```
234 |
235 | Since it finds reference to a in the parent's parent's parent so it prints a as 100
236 |
237 | - it tries to resolve the value in the scope chain
238 |
239 |
240 | ## Q8 Find the output of the below code snippet.
241 |
242 | ```javascript
243 | function counter(){
244 | let count=0;
245 | return function incrementCount(){
246 | count++;
247 | console.log(count);
248 | }
249 | }
250 | let count1=counter();
251 | count1(); //1
252 | count1();//2
253 |
254 | ```
255 |
256 | ## Q9 Disadvantages of closure
257 |
258 | - overconsumption of memory meaning the variables are not garbage collected until a program expires.
259 | - memory leak.
260 |
261 | ## Q10 Garbage collector
262 |
263 | It is a program in JS engine which frees up unused memory when it is not utilised.
264 |
265 | ## Q11 Relation between garbage collector and closure
266 |
267 | ```javascript
268 | function x(){
269 | var a=10,b=30; //here b will be garbage collected since it is not being used currently
270 | return function(){
271 | console.log(a);
272 | }
273 | }
274 | x()();
275 | ```
276 |
277 |
--------------------------------------------------------------------------------
/js-concepts/curryTransformation.md:
--------------------------------------------------------------------------------
1 | ### How to implement currying to a normal function ?
2 |
3 |
4 | Transforming sum(1,2,3) ---> sum(1)(2)(3)
5 |
6 |
7 | ```javascript
8 |
9 | function curry(fn){
10 | return function curried(...args){
11 | if(args.length >= fn.length){
12 | return fn.apply(this,args)
13 | }else{
14 | return function(...args2){
15 | return curried.apply(this,args.concat(args2))
16 | }
17 | }
18 | }
19 | }
20 |
21 |
22 | const sum =(a,b,c)=> a+b+c;
23 |
24 | const curried = curry(sum);
25 |
26 | console.log(curried(1)(2)(3)); //6
27 |
28 | ```
29 |
30 |
--------------------------------------------------------------------------------
/js-concepts/let-const-var.md:
--------------------------------------------------------------------------------
1 | # let , const and var
2 |
3 | - let and const are hoisted too but different than var meaning they are in temporal dead zone for the time being.
4 |
5 | - let and const are stored in memory space other than global execution context.
6 |
7 | ### What is Temporal dead zone?
8 |
9 | - It is the time between the variable is hoisted and it is initialised with a value.
10 |
11 | - If we try to access inside temporal dead zone we get reference error.
12 |
13 | ```javascript
14 |
15 |
16 | console.log(a); // Reference Error: cannot a before initialization
17 | let a=90;
18 |
19 | ```
20 |
21 | We can access any var variable on window object but cannot access any let and const variable in window.
22 |
23 | ### Syntax error
24 |
25 | - If we try to declare let variable again then we get a Syntax error
26 |
27 | ```javascript
28 | let a=90;
29 | let a=100; //SyntaxError: Identifier 'a' has already been declared
30 | ```
31 |
32 | - where as in case of var we can redeclare and reinitialise
33 |
34 | ```javascript
35 | var a=90;
36 | var a=100; //SyntaxError: Identifier 'a' has already been declared
37 | ```
38 |
39 | - In case of const it works similar than let but more strict than let
40 |
41 |
42 | ```javascript
43 | console.log(a)
44 | const a=90; // ReferenceError: a is not defined
45 | ```
46 |
47 | - const can not be declared once and initialised next time it should be done at the same time
48 |
49 | ```javascript
50 | console.log(a);
51 | const a;
52 | a=90; //SyntaxError: Missing initializer in const declaration
53 | ```
54 |
55 | - you cannot reassign a const variable
56 |
57 | ```javascript
58 | const a=90;
59 | a=50; // TypeError: Assignment to constant variable.
60 | ```
61 |
62 | ### SyntaxError, TypeError, ReferenceError
63 |
64 | TypeError : occured when const was initialised with a new value.
65 |
66 | SyntaxError : When const was not initialised with a value
67 |
68 | ReferenceError : When we try to access a variable which is not present in the lexical environment.
69 |
70 | ### How to avoid Temporal dead zone?
71 |
72 | We can avoid temporal dead zone by declaring and initializing at the top of the code.
73 |
74 |
--------------------------------------------------------------------------------
/js-concepts/memoize.md:
--------------------------------------------------------------------------------
1 | ### How to memoize a function?
2 |
3 |
4 | ```javascript
5 |
6 | function myMemoize (fn,context){
7 | const resCache={};
8 | return function (...args){
9 |
10 | var res = JSON.stringify(args);
11 |
12 | if(!resCache[res]){
13 | console.log("calculating")
14 | resCache[res] = fn.call(context || this, ...args);
15 | }
16 | console.log("from cache");
17 | return resCache[res];
18 | }
19 | }
20 |
21 |
22 | const add =(a,b)=> a+b;
23 |
24 | const memoize = myMemoize(add);
25 |
26 | console.log(memoize(9,10));
27 | console.log(memoize(9,10));
28 |
29 | ```
30 |
31 |
--------------------------------------------------------------------------------
/js-concepts/polyfill-callapplybind.md:
--------------------------------------------------------------------------------
1 | ### Polyfill for call,apply and bind
2 |
3 |
4 | ## Polyfill for Call
5 |
6 | - call takes a context and arguments
7 |
8 | ```javascript
9 |
10 | Function.prototype.myCall=function(cxt={},...args){
11 | if(typeof this !== "function")
12 | throw new Error("Not called on a function")
13 |
14 |
15 | cxt.fn = this;
16 | cxt.fn(...args);
17 | }
18 |
19 | ```
20 |
21 | ## Polyfill for Apply
22 |
23 | - call takes a context and arguments as an arraylist
24 |
25 | ```javascript
26 |
27 | Function.prototype.myApply=function(cxt={},args){
28 | if(typeof this !== "function")
29 | throw new Error("Not called on a function");
30 |
31 | if(!Array.isArray(args))
32 | throw new Error("args are not arrayList");
33 |
34 |
35 | cxt.fn = this;
36 | cxt.fn(...args);
37 |
38 | }
39 |
40 | ```
41 |
42 |
43 | ## Polyfill for Bind
44 |
45 | - Bind returns a function and takes a context and arguments
46 |
47 | ```javascript
48 |
49 | Function.prototype.myBind1=function(cxt={},...args){
50 | if(typeof this !== "function")
51 | throw new Error("Not called on a function");
52 | cxt.fn = this;
53 | return function(...args2){
54 | return cxt.fn(...args,...args2);
55 | }
56 | }
57 |
58 |
59 | ```
60 |
--------------------------------------------------------------------------------
/js-concepts/scope.md:
--------------------------------------------------------------------------------
1 |
2 | # Scope in JavaScript
3 |
4 | - Scope is related to lexical environment
5 | - Scope means where you can access a specific variable or function in code.
6 | - When a execution context is created a lexical environment is also created.
7 |
8 | # lexical environment = local memory space + referencd to lexical environment of parent
9 |
10 | What is lexical --> means hierarchy or in order
11 |
12 | # Scope Chain
13 |
14 | It is chain of lexical environment along with references to the parent lexical environment.
15 |
16 | - If a variable is not found in the scope chain then the variable is not present in the scope chain.
17 |
18 | Let's see an example
19 |
20 |
21 | ```javascript
22 | function a(){
23 | var b=100;
24 | c();
25 | function c(){
26 | console.log(b); ---1?
27 | }
28 | }
29 | a();
30 | console.log(b); --- 2?
31 | ```
32 |
33 | let's start from c.
34 |
35 | - c has lexical environment of local memory and a (parent of c).
36 | - a has lexical environment of local memory and global execution context (parent of a).
37 | - GEC has lexical environment of null which means end of scope chain.
38 |
39 | so when c is invoked it looks for b in the lexical environment of c.
40 |
41 | When it doesn't find c in it's lexical environment it looks for b in the lexical environment of it's parent i.e. a.
42 |
43 | 1.It looks for b in a and then when it finds out b it prints 10.
44 |
45 | 2.It looks for b in global execution context and since it is not there it will print b is not defined
46 |
--------------------------------------------------------------------------------
/js-concepts/undefined.md:
--------------------------------------------------------------------------------
1 |
2 | # Undefined v/s not defined
3 |
4 | JS engine allocates space to all variables and functions even before execution.
5 |
6 |
7 | ```javascript
8 |
9 | console.log(a); // undefined
10 | var a=7;
11 | console.log (a); // 7
12 |
13 |
14 | console.log(x); // x is not defined
15 |
16 | ```
17 | x is not defined because we have not allocated space to x.
18 |
19 | Undefined is a placeholder which is assigned to variables and functions before code execution.
20 |
21 | ### Undefined != empty
22 |
23 | Undefined is a placeholder which takes space until the variable is assigned some value.
24 |
25 | JS is a loosely-typed language or weakly-typed language it doesn't bind its variables to a specific datatype.
26 |
27 | example :
28 |
29 | ```javascript
30 |
31 | var a;
32 | console.log(a); // undefined
33 | a=10;
34 | console.log(a); //10
35 | a= "Hello"
36 | console.log(a); // Hello
37 | ```
38 |
39 | ### Avoid this ❌
40 |
41 | - Assigning a variable ```undefined``` explicitly since it is assigned to a variable when there is nothing is assigned to the variable.
42 |
43 |
44 | ## Questions
45 |
46 | ### Q1
47 |
48 | ```javascript
49 | function foo(a, b, undefined, undefined) {
50 | console.log('BFE.dev')
51 | }
52 | console.log(foo.length); //4 it returns the number of paramters.
53 |
54 | ```
55 |
56 | ### Q2
57 |
58 | ```javascript
59 |
60 | console.log(JSON.stringify([1,2,null,3])) // "[1,2,null,3]"
61 | console.log(JSON.stringify([1,2,undefined,3])) // JSON doesn't have undefined value, it's replaced with null in JSON data type.
62 | console.log(null === undefined) // false null -> 0 and undefined -> NaN,
63 | console.log(null == undefined) // true Special rule: true -> Just Remember it
64 | console.log(null == 0) // false
65 | console.log(null < 0) // false
66 | console.log(null > 0) // false
67 | console.log(null <= 0) // true
68 | console.log(null >= 0) // true
69 | console.log(undefined == 0) // false
70 | console.log(undefined < 0) // false
71 | console.log(undefined > 0) // false
72 | console.log(undefined <= 0) // false
73 | console.log(undefined >= 0) // false
74 |
75 | ```
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/README.md:
--------------------------------------------------------------------------------
1 | # React calculator
2 |
3 | ### features
4 | 1. do numeric operations
5 | 2. reset operation
6 |
7 | ## Current state
8 |
9 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "calculator",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "react": "^18.2.0",
10 | "react-dom": "^18.2.0",
11 | "react-scripts": "5.0.1",
12 | "web-vitals": "^2.1.4"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": [
22 | "react-app",
23 | "react-app/jest"
24 | ]
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pujarini/JS-prep-101/f7f5468dd3cd329b4b850fa8a66a0eb42d309b4e/machine-coding-problems/2023/react-coding/calculator/public/favicon.ico
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pujarini/JS-prep-101/f7f5468dd3cd329b4b850fa8a66a0eb42d309b4e/machine-coding-problems/2023/react-coding/calculator/public/logo192.png
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pujarini/JS-prep-101/f7f5468dd3cd329b4b850fa8a66a0eb42d309b4e/machine-coding-problems/2023/react-coding/calculator/public/logo512.png
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/src/App.css:
--------------------------------------------------------------------------------
1 | button {
2 | height: 50px;
3 | width: 50px;
4 | font-size: 30px;
5 | padding: 5px;
6 | text-align: center;
7 | margin: 2px;
8 | }
9 |
10 | .display_component {
11 | background-color: lightgray;
12 | height: 50px;
13 | width: 220px;
14 | }
15 |
16 | .display_component p {
17 | font-size: 35px;
18 | text-align: right;
19 | }
20 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/src/App.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import "./App.css";
3 | import Keypad from "./components/Keypad";
4 | import Result from "./components/Result";
5 |
6 | function App() {
7 | const [result, setResult] = useState("");
8 |
9 | const handleKeys = (key) => {
10 | if (key === "=") {
11 | //calculates the result
12 | calculateResult();
13 | } else if (key === "AC") {
14 | // reset the result
15 | setResult("");
16 | } else if (key === "CE") {
17 | // delete last element
18 | let answer = result.slice(0, -1);
19 | setResult(answer);
20 | } else {
21 | let answer = result + key;
22 | setResult(answer);
23 | }
24 | };
25 |
26 | const calculateResult = () => {
27 | setResult(eval(result));
28 | };
29 | return (
30 |
31 |
Calculator
32 |
33 |
34 | {/*1. Create a keypad component so that on click of that key we get the desired result
35 | 2. create a result component where we get to get to see the result
36 | */}
37 |
9 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "calculator",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "react": "^18.2.0",
10 | "react-dom": "^18.2.0",
11 | "react-scripts": "5.0.1",
12 | "web-vitals": "^2.1.4"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": [
22 | "react-app",
23 | "react-app/jest"
24 | ]
25 | },
26 | "browserslist": {
27 | "production": [
28 | ">0.2%",
29 | "not dead",
30 | "not op_mini all"
31 | ],
32 | "development": [
33 | "last 1 chrome version",
34 | "last 1 firefox version",
35 | "last 1 safari version"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Pujarini/JS-prep-101/f7f5468dd3cd329b4b850fa8a66a0eb42d309b4e/machine-coding-problems/2023/react-coding/calculator/public/favicon.ico
--------------------------------------------------------------------------------
/machine-coding-problems/2023/react-coding/calculator/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | 
38 | 
18 | 
21 |
text1
36 | 37 |