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, 

Happy Coding!