From a74c7fe19ae8ec32b4801428d8c424741c608a8c Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 15 May 2025 13:34:41 +0100 Subject: [PATCH] Add javascript questions guide --- .../content/add-method-to-object.md | 17 + .../content/add-remove-array-items.md | 23 + .../content/adding-javascript-to-html.md | 83 +++ .../content/addition-operator-result.md | 5 + .../content/alert-prompt-confirm.md | 27 - .../content/append-child-vs-insert-before.md | 32 -- .../javascript/content/array-loop.md | 15 + .../javascript/content/array-methods.md | 8 + .../javascript/content/arrays-creation.md | 7 + .../javascript/content/arrow-functions.md | 60 +++ .../javascript/content/async-vs-sync.md | 27 - .../content/asynchronous-javascript.md | 3 + .../question-groups/javascript/content/bom.md | 3 + .../javascript/content/break-and-continue.md | 28 - .../javascript/content/callback-hell.md | 48 -- .../callback-higher-order-functions.md | 28 + .../content/check-object-property.md | 13 + .../javascript/content/clear-array.md | 27 + .../javascript/content/closure.md | 18 - .../javascript/content/comma-operator.md | 8 - .../content/constructor-function.md | 24 + .../javascript/content/create-element.md | 9 - .../content/css-selectors-javascript.md | 22 + .../javascript/content/custom-event.md | 33 -- .../javascript/content/debug-javascript.md | 38 -- .../javascript/content/defer-vs-async.md | 25 - .../javascript/content/destructuring.md | 17 + .../javascript/content/do-while-loop.md | 14 - .../question-groups/javascript/content/dom.md | 7 + .../javascript/content/equality-operator.md | 7 - .../javascript/content/equality-operators.md | 9 + .../content/error-in-async-await.md | 24 - .../javascript/content/error-in-promise.md | 38 -- .../javascript/content/error-monitoring.md | 8 + .../javascript/content/even-odd-check.md | 18 + .../javascript/content/event-bubbling.md | 19 - .../javascript/content/event-loop.md | 26 - .../javascript/content/explicit-binding.md | 19 - .../javascript/content/filter-method.md | 12 - .../content/finally-block-in-promise.md | 14 - .../content/find-unique-array-values.md | 55 -- .../javascript/content/for-each-method.md | 9 - .../function-declarations-expressions.md | 17 + .../javascript/content/function-scope.md | 22 + .../javascript/content/global-local-scope.md | 5 + .../javascript/content/global-object.md | 1 + .../javascript/content/heap-and-stack.md | 20 - .../javascript/content/hoisting.md | 23 +- .../javascript/content/iife.md | 24 +- .../javascript/content/immutable-object.md | 12 - .../javascript/content/imports-exports.md | 27 + .../javascript/content/increment-operator.md | 21 - .../javascript/content/infinite-loop.md | 21 - .../javascript/content/inheritance.md | 38 -- .../content/innerhtml-vs-innertext.md | 33 ++ .../javascript/content/isnan-function.md | 7 + .../javascript/content/java-vs-javascript.md | 5 + .../content/javascript-data-types.md | 16 + .../javascript/content/javascript-ending.md | 10 + .../content/javascript-frameworks.md | 5 + .../javascript/content/labelled-statements.md | 15 - .../javascript/content/logical-error.md | 3 + .../javascript/content/logical-operators.md | 43 -- .../javascript/content/map-method.md | 12 - .../question-groups/javascript/content/map.md | 19 - .../javascript/content/measure-dimensions.md | 8 - .../javascript/content/merge-arrays.md | 25 - .../content/nullish-coalescing-operator.md | 8 - .../javascript/content/object-create.md | 28 + .../javascript/content/parse-json.md | 9 - .../javascript/content/prevent-default.md | 10 - .../content/promise-all-vs-all-settled.md | 51 -- .../javascript/content/prototype-chain.md | 27 - .../content/prototype-inheritance.md | 3 + .../javascript/content/query-selector.md | 18 - .../javascript/content/recursive-function.md | 20 + .../javascript/content/reduce-method.md | 24 - .../content/reference-vs-syntax-error.md | 13 + .../javascript/content/remove-duplicates.md | 9 + .../javascript/content/remove-element.md | 9 - .../javascript/content/rest-parameter.md | 17 + .../content/reverse-string-function.md | 13 + .../javascript/content/scroll-to-top.md | 5 - .../javascript/content/set-interval.md | 17 - .../javascript/content/set-timeout.md | 16 - .../question-groups/javascript/content/set.md | 17 - .../javascript/content/spread-array-output.md | 9 + .../content/spread-operator-objects.md | 15 + .../javascript/content/spread-operator.md | 19 - .../javascript/content/strict-mode.md | 33 ++ .../javascript/content/substring-check.md | 11 + .../javascript/content/switch-case.md | 19 - .../javascript/content/ternary-operator.md | 5 - .../javascript/content/this-keyword.md | 5 + .../javascript/content/undefined-vs-null.md | 35 ++ .../content/variable-declaration.md | 43 ++ .../content/variable-naming-conventions.md | 7 + .../content/variable-number-of-arguments.md | 27 - .../javascript/content/window-vs-document.md | 3 + .../question-groups/javascript/javascript.md | 502 ++++++------------ src/data/roadmaps/javascript/faqs.astro | 2 +- 101 files changed, 1006 insertions(+), 1402 deletions(-) create mode 100644 src/data/question-groups/javascript/content/add-method-to-object.md create mode 100644 src/data/question-groups/javascript/content/add-remove-array-items.md create mode 100644 src/data/question-groups/javascript/content/adding-javascript-to-html.md create mode 100644 src/data/question-groups/javascript/content/addition-operator-result.md delete mode 100644 src/data/question-groups/javascript/content/alert-prompt-confirm.md delete mode 100644 src/data/question-groups/javascript/content/append-child-vs-insert-before.md create mode 100644 src/data/question-groups/javascript/content/array-loop.md create mode 100644 src/data/question-groups/javascript/content/array-methods.md create mode 100644 src/data/question-groups/javascript/content/arrays-creation.md create mode 100644 src/data/question-groups/javascript/content/arrow-functions.md delete mode 100644 src/data/question-groups/javascript/content/async-vs-sync.md create mode 100644 src/data/question-groups/javascript/content/asynchronous-javascript.md create mode 100644 src/data/question-groups/javascript/content/bom.md delete mode 100644 src/data/question-groups/javascript/content/break-and-continue.md delete mode 100644 src/data/question-groups/javascript/content/callback-hell.md create mode 100644 src/data/question-groups/javascript/content/callback-higher-order-functions.md create mode 100644 src/data/question-groups/javascript/content/check-object-property.md create mode 100644 src/data/question-groups/javascript/content/clear-array.md delete mode 100644 src/data/question-groups/javascript/content/closure.md delete mode 100644 src/data/question-groups/javascript/content/comma-operator.md create mode 100644 src/data/question-groups/javascript/content/constructor-function.md delete mode 100644 src/data/question-groups/javascript/content/create-element.md create mode 100644 src/data/question-groups/javascript/content/css-selectors-javascript.md delete mode 100644 src/data/question-groups/javascript/content/custom-event.md delete mode 100644 src/data/question-groups/javascript/content/debug-javascript.md delete mode 100644 src/data/question-groups/javascript/content/defer-vs-async.md create mode 100644 src/data/question-groups/javascript/content/destructuring.md delete mode 100644 src/data/question-groups/javascript/content/do-while-loop.md create mode 100644 src/data/question-groups/javascript/content/dom.md delete mode 100644 src/data/question-groups/javascript/content/equality-operator.md create mode 100644 src/data/question-groups/javascript/content/equality-operators.md delete mode 100644 src/data/question-groups/javascript/content/error-in-async-await.md delete mode 100644 src/data/question-groups/javascript/content/error-in-promise.md create mode 100644 src/data/question-groups/javascript/content/error-monitoring.md create mode 100644 src/data/question-groups/javascript/content/even-odd-check.md delete mode 100644 src/data/question-groups/javascript/content/event-bubbling.md delete mode 100644 src/data/question-groups/javascript/content/event-loop.md delete mode 100644 src/data/question-groups/javascript/content/explicit-binding.md delete mode 100644 src/data/question-groups/javascript/content/filter-method.md delete mode 100644 src/data/question-groups/javascript/content/finally-block-in-promise.md delete mode 100644 src/data/question-groups/javascript/content/find-unique-array-values.md delete mode 100644 src/data/question-groups/javascript/content/for-each-method.md create mode 100644 src/data/question-groups/javascript/content/function-declarations-expressions.md create mode 100644 src/data/question-groups/javascript/content/function-scope.md create mode 100644 src/data/question-groups/javascript/content/global-local-scope.md create mode 100644 src/data/question-groups/javascript/content/global-object.md delete mode 100644 src/data/question-groups/javascript/content/heap-and-stack.md delete mode 100644 src/data/question-groups/javascript/content/immutable-object.md create mode 100644 src/data/question-groups/javascript/content/imports-exports.md delete mode 100644 src/data/question-groups/javascript/content/increment-operator.md delete mode 100644 src/data/question-groups/javascript/content/infinite-loop.md delete mode 100644 src/data/question-groups/javascript/content/inheritance.md create mode 100644 src/data/question-groups/javascript/content/innerhtml-vs-innertext.md create mode 100644 src/data/question-groups/javascript/content/isnan-function.md create mode 100644 src/data/question-groups/javascript/content/java-vs-javascript.md create mode 100644 src/data/question-groups/javascript/content/javascript-data-types.md create mode 100644 src/data/question-groups/javascript/content/javascript-ending.md create mode 100644 src/data/question-groups/javascript/content/javascript-frameworks.md delete mode 100644 src/data/question-groups/javascript/content/labelled-statements.md create mode 100644 src/data/question-groups/javascript/content/logical-error.md delete mode 100644 src/data/question-groups/javascript/content/logical-operators.md delete mode 100644 src/data/question-groups/javascript/content/map-method.md delete mode 100644 src/data/question-groups/javascript/content/map.md delete mode 100644 src/data/question-groups/javascript/content/measure-dimensions.md delete mode 100644 src/data/question-groups/javascript/content/merge-arrays.md delete mode 100644 src/data/question-groups/javascript/content/nullish-coalescing-operator.md create mode 100644 src/data/question-groups/javascript/content/object-create.md delete mode 100644 src/data/question-groups/javascript/content/parse-json.md delete mode 100644 src/data/question-groups/javascript/content/prevent-default.md delete mode 100644 src/data/question-groups/javascript/content/promise-all-vs-all-settled.md delete mode 100644 src/data/question-groups/javascript/content/prototype-chain.md create mode 100644 src/data/question-groups/javascript/content/prototype-inheritance.md delete mode 100644 src/data/question-groups/javascript/content/query-selector.md create mode 100644 src/data/question-groups/javascript/content/recursive-function.md delete mode 100644 src/data/question-groups/javascript/content/reduce-method.md create mode 100644 src/data/question-groups/javascript/content/reference-vs-syntax-error.md create mode 100644 src/data/question-groups/javascript/content/remove-duplicates.md delete mode 100644 src/data/question-groups/javascript/content/remove-element.md create mode 100644 src/data/question-groups/javascript/content/rest-parameter.md create mode 100644 src/data/question-groups/javascript/content/reverse-string-function.md delete mode 100644 src/data/question-groups/javascript/content/scroll-to-top.md delete mode 100644 src/data/question-groups/javascript/content/set-interval.md delete mode 100644 src/data/question-groups/javascript/content/set-timeout.md delete mode 100644 src/data/question-groups/javascript/content/set.md create mode 100644 src/data/question-groups/javascript/content/spread-array-output.md create mode 100644 src/data/question-groups/javascript/content/spread-operator-objects.md delete mode 100644 src/data/question-groups/javascript/content/spread-operator.md create mode 100644 src/data/question-groups/javascript/content/strict-mode.md create mode 100644 src/data/question-groups/javascript/content/substring-check.md delete mode 100644 src/data/question-groups/javascript/content/switch-case.md delete mode 100644 src/data/question-groups/javascript/content/ternary-operator.md create mode 100644 src/data/question-groups/javascript/content/this-keyword.md create mode 100644 src/data/question-groups/javascript/content/undefined-vs-null.md create mode 100644 src/data/question-groups/javascript/content/variable-declaration.md create mode 100644 src/data/question-groups/javascript/content/variable-naming-conventions.md delete mode 100644 src/data/question-groups/javascript/content/variable-number-of-arguments.md create mode 100644 src/data/question-groups/javascript/content/window-vs-document.md diff --git a/src/data/question-groups/javascript/content/add-method-to-object.md b/src/data/question-groups/javascript/content/add-method-to-object.md new file mode 100644 index 000000000..5e3c4b200 --- /dev/null +++ b/src/data/question-groups/javascript/content/add-method-to-object.md @@ -0,0 +1,17 @@ +Adding methods to an object allows you to keep your code organized and easy to reuse. One way to make this happen is by assigning a function to the object's property: + +```javascript +var obj = { + name: "Cess", + work: "developer", + countryVisits: 3 +}; + +// assigning a function to the object's property + +obj.newMethod = function() { + console.log("Hello, I'm " + this.name + " and I work as a " + this.work ); +}; + +obj.newMethod(); // Hello, I'm Cess and I work as a developer +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/add-remove-array-items.md b/src/data/question-groups/javascript/content/add-remove-array-items.md new file mode 100644 index 000000000..535e93bc4 --- /dev/null +++ b/src/data/question-groups/javascript/content/add-remove-array-items.md @@ -0,0 +1,23 @@ +Adding or removing items from an array using the `push()` and `pop()` methods: + +```javascript +// using push() method + +let coding = ["Java", "JavaScript"]; + +coding.push("React"); + + +console.log(coding); // ["Java", "JavaScript", "React"] + + +// using pop() method + +let coding = ["Java", "JavaScript"]; + +let removeJavaScript = coding.pop(); + +console.log(coding); // ['Java'] + +console.log(removeJavaScript); JavaScript +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/adding-javascript-to-html.md b/src/data/question-groups/javascript/content/adding-javascript-to-html.md new file mode 100644 index 000000000..6cae21685 --- /dev/null +++ b/src/data/question-groups/javascript/content/adding-javascript-to-html.md @@ -0,0 +1,83 @@ +## Advanced concepts + +You can add JavaScript to an HTML file in three ways: **inline, internal, and external JavaScript**. Internal JavaScript lets you add code inside the HTML markup file between ` + + + + + + + + + + + + + + + + +``` + +Another method is to create an external file for your JavaScript. It lets you write your JavaScript code in a separate .js extension and link it to your HTML code file. You can link to the external JavaScript in your HTML's `` or `` section. + +Doing this keeps your HTML clean and lets you use the same JavaScript code in many HTML pages. The downside is that it means an extra HTTP request to load the JavaScript file, which might slow down how fast your page loads. + +For example, when you create a file called `app.js`, you'll include it like this: + +```html + + + + + + Practice + + + + + + + + + + + + + + + + + + + + +``` + +Inline JavaScript lets you place your JavaScript code into an HTML element's attribute. You can do this using an HTML element's attribute, like onclick, onsubmit, and onselect. + +Using inline JavaScript is suitable for fast and easy tasks. But it can make your HTML code difficult to read, especially if you have a lot of JavaScript code. + +```html + +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/addition-operator-result.md b/src/data/question-groups/javascript/content/addition-operator-result.md new file mode 100644 index 000000000..dae17c65e --- /dev/null +++ b/src/data/question-groups/javascript/content/addition-operator-result.md @@ -0,0 +1,5 @@ +```javascript +console.log(10 + 2 + "9"); // 129 +``` + +JavaScript uses type coercion to convert values to the same type before operations. It'll first add both numbers 10 + 2 to get 12, and then try to add the number 12 to the string "9". Since you can't add a number and a string in JavaScript, it'll change the number 12 into a string "12," i.e., "12" + "9" = "129" \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/alert-prompt-confirm.md b/src/data/question-groups/javascript/content/alert-prompt-confirm.md deleted file mode 100644 index 2f962c1bc..000000000 --- a/src/data/question-groups/javascript/content/alert-prompt-confirm.md +++ /dev/null @@ -1,27 +0,0 @@ -Let's see how we can use the `alert`, `prompt` and `confirm` functions to interact with the user. - -## alert() - -The `alert()` method displays an alert box with a specified message and an OK button. - -```js -alert('Hello World!'); -``` - -## prompt() - -The `prompt()` method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page. The `prompt()` method returns the input value if the user clicks OK. If the user clicks Cancel, the method returns `null`. - -```js -const name = prompt('What is your name?'); -console.log(name); -``` - -## confirm() - -The `confirm()` method displays a dialog box with a specified message, along with an OK and a Cancel button. This is often used to confirm or verify something from the user. - -```js -const result = confirm('Are you sure?'); -console.log(result); // true/false -``` diff --git a/src/data/question-groups/javascript/content/append-child-vs-insert-before.md b/src/data/question-groups/javascript/content/append-child-vs-insert-before.md deleted file mode 100644 index 9d89545b8..000000000 --- a/src/data/question-groups/javascript/content/append-child-vs-insert-before.md +++ /dev/null @@ -1,32 +0,0 @@ -You can add a new element to the DOM using the `appendChild` or `insertBefore` method. - -## appendChild - -The `appendChild` method adds a new element as the last child of the specified parent element. - -```js -const roadmapWrapper = document.querySelector('.roadmap-wrapper'); - -const roadmap = document.createElement('div'); -roadmap.id = 'javascript-roadmap'; - -roadmapWrapper.appendChild(roadmap); -``` - -In the example above, the `roadmap` element is added as the last child of the `roadmapWrapper` element. - -## insertBefore - -The `insertBefore` method adds a new element before the specified child element. - -```js -const roadmapWrapper = document.querySelector('.roadmap-wrapper'); - -const roadmap = document.createElement('div'); -roadmap.id = 'javascript-roadmap'; - -const roadmapTitle = document.querySelector('#roadmap-title'); -roadmapWrapper.insertBefore(roadmap, roadmapTitle); -``` - -In the example above, the `roadmap` element is added before the `roadmapTitle` element. diff --git a/src/data/question-groups/javascript/content/array-loop.md b/src/data/question-groups/javascript/content/array-loop.md new file mode 100644 index 000000000..0fde8c79e --- /dev/null +++ b/src/data/question-groups/javascript/content/array-loop.md @@ -0,0 +1,15 @@ +Below is an example of looping through an array using the for loop method: + +```javascript +let coding = ["java", "python", "JavaScript"]; + +for (let i = 0; i < coding.length; i++) { + console.log(coding[i]); +} + +// java + +// python + +// JavaScript +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/array-methods.md b/src/data/question-groups/javascript/content/array-methods.md new file mode 100644 index 000000000..3e62e85e1 --- /dev/null +++ b/src/data/question-groups/javascript/content/array-methods.md @@ -0,0 +1,8 @@ +Array methods help you add, delete, or change elements **(values)** in an array. Some array methods to check out are: + +![JavaScript interview questions: Array methods](https://assets.roadmap.sh/guest/javascript-array-method-e4qa9.png) + +- **push()**: The push() method adds one or more elements to the end of an array and tells you the new length of the array in return. +- **pop()**: The pop() method removes the last element from an array and returns that element. +- **shift()**: The shift() method removes and returns the first element from an array. +- **unshift()**: It adds one or more elements to the start of an array and tells you the new length of the array in return. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/arrays-creation.md b/src/data/question-groups/javascript/content/arrays-creation.md new file mode 100644 index 000000000..c3e90928c --- /dev/null +++ b/src/data/question-groups/javascript/content/arrays-creation.md @@ -0,0 +1,7 @@ +You use array literals with square brackets [] to create JavaScript arrays. + +![JavaScript interview questions: Arrays](https://assets.roadmap.sh/guest/javascript-arrays-v52bv.png) + +```javascript +let myArray = [firstArr, secondArr, thirdArr]; +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/arrow-functions.md b/src/data/question-groups/javascript/content/arrow-functions.md new file mode 100644 index 000000000..855919291 --- /dev/null +++ b/src/data/question-groups/javascript/content/arrow-functions.md @@ -0,0 +1,60 @@ +Arrow functions are a shorter way to write functions in JavaScript, which came out in ES6 2015. It uses an arrow (`=>`) symbol to define (create) a function instead of the function keyword. Arrow functions bind "this'' to the surrounding scope. This means they inherit the same meaning of the "this" keyword as the code around them. It makes it easier to work with variables, functions, objects, etc., outside the arrow function, but still accessible within it. + +Regular functions, on the other hand, bind the "this" keyword to the function itself. The "this" keyword changes based on how you call the function, but it can sometimes cause errors. For example, if you call a regular function as a method of an object, "this" will refer to that object. But if you call the same function as a standalone function, "this" will refer to the global object **(usually the window object in a browser)**. + +```javascript +// arrow function with this + +function personName(name) { + this.name = name; + this.sayName = () => { + console.log(this.name); // 'this' is inherited from the surrounding context (constructor function: personName) + }; +} + +const cess = new personName("cess"); + +cess.sayName(); // cess + +// regular function with this + +function Person(name) { + this.name = name; // Assigns the "name" parameter as the "name" property of the object you created. + + this.sayName = function () { + +console.log(this.name); // Refers to the "name" property of the object that calls this function. + }; +} + +const cess = new Person("cess"); + +cess.sayName(); // cess +``` + +In arrow functions, if there is only one expression, you can skip the curly braces `{}` and the return keyword. It makes your code cleaner and easier for you and external developers to read. If you have two or more expressions, use the return keyword and put your code in curly braces `{}`**.** + +```javascript +// regular function + +function doMath(a,b) { + return a + b; +} + +console.log(doMath(200, 500)); // 700 + +// arrow function + +const doMath = (a, b) => a + b; // single expression + +console.log(doMath(200, 500)); // 700 + +// multiple expression + +let doMath = (a, b) => { + let result = a * b; + return result; +}; + +console.log(doMath(200, 500)); // 100,000 +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/async-vs-sync.md b/src/data/question-groups/javascript/content/async-vs-sync.md deleted file mode 100644 index fe2998127..000000000 --- a/src/data/question-groups/javascript/content/async-vs-sync.md +++ /dev/null @@ -1,27 +0,0 @@ -The difference between Asynchronous and Synchronous code is that Asynchronous code does not block the execution of the program while Synchronous code does. - -## Asynchronous code - -Asynchronous code is executed in the background and it does not block the execution of the program. It is usually used to perform tasks that take a long time to complete, such as network requests. - -```js -console.log('Before'); - -setTimeout(() => { - console.log('Hello'); -}, 1000); - -console.log('After'); -``` - -## Synchronous code - -Synchronous code is executed in sequence and it blocks the execution of the program until it is completed. If a task takes a long time to complete, everything else waits. - -```js -console.log('Before'); - -for (let i = 0; i < 1000000000; i++) {} - -console.log('After'); -``` diff --git a/src/data/question-groups/javascript/content/asynchronous-javascript.md b/src/data/question-groups/javascript/content/asynchronous-javascript.md new file mode 100644 index 000000000..c0982c9e2 --- /dev/null +++ b/src/data/question-groups/javascript/content/asynchronous-javascript.md @@ -0,0 +1,3 @@ +Asynchronous JavaScript is a way of writing code that can carry out many tasks at once. It saves you time, especially when working on tasks that take effort, like fetching data from a server. + +Async JavaScript lets your code run at the same time as other tasks while waiting for it to complete. Your code doesn't stop and wait for a task to finish, but it keeps checking now and then to see if the task is complete. Once it's done, either a promise or a callback function responds to the result of the task. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/bom.md b/src/data/question-groups/javascript/content/bom.md new file mode 100644 index 000000000..28db28923 --- /dev/null +++ b/src/data/question-groups/javascript/content/bom.md @@ -0,0 +1,3 @@ +The BOM is a set of tools that allows JavaScript to interact with the browser. It controls browser functionalities without needing to interact with the HTML document. You can open and close a browser window, access a browsing history, and more. Examples of the BOM include window, browser, and history objects. + +![JavaScript interview questions: Types of web storage](https://assets.roadmap.sh/guest/types-of-web-storage-17ceh.png) \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/break-and-continue.md b/src/data/question-groups/javascript/content/break-and-continue.md deleted file mode 100644 index f07860b4f..000000000 --- a/src/data/question-groups/javascript/content/break-and-continue.md +++ /dev/null @@ -1,28 +0,0 @@ -You can use `break` and `continue` in loops to alter the flow of the loop. `break` will stop the loop from continuing, and `continue` will skip the current iteration and continue the loop. - -```js -for (let i = 0; i < 5; i++) { - if (i === 1) { - continue; // skips the rest of the code in the loop - } - console.log(`i: ${i}`); -} - -// Output: -// i: 0 -// i: 2 -// i: 3 -// i: 4 -``` - -```js -for (let i = 0; i < 5; i++) { - if (i === 1) { - break; // stops the loop - } - console.log(`i: ${i}`); -} - -// Output: -// i: 0 -``` diff --git a/src/data/question-groups/javascript/content/callback-hell.md b/src/data/question-groups/javascript/content/callback-hell.md deleted file mode 100644 index bb243b805..000000000 --- a/src/data/question-groups/javascript/content/callback-hell.md +++ /dev/null @@ -1,48 +0,0 @@ -**Callback hell**, often referred to as **Pyramid of Doom**, describes a situation in JavaScript where multiple nested callbacks become difficult to manage, leading to unreadable and unmaintainable code. It often arises when performing multiple asynchronous operations that depend on the completion of previous operations. The code starts to take on a pyramidal shape due to the nesting. - -## Example of callback hell - -```js -callAsync1(function () { - callAsync2(function () { - callAsync3(function () { - callAsync4(function () { - callAsync5(function () { - // ... - }); - }); - }); - }); -}); -``` - -## Strategies to avoid callback hell - -Developers can address or avoid callback hell by using strategies like modularizing the code into named functions, using asynchronous control flow libraries, or leveraging modern JavaScript features like Promises and `async/await` to write more linear, readable asynchronous code. - -### Promise chaining - -```js -callAsync1() - .then(() => callAsync2()) - .then(() => callAsync3()) - .then(() => callAsync4()) - .then(() => callAsync5()) - .catch((err) => console.error(err)); -``` - -### Async/await - -```js -async function asyncCall() { - try { - await callAsync1(); - await callAsync2(); - await callAsync3(); - await callAsync4(); - await callAsync5(); - } catch (err) { - console.error(err); - } -} -``` diff --git a/src/data/question-groups/javascript/content/callback-higher-order-functions.md b/src/data/question-groups/javascript/content/callback-higher-order-functions.md new file mode 100644 index 000000000..5be3c7f87 --- /dev/null +++ b/src/data/question-groups/javascript/content/callback-higher-order-functions.md @@ -0,0 +1,28 @@ +A callback function is a function that one function gives to another as an argument **(value)**. The second function then runs the callback function after it finishes its operation. Callbacks are often used with other functions to handle tasks like making API calls. + +In the example below, the sendMessage function is a callback function because it's given **(passed)** to the sendNow function to run the code later. + +```javascript +function sendMessage(message) { + console.log("Message: " + message); +} + +function sendNow(callback, message) { + callback(message); +} +sendNow(sendMessage, "Hello, I'm learning JavaScript!"); // Message: Hello, I'm learning JavaScript! +``` + +Just like callbacks, higher-order functions also work with other functions. It takes another function as an argument or returns a function as a result. They're often used to handle tasks like controlling asynchronous operations. + +```javascript +function createMessage(prefix) { + return function (message) { // returns a new function + console.log(prefix + " " + message); + }; +} + +const sendMessage = createMessage("Hello"); // creates a new function + +sendMessage("Cess!"); // Hello, Cess! +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/check-object-property.md b/src/data/question-groups/javascript/content/check-object-property.md new file mode 100644 index 000000000..b7e843aa9 --- /dev/null +++ b/src/data/question-groups/javascript/content/check-object-property.md @@ -0,0 +1,13 @@ +There are different ways to check if an object has a specific property. The method you choose depends on what you want to check and why. I'll be using the `Object.hasOwn` method to check if an object has a property that belongs only to it, not to its parent or inherited prototype. + +```javascript +var obj = { + name: "Cess", + work: "developer", + countryVisits: 3, +}; + +console.log(Object.hasOwn(obj, "name")); // true + +console.log(Object.hasOwn(obj, "developer")); // false +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/clear-array.md b/src/data/question-groups/javascript/content/clear-array.md new file mode 100644 index 000000000..6cf3747f1 --- /dev/null +++ b/src/data/question-groups/javascript/content/clear-array.md @@ -0,0 +1,27 @@ +There are several ways to clear an array in JavaScript. However, I'll focus on the three most common methods. + +```javascript +// Setting the length of an array property to 0: + +let num = [20, 30, 40, 50]; + +num.length = 0; + +console.log(num); // [] + +// Using the splice() method: + +let num = [20, 30, 40, 50]; + +num.splice(0, num.length); + +console.log(num); // [] + +// Assigning an empty array: + +let num = [20, 30, 40, 50]; + +num = []; + +console.log(num); // [] +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/closure.md b/src/data/question-groups/javascript/content/closure.md deleted file mode 100644 index 87ad50d13..000000000 --- a/src/data/question-groups/javascript/content/closure.md +++ /dev/null @@ -1,18 +0,0 @@ -A closure is a function that has access to its outer function scope even after the outer function has returned. This means a closure can remember and access variables and arguments of its outer function even after the function has finished. - -```js -function outer() { - const name = 'Roadmap'; - - function inner() { - console.log(name); - } - - return inner; -} - -const closure = outer(); -closure(); // Roadmap -``` - -In the above example, the `inner` function has access to the `name` variable of the `outer` function even after the `outer` function has returned. Therefore, the `inner` function forms a closure. diff --git a/src/data/question-groups/javascript/content/comma-operator.md b/src/data/question-groups/javascript/content/comma-operator.md deleted file mode 100644 index ac8e5a723..000000000 --- a/src/data/question-groups/javascript/content/comma-operator.md +++ /dev/null @@ -1,8 +0,0 @@ -The Comma Operator `,` evaluates each of its operands (from left to right) and returns the value of the last operand. - -```js -let x = 1; -x = (x++, x); - -console.log(x); // 2 -``` diff --git a/src/data/question-groups/javascript/content/constructor-function.md b/src/data/question-groups/javascript/content/constructor-function.md new file mode 100644 index 000000000..45491b643 --- /dev/null +++ b/src/data/question-groups/javascript/content/constructor-function.md @@ -0,0 +1,24 @@ +A constructor function creates multiple objects with the same properties and methods. Using the "new" keyword with a constructor function creates a new object and sets "this" to that object. + +It's usually a good idea, but not required, to start the name of a constructor function with a capital letter. Doing this helps differentiate constructor functions from your regular functions and variables. + +```javascript +function myDetails(name, visits) { + this.name = name; // Set the name parameter to the object + this.visits = visits; // Set the visits parameter to the object + + + + this.newDetails = function () { + console.log( + `Hi, I'm ${this.name} and I have visited ${this.visits} countries.` + ); + }; +} + +// Create objects using the constructor + +let runDetails = new myDetails("Cess", 2);; + +runDetails.newDetails(); // Hi, I'm Cess and I have visited 2 countries. +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/create-element.md b/src/data/question-groups/javascript/content/create-element.md deleted file mode 100644 index 845da793b..000000000 --- a/src/data/question-groups/javascript/content/create-element.md +++ /dev/null @@ -1,9 +0,0 @@ -To create a new DOM element, you can use the `document.createElement` method. It accepts a tag name as an argument and returns a new element with the specified tag name. You can set attributes to the element. - -```js -const div = document.createElement('div'); - -div.id = 'roadmap-wrapper'; -div.setAttribute('data-id', 'javascript'); -console.log(div); //
-``` diff --git a/src/data/question-groups/javascript/content/css-selectors-javascript.md b/src/data/question-groups/javascript/content/css-selectors-javascript.md new file mode 100644 index 000000000..67974e87f --- /dev/null +++ b/src/data/question-groups/javascript/content/css-selectors-javascript.md @@ -0,0 +1,22 @@ +## Advanced concepts + +There are several methods to manipulate HTML elements using CSS style selectors. But I'll be using the `document.getElementById` to style a paragraph element with an `ID="styleP"` + +```html +

+ Top JavaScript interview questions for web developers +

+``` + +```javascript +// Get the HTML element with the ID "styleP" + +const styleP = document.getElementById("styleP"); + + +// Apply styles to the element + +styleP.style.color = "red"; +styleP.style.border = "3px solid black"; + +console.log(styleP.style); \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/custom-event.md b/src/data/question-groups/javascript/content/custom-event.md deleted file mode 100644 index 152e5035d..000000000 --- a/src/data/question-groups/javascript/content/custom-event.md +++ /dev/null @@ -1,33 +0,0 @@ -You can use the `CustomEvent` constructor to create a custom event. The `CustomEvent` constructor accepts two arguments: the event name and an optional object that specifies the event options. And you can use the `dispatchEvent` method to dispatch the custom event on the target element/document. - -## Creating Custom Events - -```js -const event = new CustomEvent('roadmap-updated', { - detail: { name: 'JavaScript' }, -}); -element.dispatchEvent(event); -``` - -## Listening for Custom Events - -You can listen for custom events using the `addEventListener` method. The `addEventListener` method accepts the event name and a callback function that is called when the event is dispatched. - -```js -element.addEventListener('roadmap-updated', (event) => { - console.log(event.detail); // { name: 'JavaScript' } -}); -``` - -## Removing Event Listeners - -You can remove event listeners using the `removeEventListener` method. The `removeEventListener` method accepts the event name and the callback function that was used to add the event listener. - -```js -function handleEvent(event) { - console.log(event.detail); // { name: 'JavaScript' } -} - -element.addEventListener('roadmap-updated', handleEvent); -element.removeEventListener('roadmap-updated', handleEvent); -``` diff --git a/src/data/question-groups/javascript/content/debug-javascript.md b/src/data/question-groups/javascript/content/debug-javascript.md deleted file mode 100644 index 319764e68..000000000 --- a/src/data/question-groups/javascript/content/debug-javascript.md +++ /dev/null @@ -1,38 +0,0 @@ -Debugging JavaScript code can be achieved through various methods and tools. Here's a basic guide: - -## Console Logging: - -You can use `console.log()`, `console.warn()`, `console.error()`, etc., to print values, variables, or messages to the browser's developer console. - -```js -console.log('Value of x:', x); -``` - -## Browser Developer Tools: - -Most modern browsers come equipped with developer tools. You can access these tools by pressing `F12` or right-clicking on the web page and selecting `Inspect` or `Inspect Element`. - -- **Sources Tab**: Allows you to see the loaded scripts, set breakpoints, and step through the code. -- **Console Tab**: Displays console outputs and allows for interactive JavaScript execution. -- **Network Tab**: Helps in checking network requests and responses. - -## Setting Breakpoints: - -In the `Sources` tab of the browser's developer tools, you can click on a line number to set a breakpoint. The code execution will pause at this line, allowing you to inspect variables, the call stack, and continue step-by-step. - -## Debugger Statement: - -Inserting the `debugger;` statement in your code will act as a breakpoint when the browser developer tools are open. Execution will pause at the `debugger;` line. - -```js -function myFunction() { - debugger; // Execution will pause here when dev tools are open - // ... rest of the code -} -``` - -## Call Stack and Scope: - -In the developer tools, when paused on a breakpoint or `debugger;` statement, you can inspect the `call stack` to see the sequence of function calls. The `Scope` panel will show you the values of local and global variables. - -Remember, debugging is an iterative process. It often involves setting breakpoints, checking variables, adjusting code, and re-running to ensure correctness. diff --git a/src/data/question-groups/javascript/content/defer-vs-async.md b/src/data/question-groups/javascript/content/defer-vs-async.md deleted file mode 100644 index 74c032c6e..000000000 --- a/src/data/question-groups/javascript/content/defer-vs-async.md +++ /dev/null @@ -1,25 +0,0 @@ -The main difference between `defer` and `async` is the order of execution. - -## Defer attribute - -A ` - -``` - -In the example above, `script1.js` will be executed before `script2.js`. The browser will download both scripts in parallel, but `script1.js` will be executed after the HTML page has been parsed and `script2.js` will be executed after `script1.js` has been executed. - -## Async attribute - -On the other hand, A ` - -``` - -In the example above, the browser will download both scripts in parallel, and execute them as soon as they are downloaded. The order of execution is not guaranteed. - -To know more you can check [this diagram](https://roadmap.sh/guides/avoid-render-blocking-javascript-with-async-defer) from us that explains the difference between `defer` and `async` in a visual way. diff --git a/src/data/question-groups/javascript/content/destructuring.md b/src/data/question-groups/javascript/content/destructuring.md new file mode 100644 index 000000000..4b66ce1e2 --- /dev/null +++ b/src/data/question-groups/javascript/content/destructuring.md @@ -0,0 +1,17 @@ +Destructuring lets you take out values from arrays or objects and put them into separate variables. It makes your code easier to read and reduces mistakes when writing code. You don't have to deal with extra variables; what you assign to each variable is obvious. + +``` +// list of languages + +let pLang = ["Java", "JavaScript", "Python"] + +// using destructuring to take out each language into separate variable: + +let [pLang1, pLang2, pLang3] = pLang; + +console.log(pLang1); // Java + +console.log(pLang2); // JavaScript + +console.log(pLang3); // Python +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/do-while-loop.md b/src/data/question-groups/javascript/content/do-while-loop.md deleted file mode 100644 index a1fd3a5b8..000000000 --- a/src/data/question-groups/javascript/content/do-while-loop.md +++ /dev/null @@ -1,14 +0,0 @@ -The `do...while` statement creates a loop that executes a block of code once, before checking if the condition is `true`, then it will repeat the loop as long as the condition is `true`. - -```js -let i = 0; - -do { - console.log(i); - i++; -} while (i < 3); - -// 0 -// 1 -// 2 -``` diff --git a/src/data/question-groups/javascript/content/dom.md b/src/data/question-groups/javascript/content/dom.md new file mode 100644 index 000000000..46d4fd7c4 --- /dev/null +++ b/src/data/question-groups/javascript/content/dom.md @@ -0,0 +1,7 @@ +The DOM is a structured representation of a webpage's elements **(HTML or XML page)**. Whenever an HTML page loads, the web browser creates a DOM for that page. It's a way for JavaScript to understand and change a webpage's content, layout, and style. + +![JavaScript interview questions: The DOM](https://assets.roadmap.sh/guest/document-object-model-in-javascript-8qryb.png) + +The DOM represents the web page as a tree-like structure of objects. Each web page element, like paragraphs and images, becomes an object in this tree. JavaScript uses the DOM to manipulate these objects and make the webpage interactive. + +For example, imagine you're watching a JavaScript tutorial on YouTube that you enjoy and decide to click the "like" button. When you click the "like" button, the text changes to "unlike," and the like counter goes up. JavaScript accesses and changes the DOM to update the button's text from "like" to "unlike." \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/equality-operator.md b/src/data/question-groups/javascript/content/equality-operator.md deleted file mode 100644 index b3204e858..000000000 --- a/src/data/question-groups/javascript/content/equality-operator.md +++ /dev/null @@ -1,7 +0,0 @@ -The `==` equality operator converts the operands if they are not of the same type, then applies strict comparison. The `===` strict equality operator only considers values equal that have the same type. - -```js -console.log(1 == '1'); // true -console.log(1 === '1'); // false -console.log(1 === 1); // true -``` diff --git a/src/data/question-groups/javascript/content/equality-operators.md b/src/data/question-groups/javascript/content/equality-operators.md new file mode 100644 index 000000000..0d0d5d0a2 --- /dev/null +++ b/src/data/question-groups/javascript/content/equality-operators.md @@ -0,0 +1,9 @@ +"==" and "===" are comparison operators, but they are different in how they treat type coercion. The "==" comparison operator checks if the values are the same, but doesn't care about the data type. + +The "===" comparison operator, on the other hand, checks if both the value and the data type are the same. + +``` +console.log(50 == "50"); True: string "50" is converted to number 50 + +console.log(50 === "50"); False: false, no type coercion due to different data types +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/error-in-async-await.md b/src/data/question-groups/javascript/content/error-in-async-await.md deleted file mode 100644 index 8e6757fbf..000000000 --- a/src/data/question-groups/javascript/content/error-in-async-await.md +++ /dev/null @@ -1,24 +0,0 @@ -In order to handle errors in async/await, we can use the `try/catch` statement. - -## Rejecting a promise - -```js -const promise = new Promise((resolve, reject) => { - reject(new Error('Something went wrong')); -}); -``` - -## Try/catch statement - -```js -async function main() { - try { - const result = await promise; - console.log(result); - } catch (error) { - console.log(error.message); - } -} -``` - -The `catch` block will be executed when the promise is `rejected` or when an error is thrown inside the `try` block. diff --git a/src/data/question-groups/javascript/content/error-in-promise.md b/src/data/question-groups/javascript/content/error-in-promise.md deleted file mode 100644 index 0f899cba9..000000000 --- a/src/data/question-groups/javascript/content/error-in-promise.md +++ /dev/null @@ -1,38 +0,0 @@ -In order to handle errors in promises, we can use the `catch` method or the second argument of the `then` method. - -## Rejecting a promise - -```js -const promise = new Promise((resolve, reject) => { - reject(new Error('Something went wrong')); -}); -``` - -## Catch method - -In this method, we can pass a `callback` function that will be called when the promise is `rejected`. - -```js -promise - .then((result) => { - console.log(result); - }) - .catch((error) => { - console.log(error.message); - }); -``` - -## Second argument of the then method - -In this method, we can pass two `callback` functions as arguments. The first one will be called when the promise is `resolved` and the second one will be called when the promise is `rejected`. - -```js -promise.then( - (result) => { - console.log(result); - }, - (error) => { - console.log(error.message); - } -); -``` diff --git a/src/data/question-groups/javascript/content/error-monitoring.md b/src/data/question-groups/javascript/content/error-monitoring.md new file mode 100644 index 000000000..ac242ae3f --- /dev/null +++ b/src/data/question-groups/javascript/content/error-monitoring.md @@ -0,0 +1,8 @@ +Keeping track of errors in your JavaScript application is important, especially when it's up and running and people are using it. This will allow you to find and correct mistakes to make your application reliable and easier to use. + +These methods will help you keep tabs on what's happening with your application once it's in production: + +- **Try-Catch Blocks**: Use a try...catch block to catch errors before they cause your application to crash. +- **Track uncaught errors**: Use a window.oneerror to catch errors outside a try...catch block. +- **External services**: Use external services like Sentry to track errors in production. +- **Send errors to a server**: Use AJAX or fetch API to send error data to the server for analysis. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/even-odd-check.md b/src/data/question-groups/javascript/content/even-odd-check.md new file mode 100644 index 000000000..576ef5670 --- /dev/null +++ b/src/data/question-groups/javascript/content/even-odd-check.md @@ -0,0 +1,18 @@ +One way to check if a number is even or odd is by creating a function using the modulus operator (`%`). It's a mathematical operation that helps find the remainder of a division problem. + +In the example below, the number used for the division is "2", which is already an even number. If the remainder of dividing a number by "2" is "0", then it's an even number. But if the remainder is not "0", it's an odd number. + +```javascript +function EvenOrOddNum(num) { + + if (num % 2 === 0) { + return `${num} is even`; + } else { + return `${num} is odd`; + } +} + +console.log(EvenOrOddNum(30)); // 30 is even + +console.log(EvenOrOddNum(31)); // 31 is odd +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/event-bubbling.md b/src/data/question-groups/javascript/content/event-bubbling.md deleted file mode 100644 index a6c0485e3..000000000 --- a/src/data/question-groups/javascript/content/event-bubbling.md +++ /dev/null @@ -1,19 +0,0 @@ -Event bubbling is a concept in the Document Object Model (DOM) that describes the way in which events propagate or "bubble up" through the hierarchy of nested elements in the DOM. - -When an event, such as a mouse click, occurs on a DOM element, the event will be handled by the element first, then its parent element, and so on, until the event reaches the root element. This behavior is called event bubbling. - -```js -const parent = document.querySelector('.parent'); -const child = document.querySelector('.child'); - -// Scenario of clicking on the child element -parent.addEventListener('click', () => { - console.log('Handled Last'); -}); - -child.addEventListener('click', () => { - console.log('Handled First'); -}); -``` - -In the above example, when you click on the `child` element, the event will be handled by the `child` element first, then its parent element, and so on, to the root element unless you stop the propagation (`event.stopPropagation()`) of the event. diff --git a/src/data/question-groups/javascript/content/event-loop.md b/src/data/question-groups/javascript/content/event-loop.md deleted file mode 100644 index 3dd9c2234..000000000 --- a/src/data/question-groups/javascript/content/event-loop.md +++ /dev/null @@ -1,26 +0,0 @@ -The Event loop has two main components: the Call stack and the Callback queue. - -## Call Stack - -The Call stack is a data structure that stores the tasks that need to be executed. It is a LIFO (Last In, First Out) data structure, which means that the last task that was added to the Call stack will be the first one to be executed. - -## Callback Queue - -The Callback queue is a data structure that stores the tasks that have been completed and are ready to be executed. It is a FIFO (First In, First Out) data structure, which means that the first task that was added to the Callback queue will be the first one to be executed. - -## Event Loop's Workflow: - -1. Executes tasks from the Call Stack. -2. For an asynchronous task, such as a timer, it runs in the background. JavaScript proceeds to the next task without waiting. -3. When the asynchronous task concludes, its callback function is added to the Callback Queue. -4. If the Call Stack is empty and there are tasks in the Callback Queue, the Event Loop transfers the first task from the Queue to the Call Stack for execution. - -```js -setTimeout(() => console.log('Hello from the timer'), 0); -console.log('Hello from the main code'); -``` - -1. `setTimeout` is processed, and because it's asynchronous, its callback is placed in the Callback Queue. -2. The next line, `console.log("Hello from the main code")`, is logged immediately. -3. Although the timer duration is 0 milliseconds, its callback has to wait until the Call Stack is empty. After the main code logs, the callback is moved from the Callback Queue to the Call Stack and executed. -4. The result is "Hello from the main code" being logged before "Hello from the timer". diff --git a/src/data/question-groups/javascript/content/explicit-binding.md b/src/data/question-groups/javascript/content/explicit-binding.md deleted file mode 100644 index c89dfcbdb..000000000 --- a/src/data/question-groups/javascript/content/explicit-binding.md +++ /dev/null @@ -1,19 +0,0 @@ -Explicit binding is a way to explicitly state what the `this` keyword is going to be bound to using `call`, `apply` or `bind` methods of a function. - -```js -const roadmap = { - name: 'JavaScript', -}; - -function printName() { - console.log(this.name); -} - -printName.call(roadmap); // JavaScript -printName.apply(roadmap); // JavaScript - -const printRoadmapName = printName.bind(roadmap); -printRoadmapName(); // JavaScript -``` - -In the above example, the `this` keyword inside the `printName()` function is explicitly bound to the `roadmap` object using `call`, `apply` or `bind` methods. diff --git a/src/data/question-groups/javascript/content/filter-method.md b/src/data/question-groups/javascript/content/filter-method.md deleted file mode 100644 index ad700c957..000000000 --- a/src/data/question-groups/javascript/content/filter-method.md +++ /dev/null @@ -1,12 +0,0 @@ -You can use the `filter()` method to filter an array based on a condition. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. - -```js -const numbers = [1, 2, 3, 4, 5, 6]; - -const evenNumbers = numbers.filter((number) => { - return number % 2 === 0; -}); - -console.log(numbers); // [1, 2, 3, 4, 5, 6] -console.log(evenNumbers); // [2, 4, 6] -``` diff --git a/src/data/question-groups/javascript/content/finally-block-in-promise.md b/src/data/question-groups/javascript/content/finally-block-in-promise.md deleted file mode 100644 index 5a1b00f1b..000000000 --- a/src/data/question-groups/javascript/content/finally-block-in-promise.md +++ /dev/null @@ -1,14 +0,0 @@ -The `finally` block will be executed when the promise is `resolved` or `rejected`. - -```js -promise - .then((result) => { - console.log(result); - }) - .catch((error) => { - console.log(error.message); - }) - .finally(() => { - console.log('Finally Promise has settled'); - }); -``` diff --git a/src/data/question-groups/javascript/content/find-unique-array-values.md b/src/data/question-groups/javascript/content/find-unique-array-values.md deleted file mode 100644 index 83ff66c08..000000000 --- a/src/data/question-groups/javascript/content/find-unique-array-values.md +++ /dev/null @@ -1,55 +0,0 @@ -There are serveral ways to find unique values in an array. Here are some of them: - -## Using `Set` - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript']; -const uniqueRoadmaps = [...new Set(roadmaps)]; -console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js'] -``` - -## Using `filter()` - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript']; -const uniqueRoadmaps = roadmaps.filter( - (roadmap, index) => roadmaps.indexOf(roadmap) === index -); -console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js'] -``` - -## Using `reduce()` - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript']; -const uniqueRoadmaps = roadmaps.reduce((unique, roadmap) => { - return unique.includes(roadmap) ? unique : [...unique, roadmap]; -}, []); -console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js'] -``` - -## Using `forEach()` - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript']; -const uniqueRoadmaps = []; -roadmaps.forEach((roadmap) => { - if (!uniqueRoadmaps.includes(roadmap)) { - uniqueRoadmaps.push(roadmap); - } -}); -console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js'] -``` - -## Using `for...of` - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js', 'Node.js', 'JavaScript']; -const uniqueRoadmaps = []; -for (const roadmap of roadmaps) { - if (!uniqueRoadmaps.includes(roadmap)) { - uniqueRoadmaps.push(roadmap); - } -} -console.log(uniqueRoadmaps); // ['JavaScript', 'React', 'Node.js'] -``` diff --git a/src/data/question-groups/javascript/content/for-each-method.md b/src/data/question-groups/javascript/content/for-each-method.md deleted file mode 100644 index 64826fc24..000000000 --- a/src/data/question-groups/javascript/content/for-each-method.md +++ /dev/null @@ -1,9 +0,0 @@ -No, the `forEach()` method does not return a new array. It simply calls a provided function on each element in the array. - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js']; - -roadmaps.forEach((roadmap) => { - console.log(roadmap); -}); -``` diff --git a/src/data/question-groups/javascript/content/function-declarations-expressions.md b/src/data/question-groups/javascript/content/function-declarations-expressions.md new file mode 100644 index 000000000..b2326b0a8 --- /dev/null +++ b/src/data/question-groups/javascript/content/function-declarations-expressions.md @@ -0,0 +1,17 @@ +A function declaration is a statement used to create functions in JavaScript. It starts with the function keyword followed by the function name and parameters. As long as you stick to the naming conventions, you can provide your function or parameters with any name you want. Also, function declarations are "hoisted," meaning you can call them before they're defined. + +```javascript +function functionName(parameters) { + // Body of the function +} +``` + +A function expression is also a statement, defining a function as an expression. It starts with you declaring a variable such as let, const, or var, followed by an assignment operator (=), and it doesn't need a name **(an anonymous function)** unless you give it one. Also, they are not "hoisted," meaning you can only use them after you define them, or you'll get an error. + +```javascript +let variableName = function(parameters) { + // Body of the function +} + +// The variableName will act as the function name in a function expression. +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/function-scope.md b/src/data/question-groups/javascript/content/function-scope.md new file mode 100644 index 000000000..25738e7d5 --- /dev/null +++ b/src/data/question-groups/javascript/content/function-scope.md @@ -0,0 +1,22 @@ +Function scope refers to the scope of variables defined within a function. You can only access variable values within the scope and not outside. It helps to avoid having the same variable names and keeps your JavaScript code clean. + +```javascript +function myStudyPlan() { + +var studyPlanOne = "Top JavaScript interview questions for web developers"; + +let studyPlanTwo = "Top JavaScript interview questions for web developers"; + +const studyPlanThree = "Top JavaScript interview questions for web developers"; + + + +console.log(studyPlanOne); + +console.log(studyPlanTwo); + +console.log(studyPlanThree); + +} + +myStudyPlan(); // Calls the function \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/global-local-scope.md b/src/data/question-groups/javascript/content/global-local-scope.md new file mode 100644 index 000000000..609e14f19 --- /dev/null +++ b/src/data/question-groups/javascript/content/global-local-scope.md @@ -0,0 +1,5 @@ +Global scope is all the variables you can access from anywhere in your JavaScript code. When you declare a variable outside of any function or block, it becomes a global variable. Using too many global variables can make your code difficult to read. + +![JavaScript interview questions: Global scope and local scope](https://assets.roadmap.sh/guest/global-scope-vs-local-scope-0wnm4.png) + +In contrast, local scope is a variable you can only access within a function. When you declare a variable inside any function or block of code, it becomes a local ****variable. It helps to organize your JavaScript code, making it easier to read. When coding in JavaScript, try to use local scope variables instead of global scope variables as much as possible. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/global-object.md b/src/data/question-groups/javascript/content/global-object.md new file mode 100644 index 000000000..1227f7159 --- /dev/null +++ b/src/data/question-groups/javascript/content/global-object.md @@ -0,0 +1 @@ +Global objects are containers for the global scope and its properties, e.g., variables. You can access its properties from anywhere within your code. In a web browser, the global object is the **"window,"** while in Node.js, it is **"global."** \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/heap-and-stack.md b/src/data/question-groups/javascript/content/heap-and-stack.md deleted file mode 100644 index 4ea402e65..000000000 --- a/src/data/question-groups/javascript/content/heap-and-stack.md +++ /dev/null @@ -1,20 +0,0 @@ -The Heap and Stack in JavaScript Engine are two different data structures that store data in different ways. - -## Stack - -The Stack is a small, organized region of memory. It is where primitive values, function calls, and local variables are stored. It follows a "Last In, First Out" (LIFO) order, meaning that the last item added to the stack is the first one to be removed. Each function invocation creates a new stack frame, which contains the function's local variables, return address, and other contextual data. - -## Heap - -The Heap is a large, mostly unstructured region of memory. It is where `objects`, `arrays`, and `functions` are stored. Variables from the Stack (e.g., in functions) point to locations in the Heap for these dynamically allocated structures. - -When you declare a primitive type (like a number or boolean), it's usually managed in the stack. But when you create an object, array, or function, it's stored in the heap, and the stack will hold a reference to that location in the heap. - -For example: - -```js -const name = 'JavaScript'; // Stored on the stack -const roadmap = { name: 'JS' }; // `roadmap` reference on the stack, actual object { name: 'JS' } in the heap -``` - -In the code above, the primitive value `JavaScript` for variable `name` is directly stored on the stack. For the object assigned to `roadmap`, its actual data resides in the heap, and the reference to this data (a memory address pointer) is held on the stack. diff --git a/src/data/question-groups/javascript/content/hoisting.md b/src/data/question-groups/javascript/content/hoisting.md index 898887b42..bf15c01e6 100644 --- a/src/data/question-groups/javascript/content/hoisting.md +++ b/src/data/question-groups/javascript/content/hoisting.md @@ -1,16 +1,15 @@ -Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that no matter where the functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. Note that hoisting only moves the declaration, not the initialization. +Hoisting is when a variable or function declaration gets moved to the top of its scope before the code runs. It means you can use a variable or function before you create (declare) it. -```js -console.log(x === undefined); // true -var x = 3; -console.log(x); // 3 +```javascript +console.log(hoistedVariable); // undefined + +var hoistedVariable = "initialized var hoistedVariable"; + +console.log(hoistedVariable); // correct value ``` -The above code snippet can be visualized in the following way: +In the example above, I used the variable **"hoistedVariable"** in the first console.log before creating it. Often, this would cause an error, but due to hoisting, it will show **"undefined."** The computer will move the variable creation var hoistedVariable to the top, but won't move the variable value. When I assign the value to the variable, the second console.log will show the correct answer. -```js -var x; -console.log(x === undefined); // true -x = 3; -console.log(x); // 3 -``` +![JavaScript interview questions: Hoisting](https://assets.roadmap.sh/guest/hoisting-in-javascript-7nbhj.png) + +The **"let"** and **"const"** keywords don't work well with hoisting. Even though they're moved to the top of their scope, they don't get a value right away. It creates a **"temporal dead zone"** where you can't access the variables until they're declared (created). If you try to use **"let"** or **"const"** variables before declaring them, you'll get a "ReferenceError." \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/iife.md b/src/data/question-groups/javascript/content/iife.md index 7e8d95788..a9437765c 100644 --- a/src/data/question-groups/javascript/content/iife.md +++ b/src/data/question-groups/javascript/content/iife.md @@ -1,18 +1,16 @@ -The IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. +Immediately invoked function expressions, or IIFEs, run as soon as they're created. It creates a local scope for variables so they don't mess with other parts of the code. You make an IIFE by placing your code inside the parentheses (). Also, adding another set of parentheses () at the function's end will make it run immediately. + +```javascript +// Syntax -```js (function () { - console.log('Hello Roadmap!'); -})(); -``` + // write your code here +}()); -The IIFE is frequently used to create a new scope to avoid variable hoisting from within blocks. +// Example -```js (function () { - var roadmap = 'JavaScript'; - console.log(roadmap); -})(); - -console.log(roadmap); // ReferenceError: name is not defined -``` + console.log( + "roadmap.sh helps prepare for JavaScript job interview questions" + ); +})(); \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/immutable-object.md b/src/data/question-groups/javascript/content/immutable-object.md deleted file mode 100644 index 81ddb9e2c..000000000 --- a/src/data/question-groups/javascript/content/immutable-object.md +++ /dev/null @@ -1,12 +0,0 @@ -To make an object immutable, you can use `Object.freeze()` method. It prevents the modification of existing property values and prevents the addition of new properties. - -```js -const roadmap = { - name: 'JavaScript', -}; - -Object.freeze(roadmap); - -roadmap.name = 'JavaScript Roadmap'; // throws an error in strict mode -console.log(roadmap.name); // JavaScript -``` diff --git a/src/data/question-groups/javascript/content/imports-exports.md b/src/data/question-groups/javascript/content/imports-exports.md new file mode 100644 index 000000000..79fb225d6 --- /dev/null +++ b/src/data/question-groups/javascript/content/imports-exports.md @@ -0,0 +1,27 @@ +## Advanced concepts + +Using "import" and "export" makes sharing code among many files easier. The "export" keyword shares code and data like variables, classes, and functions. On the other hand, the "import" keyword brings in these values, so you can use them in a different file. + +For example, you have two files called `function.js` and another file called `app.js`. `app.js` contains the original code you want to move to function.js using import and export. + +You'll need to create an HTML page and link it to `function.js` instead of `app.js`. This is because `app.js` contains the original code but cannot run on its own. Also, make sure to add function.js to the HTML with the type attribute set to **"module"** to prevent errors from occurring. + +```html + + + +``` + +```javascript +// Export the function in file 1 "app.js" + +export function studyJs(course) { + return `Read the JavaScript guide on, ${course}`; +} + + +// In file 2 the "js import" statement brings the "studyJs" function from "app.js" to "function.js" + +import { studyJs } from './app.js'; + +console.log(studyJs("roadmap.sh")); // Read the JavaScript guide on, roadmap.sh \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/increment-operator.md b/src/data/question-groups/javascript/content/increment-operator.md deleted file mode 100644 index b27669b44..000000000 --- a/src/data/question-groups/javascript/content/increment-operator.md +++ /dev/null @@ -1,21 +0,0 @@ -As the name says, the increment operator increases the value of a variable by **1**. There are two types of increment operators: `pre-increment` and `post-increment`. - -## Pre-increment - -The pre-increment operator increases the value of a variable by 1 and then returns the value. For example: - -```js -let x = 1; -console.log(++x); // 2 -console.log(x); // 2 -``` - -## Post-increment - -The post-increment operator returns the value of a variable and then increases the value by 1. For example: - -```js -let x = 1; -console.log(x++); // 1 -console.log(x); // 2 -``` diff --git a/src/data/question-groups/javascript/content/infinite-loop.md b/src/data/question-groups/javascript/content/infinite-loop.md deleted file mode 100644 index b068dd54b..000000000 --- a/src/data/question-groups/javascript/content/infinite-loop.md +++ /dev/null @@ -1,21 +0,0 @@ -You can use the `while` or `for` loop to create an infinite loop. - -## While loop - -To create an infinite loop with the `while` loop, we can use the `true` keyword as the condition. - -```js -while (true) { - // do something -} -``` - -## For loop - -To create an infinite loop with the `for` loop, we can use the `true` keyword as the condition. - -```js -for (let i = 0; true; i++) { - // do something -} -``` diff --git a/src/data/question-groups/javascript/content/inheritance.md b/src/data/question-groups/javascript/content/inheritance.md deleted file mode 100644 index 485782eee..000000000 --- a/src/data/question-groups/javascript/content/inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ -Inheritance is a way to create a new `Class` from an existing `Class`. The new `Class` inherits all the properties and methods from the existing `Class`. The new `Class` is called the child `Class`, and the existing `Class` is called the parent `Class`. - -## Example - -```js -class Roadmap { - constructor(name, description, slug) { - this.name = name; - this.description = description; - this.slug = slug; - } - - getRoadmapUrl() { - console.log(`https://roadmap.sh/${this.slug}`); - } -} - -class JavaScript extends Roadmap { - constructor(name, description, slug) { - super(name, description, slug); - } - - greet() { - console.log(`${this.name} - ${this.description}`); - } -} - -const js = new JavaScript( - 'JavaScript Roadmap', - 'Learn JavaScript', - 'javascript' -); - -js.getRoadmapUrl(); // https://roadmap.sh/javascript -js.greet(); // JavaScript Roadmap - Learn JavaScript -``` - -In the above example, the `JavaScript` class inherits the `getRoadmapUrl()` method from the `Roadmap` class. This is because the `JavaScript` class extends the `Roadmap` class using the `extends` keyword. In the `JavaScript` class, the `getRoadmapUrl()` method is not found, so JavaScript looks up the prototype chain and finds the `getRoadmapUrl()` method in the `Roadmap` class. diff --git a/src/data/question-groups/javascript/content/innerhtml-vs-innertext.md b/src/data/question-groups/javascript/content/innerhtml-vs-innertext.md new file mode 100644 index 000000000..732e2dd12 --- /dev/null +++ b/src/data/question-groups/javascript/content/innerhtml-vs-innertext.md @@ -0,0 +1,33 @@ +## Advanced concepts + +innerHTML is what you use to get or change the HTML content of an element. It shows you the plain text and the HTML tags used to create the text. For example, if you have a paragraph with an italics tag, innerHTML will show the em tags in the final result. + +```html +

+ + JavaScript interview questions + +

+``` + +```javascript +let textOne = document.getElementById("text"); + +console.log(textOne.innerHTML); // JavaScript interview questions +``` + +On the other hand, innerText gets or changes the plain text inside an element. It shows you the text on the page but not the HTML tags used to create the text. + +```html +

+ + JavaScript interview questions + +

+``` + +```javascript +let textOne = document.getElementById("text"); + +console.log(textOne.innerText); // JavaScript interview questions +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/isnan-function.md b/src/data/question-groups/javascript/content/isnan-function.md new file mode 100644 index 000000000..e32a66b61 --- /dev/null +++ b/src/data/question-groups/javascript/content/isnan-function.md @@ -0,0 +1,7 @@ +You use the isNaN function to check when a value is **"Not a Number."** It attempts to convert the given value to a number and then checks if the result is a NaN. If the value is not a number, it'll return true, but if it is a number, it'll return false. + +```javascript +console.log(isNaN("study")); // true + +console.log(isNaN(4)); // false +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/java-vs-javascript.md b/src/data/question-groups/javascript/content/java-vs-javascript.md new file mode 100644 index 000000000..8ba625632 --- /dev/null +++ b/src/data/question-groups/javascript/content/java-vs-javascript.md @@ -0,0 +1,5 @@ +Java and JavaScript are different programming languages in terms of syntax and uses. [Java](https://roadmap.sh/java) is a programming language that Sun Microsystems created in the '90s and is now owned by Oracle. It is a general-purpose, object-oriented programming language often used for building software. Examples of this software include desktop, web apps, and mobile apps for Android. + +Java is also a statically typed language, meaning a variable's data type must be known at compile time. Before starting the program, you must understand what kind of data you're working with. + +In contrast, Brendan Eich created JavaScript, a scripting language, at Netscape in 1995. It is a dynamically typed language, meaning that a variable's data type is determined at runtime. You do not have to declare the data type of a variable before using it. Check out the guide on the [differences between Java and JavaScript](https://roadmap.sh/java/vs-javascript) to learn more. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/javascript-data-types.md b/src/data/question-groups/javascript/content/javascript-data-types.md new file mode 100644 index 000000000..aa09b9572 --- /dev/null +++ b/src/data/question-groups/javascript/content/javascript-data-types.md @@ -0,0 +1,16 @@ +Primitive and non-primitive data types are the two main data types in JavaScript. Primitive data types are the main elements that make up all the data you work with in JavaScript. They are immutable, meaning you can't change their values once you create them. Also, they're stored in memory as single values. Some examples of primitive data types include: + +- Number (numeric values, e.g., 78). +- String (text values, e.g., "hey"). +- Boolean values (true or false). +- Null +- Undefined +- Symbols + +![JavaScript interview questions: Data types](https://assets.roadmap.sh/guest/javascript-data-types-5r91t.png) + +Non-primitive data types, also called reference data types, store groups of data or complex structures. They are mutable, meaning you can change their values once you create them. Unlike primitive data types, they're stored in memory as references rather than single values. Some examples of non-primitive data types include: + +- Object (collection of key-value pairs, e.g., { name: 'cess', age: 26 };). +- Array (e.g., [10, 12, 13]). +- Function (e.g., function add(a = 10, b = 5) { return a + b; }). \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/javascript-ending.md b/src/data/question-groups/javascript/content/javascript-ending.md new file mode 100644 index 000000000..179afa8ef --- /dev/null +++ b/src/data/question-groups/javascript/content/javascript-ending.md @@ -0,0 +1,10 @@ +## Wrapping up + +Learning JavaScript is a continuous process that requires regular practice, self-assessment, and dedication. By studying the JavaScript interview questions and answers above, you have made considerable progress in improving your skills and confidence. + +Feel free to mix it up during your study hours by asking different questions and using various scenarios. It'll make you feel more at ease and ready for whatever JavaScript interview questions you might see in actual interviews. + +Set aside time each day or week to practice coding problems, work on your projects, and study. Also, jot down notes, make summaries, or even teach someone else. Doing this will solidify your learning and show you where you need extra work. + +To improve at JavaScript and find more helpful resources, check out the [JavaScript guide](https://roadmap.sh/javascript) on [roadmap.sh](http://roadmap.sh). It has valuable resources to help you learn and prepare for JavaScript interviews. + diff --git a/src/data/question-groups/javascript/content/javascript-frameworks.md b/src/data/question-groups/javascript/content/javascript-frameworks.md new file mode 100644 index 000000000..f11e0e649 --- /dev/null +++ b/src/data/question-groups/javascript/content/javascript-frameworks.md @@ -0,0 +1,5 @@ +Listed below are some common JavaScript frameworks and their uses: + +- **Node.js**: Builds backend web apps and APIs. +- **React**: Good for building single-page apps (SPAs), e.g., chat apps. +- **Angular**: Building web apps like social media apps and features like user authentication. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/labelled-statements.md b/src/data/question-groups/javascript/content/labelled-statements.md deleted file mode 100644 index 4509b0fa2..000000000 --- a/src/data/question-groups/javascript/content/labelled-statements.md +++ /dev/null @@ -1,15 +0,0 @@ -JavaScript label statements are used to prefix a label to an identifier. It can be used with `break` and `continue` statement to control the flow more precisely. - -```js -loop1: for (let i = 0; i < 5; i++) { - if (i === 1) { - continue loop1; // skips the rest of the code in the loop1 - } - console.log(`i: ${i}`); -} -// Output: -// i: 0 -// i: 2 -// i: 3 -// i: 4 -``` diff --git a/src/data/question-groups/javascript/content/logical-error.md b/src/data/question-groups/javascript/content/logical-error.md new file mode 100644 index 000000000..e894c029b --- /dev/null +++ b/src/data/question-groups/javascript/content/logical-error.md @@ -0,0 +1,3 @@ +A logical error is when your code runs without syntax or reference errors. But when it runs, it won't do what you want it to because of a mistake in how you wrote it. + +Suppose you're trying to add two numbers together in a function. But instead of using the plus sign, you use the multiplication sign by mistake. The code will still run, but you won't get your desired answer. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/logical-operators.md b/src/data/question-groups/javascript/content/logical-operators.md deleted file mode 100644 index 0ce8d56cc..000000000 --- a/src/data/question-groups/javascript/content/logical-operators.md +++ /dev/null @@ -1,43 +0,0 @@ -There are four logical operators in JavaScript: `||` (OR), `&&` (AND), `!` (NOT), and `??` (Nullish Coalescing). They can be used with boolean values, or with non-boolean values. - -## OR (||) - -The OR operator (`||`) returns the first truthy value, or the last value if none are truthy. - -```js -console.log('hello' || 0); // hello -console.log(false || 'hello'); // hello -console.log('hello' || 'world'); // hello -``` - -## AND (&&) - -The AND operator (`&&`) aka logical conjunction returns the first falsy value, or the last value if none are falsy. - -```js -console.log('hello' && 0); // 0 -console.log(false && 'hello'); // false -console.log('hello' && 'world'); // world -``` - -## NOT (!) - -It simply inverts the boolean value of its operand. - -```js -console.log(!true); // false -console.log(!false); // true -console.log(!'hello'); // false -console.log(!0); // true -``` - -## Nullish Coalescing (??) - -The Nullish Coalescing Operator (`??`) returns the right operand if the left one is `null` or `undefined`, otherwise, it returns the left operand. It's useful for setting default values without considering falsy values like `0` or `''` as absent. - -```js -console.log(null ?? 'hello'); // hello -console.log(undefined ?? 'hello'); // hello -console.log('' ?? 'hello'); // '' -console.log(0 ?? 'hello'); // 0 -``` diff --git a/src/data/question-groups/javascript/content/map-method.md b/src/data/question-groups/javascript/content/map-method.md deleted file mode 100644 index 85449ceac..000000000 --- a/src/data/question-groups/javascript/content/map-method.md +++ /dev/null @@ -1,12 +0,0 @@ -No, the `map()` method does not mutate the original array. It returns a new array with the results of calling a provided function on every element in the calling array. - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js']; - -const renamedRoadmaps = roadmaps.map((roadmap) => { - return `${roadmap} Roadmap`; -}); - -console.log(roadmaps); // ['JavaScript', 'React', 'Node.js'] -console.log(renamedRoadmaps); // ['JavaScript Roadmap', 'React Roadmap', 'Node.js Roadmap'] -``` diff --git a/src/data/question-groups/javascript/content/map.md b/src/data/question-groups/javascript/content/map.md deleted file mode 100644 index 480f6fb47..000000000 --- a/src/data/question-groups/javascript/content/map.md +++ /dev/null @@ -1,19 +0,0 @@ -Map is another data structure in JavaScript which is similar to `Object` but the key can be of any type. It is a collection of elements where each element is stored as a Key, value pair. It is also known as a Hash table or a dictionary. - -The `key` can be of any type but the `value` can be of any type. The `key` is unique and immutable, whereas the `value` can be mutable or immutable. - -```js -const roadmap = new Map(); -roadmap.set('name', 'JavaScript'); -roadmap.set('type', 'dynamic'); -roadmap.set('year', 1995); - -console.log(roadmap.get('name')); // JavaScript - -roadmap.delete('year'); -console.log(roadmap.has('year')); // false -console.log(roadmap.size); // 2 - -roadmap.clear(); -console.log(roadmap.size); // 0 -``` diff --git a/src/data/question-groups/javascript/content/measure-dimensions.md b/src/data/question-groups/javascript/content/measure-dimensions.md deleted file mode 100644 index 138c7d519..000000000 --- a/src/data/question-groups/javascript/content/measure-dimensions.md +++ /dev/null @@ -1,8 +0,0 @@ -You can use `getBoundingClientRect` method to get the dimensions of an element. - -```js -const roadmapWrapper = document.querySelector('.roadmap-wrapper'); -const dimensions = roadmapWrapper.getBoundingClientRect(); - -console.log(dimensions); // DOMRect { x: 8, y: 8, width: 784, height: 784, top: 8, right: 792, bottom: 792, left: 8 } -``` diff --git a/src/data/question-groups/javascript/content/merge-arrays.md b/src/data/question-groups/javascript/content/merge-arrays.md deleted file mode 100644 index 524e8bd8b..000000000 --- a/src/data/question-groups/javascript/content/merge-arrays.md +++ /dev/null @@ -1,25 +0,0 @@ -Yes, you can merge multiple arrays into one array using the `concat()` method, or the spread operator `...`. - -## concat() - -The `concat()` method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array. - -```js -const arr1 = [1, 2, 3]; -const arr2 = [4, 5, 6]; - -const arr3 = arr1.concat(arr2); -console.log(arr3); // [1, 2, 3, 4, 5, 6] -``` - -## Spread operator - -The spread operator `...` is used to expand an iterable object into the list of arguments. - -```js -const arr1 = [1, 2, 3]; -const arr2 = [4, 5, 6]; - -const arr3 = [...arr1, ...arr2]; -console.log(arr3); // [1, 2, 3, 4, 5, 6] -``` diff --git a/src/data/question-groups/javascript/content/nullish-coalescing-operator.md b/src/data/question-groups/javascript/content/nullish-coalescing-operator.md deleted file mode 100644 index 72c5970fb..000000000 --- a/src/data/question-groups/javascript/content/nullish-coalescing-operator.md +++ /dev/null @@ -1,8 +0,0 @@ -The Nullish Coalescing Operator (`??`) returns the right operand if the left one is `null` or `undefined`, otherwise, it returns the left operand. It's useful for setting default values without considering falsy values like `0` or `''` as absent. - -```js -console.log(null ?? 'hello'); // hello -console.log(undefined ?? 'hello'); // hello -console.log('' ?? 'hello'); // '' -console.log(0 ?? 'hello'); // 0 -``` diff --git a/src/data/question-groups/javascript/content/object-create.md b/src/data/question-groups/javascript/content/object-create.md new file mode 100644 index 000000000..4174b84bc --- /dev/null +++ b/src/data/question-groups/javascript/content/object-create.md @@ -0,0 +1,28 @@ +To create a new object using `Object.create()` method, here's an example that demonstrates it in action + +```javascript +// Create a parent object + +let myDetails = { + newDetails: function () { + console.log( + `Hello, I'm ${this.name} and I have traveled to ${this.visits} countries` + ); +} +}; + +// Create a new object using Object.create() with myDetails as prototype + +let runDetails = Object.create(myDetails); + + +// Add properties to the new object + +runDetails.name = "Cess"; + +runDetails.visits = 2; + +// Using inheritance method + +runDetails.newDetails(); // Hello, I'm Cess and I have traveled to 2 countries +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/parse-json.md b/src/data/question-groups/javascript/content/parse-json.md deleted file mode 100644 index be661bfe3..000000000 --- a/src/data/question-groups/javascript/content/parse-json.md +++ /dev/null @@ -1,9 +0,0 @@ -In order to parse JSON, you can use the `JSON.parse()` method. It parses a JSON string and returns the JavaScript equivalent. - -```js -const json = '{"name":"JavaScript","year":1995}'; -const roadmap = JSON.parse(json); - -console.log(roadmap.name); // JavaScript -console.log(roadmap.year); // 1995 -``` diff --git a/src/data/question-groups/javascript/content/prevent-default.md b/src/data/question-groups/javascript/content/prevent-default.md deleted file mode 100644 index cc721bac1..000000000 --- a/src/data/question-groups/javascript/content/prevent-default.md +++ /dev/null @@ -1,10 +0,0 @@ -The `event.preventDefault()` method is used to prevent the default action of an event. For example, when you click on a link, the default action is to navigate to the link's URL. But, if you want to prevent the navigation, you can use `event.preventDefault()` method. - -```js -const link = document.querySelector('a'); - -link.addEventListener('click', (event) => { - event.preventDefault(); - console.log('Clicked on link!'); -}); -``` diff --git a/src/data/question-groups/javascript/content/promise-all-vs-all-settled.md b/src/data/question-groups/javascript/content/promise-all-vs-all-settled.md deleted file mode 100644 index 9b0199049..000000000 --- a/src/data/question-groups/javascript/content/promise-all-vs-all-settled.md +++ /dev/null @@ -1,51 +0,0 @@ -The core difference between `Promise.all()` and `Promise.allSettled()` is that `Promise.all()` rejects immediately if any of the promises reject whereas `Promise.allSettled()` waits for all of the promises to settle (either resolve or reject) and then returns the result. - -## Initialize - -```js -const promise1 = Promise.resolve('Promise 1 resolved'); -const promise2 = Promise.reject('Promise 2 rejected'); -``` - -## Using `Promise.all()` - -```js -Promise.all([promise1, promise2]) - .then((values) => { - console.log(values); - }) - .catch((error) => { - console.log('An error occurred in Promise.all():', error); - }); - -// Output: -// An error occurred in Promise.all(): Promise 2 rejected -``` - -In the above code, the `Promise.all()` rejects immediately when any of the `promise2` rejects. - -## Using `Promise.allSettled()` - -```js -Promise.allSettled([promise1, promise2]).then((results) => { - results.forEach((result, index) => { - if (result.status === 'fulfilled') { - console.log( - `Promise ${index + 1} was fulfilled with value:`, - result.value - ); - } else { - console.log( - `Promise ${index + 1} was rejected with reason:`, - result.reason - ); - } - }); -}); - -// Output: -// Promise 1 was fulfilled with value: Promise 1 resolved -// Promise 2 was rejected with reason: Promise 2 rejected -``` - -In the above code, the `Promise.allSettled()` waits for all of the promises to settle (either resolve or reject) and then returns the result. diff --git a/src/data/question-groups/javascript/content/prototype-chain.md b/src/data/question-groups/javascript/content/prototype-chain.md deleted file mode 100644 index bde4a9fb8..000000000 --- a/src/data/question-groups/javascript/content/prototype-chain.md +++ /dev/null @@ -1,27 +0,0 @@ -The prototype chain in JavaScript refers to the chain of objects linked by their prototypes. When a property or method is accessed on an object, JavaScript first checks the object itself. If it doesn't find it there, it looks up the property or method in the object's prototype. This process continues, moving up the chain from one prototype to the next, until the property or method is found or the end of the chain is reached (typically the prototype of the base object, which is `null`). The prototype chain is fundamental to JavaScript's prototypal inheritance model, allowing objects to inherit properties and methods from other objects. - -## Example - -```js -const roadmap = { - getRoadmapUrl() { - console.log(`https://roadmap.sh/${this.slug}`); - }, -}; - -const javascript = { - name: 'JavaScript Roadmap', - description: 'Learn JavaScript', - slug: 'javascript', - greet() { - console.log(`${this.name} - ${this.description}`); - }, -}; - -Object.setPrototypeOf(javascript, roadmap); // or javascript.__proto__ = roadmap; - -javascript.getRoadmapUrl(); // https://roadmap.sh/javascript -javascript.greet(); // JavaScript Roadmap - Learn JavaScript -``` - -In the above example, the `javascript` object inherits the `getRoadmapUrl()` method from the `roadmap` object. This is because the `javascript` object's prototype is set to the `roadmap` object using the `Object.setPrototypeOf()` method. In the `javascript` object, the `getRoadmapUrl()` method is not found, so JavaScript looks up the prototype chain and finds the `getRoadmapUrl()` method in the `roadmap` object. diff --git a/src/data/question-groups/javascript/content/prototype-inheritance.md b/src/data/question-groups/javascript/content/prototype-inheritance.md new file mode 100644 index 000000000..ee7a29ff5 --- /dev/null +++ b/src/data/question-groups/javascript/content/prototype-inheritance.md @@ -0,0 +1,3 @@ +Prototype inheritance is when objects can inherit properties and methods from other objects. Each item has a "prototype," i.e., the parent object. Whenever you want to use a property or method on an object, JavaScript first checks if it has it. If not, it looks at the object's prototype to see if it has it. If the prototype has it, then the object "inherits" it. This process continues until it finds the property it's looking for or hits the end of the prototype chain. + +For example, Date objects, like timestamps, inherit their properties and methods from the Date prototype. Math objects provide existing tools and features for math tasks, but do not rely on or inherit from a Math prototype. Array objects, like lists, get their features and actions from the Array prototype. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/query-selector.md b/src/data/question-groups/javascript/content/query-selector.md deleted file mode 100644 index 43f2d34ff..000000000 --- a/src/data/question-groups/javascript/content/query-selector.md +++ /dev/null @@ -1,18 +0,0 @@ -For selecting elements in the DOM, the `querySelector` and `querySelectorAll` methods are the most commonly used. They are both methods of the `document` object, and they both accept a CSS selector as an argument. - -## querySelector - -The `querySelector` method returns the first element that matches the specified selector. If no matches are found, it returns `null`. - -```js -const roadmapWrapper = document.querySelector('.roadmap-wrapper'); -const roadmapTitle = document.querySelector('#roadmap-title'); -``` - -## querySelectorAll - -The `querySelectorAll` method returns a `NodeList` of all elements that match the specified selector. If no matches are found, it returns an empty `NodeList`. - -```js -const roadmapItems = document.querySelectorAll('.roadmap-item'); -``` diff --git a/src/data/question-groups/javascript/content/recursive-function.md b/src/data/question-groups/javascript/content/recursive-function.md new file mode 100644 index 000000000..e5c1a34f5 --- /dev/null +++ b/src/data/question-groups/javascript/content/recursive-function.md @@ -0,0 +1,20 @@ +A recursive function is a function that calls itself to solve a particular problem. It breaks down a big problem into smaller parts with each call and solves them one by one. The function has two main parts: the base case, which stops the repetition, and the recursive case, which repeats the steps until it reaches the base. + +```javascript +function myArray(arrOld) { + +// Base case: empty array + +if (arrOld.length === 0) { + return 0; + } + else { + // Recursive case: Add the first element + sum of the rest arrays + return arrOld[0] + myArray(arrOld.slice(1)); + } +} + +let newArray = [20, 30, 40, 50]; + +console.log(myArray(newArray)); // 140 +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/reduce-method.md b/src/data/question-groups/javascript/content/reduce-method.md deleted file mode 100644 index c42f1b87d..000000000 --- a/src/data/question-groups/javascript/content/reduce-method.md +++ /dev/null @@ -1,24 +0,0 @@ -You can use the `reduce()` method to reduce an array to a single value. The `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. - -## Syntax - -```js -array.reduce((accumulator, currentValue) => { - // ... -}, initialValue); -``` - -## Example - -You can use the `reduce()` method to sum all the numbers in an array. - -```js -const numbers = [1, 2, 3, 4, 5, 6]; - -const sum = numbers.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); - -console.log(numbers); // [1, 2, 3, 4, 5, 6] -console.log(sum); // 21 -``` diff --git a/src/data/question-groups/javascript/content/reference-vs-syntax-error.md b/src/data/question-groups/javascript/content/reference-vs-syntax-error.md new file mode 100644 index 000000000..59bea7092 --- /dev/null +++ b/src/data/question-groups/javascript/content/reference-vs-syntax-error.md @@ -0,0 +1,13 @@ +A syntax error happens when you write code that the JavaScript engine can't understand, so your code won't run. It can be when you make a typo spelling a keyword or forget to close a bracket, parenthesis, or curly brace. + +![JavaScript interview questions: Error handling](https://assets.roadmap.sh/guest/types-of-errors-in-javascript-9nl2m.png) + +```javascript +console.log("JavaScript interview questions" +``` + +A reference error occurs when you try to use a variable or a function that doesn't exist. The code will run, but it won't find what you're referencing since you didn't create the variable using let, var, and const keywords. + +```javascript +console.log(myStudy); +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/remove-duplicates.md b/src/data/question-groups/javascript/content/remove-duplicates.md new file mode 100644 index 000000000..499439a51 --- /dev/null +++ b/src/data/question-groups/javascript/content/remove-duplicates.md @@ -0,0 +1,9 @@ +You can use the `filter()`, `reduce()` method, and more to remove duplicates from an array. I'll be using the `set()` method as an example: + +```javascript +let myArray = [30,30,30,40,50,50,60,60]; + +let newArray = [...new Set(myArray)]; // removes duplicates and converts back to an array + +console.log(newArray); // [30, 40, 50, 60] +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/remove-element.md b/src/data/question-groups/javascript/content/remove-element.md deleted file mode 100644 index 022a6367a..000000000 --- a/src/data/question-groups/javascript/content/remove-element.md +++ /dev/null @@ -1,9 +0,0 @@ -To remove a DOM element, you can use the `remove` or `removeChild` method of the `Node` interface. - -```js -const roadmapWrapper = document.querySelector('.roadmap-wrapper'); -const roadmapTitle = document.querySelector('#roadmap-title'); - -roadmapWrapper.removeChild(roadmapTitle); -roadmapWrapper.remove(); -``` diff --git a/src/data/question-groups/javascript/content/rest-parameter.md b/src/data/question-groups/javascript/content/rest-parameter.md new file mode 100644 index 000000000..00073d3f8 --- /dev/null +++ b/src/data/question-groups/javascript/content/rest-parameter.md @@ -0,0 +1,17 @@ +The rest parameter allows you to represent many arguments in an array. It's useful when you need a function to accept extra arguments beyond what you've listed. + +![JavaScript interview questions: rest parameter](https://assets.roadmap.sh/guest/javascript-rest-parameter-lbzht.png) + +The "rest parameter" syntax consists of three dots (`...`) followed by the name of a parameter. Also, if you're using a rest parameter with other values, make sure it's the last one on the list. + +```javascript +function functionName(...restParameter) { + // Body of the function +} + +// Example 2 + +function functionName(value1, value2, ...restParameter) { + // Body of the function +} +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/reverse-string-function.md b/src/data/question-groups/javascript/content/reverse-string-function.md new file mode 100644 index 000000000..2576db588 --- /dev/null +++ b/src/data/question-groups/javascript/content/reverse-string-function.md @@ -0,0 +1,13 @@ +You can reverse a string using the `split()`, `reverse()`, and `join()` method. + +```javascript +function reverseMyString(str) { + return str.split("").reverse().join(""); +} + +let myString = "Learn JavaScript"; + +let reverseString = reverseMyString(myString); + +console.log(reverseString); // tpircSavaJ nraeL +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/scroll-to-top.md b/src/data/question-groups/javascript/content/scroll-to-top.md deleted file mode 100644 index 2ba6a91d7..000000000 --- a/src/data/question-groups/javascript/content/scroll-to-top.md +++ /dev/null @@ -1,5 +0,0 @@ -In order to scroll to the top of the page, we can use the `scrollTo` method. - -```js -window.scrollTo(0, 0); -``` diff --git a/src/data/question-groups/javascript/content/set-interval.md b/src/data/question-groups/javascript/content/set-interval.md deleted file mode 100644 index 809be796f..000000000 --- a/src/data/question-groups/javascript/content/set-interval.md +++ /dev/null @@ -1,17 +0,0 @@ -You can run some codes on interval using `setInterval` function in JavaScript. It accepts a function and a time interval in milliseconds. It returns a unique id which you can use to clear the interval using `clearInterval` function. - -```js -const intervalId = setInterval(() => { - console.log('Hello World'); -}, 1000); - -// Output: -// Hello World -// Hello World -``` - -In the above code, the `setInterval` function runs the callback function every 1000 milliseconds (1 second) and prints `Hello World` to the console. It returns a unique id which you can use to clear the interval using `clearInterval` function. - -```js -clearInterval(intervalId); -``` diff --git a/src/data/question-groups/javascript/content/set-timeout.md b/src/data/question-groups/javascript/content/set-timeout.md deleted file mode 100644 index 4cabf98e3..000000000 --- a/src/data/question-groups/javascript/content/set-timeout.md +++ /dev/null @@ -1,16 +0,0 @@ -To run a piece of code after a certain time, you can use `setTimeout` function in JavaScript. It accepts a function and a time interval in milliseconds. It returns a unique id which you can use to clear the timeout using `clearTimeout` function. - -```js -const timeoutId = setTimeout(() => { - console.log('Hello World'); -}, 1000); - -// Output: -// Hello World -``` - -In the above code, the `setTimeout` function runs the callback function after 1000 milliseconds (1 second) and prints `Hello World` to the console. It returns a unique id which you can use to clear the timeout using `clearTimeout` function. - -```js -clearTimeout(timeoutId); -``` diff --git a/src/data/question-groups/javascript/content/set.md b/src/data/question-groups/javascript/content/set.md deleted file mode 100644 index 113268a13..000000000 --- a/src/data/question-groups/javascript/content/set.md +++ /dev/null @@ -1,17 +0,0 @@ -Set is another data structure in JavaScript which is similar to `Array` but the values are unique. It is a collection of elements where each element is stored as a value without any keys. - -```js -const roadmap = new Set(); -roadmap.add('JavaScript'); -roadmap.add('JavaScript'); - -roadmap.add('dynamic'); -roadmap.add(1995); - -console.log(roadmap.size); // 3, because the value 'JavaScript' is already present in the set -console.log(roadmap.has('JavaScript')); // true - -roadmap.delete('JavaScript'); -console.log(roadmap.has('JavaScript')); // false -console.log(roadmap.size); // 2 -``` diff --git a/src/data/question-groups/javascript/content/spread-array-output.md b/src/data/question-groups/javascript/content/spread-array-output.md new file mode 100644 index 000000000..ada6ad47b --- /dev/null +++ b/src/data/question-groups/javascript/content/spread-array-output.md @@ -0,0 +1,9 @@ +```javascript +const arr1 = [1,2,3]; + +const arr2 = [...arr1, 4, 5, 6]; + +console.log(arr2); // what ? + +console.log(arr2); // [1, 2, 3, 4, 5, 6] +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/spread-operator-objects.md b/src/data/question-groups/javascript/content/spread-operator-objects.md new file mode 100644 index 000000000..fc957768b --- /dev/null +++ b/src/data/question-groups/javascript/content/spread-operator-objects.md @@ -0,0 +1,15 @@ +The spread operator (`...`) allows you to merge objects through a function call or directly combine objects. Below is an example using a function call: + +```javascript +function mergeObj(firstObj, secondObj) { + return {...firstObj, ...secondObj} // merge both objects +} + +let firstObj = { name: "cess", city: "Lagos"}; + +let secondObj = {occupation: "developer", countriesVisited: 2}; + +let newObj = mergeObj(firstObj, secondObj); + +console.log(newObj); // {name: 'cess', city: 'Lagos', occupation: 'developer', countriesVisited: 2} +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/spread-operator.md b/src/data/question-groups/javascript/content/spread-operator.md deleted file mode 100644 index 428a1dc7b..000000000 --- a/src/data/question-groups/javascript/content/spread-operator.md +++ /dev/null @@ -1,19 +0,0 @@ -The spread operator in JavaScript is represented by three dots (`...`). It allows the elements of an array or properties of an object to be expanded or "spread" into individual elements or properties. This can be useful in various contexts, such as when passing elements as function arguments, cloning arrays and objects, or merging arrays and objects. - -```js -const roadmaps = ['JavaScript', 'React', 'Node.js']; -const bestPractices = ['AWS', 'API Security']; - -const resources = [...roadmaps, ...bestPractices]; -console.log(resources); // ['JavaScript', 'React', 'Node.js', 'AWS', 'API Security'] -``` - -```js -const roadmap = { - name: 'JavaScript', - type: 'dynamic', -}; - -const roadmapClone = { ...roadmap }; // shallow copy -console.log(roadmapClone); // { name: 'JavaScript', type: 'dynamic' } -``` diff --git a/src/data/question-groups/javascript/content/strict-mode.md b/src/data/question-groups/javascript/content/strict-mode.md new file mode 100644 index 000000000..0ae775ad7 --- /dev/null +++ b/src/data/question-groups/javascript/content/strict-mode.md @@ -0,0 +1,33 @@ +## Advanced concepts + +JavaScript's strict mode makes you follow strict rules **(best practices)** when writing code. It prevents common mistakes JavaScript often ignores, such as undeclared variables, and keeps your code safe. Add the string `"use strict";` at the top of the JavaScript file or function to enable strict mode. + +```javascript +// Without strict mode + +courseNo = "200"; + +console.log(courseNo); // 200 + +// With strict mode + +"use strict"; // top of your JS file + +courseNo= "200"; + +console.log(courseNo); // courseNo is not defined i.e, you didn't create it using the var, const, or let keywords. + + +// Strict mode: Functions + +function strictExample() { + +"use strict"; + +courseNumber = "200"; // Error: courseNumber is not defined + +console.log(courseNumber ); // code won't run + +} + +strictExample(); // ReferenceError \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/substring-check.md b/src/data/question-groups/javascript/content/substring-check.md new file mode 100644 index 000000000..3c607c8fb --- /dev/null +++ b/src/data/question-groups/javascript/content/substring-check.md @@ -0,0 +1,11 @@ +You can use different methods like `search()` or `indexOf()` to see if a string has a particular word. But I'll use the includes() method to check if a string contains a specific substring. It'll return "true" if the substring is present in the string and "false" if not. + +```javascript +function findSubstring(mainString, substring) { + return mainString.includes(substring); +} + +console.log(findSubstring("Learn JavaScript", "JavaScript")); // True - It contains JavaScript + +console.log(findSubstring("Learn JavaScript", "Python")); // False - It doesn't contain Python +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/switch-case.md b/src/data/question-groups/javascript/content/switch-case.md deleted file mode 100644 index 6319da131..000000000 --- a/src/data/question-groups/javascript/content/switch-case.md +++ /dev/null @@ -1,19 +0,0 @@ -The `switch` statement evaluates an expression, matching the expression's value to a `case` clause, and executes statements associated with that `case`, as well as statements in `case`s that follow the matching `case`. - -```js -const fruit = 'Papayas'; - -switch (fruit) { - case 'Oranges': - console.log('Oranges are $0.59 a pound.'); - break; - case 'Mangoes': - case 'Papayas': - console.log('Mangoes and papayas are $2.79 a pound.'); - break; - default: - console.log(`Sorry, we are out of ${fruit}.`); -} - -// Mangoes and papayas are $2.79 a pound. -``` diff --git a/src/data/question-groups/javascript/content/ternary-operator.md b/src/data/question-groups/javascript/content/ternary-operator.md deleted file mode 100644 index 5b6e3133e..000000000 --- a/src/data/question-groups/javascript/content/ternary-operator.md +++ /dev/null @@ -1,5 +0,0 @@ -The ternary operator is a conditional operator that takes three operands. It is frequently used as a shortcut for the `if` statement. - -```js -console.log(condition ? true : false); -``` diff --git a/src/data/question-groups/javascript/content/this-keyword.md b/src/data/question-groups/javascript/content/this-keyword.md new file mode 100644 index 000000000..4b20039fe --- /dev/null +++ b/src/data/question-groups/javascript/content/this-keyword.md @@ -0,0 +1,5 @@ +The "this" keyword in JavaScript refers to the object or context on which a code runs. Examples of these codes include function calls, object methods, event handlers, and more. You use it to access the properties and methods of that object. The value of this keyword changes depending on how you use (or call) the function. + +![JavaScript interview questions: the this keyword](https://assets.roadmap.sh/guest/the-this-keyword-ohsom.png) + +When you use "this" in the context of a method, "this" indicates the object that owns the method. For standalone functions, "this" is the global object, but in strict mode it's undefined. Also, in event handlers, "this" refers to the element that caused the event. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/undefined-vs-null.md b/src/data/question-groups/javascript/content/undefined-vs-null.md new file mode 100644 index 000000000..b82128247 --- /dev/null +++ b/src/data/question-groups/javascript/content/undefined-vs-null.md @@ -0,0 +1,35 @@ +Undefined variables are variables that the developer has declared but not yet assigned a value. + +```javascript +// Example 1 + +let study; + +console.log(study); // undefined var + +// Example 2 + +let myObj = {}; // empty object + +console.log(myObj.name); // undefined because name does not exist +``` + +A null variable is a variable or property that is empty. You use null variables when you want to show that a variable has no values or want to clear the value of a variable. + +```javascript +// Example 1 + +let study = null; + +console.log(study); // null + +// Example 2 + +let obj = { + name: "cess", +}; + +obj.name = null; + +console.log(obj.name); // null +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/variable-declaration.md b/src/data/question-groups/javascript/content/variable-declaration.md new file mode 100644 index 000000000..7a81cd012 --- /dev/null +++ b/src/data/question-groups/javascript/content/variable-declaration.md @@ -0,0 +1,43 @@ +A variable declaration is when you create a variable to store a value in JavaScript. You give it a descriptive name, which you can then use to store or retrieve the value. In JavaScript, you use **var, let, and const** keywords to declare variables. + +![JavaScript interview questions: Declaring variables](https://assets.roadmap.sh/guest/variable-declarations-in-javascript-r8f7v.png) + +Older versions of JavaScript used the var keyword to declare variables**.** Variables declared using the var keyword have a function scope. It lets you give variables the same name and a new value even in the same scope. However, it may result in confusion and errors, making debugging your code difficult. + +```javascript +var course = "java"; + +var course = "JavaScript interview questions"; // No error + +console.log(course); // JavaScript interview questions +``` + +The let keyword is a new way to declare variables in JavaScript in ECMAScript 2015 (ES6). Variables declared using the let keyword have a block scope. You can change the value, but you can't use the same name for a variable in the same block scope. It helps make debugging code easier compared to the var keyword. + +```javascript +let course = "java"; + +let course = "JavaScript interview questions"; + +console.log(course);// Identifier 'course' has already been declared + + + +// Example 2 + +let course = "java"; + +course = "JavaScript interview questions"; + +console.log(course);// JavaScript interview questions +``` + +The const keyword works as the let keyword since both are block-scoped. However, you cannot change the value or use the same name for a variable in the same scope. + +```javascript +const course = "java"; + +course = "JavaScript interview questions"; + +// Error: Assignment to constant variable. +``` \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/variable-naming-conventions.md b/src/data/question-groups/javascript/content/variable-naming-conventions.md new file mode 100644 index 000000000..178b16077 --- /dev/null +++ b/src/data/question-groups/javascript/content/variable-naming-conventions.md @@ -0,0 +1,7 @@ +The following are the naming conventions for variables in JavaScript: + +- Write variable names in camelCase. Use lowercase letters to begin the variable name and then uppercase for each new word, e.g., myName. +- Use descriptive variable names. Instead of using "p" as a variable name for a password, use userPassword instead. +- Don't use JavaScript keywords such as if, for, or while as variable names. +- Don't include special characters like punctuation and math operators in your variable names. Only use underscores (_) and dollar signs ($). +- Don't start variable names with numbers; instead, place them at the end. For example, you can't have 99myName, but myName99 is okay. \ No newline at end of file diff --git a/src/data/question-groups/javascript/content/variable-number-of-arguments.md b/src/data/question-groups/javascript/content/variable-number-of-arguments.md deleted file mode 100644 index a7946db3e..000000000 --- a/src/data/question-groups/javascript/content/variable-number-of-arguments.md +++ /dev/null @@ -1,27 +0,0 @@ -In JavaScript, you can accept a variable number of arguments in a function using the `arguments` object or the rest parameter (`...`). - -## Using the `arguments` object: - -The `arguments` is an array-like object that holds all of the passed arguments. They are only available inside the function body. - -```js -function displayArgs() { - for (let i = 0; i < arguments.length; i++) { - console.log(arguments[i]); - } -} -displayArgs(1, 2, 3, 4); // Outputs: 1, 2, 3, 4 -``` - -## Using the rest parameter: - -The rest parameter allows you to represent an indefinite number of arguments as an array. - -```js -function displayArgs(...args) { - args.forEach((arg) => console.log(arg)); -} -displayArgs(1, 2, 3, 4); // Outputs: 1, 2, 3, 4 -``` - -The rest parameter (`...args` in the example) is generally more modern and flexible, and it provides an actual array, unlike the array-like `arguments` object. diff --git a/src/data/question-groups/javascript/content/window-vs-document.md b/src/data/question-groups/javascript/content/window-vs-document.md new file mode 100644 index 000000000..be760c3c8 --- /dev/null +++ b/src/data/question-groups/javascript/content/window-vs-document.md @@ -0,0 +1,3 @@ +A window object represents the entire browser or tab. It controls everything on the page, from loading content to responding to your clicks. The window object is a topmost object that helps manage the browser window. + +In contrast, the document object is a window property. The document object represents the web page's content **(HTML document)** you're looking at in the browser, such as the text. It enables you to interact with, change, and style web elements such as paragraphs using methods like `getElementById()`. \ No newline at end of file diff --git a/src/data/question-groups/javascript/javascript.md b/src/data/question-groups/javascript/javascript.md index bd3052471..43f9337d4 100644 --- a/src/data/question-groups/javascript/javascript.md +++ b/src/data/question-groups/javascript/javascript.md @@ -1,13 +1,15 @@ --- order: 1 briefTitle: 'JavaScript' -briefDescription: 'Test, rate and improve your JavaScript knowledge with these questions.' -title: 'JavaScript Questions' -description: 'Test, rate and improve your JavaScript knowledge with these questions.' -isNew: false +briefDescription: 'Ace your next JavaScript developer interview with our Q&As that are popular among hiring managers.' +title: 'Top 30 JavaScript Interview Questions and Answers' +description: 'Ace your next JavaScript developer interview with our Q&As that are popular among hiring managers.' +isNew: true +authorId: 'ekene' +ending: 'javascript-ending.md' seo: - title: 'JavaScript Questions' - description: 'Curated list of JavaScript questions to test, rate and improve your knowledge. Questions are based on real world experience and knowledge.' + title: 'Top 30 JavaScript Interview Questions and Answers' + description: 'Ace your next JavaScript developer interview with our Q&As that are popular among hiring managers.' ogImageUrl: 'https://assets.roadmap.sh/guest/javascript-questions-x6n2w.jpg' keywords: - 'javascript quiz' @@ -19,379 +21,217 @@ sitemap: priority: 1 changefreq: 'monthly' questions: - - question: What is JavaScript? - answer: JavaScript (often abbreviated as JS) is a high-level, versatile, and widely-used programming language primarily known for its role in web development. It enables interactive and dynamic behavior on websites. + - question: How does Java differ from JavaScript? + answer: java-vs-javascript.md topics: - - 'Core' - - 'Beginner' - - question: What is the difference between `var`, `let`, and `const` in JavaScript? - answer: In JavaScript, `var` is function-scoped and was traditionally used to declare variables. `let` and `const` are block-scoped. The key difference between `let` and `const` is that `let` allows for reassignment while `const` creates a read-only reference. + - 'Core Concepts' + - question: What are the various data types that exist in JavaScript? + answer: javascript-data-types.md topics: - - 'Core' - - 'Beginner' - - question: What is the difference between `null` and `undefined`? - answer: The `null` is an assignment value. It can be assigned to a variable as a representation of no value. But the `undefined` is a primitive value that represents the absence of a value, or a variable that has not been assigned a value. + - 'Core Concepts' + - question: What is the difference between undefined and null in JavaScript? + answer: undefined-vs-null.md topics: - - 'Core' - - 'Beginner' - - question: What is the difference between `==` and `===`? - answer: equality-operator.md + - 'Core Concepts' + - question: What is the use of the isNaN function? + answer: isnan-function.md topics: - - 'Core' - - 'Beginner' - - question: What are the different ways to declare a variable in JavaScript? - answer: There are three ways to declare a variable in JavaScript `var`, `let`, and `const`. + - 'Core Concepts' + - question: What are the conventions of naming a variable in JavaScript? + answer: variable-naming-conventions.md topics: - - 'Core' - - 'Intermediate' - - question: What are Scopes in JavaScript? - answer: A scope is a set of variables, objects, and functions that you have access to. There are three types of scopes in JavaScript. Which are Global Scope, Function Scope (Local Scope), and Block Scope. + - 'Core Concepts' + - question: What is a variable declaration, and how are var, let, and const keywords different? + answer: variable-declaration.md topics: - - 'Core' - - 'Intermediate' - - question: What is ternary operator in JavaScript? - answer: ternary-operator.md + - 'Core Concepts' + - question: Explain the concept of global scope and local scope in JavaScript + answer: global-local-scope.md topics: - - 'Core' - - 'Intermediate' - - question: How to implement your own Custom Event in JavaScript? - answer: custom-event.md + - 'Core Concepts' + - question: Explain the concept of the global object in JavaScript + answer: global-object.md topics: - - 'Event' - - 'Advanced' - - question: What is a closure in JavaScript? - answer: closure.md - topics: - - 'Core' - - 'Advanced' - - question: Does Arrow functions have their own `this`? - answer: No, arrow functions do not have their own `this`. Instead, they inherit the `this` of the enclosing lexical scope. - topics: - - 'Function' - - 'Intermediate' - - question: Does `map()` method mutate the original array? - answer: map-method.md - topics: - - 'Core' - - 'Intermediate' - - question: Does `forEach()` method return a new array? - answer: for-each-method.md - topics: - - 'Core' - - 'Intermediate' - - question: How to use `filter()` method? - answer: filter-method.md - topics: - - 'Core' - - 'Intermediate' - - question: What is the difference between `map()` and `forEach()` methods? - answer: The `map()` method creates a new array with the results of calling a provided function on every element in the calling array. Whereas, the `forEach()` method executes a provided function once for each array element. - topics: - - 'Core' - - 'Intermediate' - - question: How to use `reduce()` method? - answer: reduce-method.md - topics: - - 'Core' - - 'Intermediate' - - question: What is the difference between `map()` and `reduce()` methods? - answer: The `map()` method creates a new array with the results of calling a provided function on every element in the calling array. Whereas, the `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. - topics: - - 'Core' - - 'Intermediate' - - question: What is Prototype Chain in JavaScript? - answer: prototype-chain.md - topics: - - 'OOP' - - 'Advanced' - - question: What is IIFE in JavaScript? - answer: iife.md - topics: - - 'Function' - - 'Advanced' - - question: What is Inheritance in JavaScript? - answer: inheritance.md - topics: - - 'OOP' - - 'Advanced' - - question: What is Map in JavaScript? - answer: map.md - topics: - - 'Date Type' - - 'Beginner' - - question: What is Set in JavaScript? - answer: set.md - topics: - - 'Data Type' - - 'Beginner' - - question: How you can find unique values in an array? - answer: find-unique-array-values.md - topics: - - 'Core' - - 'Intermediate' - - question: What is a JavaScript promise? - answer: A Promise in JavaScript represents a value that may not be available yet but will be at some point. Promises provide a way to handle asynchronous operations, offering methods like `.then()` and `.catch()` to register callbacks for success and failure. - topics: - - 'Promise' - - 'Advanced' - - question: What is the purpose of the `async/await` in JavaScript? - answer: The `async/await`, introduced in ES2017, provides a more readable and cleaner way to handle asynchronous operations compared to callbacks and promises. An `async` function always returns a promise, and within such a function, you can use `await` to pause execution until a promise settles. - topics: - - 'Promise' - - 'Advanced' - - question: What is callback hell in JavaScript? - answer: callback-hell.md - topics: - - 'Core' - - 'Advanced' - - question: How to enable strict mode in JavaScript? - answer: To enable strict mode in JavaScript, you need to add the following line at the top of the file or function `'use strict';`. - topics: - - 'Core' - - 'Beginner' - - question: Explain `alert()`, `prompt()`, and `confirm()` methods in JavaScript? - answer: alert-prompt-confirm.md - topics: - - 'Event' - - 'Intermediate' - - question: How to handle event bubbling in JavaScript? - answer: event-bubbling.md - topics: - - 'Event' - - 'Beginner' - - question: What is Event Capturing in JavaScript? - answer: Event capturing is the first phase of event propagation. In this phase, the event is captured by the outermost element and propagated to the inner elements. It is also known as trickling. It is the opposite of event bubbling. - topics: - - 'Event' - - 'Beginner' - - question: What is the spread operator in JavaScript? - answer: spread-operator.md - topics: - - 'Core' - - 'Intermediate' - - question: Is Java and JavaScript the same? - answer: No, Java and JavaScript are distinct languages. Their similarity in name is coincidental, much like `car` and `carpet`. Java is often used for backend and mobile apps, while JavaScript powers web interactivity and backend. - topics: - - 'Core' - - 'Beginner' - - question: What is `preventDefault()` method in JavaScript? - answer: prevent-default.md - topics: - - 'Event' - - 'Intermediate' - - question: What is Hoisting in JavaScript? + - 'Core Concepts' + - question: Explain the concept of hoisting in JavaScript with examples answer: hoisting.md topics: - - 'Core' - - 'Intermediate' - - question: What is DOM? - answer: The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. + - 'Core Concepts' + - question: What is the purpose of the "this" keyword in JavaScript? + answer: this-keyword.md topics: - - 'DOM' - - 'Beginner' - - question: Difference between `Promise.all()` and `Promise.allSettled()`? - answer: promise-all-vs-all-settled.md + - 'Core Concepts' + - question: What is the difference between the "==" and "===" operators in JavaScript? + answer: equality-operators.md topics: - - 'Promise' - - 'Advanced' - - question: What is the difference between `Map` and `WeakMap` in JavaScript? - answer: The `Map` object holds key-value pairs and remembers the original insertion order of the keys. Whereas, the `WeakMap` object is a collection of key/value pairs in which the keys are weakly referenced. You can use any data type as a key or value in a `Map` whereas in `WeakMap` you can only use objects as keys. The `WeakMap` is not iterable whereas `Map` is. In `WeakMap` it holds the weak reference to the original object which means if there are no other references to an object stored in the `WeakMap`, those objects can be garbage collected. + - 'Core Concepts' + - question: What would be the result of 10+2+"9"? + answer: addition-operator-result.md topics: - - 'Data Type' - - 'Advanced' - - question: Garbage collection in JavaScript? - answer: The JavaScript engine uses automatic garbage collection. JavaScript automatically manages memory by freeing up space used by objects no longer needed. This algorithm is called Mark and Sweep, which is performed periodically by the JavaScript engine. + - 'Core Concepts' + - question: What are function declarations, and how are they different from function expressions? + answer: function-declarations-expressions.md topics: - - 'Core' - - 'Advanced' - - question: How to make an Object immutable in JavaScript? - answer: immutable-object.md + - 'Functions' + - question: What is the difference between a "callback" function and a "higher-order" function, with examples + answer: callback-higher-order-functions.md topics: - - 'Core' - - 'Advanced' - - question: What is Type Casting? - answer: Type conversion (or typecasting) means transfer of data from one data type to another. Implicit conversion happens when the compiler (for compiled languages) or runtime (for script languages like `JavaScript`) automatically converts data types. + - 'Functions' + - question: What is an immediately invoked function expression (IIFE)? Provide an example + answer: iife.md topics: - - 'Data Type' - - 'Intermediate' - - question: What are Explicit binding in JavaScript? - answer: explicit-binding.md + - 'Functions' + - question: How would you implement a JavaScript function to reverse a string? + answer: reverse-string-function.md topics: - - 'Function' - - 'Advanced' - - question: How to run a piece of code after a specific time interval? - answer: set-interval.md + - 'Functions' + - question: Write a JavaScript function to check if a number is even or odd + answer: even-odd-check.md topics: - - 'Core' - - 'Beginner' - - question: How to run a piece of code only once after a specific time? - answer: set-timeout.md + - 'Functions' + - question: Write a JavaScript function to check if a string contains a specific substring + answer: substring-check.md topics: - - 'Core' - - 'Beginner' - - question: What are Labelled Statements in JavaScript? - answer: labelled-statements.md + - 'Functions' + - question: What is the rest parameter, and how does it work? + answer: rest-parameter.md topics: - - 'Core' - - 'Intermediate' - - question: Difference between `defer` and `async` attributes in JavaScript? - answer: defer-vs-async.md + - 'Functions' + - question: What are arrow functions, and how do they differ from regular functions? + answer: arrow-functions.md topics: - - 'Core' - - 'Beginner' - - question: What is Increment operator in JavaScript? - answer: increment-operator.md + - 'Functions' + - question: Explain the concept of function scope with an example + answer: function-scope.md topics: - - 'Core' - - 'Beginner' - - question: How to accept variable number of arguments in a JavaScript function? - answer: variable-number-of-arguments.md + - 'Functions' + - question: Explain the concept of prototype inheritance in JavaScript + answer: prototype-inheritance.md topics: - - 'Function' - - 'Intermediate' - - question: How to define multiline strings in JavaScript? - answer: In order to define multiline strings in JavaScript, you need to use template literals. Template literals are enclosed by the backtick (```` ` ` ````) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (``` `${expression}` ```). + - 'Objects and Prototypes' + - question: How do you add a method to an object? + answer: add-method-to-object.md topics: - - 'Core' - - 'Beginner' - - question: Uses of `break` and `continue` statements in JavaScript? - answer: break-and-continue.md + - 'Objects and Prototypes' + - question: How can you check if an object has a specific property? + answer: check-object-property.md topics: - - 'Loop' - - 'Beginner' - - question: How to parse JSON in JavaScript? - answer: parse-json.md + - 'Objects and Prototypes' + - question: How do you define a constructor function in JavaScript? + answer: constructor-function.md topics: - - 'Core' - - 'Beginner' - - question: How to debug JavaScript code? - answer: debug-javascript.md + - 'Objects and Prototypes' + - question: Write a JavaScript code snippet to create a new object using the Object.create() method + answer: object-create.md topics: - - 'Debug' - - 'Beginner' - - question: How to handle error in Promise? - answer: error-in-promise.md + - 'Objects and Prototypes' + - question: How do you create an array in JavaScript? + answer: arrays-creation.md topics: - - 'Promise' - - 'Advanced' - - question: How to handle error in async/await? - answer: error-in-async-await.md + - 'Arrays' + - question: Explain the array prototype methods with an example + answer: array-methods.md topics: - - 'Promise' - - 'Advanced' - - question: How to use `finally` block in Promise? - answer: finally-block-in-promise.md + - 'Arrays' + - question: How do you add or remove items from an array? + answer: add-remove-array-items.md topics: - - 'Promise' - - 'Advanced' - - question: Asynchronous vs Synchronous code? - answer: async-vs-sync.md + - 'Arrays' + - question: What is a recursive function? Provide an example using arrays + answer: recursive-function.md topics: - - 'Core' - - 'Beginner' - - question: What is Event Loop in JavaScript? - answer: The Event loop is one the most important aspect to understand in JavaScript. It is the mechanism that allows JavaScript to perform non-blocking operations. It is the reason why we can use asynchronous code in JavaScript. The Event loop is a loop that constantly checks if there are any tasks that need to be executed. If there are, it will execute them. If there are no tasks to execute, it will wait for new tasks to arrive. + - 'Arrays' + - question: How do you loop through the items in an array? + answer: array-loop.md topics: - - 'Core' - - 'Advanced' - - question: How does Event Loop work in JavaScript? - answer: event-loop.md + - 'Arrays' + - question: What are the different ways to clear an array in JavaScript? + answer: clear-array.md topics: - - 'Core' - - 'Advanced' - - question: Is it possible to run JavaScript outside the browser? - answer: Yes, it is possible to run JavaScript outside the browser. There are several ways to run JavaScript outside the browser. You can use **Node.js**, **Deno**, **Bun**, or any other JavaScript runtime environment. + - 'Arrays' + - question: What are the different methods to remove duplicates from a JavaScript array? + answer: remove-duplicates.md topics: - - 'Core' - - 'Beginner' - - question: Is it possible to run 2 lines of code at the same time in JavaScript? - answer: No, it is not possible to run 2 lines of code at the same time in JavaScript. JavaScript is a single-threaded language, which means that it can only execute one line of code at a time. However, it is possible to run 2 lines of code at the same time using asynchronous code. + - 'Arrays' + - question: How would you use the spread operator to merge objects instead of arrays? + answer: spread-operator-objects.md topics: - - 'Core' - - 'Beginner' - - question: Is JavaScript a compiled or interpreted language? - answer: JavaScript is an interpreted language. This means that the JavaScript code is not compiled before it is executed. Instead, the JavaScript engine interprets the code at runtime. + - 'Arrays' + - question: What is the output of the following JavaScript code? const arr1 = [1,2,3]; const arr2 = [...arr1, 4, 5, 6]; console.log(arr2); + answer: spread-array-output.md topics: - - 'Core' - - 'Beginner' - - question: Are references copied in JavaScript? - answer: No, references are not copied in JavaScript. When you assign an object to a variable, the variable will contain a reference to the object. If you assign the variable to another variable, the second variable will also contain a reference to the object. If you change the object using one of the variables, the change will be visible using the other variable. + - 'Arrays' + - question: Explain the difference between a reference error and a syntax error with examples + answer: reference-vs-syntax-error.md topics: - - 'Core' - - 'Intermediate' - - question: What are Heap and Stack in JavaScript? - answer: heap-and-stack.md + - 'Error Handling' + - question: Explain a logical error with an example + answer: logical-error.md topics: - - 'Core' - - 'Advanced' - - question: What is Comma Operator in JavaScript? - answer: comma-operator.md + - 'Error Handling' + - question: How do you log and monitor errors in a JavaScript application, especially in a production environment? + answer: error-monitoring.md topics: - - 'Operator' - - 'Intermediate' - - question: What is Nullish Coalescing Operator? - answer: nullish-coalescing-operator.md + - 'Error Handling' + - question: What is the Document Object Model (DOM)? + answer: dom.md topics: - - 'Operator' - - 'Beginner' - - question: What are the Logical Operators in JavaScript? - answer: logical-operators.md + - 'Advanced concepts' + - question: How do you use CSS style selectors with JavaScript to manipulate an HTML element? + answer: css-selectors-javascript.md topics: - - 'Operator' - - 'Beginner' - - question: How to create Infinite Loop in JavaScript? - answer: infinite-loop.md + - 'Advanced concepts' + - question: Differentiate between innerHTML and innerText + answer: innerhtml-vs-innertext.md topics: - - 'Core' - - 'Beginner' - - question: How to use `do...while` loop in JavaScript? - answer: do-while-loop.md + - 'Advanced concepts' + - question: What is the difference between a window object and a document object in JavaScript? + answer: window-vs-document.md topics: - - 'Core' - - 'Beginner' - - question: Switch case statement in JavaScript? - answer: switch-case.md + - 'Advanced concepts' + - question: What is the Browser Object Model (BOM)? + answer: bom.md topics: - - 'Core' - - 'Beginner' - - question: How to select DOM elements using `querySelector()` and `querySelectorAll()`? - answer: query-selector.md + - 'Advanced concepts' + - question: How do you use destructuring in JavaScript? + answer: destructuring.md topics: - - 'DOM' - - 'Beginner' - - question: How to create a new Element in DOM? - answer: create-element.md + - 'Advanced concepts' + - question: What is asynchronous JavaScript, and how does it handle code execution? + answer: asynchronous-javascript.md topics: - - 'DOM' - - 'Beginner' - - question: Difference between `appendChild()` and `insertBefore()`? - answer: append-child-vs-insert-before.md + - 'Advanced concepts' + - question: What is the purpose of the strict mode in JavaScript? + answer: strict-mode.md topics: - - 'DOM' - - 'Beginner' - - question: How to remove an Element from DOM? - answer: remove-element.md + - 'Advanced concepts' + - question: What are imports and exports in JavaScript? + answer: imports-exports.md topics: - - 'DOM' - - 'Beginner' - - question: How to scroll to the top of the page using JavaScript? - answer: scroll-to-top.md + - 'Advanced concepts' + - question: What are the ways of adding JavaScript to an HTML file? + answer: adding-javascript-to-html.md topics: - - 'DOM' - - 'Beginner' - - question: How to measure dimensions of an Element? - answer: measure-dimensions.md + - 'Advanced concepts' + - question: What are some popular JavaScript frameworks, and what are their primary use cases? + answer: javascript-frameworks.md topics: - - 'DOM' - - 'Beginner' - - question: Can you merge multiple arrays in JavaScript? - answer: merge-arrays.md - topics: - - 'Core' - - 'Intermediate' - - question: How to get viewport dimensions in JavaScript? - answer: You can use `window.innerWidth` and `window.innerHeight` to get the viewport dimensions. - topics: - - 'DOM' - - 'Beginner' + - 'Advanced concepts' --- + +JavaScript interviews can be rough, even for developers with years of experience. You're expected to understand the language's basics and more complex parts. Interviewers want to see how well you know the language and how you use it to solve problems. It's a good idea to brush up on some common JavaScript interview questions before your interview. + +When preparing for a JavaScript interview, make sure you don't just memorize everything. Instead, focus on developing a good understanding of the language and getting to know it inside and out. Start by learning the basics, e.g., variables, and then you can move on to more advanced topics like async/await. Doing this will help you analyze things better and use your knowledge in building web apps. + +In this guide, I'll cover top JavaScript interview questions and answers to help you prepare well. I'll cover basic syntax, data types, and advanced concepts like async/await. You'll also find a collection of flashcards designed to help you practice and learn better. But if you want to research more on each topic or start learning about JavaScript, check out the [JavaScript roadmap](https://roadmap.sh/javascript). + +## Preparing for your JavaScript interview + +Prepare for your JavaScript interview by keeping these tips in mind: + +- Improve your understanding of basic JavaScript concepts by learning variables, arrays, and more. +- Practice building projects using sites like [LeetCode](https://leetcode.com/) and **[HackerRank](https://www.hackerrank.com/).** +- Learn how to use advanced JavaScript topics such as async/await to create apps that fix everyday issues people deal with. +- If you need to, learn JavaScript frameworks and libraries like [React](https://roadmap.sh/react) and [Angular](https://roadmap.sh/angular) for the job. Know how components and state management work in your chosen framework or library. +- Use this guide to understand common JavaScript interview questions. Practice answering them, and be ready to explain how you came up with your answers. Try practicing with a friend to get some feedback to help you improve. +- Learn about the company and what they're all about. It'll help you better understand what they want and how to answer the interview questions. diff --git a/src/data/roadmaps/javascript/faqs.astro b/src/data/roadmaps/javascript/faqs.astro index 2705cb2b8..69bb830db 100644 --- a/src/data/roadmaps/javascript/faqs.astro +++ b/src/data/roadmaps/javascript/faqs.astro @@ -9,7 +9,7 @@ export const faqs: FAQType[] = [ 'These core concepts include functions, operators, and data structures. And they should include experience with at least one JavaScript framework or core library, such as React for building interactive websites or NextJS for backends.', "If their focus is back-end development, concepts such as API design and integration, data modeling, server-side rendering, and database querying are a must, as these will be part of the developer's daily tasks.", "Front-end developers should also learn about web standards, the DOM API, web components (or lightning web components if you're working with the Salesforce ecosystem), and have some basic understanding of UX.", - 'Candidates looking to prepare for JavaScript developer interview questions should include the above-mentioned topics in their study program. For that, many developers schedule their studies at their own pace through extensive documentation, online training, and roadmaps like this one to build a solid foundational knowledge base.', + 'Candidates looking to prepare for [JavaScript developer interview questions](https://roadmap.sh/questions/javascript) should include the above-mentioned topics in their study program. For that, many developers schedule their studies at their own pace through extensive documentation, online training, and roadmaps like this one to build a solid foundational knowledge base.', ], }, {