JavaScript and React Fundamentals Quiz
Tags: javascript, react, career, codenewbie
Published: 2022-04-21 09:19:12


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

//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?
```javascript
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?
```javascript
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?
```javascript
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:
```javascript
new webpack.ContextReplacementPlugin(/moment[\/\\]local/,/(en-gb | en-us)\.js/)
```
Describe = ________________

### 28. What is the content of the variable "a"?
```javascript
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?

```javascript
// 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?
```javascript
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"?
```javascript

//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?
```javascript
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?
```javascript
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 :key:
 
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 :heart:
[Twitter](https://twitter.com/GregoriosPetro1)
[Linkedin](https://www.linkedin.com/in/greg-petropoulos/)
[Portfolio](https://gregpetropoulos.dev/)
[Github](https://github.com/GregPetropoulos)

Thank you for your time. 

Best, 

## Happy Coding!