Technical Questions Flashcards

1
Q

What are some core principles of functional programming?

A

Immutability, purity, first class functions, and high order functions.

Please elaborate

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What makes a function pure?

A

A function that always returns the same result if the same arguments are passed.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is immutability?

A

Idea that once an object or variable has been created, its values should never change or be updated by anything.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a higher order function?

A

It is a function that accepts functions as parameters and/or returns a function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is the purpose of a return statement in a function?

A

A return statement ends the execution of a function, and returns control to the calling function; a return statement can return a value to the calling function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is function composition?

A

Powerful technique used in programming to combine multiple functions into a single, more complex function. More efficient and reusable code.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is currying?

A

Currying transforms a function with multiple arguments into a nested series of functions, each taking a single argument.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are some of the advantages of functional programming?

A

Enhanced code readability and maintainability. Better scalability and performance optimization. Reduced complexity and improved debugging.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is a closure, and how/why would you use one?

A

A closure is the combination of a function bundled together with references to its surrounding state (lexical environment); a closer gives you access to an outer function’s scope from an inner function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Explain the concept of hoisting.

A

Default behavior to moving all the declarations at the top of the scope before code execution. No matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the ‘This’ keyword in JavaScript?

A

‘This’ keyword refers to an Object is executing the current piece of code. References the Object that is executing the current function.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Explain the concept of event delegation?

A

A pattern that efficiently handles events. Events can be added to a parent element instead of adding to every single element. Refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is a Promise and why is it helpful?

A

Used to handle asynchronous operations in JavaScript. Perform operations inside the callback function and if everything went well then call resolved. If desired operations do not go well call rejected.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is block scope and how is it different from global and local scope?

A

Block scope: Variable that is declared inside a specific block and cannot be accessed outside of that block. Block scopes are what you get when you use ‘if statements’, ‘for statements’ etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why is it in general, a good idea to leave the global scope of a website as-is and never touch it?

A

JavaScript that is executed in the browser has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will occur.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the difference between ‘null’ and ‘undefined’?

A

Undefined means the variable has been declared, but it’s value has not been assigned. Null means an empty value or blank value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What’s the difference between ‘let’ and ‘const’?

A

Var variables can be updated and re-declared within its scope. Let variables can be updated but not re-declared. Const variables can neither be updated nor re-declared. Const = constant.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is an event loop?

A

An event loop is something that pulls stuff out of the queue and places it onto the function execution stack whenever the function stack becomes empty.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What does event bubbling or propagation mean?

A

Event bubbling is a method of event propagation in HTML, DOM when an event is in an element inside another element. And both elements have registered a handle to that event. It’s a process that starts with the element that triggered the event and then bubbles up to the containing elements in that hierarchy.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is “use strict”? What are the advantages and disadvantages to using it?

A

“Use strict” tells the browser to use Strict mode, which is reduced and safer feature set of JavaScript. Strict mode makes several changes to normal JavaScript semantics. It eliminates some JavaScript silent errors by changing them to throw errors.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How is an array different from an object?

A

Arrays are best to use when the elements are numbers, want to create and store a list of multiple items in a single variable. Ordered collections or lists can be accessed using an index starting at zero.

Objects are best to use when the elements are strings. Mutable and used as a collection of data to represent key-value pairs. Both can add or remove items and both are complex data structures.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

How do you interact with APIs on the front end?

A

Make HTTP requests to remote servers to fetch or send data. Invokes asynchronous JavaScript so need to ensure that code properly handles the timing of API responses using Promises, async/await, callback functions.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is chaining in JavaScript?

A

Method Chaining allows us to run multiple methods on the same element within a single statement.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Define the term ‘MVC’ and explain how an application is architected when following MVC patterns.

A

Model-View-Controller (MVC) framework is an architectural/design patterns that separates an application into three main logical components- Model, View, and Controller. Architectural pattern consists of three parts: Model, View, Controller.

Model handles the data logic.
View displays the information from the model to the user.
Controller controls the data flow into a model object and updates the view whenever data changes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What does CORS stand for and what issue does it address?

A

Cross Origin Resource Sharing. HTTP-header based mechanism which enables the server to allow or restrict access from any other origins.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What does npm build do?

A

Npm build creates a build directory with a production build of your app.

27
Q

What can you tell me about RESTful APIs?

A

RESTful API is an interface that two computer systems use to exchange information securely over the internet. Uses HTTP requests to access and use data. GET, PUT, POST, DELETE data types.

28
Q

How does JSON work?

A

No need for parsing or serializing in JSON format. Text-based way of representing JavaScript object literals, arrays, and scalar data. Lightweight format for data interchanging. Used in web service responses.

29
Q

What is the difference between ES5 and ES6?

A

In ES5 there is one way of defining variables using a ‘var’ keyword. In ES6 you are introduced to two more ways of defining variables with let and const. Also introduced to the arrow function which eliminates need for keyword ‘function’. Introduced to Promise() which is a convenient way of handling callbacks. Import and export modules available. String interpolation with template literal or backtick.

30
Q

What’s the difference between an HTTP request and response?

A

Requests are sent by the client to trigger an action on the server. Responses return an answer from the server.

31
Q

What does a 200 status code mean?

A

OK status code means the request was successful.

32
Q

What does a 400 status code mean?

A

Bad Request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client side error.

33
Q

What is local storage hook in React?

A

Used for storing data locally on the user’s computer. It will not expire unlike cookies. Allows developers to store and retrieve data locally within a user’s web browser.

34
Q

Explain how a GET request works.

A

GET request in simple terms is a way for you to grab data from a data source using a GET request method. Method used to ask the server to send back a given resource.

35
Q

What is the DOM? How is the virtual DOM different?

A

DOM (Document Object Model) is the actual representation of a web page’s structure and content. Virtual DOM is an abstract, lightweight copy of the real DOM that can be used to optimize and speed up web development and rendering.

36
Q

What advantages does React offer? What about disadvantages?

A

Advantages include: declarative, simple to use, backed by strong community, ability to use functional components with Hooks, virtual DOM, unidirectional data flow (data down, actions up), server-side rendering which can improve SEO and initial page load times by rendering HTML on the server before sending it to the client.

Disadvantages include: Learning curve with any framework, state management issues (Redux or similar), and setting it up can be difficult, frequent updates can present breaks in code.

37
Q

What is the concept of state in React?

A

Internal data storage that allows components to keep track of and manage their own data. Any piece of data that should be saved and updated over time in response to user interactions, events etc.

React will automatically re-render the component to reflect those changes to state.

38
Q

What is a React component?

A

Self-contained, reusable building block of code and serve same purpose as functions. Functional components- stateless components and receive props as arguments and return a React element (JSX) that describes UI.

39
Q

What problems does Redux solve?

A

Redux is a state management library that uses events called actions. Dispatch sends your action to a reducer. Unique data flow architecture. Manage application state. When the size of an application becomes too large to manage the state of each component, Redux can help. Redux helps to centralize the state of your app in a single store.

40
Q

What is JSX?

A

JavaScript Syntax extension. An XML-like extension that allows us to write HTML in React alongside JavaScript.

41
Q

How is JSX different from HTML?

A

HTML elements have attributes whereas JSX elements have props. JSX is an extension of JavaScript that permits you to write down HTML directly within JavaScript in a React app.

42
Q

How are props different from state?

A

Props are used to pass data from a parent component to a child component. State is used to manage data within a component. Props are immutable and cannot be changed within a component. State is mutable and can be updated using the setState function within useState hook.

43
Q

What’s your experience with React Hooks? Why use them?

A

Hooks allow you to reuse stateful logic without changing your component hierarchy. Prior, React mainly used class-based components which made things cumbersome when switching between classes, higher order components, and render props. Simpler code that runs faster. Can implement state and lifecycle methods (useEffect) without writing classes.

44
Q

What is TDD? What benefits does it provide?

A

Test Driven Development (TDD) is beneficial to raise level of code quality, helpful with debugging code, and allows for pre-planning of code before a developer begins writing code.

45
Q

What is Flexbox and why is it important for creating layouts?

A

One-dimensional layout method for arranging items in rows and columns. Offers greater control over alignment and space distribution between items.

46
Q

What is grid and why is it important for creating layouts?

A

Grid is a structure of columns and lines that helps you to design a website. It can be time saving during the design phase of building an app and provides composition.

47
Q

Can you describe what responsive design is to you and how you would implement it?

A

Design and development should respond to the user’s behaviors and environment based on screen size, platform and orientation. It involves the use of media queries and breakpoints. Pixel values that a developer/designer can define in CSS. When a responsive website or app reaches those pixel values, a transformation occurs so the website adapts to the screen size.

48
Q

What’s the difference between display: inline and display: inline-block?

A

Inline-block allows you to set a width and height on an element. With display: inline, top and bottom margins & paddings are not respected, and with display: inline-block they are taken into account.

49
Q

What is a pseudo class? What are they used for in CSS?

A

Pseudo-class is a selector that selects elements that are in a specific state; i.e., the first element if their type, or they are being hovered over by the mouse pointer. Keywords that start with a colon, i.e., :hover is a pseudo-class.

50
Q

Describe z-index and how stacking is formed?

A

Z-index property used and higher z-index values are displayed in front of those with a lower z-index value. Z-index only works with positional elements.

51
Q

Why is generally a good idea to position CSS <link></link> between <head> <head/> and JS

 just before </body>? Any exceptions?
A

This allows for faster rendering of the page and better overall performance. An exception to this rule of positioning

 at the bottom is when your script contains document.write() but this is not good practice. Placing 
s at the bottom means the browser cannot start downloading the scripts until the entire document is parsed. Place <link></link> inside <head> tag because part of the proper specification in building optimized website.
52
Q

In an HTML file, what does the ‘doctype’ keyword do?

A

First line of code required in every HTML document. It serves as an instruction to the web browser about the version of HTML the page is written in.

53
Q

Give an example of a self-closing HTML tag.

A

<img></img>, <input></input>, <br></br>

  • image tag, input tag, break tag
54
Q

What could be used instead of <b> for bold and <i> for italicized to make HTML more semantic?</i></b>

A

<strong> and <em> tags could be used instead.</em></strong>

55
Q

What is the purpose of article, section, header, and footer tags? Explain why not always good to use <div> tags?

A

<article> tag specifies independent, self-contained context. Forum, post, blog post, news story are good use cases.

<section> tag specifies a section in a document.

<header> tag specifies a container for introductory content or a set of navigational links. You can have several header elements in one HTML doc. Cannot be placed within a <footer>, <address>, or another <header> element.

<footer> tag specifies a footer or end section of document. Typically a footer contains authorship information, copyright info, contact info, sitemap, back to the top links, related documents.

Best to not rely on <div> tags all the time due to accessibility issues. Semantic code favorable over use of dividers for screen readers.
</div></footer></header></address></footer></header></section></article>

56
Q

What are HTML data attributes?

A

Data-* attribute is used to store custom data private to the page or app. This allows us the ability to embed custom data attributes on all HTML elements.

57
Q

What steps do you take to make a website accessible?

A

Add images with alt text.
Allow users to enlarge font sizes.
Consider contrast sensitivity and colors suitable for color-blind individuals.
Keyboard navigation.
Descriptive URLs.
ARIA roles (use sparingly still).
Avoid using placeholder text in forms.
<span> tag with hidden?</span>

58
Q

What are examples of pseudo classes in CSS?

A

Active, Hover, Checked

  • A pseudo class is a keyword added to a selector that specifies a special state of the selected element(s)
  • In the hover example, the :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled or other properties applied
59
Q

How does the internet work?

A

Servers - host websites
Make a request to the server then server will give you a response back. Follows a request - response - cycle.
What does URL stand for? Uniform Resource Locator. An address for a website. Will have a domain name attached to it. IP address underlying the domain name. Search the internet by a domain name.
DNS - process the browser has to go through to match the IP address to the domain name.
Checks TLDs that stands for top level domain servers and try and locate a domain name - map IP address to domain name.

60
Q

What is the difference between npm and npx?

A

The command npm is used to download JavaScript packages from Node Package Manager. While npx is used to execute JavaScript packages downloaded this way.

61
Q

Give some examples of React Hooks?

A
62
Q

How do you send data back to the server and database with a React form?

A
63
Q

Can you describe a recent front-end project you worked on? What technologies did you use, and what challenges did you face?

A
64
Q

How do you approach debugging and solving issues in your code? Can you provide an example of a particularly challenging problem you’ve encountered and how you resolved it?

A