├── .github ├── FUNDING.yml └── workflows │ └── gen-toc.yml ├── .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 ├── collab │ ├── frontendlead-banner.png │ └── greatfrontend-js-banner4x.png ├── console-css.png ├── console-dir.png ├── console-html.png ├── console-table.png ├── cookie.png ├── event-flow.png ├── event-table.png ├── heap.png ├── observables.png ├── promises.png ├── prototype_chain.png └── temporal.jpg ├── package-lock.json ├── package.json └── scripts └── toc.mjs /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [sudheerj] 2 | custom: https://buymeacoffee.com/sudheerj 3 | -------------------------------------------------------------------------------- /.github/workflows/gen-toc.yml: -------------------------------------------------------------------------------- 1 | name: Generate table of contents 2 | 3 | on: 4 | pull_request: 5 | push: 6 | branches: 7 | - master 8 | 9 | env: 10 | BRANCH_NAME: ${{ github.head_ref || github.ref_name }} 11 | 12 | jobs: 13 | gen-toc: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout code 17 | uses: actions/checkout@v3 18 | with: 19 | ref: ${{ github.head_ref }} 20 | - name: Install dependencies 21 | run: npm install 22 | - name: Generate table of contents 23 | run: npm run gen 24 | - name: 'Commit changes if required' 25 | run: | 26 | if ! git diff --quiet README.md; then 27 | git config user.email "github-actions[bot]@users.noreply.github.com" 28 | git config user.name "GitHub Actions" 29 | git add README.md 30 | git commit -m "[auto] regenerate table of contents" 31 | git push 32 | echo "[info] Table of contents updated and committed." 33 | else 34 | echo "[info] No changes to table of contents." 35 | fi 36 | working-directory: ${{ github.workspace }} 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Cruft 2 | .DS_Store 3 | .idea 4 | 5 | # Logs 6 | logs 7 | *.log 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | lerna-debug.log* 12 | .pnpm-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # Snowpack dependency directory (https://snowpack.dev/) 50 | web_modules/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Optional stylelint cache 62 | .stylelintcache 63 | 64 | # Microbundle cache 65 | .rpt2_cache/ 66 | .rts2_cache_cjs/ 67 | .rts2_cache_es/ 68 | .rts2_cache_umd/ 69 | 70 | # Optional REPL history 71 | .node_repl_history 72 | 73 | # Output of 'npm pack' 74 | *.tgz 75 | 76 | # Yarn Integrity file 77 | .yarn-integrity 78 | 79 | # dotenv environment variable files 80 | .env 81 | .env.development.local 82 | .env.test.local 83 | .env.production.local 84 | .env.local 85 | 86 | # parcel-bundler cache (https://parceljs.org/) 87 | .cache 88 | .parcel-cache 89 | 90 | # Next.js build output 91 | .next 92 | out 93 | 94 | # Nuxt.js build / generate output 95 | .nuxt 96 | dist 97 | 98 | # Gatsby files 99 | .cache/ 100 | # Comment in the public line in if your project uses Gatsby and not Next.js 101 | # https://nextjs.org/blog/next-9-1#public-directory-support 102 | # public 103 | 104 | # vuepress build output 105 | .vuepress/dist 106 | 107 | # vuepress v2.x temp and cache directory 108 | .temp 109 | .cache 110 | 111 | # Docusaurus cache and generated files 112 | .docusaurus 113 | 114 | # Serverless directories 115 | .serverless/ 116 | 117 | # FuseBox cache 118 | .fusebox/ 119 | 120 | # DynamoDB Local files 121 | .dynamodb/ 122 | 123 | # TernJS port file 124 | .tern-port 125 | 126 | # Stores VSCode versions used for testing VSCode extensions 127 | .vscode-test 128 | 129 | # yarn v2 130 | .yarn/cache 131 | .yarn/unplugged 132 | .yarn/build-state.yml 133 | .yarn/install-state.gz 134 | .pnp.* 135 | -------------------------------------------------------------------------------- /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); // 1, undefined, number 9 | 10 | /** 11 | * Here's the breakdown: 12 | 1. Inside the foo function, x is declared using let, which means it's scoped to the function. However, y is not declared with let or var, so it becomes a global variable. 13 | 14 | 2. When x = y = 0; is executed, it's interpreted as x = (y = 0);, which initializes y as a global variable with the value of 0, and x as a local variable within the function with the value of 0. 15 | 16 | 3. x++ increments the local variable x by 1, making it 1. 17 | 18 | 4. y++ increments the global variable y by 1, making it 1 as well. 19 | 20 | 5. The function returns the value of x, which is 1. 21 | 22 | However, x is scoped within the function, so typeof x outside of the function will result in undefined. 23 | y is a global variable, so typeof y outside of the function will result in number. 24 | */ 25 | -------------------------------------------------------------------------------- /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); // Uncaught SyntaxError: A class may only have one constructor -------------------------------------------------------------------------------- /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); 2 | /** 3 | * 4 | * The output of this code will be false. 5 | 6 | This is because of floating-point arithmetic in JavaScript. Floating-point numbers are stored in binary format in computers, and not all decimal numbers can be represented precisely in binary. 7 | 8 | So, when you add 0.1 and 0.2, the result might not be exactly 0.3 due to rounding errors in the binary representation. Therefore, 0.1 + 0.2 will not be equal to 0.3 in JavaScript. 9 | */ 10 | -------------------------------------------------------------------------------- /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 yrs old 19 | -------------------------------------------------------------------------------- /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' }, { language: 'C++' } 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 | ``` 27 | -------------------------------------------------------------------------------- /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/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/bom.png -------------------------------------------------------------------------------- /images/call-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/call-stack.png -------------------------------------------------------------------------------- /images/collab/frontendlead-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/collab/frontendlead-banner.png -------------------------------------------------------------------------------- /images/collab/greatfrontend-js-banner4x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/collab/greatfrontend-js-banner4x.png -------------------------------------------------------------------------------- /images/console-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/console-css.png -------------------------------------------------------------------------------- /images/console-dir.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/console-dir.png -------------------------------------------------------------------------------- /images/console-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/console-html.png -------------------------------------------------------------------------------- /images/console-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/console-table.png -------------------------------------------------------------------------------- /images/cookie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/cookie.png -------------------------------------------------------------------------------- /images/event-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/event-flow.png -------------------------------------------------------------------------------- /images/event-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/event-table.png -------------------------------------------------------------------------------- /images/heap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/heap.png -------------------------------------------------------------------------------- /images/observables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/observables.png -------------------------------------------------------------------------------- /images/promises.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/promises.png -------------------------------------------------------------------------------- /images/prototype_chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/prototype_chain.png -------------------------------------------------------------------------------- /images/temporal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sudheerj/javascript-interview-questions/1d3d0964fcb3cd1a437a0d4445dfdda21cbea4e6/images/temporal.jpg -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-interview-questions", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "javascript-interview-questions", 9 | "version": "1.0.0", 10 | "dependencies": { 11 | "github-slugger": "^2.0.0", 12 | "prettier": "^3.3.0" 13 | } 14 | }, 15 | "node_modules/github-slugger": { 16 | "version": "2.0.0", 17 | "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", 18 | "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" 19 | }, 20 | "node_modules/prettier": { 21 | "version": "3.3.0", 22 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.0.tgz", 23 | "integrity": "sha512-J9odKxERhCQ10OC2yb93583f6UnYutOeiV5i0zEDS7UGTdUt0u+y8erxl3lBKvwo/JHyyoEdXjwp4dke9oyZ/g==", 24 | "bin": { 25 | "prettier": "bin/prettier.cjs" 26 | }, 27 | "engines": { 28 | "node": ">=14" 29 | }, 30 | "funding": { 31 | "url": "https://github.com/prettier/prettier?sponsor=1" 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-interview-questions", 3 | "version": "1.0.0", 4 | "description": "List of 1000 JavaScript Interview Questions", 5 | "author": "Sudheer Jonna", 6 | "scripts": { 7 | "gen": "node scripts/toc.mjs" 8 | }, 9 | "dependencies": { 10 | "github-slugger": "^2.0.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scripts/toc.mjs: -------------------------------------------------------------------------------- 1 | import GitHubSlugger from "github-slugger"; 2 | import fs from "fs"; 3 | import path, { dirname } from "path"; 4 | import { fileURLToPath } from "url"; 5 | 6 | const slugger = new GitHubSlugger(); 7 | 8 | const __filename = fileURLToPath(import.meta.url); 9 | const __dirname = dirname(__filename); 10 | const filePath = path.join(__dirname, "../README.md"); 11 | 12 | const TOC_START_MARKER = ""; 13 | const TOC_END_MARKER = ""; 14 | const QUESTIONS_START_MARKER = ""; 15 | const QUESTIONS_END_MARKER = ""; 16 | const QUESTION_TITLE_HEADING_LEVEL = "###"; 17 | 18 | const rawFile = fs.readFileSync(filePath).toString(); 19 | 20 | const fileAsLines = rawFile.split("\n"); 21 | 22 | const tocStartIndex = fileAsLines.findIndex( 23 | (line) => line === TOC_START_MARKER 24 | ); 25 | const tocEndIndex = fileAsLines.findIndex((line) => line === TOC_END_MARKER); 26 | 27 | const questionsStartIndex = fileAsLines.findIndex( 28 | (line) => line === QUESTIONS_START_MARKER 29 | ); 30 | const questionsEndIndex = fileAsLines.findIndex( 31 | (line) => line === QUESTIONS_END_MARKER 32 | ); 33 | 34 | if ( 35 | [tocStartIndex, tocEndIndex, questionsStartIndex, questionsEndIndex].some( 36 | (index) => index === -1 37 | ) 38 | ) { 39 | throw "One of the crucial indices markers not found"; 40 | } 41 | 42 | const questions = []; 43 | let currentQuestion = 0; 44 | 45 | // Collect the question titles and numbers into an array. 46 | // Also automatically renames the title line if the number is out-of-order. 47 | for ( 48 | let lineNumber = questionsStartIndex; 49 | lineNumber < questionsEndIndex; 50 | lineNumber++ 51 | ) { 52 | const line = fileAsLines[lineNumber]; 53 | if (line.includes(` ${QUESTION_TITLE_HEADING_LEVEL} `)) { 54 | currentQuestion++; 55 | const lineParts = line.split(` ${QUESTION_TITLE_HEADING_LEVEL} `); 56 | const questionTitle = lineParts[1]; 57 | const questionSlug = slugger.slug(questionTitle); 58 | questions.push({ 59 | number: currentQuestion, 60 | title: questionTitle, 61 | slug: questionSlug, 62 | }); 63 | 64 | fileAsLines[lineNumber] = 65 | currentQuestion + `. ${QUESTION_TITLE_HEADING_LEVEL} ` + questionTitle; 66 | } 67 | } 68 | 69 | // Create lines for table of contents using the collected questions. 70 | const tableOfContentsLines = ["| No. | Questions |", "| --- | --------- |"]; 71 | 72 | questions.forEach(({ number, title, slug }) => 73 | tableOfContentsLines.push(`| ${number} | [${title}](#${slug}) |`) 74 | ); 75 | 76 | // Create resulting file and write to file system. 77 | const outputFileLines = [ 78 | ...fileAsLines.slice(0, tocStartIndex + 1), 79 | ...tableOfContentsLines, 80 | ...fileAsLines.slice(tocEndIndex), 81 | ]; 82 | 83 | const outputFile = outputFileLines.join("\n"); 84 | 85 | fs.writeFileSync(filePath, outputFile); 86 | console.info(`Processed ${tableOfContentsLines.length} questions.`); 87 | --------------------------------------------------------------------------------