Solving Coding Challenges with JavaScript Functions on Autocode
Tags: node, javascript, webdev, tutorial
Published: 2021-06-25 17:43:10

---
title:Solving Coding Challenges with JavaScript Functions on Autocode
published: True
description: In this tutorial, we will apply some of the tips that I’ve learned through General Assembly to strengthen our JavaScript skills and to approach solving coding challenges.
tags: nodejs, javascript, webdev, tutorial 
---

![](https://cdn-images-1.medium.com/max/1600/0*d_cP9PQKZRQJOJuJ.png)

[In my first blog](https://janethl.medium.com/my-journey-to-becoming-a-software-engineer-91415b5e1210), I wrote about the many factors influencing my decision to join General Assembly's coding Bootcamp. I also committed to blogging about my journey and writing tutorials because teaching is the best way to reinforce learning. As promised, here is an update on my progress during the 12 week General Assembly Software Engineering Immersive program. This tutorial will cover my favorite topic in Unit 1 --- JavasScript and functions!

We've been zooming through every day and week, and while it's been challenging to intake so much information in such a short period of time, I'm loving the program's curriculum and structured daily agenda. Our 12 weeks are broken down into 4 units that cover fundamental technologies for full-stack application building.

![](https://cdn-images-1.medium.com/max/1600/1*af-JKBnogTKAkwtr7r1SDw.png)

In this tutorial, we will apply some of the tips that I've learned through General Assembly to strengthen our JavaScript skills and to approach solving coding challenges.

Let's get started! 🧑🏽‍💻👩🏽‍💻 👇🏼

### Intro to JavaScript Functions

JavaScript is an essential programming language. These days, you can do everything with it: from selecting and manipulating elements on a website to setting up Node.js servers that can handle millions of requests per second. But before we can begin leveraging the power of JavaScript, we need to master functions.

Functions are fundamental building blocks of JavaScript. They are reusable blocks of code that we can leverage throughout our applications as many times as we need to create our desired functionality. Today we will practice solving **3** **challenge JavaScript problems with functions.** We will follow four steps to solve each problem:

1.  Carefully read the problem to understand it
2.  Use pseudocode to craft a plan for solving the problem
3.  Code it out on [Autocode](https://autocode.com/)
4.  Test and Deploy your solution on [Autocode](https://autocode.com/)

I've chosen to code on [Autocode](http://AUtocode.com) to help us better understand the power of functions. [Autocode](http://Autocode.com) is an online code editor and hosting platform that will allow us to easily publish our functions and make them accessible via the web without worrying about setting up hosting through third-party services. Autocode will automatically turn our JavaScript functions into HTTP(S) **endpoints**. 🤯

Let's get started! 👩🏽‍💻

### First ... set up your free account on Autocode

Head on over to [Autocode.com](https://autocode.com/signup/) and sign up for a free account. Choose a subdomain where your projects will be hosted and set a password.

Once you've signed up, navigate to your [**Project Management**](https://autocode.com/manage/apps/) dashboard and click **New Project.**

![](https://cdn-images-1.medium.com/max/1600/1*BV5FW62F10fbUNptvYqrHA.png)

We will be creating endpoints for each of the 3 functions that we will be coding. An endpoint is a means for you and other external apps to communicate with your system to perform certain actions by making HTTP requests to the URL representing it.

You'll be brought into [Autocode's](http://autocode.com) IDE; this is where we will write the logic to solve 3 challenge problems.

![](https://cdn-images-1.medium.com/max/1600/1*dRMuW1bQMjZhdG7y6BSD6g.png)

From here, there are a few pieces to point out;

-   The **Event selector is at the top**. Here you can choose what type of event will execute the code in your endpoint. For this tutorial, we will use the default, which is a normal HTTP request.

![](https://cdn-images-1.medium.com/max/1600/1*KjU5lg-b60EaoLpy2Eeltw.png)

-   When you press the green "Run" button, you will be prompted to name your project. Name it `functions` for the tutorial and hit **Save new project**.

![](https://cdn-images-1.medium.com/max/1600/1*dEKyBiCfpaTAK_Uv-VfVww.png)

-   You'll notice the endpoint URL show up at the bottom of the file. This is where your endpoints will live on the web.

![](https://cdn-images-1.medium.com/max/1600/1*H-2hrjs3FVlX0j3iOyOirw.png)

-   The Endpoint viewer window shows up in the bottom right. This will show you the results of your endpoint execution. You can use it to view logs as well.
-   All Autocode endpoints are immediately available on the web once they're saved.

Great, now that you have set up your coding environment, we can begin with **Challenge Problem #1!**

Let's tackle it together! 🤜🏼🤛🏼

### Challenge Problem #1: Greatest Common Factor:

**Step 1: Carefully read the problem to understand it**

Write a function that returns the greatest common factor between `**num1**` and `**num2**.` This means that the function should return the largest number that divides both `**num1**` and `**num2**.`

For example, if we pass in the number 6 and number 10 into our function, our function should return 2. Inputting 4 and 8 should return 4 etc...

```Javascript 
(6, 10); // => 2
(4, 8); // => 4
(45, 30); // => 15
```

Let's prepare our coding environment. Head back to [Autocode](http://autocode.com). Create a new endpoint by right-clicking the `functions` folder on the left of the browser and selecting `New endpoint file`.

![](https://cdn-images-1.medium.com/max/1600/1*vBYfxXUxi6G0qBW3JXLezg.png)

Name your file `functions/greatestCommonFactor.js` as I have:

![](https://cdn-images-1.medium.com/max/1600/1*wTMzPcKLuNVcebf3q6d6dA.png)

You will notice that your new file is pre-populated with a sample hello world function.

Let's take a moment to analyze and understand how this function is created.

![](https://cdn-images-1.medium.com/max/1600/1*B0Rsu1x9H0wFnC3C-hBCoQ.png)

The comment in `line 1--6` defines the `parameter`types that the function takes and the `return` type. In this sample, the function is expecting a `name`parameter of type `string` and it will return a `body` of type `object.`

`line 7` is exporting our function with a`module.exports` method. Let's check it out. Change the name in `line 7` to your name as I have in the screenshot.

![](https://cdn-images-1.medium.com/max/1600/1*aTPhMtE1uJdg3ah4V8HP2Q.png)

Press the green `run` button to test out this sample function. You will see your code executed in the Endpoint viewer window with "Hello `<yourName>`, welcome to Autocode!" message.

You can also click the autogenerated endpoint URL on the bottom left, and a new window will open in the browser to display the message:

![](https://cdn-images-1.medium.com/max/1600/1*OUnHV4h7tqdhWiHx3GQOEw.png)

You can test passing a `name` parameter into your function via the URL and press enter to reload the page as I have: `?name=Student`

![](https://cdn-images-1.medium.com/max/1600/1*LtoSi6MgrI4hoq7Tx4okwg.png)

It's that simple to deploy reusable functions through [Autocode](http://Autocode)! If you would like to dive deeper into Autocode's framework, check out [FunctionScript on Github](https://github.com/acode/FunctionScript)!

Now that we understand how to set up functions on [Autocode](http://autocode.com) let's begin solving our first challenge problem!

**Step 2: Use pseudocode to craft a plan for solving the problem**

First, let's begin planning our execution with pseudocode. Pseudocode is a technique that helps programmers plan out an algorithm in a manner that is easy to understand. Pseudocode does not use any coding syntax, but it fully describes the necessary logic to build our functions. This facilitates implementation because we'll translate each line into code using the JavaScript Syntax...easy, right?

Let's try it!

Reread the problem as many times as needed and begin pseudocoding when ready:

Write a function that returns the greatest common factor between `**num1**` and `**num2**.`This means that the function should return the largest number that divides both `**num1**` and `**num2**.` 


For example, if we pass in the number 6 and number 10 into our function, our function should return 2. Inputting 4 and 8 should return 4 etc...

```javascript
(6, 10); // => 2
(4, 8); // => 4
(45, 30); // => 15
```

Pseudocode:

```javascript 
//First we need to define the functions expected parameters and return types in a comment

//Then we use module.exports to export our function and pass in two numbers (num1, num2) as parameters

//We will set a for loop with the iterator (i) set to num1

//As long as i is greater or equal to 1 continue the for loop

//Everytime the for loop continues decrement i by 1

//As we decrement we check to see if num1 modulo i is equal to zero and if num2 modulo i is equal to zero

//If both conditions are met then we will return i

//If the conditions aren't met then we have our for loop continue decrementing until both are both are met

```

**Step 3: Code it out on** [**Autocode**](http://Autocode.com)**!**

Now that we've planned out how to solve our challenge problem, we're ready to code it out.

Delete the sample hello world function inside the IDE.

![](https://cdn-images-1.medium.com/max/1600/1*B0Rsu1x9H0wFnC3C-hBCoQ.png)

Translate your pseudocode approach to JavaScript syntax inside the IDE as I have:

```Javascript
/**
* My greatestCommonFactor function 
* @param {number} num1 First number
* @param {number} num2 Second number
* @returns {number} i
*/
module.exports = async(num1, num2) => {
  for (let i = num1; i >= 1; i--) {
    if (num1 % i === 0 && num2 % i === 0) {
      return i;
    }
  }
}
```

**Step 3: Test and Deploy your solution on** [**Autocode**](http://Autocode.com)

Select the **Payload** button on the bottom right. Set test parameters by creating an object setting `num1` and `num2` as your keys and give them any two numbers you'd like. I've chosen `1550 and 1000`.

![](https://cdn-images-1.medium.com/max/1600/1*1FMQ7qtdwjZrS0oNugj2Gw.png)

Select the green **Run** button once you've set your test parameters. The greatest common factor of `1550` and `1000` is in fact `50`! Great Job. ⭐️

![](https://cdn-images-1.medium.com/max/1600/1*136yVQo99stV8FMI1oPFzA.png)

You can see your function live by clicking the autogenerated URL on the bottom left via your functions docs. To view the docs, select **Advanced Settings** in the bottom left cornerand then **Generated API Reference.**

![](https://cdn-images-1.medium.com/max/1600/1*0-seeSrkHB0kQt89-39YEA.png)

You can test passing in different numbers in the parameters sections and **Run** yourfunctionto check the greatest common factor as times as your heart desires.

![](https://cdn-images-1.medium.com/max/1600/1*P62uCXw3wgtdmbsxl45ljA.png)

**Breakdown of our Solution to challenge problem #1:**

**Line 1--6:** We set type `number` for `num1` and `num2` and a return type of `number` for `i`

**Line 8:** We export our async function with `module.exports` and pass in our two parameters `(num1, num2).`

**Line 9:** We use a `for loop` and declare `num1` to be our iterator `i`, as long as `i` is greater or equal to `1` we run our for loop and decrement by `1.`

**Line 10:** Our `if` statement checks to see if `num1` modulo `i` is equal to zero, and if `num2` modulo `i` equal to zero.

**Line 11:** If either condition`num1 % i === 0` or `num2 % i === 0` returns `false` our loop continues and the following `return` statement is ignored. When our `if` condition returns `true,`that means that both conditions are met, and then we `return` the iterator `i`. The iterator `i` is our greatest common factor between `num1` and `num2` .

We did it! 🙌 Congrats! We solved Problem #1. The rest should be a breeze now that you are familiar with Autocode.

### Challenge Problem #2:

**Step 1: Take your time reading the problem**

Write a function that takes in a name as a string and returns a string representing their nickname. A nickname is the name up to the second vowel repeated twice. See the examples.

Examples:

```javascript 
(Jacob); // => 'JACO-JACO'

(pikachu); // => 'PIKA-PIKA'

(janeth); // => 'JANE-JANE'

```

**Step 2: Begin strategizing with pseudocode!**

```javascript

//First define the functions expected parameter and return type in a comment above the function

//Use module.exports to export the function and pass in a a name as a string

//Create a variable that defines all vowels inside an array

//Create a variable to keep count of vowels and set it equal to 0

//Use for loop to count through every letter in the string (name)

//Create an intermediate variable to save every character in the string

//Inside the for loop condition use indexOf() method to check and count if character is in the index of vowels

//Use toUpperCase() method to convert string to uppercase

//return a string with characters from index 0 to i (including i)
```

**Step 3: Code it out on** [**Autocode**](http://Autocode.com)**!**

Create a new endpoint by right-clicking the `functions` folder on the left of the browser and select `New endpoint file`.

![](https://cdn-images-1.medium.com/max/1600/1*boDwU39I-hbeJ_BpSXTgXg.png)

Name your file `functions/nickname.js` and translate your pseudocode to JavaScript Syntax.

```javascript 
/**
* My nickname function 
* @param {string} name 
* @returns {string} str
*/
module.exports = async(name) => { 
  let vowels = 'AEIOUaeiou'.split(''); 
  let vowelCount = 0; 
  for (var i = 0; i < name.length; i += 1) { 
    let char = name[i]; 
    if (vowels.indexOf(char) > -1) { 
      vowelCount += 1; 
      if (vowelCount === 2) { 
        break;
      }
    }
  }
let str = name.slice(0, i + 1).toUpperCase(); 
  return str + '-' + str; 
}
```
**Step 3: Test and Deploy your solution on** [**Autocode**](http://Autocode.com)

Pass in a test `name`parameter and select the green `Run` button on [Autocode](http://Autocode.com) to view the results on the console.

![](https://cdn-images-1.medium.com/max/1600/1*gYL3SWgG7GFo3hH70ID11w.png)

And sure enough, when testing different names result in nicknames! 😃

![](https://cdn-images-1.medium.com/max/1600/1*R9c5YsLOwDgQNw7xZNznqA.png)

(Jacob); // => 'JACO-JACO'

(pikachu); // => 'PIKA-PIKA'

(janeth); // => 'JANE-JANE'

**Breakdown of our Solution:**

**Line 1--5**: We set a parameter type `string` for `name` and a return type of `string`

**Line 7:** Weexport our async function with `module.exports` and pass in our `(name)` parameter

**Line 8:** We define our vowels and use the split method to break our string of vowels into an array

vowels = [ 'A', 'E', 'I'...,'a', 'e', 'i'...]

**Line 9:** We set our count equal to zero

**Line 10:** We use a `for loop` to iterate through every character in `name`

**Line 11:** We set an intermediate variable to return every character in the string

**Line 12:** The if condition checks to see if a character is found in the index of vowels: `vowels.indexOf(char)` and returns the char location in the vowels array. If the char isn't in the index of vowels, then a -1 is returned, and the loop continues to the next character. If its location is greater than -1, then the logic continues.

**Line 13:** If the location is greater than `-1` we increment our `vowelCount` by one.

**Line 14:** We check to see if the `vowelCount` is 2, if `false` is returned, we skip the `if` statement and move on to the next letter, if `true` is returned that means that we have now counted two vowels, and we break out of the `for loop.`

**Line 20:** We use the `slice()` method to grab the characters starting at `index 0` and ending at `i`, we add `1` to `i` because the `slice` method doesn't include the end value. We also use `toUpperCase()` method to convert all the letters in our string to uppercase.

**Line 21:** We `return` the string plus a dash plus another string to have our result resemble the examples in the question

### Challenge Problem #3: Odd Ones Out

**Step 1: Read Carefully.**

Write a function that takes in an array of strings and returns a new array containing only elements that appeared an even number of times in the input array.

Examples:
```javascript 
const arr1 = ['a', 'b', 'b', 'c', 'd', 'c', 'c', 'd']\
oddOnesOut(arr1); // => [ 'b', 'd' ]

const arr2 = ['fish', 'fish', 'dog', 'cat', 'dog', 'dog']\
oddOnesOut(arr2); // => [ 'fish' ] 
```

**Step 1: Pseudo Code**

Let's strategize!

```javascript

//Create a helper function to count our elements in an array

//The helper function has one parameter that takes in an array of strings

//Use a for loop in the helper function to count our elements in the array

//Create and export a second function with a for loop to count the even elements

//Push the even elements into a new array

//Return that new array

```

**Step 2: Code it out on** [**Autocode**](http://Autocode.com)**!**

Create a new endpoint by right-clicking the `functions` folder on the left of the browser and select `New endpoint file`.

Name it `functions/oddOnesOut.js.` Delete the sample function and translate your pseudocode to JavaScript syntax as I have:

```Javascript 
/**
* My oddOnesOut function 
* @param {array} array 
* @returns {array} str
*/
function elementCount(array) { 
  let countObj = {};
for (let i = 0; i < array.length; i += 1) { 
    let key = array[i];
    
    if (countObj[key] === undefined) { 
      countObj[key] = 1; 
    } else { 
      countObj[key] += 1; 
    }
  }
return countObj; 
}
module.exports = async(array) => { 
  let count = elementCount(array);
  const result = [];
for (let key in count) { 
      let value = count[key] 
    if (value % 2 === 0) {
      result.push(key); 
    }
  }
return result;
}
``` 

**Step 3: Test and Deploy your solution on** [**Autocode**](http://Autocode.com)

Pass in a test `array` parameter inside the payload window:

`{"array": ['fish', 'fish', 'dog', 'cat', 'dog', 'dog']}`

Select the green `Run` button on [Autocode](http://Autocode.com) to view the results on the console:

![](https://cdn-images-1.medium.com/max/1600/1*X5eMeFn0MC4zWTLCDQq81g.png)

Your function will filter the odd elements out and return the following:

`["fish"]`

Great job!

**Breakdown of Solution:**

**Line 1--5**: We set a parameter type `array` for `array` and a return type of `array` for `str`

**Line 7:** We define a helper function `elementCount` that takes in an `array` of strings

**Line 8:** Wedeclare a `countObj` variable and initialize it to an empty object. This is where we store the different counts of elements in an array.

**Line 10:** We iterate through the array using a `for loop`. We declare `0` to be our iterator (`i`), as long as `i` is smaller than the length of our array, we run our for loop and increment by `1`.

**Line 11:** We set `key` as an intermediate variable that will give access to the element as we go through the `for loop`.

**Line 13:** We add a condition that checks to see if our `countObject` at index `key` is undefined. This condition will return `true` if the `countobject` does not contain the `Key` (element) that we're passing in.

**Line 14:** Whenthe condition returns `true` we set `countObj[Key]` equal to `1` If the condition is `false` which means that our `key` is already in the object, then we ignore this statement and move on to the next.

**Line 15- 16:** If our `key` is already stored in the `countObj` then we increment our key count by `1.`

**Line 20:** We return the `coutObj`

**Line 23:** We export our second function that takes in an array of elements we want to count

**Line 24:** We declare a variable `count` and set it to the object returned from the previous helper function `elementCount(array)`

**Line 25:** We define a variable `result` and initialize it to an empty array where we will be pushing the elements that show up an even number of times

**Line 27:** We use a **for...in loop** to iterate through the `count` object and check if the key has a value of modulo 0.

*A **for...in** loop is good for looping through all the key-value pairs in an Object.

**Line 28:** We set a variable `value` to `count[key]`

**Line 29:** Check to see if the `key` has a `value` modulo `0`

**Line 30:** If the condition is true, then we push that `key` to our `result` variable

**Line 34:** Return the `result`

### Thank you for reading and following my Journey!

That's it for now and thank you for reading! I hope you found this tutorial helpful. I'd love to hear from you if you have any questions. Feel welcome to email me at ledezmajane@berkeley.edu. I'll be happy to help!