* [React docs on Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
#### What is a callback? Can you show an example using one?
Callbacks are functions passed as an argument to another function to be executed once an event has occurred or a certain task is complete, often used in asynchronous code. Callback functions are invoked later by a piece of code but can be declared on initialization without being invoked.\
As an example, event listeners are asynchronous callbacks that are only executed when a specific event occurs.
```
function onClick() {
console.log("The user clicked on the page.")
}
document.addEventListener("click",
onClick)
```
However, callbacks can also be synchronous. The following `map` function takes a callback function that is invoked synchronously for each iteration of the loop (array element).
```
const map = (arr, callback) => {
const result = []
for (let i = 0; i < arr.length; i++) {
result.push(callback(arr[i], i))
}
return result
}
map([1, 2, 3, 4, 5], n => n * 2) // [2, 4, 6, 8, 10]
```
#### Don't forget:
* Functions are first-class objects in JavaScript
* Callbacks vs Promises
#### Additional links
* [MDN docs for callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
#### What is the `children` prop?
`children` is part of the props object passed to components that allows components to be passed as data to other components, providing the ability to compose components cleanly. There are a number of methods available in the React API to work with this prop, such as `React. Children.map` , `React. Children.forEach` , `React. Children.count` , `React.Children.only` and `React. Children.toArray` . A simple usage example of the children prop is as follows:
```
function GenericBox({
children
}) {
return
{
children
} < /div>
}
function App() {
return ( <
GenericBox >
<
span > Hello < /span>
World
<
/GenericBox>
)
}
```
#### Don't forget:
* Children is a prop that allows components to be passed as data to other components.
* The React API provides methods to work with this prop.
#### Additional links
* [React docs on Children](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx)
#### Why does React use `className` instead of `class` like in HTML?
#### Answer
React's philosophy in the beginning was to align with the browser DOM API rather than HTML, since that more closely represents how elements are created. Setting a `class` on an element meant using the `className` API:
```
const element = document.createElement("div")
element.className = "hello"
```
Additionally, before ES5, reserved words could not be used in objects:
```
const element = {
attributes: {
class: "hello"
}
}
```
In IE8, this will throw an error.\
In modern environments, destructuring will throw an error if trying to assign to a variable:
```
const {
class
} = this.props // Error
const {
className
} = this.props // All good
const {
class: className
} =
this.props // All good, but
cumbersome!
```
However, `class` *can* be used as a prop without problems, as seen in other libraries like Preact. React currently allows you to use `class` , but will throw a warning and convert it to `className` under the hood. There is currently an open thread (as of January 2019) discussing changing `className` to `class` to reduce confusion.
#### Don't forget:
#### Additional links
#### How do you clone an object in JavaScript?
#### Answer
Using the object spread operator `...` , the object's own enumerable properties can be copied into the new object. This creates a shallow clone of the object.
```
const obj = {
a: 1,
b: 2
}
const shallowClone = {
...obj
}
```
With this technique, prototypes are ignored. In addition, nested objects are not cloned, but rather their references get copied, so nested objects still refer to the same objects as the original. Deep-cloning is much more complex in order to effectively clone any type of object (Date, RegExp, Function, Set, etc) that may be nested within the object.\
Other alternatives include:
* `JSON.parse(JSON.stringify(obj))` can be used to deep-clone a simple object, but it is CPU-intensive and only accepts valid JSON (therefore it strips functions and does not allow circular references).
* `Object.assign({}, obj)` is another alternative.
* `Object.keys(obj).reduce((acc, key) => (acc[key] = obj[key], acc), {})` is another more verbose alternative that shows the concept in greater depth.
#### Don't forget:
* JavaScript passes objects by reference, meaning that nested objects get their references copied, instead of their values.
* The same method can be used to merge two objects.
#### Additional links
* [MDN docs for Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
* [Clone an object in vanilla JS](http://voidcanvas.com/clone-an-object-in-vanilla-js-in-depth/)
#### What is a closure? Can you give a useful example of one?
#### Answer
A closure is a function defined inside another function and has access to its lexical scope even when it is executing outside its lexical scope. The closure has access to variables in three scopes:
* Variables declared in its own scope
* Variables declared in the scope of the parent function
* Variables declared in the global scope
In JavaScript, all functions are closures because they have access to the outer scope, but most functions don't utilise the usefulness of closures: the persistence of state. Closures are also sometimes called stateful functions because of this.\
In addition, closures are the only way to store private data that can't be accessed from the outside in JavaScript. They are the key to the UMD (Universal Module Definition) pattern, which is frequently used in libraries that only expose a public API but keep the implementation details private, preventing name collisions with other libraries or the user's own code.
#### Don't forget:
* Closures are useful because they let you associate data with a function that operates on that data.
* A closure can substitute an object with only a single method.
* Closures can be used to emulate private properties and methods.
#### Additional links
* [MDN docs for closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
* [What is a closure](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)
* [I never understood JavaScript closures](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)
#### How do you compare two objects in JavaScript?
#### Answer
Even though two different objects can have the same properties with equal values, they are not considered equal when compared using `==` or `===` . This is because they are being compared by their reference (location in memory), unlike primitive values which are compared by value.\
In order to test if two objects are equal in structure, a helper function is required. It will iterate through the own properties of each object to test if they have the same values, including nested objects. Optionally, the prototypes of the objects may also be tested for equivalence by passing `true` as the 3rd argument.\
Note: this technique does not attempt to test equivalence of data structures other than plain objects, arrays, functions, dates and primitive values.
```
function isDeepEqual(obj1, obj2, testPrototypes = false) {
if (obj1 === obj2) {
return true
}
if (typeof obj1 === "function" && typeof obj2 === "function") {
return obj1.toString() === obj2.toString()
}
if (obj1 instanceof Date && obj2 instanceof Date) {
return obj1.getTime() === obj2.getTime()
}
if (
Object.prototype.toString.call(obj1) !==
Object.prototype.toString.call(obj2) ||
typeof obj1 !== "object"
) {
return false
}
const prototypesAreEqual = testPrototypes ?
isDeepEqual(
Object.getPrototypeOf(obj1),
Object.getPrototypeOf(obj2),
true
) :
true
const obj1Props = Object.getOwnPropertyNames(obj1)
const obj2Props = Object.getOwnPropertyNames(obj2)
return (
obj1Props.length === obj2Props.length &&
prototypesAreEqual &&
obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))
)
}
```
#### Don't forget:
* Primitives like strings and numbers are compared by their value
* Objects on the other hand are compared by their reference (location in memory)
#### Additional links
* [Object Equality in JavaScript](http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html)
* [Deep comparison between two values](https://30secondsofcode.org/object#equals)
#### What is context?
#### Answer
Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.
```
const {
Provider,
Consumer
} = React.createContext(defaultValue)
```
#### Don't forget:
* Context provides a way to pass data through a tree of React components, without having to manually pass props.
* Context is designed to share data that is considered *global* for a tree of React components.
#### Additional links
* [React docs on Context](https://reactjs.org/docs/context.html)
#### What is CORS?
#### Answer
Cross-Origin Resource Sharing or CORS is a mechanism that uses additional HTTP headers to grant a browser permission to access resources from a server at an origin different from the website origin.\
An example of a cross-origin request is a web application served from `http://mydomain.com` that uses AJAX to make a request for `http://yourdomain.com` .\
For security reasons, browsers restrict cross-origin HTTP requests initiated by JavaScript. `XMLHttpRequest` and `fetch` follow the same-origin policy, meaning a web application using those APIs can only request HTTP resources from the same origin the application was accessed, unless the response from the other origin includes the correct CORS headers.
#### Don't forget:
* CORS behavior is not an error, it's a security mechanism to protect users.
* CORS is designed to prevent a malicious website that a user may unintentionally visit from making a request to a legitimate website to read their personal data or perform actions against their will.
#### Additional links
* [MDN docs for CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
#### Describe the layout of the CSS Box Model and briefly describe each component.
#### Answer
`Content` : The inner-most part of the box filled with content, such as text, an image, or video player. It has the dimensions `content-box width` and `content-box height` .\
`Padding` : The transparent area surrounding the content. It has dimensions `padding-box width` and `padding-box height` .\
`Border` : The area surrounding the padding (if any) and content. It has dimensions `border-box width` and `border-box height` .\
\&#xNAN;*Margin*: The transparent outer-most layer that surrounds the border. It separates the element from other elements in the DOM. It has dimensions `margin-box width` and `margin-box height` .
alt text
#### Don't forget:
* This is a very common question asked during front-end interviews and while it may seem easy, it is critical you know it well!
* Shows a solid understanding of spacing and the DOM
#### Additional links
* [W3School's CSS Box Model Page](https://www.w3schools.com/Css/css_boxmodel.asp)
* [Mozilla's Intro to the CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
#### What are the advantages of using CSS preprocessors?
#### Answer
CSS preprocessors add useful functionality that native CSS does not have, and generally make CSS neater and more maintainable by enabling DRY (Don't Repeat Yourself) principles. Their terse syntax for nested selectors cuts down on repeated code. They provide variables for consistent theming (however, CSS variables have largely replaced this functionality) and additional tools like color functions ( `lighten` , `darken` , `transparentize` , etc), mixins, and loops that make CSS more like a real programming language and gives the developer more power to generate complex CSS.
#### Don't forget:
* They allow us to write more maintainable and scalable CSS
* Some disadvantages of using CSS preprocessors (setup, re-compilation time can be slow etc.)
#### Additional links
* [CSS Preprocessors](https://medium.com/@garyfagan/css-preprocessors-6f226fa16f27)
#### What is the difference between '+' and '\~' sibling selectors?.
#### Answer
The General Sibling Selector `~` selects all elements that are siblings of a specified element.\
The following example selects all `
` elements that are siblings of `
` elements:
```
div ~ p {
background-color: blue;
}
```
The Adjacent Sibling Selector `+` selects all elements that are the adjacent siblings of a specified element.\
The following example will select all `
` elements that are placed immediately after `
` elements:
```
div + p {
background-color: red;
}
```
#### Don't forget:
#### Additional links
* [W3School's CSS Combinators Page](https://www.w3schools.com/css/css_combinators.asp)
* [Mozilla's Combinators and groups of selectors page](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors)
#### Can you describe how CSS specificity works?
#### Answer
Assuming the browser has already determined the set of rules for an element, each rule is assigned a matrix of values, which correspond to the following from highest to lowest specificity:
* Inline rules (binary - 1 or 0)
* Number of id selectors
* Number of class, pseudo-class and attribute selectors
* Number of tags and pseudo-element selectors
When two selectors are compared, the comparison is made on a per-column basis (e.g. an id selector will always be higher than any amount of class selectors, as ids have higher specificity than classes). In cases of equal specificity between multiple rules, the rules that comes last in the page's style sheet is deemed more specific and therefore applied to the element.
#### Don't forget:
* Specificity matrix: \[inline, id, class/pseudo-class/attribute, tag/pseudo-element]
* In cases of equal specificity, last rule is applied
#### Additional links
* [CSS Specificity](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/)
#### What is debouncing?
#### Answer
Debouncing is a process to add some delay before executing a function. It is commonly used with DOM event listeners to improve the performance of page. It is a technique which allow us to "group" multiple sequential calls in a single one. A raw DOM event listeners can easily trigger 20+ events per second. A debounced function will only be called once the delay has passed.
```
const debounce = (func, delay) => {
let debounceTimer;
return function() {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
}
}
window.addEventListere('scroll', debounce(function() {
// Do stuff, this function will be called after a delay of 1 second
}, 1000));
```
#### Don't forget:
* Common use case is to make API call only when user is finished typing while searching.
#### Additional links
* [Debouncing explained](https://css-tricks.com/debouncing-throttling-explained-examples/)
#### What is the DOM?
#### Answer
The DOM (Document Object Model) is a cross-platform API that treats HTML and XML documents as a tree structure consisting of nodes. These nodes (such as elements and text nodes) are objects that can be programmatically manipulated and any visible changes made to them are reflected live in the document. In a browser, this API is available to JavaScript where DOM nodes can be manipulated to change their styles, contents, placement in the document, or interacted with through event listeners.
#### Don't forget:
* The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API.
* The DOM is constructed progressively in the browser as a page loads, which is why scripts are often placed at the bottom of a page, in the `` with a `defer` attribute, or inside a `DOMContentLoaded` event listener. Scripts that manipulate DOM nodes should be run after the DOM has been constructed to avoid errors.
* `document.getElementById()` and `document.querySelector()` are common functions for selecting DOM nodes.
* Setting the `innerHTML` property to a new value runs the string through the HTML parser, offering an easy way to append dynamic HTML content to a node.
#### Additional links
* [MDN docs for DOM](https://developer.mozilla.org/en-US/docs/DOM)
#### What is the difference between the equality operators `==` and `===` ?
#### Answer
Triple equals ( `===` ) checks for strict equality, which means both the type and value must be the same. Double equals ( `==` ) on the other hand first performs type coercion so that both operands are of the same type and then applies strict comparison.
#### Don't forget:
* Whenever possible, use triple equals to test equality because loose equality `==` can have unintuitive results.
* Type coercion means the values are converted into the same type.
* Mention of falsy values and their comparison.
#### Additional links
* [MDN docs for comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
#### What is the difference between an element and a component in React?
#### Answer
An element is a plain JavaScript object that represents a DOM node or component. Elements are pure and never mutated, and are cheap to create.\
A component is a function or class. Components can have state and take props as input and return an element tree as output (although they can represent generic containers or wrappers and don't necessarily have to emit DOM). Components can initiate side effects in lifecycle methods (e.g. AJAX requests, DOM mutations, interfacing with 3rd party libraries) and may be expensive to create.
```
const Component = () => "Hello"
const componentElement = < Component / >
const domNodeElement = < div / >
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://bryan-guner.gitbook.io/my-docs/job-search/resources/job-search-advice.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.