JavaScript/React Fundamentals
This is a 48 multiple choice and 2 fill in the blank quiz to assess your JavaScript and React skill level.
1. What is Reconciliation in React?
A-The process through which React deletes the DOM.
B-It is a process to set the state.
C-The process through which React updates the DOM.
D-The process through which React updates and deletes the component.
2. How do you create a function in JavaScript?
A-function myFunction()
B-function = myFunction
C-function:myFunction()
3. What is the correct way to write a JavaScript array?
A-var colors = "red", "green", "blue"
B-var colors = (1:"red", 2:"green", 3:"blue")
C-var colors = ["red", "green", "blue"]
D-var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")
4. Which is the correct description of React State vs Props?
A-Prop is managed within the component and holds some information that may change over the lifetime of the component; State gets passed to the component, like a function parameter
B-Props is a copy of real DOM; State is the definition of the real DOM.
C-Props is something that the parent doesn’t need and decide to throw around among other parents; State is the parent’s favorite child and something the component wants to nurture.
D-Props get passed to the component using naming conventions, like a function parameter; State is managed within the component and holds some information that may change over the lifetime of the component.
5. What is the difference React Controlled Component vs Uncontrolled Component
A-Controlled Components: every state mutation does not have an associated handler function; Uncontrolled Components: does not store their own states internally
B-Controlled Components: A component who is so good at controlling itself; Uncontrolled Components: A component who has no idea how to control itself
C-Controlled Components: store their own states internally; Uncontrolled Components: every state mutation will have an associated handler function
D-Controlled Components: every state mutation will have an associated handler function; Uncontrolled Components: store their own states internally
6. Which operator is used to assign a value to a variable?
A) x
B) -
C) =
D) *
E) +
7. In your manifest.json what is the correct way to declare the location?
A-"default_locale": "en"
B-"local":"en"
C-"browser_locale": "en"
D-"country": "en"
8. What is the purpose Array.from() in the code below?
let titleElems = document.querySelectorAll('.article .title')
let titles = Array.from(titleElems).map(t=> t.textContext);
console.log(titles)
A-You need it, because querySelectorAll returns a NodeList, which doesn't have the map method, only arrays do.
B-This code is wrong and won't work.
C-You use it because it is hip.
9. In the function below, what do we use Object.assign for?
function doSomething(param={}){
var defaults= {
color:'red',
shape:'square'
}
var settings =Object.assign({}, defaults, param);
//.......more code
}
A-Checks whether defaults equals param.
B-You use it to provide default parameters to the function, which users can override.
C-Create a string containing 'defaults' and 'param'.
10. How do you find the number with the highest value of x and y?
A-Math.max(x, y)
B-top(x, y)
C-ceil(x, y)
D-Math.ceil(x, y)
11. How do you round the number 7.25, to the nearest integer?
A-Math.round(7.25)
B-round(7.25)
C-Math.rnd(7.25)
D-rnd(7.25)
12. Which are the correct phases of the React component lifecycle?
A-Mounting: componentWillUnmount(); Updating: render(); Unmounting: setState()
B-Mounting: getDerivedStateFromProps(); Updating: componentWillUnmount(); Unmounting: shouldComponentUpdate()
C-Mounting: componentDidMount(); Updating: componentDidUpdate(); Unmounting: componentWillUnmount()
D-Mounting: constructor(); Updating: getDerivedStateFromProps(); Unmounting: render()
13. Which language is this?
class Vehicle {
constructor(model, wheels){
this.model = model;
this.wheels = wheels;
}
makeSound(){
console.log('Vroom Vroom');
}
}
class Car extends Vehicle {
constructor(model){
super(model,4);
}
}
A-Python
B-JavaScript
C-C#
D-PHP
14. What does the "const" declaration do?
const pi = 3.14;
console.log(pi)
A-const turns variables into constants, and they can't be changed.
B-It is used to define math-related variables.
C-It is exactly the same as let.
15. How to write an IF statement for executing some code if "i" is NOT equal to 5?
A-if i =! 5 then
B-if i <> 5
C-if (i != 5)
D-if (i <> 5)
16. What is the correct way to access translation data in your JavaScript?
A-browser.i18n.getMessage("notificationTitle");
B-i18n.getMessage("notificationTitle");
C-getMessage("notificationTitle");
D-i18n("notificationTitle")
E-browser.i18n("notificationTitle");
17. What does the below code do?
let a = 12, b = 3;
[a, b]=[b, a];
A-Swap the values inside a and b, without using extra variables.
B-Make both a and b equal 12.
C-Create an array containing a and b.
18. What is the correct syntax for referring to an external script called "xyz.js"?
A-<script href="xyz.js">
B-<script src="xyz.js">
C-<script name="xyz.js">
19. What's the ES6 way for quick initialization of objects from variables?
//Old Way
var name = 'Johnny', job = 'secret agent', from ='England';
var person ={
'name':name,
'job':job,
'from': from
};
// A
let name = 'Johnny', job ='secret agent', from ='England';
let person = new Object(name, job, from);
// B
let name = 'Johnny', job ='secret agent', from ='England';
let person ={name, job, from};
C-None of these are correct.
20. JavaScript is the same as Java.
A-False
B-True
21. Which method can be used to clean up this old JavaScript code?
var arr =[12,3,42,55,10]
function someFunc(arr){
for(let i=o; i<arr.length; i++){
if(arr[i]>32){
return arr[i];
}
}
}
// A
arr.find(n=> n>32);
// B
arr.findIndex(n=> n>32);
// C
arr.search(n => n>32)
22. Is there anything incorrect in this String interpolation example?
let name ='Harry';
let occupation ='plumber';
console.log(`Hi! my name is ${name}.
I am ${occupation}.`)
A-This is wrong. You can't break a string into separate lines in JavaScript!
B-There is nothing wrong with it. This is how string interpolation works in ES6.
C-This is wrong. You can't embed variables in strings in JavaScript!
23. How does a WHILE loop start?
A-while (i <= 10)
B-while i = 1 to 10
C-while (i <= 10; i++)
24. How do you declare a JavaScript variable?
A-var carName;
B-let carName;
C-const carName;
D-All of the Above
25. ES6 gives us a "let" statement - a new way to declare variables. Can you guess what it does?
let x= 149
if(x>99){
let x= 1;
}
console.log(x)
A-It functions exactly like var.
B-Always makes variables equal 149.
C-Introduces block scoping. Variables defined with let are available only in the nearest enclosing block.
26. Where is the correct place to insert a JavaScript?
A-The <body> section
B-Both the <head> section and the<body> section are correct
C-The <head> section
27. Explain this code:
new webpack.ContextReplacementPlugin(/moment[\/\\]local/,/(en-gb | en-us)\.js/)
Describe = ________________
28. What is the content of the variable "a"?
function mystery(...params) {
return params;
}
let a = mystery(1,23,4)
A) "a" becomes "1 23 4"
B) "a" becomes [1,23,4]
C) "a" is undefined
29. What is the correct usage for an arrow functions work?
// Old Way
var arr =[3,5,8];
var plus_one = arr.map(function(n){
return n+1;
})
console.log(plus_one); //Prints [4,6,9]
// A
let arr =[3,5,8];
let plus_one = arr.map(n => n+1);
// B
let arr =[3,5,8];
let plus_one = arr.map(n ---> n+1);
C- None of these are correct.
30. What will the following code return: Boolean(10 > 9)
A-false
B-NaN
C-true
31. How does a FOR loop start?
A-for (i = 0; i <= 5)
B-for (i = 0; i <= 5; i++)
C-for i = 1 to 5
D-for (i <= 5; i++)
32. What is the correct JavaScript syntax to change the content of the HTML element below? <p id="demo"> This is a demonstration.</p>
A-#demo.innerHTML = "Hello World!";
B-document.getElement("p").innerHTML = "Hello World!";
C-document.getElementById("demo").innerHTML = "Hello World!";
D-document.getElementByName("p").innerHTML = "Hello World!";
33. What results will these function calls return?
function add(a=10, b=5){
return a+b;
}
// A
add(11,2);
// B
add(3);
// C
add(undefined, 20);
// D
add();
1) A - 15, B - 13, C - 30, D - 15
2) A - 13, B - 8, C - 30, D - 15
3) A - 13, B - 13, C - 30, D - undefined
34 Inside which HTML element do we put the JavaScript?
A-<script>
B-<javascript>
C-<scripting>
D-<js>
35. What is the correct JavaScript syntax for opening a new window called "w2" ?
A-w2 = window.open("http://www.w3schools.com");
B-w2 = window.new("http://www.w3schools.com");
36. How can you detect the client's browser name?
A-navigator.appName
B-browser.name
C-client.navName
37. How do you call a function named "myFunction"?
A-call myFunction()
B-call function myFunction()
C-myFunction()
38. Your javascript bundle is too large and is causing performance issues. Please describe the steps you would take to fix this issue
Describe__________
39. How to write an IF statement in JavaScript?
A-if i == 5 then
B-if (i == 5)
C-if i = 5
D-if i = 5 then
40. Is JavaScript case-sensitive?
A-Yes
B-No
41. What is the recommended structure for providing localized strings via i18n?
A-Using the language as the name of as JSON file in the root (en.json)
B-Using the local folder structure for JSON (local/en.json)
C-Using the _locales folder structure to nest messages (_locales/en/messages.json)
D-Using YAML structure (en.xaml)
Parsing text files or ini equivalent
42. Which of these examples is the correct ES6 way to replace the "Old Way"?
//Old Way
let arr =[17,42,122]
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
}
// A
let arr =[17,42,122]
for(let i in arr){
console.log(`This the A answer ${arr[i]}`);
}
// B
let arr =[17,42,122]
for(let i of arr){
console.log(`This the B answer ${i}`);
}
C-They do the same thing.
43. What is the React “key” prop?
A-“Key” prop is a way for React to identify a newly added item in a list and compare during the “diffing” algorithm.
B-It is one of the attributes in HTML.
C-“Key” prop is just there to look pretty and there is no benefit whatsoever.
44. All I know is that it is NOT commonly used in array.
What is stored into the triangle array?
var point =[1,3];
segment=[point,[5,5]],
triangle=[...segment,[1,8]];
A-23
B-[ [1,3], [5,5], [1,8] ]
C-[1,3,5,5,1,8]
45. How do you write "Hello World" in an alert box?
A-msgBox("Hello World");
B-alert("Hello World");
C-alertBox("Hello World");
D-msg("Hello World");
46. What is the correct ES6 function to replace this code?
let some_text ='some cool string';
if(some_text.indexOf('str') != -1){
return true;
A-some_text.repeat()
B-some_text.endsWith()
C-some_text.includes()
47. How can you add a comment in a JavaScript?
A-//This is a comment
B-<!--This is a comment-->
C-'This is a comment
48. The external JavaScript file must contain the <script> tag.
A-False
B-True
49. Which event occurs when the user clicks on an HTML element?
A-onclick
B-onchange
C-onmouseclick
D-onmouseover
50. How to insert a comment that has more than one line?
A-//This comment has more than one line//
B-<!--This comment has more than one line-->
C-/*This comment has more than one line*/
Answers 🔑
1C
2A
3C
4D
5D
6C
7A
8A
9B
10A
11A
12C
13B
14A
15C
16A
17A
18B
19C
20A
21A
22B
23A
24D
25C
26B
27 File matching
28B
29A
30C
31B
32C
33-2
34A
35A
36A
37C
38 Compress with a gzip, webpack plugin, check image types and sizes, see the console network tab for load times
39b
40A
41C
42C
43A
44B
45B
46C
47A
48A
49A
50C
Social ❤️
Twitter
Linkedin
Portfolio
Github
Thank you for your time.
Best,
Top comments (0)