JS I
Describe square bracket notation and when you would use it (hint arrays and objects)
In JS, arrays are basically ordered lists that contain different pieces of data. If you want to access an element inside of an array, you will require the name of the array as well as the index position of the element that you want to access. Syntactically, you will say the array name, and then in square brackets, pass in the index position. Similarly to this, we can access values in objects by passing in either a string or number of a key that exists inside a given object. This is useful in certain situations. For example, since a for in loop provides you with a variable whose value is a string of a key in your array, you will only be able to interact with the array if you use square bracket notation.
What’s the difference between == and === in JavaScript
In JS the == is referred to as loose equality. Loose equality means that the two values being compared are compared only in value and not in type. The == attempts type coercion on the values to get them to the same data type, and then runs a normal check on them. This differs from the ===, which is referred to as strict equality. This checks to make sure both values have the same value as well as type.
What is a component?
In React a component is a reusable bundle of UI and functionality. Components have several benefits which have led more and more developers to adopt a component based architecture. For example, components are super reusable. If you have to repeat the same UI around your site, you can write the UI once in a component, but render the component several times on the screen. Components help us establish good coding practices through separation of concerns. They are also more easily debuggable. Components can also be set up to be dynamic, allowing developers to save time during the development process. There are two types of components, class/stateful and functional/stateless/display
What are the benefits/drawbacks of SPAs vs MPAs?
SPAs provide an fast app-like experience, but have a very heavy front-loading time. MPAs take a while to navigate between pages, but doesn't have to load everything all at once.
What is a selector?
A selector is a pattern that is used to indicate which elements in an html page you would like the following styles to be applied to. These selectors have a certain specificity which is calculated via a point system. You can select elements by class, tag, id, and more. Some of the less known selectors are things like nth-child which allows us to get the certain number child of an element, the > sign which allows you to combine two selectors and say that one must be a child of the parent selector, and the + selector, which behaves like the >, except that the second selector must be adjacent to the first. There are also pseudo selectors which allow you to apply styles based on the state of an element, such as :hover or :active
What is the difference between let and var in JS?
Let is an ES6 feature that came out in 2015. Prior to its release, the only keyword there was for creating variables in JS was var. This was okay, but due to the fact that scopes could only be created through making a function, it was quite common to quickly run into namespace collisions. The let keyword however will create a new scope when used inside of any block statement. Developers no longer have to create a function if they want to create a non-global variable inside of an if statement (for example). If you were to create an if statement, and then a variable inside with var, you would be able to access that variable outside of the if statement, but not if you used the let keyword. There is also the const keyword which allows you to create a constant variable that cannot be reassigned.
What are all the truthy and falsy values in JS?
0, '', null, undefined, false, NaN. All other values are truthy.
What’s the difference between an element and a Component?
In React JSX elements and components look very similar syntactically, but have a few key differences. JSX elements are how we can define the UI of a given section of the screen. They behave quite similarly to HTML elements and are essentially a syntax extension to JS. Components often are collections of JSX elements. Components can also contain bundles of reusable functionality.
What is unidirectional data flow?
Unlike frameworks such as Angular, React's data flows from parent components to child components. This can be a hinderance sometimes as it restricts where we can pass data, however the advantage that this provides us is a single source of truth for all of our data. When data changes we can always look to the parent that the data originated from and know that the change runs through there. In situations where we need to change data in a parent from a child, a function bound to the parent may be passed down to the child and executed.
Describe the box model
The box model describes how elements take up space on the canvas. Elements in HTML are nearly all boxes that take up space which can be broken down into 4 parts: the width/height of the content, the padding, the border, and the margin. It is important to note that padding defines the distance between the content and the border, while margin will define the distance between the border and the nearest element. Some display properties will restrict the ability to make certain changes to the box model. For instance, display: inline will disallow changes to the width and height of a given element.
Describe asynchronous code in JS
Most of the time JS runs synchronously, which means that the next line of code does not run until the previous one is finished. This is fine in many cases, but sometimes we need to do things like wait for a few seconds or take some time fetching some info from somewhere. In these cases we can run code asynchronously, meaning while we are waiting on one block of code to resolve, we can continue running other code. This prevents things like blocking in the browser, and is achieved typically through web APIs, callbacks, and Promises.
Describe 3 es2015 features and how they differ from ES5
ES6 released many changes that provided a major overhaul to how JS was written. One of those changes was the introduction of var, let, and const. Prior to ES6 you could only create a new scope for a variable by creating a new function, however with let you can create a new scope inside any block statement. Const will also let you create an un-reassignable variable. Classes were also introduced in ES6. Classes are simply syntactic sugar for creating similarly structured objects. Arrow functions were also introduced in this version. Arrow functions allow us to quickly create callbacks as well as your everyday function in a cleaner and simpler way. Arrow functions also have a lexical binding to the keyword this.
What is setState?
React operates under the paradigm of having an immutable state. To make changes to our state we have to call the Component method “setState()”. This allows react to be correctly update state and properly render any changes that were made as well. It is worth noting that setState is an asynchronous function and it will not be run until the call stack is clear.
What is the component lifecycle?
The component lifecycle consists of several methods that can be overwritten to allow developers to hook into different points throughout the components existence on the page. The 4 types of lifecycles are mounting, unmounting, updating, and error handling hooks. The most common ones that we use are componentDidMount, componentDidUpdate, componentWillUnmount, and render. DidMount allows us to run code as soon as the component is fully loaded on the screen. Here is where we would typically make http requests that our component needs to function. DidUpdate allows us to compare previous props and state with the current props and state. Render runs initially when the component mounts as well as any time state or props changes. Here is where we can return our template code for our component. WillUnmount runs right before the component is removed from the page. Typically here is where we unsubscribe from any subscriptions are component has established.
What is the difference between caret ( < ) comma ( , ) and space ( ) in a css selector.
When talking about CSS selectors, the caret indicates that one selector must be a direct child of another selector if it wants to receive the following styles. This differs from the space which indicates that the two selectors could have a parent/grandparent/great grandparent/etc relationship. One selector must occur somewhere within the other, but not necessarily directly. The comma allows us to apply a given set of styles to multiple
Describe closures and why they are important.
Closures are a unique design pattern to Javascript that allow us to achieve several pieces of functionality. A closure is the environment created when a function exists within another function. Typically the inner function is returned from the outer function. What this does is it allows the inner function’s code to access data stored in the outer functions scope. We can use closures to create individual instances in our code, as well as reduce namespace collisions through taking advantage of the functions scope. We can often take advantage of the module design pattern through returning an object that contains whatever methods we may need.
What is event bubbling in the dom?
When an event is fired in the DOM, there is sometimes room for overlap. For example lets say we have a button inside a div inside another div. If each of these have onClicks, and we click on the button, one might wonder in what order the onclicks would fire. Event Bubbling refers to the fact that events will always start with the innermost event, and then “bubble” their way upwards. In this example it would start with the button, then the inner div, and then the outer div. We can stop an event from bubbling by calling its stopPropogation method.
What are the differences between a class component and a functional component?
In React, class components are often referred to as stateful components due to the fact that they are the only type of component that can contain state. Class components also have access to lifecycle methods with allow us to run certain code in tandem with the component mounting or updating. Functional components have a lot less overhead than class components, but tend to be more restricted in terms of functionality. However with the 16.8 release of react, our functional components can now hook into stateful features via React Hooks.
How is React different from vanilla JS, jQuery, and Angular
A big way that react differs from the three is through its inclusion of a virtual DOM. While vanillaJS, jQuery, and Angular make changes directly to the dom, React makes changes to its virtual DOM which contains a diffing engine that allows it to more efficiently make changes and manage the actual DOM. Unlike Angular which is a full fledged framework and complete overhaul of the front end development process, React is more of a UI library, allowing us to still adhere to some vanilla principles.
What are the different position properties and what do they do?
By default, elements are position static. They will remain in their normal flow of the page. If we switch an element to position relative, they will behave like position static, however we will be able to nudge them with the top, left, bottom, and right properties. You also have position absolute which will remove the element from the flow of the page and position it relative to its nearest anchored parent. This isn’t the most responsive approach for some elements, but can help us achieve some nifty UIs. Position fixed will position an element relative to the viewport, meaning it will remain there no matter how much you scroll. There is also position sticky which will behave like position relative until it reaches a given threshold whereupon it will act like position fixed.
Describe context and the keyword this.
The keyword `this` refers to the current context of execution in your code. This always refers to an object. There are three main types of context. Javascript will first check for explicit context. This is when we take a function and explicitly give it a value for the keyword this, typically via the .bind, .call, and .apply methods. If JS doesn’t see any explicit binding, it checks for implicit binding. Implicit binding occurs when a method (a function in an object) references the keyword this. The keyword will then refer to the object that it is inside of. If there is no implicit binding either, than the default context will be the global variable. In the browser this is the `window` object. Arrow functions behave a little differently with `this` as well. The value of `this` in an arrow function will be the value for `this` in it’s enclosing scope. This is referred to as “lexical binding”
What are prototypes in JS?
Prototypes are how inheritance work in Javascript. Essentially each object has a wrapper object called a prototype. Arrays have the array prototypes, objects have the object prototype, etc. Prototypes are a way to DRY up our code. For example, instead of creating a copy of the push method for every array that we create, we have all arrays sit under the Array prototype. This way they can all reference one function and we save space.
What are refs in react?
There are some times in web development where things are easier if we can just access a specific DOM node and make some direct changes. However React is based around having a virtual and making changes to a virtual DOM, making it hard/unperformant to take this approach. Refs are a way that we can access a certain node while still going through the virtual DOM. You can attach a ref to an element and then access the DOM properties of the element via the ref itself.
Describe propTypes in react
One of the biggest drawbacks of JS as a language is the fact that it is not typed. React is not immune to this. Enforcing data types can catch a lot of bugs throughout the development process. PropTypes is a package that comes with React through which you can define what types your props should be. When an invalid props gets passed, an error is thrown to the console. This form of typing allows us to catch potential bugs early on in the development process and help us form safer code.
How would you make a star in CSS
I don't know either.