├── Anki
└── Front-end Interview Questions.apkg
├── CSV
└── Front-end Interview Questions.csv
├── README.md
├── Studies
└── Front-end Interview Questions.studies
└── StudyArch
└── Front-end Interview Questions.studyarch
/Anki/Front-end Interview Questions.apkg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twhite96/front_end_interview_questions_flashcards/b9717ac8113bb4f0606eacbc3a588fcd2de9893b/Anki/Front-end Interview Questions.apkg
--------------------------------------------------------------------------------
/CSV/Front-end Interview Questions.csv:
--------------------------------------------------------------------------------
1 | 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. Its presence tells the browser to render the web page in standards mode.
2 |
3 | Moral of the story - just add at the start of your page.
4 |
5 | References
6 |
7 | https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
8 | https://www.w3.org/QA/Tips/Doctype
9 | https://quirks.spec.whatwg.org/#history"
10 | 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.
11 |
12 | When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the Accept-Language header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the lang attribute in the tag, such as ....
13 |
14 | In the back end, the HTML markup will contain i18n placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.
15 |
16 | References
17 |
18 | https://www.w3.org/International/getting-started/language"
19 | What kind of things must you be wary of when designing or developing for multilingual sites?,"Use lang attribute in your HTML.
20 | Directing users to their native language - Allow a user to change his country/language easily without hassle.
21 | Text in images is not a scalable approach - Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However to translate image text, each string of text will need to have it's a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control.
22 | Restrictive words / sentence length - Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free flowing text such as body text or comments.
23 | Be mindful of how colors are perceived - Colors are perceived differently across languages and cultures. The design should use color appropriately.
24 | Formatting dates and currencies - Calendar dates are sometimes presented in different ways. Eg. ""May 31, 2012"" in the U.S. vs. ""31 May 2012"" in parts of Europe.
25 | Do not concatenate translated strings - Do not do anything like ""The date today is "" + date. It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: I will travel on {% date %} and {% date %} 我会出发. Note that the position of the variable is different due to grammar rules of the language.
26 | Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.
27 | References
28 |
29 | https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites"
30 | 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.
31 |
32 | These days, using data- attributes is not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.
33 |
34 | References
35 |
36 | http://html5doctor.com/html5-custom-data-attributes/
37 | https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes"
38 | 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.
39 | Connectivity - Allowing you to communicate with the server in new and innovative ways.
40 | Offline and storage - Allowing webpages to store data on the client-side locally and operate offline more efficiently.
41 | Multimedia - Making video and audio first-class citizens in the Open Web.
42 | 2D/3D graphics and effects - Allowing a much more diverse range of presentation options.
43 | Performance and integration - Providing greater speed optimization and better usage of computer hardware.
44 | Device access - Allowing for the usage of various input and output devices.
45 | Styling - Letting authors write more sophisticated themes.
46 | References
47 |
48 | https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5"
49 | "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.
50 |
51 | cookie localStorage sessionStorage
52 | Initiator Client or server. Server can use Set-Cookieheader Client Client
53 | Expiry Manually set Forever On tab close
54 | Persistent across browser sessions Depends on whether expiration is set Yes No
55 | Have domain associated Yes No No
56 | Sent to server with every HTTP request Cookies are automatically being sent via Cookie header No No
57 | Capacity (per domain) 4kb 5MB 5MB
58 | Accessibility Any window Any window Same tab
59 | References
60 |
61 | https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
62 | http://tutorial.techaltum.com/local-and-session-storage.html"
63 | "Describe the difference between
671 |
672 |
673 | // File loaded from https://example.com?callback=printData
674 | printData({ name: 'Yang Shun' });
675 | The client has to have the printData function in its global scope and the function will be executed by the client when the response from the cross-origin domain is received.
676 |
677 | JSONP can be unsafe and has some security implications. As JSONP is really JavaScript, it can do everything else JavaScript can do, so you need to trust the provider of the JSONP data.
678 |
679 | These days, CORS is the recommended approach and JSONP is seen as a hack.
680 |
681 | References
682 |
683 | https://stackoverflow.com/a/2067584/1751946"
684 | "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.
685 |
686 | const template = `
My name is: ${name}
`;
687 | However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries."
688 | "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.
689 |
690 | // var declarations are hoisted.
691 | console.log(foo); // undefined
692 | var foo = 1;
693 | console.log(foo); // 1
694 |
695 | // let/const declarations are NOT hoisted.
696 | console.log(bar); // ReferenceError: bar is not defined
697 | let bar = 2;
698 | console.log(bar); // 2
699 | Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted.
700 |
701 | // Function Declaration
702 | console.log(foo); // [Function: foo]
703 | foo(); // 'FOOOOO'
704 | function foo() {
705 | console.log('FOOOOO');
706 | }
707 | console.log(foo); // [Function: foo]
708 |
709 | // Function Expression
710 | console.log(bar); // undefined
711 | bar(); // Uncaught TypeError: bar is not a function
712 | var bar = function() {
713 | console.log('BARRRR');
714 | };
715 | console.log(bar); // [Function: bar]"
716 | 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."
717 | "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: .
718 |
719 | const input = document.querySelector('input');
720 | console.log(input.getAttribute('value')); // Hello
721 | console.log(input.value); // Hello
722 | But after you change the value of the text field by adding ""World!"" to it, this becomes:
723 |
724 | console.log(input.getAttribute('value')); // Hello
725 | console.log(input.value); // Hello World!
726 | References
727 |
728 | https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html"
729 | 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.
730 |
731 | The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.
732 |
733 | References
734 |
735 | http://lucybain.com/blog/2014/js-extending-built-in-objects/"
736 | 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.
737 |
738 | window's load event is only fired after the DOM and all dependent resources and assets have loaded.
739 |
740 | References
741 |
742 | https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
743 | https://developer.mozilla.org/en-US/docs/Web/Events/load"
744 | 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:
745 |
746 | 1 == '1'; // true
747 | 1 == [1]; // true
748 | 1 == true; // true
749 | 0 == ''; // true
750 | 0 == '0'; // true
751 | 0 == false; // true
752 | My advice is never to use the == operator, except for convenience when comparing against null or undefined, where a == null will return true if a is null or undefined.
753 |
754 | var a = null;
755 | console.log(a == null); // true
756 | console.log(a == undefined); // true
757 | References
758 |
759 | https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons"
760 | 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.
761 |
762 | References
763 |
764 | https://en.wikipedia.org/wiki/Same-origin_policy"
765 | Make this work:,"duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
766 | function duplicate(arr) {
767 | return arr.concat(arr);
768 | }
769 |
770 | duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]"
771 | "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.
772 |
773 | References
774 |
775 | https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"
776 | "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.
777 |
778 | Advantages:
779 |
780 | Makes it impossible to accidentally create global variables.
781 | Makes assignments which would otherwise silently fail to throw an exception.
782 | Makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect).
783 | Requires that function parameter names be unique.
784 | this is undefined in the global context.
785 | It catches some common coding bloopers, throwing exceptions.
786 | It disables features that are confusing or poorly thought out.
787 | Disadvantages:
788 |
789 | Many missing features that some developers might be used to.
790 | No more access to function.caller and function.arguments.
791 | Concatenation of scripts written in different strict modes might cause issues.
792 | Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
793 |
794 | References
795 |
796 | http://2ality.com/2011/10/strict-mode-hatred.html
797 | http://lucybain.com/blog/2014/js-use-strict/"
798 | "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.
799 |
800 | for (let i = 1; i <= 100; i++) {
801 | let f = i % 3 == 0,
802 | b = i % 5 == 0;
803 | console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
804 | }
805 | I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below.
806 |
807 | References
808 |
809 | https://gist.github.com/jaysonrowe/1592432"
810 | "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."
811 | "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.
812 |
813 | The DOM event DOMContentLoaded will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.
814 |
815 | TODO.
816 |
817 | References
818 |
819 | https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload"
820 | 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, which coincidentally, is written by me!
821 |
822 | Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response for their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML for the new page. This is called server-side rendering.
823 |
824 | However in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.
825 |
826 | The benefits:
827 |
828 | The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.
829 | Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.
830 | Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.
831 | The downsides:
832 |
833 | Heavier initial page load due to loading of framework, app code, and assets required for multiple pages.
834 | There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
835 | SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as Prerender to ""render your javascript in a browser, save the static HTML, and return that to the crawlers"".
836 | References
837 |
838 | https://github.com/grab/front-end-guide#single-page-apps-spas
839 | http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
840 | http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
841 | https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52"
842 | 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.
843 |
844 | Some common polyfills are $.deferred, Q and Bluebird but not all of them comply to the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
845 |
846 | References
847 |
848 | https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261"
849 | What are the pros and cons of using Promises instead of callbacks?,"Pros
850 |
851 | Avoid callback hell which can be unreadable.
852 | Makes it easy to write sequential asynchronous code that is readable with .then().
853 | Makes it easy to write parallel asynchronous code with Promise.all().
854 | Cons
855 |
856 | Slightly more complex code (debatable).
857 | In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it."
858 | 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.
859 |
860 | Advantages:
861 |
862 | Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns.
863 | Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome.
864 | Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time.
865 | Disadvantages:
866 |
867 | Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers.
868 | Debugging can be a pain if your source maps do not map nicely to your pre-compiled source.
869 | Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects.
870 | Smaller community (depends on the language), which means resources, tutorials, libraries and tooling would be harder to find.
871 | IDE/editor support might be lacking.
872 | These languages will always be behind the latest JavaScript standard.
873 | Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.
874 | Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days.
875 |
876 | References
877 |
878 | https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript"
879 | What tools and techniques do you use for debugging JavaScript code?,"React and Redux
880 | React Devtools
881 | Redux Devtools
882 | Vue
883 | Vue Devtools
884 | JavaScript
885 | Chrome Devtools
886 | debugger statement
887 | Good old console.log debugging
888 | References
889 |
890 | https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
891 | https://raygun.com/blog/javascript-debugging/"
892 | What language constructions do you use for iterating over object properties and array items?,"For objects:
893 |
894 | for loops - for (var property in obj) { console.log(property); }. However, this will also iterate through its inherited properties, and you will add an obj.hasOwnProperty(property) check before using it.
895 | Object.keys() - Object.keys(obj).forEach(function (property) { ... }). Object.keys() is a static method that will lists all enumerable properties of the object that you pass it.
896 | Object.getOwnPropertyNames() - Object.getOwnPropertyNames(obj).forEach(function (property) { ... }). Object.getOwnPropertyNames() is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.
897 | For arrays:
898 |
899 | for loops - for (var i = 0; i < arr.length; i++). The common pitfall here is that var is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces letwhich has block scope and it is recommended to use that instead. So this becomes: for (let i = 0; i < arr.length; i++).
900 | forEach - arr.forEach(function (el, index) { ... }). This construct can be more convenient at times because you do not have to use the index if all you need is the array elements. There are also the every and some methods which will allow you to terminate the iteration early.
901 | 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."
902 | Explain the difference between mutable and immutable objects.,"What is an example of an immutable object in JavaScript?
903 | What are the pros and cons of immutability?
904 | How can you achieve immutability in your own code?
905 | TODO
906 |
907 |
908 | "
909 | 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.
910 |
911 | 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)."
912 | 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.
913 |
914 | If you haven't already checked out Philip Robert's talk on the Event Loop, you should. It is one of the most viewed videos on JavaScript.
915 |
916 | References
917 |
918 | https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
919 | http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/"
920 | 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.
921 |
922 | Function Declaration
923 |
924 | foo(); // 'FOOOOO'
925 | function foo() {
926 | console.log('FOOOOO');
927 | }
928 | Function Expression
929 |
930 | foo(); // Uncaught TypeError: foo is not a function
931 | var foo = function() {
932 | console.log('FOOOOO');
933 | };
934 | References
935 |
936 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function"
937 | "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).
938 |
939 | function foo() {
940 | // All variables are accessible within functions.
941 | var bar = 'bar';
942 | let baz = 'baz';
943 | const qux = 'qux';
944 |
945 | console.log(bar); // bar
946 | console.log(baz); // baz
947 | console.log(qux); // qux
948 | }
949 |
950 | console.log(bar); // ReferenceError: bar is not defined
951 | console.log(baz); // ReferenceError: baz is not defined
952 | console.log(qux); // ReferenceError: qux is not defined
953 |
954 | if (true) {
955 | var bar = 'bar';
956 | let baz = 'baz';
957 | const qux = 'qux';
958 | }
959 | // var declared variables are accessible anywhere in the function scope.
960 | console.log(bar); // bar
961 | // let and const defined variables are not accessible outside of the block they were defined in.
962 | console.log(baz); // ReferenceError: baz is not defined
963 | console.log(qux); // ReferenceError: qux is not defined
964 | var allows variables to be hoisted, meaning they can be referenced in code before they are declared. let and const will not allow this, instead throwing an error.
965 |
966 | console.log(foo); // undefined
967 |
968 | var foo = 'foo';
969 |
970 | console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
971 |
972 | let baz = 'baz';
973 |
974 | console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
975 |
976 | const bar = 'bar';
977 | Redeclaring a variable with var will not throw an error, but 'let' and 'const' will.
978 |
979 | var foo = 'foo';
980 | var foo = 'bar';
981 | console.log(foo); // ""bar""
982 |
983 | let baz = 'baz';
984 | let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
985 | let and const differ in that let allows reassigning the variable's value while const does not.
986 |
987 | // This is fine.
988 | let foo = 'foo';
989 | foo = 'bar';
990 |
991 | // This causes an exception.
992 | const baz = 'baz';
993 | baz = 'qux';
994 | References
995 |
996 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
997 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
998 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"
999 | What are the differences between ES6 class and ES5 function constructors?,
1000 | "Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
1001 |
1002 |
1003 | ",
1004 | What advantage is there for using the arrow syntax for a method in a constructor?,
1005 | 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.
1006 |
1007 | Map
1008 |
1009 | Let say we have an array of names which we need to transform each string to uppercase.
1010 |
1011 | const names = ['irish', 'daisy', 'anna'];
1012 | The imperative way will be as such:
1013 |
1014 | const transformNamesToUppercase = function(names) {
1015 | const results = [];
1016 | for (let i = 0; i < names.length; i++) {
1017 | results.push(names[i].toUpperCase());
1018 | }
1019 | return results;
1020 | };
1021 | transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
1022 | Use .map(transformerFn) makes the code shorter and more declarative.
1023 |
1024 | const transformNamesToUppercase = function(names) {
1025 | return names.map(name => name.toUpperCase());
1026 | };
1027 | transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
1028 | References
1029 |
1030 | https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
1031 | https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
1032 | https://eloquentjavascript.net/05_higher_order.html"
1033 | 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.
1034 |
1035 | Array destructuring
1036 |
1037 | // Variable assignment.
1038 | const foo = ['one', 'two', 'three'];
1039 |
1040 | const [one, two, three] = foo;
1041 | console.log(one); // ""one""
1042 | console.log(two); // ""two""
1043 | console.log(three); // ""three""
1044 | // Swapping variables
1045 | let a = 1;
1046 | let b = 3;
1047 |
1048 | [a, b] = [b, a];
1049 | console.log(a); // 3
1050 | console.log(b); // 1
1051 | Object destructuring
1052 |
1053 | // Variable assignment.
1054 | const o = { p: 42, q: true };
1055 | const { p, q } = o;
1056 |
1057 | console.log(p); // 42
1058 | console.log(q); // true
1059 | References
1060 |
1061 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
1062 | https://ponyfoo.com/articles/es6-destructuring-in-depth"
1063 | "ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?",
1064 | 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.
1065 |
1066 | function curry(fn) {
1067 | if (fn.length === 0) {
1068 | return fn;
1069 | }
1070 |
1071 | function _curried(depth, args) {
1072 | return function(newArgument) {
1073 | if (depth - 1 === 0) {
1074 | return fn(...args, newArgument);
1075 | }
1076 | return _curried(depth - 1, [...args, newArgument]);
1077 | };
1078 | }
1079 |
1080 | return _curried(fn.length, []);
1081 | }
1082 |
1083 | function add(a, b) {
1084 | return a + b;
1085 | }
1086 |
1087 | var curriedAdd = curry(add);
1088 | var addFive = curriedAdd(5);
1089 |
1090 | var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
1091 | References
1092 |
1093 | https://hackernoon.com/currying-in-js-d9ddc64f162e"
1094 | 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.
1095 |
1096 | function putDookieInAnyArray(arr) {
1097 | return [...arr, 'dookie'];
1098 | }
1099 |
1100 | const result = putDookieInAnyArray(['I', 'really', ""don't"", 'like']); // [""I"", ""really"", ""don't"", ""like"", ""dookie""]
1101 |
1102 | const person = {
1103 | name: 'Todd',
1104 | age: 29,
1105 | };
1106 |
1107 | const copyOfTodd = { ...person };
1108 | ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.
1109 |
1110 | function addFiveToABunchOfNumbers(...numbers) {
1111 | return numbers.map(x => x + 5);
1112 | }
1113 |
1114 | const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
1115 |
1116 | const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
1117 |
1118 | const { e, f, ...others } = {
1119 | e: 1,
1120 | f: 2,
1121 | g: 3,
1122 | h: 4,
1123 | }; // e: 1, f: 2, others: { g: 3, h: 4 }
1124 | References
1125 |
1126 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
1127 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
1128 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"
1129 | How can you share code between files?,"This depends on the JavaScript environment.
1130 |
1131 | On the client (browser environment), as long as the variables/functions are declared in the global scope (window), all scripts can refer to them. Alternatively, adopt the Asynchronous Module Definition (AMD) via RequireJS for a more modular approach.
1132 |
1133 | On the server (Node.js), the common way has been to use CommonJS. Each file is treated as a module and it can export variables and functions by attaching them to the module.exports object.
1134 |
1135 | ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments.
1136 |
1137 | References
1138 |
1139 | http://requirejs.org/docs/whyamd.html
1140 | https://nodejs.org/docs/latest/api/modules.html
1141 | http://2ality.com/2014/09/es6-modules-final.html"
1142 | Why you might want to create static class members?,"Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance.
1143 |
1144 | References
1145 |
1146 | https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
1147 | Other Answers
1148 |
1149 | http://flowerszhong.github.io/2013/11/20/javascript-questions.html"
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Front-end Interview Questions Handbook Flashcards
2 |
3 | I decided that I wanted to study for these interview questions on the go, during commutes or while sitting in doctor's offices. So I made some flashcard decks in popular formats.
4 |
5 | Thanks to [Yangshun's Front-end Interview Questions Handbook](https://github.com/yangshun/front-end-interview-handbook) for the material.
6 |
7 | Will be updated as more info is pushed.
8 |
--------------------------------------------------------------------------------
/Studies/Front-end Interview Questions.studies:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twhite96/front_end_interview_questions_flashcards/b9717ac8113bb4f0606eacbc3a588fcd2de9893b/Studies/Front-end Interview Questions.studies
--------------------------------------------------------------------------------
/StudyArch/Front-end Interview Questions.studyarch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twhite96/front_end_interview_questions_flashcards/b9717ac8113bb4f0606eacbc3a588fcd2de9893b/StudyArch/Front-end Interview Questions.studyarch
--------------------------------------------------------------------------------