5 JavaScript Technical Interview Questions That You Should Be Prepared For

13 min readDec 19, 2020

1. How JavaScript different from other languages

1.1) JS is JIT compiled

While other languages (i.e., C, Java, C#) are compiled in advance, JS is interpreted and sometimes compiled at runtime with a just-in-time (JIT) compiler.

JavaScript skips <compiler> && <ByteCode> steps.

Java Example Compile steps below:

1.2) JS is Dynamically typed

In JS, types can be changed or reassigned dynamically.

1.3) JS is Classless language

*ECMAScript 2015, also known as ES6, introduced JavaScript Classes.

JavaScript is a classless language; classes can be simulated. Although JavaScript does not have classes, it does have objects, which then defines the language to be object oriented. For example, inheritance can be used by using prototypes, also functions themselves are objects because they have their own properties and methods.

Cat object function can be working as Class with `new` keyword:

1.4) Variable scope

There are no such things as public, private or protected variables: These can be simulated.

You can simulated public, private or protected variable using scopes.

2. What is a REST(ful) API?

It’s architectural style for distributed systems and REST is acronym for REpresentational State Transfer.

An API is an application programming interface. It is a set of rule set of rules that allow programs to talk to each other. The developer creates the API on the server and allows the client to talk to it.

REST determines how the API looks like. There are 5 other guiding architectural constraints that define a RESTful system. In this article, I will go over only Uniform interface because it is a constraint that keeps the RESTful style architecture unique from most other network application architectures.

HATEOAS (Uniform interface)

HATEOAS stands for Hypertext As The Engine Of Application State. It allows the client can dynamically navigate to the appropriate resources by traversing the hypermedia(REST Resource Addressability).

HATEOAS used with specific Method (i.e., POST , GET) tells the server which task the client wants to execute. For example /customers/{id} URI path along with GET request means that the client wants to Get a specific customer.

Pros of Restful API:

Decouples Client and Server.
Uniform Interfaces helps communication between developers much easier.

Restful API vs SOAP

Summary: SOAP relies exclusively on XML to provide messaging services. This gives a benefit for SOAP that it has a standard. But its use of XML is also the drawback for SOAP because JSON is easier to use and more popular these days.

Unlike SOAP-based web services, there is no “official” standard for RESTful web APIs. This is because REST is an architectural style, while SOAP is a protocol. REST is not a standard itself, but RESTful implementations make use of standards, such as HTTP, URI, JSON, and XML.

3. How do you test code?

There are many ways you can ensure that you write quality codes. First, let’s compare unit test and end-to-end (E2E) test.

3.1) JavaScript Unit Test

Unit test tests a block of code (i.e., function) “unit” to ensure that they all run as expected. This tests allow developers to check individual areas of a program to see where(and why) errors occur.

Benefit of Unit Testing

1. It makes your project more agile. Whenever you add a new feature, you many have to change the old code. Changing a code that’s been tested already is costly and risky. However, if you run unit tests on the new code, you will be confident that the new code won’t break any old feature.

2. Helps finding bugs early in the development cycle.

Popular Unit Testing Tool

Jest

Jest is a JavaScript testing framework maintained by Facebook.

3.2) JavaScript E2E Test

End-to-End (E2E) testing is a technique used to test if the application behaves as expected. In simple terms, a software testing methodology to test an application flow from start to end. The main purpose of E2E is to simulate the real user scenario.

Popular E2E Testing Tool

Cypress.io

Fast, easy and reliable testing for anything that runs in a browser.

TDD vs. BDD

“What are you testing for?” is a great question to ask when comparing The Unit test and E2E test. In behavior driven development (BDD), you are looking for the behavior, for example, what will happen to this system under a certain condition. But in test driven development (TDD), you have a test for a method which will assert some conditions, but as the system evolves these tests may give you false results.

To simply this further, it can be written

In TDD, I don’t care much about the output. The only thing needed is to carry out the test in a particular way.

In BDD, I don’t mind how you come up with the output, only that the output has to be correct under the given condition.

Summary

BDD has evolved from TDD, as a way to eliminate the shortfalls of TDD.

Best to implement both approaches — one to support the quality of the code the developer writes, and the other to support the behavior of the system defined by the product owner.

3.3. Linters

lint, or a linter is a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs. They scan your scripts for common issues and errors, and give you back a report with line numbers that you can use to fix things. In addition to actual bugs and errors, they also check for subjective, stylistic preferences as well.

Benefits of linters

1. Linter helps catching common mistakes and bugs easily.

2. Linter helps increase productivity by allowing colleagues to use same code styles.

Popular linters

ESLint

The custom configurations is the one of the best features of ESLint. While JSLint does not allow for configuration, which means it enforces a single style guide, ESLint is little bit more flexible.

You could adopt big IT companies’ coding style easily with using ESLint.

Google

“extends”: [“eslint:recommended”, “google”]

AirBnb

"extends": ["eslint:recommended", "airbnb"]

Standard

"extends": ["eslint:recommended", "standard"]

3.4. Online code editors

Many developers use online code editor for everyday developments & debugging and it indeed one of the best testing tools for modern developers.

jsfiddle & repl.it

Good for checking confusing JavaScript types and variable scopes.

CodeSandbox

Good for testing SPA code (React, Vue or Angular).

Codepen

Good for testing CSS and HTML. CSS is hard to debug and find the errors because CSS often does not throw any errors.

4. What is the difference between deep copy and shallow copy?

A deep copy means that all of the values of the new variable are copied and disconnected from the original variable. A shallow copy means that certain (sub-)values are still connected to the original variable.

Shallow copy vs. deep copy in JavaScript object

Shallow copy is often times problematic when using object in JavaScript.

Shallow copy

We only change pt property of object b ( b.pt ) but object a has also changed:

In the example above, we actually made a shallow copy. This is often times problematic, since we expect the old variable to have the original values, not the changed ones.

Deep copy

There are multiple ways to make copies of objects, especially with the new expanding and improving JavaScript specification.

Deep copy — Spread operator

Introduced with ES2015, spread operator is short and simple. It spreads out all of the values into a new object.

You can also use it to merge two objects together, for example

const c = {...a, ...b}

Deep copy — Object.assign

This was mostly used before the spread operator was around. Object.assign assigns object a to empty object {}

Pitfall: Nested Objects

There is one big caveat when dealing with copying objects, which applies to both methods listed above. When you have a nested object (or array) and you copy it, nested objects inside that object will not be copied, since there are only pointers / references. Shallow copy again

Deep copy of nested objects — Spread operator

Deep copy of nested objects — Stringify & Parse

It can be very tedious to manually go through big objects and copy every nested object by hand. There is a way to copy everything without thinking. You simply stringify your object and parse it right after

5. What is Server-side rendering used for?

Server-side rendering

Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side), instead of rendering them in the browser. SSR sends a fully rendered page to the client; the client’s JavaScript bundle takes over and enables the SPA framework to operate

SSR vs. client-side rendering

Server-side rendering sends a fully rendered page to the client; while Client-side rendering needs to navigate to the page (router ) to have the content for the page

SSR; PROS

It enables pages to load faster which provides a better user experience
It plays an important role in SEO (search engine optimization) and correctly indexes webpages because Google favors web pages with faster load time

SSR; CONS

Rendering a big application on the server-side can be very time consuming and it may increase the loading time due to it being a single bottleneck
Performance issue if the end user is using a slow internet connection (i.e., mobile connection) or underpowered device (i.e., older generation mobile devices)

Next.js (SSR for React)

Next.js is is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web application

npm install next react react-dom
# or
yarn add next react react-domyarn create next-app <project-name>
# or
npx create-next-app <project-name>

Nuxt.js (SSR for Vue)

Nuxt.js is a free and open source web application framework based on Vue.js to build SSR

npx create-nuxt-app <project-name>

My thoughts on SSR

Many companies will ask your experiences with SSR such as Next.js (React) or Nuxt.js (Vue). If you have personal / professional experiences of using SSR, you are lucky 🙌 that you have experiences to brag about. But if you don’t, I think you still do not need to worry too much or build a new app using SSR. I think SSR is still the **optional** skill for Front-end developer like data visualization such as D3.js

It’s good to have the experiences with SSR, but if you don’t, just learn about SSR and how it is different from Client Side rendering. Just show that you know SSR and you are capable of learning more.

Thank you for reading and hope that it helps you preparing for the upcoming interviews.