Technical Interview - Terms to Know

Posted by Jamie M. Brown on January 2, 2019

I recently completed my mock technical interview and was faced with answering rapid fire questions about common programming/JavaScript terms and discovered that I prattle when giving descriptions (which takes away time from the code challenges where one would want more time to work with). Part of the feedback from my interview was to come up with concise (quick) definitions/descriptions for commonly asked about terms. As practice, and for posterity, I’ve put together a list of definitions (with resource links) here. This is a growing list that I’ll continue to add to as I encounter other terms during interviews.

CSS

Sprites – combination of multiple images into a single image file to help with performance (several images loaded with a single HTTP request).

Center a div within a div vertically – create parent and child classes and set top and bottom padding equal on parent div

Box Model - from the inside to the outside of the box model: content -> padding -> border -> margin

div vs. p vs. span – p and div are block (equivalent to having a line break before and after) elements. Span is an in-line element and usually used for small chunks of HTML (like making one word in a header or paragraph a different color).

Block vs. inline – block level elements start on a new line. In-line elements will not start a new line. Block elements take up the full width of available space while in-line only consume the amount of space needed for the element.

JavaScript

Promises – an object that represents the eventual completion of an asynchronous operation and its resulting value.

Hoisting – JavaScript’s default behavior of moving declarations (variables and functions) to the top. This is a result of the JS Engine running through the code the first time and setting aside memory for each declared function/variable.

Lexical Scope – scope defined at lexing time - inner and outer scope are determined by WHERE a function or variable is declared…not called/invoked.

Callbacks – functions passed into other functions as arguments

Var/Let/Const – var declarations are globally scoped when a var variable is declared outside of a function or within a block (var variables are not block-scoped). A var variable is function scoped if declared inside a function. var variables can be re-declared and updated (can call var greeter twice without an error). let and const variables cannot be re-declared. They are both block scoped. They also will throw an error if they are declared after they are used in a function (they are still hoisted, but not initialized). You cannot declare a const variable without also assigning it (it cannot be updated). .

Closures – a closure is the combination of a function and the outer scope/environment of that function when it was declared (usually within another function). Meaning the inner declared function has access to its outer function’s variables, even if the outer function has already returned.

Equality Operator – there are two types…== and ===. === is strict comparison and only true if the values are the same type and the contents match. Type converting comparison == will convert the values to the same type before comparing (so “1” and 1 would be == but not ===).

Event Bubbling – when an event happens on an element it first runs the handler on it then on its parent, then up the chain of ancestors.

Event delegation – instead of assigning a handler to each element on a page, if all events are handled in a similar way for similar elements, we add a single handler on the common ancestor. This solves the issue of when the element wasn’t on the page when the page was initially loaded.

Event Loop

The event loop is the term given to the process of the waiting for the queue to receive a message synchronously. The increment that the event loop moves in is called a ‘tick’, and every time it ‘ticks’ it checks if the call stack is empty, if so , it adds the top function in the event queue to the call stack and executes it. Once it is finished processing this function it starts ticking again. – Feargal Walsh

Prototypal inheritance – JavaScript is a prototype-based language - so instead of having classes that define the blueprints for an object, object properties and methods are shared through a generalized prototype object. All objects in JS inherit Object.Prototype properties and methods (end of the prototype chain).

Object-Oriented Programming in JavaScript - As noted above, JavaScript is a prototype-based language so Object type properties and methods are acquired through a generalized prototye object. With ES6, developers have the ability to define “Classes” using a class syntax. Note that these classes still define prototype-based classes.

Constructor Functions – a constructor function is one that you would use to create a new “object type”. You would use the new keyword to invoke/create a new object of the same type via the Constructor function. You typically declare the function name with an uppercase word.

Context Binding (call, apply, bind) – all three are used to control the invocation context of a function – call() and apply() allow you to specify the context (“this”) and immediately invoke the function with that value. The difference between the two is that apply() only takes two argument, the value you want to pass for “this” and an array of arguments to pass to the function. bind() returns a context-bound version of the original function.

This – refers to object it belongs to – varies based on where it is used.

Benefits of Strict Mode?

Strict mode helps out in a couple ways: • It catches some common coding bloopers, throwing exceptions. • It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object). • It disables features that are confusing or poorly thought out. – John Resig

Variable Scoping

The scope of a variable is controlled by the location of the variable declaration, and defines the part of the program where a particular variable is accessible.- Ivaylo Gerchev

Function and Block Scoping – function scopes are created for every function and are often considered to be “local” scopes. Block scopes are what you get with if statements, for statements, switch cases, etc. The var keyword doesn’t honor block scope (is global) whereas let and const honor both function and block scopes.

Function expressions & declarations – function declaration defines a function variable without requiring assignment. Function expressions are when a function is defined as part of a larger expression syntax (usually via variable assignment)

High order functions – functions that take functions as arguments or return them.

First Class-Functions – In JavaScript - functions are a special type of object, making them first-class citizens.

Arrow Functions – Introduced in ES6 – shorter syntax for defining functions and these functions do not have their own this, arguments or super – cannot be used for constructor functions.

Syntax: const funcName = () => statement

Functional Programming

Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and application state flows through pure functions. Contrast with object oriented programming, where application state is usually shared and colocated with methods in objects. - Eric Elliott

Arity – the number of arguments a function takes.

Function Currying – the process of breaking down a function into a series of functions that each take a single argument.

Composition functions

Function composition is a mathematical concept that allows you to combine two or more functions into a new function.

Spread Operator – syntax … Can be used in function arguments, or with array literals or objects. Purpose is to expand an array or object in places where zero or more arguments/elements are expected.

Example:

const array = [1, 2];
const array2 = [...array, 3, 4];
Console.log(array2) // [1, 2, 3, 4]

Destructuring

JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. - MDN

Example:

let [a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: [30,40,50]

Template Strings/Literals – use back-ticks to define string and ${} define placeholders which can be embedded expressions or variables.

React

Virtual DOM and Diffing– an object that represents the actual DOM. When we render a JSX element every virtual DOM element gets updated and then React compares the Virtual DOM to a snapshot of the Virtual DOM before the update. React figures out which Virtual DOM elements have changed (Diff Algorithm) –then ONLY updates those objects in the Real DOM.

Declarative Programming - way of programming where you describe what you want as a result as opposed to how you want it to get the result.

Controlled Components vs. Uncontrolled Components – controlled components values/inputs are controlled by the state of the component. In an uncontrolled component, the state is not updated.

Class Component vs.Functional Component – Functional Components are literally JS functions that take in props and return a React Element. Class Componets are ES6 classes that inherit from the React Component module. Classes can have state AND inherit React Lifecycle methods.

Keys – special string attribute included when creating lists of elements – React uses them to determine which elements have changed, been added or removed.

Higher Order Components - component that returns another component with additional props passed in; for code reuse; an example being connect() method in Redux

React Lifecycle Methods – Available for class components that extend React.Component. Include render() which is required for each class component created. Other commonly uses are ComponentDidMount(), ComponentWillUnmount(), ComponentWillUpdate(), etc.

Refs in React – provides way to access DOM nodes or React elements created in the render method. They should not be overused. Typically used for managing focus, triggering animation, integrating with third art DOM libraries.

JSX – syntax extension of JavaScript used by React.