DEV Community

Cover image for JavaScript and React Fundamentals Quiz
Greg
Greg

Posted on

JavaScript and React Fundamentals Quiz

#javascript #react #career #codenewbie

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)
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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); } }
Enter fullscreen mode Exit fullscreen mode

A-Python
B-JavaScript
C-C#
D-PHP

14. What does the "const" declaration do? 

const pi = 3.14; console.log(pi)
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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};
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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}.`)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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/)
Enter fullscreen mode Exit fullscreen mode

Describe = ________________

28. What is the content of the variable "a"? 

function mystery(...params) { return params; } let a = mystery(1,23,4)
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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}`); }
Enter fullscreen mode Exit fullscreen mode

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]];
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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, 

Happy Coding!

Top comments (0)