Cracking The Frontend Interview, Part 4: JavaScript

dev.to/hoangbkit/cracking-the-frontend-interview-part-4-javascript-4knk

hoangbkit

There are tons of concepts related to JavaScript which you've been encountered over your
careers, but trying to cover all of them before interviews seems intimidating and might
devastate your confidence in tight schedule.

Cracking the Frontend Interview is an original series on advancedweb.dev, this series

acts like my notes and summary on what's really important to tackle a frontend interview.

The first important thing is being able to code comfortably with JavaScript fundamentals
including basic concepts, syntax, built-in objects, data types, and operators. MDN is
probably the best place to learn it, practicing Data Structures & Algorithms with JavaScript is
the ideal combination.

The second important thing is being able to explain some programming concepts related to
JavaScript which are often advanced and confusing. Experienced engineers sometimes have
difficulties explaining those topics even though they've been working with them for ages.
Interviewers tend to ask academic and tricky questions which you barely touch on daily
basis.

Getting Started
This post will help you cover frequently asked topics by listing as a learning path with short
introduction and optional links to further reading, reread before interviews to see the big
picture and fill the gaps as you go.

This post is dedicated to JavaScript language itself; don't be confused with APIs of host
environments, features of JavaScript frameworks, features of static type checkers, and also
be careful with early-stage proposal features.

JavaScript language itself is quite small and easy to learn; but the ecosystem around it is
huge, overlapped, borrowed, opinionated, incomplete, and not centrally well documented.
This is okay to me as an experienced engineer, working with JavaScript these days is fun and
long lasting exciting. However it does cause some troubles with beginners and interviewing
candidates when they might get lost and overwhelmed.

1/7
Let's cover the evolution of JavaScript over the years, how it is executed in different host
environments, how to structure and reuse codebase, and some advanced features to make
it a complete powerful general-purpose programming language.

Evolution
JavaScript was created as merely browser scripting language in the old days with very few
features and extremely error-prone, and that still remains as the main impression to non-
JavaScript developers until these days.

Don't judge JavaScript by its bad parts, learn the good stuff and stick with that! It is the only
language that I'm aware of that people feel they don't need to learn before they start using
it.

Since ECMAScript 2015 (ES6) Specification, JavaScript has been considered as a general-
purpose multi-paradigm programming language. This language has a very ambitious future
when community tends to use it in all kinds of platform like browser, desktop, mobile,
embedded and command line. Check this repo es6features to have an overview of all ES6
features.

JavaScript before ES6 is very sloppy, but we can't get rid of old features because the golden
rule of don't break the web . Community has tried to enhance JavaScript with multiple stuff
like:

static type checkers to leverage the benefits of statically-typed languages

strict mode as a safer compiling target which eliminates silent errors
polyfills to patch missing features in old browsers
transpilers to use latest features today
linters to catch syntax errors early

After big update ES6, JavaScript has gone through multiple small updates each year. Don't
forget to follow latest proposals which you can adopt early via babel.

Execution
The execution of a JavaScript program involves many floating parts like JavaScript engines
(heap, stack) and host environments (APIs, callback queue, event loop). Watch this excellent
video by Philip Roberts:

2/7
Watch Video At: https://youtu.be/8aGhZQkoFbQ

V8 is the most famous JavaScript engine which is used both in Chrome browser and NodeJS,
it compiles JavaScript directly to native machine code using just-in-time compilation before
executing it, the compiled code is additionally optimized (and re-optimized) dynamically at
runtime.

Modules
JavaScript programs started off pretty small — most of its usage in the early days was to do
isolated scripting tasks, providing a bit of interactivity to your web pages where needed, so
large scripts were generally not needed.

JavaScript has had modules for a long time. However, they were implemented via libraries,
not built into the language. ES6 is the first time that JavaScript has built-in modules.

CJS (CommonJS, originally called ServerJS) is an ambitious project started by Kevin Dangoor
back in 2009 in an attempt to bring JavaScript to the outside of web browsers. The ultimate
goal is to define a JavaScript Standard Library like other general-purpose programming
languages and compatible in multiple host environments.

AMD (Asynchronous Module Definition) is a module format that allows module and its
dependencies can be asynchronously loaded. This is particularly well suited for the browser
environment where synchronous loading of modules incurs performance, usability,
debugging, and cross-domain access problems.

3/7
UMD (Universal Module Definition) is a universal module format which is ugly, but is both
AMD and CommonJS compatible, as well as supporting the old-style global variable
definition.

ESM (ES Modules, ECMAScript Modules) is the official standard format to package JavaScript
code for reuse, this standardization process completed with ES6 and browsers started
implementing this standard trying to keep everything well aligned.

Paradigms
A programming paradigm is a style, or “way,” of programming, they are not meant to be
mutually exclusive. A single program can feature multiple paradigms. Very few languages
implement a paradigm 100% — when they do, they are pure. It is incredibly rare to have a
pure OOP language or a pure functional language.

JavaScript programs tend to make heavy use of passing functions around so they are called
functional languages despite having variables and many imperative constructs. You should
invest heavily on this topic before any interviews, I can't emphasize enough how important it
is to cover following supported programming paradigms in JavaScript:

Functional Programming — a natural fit for JavaScript because it offers first-class

functions, closures, and simple lambda syntax.

Prototype-Based Object-Oriented Programming — when it has classes; when it comes

to inheritance, JavaScript supports it in a process of reusing existing objects via
delegation that serve as prototypes, also known as prototypal inheritance.

Metaprogramming — with Proxy and Reflect objects allowing you to intercept and
define custom behavior for fundamental language operations (e.g. property lookup,
assignment, enumeration, function invocation, etc).

Event-Driven Programming — via the support of host environments. JavaScript

language itself doesn't support I/O but relied on host environments to coordinate
events, user interaction, scripts, rendering, networking, and so forth, host
environments must use event loop.

Each paradigm has their own benefits and drawbacks, mix them nicely to build products
which are performant, reusable and maintainable.

Functions

4/7
There is no doubt that function is the heart of JavaScript since its inception, functions are
treated as first-class citizens, you can pass functions around like any other data types. This
special position makes possible for functional programming in JavaScript.

Functions in JavaScript are more complicated than in other programming languages when
they carry too much capabilities, shorthands, and patterns.

It's a must to fully understand JavaScript functions and surrounding concepts like functional
programming , first-class functions , arrow function , scopes , lexical environment ,
closures , pure functions , higher-order functions , currying .

Classes
Object-oriented programming is very popular among developers and software companies,
that's why classes were added to JavaScript to make life easier for beginners and who
coming from other object-oriented programming languages.

JavaScript classes have their quirks due to the complexity of having to retain backward
compatibility. JavaScript class inheritance is mocked, but underneath (and hidden), it's still
using prototypal inheritance.

Classes don't fundamentally change how JavaScript works; it’s not introducing a new thing.
Classes are simply syntactic sugar on top of the custom types you’ve been working with for a
while. This solves a problem that JavaScript has had for a long time, which is the verbosity
and confusion of defining your own types.

Classes give us a more concise way of creating object blueprints, and constructor functions
describe more accurately what is happening under the hood. Understanding prototypical
inheritance is paramount to being an effective JavaScript developer.

Generators
Iterators are an implementation of Iterable objects such as maps, arrays and strings which
enables us to iterate over them using next(). They have a wide variety of use cases across
Generators, Observables and Spread operators.

Generators are functions whose executions are not continuous, they can stop midway and
then continue from where they stopped, written using the function* syntax, appear to be
functions but behave like iterators.

Async generators are special because you can use both await and yield , different from
async functions and generators in that they don't return a promise or an iterator but rather
an async iterator. You can think of an async iterator as an iterator whose next() function

5/7
always returns a promise.

Asynchronous
Any general purpose programming languages must provide a way of writing asynchronous
code to handle heavy tasks — I/O operations, calling network requests, writing to files, etc —
and JavaScript is obviously one of them.

Callback in JavaScript is a function that is passes as argument to other function that is

expected to execute (call back) the argument at a given time; synchronous callbacks are
invoked before a function returns, asynchronous callbacks may be invoked after a function
returns.

A promise is an object that may produce a single value some time in the future, either a
resolved value, or a reason that it’s not resolved, may be in one of 3 possible states --
fulfilled, rejected, or pending.

Async functions enable us to write promise based code as if it were synchronous, but
without blocking the execution thread. It operates asynchronously via the event-loop. An
async function can contain an await expression that pauses the execution of the async
function and waits for the passed Promise's resolution, and then resumes the async
function's execution and evaluates as the resolved value.

Miscellaneous
Scope is the accessibility of variables, functions, and objects in some particular part of your
code during runtime.

Lexical scoping defines how variable names are resolved in nested functions: inner
functions contain the scope of parent functions even if the parent function has returned.

Hoisting is a JavaScript mechanism where variables and function declarations are moved to
the top of their scope before code execution.

Currying is a process in functional programming in which we can transform a function with

multiple arguments into a sequence of nesting functions. It returns a new function that
expects the next argument inline.

Regular expression is an object that describes a pattern of characters, RegExp class

represents regular expressions, and both String and RegExp define methods that use
regular expressions to perform powerful pattern-matching and search-and-replace
functions on text.

6/7
Mixin is a class containing methods that can be used by other classes without a need to
inherit from it. A mixin provides methods that implement a certain behavior, but we do not
use it alone, we use it to add the behavior to other classes.

Where to Go From Here?

JavaScript is no longer confined to the browser, it runs everywhere and on anything, from
servers to IoT devices; learning it properly will increase your chances of finding a good job or
building a successful startup.

Inexperienced technical interviewers are unpredictable and prefer to challenge you than
wish you succeed. More experienced ones are wiser, they seem to know your levels already
and believe that you can reach to where they are by learning the right things.

Failing to list all possible cases is fine, but having no clue of something is definitely a red
flag

Reread this post multiple times to familiarize all keywords and concepts, keep digging deep
on unfamiliar ones by searching Google or reading following excellent resources:

The JavaScript language: free online tutorials excellent written by Ilya Kantor, starting
from scratch and go on to advanced concepts, easy to understand with tons of code
samples.
You Don't Know JS Yet (book series) - 2nd Edition : deep dive into the core mechanisms
of the JavaScript language, entirely free online on GitHub.
JavaScript for impatient programmers: a good online free book to skim all features of
JavaScript, short explained, and external linked to advanced topics.
10 Interview Questions Every JavaScript Developer Should Know : by Eric Elliott, the
most quality collection of questions and answers about JavaScript I've seen, a must
read before any interview.
37 Essential JavaScript Interview Questions with many tricky coding questions and
answers; even though quite limited in number of questions, you'll get a sense of
confusing holes in JavaScript language.

7/7