Forem: Rianna Cleary

Memory Management in JavaScript

Rianna Cleary — Mon, 24 Aug 2020 17:44:04 +0000

In programming, memory life cycles are almost always the same regardless of which language you are using. Memory management, however, is different between languages. There are other languages that have manual memory management methods, such as C and C++. In JavaScript though, memory is automatically allocated when data types are created, and disposes of them when they aren't needed or used anymore, hence the term garbage collector. There are other languages besides JavaScript that also fall under the garbage collector term like Java, Python and Ruby.

Garbage collecting is a form of automatic memory management which monitors all data types that are created and removes the ones that have become unreachable. Let's look at this snippet as an example.

let edmArr = [];
function addObj() {
   let dubstep = {genre: 'Dubstep'}
   edmArr.push(dubstep)
}
addObj()
console.log(edmArr[0])

In this example, an empty array is initialized and a function that simply adds an object to that array. When we console.log(edmArr[0]) after the function call, the output is {genre: 'Dubstep'}. Even though dubstep isn't in scope, we are still able to access it through the edmArr, which means that it needs to say in memory until the reference isn't there (unreachable) anymore. If we were to remove the object from the array, the value of dubstep won't be needed and will be garbage collected.

How is garbage collection actually "collecting the garbage"?

Garbage collection is mainly based on two algorithms, one called mark-and-sweep and another called reference-counting. The reference-counting algorithm reduces the problem of seeing whether an object is still needed to determine if an object has any other data types referencing it.

let x = {
  animal: 'cat'
}

let y = x

x = "Hello, World!"

console.log('X:', x, 'Y:', y)

If you run this example, you'll see X: 'Hello, World!' Y: {animal: 'cat'}. Since the value of x is no longer an object, y is still a reference to it, so there's no need for garbage collecting. If we were to change the value of y though, the object would then be collected because it wouldn't be reachable anymore. The 'garbage' will only be collected if there are zero references pointing to it. This collection algorithm isn't preferred in modern browsers today because it has a limitation when it comes to circular referencing. If two objects reference each other, it creates a cycle and the algorithm won't really consider them being unneeded because each object has at least one reference pointing to them. This leads to neither of them being collected as "garbage" and is a common cause to memory leaks.

The mark-and-sweep algorithm reduces the definition of "an object no longer needed" to "an object that is unreachable". This algorithm finds the root (global object) and then finds all the references from that root, and then the references of those, etc. It finds all the reachable objects, and collects the ones that are unreachable. This algorithm is used in browsers, other garbage collecting languages today because it handles cycles and cyclic dependencies with improvements that have been made on it over time.

Here are some documentations that go more in depth into memory cycles and management. Happy coding!

MDN Web Docs

JavaScript.info

Using Helper Functions in JavaScript

Rianna Cleary — Mon, 17 Aug 2020 18:31:39 +0000

In this article, I'll be explaining how to solve the anagram algorithm using helper functions in JavaScript! Utilizing helper functions in your code makes tasks less complicated to manage and makes your code more DRY (Don't Repeat Yourself). I found them very useful when I used them to tackle algorithm problems because I noticed myself trying to solve them in just one function. After watching some tutorials and searching through hundreds of stack overflow posts to learn how to come up with easier solutions, I saw several other engineers implementing helper functions in their code which helped expand my thinking process in terms of breaking down the problem into pieces.

The anagram algorithm is one of the more simple ones out of most. Having said that, it's one of those problems that will trip you up if you don't put enough thought into your solution. If you're new to this algorithm, the goal is to implement a function that takes in two strings and checks to see if the input is an anagram. If yes, the function returns true, if no it returns false. Let's see how we can use helper functions to solve this algorithm.

Building our Character Map

We should first think about our edge cases in terms of what the user inputs to the function. What if there are spaces in the strings, or symbols in one string and not the next, or what if one string is in all caps and the other is lowercase? Also, how are we going to compare the strings if the letters are going to be out of order in both inputs? In other words, if you passed in the strings stew and west as stringA and stringB and had the condition if ('stringA' === 'stringB') it would return false because they're two different strings. To solve this we could essentially build a helper function that returns a character map of the string, and returns an object of each letter paired with a number value. The number value equals to how many times the letter appears in the string.

function buildCharacterMap(str) {
  const characterMap = {}

    for (let char of str.replace(/[^\w]/g, "").toLowerCase())
    characterMap[char] = characterMap[char] +1 || 1;

    return characterMap;
}

At the top, there's an initialized variable called characterMap set equal to an empty object. Then a for-of loop is started that iterates over every character of the passed in str and replaces any extra characters and white space using regex while also making the string lowercase. If you'd like to learn more about regex syntax please check out this cheatsheet! After that is the condition that builds our map, which sets its value to 1 or increases it if its already 1. We're halfway done with our solution!

Implementing Main Function

To write our main function, we should first convert both of the strings to character maps. If only we had a helper function that could do that for us...oh wait! We do!

function isAnagrams(stringA, stringB) {

  const stringAMap = buildCharMap(stringA)
  const stringBMap = buildCharMap(stringB)

}

Now that we have our mapped strings, we can iterate through stringAMap and compare the values from that string to stringBMap.

function isAnagrams(stringA, stringB) {

  const stringAMap = buildCharMap(stringA)
  const stringBMap = buildCharMap(stringB)

  for (let char in stringAMap) {
   if (stringAMap[char] !== stringBMap[char]) {
    return false;
  }
 }
  return true;
};

There is one more edge case we need to check before we could call our solution finished. What if our user adds an extra character by accident when inputting the strings? For example, what if they passed in 'rail' and 'rails'? Our function would still return true because both strings each have equal values for 'rail'. To fix this, we could iterate through the objects using Object.keys() and compare the length of them.

// ...
  if (Object.keys(aCharMap).length !== 
   Object.keys(bCharMap).length) {
    return false
  }

As stated, helper functions can really come in handy when you're tackling logical problems like these in the future, and its good practice to utilize them in your projects. Not only does it help you solve problems with a bit more ease and make your code less repetitive, but it shows other people reading it how you think and manage to solve tasks. I hope you enjoyed this tutorial and that it inspired you to see the beauty of helper functions!