mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert "Add divider" 

This reverts commit a299169455.
This commit is contained in:
Yangshun Tay 2018-02-14 16:11:57 -08:00
parent c708e9c444
commit 74ebce6019
1 changed files with 0 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
README.md
View File

@ -133,8 +133,6 @@ You might be interested in the [Tech Interview Handbook](https://github.com/yang
Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions). Pull requests for suggestions and corrections are welcome!
---
### What does a `DOCTYPE` do?
`DOCTYPE` is an abbreviation for “document type”. It is a declaration used in HTML to distinguish between standards mode and [quirks mode](https://quirks.spec.whatwg.org/#history). Its presence tells the browser to render the web page in standards mode.
@ -147,8 +145,6 @@ Moral of the story - just add `<!DOCTYPE html>` at the start of your page.
* https://www.w3.org/QA/Tips/Doctype
* https://quirks.spec.whatwg.org/#history
---
### How do you serve a page with content in multiple languages?
The question is a little vague, I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
@ -161,8 +157,6 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo
* https://www.w3.org/International/getting-started/language
---
### What kind of things must you be wary of when designing or developing for multilingual sites?
* Use `lang` attribute in your HTML.
@ -178,8 +172,6 @@ In the back end, the HTML markup will contain `i18n` placeholders and content fo
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
---
### What are `data-` attributes good for?
Before JavaScript frameworks became popular, front end developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
@ -191,8 +183,6 @@ These days, using `data-` attributes is not encouraged. One reason is that users
* http://html5doctor.com/html5-custom-data-attributes/
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
---
### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
* Semantics - Allowing you to describe more precisely what your content is.
@ -208,8 +198,6 @@ These days, using `data-` attributes is not encouraged. One reason is that users
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
---
### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
All the above mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
@ -229,8 +217,6 @@ All the above mentioned technologies are key-value storage mechanisms on the cli
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
* http://tutorial.techaltum.com/local-and-session-storage.html
---
### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
* `<script>` - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
@ -245,8 +231,6 @@ Note: The `async` and `defer` attrib­utes are ignored for scripts that have no
* https://stackoverflow.com/questions/10808109/script-tag-async-defer
* https://bitsofco.de/async-vs-defer/
---
### Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
**Placing `<link>`s in the `<head>`**
@ -263,8 +247,6 @@ An exception for positioning of `<script>`s at the bottom is when your script co
* https://developer.yahoo.com/performance/rules.html#css_top
---
### What is progressive rendering?
Progressive rendering is the name given to techniques used to improve performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
@ -277,8 +259,6 @@ Examples of such techniques:
* Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
* Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
---
### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
TODO
@ -288,8 +268,6 @@ TODO
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
---
### Have you used different HTML templating languages before?
Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
@ -305,8 +283,6 @@ Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a f
Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions#css-questions). Pull requests for suggestions and corrections are welcome!
---
### What is CSS selector specificity and how does it work?
The browser determines what styles to show on an element depending on the specificity of CSS rules. We assume that the browser has already determined the rules that match a particular element. Among the matching rules, the specificity, four comma-separate values, `a, b, c, d` are calculated for each rule based on the following:
@ -327,8 +303,6 @@ I would write CSS rules with low specificity so that they can be easily overridd
* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
* https://www.sitepoint.com/web-foundations/specificity/
---
### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
* **Resetting** - Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
@ -340,8 +314,6 @@ I would choose resetting when I have a very customized or unconventional site de
* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
---
### Describe `float`s and how they work.
Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike `position: absolute` elements, which are removed from the flow of the page.
@ -368,8 +340,6 @@ Alternatively, give `overflow: auto` or `overflow: hidden` property to the paren
* https://css-tricks.com/all-about-floats/
---
### Describe `z-index` and how stacking context is formed.
The `z-index` property in CSS controls the vertical stacking order of elements that overlap. `z-index` only affects elements that have a `position` value which is not `static`.
@ -386,8 +356,6 @@ Each stacking context is self-contained - after the element's contents are stack
* https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
---
### Describe Block Formatting Context (BFC) and how it works.
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
@ -408,8 +376,6 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more
* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
---
### What are the various clearing techniques and which is appropriate for what context?
* Empty `div` method - `<div style="clear:both;"></div>`.
@ -418,8 +384,6 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more
In large projects, I would write a utility `.clearfix` class and use them in places where I need it. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
---
### Explain CSS sprites, and how you would implement them on a page or site.
CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it). How to implement it:
@ -437,8 +401,6 @@ CSS sprites combine multiple images into one single larger image. It is commonly
* https://css-tricks.com/css-sprites/
---
### How would you approach fixing browser-specific styling issues?
* After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
@ -446,8 +408,6 @@ CSS sprites combine multiple images into one single larger image. It is commonly
* Use `autoprefixer` to automatically add vendor prefixes to your code.
* Use Reset CSS or Normalize.css.
---
### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
* Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
@ -456,8 +416,6 @@ CSS sprites combine multiple images into one single larger image. It is commonly
* Autoprefixer for automatic vendor prefix insertion.
* Feature detection using [Modernizr](https://modernizr.com/).
---
### What are the different ways to visually hide content (and make it available only for screen readers)?
These techniques are related to accessibility (a11y).
@ -477,32 +435,22 @@ Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioni
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
* http://a11yproject.com/
---
### Have you ever used a grid system, and if so, what do you prefer?
I like the `float`-based grid system because it still has the most browser support among the alternative existing systems (flex, grid). It has been used in Bootstrap for years and has been proven to work.
---
### Have you used or implemented media queries or mobile-specific layouts/CSS?
Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
---
### Are you familiar with styling SVG?
No... Sadly.
---
### Can you give an example of an @media property other than screen?
TODO
---
### What are some of the "gotchas" for writing efficient CSS?
Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector, and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large numbers of elements and browsers will have to do more work in determining if the parents do match.
@ -516,8 +464,6 @@ Be aware of which CSS properties trigger reflow, repaint and compositing. Avoid
* https://developers.google.com/web/fundamentals/performance/rendering/
* https://csstriggers.com/
---
### What are the advantages/disadvantages of using CSS preprocessors?
**Advantages:**
@ -532,8 +478,6 @@ Be aware of which CSS properties trigger reflow, repaint and compositing. Avoid
* Requires tools for preprocessing. Re-compilation time can be slow.
---
### Describe what you like and dislike about the CSS preprocessors you have used.
**Likes:**
@ -546,14 +490,10 @@ Be aware of which CSS properties trigger reflow, repaint and compositing. Avoid
* I use Sass via `node-sass`, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions.
* In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule.
---
### How would you implement a web design comp that uses non-standard fonts?
Use `@font-face` and define `font-family` for different `font-weight`s.
---
### Explain how a browser determines what elements match a CSS selector.
This part is related to the above about writing efficient CSS. Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector, and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
@ -564,8 +504,6 @@ For example with this selector `p span`, browsers firstly find all the `<span>`
* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
---
### Describe pseudo-elements and discuss what they are used for.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (`:first-line`, `:first-letter`) or adding elements to the markup (combined with `content: ...`) without having to modify the markup (`:before`, `:after`).
@ -578,8 +516,6 @@ A CSS pseudo-element is a keyword added to a selector that lets you style a spec
* https://css-tricks.com/almanac/selectors/a/after-and-before/
---
### Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding `padding`, `border`, and `margin` areas.
@ -603,8 +539,6 @@ The box model has the following rules:
* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
---
### What does `* { box-sizing: border-box; }` do? What are its advantages?
* By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for.
@ -612,16 +546,12 @@ The box model has the following rules:
* The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width.
* The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width.
---
### What is the CSS `display` property and can you give a few examples of its use?
* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
TODO
---
### What's the difference between `inline` and `inline-block`?
I shall throw in a comparison with `block` for good measure.
@ -635,8 +565,6 @@ I shall throw in a comparison with `block` for good measure.
| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
---
### What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?
A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`.
@ -651,16 +579,12 @@ A positioned element is an element whose computed `position` property is either
* https://developer.mozilla.org/en/docs/Web/CSS/position
---
### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
* **Bootstrap** - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely-used.
* **Semantic UI** - Source code structure makes theme customization extremely hard to understand. Painful to customize with unconventional theming system. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
* **Bulma** - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.
---
### Have you played around with the new CSS Flexbox or Grid specs?
Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
@ -673,14 +597,10 @@ Grid is by far the most intuitive approach for creating grid-based layouts (it b
* https://philipwalton.github.io/solved-by-flexbox/
---
### Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
TODO
---
### How is responsive design different from adaptive design?
Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
@ -695,8 +615,6 @@ Adaptive design is more like the modern definition of progressive enhancement. I
* http://mediumwell.com/responsive-adaptive-mobile/
* https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
---
### Have you ever worked with retina graphics? If so, when and what techniques did you use?
I tend to use higher resolution graphics (twice the display size) to handle retina display. The better way would be to use a media query like `@media only screen and (min-device-pixel-ratio: 2) { ... }` and change the `background-image`.
@ -709,8 +627,6 @@ Another method would be to use JavaScript to replace the `<img>` `src` attribute
* https://www.sitepoint.com/css-techniques-for-retina-displays/
---
### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
`translate()` is a value of CSS `transform`. Changing `transform` or `opacity` does not trigger browser reflow or repaint, only compositions, whereas changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
@ -721,8 +637,6 @@ When using `translate()`, the element still takes up its original space (sort of
* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
---
### Other Answers
* https://neal.codes/blog/front-end-interview-css-questions
@ -735,8 +649,6 @@ When using `translate()`, the element still takes up its original space (sort of
Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions#js-questions). Pull requests for suggestions and corrections are welcome!
---
### Explain event delegation
Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
@ -749,8 +661,6 @@ Event delegation is a technique involving adding event listeners to a parent ele
* https://davidwalsh.name/event-delegate
* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
---
### Explain how `this` works in JavaScript
There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. I have read many explanations on `this` online, and I found [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation to be the clearest. The following rules are applied:
@ -769,8 +679,6 @@ For an in-depth explanation, do check out his [article on Medium](https://codebu
* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
* https://stackoverflow.com/a/3127440/1751946
---
### Explain how prototypal inheritance works
This is an extremely common JavaScript interview question. All JavaScript objects have a `prototype` property, that is a reference to another object. When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `prototype`, and the `prototype`'s `prototype` and so on, until it finds the property defined on one of the `prototype`s or until it reaches the end of the prototype chain. This behaviour simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects).
@ -780,8 +688,6 @@ This is an extremely common JavaScript interview question. All JavaScript object
* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
* https://davidwalsh.name/javascript-objects
---
### What do you think of AMD vs CommonJS?
Both are ways to implement a module system, which was not natively present in JavaScript until ES2015 came along. CommonJS is synchronous while AMD (Asynchronous Module Definition) is obviously asynchronous. CommonJS is designed with server-side development in mind while AMD, with its support for asynchronous loading of modules, is more intended for browsers.
@ -795,8 +701,6 @@ I'm glad that with ES2015 modules, that has support for both synchronous and asy
* https://auth0.com/blog/javascript-module-systems-showdown/
* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
---
### Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?
IIFE stands for Immediately Invoked Function Expressions. The JavaScript parser reads `function foo(){ }();` as `function foo(){ }` and `();`, where the former is a function declaration and the latter (a pair of brackets) is an attempt at calling a function but there is no name specified, hence it throws `Uncaught SyntaxError: Unexpected token )`.
@ -807,8 +711,6 @@ Here are two ways to fix it that involves adding more brackets: `(function foo()
* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
---
### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
**Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block.
@ -853,8 +755,6 @@ As a personal habit, I never leave my variables undeclared or unassigned. I will
* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
---
### What is a closure, and how/why would you use one?
A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned.
@ -869,8 +769,6 @@ A closure is the combination of a function and the lexical environment within wh
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
---
### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
To understand the differences between the two, let's look at what each function does.
@ -910,8 +808,6 @@ The main difference between `.forEach` and `.map()` is that `.map()` returns a n
* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
---
### What's a typical use case for anonymous functions?
They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.
@ -945,8 +841,6 @@ console.log(double); // [2, 4, 6]
* https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
* https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
---
### How do you organize your code? (module pattern, classical inheritance?)
In the past, I used Backbone for my models which encourages a more OOP approach, creating Backbone models and attaching methods to them.
@ -955,8 +849,6 @@ The module pattern is still great, but these days, I use the Flux architecture b
I avoid using classical inheritance where possible. When and if I do, I stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
---
### What's the difference between host objects and native objects?
Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
@ -967,8 +859,6 @@ Host objects are provided by the runtime environment (browser or Node), such as
* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
---
### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
This question is pretty vague. My best guess at its intention is that it is asking about constructors in JavaScript. Technically speaking, `function Person(){}` is just a normal function declaration. The convention is use PascalCase for functions that are intended to be used as constructors.
@ -995,8 +885,6 @@ console.log(person.name); // "john"
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
---
### What's the difference between `.call` and `.apply`?
Both `.call` and `.apply` are used to invoke functions and the first parameter will be used as the value of `this` within the function. However, `.call` takes in a comma-separated arguments as the next arguments while `.apply` takes in an array of arguments as the next argument. An easy way to remember this is C for `call` and comma-separated and A for `apply` and array of arguments.
@ -1010,8 +898,6 @@ console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3
```
---
### Explain `Function.prototype.bind`.
Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
@ -1024,8 +910,6 @@ In my experience, it is most useful for binding the value of `this` in methods o
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
---
### When would you use `document.write()`?
`document.write()` writes a string of text to a document stream opened by `document.open()`. When `document.write()` is executed after the page has loaded, it will call `document.open` which clears the whole document (`<head>` and `<body>` removed!) and replaces the contents with the given parameter value in string. Hence it is usually considered dangerous and prone to misuse.
@ -1037,8 +921,6 @@ There are some answers online that explain `document.write()` is being used in a
* https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
* https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
---
### What's the difference between feature detection, feature inference, and using the UA string?
**Feature Detection**
@ -1077,8 +959,6 @@ This is a browser-reported string that allows the network protocol peers to iden
* https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
---
### Explain Ajax in as much detail as possible.
Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute JSON for XML due to the advantages of being native to JavaScript.
@ -1090,8 +970,6 @@ The `XMLHttpRequest` API is frequently used for the asynchronous communication o
* https://en.wikipedia.org/wiki/Ajax_(programming)
* https://developer.mozilla.org/en-US/docs/AJAX
---
### What are the advantages and disadvantages of using Ajax?
**Advantages**
@ -1108,8 +986,6 @@ The `XMLHttpRequest` API is frequently used for the asynchronous communication o
* Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
* Basically most of the disadvantages of an SPA.
---
### Explain how JSONP works (and how it's not really Ajax).
JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers because Ajax requests from the current page to a cross-origin domain is not allowed.
@ -1142,8 +1018,6 @@ These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) i
* https://stackoverflow.com/a/2067584/1751946
---
### Have you ever used JavaScript templating? If so, what libraries have you used?
Yes. Handlebars, Underscore, Lodash, AngularJS and JSX. I disliked templating in AngularJS because it made heavy use of strings in the directives and typos would go uncaught. JSX is my new favourite as it is closer to JavaScript and there is barely any syntax to learn. Nowadays, you can even use ES2015 template string literals as a quick way for creating templates without relying on third-party code.
@ -1154,8 +1028,6 @@ const template = `<div>My name is: ${name}</div>`;
However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries.
---
### Explain "hoisting".
Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the `var` keyword will have their declaration "hoisted" up to the top of the current scope. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is. Let's explain with a few examples.
@ -1192,14 +1064,10 @@ var bar = function() {
console.log(bar); // [Function: bar]
```
---
### Describe event bubbling.
When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the `document`. Event bubbling is the mechanism behind event delegation.
---
### What's the difference between an "attribute" and a "property"?
Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: `<input type="text" value="Hello">`.
@ -1221,8 +1089,6 @@ console.log(input.value); // Hello World!
* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
---
### Why is extending built-in JavaScript objects not a good idea?
Extending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will break if the behavior of these two methods are not the same.
@ -1233,8 +1099,6 @@ The only time you may want to extend a native object is when you want to create
* http://lucybain.com/blog/2014/js-extending-built-in-objects/
---
### Difference between document `load` event and document `DOMContentLoaded` event?
The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
@ -1246,8 +1110,6 @@ The `DOMContentLoaded` event is fired when the initial HTML document has been co
* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
* https://developer.mozilla.org/en-US/docs/Web/Events/load
---
### What is the difference between `==` and `===`?
`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`. When using `==`, funky things can happen, such as:
@ -1273,8 +1135,6 @@ console.log(a == undefined); // true
* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
---
### Explain the same-origin policy with regards to JavaScript.
The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
@ -1283,8 +1143,6 @@ The same-origin policy prevents JavaScript from making requests across domain bo
* https://en.wikipedia.org/wiki/Same-origin_policy
---
### Make this work:
```js
@ -1299,8 +1157,6 @@ function duplicate(arr) {
duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
```
---
### Why is it called a Ternary expression, what does the word "Ternary" indicate?
"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
@ -1309,8 +1165,6 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
---
### What is `"use strict";`? What are the advantages and disadvantages to using it?
'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt in to a restricted variant of JavaScript.
@ -1338,8 +1192,6 @@ Overall, I think the benefits outweigh the disadvantages, and I never had to rel
* http://2ality.com/2011/10/strict-mode-hatred.html
* http://lucybain.com/blog/2014/js-use-strict/
---
### Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5`.
Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
@ -1358,14 +1210,10 @@ I would not advise you to write the above during interviews though. Just stick w
* https://gist.github.com/jaysonrowe/1592432
---
### Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
Every script has access to the global scope, and if everyone is using the global namespace to define their own variables, there will bound to be collisions. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
---
### Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
@ -1378,8 +1226,6 @@ TODO.
* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
---
### Explain what a single page app is and how to make one SEO-friendly.
The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me!
@ -1407,8 +1253,6 @@ The downsides:
* http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
* https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
---
### What is the extent of your experience with Promises and/or their polyfills?
Possess working knowledge of it. 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 (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
@ -1419,8 +1263,6 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
---
### What are the pros and cons of using Promises instead of callbacks?
**Pros**
@ -1434,8 +1276,6 @@ Some common polyfills are `$.deferred`, Q and Bluebird but not all of them compl
* Slightly more complex code (debatable).
* In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
---
### What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript and TypeScript.
@ -1462,8 +1302,6 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
---
### What tools and techniques do you use for debugging JavaScript code?
* React and Redux
@ -1479,8 +1317,6 @@ Practically, ES2015 has vastly improved JavaScript and made it much nicer to wri
* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
* https://raygun.com/blog/javascript-debugging/
---
### What language constructions do you use for iterating over object properties and array items?
For objects:
@ -1496,8 +1332,6 @@ For arrays:
Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. `for` loops allow more flexibility, such as prematurely terminate the loop using `break` or incrementing the iterator more than once per loop.
---
### Explain the difference between mutable and immutable objects.
* What is an example of an immutable object in JavaScript?
@ -1506,16 +1340,12 @@ Most of the time, I would prefer the `.forEach` method, but it really depends on
TODO
---
### Explain the difference between synchronous and asynchronous functions.
Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
Asynchronous functions usually accept a callback as a parameter and execution continues on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
---
### What is event loop? What is the difference between call stack and task queue?
The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
@ -1527,8 +1357,6 @@ If you haven't already checked out Philip Robert's [talk on the Event Loop](http
* https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
* http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
---
### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`
The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behaviour as variables). For more explanation on hoisting, refer to the question above on hoisting. If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error.
@ -1555,8 +1383,6 @@ var foo = function() {
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
---
### What are the differences between variables created using `let`, `var` or `const`?
Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
@ -1634,26 +1460,18 @@ baz = 'qux';
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
---
### What are the differences between ES6 class and ES5 function constructors?
TODO
---
### Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
TODO
---
### What advantage is there for using the arrow syntax for a method in a constructor?
TODO
---
### What is the definition of a higher-order function?
A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Array.prototype.bind` is one such example in JavaScript.
@ -1694,8 +1512,6 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
* https://eloquentjavascript.net/05_higher_order.html
---
### Can you give an example for destructuring an object or an array?
Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays, and place them into distinct variables.
@ -1738,14 +1554,10 @@ console.log(q); // true
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
* https://ponyfoo.com/articles/es6-destructuring-in-depth
---
### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
TODO
---
### Can you give an example of a curry function and why this syntax offers an advantage?
Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each take one parameter.
@ -1782,8 +1594,6 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
* https://hackernoon.com/currying-in-js-d9ddc64f162e
---
### What are the benefits of using spread syntax and how is it different from rest syntax?
ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and rx.js projects.
@ -1828,20 +1638,14 @@ const { e, f, ...others } = {
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
---
### How can you share code between files?
TODO
---
### Why you might want to create static class members?
TODO
---
### Other Answers
* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
@ -1850,8 +1654,6 @@ TODO
If you are interested in how data structures are implemented, check out [Lago](https://github.com/yangshun/lago), a Data Structures and Algorithms library for JavaScript. It is pretty much still WIP but I intend to make it into a library that is able to be used in production and also a reference resource for revising Data Structures and Algorithms.
---
## Contributing
Feel free to make pull requests to correct any mistakes in the answers or suggest new questions.