loading...
Cover image for Cracking The Frontend Interview, Part 4: JavaScript

Cracking The Frontend Interview, Part 4: JavaScript

hoangbkit profile image hoangbkit Updated on ・9 min read

Cracking The Frontend Interview (6 Part Series)

1) Cracking The Frontend Interview, Part 1: Overview 2) Cracking The Frontend Interview, Part 2: HTML 3 ... 4 3) Cracking The Frontend Interview, Part 3: CSS 4) Cracking The Frontend Interview, Part 4: JavaScript 5) Cracking The Frontend Interview, Part 5: React 6) Cracking The Frontend Interview, Part 6: WebDev

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.

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:

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:

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.

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

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 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.

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:

Cracking The Frontend Interview (6 Part Series)

1) Cracking The Frontend Interview, Part 1: Overview 2) Cracking The Frontend Interview, Part 2: HTML 3 ... 4 3) Cracking The Frontend Interview, Part 3: CSS 4) Cracking The Frontend Interview, Part 4: JavaScript 5) Cracking The Frontend Interview, Part 5: React 6) Cracking The Frontend Interview, Part 6: WebDev

Posted on Feb 11 by:

hoangbkit profile

hoangbkit

@hoangbkit

I turn ☕ into {code} using #javascript

Discussion

markdown guide
 

It's a must to fully understand JavaScript functions and surrounding concepts like functional programming...

You cannot say you need to understand functional programming to get a js job, there are a lot of fp-related things javasript doean't even touc on (typeclasses, currying by default, algebraic data types, higher kinded types, operator overloading, do-notation, handling side effects and state using mondads etc), fp in js (without something like fp-ts) isnt anything more than "know how functions work" so I think this would be a better tip than "understand functional programming"

 

This post focuses heavily on javascript in interview, in this situation interviewers do love to ask those confusing concepts related to functional programming. Even though as your point JS doesn't have fully support for FP yet or you barely use it in daily basis, failing to fully understand functions and FP concepts around functions will cost your interview with many red flags especially at middle or senior level.

 

What I was saying is that when someone sees that sentence he might go and get lost in a sea of complex stuff which he doesnt need, what he really needs to know is just everything about how functions work in javascript

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

Hi guys.
I'm looking for a person or a specialist.
With knowledge in reverse engineering.
Especially in Linux software.
I have many projects.
I need specialists
To outsource the project.
My exact need is reverse engineering and cracking services.
Telegram ID: @benjaminfulda