Technical Interview Prep

What are the objectives?

After this workshop, developers will be able to:

• employ a specific process in approaching whiteboarding.
• avoid specific pitfalls that plague some applicants.
• go into an interview with some more whiteboarding practice.
• have the tools to practice on your own!

Interview Process Steps

1. Clarify question using a sample input and output. This is a great time to note any edge cases you see and to make sure you understand the question correctly. To confirm, if you were to give me the string 'apple', you would expect this function to return the object { 'a':1, 'p':2, 'l':1, 'e':1}? And if you were to give me a string like '! !', would you want that to output counts for all the characters ({'!':2, ' ':1}), or just the non-whitespace, or none of those since they aren't letters?
2. Pseudocode so you and the interviewer can focus on logic first. Say something like: "I'm going to start with pseudocode, and I can transition to JavaScript after."
3. Test your pseudocode with your sample input and output.
4. Check in with your interviewer. They may have more edge cases for you to handle. They may ask you about runtime (Big O). They may just want you to move on to syntactically-correct code.
5. Write syntactically-correct code. Take a second look at syntax after you finish a draft.
6. Test your syntactically-correct code with your input and output.
7. Your interviewer will often ask you about Big O at an earlier step. If you’re feeling confident, though, now is a good time to offer.

Tips

Variable names

Naming variables well shows that you write readable, semantic code. Don’t name variables “string”, “array”, “number”, “integer”, “object”, “hash,” or anything that might be a reserved word in a language:

• JS reserved words

• Ruby reserved words

Naming a variable by the data type it will hold is far more likely to generate an error and/or confuse you as you move through a solution. Interviewers are looking to see if you’re thoughtful in naming variables. Naming a variable “string” (or “str“, for that matter) is sure to show that you don’t prioritize clarity in naming your variables.

Test your code

When you whiteboard, you can write a column to the right of the code to write down/track the current value of any variables that change as the code runs. If you’re looping, you can make more columns to track each pass through the loop! This will show your interviewer you understand the code you wrote. It shows that you can read and write code at a higher level.

Come prepared

Bring 2-3 pieces of code you can fully explain! If somebody wants to look at your code, it’d be great to show that you understand how data flows through your project. Showing a single method is great, but showing what route calls it, and what impact it has on the view shows off your full stack skills!

Know core native methods

Get to know the properties and useful native methods for strings and arrays. It’s usually safe to assume there’s a built in method for common actions, for example:

• toUpperCase, includes, charAt for strings
• slice, push, pop, includes, indexOf for arrays

Start with JS (more manageable) and assume Ruby has all of those methods and more. Resources:

• JS Strings docs
• JS Arrays docs
• Ruby strings docs
• Ruby arrays docs

Pay attention to your return value!

Make sure that you return the type that the interviewer asks for. It looks careless to return an array when the task asks for a string.

Return breaks you out of a method. Don’t return until you have fully processed the value you want to return. If you have a return in the middle of a loop, that loop will cease to run and won’t process the input any further. Sometimes that’s what you want, but often, you want to return AFTER a loop finishes.

Know the exact syntax:

• Assignment vs. Comparison - = and === (or ==, depending on the language) are DIFFERENT! If you miss this one, you could be quickly written off as lacking attention to detail.
• for loops - the i stands for index and is just a number to keep track of how many times you’ve gone through the loop. It doesn’t refer to the location in the string or the array that you’re scanning. arr[i] or str[i] refers to the element or character at the ith position of the array/string. No matter how you're looping or inspecting strings or arrays, keep the index and the value at that index separate in your mind.
• Conditionals, also known as if/else
  • else is not required. If you want to do something in one case and simply continue to loop if that condition isn’t true, you do not need an else.

Whiteboarding practice!

1. From a unsorted array, check whether there are any two numbers in the array that will sum up to a given number. If there are, return true, otherwise, return false.
2. Given a string, remove all of the characters that appear more than once in that string and return the resulting string.
3. Shorten an article’s text to a 40-character preview, but don’t include any word that is cut in the middle. (For "This string is a bit longer than 40 characters..." you would return "This string is a bit longer than 40 ..." instead of "This string is a bit longer than 40 char...".)

• Summing a pair of numbers in an array
• remove duplicate characters from a string
• abbreviate article

Sample interview questions we have asked you

• isPalindrome //is the string a palindrome?
• remove duplicate characters from a string
• isPrime(integer) - given an integer return a boolean to tell whether the integer is prime
• Factorial: given a number n you should be able to return n factorial (n!).
• letter count: given a string like 'apple' return an object that counts the number of occurances of all of the letters in the word {a:1, p:2, l:1 , e:1}

Resources

• CodeFights Interview practice
• Free Code Camp algorithm challenges
• Codewars
• HackerRank
• JS dude practice problems
• JS dude JavaScript language specifics
• SitePoint JavaScript interview questions
• Some previous cohort resources

Day 1 challenges

1. What is this in JavaScript?

2. Consider the following code:

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

What’s the output?

3. In JavaScript, what is the prototype of {}? Give an example of prototypal inheritance and explain how it works.

4. From a unsorted array, check whether there are any two numbers in the array that will sum up to a given number. If there are, return true, otherwise, return false.

5. Given a string, return an array of all of the unique permutations of that string. These permutations should only be of the same length as the original string.

Example:

permutations('wdi') // generates ['wdi', 'wid', 'dwi', 'diw', 'iwd', 'idw']

Sources and solutions for Day 1 exercises

• this resources
• The console.logs(typeof...) solution is at this resource under question #3
• Prototype resources: MDN, Eloquent JavaScript
• Summing a pair of numbers in an array
• permutations

Day 2 challenges

1. What will be the output of the following code? Explain your reasoning.

var palestrina = {
   work: "Missa Papae Marcelli",
   describe: function() {
       console.log(this.work);
   }
};

palestrina.describe();

var erasmus = {
   work: "Freedom of the Will"
};

palestrina.describe.call(erasmus);

2. What is the last line (palestrina.describe.call(erasmus) ) doing? What is the call function?

3. What will be the output of the following code? Explain your reasoning.

function test() {
   console.log(a);
   console.log(foo());

   var a = 1;
   function foo() {
      return 2;
   }
}

test();

5. How would you fix the code above so that the output is 1 2.

6. What will be the output of the following code? Explain your reasoning.

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

7. How would you fix the code above to output Aurelio De Rosa for both console.logs?

Sources and solutions for Day 2 exercises

• Invoking JS Functions with Call and Apply
• 5 typical JS interview exercises

Worth reading

• MDN's Re-Introduction to JavaScript

Day 3 Challenges

1. What would be the output of the following code?

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

2. What is a closure in Javascript?

3. What would be the result of running this code?

(function() {
	function foo(x) {
		var baz = 3;
		return function (y) {
		console.log(x + y + (++baz));
		}
	}
var moo = foo(2);
moo(1);
moo(1);
})();

4. What's going on with the parentheses wrapping this whole code block and the () at the end?

5. What is an immediately invoked function expression? IIFE?

6. What is the difference between ++baz and baz++?

Sources and solutions for Day 3 exercises

• MDN's docs on JavaScript closures
• Find the question "What are closures?" on this page for the solution for the second code sample above. (Alternatively, you could just run the code to find the solution.)

Further reading

• Understand Javascript Closures
• Demystifying JavaScript Closures, Callbacks, and IIFEs