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

JavaScript multiple choice questions with answers and video explanation to help you with Frontend/Web coding interviews
https://youtu.be/Uysa8_Aa5Sg
MIT License
27 stars 13 forks source link
contributions-welcome frontend-interview frontend-interview-questions good-first-issue help-wanted javascript javascript-interview-questions open-source opensource

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](https://github.com/kirandash) ❤️ 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))
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)
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)
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)
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)
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("🍎", "🍌", "🍇", "🍊", "🍍")
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)
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'))
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))
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())
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)
}
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)())
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))
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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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?

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

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

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:

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:

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?

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?

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:

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