├── .github └── workflows │ └── main.yaml ├── .gitignore ├── README.md ├── coding-exercise ├── accidental-global.js ├── class-multiple-constructors.js ├── eventloop-order.js ├── floatingpoint-problem.js ├── function-arrow-context.js ├── function-context.js ├── function-expression.js ├── function-hoisted.js ├── function-without-new.js ├── semicolon-issue.js └── superArrayOfObjects │ ├── README.md │ └── superArrayOfObjects.js └── images ├── bom.png ├── call-stack.png ├── console-css.png ├── console-dir.png ├── console-html.png ├── console-table.png ├── cookie.png ├── event-table.png ├── heap.png ├── observables.png ├── promises.png ├── prototype_chain.png └── temporal.jpg /.github/workflows/main.yaml: -------------------------------------------------------------------------------- 1 | name: Documentation 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | 7 | env: 8 | FILE_NAME: javascript-interview-questions 9 | 10 | jobs: 11 | convert_via_pandoc: 12 | runs-on: ubuntu-18.04 13 | steps: 14 | - uses: actions/checkout@v2 15 | 16 | - name: Create output directory 17 | run: | 18 | mkdir output # create output dir 19 | 20 | - name: Create PDF 21 | uses: docker://pandoc/latex:2.10 22 | with: 23 | args: --pdf-engine=xelatex --output=output/${{env.FILE_NAME}}.pdf README.md 24 | 25 | - name: Create epub 26 | uses: docker://pandoc/latex:2.10 27 | with: 28 | args: --output=output/${{env.FILE_NAME}}.epub README.md 29 | 30 | - name: Upload 31 | uses: actions/upload-artifact@master 32 | with: 33 | name: output 34 | path: output -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Cruft 2 | .DS_Store 3 | npm-debug.log 4 | .idea -------------------------------------------------------------------------------- /coding-exercise/accidental-global.js: -------------------------------------------------------------------------------- 1 | function foo() { 2 | let x = y = 0; 3 | x++; 4 | y++; 5 | return x; 6 | } 7 | 8 | console.log(foo(), typeof x, typeof y); 9 | -------------------------------------------------------------------------------- /coding-exercise/class-multiple-constructors.js: -------------------------------------------------------------------------------- 1 | class Rectangle { 2 | constructor(height, width) { 3 | this.height = height; 4 | this.width = width; 5 | } 6 | 7 | constructor(width) { 8 | this.width = width; 9 | } 10 | // Getter 11 | get area() { 12 | return this.calcArea(); 13 | } 14 | // Method 15 | calcArea() { 16 | return this.height * this.width; 17 | } 18 | } 19 | 20 | const square = new Rectangle(20, 30); 21 | 22 | console.log(square.area); // 600 -------------------------------------------------------------------------------- /coding-exercise/eventloop-order.js: -------------------------------------------------------------------------------- 1 | function main(){ 2 | console.log('A'); 3 | setTimeout( 4 | function print(){ console.log('B'); } 5 | ,0); 6 | console.log('C'); 7 | } 8 | main(); // A,C and B -------------------------------------------------------------------------------- /coding-exercise/floatingpoint-problem.js: -------------------------------------------------------------------------------- 1 | console.log(0.1 + 0.2 === 0.3); -------------------------------------------------------------------------------- /coding-exercise/function-arrow-context.js: -------------------------------------------------------------------------------- 1 | function User(name, age) { 2 | this.name = name; 3 | this.age = age; 4 | 5 | this.getProfile = function() { 6 | // Outer function context 7 | console.log(this.constructor.name); // User 8 | return () => { 9 | // Inner function context 10 | console.log(this.constructor.name); // User(Get it from the outer context) 11 | console.log("I'm " + this.name + ", " + this.age + " yrs old"); 12 | }; 13 | } 14 | } 15 | 16 | let user = new User('John', 25); 17 | let profile = user.getProfile(); 18 | profile(); //I'm John, 25 yrs old -------------------------------------------------------------------------------- /coding-exercise/function-context.js: -------------------------------------------------------------------------------- 1 | function User(name, age) { 2 | this.name = name; 3 | this.age = age; 4 | 5 | this.getProfile = function() { 6 | // Outer function context 7 | console.log(this.constructor.name); // User 8 | return function() { 9 | // Inner function context 10 | console.log(this.constructor.name); // Window 11 | console.log("I'm " + this.name + ", " + this.age + " yrs old"); 12 | }; 13 | } 14 | } 15 | 16 | var user = new User('John', 25); 17 | var profile = user.getProfile(); 18 | profile(); //I'm undefined, undefined yrs old -------------------------------------------------------------------------------- /coding-exercise/function-expression.js: -------------------------------------------------------------------------------- 1 | var y = 1; 2 | if (function f(){}) { 3 | y += typeof f; 4 | } 5 | console.log(y); -------------------------------------------------------------------------------- /coding-exercise/function-hoisted.js: -------------------------------------------------------------------------------- 1 | var car = new Vehicle("Honda", "white", "2010", "UK"); 2 | console.log(car); 3 | 4 | function Vehicle(model, color, year, country) { 5 | this.model = model; 6 | this.color = color; 7 | this.year = year; 8 | this.country = country; 9 | } 10 | -------------------------------------------------------------------------------- /coding-exercise/function-without-new.js: -------------------------------------------------------------------------------- 1 | function Vehicle(model, color, year, country) { 2 | this.model = model; 3 | this.color = color; 4 | this.year = year; 5 | this.country = country; 6 | } 7 | 8 | var car = Vehicle("Honda", "white", "2010", "UK"); 9 | console.log(car); -------------------------------------------------------------------------------- /coding-exercise/semicolon-issue.js: -------------------------------------------------------------------------------- 1 | function foo() { 2 | return 3 | { 4 | message: "Hello World" 5 | }; 6 | } 7 | console.log(foo()); //Undefined -------------------------------------------------------------------------------- /coding-exercise/superArrayOfObjects/README.md: -------------------------------------------------------------------------------- 1 | ### Count the occurrence of keys and convert the result into array of objects where each object belongs to one key and it's occurrence (count). 2 | 3 | #### Example 4 | ```js 5 | [ 6 | { language: 'JavaScript' },{ language: 'JavaScript' },{ language: 'TypeScript' }, 7 | ] 8 | ``` 9 | 10 | #### SHOULD BE CONVERTED TO = 11 | ```js 12 | [ 13 | { language: 'JavaScript', count: 2 }, 14 | { language: 'C++', count: 1 }, 15 | { language: 'TypeScript', count: 1 } 16 | ] 17 | ``` 18 | 19 | ##### The idea is to count the frequency of each unique key in an array of objects and then instead of making the result look like 20 | ```js 21 | { key1: 2, key2: 1, key3: 7 } 22 | ``` 23 | The result should be an array of objects so that it can be map over and get rendered in React.JS or something like that. 24 | ```js 25 | [ { key1: 2 }, { key2: 1 }, { key3: 7 } ] 26 | ``` -------------------------------------------------------------------------------- /coding-exercise/superArrayOfObjects/superArrayOfObjects.js: -------------------------------------------------------------------------------- 1 | // Example data 2 | const aob = 3 | [ 4 | { framework: 'React.JS', website: 'Paypal' }, 5 | { framework: 'React.JS', website: 'Tesla' }, 6 | { framework: 'Angular', website: 'Google' }, 7 | { framework: 'Vue.JS', website: 'Vue' }, 8 | { framework: 'JavaScript', website: 'inblack67' }, 9 | ] 10 | const superAob = (data, victim) => { 11 | 12 | const obj = {}; 13 | 14 | data.forEach((data) => { 15 | if(data.hasOwnProperty(victim)){ 16 | if(obj[data[victim]]){ 17 | obj[data[victim]]++; 18 | } 19 | else{ 20 | obj[data[victim]] = 1; 21 | } 22 | } 23 | }) 24 | 25 | let superArrayOfObjects = []; 26 | 27 | for (const key in obj) { 28 | superArrayOfObjects = [...superArrayOfObjects, { victim: key, count: obj[key]}]; 29 | } 30 | 31 | return superArrayOfObjects; 32 | } 33 | 34 | console.log(superAob(aob, 'framework')); 35 | 36 | // output:- 37 | // [ 38 | // { victim: 'React.JS', count: 2 }, 39 | // { victim: 'Angular', count: 1 }, 40 | // { victim: 'Vue.JS', count: 1 }, 41 | // { victim: 'JavaScript', count: 1 } 42 | // ] -------------------------------------------------------------------------------- /images/bom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/bom.png -------------------------------------------------------------------------------- /images/call-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/call-stack.png -------------------------------------------------------------------------------- /images/console-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/console-css.png -------------------------------------------------------------------------------- /images/console-dir.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/console-dir.png -------------------------------------------------------------------------------- /images/console-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/console-html.png -------------------------------------------------------------------------------- /images/console-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/console-table.png -------------------------------------------------------------------------------- /images/cookie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/cookie.png -------------------------------------------------------------------------------- /images/event-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/event-table.png -------------------------------------------------------------------------------- /images/heap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/heap.png -------------------------------------------------------------------------------- /images/observables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/observables.png -------------------------------------------------------------------------------- /images/promises.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/promises.png -------------------------------------------------------------------------------- /images/prototype_chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/prototype_chain.png -------------------------------------------------------------------------------- /images/temporal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mohamed-Hashem/javascript-interview-questions/bfa4201ff5a0c05aaeffc878fdd54d991aedd87c/images/temporal.jpg --------------------------------------------------------------------------------