DEV Community: Barbara Law

Navigate Arrays like you're Talking to a 4-year-old

Barbara Law — Fri, 12 Feb 2021 19:37:07 +0000

Are you an experienced coder? Are you well-versed in data types and their manipulation? If you answered 'yes' to either of those questions that's awesome and I'd love to talk code with you sometime! However this post will likely not enlighten you at all.

But if you're a newbie struggling to wrap your head around some intimidating looking syntax (something like myArray[2][0][myArray[2][0].length-1] perhaps?), I may be able to help you a little bit.

This article assumes you know the basic structure of a JavaScript array and have been introduced to bracket notation but are in the process of trying to actually use that to access the data within. My advice? Pretend your computer is a 4-year-old who needs to find their favorite socks.

Let me Explain

If you've ever spent a fair amount of time with a preschooler then you've likely experienced their unique way of interpreting 'simple' instructions. If you haven't then please just trust me when I tell you that instructions to a preschooler have to be explicit - both thorough and unambiguous - or results may vary. Computers interpret instructions in much the same way.

All you want are the socks

Imagine a small heap of a kid's clothes, it would be a pretty simple matter to just grab the socks. Look at array kidStuff, how could you access just 'favorite socks'?

let kidStuff = ['red shirt', 'favorite socks', 'cool shorts']

The array is 1-dimensional, it contains only strings, no complex data types. You can use bracket notation and the index of 'favorite socks' to access them, like so: array name[index number].

Which index do we want to use in this case? Remember, we begin counting from index 0 in JavaScript.

alert(`Here are your ` + kidStuff[1])    
// 'Here are your favorite socks'

Now what if our socks were put away in a chest of drawers? What if our array looked like this?

let kidDresser = [
  [['red pj top', 'red pj bottom', 'cars pj top', 'cars pj bottom'],['plaid pj top', 'plaid pj bottom', 'long sleeve pj top', 'long sleeve pj bottom'],['shark swim shirt', 'shark swim shorts']],
  [['grey sweatpants', 'black sweatpants', 'jeans', 'red joggers'],['orange hoodie', 'green sweater']],
  [['karate tshirt', 'karate pants'], ['blue shorts', 'grey shorts', 'navy shorts'], ['white socks', 'striped socks', 'favorite socks', 'holiday socks']]
]

How is our computer kid to find their favorite socks? Your job is to tell them exactly where they are. Take a deep breath, if you can tell a kid where in their dresser those socks are, you can code it.

Where are they?

In plain talk, where are the socks? Go ahead and take a look at the same array again, this time with some comments and spacing thrown in.

let kidDresser = [

  // Top Drawer
  [
    ['red pj top', 'red pj bottom', 'cars pj top', 'cars pj bottom'],
    ['plaid pj top', 'plaid pj bottom', 'long sleeve pj top', 'long sleeve pj bottom'],
    ['shark swim shirt', 'shark swim shorts']],

  // Middle Drawer
  [
    ['grey sweatpants', 'black sweatpants', 'jeans', 'red joggers'],
    ['orange hoodie', 'green sweater']],

  // Bottom Drawer
  [
    ['white socks', 'striped socks',  'holiday socks', 'favorite socks'],
    ['karate tshirt', 'karate pants'], 
    ['blue shorts', 'grey shorts', 'navy shorts']]
]

Nothing meaningful was changed about the array this time, only spacing and comments. Try to describe where the 'favorite socks' can be found, in regular speech (not code).

How did you describe their location? Moving from the outside in, I would say they are in the kid's dresser drawers, bottom drawer, first section, last pair in.
If this isn't similar to your answer please review the code above and see if you can find the socks via those instructions.

In JavaScript

Now that we know where the socks are in plain speech, we will locate them using JavaScript array bracket notation.

We know the socks are in the dresser, so we'll start there:

In Javascript,

alert(`Here are your ` + kidDresser)
// Alerts contents of entire dresser! Oops

Our preschooler computer doesn't have the presence of mind to just go from being told the socks are in the dresser to actually having the socks - we need to drill down to exactly where they are.

The socks were in the bottom drawer, which in this case was the 3rd 'drawer', or kidDresser[2] when remembering to start counting from index 0.

In Javascript,

alert(`Here are your ` + kidDresser[2])
// Alerts contents of whole bottom drawer! Yikes

We're getting closer. Next we need to point to the first section of that drawer.

Keep in mind, 'first' translates to index 0 when discussing JavaScript arrays. How do we describe this [0]th element in our code? Here's one way:

let sockDrawer = kidDresser[2]   // Bottom drawer from above
let sockSection = sockDrawer[0]  // First section of drawer

Alternatively, you can code that section as follows:

let sockSection = kidDresser[2][0]

Now we are directing the ~~preschooler~~ code to the correct section of the correct drawer in the dresser, but we still need to be more specific to find our favorite socks.

alert(`Here are your ` + kidDresser[2][0])
// Alerts contents of whole sock section! Messy

We know 'favorite socks' are the last pair of socks in their section. In this case there are 4 pairs of socks total, making our favorites the pair at index [3].

Similarly to selecting the section of the drawer, we can tack on the sock pair's index to our code to select them:

alert(`Here are your ` + kidDresser[2][0][3])
// Alerts `Here are your favorite socks` 
// Victory is ours!

We did it! Our computer preschooler has their favorite socks and all is right with the world!

Those are the basics of directing a 4-year-old!

Treating the computer like a preschooler helps me, and I hope it helps you! I hope this walkthrough helped you get a grasp of basics of array navigation in JavaScript.

But what if...

What if we didn't know how many socks were in that first section of the bottom drawer? What if we only knew the favorite socks were the last pair?

Given the sock section, in Javascript:

let sockSection = kidDresser[2][0]

How can we select its last item, no matter how many items that section holds?

We can use the 'length' property.

An array's length is equal to the number of elements in that array. We already know that we refer to an element by their index, which begin at 0. Therefore the last element in an array will have an index of length-1.

Here's an example to help visualize:

let sockSection = ['white socks', 'striped socks',  'holiday socks', 'favorite socks']

console.log(sockSection.length)                  // 4
console.log(sockSection[4-1])                    // 'favorite socks'
console.log(sockSection[sockSection.length - 1]) // 'favorite socks'

Now no matter how many socks we cram in the sock section in front of our favorite socks, we can always grab just our favorites. Take time with that concept and let it sink in a bit.

The Intimidating Code

Here's the scary piece of code I included in the introduction of this post

myArray[2][0][myArray[2][0].length-1]

It's messy, it's intimidating, and frankly I wouldn't write it like this - but let's break it down right now, understand it, and own it.
If we replace 'myArray' with 'kidDresser' in that code, it points to our 'favorite socks'.

Let's break that code into pieces:

let scaryStuff = kidDresser[2][0][kidDresser[2][0].length-1]
alert(`Here are your ` + scaryStuff)
// Alerts `Here are your favorite socks`.

let bottomDrawer = kidDresser[2]

let sockSection = bottomDrawer[0] 
// equivalent to kidDresser[2][0]

let lastSock = sockSection[sockSection.length-1]
//equivalent to kidDresser[2][0][kidDresser[2][0].length-1]

alert(`Here are your ` + lastSock)
// Alerts `Here are your favorite socks`.

Look at that! We destroyed that mess of a line of code and made it readable.

I want to do Codewars... uh, how do I do that?

Barbara Law — Wed, 20 Jan 2021 22:26:02 +0000

Maybe you're new to coding (#codenewbie) needing to drill the fundamentals or maybe you're an experienced coder looking to practice with some daily challenges, you stumble upon codewars.com and it's just what you've been looking for! What now?!

Codewars is a fantastic resource and community full of challenges, or Katas, for every skill level and programming language. The trouble is, it's not always the most intuitive platform to get started in. Hopefully this post will help you dip your toe in and find what you need.

Signing Up

Signing up for Codewars isn't quite as simple as clicking a 'Create Account' link, but it's close!

The first time you visit the site, you'll likely see something like this:

Click on your programming language of choice to begin the sign-up process.

The menu of languages will be replaced by a console showing a basic problem to fix. This is your 'initiation' and must be solved before you can move on to creating your account. For JavaScript, it was a simple matter of adding a 'return' keyword - the solution will vary depending on the language.

Once you pass initiation, follow the standard sign-up steps just like on any other site. You even have the option to use your GitHub login to save some hassle. You'll then answer a couple of basic questions about your experience and languages to finish sign-up (enlistment).

Finding Kata to Complete

Your dashboard view will be your starting point from now on whenever visiting the site. Notice that there is a suggested Kata in the top center of the screen easily available to you.

Next to the suggested Kata are 2 dropdown menus: one to select the language you're working on, and another to change your challenge goal.

If you want to have more freedom to filter and select Katas with more precision, hover over the menu on the left-hand side of your screen and select 'Kata'. This will take you to the all the available Katas and filters.

Now you can play around with the filters to your heart's content to find just the right Kata for you! Note you can also search for a specific Kata by name on this screen.

A few things to note:

The difficulty levels start with 8kyu as the easiest, and increase in difficult as the kyu level decreases
I find that sorting by 'Most Completed' actually gives me the easiest katas in a given level, not by 'Easiest' 🤷🏻‍♀️
Below the main filter menu is a list of tags that you can also use to filter your results

My recommended settings for a beginner are to click the Fundamentals tag, 8kyu, and sort by Most Completed

Completing a Kata

Once you click on the kata of your choosing, you'll see an introductory screen showing the problem you must solve. If you choose to go ahead and try the kata, click the 'Train' button in the upper right.

Now you'll see a new screen with the instructions on the left, and 2 consoles on the right: the top one is where you do your work and input the solution; the bottom one lists test cases that will be passed into your function and their expected results.

When you believe your solution is correct, you can choose to run the test cases by clicking the 'test' button in the bottom right. You can also skip the test cases and click 'attempt' to run the full set of inputs. If you have errors, it will tell you.

If you pass everything, go ahead and click the 'submit' button that has now replaced 'attempt'. Note that submitting tends to take about 15-30 seconds to go through, be patient!

Joining a Clan

If you want to turn codewars into a more social activity and add even more of a gamelike feel, I highly recommend joining a Codewars Clan or creating one with friends!

To join an existing clan you will need its name.

Hover over your name in rank in the top right of the screen and click on 'Account Settings'. On the next screen enter the name of the clan under your username. Scroll down and hit 'Update.' That's it!

Those are the basics, now get to work!

I hope this guide helped you get started with Codewars.com. If there's anything else you want to know in a future post, please let me know!