JavaScript Review

Interview Practice - User Interface

Alec Ortega

Front End Engineer

HubSpot

alecortega

How many of you are worried about technical interviews?

We're going to be going over some tips to ace your technical interview as well as some practice problems to get you familiar with the process.

When faced with a technical interview question you should go through five steps to solve the problem.

You walk into your technical interview and you're asked a problem to solve an algorithm or UI challenge.

01. Ask Clarifying Questions

For most technical interview questions, there are multiple ways to arrive at a solution. To arrive to that solution you are going to make an assumption as to which way is best. Try not to, and ask the interviewer anything that you might be assuming about the problem.

This shows well you'll work with a team.

02. Write pseudo-code, code in English.

You'll want to figure out the actual logic before writing ANY code. This is a good way to make sure that you and your interviewer are on the same page. It also allows keeps you from getting too tripped up on the syntax of how to attack a problem.

This shows your problem solving abilities.

03. Brute force your way to a solution.

Some interviewers will let your choose any programming language to solve the question with. Make sure that you are comfortable with whichever one you pick as the interviewer might ask you nuances about the language itself.

This shows your technical ability.

04. Test your code.

If you are faced with an algorithm question like "sort this array" or given input X write a function that gives output Y you should always go back over your solution with at least 3 different inputs. What about negative numbers? Empty strings?

This shows that you're able to think past your own code and how it might scale.

05. Optimize and refactor.

Are there areas to improve your solution? Can you make it run faster now that you have a working result? Are there ways to make your code more readable? 

This is shows technical experience.

Workshop One

Grocery List Receipt

- You'll see a JavaScript object that represents our receipt.

- The UI should display all of these items in the given list container.

- The totals of all prices should be shown in the total box at the very bottom.

Map, Filter, Reduce

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(number) {
   return number * 2;
});

// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]

Pass in a function that iterates over the array and allows you to transform each value.

Map

var words = ["spray", "limit", "destruction", "present"];

var longWords = words.filter(function(word){
  return word.length > 6;
})

console.log(longWords)
=> ["destruction", "present"]

Allows you to pick things out from an array, when the passed in function returns true.

Filter

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);

console.log(total)
=> 6

Combines all values in array  into a single value given a function that combines them and a starting value.

Reduce

Workshop Two

Mocked API Response

- You'll see a JavaScript array that represents our data returned from calling an API endpoint (like Instagram).

- The UI should display all of the photos in the given container.

- The only images that should be shown are the ones that are in the category of "nature".