Conquering Job Interview Code Challenges v1.0
Tags: jobhunt, interview, challenge, javascript
Published: 2019-05-27 17:22:42

---
title: Conquering Job Interview Code Challenges v1.0
published: true
description: A walk through of a code challenge given at a job interview
tags: #jobhunt #interview #challenge #javascript
canonical_url: https://jonathansexton.me/blog/conquering-job-interview-code-challenges-v1-0/
---

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://images.unsplash.com/photo-1521769405690-26523cbd7d2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="person standing on brown and black mountain under blue sky during daytime"/><figcaption> Photo by <a href="https://unsplash.com/photos/nsexDkLGC-c?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Lê Tân</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a> </figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As many of you know, I have been applying for a job in web development for a few weeks and I thought it would be a good idea to share some of the coding challenges I've encountered.  (<em>Side note, if you know of or have any available web developer positions I would greatly appreciate if you'd share them with me either here in the comments or on <a href="https://twitter.com/jj_goose">Twitter</a> :D </em>)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Not only that but I'll share the ways I went about solving these challenges.  Granted, there are many ways to solve these challenges but these are the ways I went about it.  If you have different ways that's awesome and I'd love for you to share them with me!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I will not share any identifiable information about the companies or specifics on the interview process of said company to preserve process integrity.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Alright, let's get to it then.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>The Challenge</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a challenge I was given recently that I felt good about solving:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em><strong>Task: Return a basic styled list of posts from an endpoint in reverse chronological order</strong></em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To protect the company and their information, I will not share the URL from which I returned the information but instead will have a generic link from <a href="https://jsonplaceholder.typicode.com/">JSONPlaceholder</a> (a great, free, open source API for developers when you need to get some generic outside data) in the code below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's the HTML I started with so we have something to display our results in:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":747,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-3.png" alt="a code example showing HTML" class="wp-image-747"/><figcaption>Basic HTML boilerplate</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The <em>&lt;ul></em> tag has an id so we can style it later in the process.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Fetching Data From the Endpoint</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Alright, let's dig into the <strong>JavaScript</strong> portion of this challenge.  First, I like to set my output and display variables: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":749,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-4.png" alt="JavaScript code showing two variables being declared" class="wp-image-749"/><figcaption>Our variables used when displaying the returned code</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I use <em>let</em> for the <em><span style="text-decoration: underline;">output</span></em> variable and set it to <em>null</em> because we will change it's value later in the code.  The <em><span style="text-decoration: underline;">list</span></em> variable is declared with <em>const</em> because it's value will not be chan<span style="text-decoration: underline;"></span>ging.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":760,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-12.png" alt="javascript code showing a fetch function" class="wp-image-760"/><figcaption>Fetching data from the endpoint</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In the above example, we're declaring an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> named <em><span style="text-decoration: underline;">getData</span></em> wrapped in a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a> block (This is a cleaner/easier to use/read syntax that uses <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises">Promises</a></em> under the hood - you'll also see the <em>catch</em> portion below).  Because we're getting data asynchronously we also need to make use of <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await">async/await</a> </em>to fetch data.  This is the method I'm most comfortable with but I know there are many other ways to get data from an endpoint so feel free to share yours :D</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once we've declared our <em>data</em> variable, the next thing is to set a variable to turn the returned data to a JSON object so we can get it in a usable form.  We do that with the <em><a href="https://developer.mozilla.org/en-US/docs/Web/API/Body/json">.json()</a></em> method.  We're awaiting the data as well because if we were to omit the <em>await</em> keyword, JavaScript would try to turn the <em>data</em> variable into JSON but the data would not be there yet because it's coming from an asynchronous API.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":755,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-9.png" alt="a console log of a javascript array " class="wp-image-755"/><figcaption>Our glorious data!</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As the very last line in the section, we <em>console.log</em> our data that we get back from the API endpoint just to make sure we're getting everything we wanted.  We have an array full of objects.  You'll also notice that the key <em>published_at</em> holds our dates and they are not in any type of order.  Their format is also not a simple four digit number representing the year which would make it easy to filter them into <em><strong>reverse chronological order</strong></em>.  We'll need to take care of that.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Manipulating Our Data</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":753,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-7.png" alt="javascript code that's copying a variable" class="wp-image-753"/><figcaption>Making a copy of our data variable</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Here we declare the variable <em>dataCopy</em> which points to the <em>dataJSON </em>variable mutated into an array via the <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">spread operator(...)</a></em>.  Essentially, we are copying our returned JSON data so we aren't manipulating the original (bad practice) while making it into an array so that we can iterate over it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After, we <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a></em> the array.  Sort is an extremely useful array method that will put our array indices into the order of our choosing based on the function we pass into <em>sort.</em>  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Typically, we might want to sort the data based on value (largest to smallest) so we subtract the parameter <em><strong>a</strong></em> from parameter <em><strong>b</strong></em>.  But because we need to display our results in <em><strong>reverse chronological order</strong></em> I decided to produce a new date (accomplished with the <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></em> operator and the JavaScript built in method <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></em> that creates a new platform independent formatted instance of a date.  Now, because <em><strong>a </strong></em>and <em><strong>b</strong></em> represent our objects sitting inside our array indices, we can access the key/value pairs held within said objects.  So, we subtract <em>b.published_at </em>from <em>a.published_at</em> and this should give us our dates in <em><strong>reverse chronological order</strong></em>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Displaying the Fruits of Our Labor</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Remember that <em><span style="text-decoration: underline;">output</span> </em>variable we set to <em>null</em> at the very top of our program?  Well now is it's time to shine!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span style="text-decoration: underline;"></span></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":758,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-10.png" alt="javascript code showing an output variable being changed" class="wp-image-758"/><figcaption>That output variable is earning it's keep now!</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So, there's a few things going on here.  First, we're setting our <em><span style="text-decoration: underline;">output</span></em> variable to a new value by mapping over our <em><span style="text-decoration: underline;">dataCopy</span></em> variable using the <em><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></em> method.  This method returns a new array with the results of calling the provided function once for each index.  The <em>item</em> parameter represents our objects inside of our array that was returned from the endpoint and thus has access to all of their properties such as <em>title </em>and <em>published_at</em>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We return two list elements with a <em>&lt;span></em> inside each one (for styling purposes), as well as a string for the <strong>Title </strong>and <strong>Date Published</strong> headings.  Inside of those, we have our variables that use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> to set the title and the date for each post.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then, we set our <em><span style="text-decoration: underline;">list</span></em> variable's <em><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">innerHTML</a></em> equal to that of our <em><span style="text-decoration: underline;">output</span></em> variable.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Finally, we have the closing bracket and error handling of our <em>try...catch</em> block as well as our function call:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":759} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-11.png" alt="javascript code showing error handling for a fetch request" class="wp-image-759"/><figcaption>This code will handle any errors and display them in the console<br></figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Final Code </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here is what our full code body looks like now: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":761,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-13.png" alt="javascript code " class="wp-image-761"/><figcaption>The entirety of our code base</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And here is our basic CSS styling: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":762,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-14.png" alt="css code showing basic styling of an element" class="wp-image-762"/><figcaption>Did I say basic styling?  I meant basic :D</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And here is the result of our work with it's very basic styling:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":763,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/05/image-15.png" alt="a list of posts in reverse chronological order" class="wp-image-763"/><figcaption>Isn't it beautiful?</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see, we accomplished what we set out to do and in fact the list is in <em><strong>reverse chronological order</strong></em>. Yay!</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>I hope you've enjoyed this walk through of my thought process and of how I solved this challenge.  Granted, there are many ways of completing this so feel free to share yours with me!  I'm excited to keep this series going and will post another after I've gone through another challenge!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This post was originally posted on my <a href="https://jonathansexton.me/blog">blog</a>.  While you're there why not sign up for my monthly <strong>Newsletter</strong> – I promise I’ll never 
spam your inbox and your information will not be shared with 
anyone/site.  I like to occasionally send out interesting resources I 
find, articles about web development, and a list of my newest posts.<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, I cross post most of my articles on <a href="https://medium.com/@joncsexton">Medium</a> so you can find my work there as well!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Have an awesome day filled with love, joy, and coding!</p>
<!-- /wp:paragraph -->