Skip to content

Latest commit

 

History

History
2020 lines (1573 loc) · 114 KB

BANKI-answers.md

File metadata and controls

2020 lines (1573 loc) · 114 KB
Raw

BANKI: All the questions to prep for interviews

  • Any questions on this list are fair game for technical interviews.
  • Resources where you can find most answers are at the end.
  • Original list without answers, courtesy of https://leonnoel.com/100devs/

Table of Contents

  1. Behavioral
  2. Technical
  3. Questions to ask your interviewer
  4. Whiteboard
  5. Resources

Behavioral

Most of the behavioral questions should be answered in the CAR format. At least three sentences for each question (one for cause, one for action and one for result). When answering begin with "At my last opportunity..." or "At my last company". Don't sell yourself out and say "bootcamp" or "school".

CAR

  • Cause
    • Why did you need to take action?
  • Action
    • Steps you took so solve problem
    • Be positive
    • Don't be humble
  • Result
    • How are you better?

Questions

  • B1) Give me an example of a project or initiative that you started on your own. What prompted you to get started?

    • Cause: At a previous company we had project managers assigned to several different teams where workload would fluctuate quite a bit.
    • Action: I noticed an opportunity to flatten the workload of the PM's, by creating a shared PM pool.
    • Result: This was possible by running a high level kanban of all projects assigned by PM to get visibility to workload. It also allowed knowledge sharing such that it was much easier for a PM to step in on any given team.

  • B2) Tell me about a time you had to work on several projects at once. How did you handle this?

    • Cause: I was working on two large projects for two separate clients that were at different stages of their lifecycle. One project was in production and the other project was in the implementation phase.
    • Action: I decided to send a less experienced colleague to the installation site while I went to do a production check-in on the other project in China. Prior to leaving I briefed my colleague in on the project and told them what to look out for.
    • Result: While in China I had daily calls with my colleague as well as received daily photo reports to review the installation. Both projects end up being financially successful. The tight communication and teamwork is ultimately what allowed it to be so.

  • B3) Describe a situation in which you felt you had not communicated well enough. What did you do? How did you handle it?

    • Cause: I had a direct report working on building a client quote within a spreadsheet template.
    • Action: I explained to them how to use and fill out the template and then left them to finish it.
    • Result: After a few hours I came to see what the final result was and found that they only partially completed it and had many mistakes. What I did then and with subsequent reports was to have them work on the quote in front of me for 30 minutes so that I could guide them and allow them to ask question. I found that technique brought people up to speed more quickly.

  • B4) Tell me about when you had to deal with conflict within your team. How was the conflict solved? How did you handle that? How would you deal with it now?

    • Cause: We had a rollout of shipments going on in which the schedule was tight. For the goods to come in, get assembled and leave the warehouse "orders" needed to be created in our ERP system which was a particular team members responsibility. I requested several times that they be created, but by the day in which they had to be created to not affect timing they were still not done.
    • Action: I gathered the team member along with two others on our team to discuss the issue. I explained the urgency of the matter along with the tasks that needed to be completed and when. I have to admit I had a rather frustrated demeanor. The responsible team member said they couldn't do it. I suggested that they build one order with all of us there and perhaps we could split the work.
    • Result: The orders ended up mostly being done by the responsible team member once they realized I'd provided the information in a clear to follow format. I apologized for for my foul attitude. I learned that I should've had more present and active communication with a team member that is responsible for the next task in the workflow rather than "throwing" the task over the fence per se.

  • B5) Give me an example of a time you had to take a creative and unusual approach to solve coding problem. How did this idea come to your mind? Why do you think it was unusual?

    • Cause:
    • Action:
    • Result:

  • B6) Describe a situation in which you worked diligently on a project and it did not produce the desired results. Why didn't you get the desired results? What did you learn from the experience?

    • Cause:
    • Action:
    • Result:

  • B7) Give an example of an important project goal you reached and how you achieved it.

    • Cause:
    • Action:
    • Result:

  • B8) Describe a situation in which you experienced difficulty in getting others to accept your ideas? What was your approach? How did this work? Were you able to successfully persuade someone to see things your way?

    • Cause:
    • Action:
    • Result:

  • B9) Tell me about a situation when you were responsible for project planning. Did everything go according to your plan? If not, then why and what kind of counteractions did you have to take?

    • Cause: Projects never go exactly to plan! I think one of the worst experiences I had was working on a set of brand new prototypes got a client that had a clear powder coat over steel, which is notoriously hard to produce. I was using a newer supplier to see if they could nail it, but after three tries they could not.
    • Action: I made the call to split some of the more important pieces out to a different supplier which had been successful in the past, but cost significantly more. I then worked with the newer supplier to look at their powder coating process and identify area's that were causing issues (pre-powder cleaning was the main culprit).
    • Result: I was able to deliver 95% of the parts to the client for review and was able to convince them that we were resolving some issues with other pieces and all would be fine. I was able to help the supplier adjust their cleaning process so that when final production started the QC rejection rate went from 75% on the prototypes to less than 5% on production. It sounds like a lot, but for the industry and process it was rather good.

  • B10) Tell me about a situation when you made a mistake at work. What happened exactly and how did you deal with it? What steps did you take to improve the situation?

    • Cause:
    • Action:
    • Result:

  • B11) Tell me about a time when you worked with someone who was not completing his or her share of the work. How did you handle the situation? Did you discuss your concern with your coworker? With your manager? If yes, how did your coworker respond to your concern? What was your manager's response?

    • Cause:
    • Action:
    • Result:

  • B12) Describe a situation when you worked effectively under pressure. How did you feel when working under pressure? What was going on, and how did you get through it?

    • Cause:
    • Action:
    • Result:

  • B13) Tell me about yourself.

    • Cause:
    • Action:
    • Result:

  • B14) Tell me about your experience at 100Devs.

    • 100Devs is an agency with a training program. I worked on several projects both alone and with colleagues to better flesh out my skills. The main tech stack we used with React, Node, Express and MongoDB.

  • b15) What do you know about our company?

    • Cause:
    • Action:
    • Result:

  • B16) Why do you want to work for us?

    • Cause:
    • Action:
    • Result:

  • B17) Why are you interested in this opportunity?

    • Cause:
    • Action:
    • Result:

  • B18) Tell me about your dream job?  What do you really want to do with your career?

    • Cause:
    • Action:
    • Result:

  • B19) Tell me a time when you failed.

    • Cause:
    • Action:
    • Result:

  • B20) What do you read on a regular basis?

    • I tend to go through phases of topics. Recently I've been reading various books on Data Structures & Algorithms along with books about Design/Graphic Design. I'll also typically read about the natural world (plant/animal species identification, geology, environmental issues), history (particularly Pacific Northwest and Japan), architecture and travel writing. I'm a huge fan of our public library system and I regularly use it.

  • B21) What's some critical feedback you've gotten recently?

    • Cause:
    • Action:
    • Result:

  • B22) Do you have any questions?

  • What is the interview process like? What is the timeline?

  • What are some of the challenges for the person in this position?

  • What is a typical day in this position?

  • What is the onboarding process after the offer?

  • Are there training programs available?

Technical Questions

Most of the technical questions should have a three sentence response in the EUE format:

  • Explanation
  • Use
  • Example

HTML

  • T-HTML-1) What does a doctype do?

  • T-HTML-2) How do you serve a page with content in multiple languages?

    • Explanation: By setting the lang attributes on the various elements within the page.
    • Use: The lang attribute can be used on various elements (typically html, p, li...)
    • Example: You can set the whole site as being english by setting the html element <html lang="en"> Or you could set a paragraph as spanish with <p lang="es">
    • Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

  • T-HTML-3) What kinds of things must you be wary of when designing or developing for multilingual sites?

    • Explanation: There are quite a few different nuances to pay attention to including:
      • Including the lang attribute
      • Allowing users to change the language
      • Minimize text in raster based images
      • Text overflow when translated
      • How colors are perceived
      • Date and currency formats
      • Language reading direction
      • Don't concatenate translated strings
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-4) What are data- attributes good for?

    • Explanation: They store data private to the page or application.
    • Use: They were often used for storing extra data in the DOM, but are generally discouraged now.
    • Example: The exception is to add a hook for end to end testing frameworks like Selenium.
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-5) Consider HTML5 as an open web platform. What are the building blocks of HTML5?

    • Explanation:
      • Semantics: Describe the content
      • Connectivity: Communicate with the server
      • Offline and storage: Store data client-side
      • Multimedia: Make audio and video first-class citizens
      • Graphics and effects: Diverse range of presentation options
      • Performance and integration: Speed optimization
      • Device access: Various input and output devices
      • Styling: More sophisticated themes
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-6) Describe the difference between a cookie, sessionStorage and localStorage.

    • Explanation: Cookies can be initiated by the server, have a manually set expiration date are small file size and are sent to the server with HTTP request. Local and session are both initiated by the client, are a relatively large file and aren't sent to the server. The main difference between local and session is that local storage will persist forever until cleared manually.
    • Use: They are all used for client side storage of strings in key-value pairs.
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-7) Describe the difference between <script>, <script async> and <script defer>.

    • Explanation:
      • <script> HTML parsing is blocked, script is fetched and executed immediately.
      • <script async> script fetched in parallel to HTML parsing and executed as soon as it is available.
      • <script defer> script fetched in parallel to HTML parsing and executed when the page has finished parsing.
    • Use:
      • Use async when the script is independent of any other scripts on the page
      • defer is useful when you need to make sure the HTML is fully parsed before executing.
    • Example:
      • async could be used for analytics scripts.
      • A deferred script must not contain document.write
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-8) Why is it generally a good idea to position CSS <link>s within <head> and JS <script>s just before </body>? Do you know any exceptions?

    • Explanation: Putting <link>s in the <head> allows for quick "first meaningful paint". When a page first loads, HTML and CSS are being parsed simultaneously. Conversely <script> tags block HTML parsing while they are being downloaded and executed which can slow down your page. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
    • Exceptions: When your script contains document.write, however, it isn't considered good practice to use document.write. Also, if you need scripts to run on page load it may be beneficial to split them out from your main script and place them in the head.
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-9) What is progressive rendering?

    • Explanation: Techniques used to improve the performance of a webpage to render content for display as quickly as possible.
    • Use: Improving perceived load time
    • Example: Lazy loading of images, Prioritizing visible content (or above-the-fold rendering) and Async HTML fragments
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-10) Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.

    • Explanation: When you want to serve different images to users depending on their device display width.
    • Use: Sending lower resolution to limit data waste and increase performance or sending larger images to a higher resolution display to enhance the UX.
    • Example: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
    • Source: https://www.frontendinterviewhandbook.com/html-questions

  • T-HTML-11) Have you used different HTML templating languages before?

    • I've used nunjucks, haml and markdown. They seem relatively similar and have helpful features.

    • Source: https://www.frontendinterviewhandbook.com/html-questions

    • Yes, I have used EJS. The popular templating languages include Ejs, Pug, Mustache, HandlebarsJS, Jinja2, and Blade.

    • Explanation: Template engines are mostly used for server-side applications. When you build a server-side application with a template engine, it allows you to embed some variables and features inside the HTML tags. The template engine replaces the variables in a template file with actual values, and displays this value to the client, which gives your application the flexibility of diplaying data dynamically. For a server-side application written with NodeJS runtime, you can use a templating engine like Embedded JS.

    • Use: With server-side applications that need to display dynamic content.

    • Example: <% if (user) { %>

      <%= user.name %>

      <% } %>

    • Source: https://www.frontendinterviewhandbook.com/html-questions https://betterprogramming.pub/templating-languages-to-use-instead-of-html-eb3682443958

CSS

  • T-CSS-1) What is CSS selector specificity and how does it work?

    • Explanation: The means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
    • Use: Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
    • Example: A selector of #id .class tag would have 111 points as id's count for 100, classes for 10 and tags 1.
    • Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

  • T-CSS-2) What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

    • Explanation: "Normalize" alters the default styles of various browser to match each other. "Reset" will remove the browsers default styles so you are starting from scratch.
    • Use: Applying one or the other is done to try and make websites visually consistent across different browsers. I prefer to use a mix of both. Starting with the normalize to keep it conscise and then add some elements like anchors and headers with a reset. Going full "nuke" is often unnecessary and creates a larger, harder to debug file.
    • Example:

Normalize:

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Reset:

html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

Source: https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e

  • T-CSS-3) Describe floats and how they work.

    • Explanation: Floats are a positioning property where the element that is floated will be removed from the flow of the page and affect the elements around it. A parent element will collapse to zero height if it contains only floated elements, to fix this it was common to use a .clearfix hack.
    • Use: It was used prior to flex and grid to layout pages in a more flexible manner.
    • Example: You could float three elements left and give them widths of 33% to create three even width columns.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-4) Describe z-index and how stacking context is formed.

    • Explanation: The z-index property in CSS controls the vertical stacking order of elements that overlap. A stacking context is an element that contains a set of layers. The z-index values of its children are set relative to that element rather than to the document root. Layers outside of that context can't sit between layers within it.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-5) Describe BFC (Block Formatting Context) and how it works.

    • Explanation: A BFC is an HTML box that satisfies at least one of the following conditions:
      • The value of float is not none.
      • The value of position is neither static nor relative.
      • The value of display is table-cell, table-caption, inline-block, flex, or inline-flex, grid, or inline-grid.
      • The value of overflow is not visible.
    • Use: Knowing how to establish a block formatting context is important, because without doing so, the containing box will not contain floated children.
    • Example: Without forming a BFC you could have content of a float that is taller than the content alongside it. The border of the parent element could then "cut-through" the floated box.
    • Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

  • T-CSS-6) What are the various clearing techniques and which is appropriate for what context?

    • Explanation:
      • Empty div method
      • Clearfix method
      • overflow: auto or overflow: hidden method
    • Use: .clearfix utility class is probably the best method to use in general as it doesn't take long to construct and doesn't suffer from clipping issues like the overflow methods.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-7) Explain CSS sprites, and how you would implement them on a page or site.

    • Explanation: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.
    • Use: Browsers limit the number of concurrent requests a site can make so leading several images with a single HTTP request helps increase page load speed.
    • Example: An example would be combining press logo's for Wired, NY Times and The Washington Post into a single image file. Then on the site, with CSS, placing the file three times and moving/cropping it to display the applicable logo.
    • Source: https://css-tricks.com/css-sprites/

  • T-CSS-8) How would you approach fixing browser-specific styling issues?

    • Explanation: There are a handful of ways to solve the issue such as browser specific stylesheets, using a library like bootstrap, etc. MY preference would be to use a combination normalize/reset style sheet. I'd rather use a combination as going full nuke with a reset isn't necessary and makes it a little harder to debug.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-9) How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

    • Explanation: My preference is to try and build lightweight simple websites that incorporate progressive enhancement.
    • Use: Build the base level of HTML/CSS with semantics and accessibility in the forefront you get a site that works well on feature-constrained browsers. I would then add any CSS on JavaScript enhancements deliberately, checking caniuse.com and using vendor prefixs and polyfills if required.
    • Example: Instead of filling the site with <div> using more semantically appropriate tags like <section> <aside> <article> <header> <footer>
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-10) What are the different ways to visually hide content (and make it available only for screen readers)?

    • Explanation:
      • Make the element have a size of zero width: 0; height: 0
      • Absolute position off screen position: absolute; left: -99999px
      • Text indent off screen if within block element text-indent: -9999px
      • aria-label which will read the string given to the attribute.
    • Use: I typically absolutely position the element off screen as it covers the most scenarios.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-11) Have you ever used a grid system, and if so, what do you prefer?

    • Explanation: I typically use a 12 column "grid" system when doing my initial web layout.
    • Use: I find that it works well for laying out the average website and giving the site some visual consistency. When if comes to coding the site I find it helps speed up the layout immensely.
    • Source: https://www.flux-academy.com/blog/how-to-use-a-grid-in-web-design

  • T-CSS-12) Have you used or implemented media queries or mobile specific layouts/CSS?

    • Explanation: I use them quite frequently.
    • Use: I use them on every website and typically build mobile first. The breakpoints and media queries are then used to convert the layout from mobile to desktop.
    • Example: Some examples is changing a bunch of cards from being a single column stack on mobile to a three column layout on desktop.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-13) Are you familiar with styling SVG?

    • Explanation: Yes there are a few ways to style them including inline CSS, embedded CSS or an external style sheet. Basic coloring can be done with the fill and stroke attributes.
    • Example:
    <rect width="100" height="100" stroke="blue" fill="purple" />

  • T-CSS-14) Can you give an example of an @media property other than screen?

    • Explanation & Use: There are four types:
      • all - for all media type devices
      • print - for printers
      • speech - for screenreaders that "reads" the page out loud
      • screen - for computer screens, tablets, smart-phones etc.
    • Example: An example of using print and making all the text black:
    @media print {
  body {
    color: black;
  }
}

  • T-CSS-15) What are two "gotchas" for writing efficient CSS?

    • Explanation:
      • Browsers match selectors from rightmost (key selector) to left. The shorter the length of the chain the faster the browser can find a match. Avoid using tag and universal selectors for your key selector.
      • Avoid using styles that trigger reflow.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-16) What are the advantages/disadvantages of using CSS preprocessors?

    • Explanation: Some advantages would be:

      • The code is easier to maintain
      • More efficient to write with nested selectors
      • Mixins can be used for repeated styles
      • Ability to split into different files

      Disadvantages would be:

      • Additional tooling is required
      • You aren't able to use the most current features of standard CSS

    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-17) Describe what you like and dislike about the CSS preprocessors you have used.

  • T-CSS-18) How would you implement a web design comp that uses non-standard fonts?

  • T-CSS-19) Explain how a browser determines what elements match a CSS selector.

    • Explanation: Browsers match selectors from rightmost (key selector) to left.
    • Example: For example with this selector p span, browsers firstly find all the <span> elements and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-20) Describe pseudo-elements and discuss what they are used for.

  • T-CSS-21) Explain your understanding of the box model and how you would tell the browser, through CSS, to render your layout in different box models.

    • Explanation: 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 and optional surrounding padding, border, and margin areas.
    • Use: The standard box model calculates box size by taking a specified height and width, then adding the padding and border. However to change to the alternative box model you would set box-sizing: border-box which allows you to set the box size with height and width.
    • Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model

  • T-CSS-22) What does * { box-sizing: border-box; } do? What are its advantages?

  • T-CSS-23) What is the CSS display property and can you give a few examples of its use?

    • Explanation & Use: The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
    • Example: display: block would make the element consume the whole line width. display: grid would allow you to layout children in a grid system. If you wanted three columns you could pair it with something like grid-template-columns: 1fr 1fr 1fr
    • Source: https://developer.mozilla.org/en-US/docs/Web/CSS/display

  • T-CSS-24) What's the difference between inline and inline-block?

  • T-CSS-25) What's the difference between a relative, fixed, absolute and static positioned element?

    • Explanation:
      • Relative - Position is relative to it's original static position. Original space on the page is preserved.
      • Fixed - Element removed from page flow and placed in spot relative to viewport. It won't move when scrolled.
      • Absolute - Element removed from page flow and positioned relative to it closest "positioned" ancestor. Original space on the page is not preserved
      • Static - The default position. top, right, bottom, left and z-index properties do not apply.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-26) What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

    • Bootstrap - It takes a while to get the latest CSS features added. Your sites end up looking very similar to others.
    • Tailwind - The HTML can feel very cluttered. Reusing styles is a bit clunky.

  • T-CSS-27) Have you played around with the new CSS Flexbox or Grid specs?

    • Explanation: I have used both flexbox and grid and like to employ both of them.
    • Use: I find grid to be useful for the top level page layout and any elements which have a typical grid layout. I prefer using flexbox for sections and other elements which don't need a rigid grid alignment.
    • Example: If I had something like a tic-tac-toe board I would use grid as it is easy to get the boxes to align and be the same size. If I had some sort of information card with multiple pieces of information I would likely use flexbox.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-28) Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?

    • Explanation: Making a website responsive means the some elements will respond by adapting its size or other functionality according to the device's screen size. A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later.
    • Use: You would use media queries to make the above changes at certain screen size breakpoints.
    • Example: An example of mobile first and responsive would be:
.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

  • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-29) How is responsive design different from adaptive design?

    • Explanation: Both responsive and adaptive design attempt to optimize the user experience across different devices.
    • Use: Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Instead of one flexible design, adaptive design detects the device then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. I believe responsive is the best approach to provide a great experience for all users.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

  • T-CSS-30) Have you ever worked with retina graphics? If so, when and what techniques did you use?

    • Explanation: Retina is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using highest resolution images will have an impact on page load times.
    • Use: To overcome this problem, we can use responsive images, as specified in HTML5 with the srcset attribute.
    • Example:
    <img
  src="/images/test-1600.jpg"
  srcset="/images/test-400.jpg 400w, /images/test-800.jpg 800w, /images/test-1200.jpg 1200w"
/>

  • T-CSS-31) Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

    • Explanation: translate() is a value of CSS transform. transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. translate() would be the more efficient solution with shorter paint times. If you do not want the original space of the element preserved you would want to use absolute positioning.
    • Source: https://www.frontendinterviewhandbook.com/css-questions/

Javascript

  • T-JS-1) Explain event delegation
    • Explanation: Setting an event listener on a parent element and having events that happen on a child element bubble up to the parent.
    • Use: When you want some code to run when the user interacts with any one of a large number of child elements.
    • Example:
<div id="container">
  <div class="tile"></div>
</div>
<script>
  container.addEventListener('click', (event) => (event.target.style.backgroundColor = bgChange()));
</script>

Source: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation

  • T-JS-2) Explain how this works in JavaScript
    • Explanation: this references an object. When inside of a constructor function or class it will reference the object on instantiation.
    • Use: It is used to assign properties and values to an object on instantiation.
    • Example:
class MyThing {
  constructor(passThisIn) {
    this.passThisIn = passThisIn;
  }
}

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

  • T-JS-3) Explain how prototypal inheritance works
    • Explanation: All JavaScript objects have a __proto__ property that is a reference to another object, which is called the object's "prototype". If a property is accessed on an object, but not found, the JavaScript engine check's that object prototype. If again it's not found, it checks that prototype's prototype on up the chain until it reaches the top of the chain.
    • Use: It can help reduce redundant code.
    • Example:
function Parent() {
  this.name = 'Parent';
}
Parent.prototype.greet = function () {
  console.log('Hello from ' + Parent.name);
};
const child = Object.create(Parent.prototype);
child.cry = function () {
  console.log('waaaaaahhhh!');
};
child.cry();
// waaaaaahhhh!
child.greet();
// hello from Parent
console.log(child.constructor);
// ƒ Parent() {
// this.name = 'Parent';
// }
console.log(child.constructor.name);
// 'Parent'

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions

  • T-JS-4) What do you think of AMD vs CommonJS?

    • Explanation: I would actually prefer to use ESM (ECMAScript Modules) due to it's simple syntax and async nature. Historically CommonJS was used in the back end and runs synchronous and AMD was used in the front end and runs asynchronous.
    • Use: CJS has been used in node.js for a while, but the current version of node now allows the use of EMS.
    • Source: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm

  • T-JS-5) Explain why the following doesn't work as an IIFE: function foo(){ }();. What needs to be changed to properly make it an IIFE?

    • Explanation: The parser reads it as two seperate statements. First the function declaration function foo(){ } and then a blank function call attempt (); The best way to fix this would be to add another set of parenthesis wrapping the function declaration (function foo(){ })() This changes it from a function declaration to a function expression.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions

  • T-JS-6) What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

    • Explanation:
      • null: the value is intentionally absent (points to nothing in memory).
      • undefined: not yet assigned a value or not yet declared.
      • undeclared: improperly declared without let/const/var
    • Use: null can be used to assign the primitive value of null to a variable. undeclared throws an error where as null and undefined can be checked with a conditional
    • Example: null and undefined can be checked using strict equality ===. Undeclared will throw it's own error so you could use try...catch
    • Source: https://www.30secondsofcode.org/articles/s/javascript-undeclared-undefined-null

  • T-JS-7) What is a closure, and how/why would you use one?

    • Explanation: Closure allows you to use an outer function’s scope (go into a parent, grandparent function, etc.) from within an inner function. In JavaScript a closure is created every time a function is created.
    • Use: It allows you to combine data with the function that will operate on that data. It is similar to OOP.
    • Example:
function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() {
    // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function
  }
  displayName();
}
init();

  • Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

  • T-JS-8) Can you describe the main difference between a .forEach() loop and a .map() loop and why you would pick one versus the other?

    • Explanation: .forEach() executes a callback function on each element, but does not return a value. .map() executes a callback function on each element and "maps" the result to a new array. The new array is returned.
    • Use: If you need the result and don't want to mutate the original array, use map. If you only need to iterate over the array then forEach can be used.
    • Example: .forEach():
const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
  // Do something with num and/or index.
});
// doubled = undefined

.map():

const a = [1, 2, 3];
const doubled = a.map((num) => {
  return num * 2;
});
// doubled = [2, 4, 6]

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-9) What's a typical use case for anonymous functions?

    • Explanation: I've typically encountered them as callback functions that don't need to be used anywhere else.
    • Use: Essentially when you don't need a named function and the function is bound to some other action.
    • Example:
setTimeout(function () {
  console.log('Hello world!');
}, 1000);

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-10) How do you organize your code? (module pattern, classical inheritance?)

  • T-JS-11) What's the difference between host objects and native objects?

    • Explanation: Native objects are part of the language as defined by ECMAScript specification. Host objects are those provided by the runtime (browser or Node).
    • Example: Some native objects are String, Math, RegExp, and Object. A couple of host objects are window and console
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-12) What is the difference between: function Person(){}, var person = Person(), and var person = new Person()?

    • Explanation & Use:
      • function Person(){} is likely being used as a constructor.
      • var person = new Person()is instantiated a new Person object as person.
      • var person = Person() is not correct and would likely return undefined. To create a new instance you would need to use the new operator as above.
    • Example:
function Person(name) {
  this.name = name;
}

var person = Person('John');
console.log(person); // undefined
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined

var person = new Person('John');
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-13) What's the difference between .call() and .apply()?

  • T-JS-14) Explain Function.prototype.bind.

    • Explanation: Creates a new function that, when called, has its this keyword set to the provided value.
    • Use: For binding the value of this in methods of classes that you want to pass into other functions. This is frequently done in React components.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-15) When would you use document.write()?

  • T-JS-16) What's the difference between feature detection, feature inference, and using the UA string?

    • Explanation:
      • Feature Detection: Working out whether a browser supports a certain block of code, and running different code depending on whether it does, so that the browser can provide a working experience rather crashing/erroring in some browsers.
      • Feature Inference: Checks for a feature just like feature detection, but uses another function because it assumes it will also exist. Feature Detection is the better approach.
      • UA String: A browser-reported string that allows the network protocol peers to identify various properties of the system. It's tricky to parse and can be spoofed so it's best to avoid this method.
    • Example: Using feature detection:
if ('geolocation' in navigator) {
  // Can use navigator.geolocation
} else {
  // Handle lack of feature
}

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-17) Explain Ajax in as much detail as possible.

    • Explanation: 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.
    • Use: 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 use JSON instead of XML, due to the advantages of JSON being native to JavaScript.
    • Example: The fetch API is typically used nowadays for asynchronous communication.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-18) What are the advantages and disadvantages of using Ajax?

    • Advantages:
      • Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page.
      • Reduce connections to the server since scripts and stylesheets only have to be requested once.
      • State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded.
    • Disadvantages:
      • Dynamic webpages are harder to bookmark.
      • Does not work if JavaScript has been disabled in the browser.
      • Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
      • JavaScript will have to be parsed and executed on the browser, and low-end mobile devices might struggle with this.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-19) Explain how JSONP works (and how it's not really Ajax).

    • Explanation: 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.
    • Use: JSONP can be unsafe as it can do everything else JavaScript can so you need to trust the provider of data. These days, CORS is the recommended approach and JSONP is seen as a hack.
    • Example:
<!-- https://mydomain.com -->
<script>
  function printData(data) {
    console.log(`My name is ${data.name}!`);
  }
</script>

<script src="https://example.com?callback=printData"></script>

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions

  • T-JS-20) Have you ever used JavaScript templating? If so, what libraries have you used?

    • Explanation: The only one I've used is JSX in React, which I don't think it quite javascript templating.
    • Use: It's more of an extension to ECMAScript that allows you to easily structure components with familiar HTML syntax.
    • Example:
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

  • Source: https://reactjs.org/docs/introducing-jsx.html

  • T-JS-21) Explain "hoisting".

    • Explanation: It's the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. Think of it as moving the code up to the top. Note that the assignment stays where it is despite this.
    • Use: Allows you to execute code before they're declared. Function declaration and var are initialized before delaration whereas const, let, and function expressions are not. This means the first two can be accessed globally and the last 3 only after they've been declared.
    • Example:
eat()  //this hoisting works b.c it's a function declaration below

function eat(){
  console.log('eat')
 }

  • Source: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

  • T-JS-22) Describe event bubbling.

    • Explanation & Use: When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. The most deeply nested element that caused the event is called a target element, accessible as event.target.
    • Example:
<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<form onclick="alert('form')">
  FORM
  <div onclick="alert('div')">
    DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-23) What's the difference between an "attribute" and a "property"?

    • Explanation & Use: Attributes are defined on the HTML markup but properties are defined on the DOM. An attribute is the initial state when rendered in the DOM. A property is the current state.
    • Example:
const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello

Notice how the property updates after adding "World" to the input.

console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!
1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-27) Explain the same-origin policy with regards to JavaScript.

    • Explanation: The same-origin policy prevents JavaScript from making requests across domain boundaries only allowing one webpage to access another webpage if they have the same origin . 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.
    • Source: https://en.wikipedia.org/wiki/Same-origin_policy

  • T-JS-28) Make this work: duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

    • Example:
function duplicate(arr) {
  return arr.concat(arr);
}

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-29) Why is it called a ternary expression, what does the word "ternary" indicate?

    • Explanation: "Ternary" means "composed of three parts", as the expression accepts 3 operands. First, a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.
    • Use: Can simplify code over if...else statements.
    • Example:
const age = 26;
const beverage = age >= 21 ? 'Beer' : 'Juice';

  • Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

  • T-JS-30) What is "use strict";? what are the advantages and disadvantages to using it?

    • Explanation: 'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript. 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.

    • Use:

      • Advantages:

        • Makes it impossible to accidentally create global variables.
        • Makes assignments which would otherwise silently fail to throw an exception.
        • Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).
        • Requires that function parameter names be unique.
        • this is undefined in the global context.
        • It catches some common coding bloopers, throwing exceptions.
        • It disables features that are confusing or poorly thought out.

      • Disadvantages:

        • Many missing features that some developers might be used to.
        • No more access to function.caller and function.arguments.
        • Concatenation of scripts written in different strict modes might cause issues.

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/#what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it

  • T-JS-31) 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

    • Example:
function fizzBuzz() {
  for (let i = 1; i <= 100; i++) {
    if (i % 5 === 0 && i % 3 === 0) {
      console.log(i, 'FizzBuzz');
    } else if (i % 3 === 0) {
      console.log(i, 'Fizz');
    } else if (i % 5 === 0) {
      console.log(i, 'Buzz');
    }
  }
}

  • T-JS-32) Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?

    • Explanation: Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-33) 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?

  • T-JS-34) Explain what a single page app is and how to make one SEO-friendly.

    • Explanation: SPA's render the page client side instead of server side. The server sends the initial page, but subsequent changes to the page do not initiate a page refresh. The data on the page is typically updated via an AJAX request which is then used to dynamically update the page via JavaScript.
    • Use: A reason to use a SPA is that it feels more responsive to the user, fewer HTTP request are made so assets don t have to be downloaded multiple times and there is a clear separation between client and server. As long as the API is the same either side can be modified without affecting the other. Some downsides would be heavier initial page load, additional server config needed and SEO can be more difficult. To overcome the SEO problem you could render your pages server side or use a service such as Prerender.
    • Source: https://github.com/grab/front-end-guide

  • T-JS-35) What is the extent of your experience with Promises and/or their polyfills?

    • Explanation: I've used Promises extensively as they are a main component in modern asynchronous JavaScript. They are used for operations that will produce a resolved value in the future. I haven't used polyfills much as they aren't required much these days.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-36) What are the pros and cons of using Promises instead of callbacks?

    • Pros:
      • Avoid callback
      • Easy to write sequential asynchronous code that is readable with .then().
      • Easy to write parallel asynchronous code with Promise.all().
      • With promises, these scenarios which are present in callbacks-only coding, will not happen:
        • Call the callback too early
        • Call the callback too late (or never)
        • Call the callback too few or too many times
        • Fail to pass along any necessary environment/parameters
        • Swallow any errors/exceptions that may happen
    • Cons:
      • Slightly more complex code (debatable).
      • Older browsers may require a polyfill.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-37) What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

  • T-JS-38) What tools and techniques do you use debugging JavaScript code?

  • T-JS-39) What language constructions do you use for iterating over object properties and array items?

  • T-JS-40) Explain the difference between mutable and immutable objects.

    • Explanation: A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created.
    • Use: Immutable objects make it easier to detect changes, make programs less complicated to think about and sharing is easy with references. If immutable objects are setup incorrectly though it could lead to poor performance due to multiple copies being made.
    • Example: To make an object immutable you could Object.freeze() which prevents new properties from being added and existing properties from being altered or removed.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-41) Explain the difference between synchronous and asynchronous functions.

    • Explanation: 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.
    • Use: Note that JavaScript is synchronous and it's actually the browser and Node.js that's actually asynchronous (think callbacks and promises)
    • Example:
function f1() {
  // Some code   //synchronous
}
function main() {
  console.log('main');
  setTimeout(f1, 0); // async, with a callback of f1 function
  f2();
}

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-42) What is event loop? What is the difference between call stack and task queue?

    • Explanation: 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.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-43) Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

    • Explanation: The former is a function declaration while the latter is a function expression.
    • Use: The function declaration is hoisted and can therefore be accessed from anywhere, whereas the function expression can only be accessed after it's been defined.
    • Example:
    console.log(name('Curtis')) // can be accessed before initialization (hoisted)

 function name (str){ // function declaration
    return str
 }

 console.log(nameTwo('Curtis')) // cannot be accused before initialization (not hoisted)

 const nameTwo = function (str) { // expression
    return str
 }

  • T-JS-44) What are the differences between variables created using let, var or const?

    • Explanation: 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).
    • Use: var is hoisted and can be redeclared, whereas let and const cannot be redeclared. let and var can be reassigned, but const cannot be.
    • Example:
if (true) {
  var thing1 = 'bar';
  let thing2 = 'baz';
  const thing3 = 'qux';
}

// var declared variables are accessible anywhere in the function scope.
console.log(thing1); // bar
// let and const defined variables are not accessible outside of the block they were defined in.
console.log(thing2); // ReferenceError: baz is not defined
console.log(thing3); // ReferenceError: qux is not defined

  • Source: https://www.frontendinterviewhandbook.com/javascript-questions/

  • T-JS-45) What are the differences between ES6 class and ES5 function constructors?

    • Explanation & Example: Simple constructors are fairly similar in length and ease of use. The main difference in the constructor comes when using inheritance. If we want to create a Student class that subclasses Person and add a studentId field, this is what we have to do:
// ES5 Function Constructor
function Student(name, studentId) {
  // Call constructor of superclass to initialize superclass-derived members.
  Person.call(this, name);

  // Initialize subclass's own members.
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// ES6 Class
class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  },
};

  • Source: https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/

  • T-JS-47) What advantage is there for using the arrow syntax for a method in a constructor?

    • Explanation & Use: The main advantage is that the value of this gets set at the time of the function creation and can't change after that. This is helpful in React class components when for example you may pass a click handler down into a child component as a prop.
    • Example:
    const Person = function (firstName) {
  this.firstName = firstName;
  this.sayName1 = function () {
    console.log(this.firstName);
  };
  this.sayName2 = () => {
    console.log(this.firstName);
  };
};
const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// The regular function can have its 'this' value changed, but the arrow function cannot
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
john.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
john.sayName2.bind(dave)(); // John

  • T-JS-48) What is the definition of a higher-order function?

    • Explanation: 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.
    • Use: To abstract some operation that is performed repeatedly.
    • Example: 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.
    • Source: https://www.frontendinterviewhandbook.com/javascript-questions#what-is-the-definition-of-a-higher-order-function

  • T-JS-49) Can you give an example for destructuring an object or an array?

    • Explanation: Destructuring is an expression that enables a convenient way to extract properties from Objects and values from Arrays and place them into distinct variables.
    • Use: It's a more concise way to assign values to variables and can be particularly handy when passing function arguments.
    • Example: An example of destructing a simple object:
// Variable assignment
const o = { p: 42, q: true };
const { p, q } = o;

console.log(p); // 42
console.log(q); // true
// Prior to ES2015
'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!';

// Using template literals
`Hi, my name is ${person.name} and I am ${person.age} years old!`;
// regular function
function sum3(x, y, z) {
  return x + y + z;
}

// curried version
function sum3(x) {
  return (y) => {
    return (z) => {
      return x + y + z;
    };
  };
}
// Copying an object
const person = {
  name: 'Todd',
  age: 29,
};

const copyOfTodd = { ...person };
// file square.js
export { name, draw, reportArea, reportPerimeter };

// file index.js
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

Javascript General

  • T-JSGeneral-1) Can you name two programming paradigms important for JavaScript app developers?

  • T-JSGeneral-2) What is functional programming?

  • T-JSGeneral-3) What is the difference between classical inheritance and prototypal inheritance?

  • T-JSGeneral-4) What are the pros and cons of functional programming vs object-oriented programming?

  • ** Functional programming:** Pros:

  • Leads to reliable results without side effects

  • Has an emphasis on efficiency and optimisation

  • Very reusable Cons:

  • Newer paradigm so not easy to find documentation

  • Can be harder to read due to the large number of functions

  • File structure can be more difficult to organise

  • ** Object-oriented programming:** Pros:

  • Easy to understand the basic concept of objects and methods

  • Easy to understand due to imperative style (like a simple set of instructions) Cons:

  • OOP models can become very complex

  • Programmers need to have brilliant designing skill and programming skill along with proper planning because using OOP is little bit tricky

  • Source: https://farida-alv04.medium.com/functional-vs-object-oriented-programming-pros-and-cons-cecfbb4054ca

  • T-JSGeneral-5) What are two-way data binding and one-way data flow, and how are they different?

    • Explanation:
      • Two-way data: UI fields are bound to model data dynamically. When a UI field changes, the model data changes with it and vice-versa. Side effects can occur.
      • One-way data: The model is the single source of truth. Changes in the UI signal user intent to the model (or “store” in React). Only the model has the access to change the app’s state. The effect is that data always flows in a single direction. It is deterministic meaning no side effects will occur.
    • Use: React is a popular framework which uses one-way data flow. Angular on the other hand uses two-way data binding.
    • Source: https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95

  • T-JSGeneral-6) What is asynchronous programming, and why is it important in JavaScript?

    • Explanation: It allows you to run blocking code outside of the single thread so that the program can continue to run while it waits for the blocking code to complete. Javascript is synchronous by nature, but the runtime (browser or node) has an event loop which allows developers to write asynchronous programs.
    • Use: It is important for user interfaces, where you are waiting for user input, and for network requests, where you are waiting for some data back from a server.
    • Example: Using async...await and fetch to fetch resources from an API is a common implementation of async programming.
    • Source: https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95

Node

  • T-Node-1) What is Node.js? Where can you use it?

    • Node.js is a single-threaded, open-source, cross-platform runtime environment used to build server-side and networking applications. It uses event-driven, non-blocking I/O architecture, which makes it efficient and suitable for real-time applications.
    • Source: https://kinsta.com/knowledgebase/what-is-node-js/

  • T-Node-2) Why use Node.js?

    • Explanation: It uses fewer resources and memory because it is single threaded, it has wide adoption with many open source packages available, it is multi-platform and it simplifies the full stack as you can use just one language: Javascript.
    • Use: It's best used for real time applications that aren't data intensive. For programs that require more data processing a multi-threaded language like Java is a better choice.
    • Source: https://kinsta.com/knowledgebase/what-is-node-js/

  • T-Node-3) What are the features of Node.js?

    • Explanation: Node innately offers valuable resources that standalone JavaScript environment doesn’t allow, such as access to http and fs modules.

    • Use: Through node we have access to the V8 Engine via JavaScript, where we have browser functionalities in our JavaScript environment. We can access packages via npm to install established libraries, or require pre-established modules for things like server creation and file storage.

    • Example: const http = require('http') Allows us to access Node.js web server module (ES6) so we can use http methods such as createServer.

      const fs = require('fs'); Allows us actions such as reading and writing to files in a file system

    • Source: https://nodejs.dev/en/learn/the-nodejs-fs-module https://nodejs.dev/en/learn/the-nodejs-http-module

  • T-Node-4) How do you update NPM to a new version in Node.js?

    • Explanation: With Mac or Linux systems it is rather easy just type the command npm install -g npm@latest into the terminal to update npm. With Windows it's a little more complex as you will need to either modify the Window's installation PATH or remove the npm files from the nodejs install directory then update npm in the terminal.
    • Source: https://docs.npmjs.com/try-the-latest-stable-version-of-npm

  • T-Node-5) Why is Node.js Single-threaded?

  • T-Node-6) Explain callback in Node.js.

  • T-Node-7) What is callback hell in Node.js?

    • Explanation: This is a big issue caused by coding with complex nested callbacks. Imagine each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain. Also, if there is an error in one function, then all other functions get affected.
    • Use: This should be avoided.
    • Example:
    fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})   //note this long line of stacking brackets is often a tell of callback hell
    • Source:

  • T-Node-8) How do you prevent/fix callback hell?

    • Explanation: One of the most common ways is to use promises (an object that represents the eventual completion or failure of an async operation and its value). Once each step is finished and we have our value, we can run then() method to call the async callback or if it fails we can catch an error. We could also just keep our code shallow and modularize (make each block of code do one thing only).
    • Example:
    houseOne()
	.then(data=>console.log(data)
	.then(houseTwo)
	.then(data=>console.log(data)
	.then(houseTwo)

  • T-Node-9) Explain the role of REPL in Node.js.

    • Explanation: The Node.js Read-Eval-Print-Loop (REPL) is an interactive shell that processes Node.js expressions. The shell reads JavaScript code the user enters, evaluates the result of interpreting the line of code, prints the result to the user, and loops until the user signals to quit.
    • Use: The REPL is bundled with every Node.js installation and allows you to quickly test and explore JavaScript code within the Node environment without having to store it in a file. Entering "node" in the terminal starts the REPL
    • Example:
    sammy@b6755984:~$ node     //press enter on "node" to get ">", indicating the start
Welcome to Node.js v14.19.0.
Type ".help" for more information.
> 2+2    //used REPL to evaluate simple math
4

  • T-Node-10) Name the types of API functions in Node.js.

  • T-Node-11) What are the functionalities of NPM in Node.js?

    • Explanation: NPM serves two main purposes; being an online repository of open-source Node.js projects and a command line utility for interacting with said repository.
    • Use: Typically it is used to install packages, manage versions and manage project dependencies.
    • Source: https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/

  • T-Node-12) What is the difference between Node.js and Ajax?

  • T-Node-13) What are “streams” in Node.js? Explain the different types of streams present in Node.js.

    • Explanation: Streams are objects that enable you to read data or write data continuously.
    • Use: There are four types of streams:
      • Readable – Used for reading operations
      • Writable − Used for write operations
      • Duplex − Can be used for both reading and write operations
      • Transform − A type of duplex stream where the output is computed based on input
    • Source: https://www.simplilearn.com/tutorials/nodejs-tutorial/nodejs-interview-questions

  • T-Node-14) Explain chaining in Node.js.

    • Explanation: Promise chaining allows you to chain together multiple asynchronous tasks in a specific order.
    • Use: Chaining is great when you have complex code that has any number of asynchronous tasks that need to be performed after the completion of a different asynchronous task.
    • Example: The .then handler is used for promise chaining. After the initial promise resolves, the .then handler creates a new promise based on the result of the previous promise, and so on and so forth.
    • Source: https://javascript.info/promise-chaining

  • T-Node-15) What are Globals in Node.js?

    • Explanation: Node.js Global Objects are the objects that are available in all modules. Global Objects are built-in objects that are part of the JavaScript and can be used directly in the application without importing any particular module.
    • Use: Common built-in modules, functions, strings and objects used widely in Node.
    • Example: setTimeout() is a global function used to run a callback after at least x milliseconds:
function printHello() {
  console.log('Hello World!');
}
//call printHello() after 2 seconds
setTimeout(printHello, 2000);

  • Source: https://www.tutorialspoint.com/nodejs/nodejs_global_objects.htm

  • T-Node-16) What is Event-driven programming?

    • Explanation: Event-driven programming is a programming paradigm where the control flow of the program is determined by occurance of events. The events are usually user interactions with the website such as clicking buttons, filling out forms, etc.
    • Use: The events are monitored by code known as event listeners.
    • Example: element.addEventListener('click', function) will call a function upon clicking element
    • Source: https://www.computerhope.com/jargon/e/event-driven-prog.htm

  • T-Node-17) What is Event loop in Node.js? And How does it work?

    • Explanation: The Event loop handles all async callbacks. We can attach listeners to events, and when a said event fires, the listener executes the callback we provided.
    • Use: Whenever we call setTimeout, http.get and fs.readFile, Node.js runs the operation and continues to run other code without waiting for the output. When the operation is finished, it receives the output and runs our callback function. All the callback functions are queued in an loop, and will run one-by-one when the response has been received.
    • Source: https://vigowebs.medium.com/frequently-asked-node-js-interview-questions-and-answers-b74fa1f20678

  • T-Node-18) What is the purpose of module.exports in Node.js?

  • T-Node-19) What is the difference between Asynchronous and Non-blocking?

    • Explanation: Asynchronous literally means not synchronous. HTTP requests which are asynchronous, means we are not waiting for the server response. The program continues with other code blocks and deals with the server response when it is received. The term Non-Blocking is widely used with I/O. For example non-blocking read/write calls return with whatever they can do and expect caller to execute the call again. Read will wait until it has some data and put the calling thread to sleep.

  • Source: https://vigowebs.medium.com/frequently-asked-node-js-interview-questions-and-answers-b74fa1f20678

  • T-Node-20) What is Tracing in Node.js?

    • Explanation: Tracing provides a mechanism to collect tracing information generated by V8, Node core and userspace code in a log file.
    • Use: Tracing can be enabled by passing the --trace-events-enabled flag when starting a Node.js application. The set of categories for which traces are recorded can be specified using the --trace-event-categories flag followed by a list of comma separated category names. By default the node and v8 categories are enabled. Log files can be opened in the chrome://tracing tab of Chrome.
    • Source: https://vigowebs.medium.com/frequently-asked-node-js-interview-questions-and-answers-b74fa1f20678

  • T-Node-21) How will you debug an application in Node.js?

  • T-Node-22) Difference between setImmediate() and setTimeout()?

    • Explanation: setImmediate() is to schedule the immediate execution of callback after I/O (input/output) event callbacks and before setTimeout and setInterval. setTimeout() is to schedule execution of a one-time callback after delay milliseconds. both are async.
    • Use: Inside an I/O cycle, the setImmediate() should execute before setTimeout({},0).
    • Example:
    const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log('timeout');
  }, 0);
  setImmediate(() => {
    console.log('immediate');
  });
});

  • T-Node-23) What is process.nextTick()?

    • Explanation: Every time the event loop takes a full trip, we call it a tick. When we pass a function to process.nextTick(), we instruct the engine to invoke this function at the end of the current operation, before the next event loop tick starts. process.nextTick() is actually faster
    • Use: Calling setTimeout(() => {}, 0) will execute the function at the end of next tick, much later than when using nextTick() which prioritizes the call and executes it just before the beginning of the next tick.
    • Example:
    process.nextTick(() => {
  // do something
});

  • T-Node-24) What is package.json? What is it used for?

    • Explanation: All npm packages contain a file, usually in the project root, called package.json - this file holds various metadata relevant to the project. It's a central repository of configuration for tools, for example. It's also where npm and yarn store the names and versions for all the installed packages.
    • Use: This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies. It can also contain other metadata such as a project description, the version of the project in a particular distribution, license information, even configuration data - all of which can be vital to both npm and to the end users of the package. The package.json file is normally located at the root directory of a Node.js project.
    • Source: https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/

  • T-Node-25) What is libuv?

    • Explanation: Node.js has two major dependencies, written in C. One is the V8 engine, which converts JavaScript into machine code, and the other is libuv, which provides access to the event loop and the thread pool.
    • Use: Similar to how client-side JavaScript utilizes Web APIs to take advantage of asynchronous processes, libuv allows Node.js to perform non-blocking input-output (I/0) operations with the event loop. More expensive tasks are offloaded to the thread pool.
    • Example: setTimeout() works the same in the libuv event loop as it would in a browser environment, executing a callback function after a minimum time is specified. The thread pool handles more intensive tasks, such as DNS lookup and encryption.
    • Source: https://nodejs.org/en/docs/meta/topics/dependencies/

  • T-Node-26) What are some of the most popular modules of Node.js?

    • Explanation: Node modules provide a way to re-use code in your Node application. At its core, a module is a piece of re-usable code with a defined interface. You bring a module into scope using require(). Thanks to the modules and libraries available through the NPM package manager, creating a website takes only a few minutes.
    • Use: Node modules can provide additional functionality or utilities that would be time-consuming or difficult to implement from scratch.
    • Example: Some common Node modules that I have used are: express, mongoose, passport, cloudinary
    • Source: https://www.codemag.com/article/1709061/Introduction-to-Node-Modules

  • T-Node-27) What is EventEmitter in Node.js?

CS Theory 

  • T-CSTheory-1) What is recursion and give an example using javascript?
  • Explanation: Recursion is when a function calls itself within its own body. Besides the recursive call, it should always have a base case which stops it from calling itself to prevent infinite loops.
  • Use: Recursion is made for solving problems that can be broken down into smaller, repetitive problems. It is especially good for working on things that have many possible branches and are too complex for an iterative approach.
  • Example: A classic example is computing a factorial given a number num:
function factorial(num) {
  if (num === 1) {
    return num;
  }
  return num * factorial(num - 1);
}

Source: https://developer.mozilla.org/en-US/docs/Glossary/Recursion

  • T-CSTheory-2) What are types?

    • Explanation: Types, also called data types, each have a unique set of rules/instructions of what can and can't be done with it.
    • Use: Types are necessary so that the computer knows how to handle data when trying to do an operation with it.
    • Example: A few data types that are shared by most programming language are:
      • Boolean (ex. true or false)
      • String ("hello world")
      • Float (3.1415)
    • Source: https://www.youtube.com/watch?v=A37-3lflh8I

  • T-CSTheory-3) What are data structures?

    • Explanation: Data structures is storage that is used to store and organize data. It is also a way of arranging data on a computer in such a way that it can be updated and accessed efficiently.
    • Use: Data structures are not only used for processing, retrieving, and storing data, but also organizing the data into more readable ways.
    • Example: There are many types of data structures, all classified as either linear or non-linear. The following are some examples:
      • Linear Static Data Structures (Arrays)
      • Linear Dynamic Data Structures (Queue, Stack, Linked List)
      • Non-linear Data Structures (Tree and Graphs)
    • Source: https://www.geeksforgeeks.org/data-structures/

  • T-CSTheory-4) What is an algorithm?

    • Explanation: In literal terms, an algorithm is a set of rules to be followed in calculations or other problem-solving opterations or a procedure for solving a mathematical problem in a finite number of steps that frequently by recursive operations. In other words, an Algorithm refers to a sequence of finite steps to solve a particular problem.
    • Use: Algorithms can be used for many things such as building a solution by searching all available solutions, searching, and sorting.
    • Example:
      • Breadth First Search Algorithm
      • Recursive Algorithms
      • Brute Force Algorithms
    • Source: https://www.geeksforgeeks.org/introduction-to-algorithms/

  • T-CSTheory-5) What is scope / lexical scope in javascript?

    • Explanation: Scope refers that the accessibility of variables, depending on where they are declared in the code they are “visible” and thus can be called. Lexically scoped variables can only be called from within the block of code they are defined, generally speaking inside of a function.
    • Use: It is used to avoid scope pollution, or unwanted invoking of variables
    • Source:

  • T-CSTheory-6) What is polymorphism?

    • Explanation: Polymorphism is a concept of Object-oriented programming(OOP) Paradigm that provides a way to perform a single action in different ways.
    • Use: It provides an ability to call the same method on different JavaScript objects
    • Example:
    class A {
  display() {
    console.log('A is invoked');
  }
}

class B extends A {}

class C extends A {
  constructor() {
    super();
  }

  //overrides the display function of A and hence behaves differently
  display() {
    console.log('C is invoked');
  }
}
var b = new B();
var c = new C();
b.display(); //output: :"A is invoked"
c.display(); //Output: "C is invoked"

  • T-CSTheory-7) What is encapsulation?

    • Explanation: A tenet of OOP, it is the wrapping up of data under a single unit, those being variables, and functions acting on those variables. In JS this is accomplished with objects and constructor functions
    • Use: Its main benefit is it allows your code to be more readable, and robust against errors.
    • Example:
    class Person {
  #name = 'Nathan';

  getName() {
    return this.#name;
  }

  setName(name) {
    this.#name = name;
  }
}

  • T-CSTheory-8) What is a Linked List?

    • Explanation: It is a linear data structure similar to an array, except that elements are not stored on a particular memory location or index but instead represent separate objects containing a reference to the next item on the list Elements (commonly called nodes) contain two items: the data and the link to the next node. The data can be of any type. In a linked list, the head refers to the first node of the list. Null refers to the last node of the list. If the list is empty, the head is null. There are 3 Types: Singly, Doubly and Circular Linked List.
    • Use: The DOM, Blockchains, Prototypal Inheritance, Image Viewer, Music Payer and Previous And Next Page...
    • Example:
    const linkedList = {
    head: {
        value: 1
        next: {
            value: 2
            next: {
                value: 12
                next: {
                    value: 4
                    next: null
                    }
                }
            }
        }
    }
};

  • T-CSTheory-1) What is a Doubly Linked List?

    • Explanation: It is pretty much the same as a linked list, only each node also has a pointer to the previous node and also has a null head pointer. It makes it easier to traverse the nodes and delete items, though they require more space, and take longer due to the extra pointers.
    • Use: They are used in stacks, hash tables, and binary trees.
    • Example:
    const morningRoutine = {
  value: 'Make Bed',
  previous: null,
  next: {
    value: 'Drink Tea',
    previous: `<REFERENCE TO NODE MAKE BED>`,
    next: {
      value: 'Brush Teeth',
      previous: `<REFERENCE TO NODE DRINK TEA>`,
      next: null,
    },
  },
};

  • T-CSTheory-9) What is a Queue?

    • Explanation: A Queue is a linear structure which follows a particular order in which the operations are performed. The order is First In First Out (FIFO).
    • Use: Queue is used when things don't have to be processed immediately, but have to be processed in First In First Out order like Breadth First Search.
    • Example: The Event Loop Model prioritizes all the Jobs in a Job Queue.
    • Source: https://www.geeksforgeeks.org/queue-data-structure/

  • T-CSTheory-10) What is a Stack?

    • Explanation: A Stack is a linear data structure which follows a particular order in which the operations are performed. The order is LIFO(Last In First Out).
    • Use: Stacks are used to implement functions, parsers, expression evaluation, and backtracking algorithms.
    • Example: The Event loop uses call stack. Every time a script or function calls a function, it's added to the top of the call stack. Every time the function exits, the interpreter removes it from the call stack.
    • Source: https://www.geeksforgeeks.org/stack-data-structure/

  • T-CSTheory-11) What is a Hash Table?

    • Explanation: Also known as a hash map or dictionary, is a data structure that implements a set data type, in a structure that can map keys to values. In JS you can create them with objects as they offer an easy way to make key/value pairs. When a key is passed into the table the corresponding value is returned.
    • Use: Hash tables are used in all manner of tasks, the most common however would be password verification
    • Example:
    function test() {
  var map = {
    m1: 12,
    m2: 13,
    m3: 14,
    m4: 15,
  };
  alert(map['m3']);
}

  • T-CSTheory-12) What is a Heap?

    • Explanation: They are binary tree-based data structures, Heaps come in one of two forms min-heaps, and max-heaps, the only difference between the two, min and max, is that the root node in max-heap is the biggest key working down, and min is the reverse, this must be recursively true for all sub-trees in that binary tree.
    • Use: Heaps are generally used in priority queues. or to order statistics
    • Example:
              10
        /     \
     15         30
   /    \      /    \
 40      50  100     40
        min heap

          100
        /     \
     40         50
   /    \     /     \
 10      15  50      40
        max heap

  • T-CSTheory-13) What is a Trie?

    • Explanation: It is a type of tree data structure, they are used to store associate arrays where the keys are usually strings. They are often compared to hash tables, though some key differences are that. Nodes in the tree do not store keys, instead, they each store parts of keys, traversing down from the root node to a leaf allowing you to build the key as you progress, they also don't need to be a value at every node. Values are typically only associated with leaf nodes.
    • Use: They are typically used for auto-complete.
    • Example:
                         root
                  /    \    \
                  t    a     b
                  |    |     |
                  h    n     y
                  |    |  \  |
                  e    s  y  e
               /  |    |
               i  r    w
               |  |    |
               r  e    e
                       |
                       r

  • T-CSTheory-14) What is a Tree?

    • Explanation: Trees are non-linear data structures, they organize data hierarchically. They are a collection of nodes, that are linked via branches, each node branches to its child nodes. They are possibly the most commonly used data structure. You can think of it as a family tree, or company structure, branching down from the root node (CEO) to child nodes (managers) and terminating at leaf nodes(entry level employees)
    • Use: The DOM, file management, and even machine learning decision-based algorithms.
    • Source: https://www.programiz.com/dsa/trees

  • T-CSTheory-15) What is a Binary Search Tree?

    • Explanation: A binary search tree, or "ordered binary tree" is a type of binary tree where the nodes are arranged in order: for each node, all elements in its left subtree are less than the parent node, and all the elements in its right subtree are greater than the parent node.
    • Use: They are used to implement dictionaries, implement multilevel indexing in DBs. as well as Implementing search algorithms.
    • Example:
              5
        /   \
      3      6
     /  \      \
   1     4      9

  • T-CSTheory-16) What is a Disjoint Set?

  • T-CSTheory-17) What is a Bloom Filter?

    • Explanation: It is a probabilistic data structure that is execptionally space-efficient , it is used to check to see if an element is a member of a set. A common use case is checking the availability of a username, this approach is far more efficient than alternative solutions, however, since it is probabilistic it can return false positives so it is not suitable for mission-critical tasks. It is important to note that although it can give a false positives it is not possible to return a false negative.
    • Use: This used to be used in search engines, and currently has found use in blockchain technology
    • Source: https://www.geeksforgeeks.org/bloom-filters-introduction-and-python-implementation/?ref=gcse

  • T-CSTheory-18) Demonstrate Bubble Sort and explain when you might use it?

    • Explanation: A bubble sort algorithm is an algorithm that sorts an array by comparing two adjacent elements and swaps them if they are not in the intended order. Order can be anything like increasing order or decreasing order.
    • Use: It is generally considered a bad practice to implement this in most situations, though it is easy to implement so for a first-pass solution, on a small data set it can find use.
    • Example:
    function bblSort(arr){
  for(let i = 0; i < arr.length; i++){
    // Last i elements are already in place
    for(let j = 0; j < ( arr.length - i -1 ); j++){
      // Checking if the item at the present iteration
      // is greater than the next iteration
      if(arr[ j ] > arr[ j +1 ]){
        // If the condition is true then swap them
        let temp = arr[ j ]
        arr[ j ] = arr[ j + 1]
        arr[ j+1] = temp
      }
    }
  }

  • T-CSTheory-19) Demonstrate Insertion Sort and explain when you might use it?

    • Explanation: Insertion sort is a simple sorting algorithm that builds the final sorted array/list one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort.
    • Use: It is very efficient in smaller data sets, especially if they are already mostly sorted.
    • Example:
    function insertionSort(inputArr) {
  let n = inputArr.length;
  for (let i = 1; i < n; i++) {
    // Choosing the first element in our unsorted subarray
    let current = inputArr[i];
    // The last element of our sorted subarray
    let j = i - 1;
    while (j > -1 && current < inputArr[j]) {
      inputArr[j + 1] = inputArr[j];
      j--;
    }
    inputArr[j + 1] = current;
  }
  return inputArr;
}

  • T-CSTheory-20) Demonstrate Merge Sort and explain when you might use it?

    • Explanation: Merge sort is a sorting algorithm that uses the “divide and conquer” concept. Given an array, we first divide it in the middle and we get 2 arrays. We recursively perform this operation, until we get to arrays of 1 element. After divinding into its smallest units it starts merging the elements again based on their size.
    • Use: It is one of the most respected sorting algorithms. Merge sort is more efficient and works faster than quick sort in case of larger array size or datasets.
    • Example:
    const _mergeArrays = (a, b) => {
  const c = [];
  while (a.length && b.length) {
    c.push(a[0] > b[0] ? b.shift() : a.shift());
  }
  // if we still have values, let's add them at the end of `c`
  while (a.length) {
    c.push(a.shift());
  }
  while (b.length) {
    c.push(b.shift());
  }
  return c;
};

const mergeSort = (a) => {
  if (a.length < 2) return a;
  const middle = Math.floor(a.length / 2);
  const a_l = a.slice(0, middle);
  const a_r = a.slice(middle, a.length);
  const sorted_l = mergeSort(a_l);
  const sorted_r = mergeSort(a_r);
  return _mergeArrays(sorted_l, sorted_r);
};

  • T-CSTheory-21) Demonstrate Quicksort and explain when you might use it?

    • Explanation: Quicksort is an in-place sorting algorithm. it is still a widely used algorithm for sorting. It picks an element as a pivot and partitions the given array around the picked pivot. There are many different versions of quickSort that pick pivot in different ways. When implemented well, it can be somewhat faster than merge sort and about two or three times faster than heapsort.
    • Use: It is used pretty much everywhere that doesnt require a stable sort.
    • Example:
    function quicksort(array) {
  if (array.length <= 1) {
    return array;
  }

  let pivot = array[0];
  let left = [];
  let right = [];

  for (let i = 1; i < array.length; i++) {
    array[i] < pivot ? left.push(array[i]) : right.push(array[i]);
  }

  return quicksort(left).concat(pivot, quicksort(right));
}

let unsorted = [23, 45, 16, 37, 3, 99, 22];
let sorted = quicksort(unsorted);

console.log('Sorted array', sorted);

Questions to ask your interviewer

  1. How does Bob’s Burgers measure the success of their engineers?
  2. What challenges can an engineer come across while working at Bob’s Burgers?
  3. Can you explain "thing you read on their engineering blog" and how it affects Bob’s Burgers Engineers?
  4. What traits are hard to find in an engineer that Bob’s Burgers would like to have?
  5. How is critique given to engineers at Bob’s Burgers?
  6. Do you have any questions or concerns about my qualifications?
  7. If Bob's Burgers hired me today how would you know in a year's time that I was the right fit?

Here is a helpful list of other reverse interview questions: https://github.com/viraptor/reverse-interview

Whiteboard

When talking through a whiteboard problem or a coding challenge with an interviewer you should use the PREP method. (Don't write PREP in the actual interview, but use it now while doing codewars/leetcode). Going through this will help you engage with the interviewer (and possibly burn up some time 😉)

  • Parameters
    • Inputs
    • Ask questions
      • Will it always be a number?
      • Will it ever be negative?
      • Any gotchas?
  • Returns
    • Ask questions
      • Do you want it returned or is a console.log better?
      • Should I pass a whole array of solutions back or just a single solution?
  • Examples
    • Show a couple black box examples, aka test cases
      • I pass in these arguments and get these results, is that correct?
    • Examples are a good idea because "you have the receipts" if the interviewer decides to change things.
  • Pseudocode
    • Write pseudocode of each of the steps

Resources: