Code Monkey home page Code Monkey logo

bgwebagency / who-wants-to-be-a-javascriptaire Goto Github PK

View Code? Open in Web Editor NEW
25.0 3.0 13.0 133 KB

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

Home Page: https://youtu.be/Uysa8_Aa5Sg

License: MIT License

JavaScript 99.07% Shell 0.93%
contributions-welcome good-first-issue help-wanted javascript open-source opensource frontend-interview frontend-interview-questions javascript-interview-questions

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

Who Wants to be a JavaScriptaire?

Fun way to learn JavaScript for your Frontend/Web coding interviews. All the questions are answered here in text and also have a video on our YouTube channel. Click the ▶️ icon next to the questions if you prefer to watch the video explanation.

Feel free to reach us on our social platforms! 😊
Discord || Instagram || Twitter || TikTok || Blog || Facebook

🙏 Support

Please ⭐️ star this project and share it with others to show your support. Follow me ❤️ for updates on future projects and tutorials!


Table of Contents

Language Basics - Arrays - Date and Time - Object Oriented JavaScript - Modules - Miscellaneous


1. What will this code output? ▶️
console.log(new Date(2023, 1, 31))
  • A: Tue Jan 31 2024
  • B: Tue Jan 31 2023
  • C: Fri Mar 03 2023
  • D: Error
Answer

Answer: C

In JavaScript, while constructing dates using Date objects months are 0 based. Which means 0 is for January and 1 is for February.

So, in this case we are asking JavaScript to set a date of 2023 February 31st which does not exist.

But instead of throwing error JavaScript will overflow it to the next month which is March.

And since February in 2023 has only 28 days, the code will overflow by 3 days making the result to be 3rd March 2023.


2. What will this code output? ▶️
var username = 'kirandash'
var username = 'bgwebagency'

console.log(username)
  • A: bgwebagency
  • B: kirandash
  • C: ReferenceError
  • D: SyntaxError
Answer

Answer: A

We can declare the same variable multiple times using the var keyword. And the variable will hold the value which it was assigned in the end.

But we can not declare the same variable multiple times using let or const


3. What will this code output? ▶️
const user = {
	username: 'kirandash',
	updateUsername: newName => {
		this.username = newName
	},
}

user.updateUsername('bgwebagency')
console.log(user.username)
  • A: bgwebagency
  • B: ReferenceError
  • C: kirandash
  • D: undefined
Answer

Answer: C

Because the updateUsername function is not working properly and is failing to update the username of the user.

The updateUsername function in user object is an arrow function, and is not bound to the user object.

So, the this keyword inside updateUsername function is not referring to the user object, but refers to the global scope.

To fix this issue, we should change the arrow function to a normal function.


4. What will this code output? ▶️
const len1 = 'kiran'.length
const len2 = '👻'.length

console.log(len1, len2)
  • A: 5, 2
  • B: 5, 1
  • C: 5, undefined
  • D: 5, SyntaxError
Answer

Answer: A

In JavaScript, the string length property returns the number of bytes and not the number of characters like we expect.

An emoji is a unicode character which is encoded in two bytes. Therefore the answer is 2 for this question.

The string length for kiran returns 5 because in a string each character is 1 byte.


5. Difference between undefined and null ▶️
console.log(undefined == null, undefined === null)
  • A: true, true
  • B: true, false
  • C: false, false
  • D: false, true
Answer

Answer: B

First let me explain the difference between equal and strict equal operator.

The equal operator only checks if both the values are equal. The strict equal operator checks if both value and type are equal.

So in this code, the first statement undefined == null returns true since both undefined and null have the same value which is empty.

But the second statement undefined === null returns false. Since typeof undefined is undefined, whereas typeof null is an object.

You might be wondering, why typeof null is an object when null is basically a primitive data type. This basically is a mistake in JavaScript since the beginning.

Now, one more tip for you: when you want to set an empty value for a variable use null instead of undefined. Since undefined is mainly used to check if a variable has no value assigned to it.


6. Rest Operator ▶️
function getFruits(x, ...multi, y) {
  console.log(x, y, multi);
}
getFruits("🍎", "🍌", "🍇", "🍊", "🍍")
  • A: 🍎 🍍 ["🍌", "🍇", "🍊"]
  • B: SyntaxError
Answer

Answer: B

Rest operators were added as a part of ES6 feature.

It takes all the arguments passed to a function and puts it in an array.

If multiple arguments are passed to a function then rest operator must come at the end. That's why this code snippet will throw an error.

To fix this issue, please move the rest operator to the end and then it should work.


7. Infinity and -Infinity ▶️
let x = Number.NEGATIVE_INFINITY
let y = Number.POSITIVE_INFINITY
let z = x + y
console.log(z)
  • A: 0
  • B: undefined
  • C: NaN
  • D: TypeError
Answer

Answer: C

NEGATIVE_INFINITY and POSITIVE_INFINITY are properties of the Number object in JavaScript that represents the mathematical concept of negative infinity and positive infinity.

When you add Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY, the result is NaN.

Adding a positive infinite value to a negative infinite value does not result in a meaningful numerical value.

So in this case, z will be NaN.

Note that the code will not throw a TypeError, as JavaScript is able to perform the addition operation between Number.NEGATIVE_INFINITY and Number.POSITIVE_INFINITY.


8. isNaN() function ▶️
console.log('BG Web Agency' === NaN, isNaN('BG Web Agency'))
  • A: true, true
  • B: false, true
  • C: true, false
  • D: false, false
Answer

Answer: B

Using === NaN to check if a value is a number will not work.

In JavaScript, NaN (Not a Number) is a special value that represents an invalid number.

NaN is not equal to anything, including itself, so the expression "BG Web Agency" === NaN will always return false.

To check if a value is a number in JavaScript, you can use the isNaN() function. This function returns true if the argument passed to it is NaN, or if it cannot be converted to a number.


9. isFinite() function ▶️
console.log(isFinite(Infinity), isNaN(Infinity))
  • A: false, false
  • B: false, true
  • C: true, false
  • D: false, false
Answer

Answer: A

The isFinite() function is used to determine whether a given value is a finite number.

It returns false if the value is NaN, Infinity, or -Infinity, and true if the value is a finite number.

So, in this example isFinite(Infinity) will return false because Infinity is not a finite number.

On the other hand, the isNaN() function is used to determine whether a given value is not a number (NaN).

It returns true if the value is NaN, and false if the value is a number or any other data type.

So, in this example isNaN(Infinity) will also return false because Infinity is not NaN.

Therefore always use isFinite function instead of isNaN function when you want to validate if a number is finite


10. Arrow function ▶️
const user = {
	name: 'John',
	age: 30,
	getName: () => {
		return this.name
	},
	getAge: function () {
		return this.age
	},
}

const getName = user.getName
const getAge = user.getAge

console.log(getName())
console.log(getAge())
  • A: undefined, undefined
  • B: undefined, 30
  • C: SyntaxError
  • D: John, 30
Answer

Answer: A

The getName arrow function uses this keyword to refer to the object's name property, but because arrow functions have a lexical this binding, the value of this keyword inside the arrow function will be the global object which is window in a browser, or global in Node.js.

Since there is no name property on the global object, the function returns undefined.

The getAge function uses a regular function expression and correctly refers to the age property of the user object using this keyword.

But when getAge is assigned to the getAge variable, it loses the reference to the user object, so when the function is called using getAge(), this will refer to the global object again, and since there is no age property on the global object, the function returns undefined.


11. Closure ▶️
for (var i = 0; i < 3; i++) {
	setTimeout(function () {
		console.log(i)
	}, 0)
}
  • A: 0, 1, 2
  • B: 3, 3, 3
  • C: undefined, undefined, undefined
  • D: TypeError: console is not defined
Answer

Answer: B

A closure is a function that retains access to variables in its outer scope, even after the outer function has returned.

In this example, the answer is B, because the setTimeout function is asynchronous and does not execute immediately.

By the time the callback function passed to setTimeout is executed, the loop has already completed and the i variable has a value of 3.

Therefore, each call to console.log(i) inside the callback function will print 3.

To solve this problem and print 0, 1, 2, we can use an IIFE (Immediately Invoked Function Expression) to create a new scope for each iteration of the loop.

This creates a new variable j inside each IIFE, with its own copy of the current value of i at that iteration of the loop.

When the callback function passed to setTimeout is executed, it has access to the j variable in its closure, which has the expected value of 0, 1, or 2 for each iteration of the loop.


12. Curry (Level: Hard) ▶️
function add(x) {
	return function (y) {
		if (y !== undefined) {
			x += y
			return arguments.callee
		} else {
			return x
		}
	}
}

console.log(add(1)(2)(3)())
  • A: 6
  • B: undefined
  • C: ReferenceError
  • D: TypeError
Answer

Answer: A

The correct answer is A. The code defines a add function that takes a single argument x and returns another function that takes a single argument y.

This inner function checks if y is defined. If it is defined, it adds y to x and returns a reference to itself using the arguments.callee property, which allows the function to be called recursively with the next argument.

If y is not defined, it returns the current value of x.

Then, the code calls add(1)(2)(3)(). This first calls add(1) with 1 as its argument, which returns a function that takes a single argument y.

Then, it calls this function with 2 as its argument, which adds 2 to 1 and returns a reference to the function.

Finally, it calls this function with 3 as its argument, which adds 3 to 3 and returns a reference to the function.

Since no argument is passed in the last call, it returns the current value of x, which is 6.

This code demonstrates a more complex example of currying in JavaScript, where the curried function returns a reference to itself, allowing it to be called recursively with the next argument.


13. Curry (Level: Easy) ▶️
function multiply(x) {
	return function (y) {
		return x * y
	}
}

const double = multiply(2)

console.log(double(5))
  • A: 25
  • B: 10
  • C: undefined
  • D: An error will occur
Answer

Answer: B

The correct answer is B. The code defines a multiply function that takes a single argument x and returns another function that takes a single argument y. This inner function multiplies x and y and returns the result.

Then, the code creates a new function double by calling multiply with 2 as its argument. The double function is now a curried function that can be called with a single argument to double its value.

Finally, the code calls double with 5 as its argument, which results in 10 being logged to the console.

This code demonstrates the concept of currying in JavaScript, where a function returns another function that can be partially applied with some arguments.


14. Iterables and Iterators (Level: Hard) ▶️

Which of the following statements is true about the next() method of an iterator in JavaScript?

  • A: The next() method returns an object with properties value and done.
  • B: The next() method returns a boolean value indicating whether there are more items to iterate over.
  • C: The next() method is used to define how to access the next item in the iterable.
  • D: The next() method is not used in JavaScript iterators.
Answer

Answer: A

The correct answer is A.

In JavaScript, an iterable is an object that defines a sequence and can be iterated over using a loop.

An iterator is an object that knows how to access the elements of an iterable one at a time.

An iterable object has a method with the key Symbol.iterator, which returns an iterator object.

The iterator object has a next() method, which returns an object with two properties: value, which is the next element in the sequence, and done, which is a boolean indicating whether the iterator has reached the end of the sequence.

Iterables are commonly used in many real-time applications while working with large datasets, or while implementing custom data structures


15. Generator Functions ▶️
function* counter() {
	let i = 0
	while (true) {
		yield i++
	}
}

const gen = counter()

console.log(gen.next().value)
console.log(gen.next().value)
console.log(gen.next().value)

What does the above code snippet output?

  • A: This code snippet will result in an infinite loop.
  • B: 1 2 3
  • C: 0 0 0
  • D: 0 1 2
Answer

Answer: D

The correct answer is D.

The counter function is a generator function that creates an infinite loop that yields incrementing values of i.

The gen variable is set to the generator function, and each call to gen.next() returns an object with the value property set to the next yielded value.

The console.log statements then print the values returned by gen.next().

A generator function is a special type of function that can be used to control the iteration over a sequence of values.

Unlike traditional functions, generator functions allow you to pause and resume their execution, and yield multiple values over time.


16. Garbage Collection, Mark and Sweep Algorithm ▶️

Which of the following scenarios could potentially cause a memory leak in JavaScript?

  • A: Using the Array.from() method to convert a large array into a new array.
  • B: Creating a circular reference between two objects that are still in use.
  • C: Assigning a value of null to a variable that is still in use.
  • D: Calling the delete operator on an object property.
Answer

Answer: B

Circular references occur when two or more objects reference each other, creating a loop that prevents the objects from being garbage collected.

This can cause a memory leak if the objects are no longer needed but cannot be freed because of the circular reference.

Options A, C, and D do not typically cause memory leaks in JavaScript.

Garbage collection is the process of automatically freeing up memory that is no longer being used by a program.

In JavaScript, the mark and sweep algorithm is commonly used for garbage collection.

This algorithm works by first marking all objects in memory that are still being referenced by the program, then sweeping through and freeing up any memory that is not marked as in use.


17. try, catch, finally ▶️
function getData() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('Data retrieved successfully')
		}, 1000)
	})
}

async function main() {
	try {
		const data = await getData()
		console.log(data)
		throw new Error('Something went wrong')
	} catch (err) {
		console.log('Caught an error:', err.message)
		return 'Error occurred'
	} finally {
		console.log('Finally block executed.')
		return 'Finally block value'
	}
}

;(async () => {
	console.log(await main())
})()

What does the above code snippet output?

  • A: "Data retrieved successfully", "Caught an error: Something went wrong", "Finally block executed."
  • B: "Data retrieved successfully", "Caught an error: Something went wrong".
  • C: "Data retrieved successfully", "Caught an error: Something went wrong", "Finally block executed.", "Finally block value"
  • D: "Caught an error: Something went wrong", "Finally block executed."
  • E: "Finally block executed.", "Finally block value".
Answer

Answer: C

When the code is executed, the main() function is called, which is an async function that uses await to get data from the getData() function.

Once the data is retrieved, the console.log(data) statement logs "Data retrieved successfully" to the console.

After that, the throw new Error("Something went wrong") statement throws an error.

The catch block catches the error and logs "Caught an error: Something went wrong" to the console, and then returns the string "Error occurred".

Finally, the finally block is executed and logs "Finally block executed." to the console, and then returns the string "Finally block value".

When the main() function is called, it returns a promise because it is an async function. Since the finally block also returns a value, that value will be the final resolved value of the promise.

Therefore, when console.log(main()) is called, "Finally block executed." and "Finally block value" will be logged to the console.

Try, catch, and finally are keywords used in JavaScript to handle runtime errors.


18. Array and Traversal in array ▶️
const arr = [1, 2, 3, 4, 5];
let sum = 0;
for (let num of arr) {
  sum += num;
  if(sum >= 6) break;
}
console.log(sum);

const arr2 = [1, 2, 3, 4, 5];
let sum2 = 0;
arr.forEach((num) => {
  sum2 += num;
  if(sum2 >= 6) break;
});
console.log(sum2);

What does the above code snippet output?

  • A: 6, 15
  • B: SyntaxError: Illegal break statement
  • C: 15, 15
  • D: 15, 15
Answer

Answer: B

Because break statement is not valid inside the callback function passed to forEach.

forEach does not support early termination using the break statement. Therefore, an error is thrown: "Uncaught SyntaxError: Illegal break statement".

In case of for of loop, break statement is allowed.

To fix the issue, remove the break statement from forEach and it should work.

In general, for of is recommended over for in or forEach


19. Array Manipulation: Understanding array.push() Method in JavaScript ▶️
let arr = [1, 2, 3, 4]
let result = arr.push(5)
console.log('result: ', result, 'arr: ', arr)

What does the above code snippet output?

  • A: result: 5 arr: [1, 2, 3, 4, 5]
  • B: result: 5 arr: [5, 1, 2, 3, 4]
  • C: result: [1, 2, 3, 4, 5] arr: [1, 2, 3, 4, 5]
  • D: result: [5, 1, 2, 3, 4] arr: [5, 1, 2, 3, 4]
Answer

Answer: A

The array.push() method in JavaScript adds one or more elements to the end of an array and returns the new length of the array.

In the given code, arr is an array with the values [1, 2, 3, 4]. The push() method is called with the argument 5, which adds 5 to the end of the arr array.

The push() method returns the new length of the array after the addition of the element(s). In this case, the new length of arr will be 5 because 5 is added to the end of the array.


20. Array Manipulation: Understanding array.unshift() Method in JavaScript
let arr = [3, 5, 7, 9]
let result = arr.unshift(1, 2)
console.log('result: ', result, 'arr: ', arr)

What does the above code snippet output?

  • A: result: 6 arr: [3, 5, 7, 9, 1, 2]
  • B: result: 6 arr: [1, 2, 3, 5, 7, 9]
  • C: result: 4 arr: [1, 2, 3, 5]
  • D: result: [1, 2, 3, 5, 7, 9] arr: [1, 2, 3, 5, 7, 9]
Answer

Answer: B

The array.unshift() method in JavaScript adds one or more elements to the beginning of an array and returns the new length of the array.

In the given code, arr is an array with the values [3, 5, 7, 9]. The unshift() method is called with the arguments 1 and 2, which adds 1 and 2 to the beginning of the arr array.

The unshift() method returns the new length of the array after the addition of the element(s). In this case, the new length of arr will be 6 because 1 and 2 are added to the beginning of the array, shifting the existing elements to the right.


21. Array Manipulation: Understanding array.pop() Method in JavaScript
const myArray = [1, 2, 3, 4, 5]
const poppedValue = myArray.pop()
console.log(poppedValue)

What does the above code snippet output?

  • A: 1
  • B: 5
  • C: 'undefined'
  • D: An error will occur
Answer

Answer: B

The Array.pop() method in JavaScript removes the last element from an array and returns that element.

In this case, myArray is an array with elements [1, 2, 3, 4, 5], and myArray.pop() is called, which removes the element 5 from the array and returns it.


22. Array Manipulation: Understanding array.shift() Method in JavaScript
const arr = [10, 20, 30, 40, 50]
const removedElement = arr.shift()
console.log('removedElement: ', removedElement, 'arr: ', arr)

What does the above code snippet output?

  • A: removedElement: 10 arr: [20, 30, 40, 50]
  • B: removedElement: 50 arr: [10, 20, 30, 40]
  • C: removedElement: 10 arr: [10, 20, 30, 40, 50]
  • D: removedElement: [20, 30, 40, 50] arr: [20, 30, 40, 50]
Answer

Answer: A

The Array.shift() method removes the first element from the arr array, which is 10, and returns it. The resulting arr array will then be [20, 30, 40, 50].

So, option A is the correct answer as it reflects the correct value of removedElement and the updated state of arr after Array.shift() is called. Option B is incorrect as it states that removedElement will be 50, which is not true. Option C is also incorrect as it state that arr remains unchanged, which is not accurate. Option D is slightly confusing as it states that Array.shift() returns the array, which is not true.


23. Array Manipulation: Understanding array.splice() Method in JavaScript
let arr = [1, 2, 3, 4, 5]
let removed = arr.splice(1, 2, 'a', 'b')
console.log('removed:', removed, 'arr: ', arr)

What does the above code snippet output?

  • A: removed: [1, 2] arr: [a, b, 3, 4, 5]
  • B: removed: [2, 3] arr: [1, 'a', 'b', 4, 5]
  • C: removed: [2, 3, 'a', 'b'] arr: [1, 4, 5]
  • D: removed: [1, 2] arr: [3, 4, 5]
Answer

Answer: B

The Array.splice() method is used to modify an array by adding, removing, or replacing elements.

In this case, the code snippet uses arr.splice(1, 2, 'a', 'b'), which starts from index 1 (removing 2 elements) and inserts the elements a and b in their place. The elements that are removed (i.e., 2 and 3) are returned and assigned to the variable removed. After execution, removed will be [2, 3] and arr will be [1, 'a', 'b', 4, 5]. Option C is incorrect as it includes the inserted elements in the removed array, which is not accurate. Option D is also incorrect as it mentions the incorrect elements that are removed from the array.


24. JavaScript Array Search Methods - Array.indexOf(), Array.lastIndexOf(), and Array.includes()
const fruits = ['apple', 'banana', 'orange', 'grape', 'apple', 'kiwi']
const index = fruits.indexOf('orange')
const lastIndex = fruits.lastIndexOf('apple')
const result = fruits.includes('grape')
console.log('index: ', index, 'lastIndex: ', lastIndex, 'result: ', result)

What does the above code snippet output?

  • A: index: 2, lastIndex: 4, result: true
  • B: index: 3, lastIndex: 0, result: false
  • C: index: 2, lastIndex: 4, result: false
  • D: index: -1, lastIndex: 4, result: true
Answer

Answer: A

The Array.indexOf() method searches for the index of the first occurrence of the specified value in the array fruits. In this case, "orange" is found at index 2, so index will be 2.

The Array.lastIndexOf() method searches for the index of the last occurrence of the specified value in the array fruits. In this case, "apple" appears twice in the array and its last occurrence is at index 4, so lastIndex will be 4.

On the other hand, the Array.includes() method checks if the specified value "grape" exists in the array fruits, and since "grape" is present in the array, result will be true.


25. JavaScript Advanced Array Search Methods - Array.find(), Array.findIndex(), and Array.filter()
function isDivisibleBy7(num) {
	return num % 7 == 0
}

const nums = [28, 7, 3, 29, 15, 1, 2, 23]
const filterResult = nums.filter(isDivisibleBy7)
const findResult = nums.find(num => num < 10)
const findIndexResult = nums.findIndex(num => num / 2 == 14)

console.log(
	'filterResult:',
	filterResult,
	'findResult:',
	findResult,
	'findIndexResult:',
	findIndexResult,
)

What does the above code snippet output?

  • A: filterResult: 28 findResult: 2 findIndexResult: 1
  • B: filterResult: [28, 7] findResult: 2 findIndexResult: 28
  • C: filterResult: 7 findResult: [1, 2, 3, 7] findIndexResult: 0
  • D: filterResult: [28, 7] findResult: 7 findIndexResult: 0
Answer

Answer: D

The Array.filter() method returns an array containing all elements for which the function passed to it returns true. In this case, the function isDivisibleBy7 returns true for any number that is divisible by 7. In the nums array, 7 and 28 are divisible by 7, so nums.filter(isDivisibleBy7) returns [28, 7].

The Array.find() method returns the first element in the array for which the function passed to it returns true. In this case, the function passed to it returns true for any number less than 10. There are multiple numbers in nums that are less than 10, but since Array.find() only returns the first for which it is true, nums.find((num) => num < 10) returns 7.

The Array.findIndex() method is similar to the Array.find() method, but returns the index of the first element in the array for which the function passed to it returns true, rather than the element itself. In this case, the function passed to it returns true for 28, since the 28 / 2 == 14. 28 is in the array nums and is at index 0, so nums.find((num) => num / 2 == 14) returns 0.


26. Array.map() Method in JavaScript
const numbers = [1, 2, 3, 4, 5]
const doubledNumbers = numbers.map(num => num * 2)
console.log(doubledNumbers)

What does the above code snippet output?

  • A: [1, 2, 3, 4, 5]
  • B: [2, 4, 6, 8, 10]
  • C: [2, 4, 6, 8, 10, 12]
  • D: [1, 4, 9, 16, 25]
Answer

Answer: B

The Array.map() method in JavaScript creates a new array by applying a provided function to each element of the original array.

In this case, the provided function num => num * 2 multiplies each number in the numbers array by 2, resulting in a new array [2, 4, 6, 8, 10].


27. Array.reduce() Method in JavaScript
const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((acc, val) => acc + val)
console.log(sum)

What does the above code snippet output?

  • A: 1
  • B: 15
  • C: NaN
  • D: undefined
Answer

Answer: B

Array.reduce() takes an array and "reduces" it to a single value by repeatedly applying a function to each element and keeping track of the accumulated result. It's commonly used for tasks such as summing up an array of numbers, finding the maximum value, or concatenating an array of strings into a single string.

In this case, the reduce() method takes a callback function that is executed for each element of the array. The callback function takes two parameters, acc and val, which represent the accumulator and the current value of the array, respectively.

Inside the callback function, the current value of the array is added to the accumulator and the result is returned. The reduce() method updates the value of the accumulator with each iteration until it has iterated over all the elements of the array.

Finally, the reduce() method returns the final value of the accumulator, which is the sum of all the numbers in the array, that is 15.


28. Array.reduceRight() Method in JavaScript
const arr = [1, 2, 3, 4]
const result = arr.reduceRight((acc, curr) => acc + curr)
console.log(result)

What does the above code snippet output?

  • A: 10
  • B: 11
  • C: 12
  • D: 13
Answer

Answer: A

The reduceRight() method is similar to the reduce() method, except that it starts reducing the array from the rightmost element to the leftmost element. The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

In the given code snippet, the arr array contains the values [1, 2, 3, 4]. The reduceRight() method is called on this array with a callback function that adds the accumulator acc with the current element curr.

In the first iteration, the curr value will be 4, and the acc value will be undefined, since no initial value is provided. Therefore, the result of the first iteration will be 4.

In the second iteration, the curr value will be 3, and the acc value will be the result of the previous iteration, which is 4. Therefore, the result of the second iteration will be 7.

In the third iteration, the curr value will be 2, and the acc value will be the result of the previous iteration, which is 7. Therefore, the result of the third iteration will be 9.

In the fourth and final iteration, the curr value will be 1, and the acc value will be the result of the previous iteration, which is 9. Therefore, the result of the fourth iteration will be 10.

Therefore, the final output of the code will be 10. Hence, the correct option is A.


29. Array.sort() Method in JavaScript
const arr = ['Centauri', 3.14159, 'canine', 11235, undefined]
const result = arr.sort()
console.log(result)

What does the above code snippet output?

  • A: [ 3.14159, 11235, 'Centauri', 'canine', undefined ]
  • B: [ undefined, 11235, 3.14159, 'Centauri', 'canine' ]
  • C: [ 11235, 3.14159, 'canine', 'Centauri', undefined ]
  • D: [ 11235, 3.14159, 'Centauri', 'canine', undefined ]
Answer

Answer: D

By default the sort() method sorts elements by character so 11235 comes before 3.14159 because 1 comes before 3.

Words and letters are sorted alphabetically by ASCII code so "Centauri" which starts with an uppercase C (ASCII code 67) sorts before "canine" which starts with a lowercase c (ASCII code 99).

Undefined elements always sort to the end of an array.

Thus, the final output of the code will be [ 11235, 3.14159, 'Centauri', 'canine', undefined ] which is option D.


30. Destructuring an array in JavaScript
let numbers = [1, 2, 3, undefined, 6, 7, 8, 9]

let [a, , b, c = 2, ...rest] = numbers

console.log(a, b, c, rest)

What does the above code snippet output?

  • A. 1 undefined 2 [ 6, 7, 8, 9 ]
  • B. 1 3 2 [ 6, 7, 8, 9 ]
  • C. 1 undefined 3 [ 6, 7, 8, 9 ]
  • D. 1 3 2 undefined
Answer

Answer: B

With Array Destructuring it is possible to unpack certain values from an array into individual variables. The values we created in the left hand side (a, b, c, rest) correspond to the values and the order of the array we assigned in the right hand side (numbers).

  • The variable a corresponds to the first element of the array, which is 1.

  • Since we did not specify a variable for the next value 2, the value is not taken into account in the evaluation and is skipped.

  • The variable b corresponds to the third element of the array, which is 3.

  • It is possible to set default values for the variables if the element in the array is undefined. Since the fourth element in the array is undefined, the variable c has the default value 2.

  • With the spread operator (...) we can assign the remaining values of the array to a variable. Since the values [ 6, 7, 8, 9 ] are the remaining values of the array, they are assigned to the variable rest.

Therefore, the final result is: 1 3 2 [ 6, 7, 8, 9 ], which is option B.


31. Date() in JavaScript
const date1 = new Date()
const date2 = new Date('1995-12-17T05:10:00')
const date3 = new Date('1995-10-15T08:12:15+02:00')

console.log(date1, '', date2, '', date3)

What does the above code snippet output?

  • A: current date, 1995-10-17T04:10:00.000Z, 1994-10-15T06:12:15.000Z
  • B: current date, 1995-12-17T04:10:00.000Z, 1995-10-15T06:12:15.000Z
  • C: current date, 1995-08-17T04:10:00.000Z, 1995-10-15T06:12:15.000Z
Answer

Answer: B

new Date() will return the current date and time followed by the two specified dates in the format "YYYY-MM-DDTHH:MM:SS.sssZ", where "Z" represents the UTC time zone offset.

YYYY-MM-DDTHH:mm:ss.sssZ is a format used to represent dates and times in the ISO 8601 standard. It consists of the following components:

  • YYYY: Four-digit year (0000 to 9999), or as an expanded year with + or - followed by six digits. The sign is required for expanded years. -000000 is explicitly disallowed as a valid year.
  • MM: Two-digit month (01 = January, 02 = February, and so on). It defaults to 01.
  • DD: Two-digit day of the month (01 to 31)
  • T: A separator indicating the start of the time component
  • HH: Two-digit hour of the day in 24-hour format (00 to 23). As a special case, 24:00:00 is allowed, and is interpreted as midnight at the beginning of the next day. Defaults to 00.
  • mm: Two-digit minute of the hour (00 to 59). Defaults to 00.
  • ss: Two-digit second of the minute (00 to 59). Defaults to 00.
  • .sss: Millisecond component (000 to 999). Defaults to 000.
  • Z: A suffix indicating that the time is in UTC (Coordinated Universal Time), with no offset. It can either be the literal character Z (indicating UTC), or + or - followed by HH:mm, the offset in hours and minutes from UTC.


32. Date methods in JavaScript
const date = new Date('Mart 15, 1975 23:15:30')
date.setMinutes(10)
date.setUTCDate(5)

console.log(
	'Minutes:' + date.getMinutes() + ',',
	'',
	'Year:' + date.getFullYear() + ',',
	'',
	'UTCDate:' + date.getUTCDate(),
)

What does the above code snippet output?

  • A: Minutes:10, Year:1975, UTCDate:5
  • B: Minutes:15, Year:1975, UTCDate:5
  • C: Minutes:15, Year:1975, UTCDate:15
  • D: Minutes:10, Year:1975, UTCDate:15
Answer

Answer: A

The provided code creates a Date object initialized with the date and time of "March 15, 1975 23:15:30".

Then, it modifies the minutes and UTC date of the date object using the setMinutes() and setUTCDate() methods, respectively.

Finally, it logs the updated values of minutes, year, and UTC date using console.log().

After modifying the minutes to 10 using setMinutes(10), the getMinutes() method returns the updated value of 10.

After modifying the UTC date to 5 using setUTCDate(5), the getUTCDate() method returns the updated value of 5.

The getFullYear() method returns the unchanged year, which is 1975.


33. Time Methods in Javascript
const date1 = new Date('2023-5-1')
const next_us_election = new Date('2024-11-5')
const difference_in_time = next_us_election.getTime() - date1.getTime()
const difference_in_days = difference_in_time / (1000 * 3600 * 24)
console.log(parseInt(difference_in_days, 10) + ' Days')

What does the above code snippet output?

  • A: 490 Days
  • B: 554 Days
  • C: 560 Days
  • D: 530 Days
Answer

ANSWER: B

The code calculates the difference in days between the date "2023-5-1" and the next US election date "2024-11-5". It uses the Date object to create two dates: date1 represents May 1, 2023, and next_us_election represents November 5, 2024.

The getTime() method is used to get the time value in milliseconds for each date. By subtracting the time value of date1 from next_us_election, we get the time difference in milliseconds.

To convert the time difference from milliseconds to days, we divide it by the number of milliseconds in a day (1000 _ 3600 _ 24). The result is stored in the variable difference_in_days.

Finally, the parseInt() function is used to convert the difference_in_days value to an integer, and the result is logged to the console along with the "Days" string. The output will be "554 Days".


34. Object Literals in Javascript
let person = {
	name: 'John',
	age: 30,
	hobbies: ['reading', 'traveling', 'cooking'],
	address: {
		street: '123 Main St',
		city: 'New York',
		state: 'NY',
	},
	sayHello: function () {
		console.log('Hello, my name is ' + this.name)
	},
}

console.log(person.name)
console.log(person.hobbies[1])
console.log(person.address.city)
person.sayHello()

What does the above code snippet output?

  • A: John, traveling, New York, Hello my name is John
  • B: John, cooking, New York, Hello my name is John
  • C: John, reading, New York, Hello my name is John
  • D: John, traveling, New York, NY
Answer

ANSWER: A

The code defines an object literal person with properties such as name, age, hobbies, and address, and a method sayHello.

The console.log() statements print the value of name, the second element of the hobbies array (which is "traveling"), and the value of the city property in the address object (which is "New York").

Finally, the method sayHello is called on the person object using dot notation, which outputs the string "Hello, my name is John" to the console.


35. this Object
function User(username) {
	this.username = username

	this.updateUsername = newName => {
		this.username = newName
	}
}

const user1 = new User('kirandash')
const user2 = new User('bgwebagency')

user1.updateUsername('kirandash-website')
user2.updateUsername('bgwebagency-app')

console.log(user1.username, user2.username)

What does the above code snippet output?

  • A:"kirandash bgwebagency"
  • B:"kirandash-website bgwebagency-app"
  • C:"kirandash kirandash"
  • D:"bgwebagency-app bgwebagency-app"
Answer

Answer: B

The code defines a constructor function User that creates user objects with a username property and an updateUsername method. Two user objects, user1 and user2, are created with initial usernames 'kirandash' and 'bgwebagency' respectively.

The updateUsername method is called on both user1 and user2 objects to update their usernames. user1's username is updated to 'kirandash-website', and user2's username is updated to 'bgwebagency-app'.

Finally, the code logs the concatenation of user1.username and user2.username, which results in the output 'kirandash-website bgwebagency-app'.


36. call(), apply() and bind() Functions Of Javascript
function greet(name) {
	console.log(`Hello, ${name}! Welcome to ${this.location}.`)
}

const person = {
	location: 'New York',
}

greet.call(person, 'John')
greet.apply(person, ['Alex'])
const greetPerson = greet.bind(person)
greetPerson('Thomas')

What does the above code snippet output?

  • A: Hello, Thomas! Welcome to New York , Hello, Alex! Welcome to New York , Hello, Alex! Welcome to New York.
  • B: Hello, John! Welcome to New York , Hello, Alex! Welcome to New York , Hello, Thomas! Welcome to New York.
  • C: Hello, Alex! Welcome to New York , Hello, Thomas! Welcome to New York , Hello, John! Welcome to New York.
  • D: None Of The Above
Answer

ANSWER: B

The call function is used to invoke the greet function with the person object as the context (the value of this) and 'John' as the argument.

The apply function is used to invoke the greet function with the person object as the context (the value of this) and an array ['Alex'] as the arguments.

The bind function is used to create a new function greetPerson with the person object as the bound context (the value of this).

In summary, the code demonstrates how call, apply, and bind can be used to invoke a function with a specific context and arguments


37. class, class expression and static members
class Animal {
	constructor(name) {
		this.name = name
	}
	static makeSound() {
		console.log('Generic animal sound')
	}
	sayName() {
		console.log(`My name is ${this.name}`)
	}
}

const a1 = new Animal('Lion')
const a2 = new Animal('Time')

Animal.makeSound()
a1.makeSound()
a2.makeSound()

What does the above code snippet output?

  • A. "Generic animal sound", "TypeError", "TypeError"
  • B. "Generic animal sound", "Generic animal sound", "Generic animal sound"
  • C. "TypeError", "TypeError", "TypeError"
  • D. "TypeError", "Generic animal sound", "Generic animal sound"
Answer

Answer: A

The static method makeSound() is defined on the Animal class, and is accessible directly through the class itself, i.e., Animal.makeSound(). This will output "Generic animal sound" to the console.

However, when we try to call makeSound() on an instance of the Animal class (a1.makeSound() and a2.makeSound()), we get a TypeError, because static methods can only be accessed through the class itself and not through its instances.


38. for Inheritance, Subclassing and Extending built in class (Level: Hard)
function Animal(name) {
	this.name = name
}

Animal.prototype.eat = function () {
	console.log(this.name + ' is eating.')
}

function Dog(name) {
	Animal.call(this, name)
}

Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog

Dog.prototype.bark = function () {
	console.log(this.name + ' is barking.')
}

function CustomArray() {
	Array.call(this)
}

CustomArray.prototype = Object.create(Array.prototype)
CustomArray.prototype.constructor = CustomArray

CustomArray.prototype.sum = function () {
	return this.reduce((acc, val) => acc + val, 0)
}

var dog = new Dog('Buddy')
dog.eat()
dog.bark()

var numbers = new CustomArray()
numbers.push(1, 2, 3, 4, 5)
console.log(numbers.sum())

What will be the output of the following code

  • A: Buddy is eating Buddy is barking 15
  • B: Buddy is eating Buddy is eating 12
  • C: Buddy is barking Buddy is eating 9
  • D: Buddy is barking Buddy is barking 10
Answer

Answer: A

Explanation: In this example, we have a base class called Animal that defines a constructor and an eat() method. The subclass Dog extends the Animal class and adds its own constructor, bark() method, and a specific property breed.

Furthermore, we extend the built-in Array class using the class syntax to create a CustomArray class. The CustomArray class adds a custom method called sum() that calculates the sum of the array elements.

In the usage section, we create an instance of Dog named dog with the name "Buddy" . We can call the inherited eat() method from the Animal class, the bark() method defined in the Dog class.

Additionally, we create an instance of CustomArray called numbers and add some numbers to it. We can call the custom sum() method, which is added to the built-in Array class through subclassing.

This example showcases inheritance, subclassing, and extending a built-in class in JavaScript, illustrating how classes can be extended and customized to add additional functionality.


39. Destructuring Object Literal
const person = {
	name: 'John',
	age: 30,
	city: 'New York',
}

const { name, age, city } = person

console.log(name)
console.log(age)
console.log(city)

What will be the output of the following code

  • A: John 30 New York
  • B: John 30 John
  • C: New York 30 John
  • D: None of the above
Answer

Answer: A

In the code above, we have an object literal called person with properties name, age, and city. We then use object destructuring to extract those properties into separate variables (name, age, and city). After destructuring, we can use these variables to access the corresponding values from the object.


40. JavaScript Modules, Import, and Export in ES6

Consider the following code snippet:

// module.mjs
export const PI = 3.14159

export function calculateArea(radius) {
	return PI * radius * radius
}

export default function calculateCircumference(radius) {
	return 2 * PI * radius
}

// script.mjs
import calculateCircumference, { PI, calculateArea } from './module.mjs'

console.log(PI) // Output: ________
console.log(calculateArea(5)) // Output: ________
console.log(calculateCircumference(5)) // Output: ________

What will be the output of the console.log statements in the code above?

Options:

  • A. Output: 3.14159, 78.53975, 31.4159
  • B. Output: 3.14159, 78.53975, 62.8318
  • C. Output: 3.14159, 78.53975, NaN
  • D. Output: 3.14159, NaN, 62.8318
Answer

Answer: B

The module.js file exports three entities:

  1. PI is a named export, exported using the export keyword.
  2. calculateArea is a named export, exported using the export keyword.
  3. calculateCircumference is the default export, exported using the export default syntax.

In the main.js file, we import PI and calculateArea as named exports using the destructuring assignment syntax. We also import calculateCircumference as the default export. The import statements reference the module.js file using the relative file path ./module.js.

The outputs of the console.log statements will be:

  • console.log(PI) will output 3.14159 since we imported the named export PI.
  • console.log(calculateArea(5)) will output 78.53975 since we imported the named export calculateArea and called the function with a radius of 5.
  • console.log(calculateCircumference(5)) will output 62.8318 since we imported the default export calculateCircumference and called the function with a radius of 5.


41. Named Import and Export

Consider the following code snippet:

// foo.js
function foo() {
	console.log(`Foo`)
}

export { foo }

What is the correct Syntax to import the function foo?

Options:

  • A. import foo from "./foo"
  • B. import foo as FooFunction from "./foo"
  • C. import { foo } from "./foo"
  • D. import { foo } from "./bar"
Answer

Answer: C

Named exports are imported into different files with braces and must be imported with the name of the object, function or variable that was exported. In this example, a function with the name foo is exported from the file foo.js. Accordingly, the correct expression is: import { foo } from "./foo".


42. Default Import Export (Level: Medium)

In JavaScript, when importing a default export from a module, which syntax correctly assigns an alias "myAlias" to the default import?

  • A: import default as myAlias from 'module';
  • B: import myAlias from 'module';
  • C: import { default as myAlias } from 'module';
  • D: Both option B and C
Answer

Answer: D: Both option B and C.

Explanation: Both option B and C are valid syntaxes for importing a default export from a module and assigning it an alias. The difference between the two syntaxes is that option B does not use the { default as myAlias } syntax. This means that the default export will be imported under the name myAlias, rather than the name default.

Here is an example of how to use the option B syntax:{import myAlias from 'module';},This will import the default export from the module module and assign it the name myAlias. You can then use the myAlias variable to access the default export from the module module. Here is an example of how to use the option C syntax:{import { default as myAlias } from 'module';},This will import the default export from the module module and assign it the alias myAlias. You can then use the myAlias alias to access the default export from the module module.

The choice of which syntax to use is up to you. The option B syntax is simpler, but it can lead to collisions if there is already a variable named myAlias in the current scope. The option C syntax is more verbose, but it avoids collisions.


Misc 1. JavaScript JSON (Level: Medium)

Which method is used to convert a JavaScript object to a JSON string while preserving data types like Dates and RegEx?

  • A: JSON.stringify()
  • B: JSON.stringify() with a custom replacer function
  • C: JSON.toTypedString()
  • D: There is no built-in method; you need to manually convert data types before using JSON.stringify()
Answer

Answer: B JSON.stringify() with a custom replacer function.

Explanation: The JSON.stringify() method can be used to convert a JavaScript object to a JSON string. However, by default, it will not preserve data types like Dates and RegEx. To preserve these data types, you can use a custom replacer function. The replacer function takes an object as input and returns a new object with the modified values.

The code below would show you how to use a custom replacer function to preserve data types:

function replacer(key, value) {
	if (typeof value === 'Date') {
		return value.toJSON()
	} else if (typeof value === 'RegExp') {
		return value.toString()
	} else {
		return value
	}
}

const object = {
	date: new Date(),
	regex: /some regex/,
}

const jsonString = JSON.stringify(object, replacer)

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

Contributors

adedoyin-emmanuel avatar jp-gect avatar jwernethumd avatar kirandash avatar kno29 avatar krabhi1 avatar mehmetterc avatar murat114 avatar naitikraj12935 avatar rahulrana701 avatar subham5401 avatar vida-1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

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

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

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 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 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 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

image

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 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)

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
  1. 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.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 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));

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 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?

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 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 `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 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 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 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 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 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}

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 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 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 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
  1. If there is no value to return, what will findIndex() return ?
  • undefined
  1. 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.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.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 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(){}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.