bgwebagency/who-wants-to-be-a-javascriptaire

JavaScript multiple choice questions with answers and video explanation to help you with Frontend/Web coding interviews

who-wants-to-be-a-javascriptaire's Issues

Create MCQA for Array.splice()

Please create an MCQ to be added as question number 23.

The multiple choice question should be on the topic .splice() method of an array. The difficulty level should be "Medium/Hard"

What is Array.splice() method?
The splice(startIdx): delete starting from startIdx and returns deleted items from array
This method can be used to add, remove, insert or replace an item by modifying the technique.
Ex: arr.splice(2, 0, "New")) will insert "New" at index 2 and delete 0 items.
arr.splice(2, 1)) will remove one item starting from index 2.

• add your code to 023 folder under code
• add your question to 23 in README.md file
• create a video explanation (optional)

Create MCQA for the topic: Event Bubbling & Event Capturing

Please create an MCQA to be added as question number 45.

The multiple choice question should be on the topic "Event Bubbling & Event Capturing". The difficulty level should be "Easy/Medium"

Tasks:

• add your code to 045 folder under code
• add your question to 45 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• Target generates event. And event.target returns the reference of element which raised the event
• event propagates bottom to top like a bubble
• to stop default propagation, use: event.stopPropagation()
• To get the reverse behaviour i.e. event flow from top to bottom: we use Event Capturing
  • addEventListener(evt, fn, phase) phase: false by default - bubble phase, add it as true to make capture phase

Qns that are asked in interviews:

• Which is the default propagation path ?
  • ans: bottom to top
• How can you stop the event propagation ?
  • event.stopPropagation()
• How can you change the default propagation path ? (PROBABLY THE BEST QUESTION TO ASK)
  • addEventListener("click", btn, true)
• How can you get the reference of element on which event is fired ?
  • event.target

Create MCQA for Inheritance, Subclassing and Extending built in class

Please create an MCQA to be added as question number 38.

The multiple choice question should be on the topic "Inheritance, Subclassing and Extending built in class". The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 038 folder under code
• add your question to 38 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• In ES6, extends keyword can be used for extending class. ES5 had other ways of extending class

Sample interview question for inspiration

• How can you inherit a class?
• What is subclassing?
• What is the purpose of super keyword?
  • ans: super keyword is used to call parent constructor, method or properties. super(); super.prop; super.method()
• How will you override a method?
  • ans: use same name as method in parent. It will override in child. To call specifically parent method: use super.methodName()
• How can you extend a built-in class?

Create MCQA for Date methods

Please create an MCQA to be added as question number 32.

The multiple choice question should be on the topic "Date" methods. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 032 folder under code
• add your question to 32 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• getFullYear(): returns YYYY
• getMonth(): returns month idx
• getDate()
• getDay()
• UTC Methods: getUTCYear(), getUTCMonth() etc
• setFullYear(YYYY)
• setMonth(M), setDate(D), setDay(D)
• Date.parse(dateString) returns milliseconds or new Date(dateString)

Sample interview question for inspiration

• Get current month ?
• Find the date before 50 days of a given date.
• What will be the output of new Date(35)

Create MCQA for basic array search methods: Array.indexOf(), Array.lastIndexOf(), Array.includes()

Please create an MCQA to be added as question number 24.

The multiple choice question should be on the topic basic array search methods: .indexOf(), .lastIndexOf() and .includes() method of an array. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 024 folder under code
• add your question to 24 in README.md file
• create a video explanation (optional)

I have added some explanation for these methods below in case you don't remebmer

• indexOf(): arr.indexOf(searchElem, startIndex):
  • returns index where search items is found. -1 if not found
  • returns index of first element if multiple items found
• lastIndexOf():
  • same but returns index of last element if multiple items found
• includes():
  • same but returns true or false

Sample Questions

1. What will be the output of this code ?

	let arr=["One","Two","Three","Four","Five"];
	console.log(arr.lastIndexOf("Abcd")); // -1

2. What is the difference between indexOf() and includes() method ?
   Ans: indexOf() returns index while includes() returns boolean

These questions are easy, feel free to make it bit more challenging.

Create MCQA for Array.shift()

Please create an MCQ to be added as question number 22.

The multiple choice question should be on the topic .shift() method of an array. The difficulty level should be "Medium/Hard"

What is Array.shift() method?
The shift() method add items at beginning, returns length

• add your code to 022 folder under code
• add your question to 22 in README.md file
• create a video explanation (optional)

Create MCQA for Array.reduceRight() method

Please create an MCQA to be added as question number 28.

The multiple choice question should be on the topic .reduceRight() method of an array. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 028 folder under code
• add your question to 28 in README.md file
• create a video explanation (optional)

Sample interview question for inspiration

• What is the difference between reduce() and reduceRight()?
  • reduceRight() loops from right to left

Create MCQA for topic JS module, Import, Export

Please create an MCQA to be added as question number 40.

The multiple choice question should be on the topic "JS Module, Import, Export". The difficulty level should be "Easy/Medium/Hard"

Tasks:

• add your code to 040 folder under code
• add your question to 40 in README.md file

Explanation:

• JavaScript modules allow you to break up your code into separate files. This makes it easier to maintain the code-base.
• ES Modules rely on the import and export statements.
• Without webpack:
  • We can achieve a JS module by creating a function, exporting it and while using it in script tag: mention type="module"
  • Make sure to run the file as a server to avoid CORS error

Sample interview question for inspiration

• What is a module ?
• Can you import any module inside the script tag ?
• How will you run the import and export statements on a local machine ?

Create MCQA for Array.push()

Please create an MCQ to be added as question number 19.

The multiple choice question should be on the topic .push() method of an array. The difficulty level should be "Medium/Hard"

What is Array.push() method?
The push() method add items at end of an array and returns length.

• add your code to 019 folder under code
• add your question to 19 in README.md file
• create a video explanation (optional)

Run prettier check on pre commit husky hook

The goal of this task is to make sure all the js files are formatted properly.

Install husky and prettier. And activate pre-commit hook.

Please use the following prettier settings:

{
	"arrowParens": "avoid",
	"bracketSameLine": false,
	"bracketSpacing": true,
	"embeddedLanguageFormatting": "auto",
	"endOfLine": "lf",
	"htmlWhitespaceSensitivity": "css",
	"insertPragma": false,
	"jsxSingleQuote": false,
	"printWidth": 80,
	"proseWrap": "always",
	"quoteProps": "as-needed",
	"requirePragma": false,
	"semi": false,
	"singleAttributePerLine": false,
	"singleQuote": true,
	"tabWidth": 2,
	"trailingComma": "all",
	"useTabs": true
}

Create a "prettier" script to run on all .js files
ex: "prettier": "prettier \"**/*.+(js)\"",

Create a "check-format" script
ex: "check-format": "npm run prettier -- --list-different",

Add "check-format" script to pre-commit file
ex: npm run check-format

Add a "format" script to help us format all files at once
ex: "format": "npm run prettier -- --write"

If you need any clarification or help on how to implement this, please leave your comment here or on our discord server

Create MCQA for topic Named Import and Export

Please create an MCQA to be added as question number 41.

The multiple choice question should be on the topic "Named Import and Export". The difficulty level should be "Easy/Medium/Hard"

Tasks:

• add your code to 041 folder under code
• add your question to 41 in README.md file

Explanation:

• There are two types of import export syntax:
  • default
  • named
• import * as obj from filename: To import all modules under one name (not a good practice).
  • In build tools like webpack, unwanted modules are removed internally i.e. Treeshaking
• import { sum as mySum } from filename
• import sum from filename
• export sum as total from filename
• export { sum, diff } from filename

Sample interview question for inspiration

• What is a named export and import ?
• Can you avoid {} while importing a named module ?
  • No
• How can you import all named modules from a file ?
• Is it a good practice to import all modules together ?
• Do the modules hoist ?
  • Yes
• Do you need the same name while importing a named module or you can change ?
  • can change with as keyword

Create MCQA for Time methods

Please create an MCQA to be added as question number 33.

The multiple choice question should be on the topic "Time" methods. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 033 folder under code
• add your question to 33 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• static method Date.now() returns milliseconds since 01 Jan 1970 UTC
  • new Date() methods: getTime(), getHours, getMinutes etc
  • setTime(milliseconds)

Sample interview question for inspiration

• Calculate the date difference in days ?

var date1 = new Date("2023-11-23T08:01:01.11Z")
var date2 = new Date("2023-11-29T08:01:01.11Z")
console.log(((date2.getTime()-date1.getTime())/1000)/3600/24)

• How can you change hours or minutes in time ?
  • setHours(), setMinutes()

Create MCQA for destructuring array topic

Please create an MCQA to be added as question number 30.

The multiple choice question should be on the topic "destructuring an array". The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 030 folder under code
• add your question to 30 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• getting values from arr or obj into individual variables
  • ex: let [a3, b3, c3 = 5] = arr1;
• You can swap values using destructuring.
  • [a1, b1] = [b1, a1];

Sample interview question for inspiration

• What will be the output of this code?

let [a,b,c] = [5,,7];
console.log(a,b,c);

ans: 5 undefined 7

Create MCQA for Destructuring Object Literal

Please create an MCQA to be added as question number 39.

The multiple choice question should be on the topic "Destructuring Object Literal". The difficulty level should be "Easy/Medium"

Tasks:

• add your code to 039 folder under code
• add your question to 39 in README.md file
• create a video explanation and upload on YouTube (optional)

Create MCQA for the topic: Timer based Events

Please create an MCQA to be added as question number 44.

The multiple choice question should be on the topic "Timer based Events". The difficulty level should be "Easy/Medium"

Tasks:

• add your code to 044 folder under code
• add your question to 44 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• Two methods globally available: window.setTimeout, window.setInterval
• clearInterval() to clear interval

Qns that are asked in interviews:

• How will you create a digital clock?

Proposal for Creating a Website with Good UI for JavaScript MCQs

Hi there,

I would like to propose creating a website with a good UI for the MCQs related to JavaScript in this repository. I believe that having a dedicated website will improve the user experience and make it easier for people to test their JavaScript knowledge.

Here's what I plan to include in the website:

A clean and modern UI design that is easy to navigate
Multiple choice questions related to JavaScript with options and video explanations links
A scoring system to keep track of the user's progress

I have the necessary skills and experience to create this website, and I am confident that it will be a valuable addition to the repository.

Please let me know if you approve of this proposal, and if there are any specific requirements or guidelines that I should follow. I look forward to hearing from you soon.

Thank you for your time and consideration.

Create MCQA for Date() class

Please create an MCQA to be added as question number 31.

The multiple choice question should be on the topic "Date()" class. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 031 folder under code
• add your question to 31 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:
There are 4 ways to create date object

• new Date(): current date and time along with local tz
• new Date(year, month, day, hours, minutes, seconds, milliseconds): more preferable way to deal with dates
• new Date(milliseconds): milliseconds from 01 Jan 1970
• new Date("year-month-dayTH:M:SECZ"): if T and Z are not given then value might vary from browser to browser (T: Time, Z: zone)
• ISO 8601 Extended date format: YYYY-MM-DDTHH:mm:ss.sssZ

Sample interview question for inspiration

• What will be the output of this code? Assuming user's timezone is set to GMT+0800 (Singapore Standard Time)

const date1 = new Date("2023-11-23T08:01:01.11+04:00")
const date2 = new Date("2023-11-23T08:01:01.11Z")
const date3 = new Date("2023-11-23T08:01:01.11")
console.log(date1, date2, date3);

ans: Thu Nov 23 2023 12:01:01 GMT+0800 (Singapore Standard Time) Thu Nov 23 2023 16:01:01 GMT+0800 (Singapore Standard Time) Thu Nov 23 2023 08:01:01 GMT+0800 (Singapore Standard Time)

Create MCQA for advanced array search methods: Array.find(), Array.findIndex(), Array.filter()

Please create an MCQA to be added as question number 25.

The multiple choice question should be on the topic advanced array search methods: .find(), .findIndex() and .filter() method of an array. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 025 folder under code
• add your question to 25 in README.md file
• create a video explanation (optional)

I have added some explanation for these methods below in case you don't remebmer

• find(): returns item which matches the callback condition. It only returns first match
• filter(): returns array of items that matches the condition

Sample Questions for inspiration

1. What is the difference between find() and filter() method ?

• find returns item while filter returns array of all items

2. If there is no value to return, what will findIndex() return ?

• undefined

3. How will you search multiple values in an array?

• filter

These questions are easy, feel free to make it bit more challenging. Except the second one. Because most developers reply -1 as the answer to it

Create MCQA for Array.unshift()

Please create an MCQ to be added as question number 20.

The multiple choice question should be on the topic .unshift() method of an array. The difficulty level should be "Medium/Hard"

What is Array.unshift() method?
The unshift() method add items at beginning, returns length

• add your code to 020 folder under code
• add your question to 20 in README.md file
• create a video explanation (optional)

Create MCQA for `this` Object

Please create an MCQA to be added as question number 35.

The multiple choice question should be on the topic "this object". The difficulty level should be "Easy/Medium"

Tasks:

• add your code to 035 folder under code
• add your question to 35 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• this contains the current context
• in browser: this will always return window context unless it is wrapped in an object or wrapper
• this doesn't work with arrow fn. Since with ES6: this was removed from arrow fn and added to class. In arrow function, this will point to window

Create MCQA for Array. pop()

Please create an MCQ to be added as question number 21.

The multiple choice question should be on the topic .pop() method of an array. The difficulty level should be "Medium/Hard"

What is Array.pop() method?
The pop() method removes last item and returns removed element

• add your code to 021 folder under code
• add your question to 21 in README.md file
• create a video explanation (optional)

Create MCQA for Array.map() method

Please create an MCQA to be added as question number 26.

The multiple choice question should be on the topic .map() method of an array. The difficulty level should be "Easy/Medium/Hard"

Tasks:

• add your code to 026 folder under code
• add your question to 26 in README.md file
• create a video explanation (optional)

I have added some explanation for these methods below in case you don't remebmer

• The map() method returns new array after modifying each item in array

Create MCQA for Object literal

Please create an MCQA to be added as question number 34.

The multiple choice question should be on the topic "Object literal". The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 034 folder under code
• add your question to 34 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• There are many ways to create an object
  • class Object is one way
• Object allows us to create a container to put multiple data type. It's a key value data structure
• Object has properties and methods

Sample interview question for inspiration

• Can you have dynamic keys with object literal?
  • yes, const tv = "pCode"; let obj3 = { [tv]: 1001 }
• How can you add read-only properties to an object? (Level: Hard, since most devs can't answer this)
  • Object.defineProperty() and Object.create()
• What is property value short hand with object literal?
  let obj = { pCode, pName } : ES6
• What will be the output of this code? Explain the reason why?

   let obj={a:'First'};
   let obj1 = obj;
   obj1.a="Second";
   console.log(obj.a);
  

  • ans: "Second", since Object assigned with = have same reference
• How can we create a clone or separate copy of an object literal?
  • let obj1 = Object.assign({}, obj2) or let obj1 = {...obj2}

Create MCQA for topic Default Import Export

Please create an MCQA to be added as question number 42.

The multiple choice question should be on the topic "Default Import Export". The difficulty level should be "Easy/Medium/Hard"

Tasks:

• add your code to 042 folder under code
• add your question to 42 in README.md file

Explanation:

• export { sum as default } or export default sum function(){}

Create MCQA for the topic: DOM Object and Window Object

Please create an MCQA to be added as question number 43.

The multiple choice question should be on the topic "DOM Object and Window Object ". The difficulty level should be "Easy/Medium"

Tasks:

• add your code to 043 folder under code
• add your question to 43 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• window: global object
  • usage: window.document or document since window is global object we don't need to use window.
  • Ex: setInterval is method of window object and can be accessed as window.setInterval() or setInterval()
  • other window props: window.location, window.href
• BOM: Browser obj Model: screen, locator, navigator, frames, history, XMLHttpRequest
• Document: is an obj of window.
• DOM: html, head, body etc

Qns that are asked in interviews:

• What is the difference between window and document ?
• What is DOM [Document Object Model] or DOM API ?
• What is BOM [Browser Object Model] ?
• Explain the difference between DOM and BOM ?
• Which is the global object in browser ?
• How will we check the innerWidth and innerHeight of window ?
  • ans: window.innerWidth or window.innerHeight
• How will you get hostname or value typed in address bar ?
  • ans: window.location

Create MCQA for `call()`, `apply()` and `bind()`

Please create an MCQA to be added as question number 36.

The multiple choice question should be on the topic "call, apply and bind". The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 036 folder under code
• add your question to 36 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• call, apply and bind changes context of a function
• call and apply executes fn immediately while bind returns a fn
• Note: we can not assign object to this operator directly in JS. that's why we have to use call, apply or bind method
• Practical applications of call, apply and bind:
  • chain constructors for an object
  • function borrowing, Ex: borrow filter fn from array prototype for arguments

Create MCQA for class, class expression and static members

Please create an MCQA to be added as question number 37.

The multiple choice question should be on the topic "class, class expression and static members". The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 037 folder under code
• add your question to 37 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• class is to create a blueprint or design or prototype
• To create class:
  • in ES6 we have class keyword
  • in ES5 we had constructor fn

Sample interview question for inspiration

• How can you create a class?
• When does constructor() called?
• Can we have dynamic property or method names in a class?
  • Yes, Ex: [getName]
• What is a class expression?
  • const House = class{}
• What are static members in a class? What is the purpose of defining them as static?
  • static members can be created using static keyword before property or method
  • Application: for creating a module which has services where we do not need to instantiate a class, in those case we create those members as static props / methods.
• How can you call another static method from a class?

Create MCQA for Array.sort() method

Please create an MCQA to be added as question number 29.

The multiple choice question should be on the topic .sort() method of an array. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 029 folder under code
• add your question to 29 in README.md file
• create a video explanation and upload on YouTube (optional)

Explanation:

• arr.sort(): sorts alphabetically when arr is of strings
• This modifies the original array
• To do numeric sort: use comparison method in callback function inside sort
• if no callback fn is given then it will sort the unicode string value

Sample interview question for inspiration

• What will be the output of ["bgwebagency", 1, 2, 3, 4, undefined, 11, 9, 1000, "apple", undefined].sort()?
  • ans: [1, 1000, 11, 2, 3, 4, 9, 'apple', 'bgwebagency', undefined, undefined]
  • all undefined values are moved to the end
• How will you sort an object literal?
  - ans: by using a callback function
• How will you sort a numeric array?
• Sort all values of array in descending order.

Create MCQA for Array.reduce() method

Please create an MCQA to be added as question number 27.

The multiple choice question should be on the topic .reduce() method of an array. The difficulty level should be "Medium/Hard"

Tasks:

• add your code to 027 folder under code
• add your question to 27 in README.md file
• create a video explanation (optional)

Sample interview question for inspiration

• How to flatten a 2D array using reduce()?
  const flatArr = twoDimArr.reduce((acc, item) => acc.concat(item));