Breaking Down MDN Documents

Beginners Guide: How to adapt technical documentation to your own work

For many beginners in coding, documentation can be a challenge for many to interpret and utilize. Which makes finding the methods necessary to do the task at hand that much harder. So today I’ll breakdown how to use MDN to it’s fullest using Array methods.

Whenever you are confused or concerned about which method you want to use always look to the documents. Spend some time to look through all the different names for the functions as they can give you a hint about what they do.

Once you find a method that you believe will work to your advantage, the next step is interpreting and arranging the code to suit your needs. For instance if you’re using forEach know that the set up looks something like:

const array = [element, element, element]
array.forEach(element => {
    Something here
})

When looking through the documentation we know that our forEach will iterate over each element of the array and will execute the code built within the forEach. This set up is a basic set up of most iterators but let’s now use some other methods.

In most cases, when working with data from API’s or from Code Challenges to demonstrate your skills with data manipulation, you’re dealing with elements as objects. Creating consistent naming of variables, keys, and concepts that we are using can help us breakdown what we are doing. Here is almost a formula for doing that:

//An example of an array of n objects with n key/value pairs
const array = [{key1: value, key2: value,... keyn: value}, ..., {}]
array.forEach(<concept>Obj => {
   //If we wanted to put the first key into a div
   <concept/key>Li.innerText = <concept>Obj.key1
})

We replace <concept>Obj with animalObj if we are dealing with an array of animal objects. We replace <concept/key>Li with nameLi if we have a key called name , or animalNameLi , or any name that will help you understand what you are working with. Those naming conventions are up to you, but use the ability that you can name these elements, variables, etc to your advantage

Let’s now go into the the find method. If you go to MDN documents and look into it just read what it says:

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

Then it gives us an example:

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

If we read the description and look at the example we can tell that find iterates over the array, for each element in the array it will test the element based on the comparison you’ve placed in the function. Then if it finds something true, it’ll give a return value of that element. If it’s not then it gives a return value of undefined. It also mentions that it will return the first element that is proven true. So we know we will always receive one element, not many.

So when they show us this example we can “translate” for our use as the following format:

const found = array1.find(element => element > 10)
 <a variable name to signify a result> = <name of the array to iterate over>.find(<variable name of the element we are going to iterate over> => <Some comparison or function that will have to return true>)

If you’re running into trouble with any iterator then read it’s documentation, look at its examples, and start with what you know then build from there.

For this next example let’s say we needed to find an element in an array and you forget about find(). Instead you want to use filter(). Well let us read the documentation first:

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

Now we look at the example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

If we were hoping for 1 element to be returned, we may hit a bit of a snag. Because we’re going to get an array instead. But this doesn’t mean that it’s wrong. It means that we have to understand what is happening and use it to our advantage. When using find we expect that result = element or found = element then let’s take a look at the return value of result or found when we use filter. Oh it returns elements in an array for us based on a comparison. Well if there is only one possible answer based on the comparison then we are going to have 1 element in an array right?

Let me show you an example using objects this time:

const words = [{id: 1, word:'spray'}, {id: 2, word:'limit'}, {id: 3, word:'elite'}, {id: 4, word:'exuberant'}, {id: 5, 'word: destruction'}, {id: 6, word:'present'}];
const result = words.filter(wordObj => wordObj.word === "elite");
console.log(result)
//expected output: Array [{id: 3, word:"elite"}]

Which means that if you do result[0] you’ll get a return value of "elite" . This is great we are still able to “find” what we are looking for we just have an array with an object inside, instead of a singular object.

Hopefully this breakdown can help you while to tackle challenges as you continue onto your journey. Good luck!