diff --git a/src/data/question-groups/javascript/content/closure.md b/src/data/question-groups/javascript/content/closure.md new file mode 100644 index 000000000..87ad50d13 --- /dev/null +++ b/src/data/question-groups/javascript/content/closure.md @@ -0,0 +1,18 @@ +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/custom-event.md b/src/data/question-groups/javascript/content/custom-event.md new file mode 100644 index 000000000..152e5035d --- /dev/null +++ b/src/data/question-groups/javascript/content/custom-event.md @@ -0,0 +1,33 @@ +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/filter-method.md b/src/data/question-groups/javascript/content/filter-method.md new file mode 100644 index 000000000..ad700c957 --- /dev/null +++ b/src/data/question-groups/javascript/content/filter-method.md @@ -0,0 +1,12 @@ +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/for-each-method.md b/src/data/question-groups/javascript/content/for-each-method.md new file mode 100644 index 000000000..64826fc24 --- /dev/null +++ b/src/data/question-groups/javascript/content/for-each-method.md @@ -0,0 +1,9 @@ +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/map-method.md b/src/data/question-groups/javascript/content/map-method.md new file mode 100644 index 000000000..85449ceac --- /dev/null +++ b/src/data/question-groups/javascript/content/map-method.md @@ -0,0 +1,12 @@ +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/javascript.md b/src/data/question-groups/javascript/javascript.md index 925a5a9fc..215e65827 100644 --- a/src/data/question-groups/javascript/javascript.md +++ b/src/data/question-groups/javascript/javascript.md @@ -53,4 +53,39 @@ questions: topics: - 'Core' - 'Intermediate' + - question: How to implement your own Custom Event in JavaScript? + answer: custom-event.md + topics: + - 'Core' + - '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: + - 'Core' + - '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' ---