Exam questions

Frontend Exam January 2025

Question 1

JS

1. What are higher-order functions in JavaScript and what are the benefits? Show some examples in your own code.

REACT

1. What is the main concept of an React component? Show and explain in your own code.
2. Explain the benefits of using components compared to how you would build a web application in vanilla javascript.

Security/Routing/Styling

1. Explain what React-Router is and which problems does it solve?
2. Show and explain the essential building blocks like BrowserRouter, Routes, Route, Outlet, path, element, errorElement, useNavigate etc..

Question 2

JS

1. Show some examples where you used a higher order function (that takes a callback function as argument). Explain the benefits of doing that.

REACT

1. What is JSX? Provide an example.

• How would you write the same functionality if you only used Javascript, HTML and DOM manipulation?

Security/Routing/Styling

1. Describe the purpose of flexbox and grid in css, and show some examples of what can be achieved by applying them.

Question 3

JS

1. What is the purpose of the package.json file and what can you do with it?

REACT

1. Show and describe the purpose of props including children.
2. Show and explain the role of state in a React component.

Security/Routing/Styling

1. Describe conceptually how we deploy a React frontend application to the Caddy server through the CI/CD pipeling.

Question 4

JS

1. Show and explain the concept of promises in JavaScript.

REACT

1. How do you handle errors (HTTP or JS errors) in React? Show examples in you own code.

Security/Routing/Styling

1. What is the purpose of Caddy? Explain how we use it in our deployment pipeline (reverse proxy / serving static files / HTTPS certificate handling).

Question 5

JS

1. Show the difference between synchronous and asynchronous programming and how does async and await fit into this?

REACT

1. Provide examples for different ways of doing conditional rendering.

Security/Routing/Styling

1. Show and explain conceptually a typical flow of using JWTs for user authentication in a React application.

Question 6

JS

1. What is the difference between localStorage and sessionStorage in JavaScript?
2. Show the use of different storage options in browsers developer tools.

REACT

1. Show and explain the useEffect hook (eg. callback, dependency array etc.)

Security/Routing/Styling

1. Show and explain the different parts of a JWT token.

Question 7

JS

1. Show an example of DOM manipulation in JavaScript.

REACT

1. Show and describe event handling in React (eg. onClick, onChange, onSubmit etc.)
2. Show examples of how to handle form submit events.

Security/Routing/Styling

1. Describe and show the login process using JWT

Question 8

JS

1. Show and explain the concept of event bubbling in JavaScript.

REACT

1. Show and explain how the map function is used for rendering lists in React and explain the purpose of the key attribute in React lists?

Security/Routing/Styling

1. Describe conceptually what HTTPS is and how we got it working on our deployed websites.

Question 9

JS

1. What is the scope of a variable in JavaScript? Explain the difference between global and local scope.

REACT

1. Show and explain how controlled components are different from uncontrolled components in React forms?

Security/Routing/Styling

1. Show and explain an example of sub-routing.

Question 10

JS

1. Show and explain the spread operator in JavaScript and how it differs from the rest operator?

REACT

1. What are React Hooks? Provide examples of at least two built-in hooks.
2. Show example of how you handle errors in React.

Security/Routing/Styling

1. Describe conceptually what Same Origin Policy (SOP) and Cross Origin Ressource Sharing (CORS) are, and how we avoid getting CORS errors when fetching data from your API.

Question 11

JS

1. Show and explain the difference between synchronous and asynchronous programming and how async and await fit into this?

REACT

1. Show and explain the purpose of lifting state up in React.

Security/Routing/Styling

1. Show how you can use flexbox in Styled-Components.

Question 12

JS

1. Show and explain the concept of promises in JavaScript.

REACT

1. Provide examples for different ways of doing conditional rendering.

Security/Routing/Styling

1. Describe the purpose of flexbox and grid in css, and show some examples of what can be achieved by applying them.

Question 13

JS

1. What are higher-order functions in JavaScript and what are the benefits? Show some examples in your own code.

REACT

1. Show and describe the purpose of props including children.
2. Show and explain the role of state in a React component.

Security/Routing/Styling

1. Describe and show the login process using JWT.