Take a look at our How to Get Into Code Chrysalis article for more advice.

This post is about the second part of the admissions process to get into the Code Chrysalis Immersive, where you are paired with me (or one of our instructors) and led through a series of JavaScript coding challenges and questions.

There are three objectives to our technical interview:

1. Figure out if an applicant has the technical skills to successfully finish our precourse
2. See how an applicant responds to unfamiliar challenges and what they do
3. Assess whether an applicant is ready for the Code Chrysalis learning environment

In addition, our technical interview gives you a good idea of what to expect for job interviews as well. We look and give feedback on the same things companies look for. In that sense, your Code Chrysalis training begins months before you begin our 12-week course.

Here are the 10 most common things that people stumble on.

Please note that instead of giving direct answers, we provide hints and encourage you to explore, make mistakes, and research on your own.

1. Dot notation vs. bracket notation in object literals

We have the following object literal:

   const object = {
   a: 1,
   b: 2,
   c: 3
   };

(An object literal, by the way, is just a fancy way for saying an object that you write out like the above. A literal object.)

You can access each value using the object’s keys in bracket notation:

   object['a'] // 1
   object['b'] // 2
   object['c'] // 3

As well as dot notation:

   object.a // 1
   object.b // 2
   object.c // 3

But what is the difference between the two? Try the below in your console.

const object = {
 a: 1,
 b: 2,
 c: 3
};

let key = 'a';
 console.log(object.key);
 console.log(object[key]);
 console.log(object.a);
 console.log(object[a]);

What do you get? Why?

Resources

• Javascript.info’s Objects article
• Eloquent JavaScript Chapter 4

2. Not understanding the call stack

Here is very basic example:

function sayHi() {
 console.log('Hello');
 return 'Hi';
}
let foo = sayHi();
console.log(foo);
console.log(foo);

How many times does the above code print 'Hello' and 'Hi'? Here is a slightly less basic example:

function foo() {
 console.log('foo');
 bar();
}

function bar() {
 console.log('bar');
}

function baz(fn) {
 console.log('baz');
 fn();
}

baz(foo);

What is happening here? Why?

Let’s do one more example:

function getNumber() {
 return 5;
}
function invokeSomething(fn) {
 return fn();
}

Which of the following works?

invokeSomething(getNumber()); // Choice A

invokeSomething(getNumber); // Choice B

Why?

Resources

• Eloquent JavaScript Chapter 3: Call Stack
• Understanding the JavaScript Call Stack --> Ignore the parts about asynchronous coding; you don’t need to know about that yet.

3. What the return keyword does

return is a keyword that is only available inside of function declarations and it can do two things: provide an output for the function AND stop the function from further executing.

If an output is not provided (you do not see a return keyword being used), then the function resolves to undefined. See the example below:

function noReturn() {
 console.log('Print!');
}
let whatsMyReturn = noReturn();
console.log(whatsMyReturn);

What gets logged? Why?

Also, as mentioned above, the return keyword also stops a function from further executing. This means that if you have a return keyword in your for loop, the loop will terminate on the first go.

What does that mean? Give it a try with your own code.

Resources

• MDN return documentation
• Eloquent JavaScript Chapter 3 （returnについての段落）
• Javascript.info − Functions: Returning a Value

4. Relying too much on native methods

If you are using .forEach and .map for everything, I suggest you try solving problems without using any of those. We want to be able to understand how these built-in methods work before using them. If you do not know how to do things without them, you will always be coding half-blind. Make sure you have 20/20 vision. Your career will thank you for it.

If you do not know how to do things without native methods, you will always be coding half-blind.

5. Trying to make your code look fancy, rather than making it work first

Do not stress about making your code look elegant. First, get it working. Then, we can go back and clean it up. Working and ugly is better than broken and…still broken!

6. Getting arrays and objects mixed up

{} and [] are similar, but not the same.

There are a plethora of existing blog articles out there about this, so give yourself time to sit down, read, and practice.

Here are some questions you should be able to answer:

1. How do you loop through arrays? Can you use them on objects? If you can, should you?
2. How do you loop through objects? Can you use them on arrays? If you can, should you?
3. How do you access values in objects? In arrays?
4. If you need to find a value in an object, how do you do it if you have the key? How do you do it if you do not have the key?
5. How do you tell the difference between objects and arrays using code?

Another note: If you are coming across articles talking about prototype and this, skip it and save it for another time. Those are also important concepts that you are stumbling upon, but they are not necessary for our technical interview and will be learned in time. Focus on getting a strong handle on the basics first.

Resources:

• Eloquent JavaScript Chapter 4 Data Structures
• Scotch.io Data Structures: Objects and Arrays
• MDN Array documentation

7. Not reading or exploring the prompt enough

Our coding challenges are very specific about the expected inputs and outputs of the function you need to write. Before you begin working on logic, always make sure you have the basic signature of your function down:

function nameOfFunctionHere(/* What are the expected inputs? */) {
 return /* What is the expected output (if there is one)? */
}

If you are unsure, ask and confirm!

After you have confirmed the basics of the function, focus on figuring out the logic. Some good questions to ask yourself are:

• Do I need to declare a storage variable to keep track of something?
• Do I need to loop through something?
• What are the variables or information that I have access to?

8. Functions are values in JavaScript

Functions are another type of value in JavaScript. What are examples of values in JavaScript? Here are some common basic data types and their examples. (For a full list, check out the links below.)

type: examples

• number: 1, 0, 1.01, -5
• string: "@nything", '1n quotes!&^#W?'
• boolean: true, false
• undefined: undefined
• object: {}, []
• function: function myFuncName() {}

As values, we can assign them to variables.

let myNumber = 10;
let myString = 'Hello!';
let myBoolean = true;
let myUndefined; // <-- Why don't we need to assign anything to myUndefined?
let myObject = { a: 1, b: 2 };

let myFunction = function() {
 return 'This is my function output!';
};

SIDE NOTE: Please note that you can write a function like we did above as a function expression. Above, the function is assigned to the variable myFunction. We can also write a function as a function declaration, like the below:

function myFunction() {
 return 'This is my function output!';
}

They more or less do the same thing. You can read about the difference (hoisting rules), but you will not need to know the difference until later in your studies. END SIDE NOTE.

We can also use return to “return” them from functions (outputs!).

function getNumber() {
 return 10;
}

function getString() {
 return 'Hello!';
}

function getBoolean() {
 return true;
}

function getUndefined() {
}

function getObject() {
 return { a: 1, b: 2 };
}

Functions can also be returned from functions.

function getFunction() {
 return function() {
   return 'This is my function\'s function output!';
 }
}

How do we get the above function to output 'This is my function\'s function output!'? Try the below in your browser console, but before you try out the code, please answer the following:

What will print?

What will typeof whatIsThis give you?

What is whatIsThis() equivalent to in the code?

getFunction();
getFunction()();
let whatIsThis = getFunction();
console.log(typeof whatIsThis);
whatIsThis();

Resources:

• javascript.info – Data types
• JavaScript Functions – Understanding the Basics

9. Not reading the error messages

Error messages are your friend! Familiarize yourself with common error messages and what they mean — do not ignore them.

Error messages will also give you a line number in your code where the error originated from. Pay attention to them and do not be afraid to Google what your error message is telling you.

Common error messages for beginner coders:

• Uncaught ReferenceError: __ is not defined

This usually happens because a variable or function name is missing; the JavaScript engine is not sure what you are referring to.

Are you sure you spelled everything correctly? Are all of your variables declared? Did you copy/paste code? (Please don’t copy-paste code without understanding it.)

• Uncaught SyntaxError: Function statements require a function name
• Uncaught SyntaxError: Unexpected identifier

Did you forget a closing or opening bracket or parentheses? That is usually the case.

• Uncaught TypeError: Cannot read property

This often happens when you are trying to read a property or call a method on an undefined object. Are you using a method that does not exist on an object? Is your object defined?

Resources:

• Top 10 JavaScript Errors

10. Not checking and testing enough; not running code often enough

Do not be afraid to use console.log to print out a variable as you are coding. You are allowed to run your code as many times as you need. Make sure that you test your assumptions — are you sure that variable is a function? A string? A number?

Sometimes, what you think is a 2 is instead a '2'and that can make a big difference in code. Use console.log and also typeof to double-check that what you think is true.

This will also protect you from bugs. It can be frustrating to write a bunch of code, only to run it at the end and realize that there is something wrong. Protect yourself from making these mistakes before you reach the end.

Happy coding!

• How to Get Into Code Chrysalis
• Definitive Guide to Women’s Tech Events and Communities in Tokyo
• Why Join a Coding Bootcamp?
• How We Prepare Our Students for Engineering Leadership
• Learn about our alumni!

Code Chrysalis is a Tokyo-based 🗼 coding school providing a full-time and part-time programming courses in English and Japanese. Join us in-person or take our classes remotely. See why we are an industry leader in technical education in Japan 🗾.

We also put on free workshops and events for the community, so follow us for the latest!

Follow us on…

YouTube - Instagram - Facebook - Twitter - 日本語版 Twitter - LinkedIn

‍