10.11. Studio: Functions

The reverse method flips the order of the elements within an array. However, reverse does not affect the digits or characters within those elements.

Example

let arr = ['hello', 'world', 123, 'orange'];

arr.reverse()
console.log(arr);

Console Output

['orange', 123, 'world', 'hello']

What if we wanted the reversed array to be ['egnaro', 321, 'dlrow', 'olleh']?

Let's have some fun by creating a process that reverses BOTH the order of the entries in an array AND the order of characters within the individual elements.

Remember that a function should perform only one task. To follow this best practice, we will solve the array reversal by defining two functions - one that reverses the characters in a string (or the digits in a number) and one that flips the order of entries in the array.

10.11.1. Reverse Characters

1. In the composing functions section, we examined a function that reverses the characters in a string using the split and join methods. Let's rebuild that function now.

   1. Define the function as reverseCharacters. Give it one parameter, which will be the string to reverse.

   2. Within the function, split the string into an array, then reverse the array.

   3. Use join to create the reversed string and return that string from the function.

   4. Below the function, define and initialize a variable to hold a string.

   5. Use console.log(reverseCharacters(myVariableName)); to call the function and verify that it correctly reverses the characters in the string.

   6. Optional: Use method chaining to reduce the lines of code within the function.

Code exercises 1 - 3 at repl.it

Tip

Use these sample strings for testing:

1. 'apple'

2. 'LC101'

3. 'Capitalized Letters'

4. 'I love the smell of code in the morning.'

10.11.2. Reverse Digits

2. The reverseCharacters function works great on strings, but what if the argument passed to the function is a number? Using console.log(reverseCharacters(1234)); results in an error, since split only works on strings (TRY IT). When passed a number, we want the function to return a number with all the digits reversed (e.g. 1234 converts to 4321 and NOT the string "4321").

   1. Add an if statement to reverseCharacters to check the typeof the parameter.

   2. If typeof is 'string', return the reversed string as before.

   3. If typeof is 'number', convert the parameter to a string, reverse the characters, then convert it back into a number.

   4. Return the reversed number.

   5. Be sure to print the result returned by the function to verify that your code works for both strings and numbers. Do this before moving on to the next exercise.

Tip

Use these samples for testing:

1. 1234

2. 'LC101'

3. 8675309

4. 'radar'

10.11.3. Complete Reversal

3. Now we are ready to finish our complete reversal process. Create a new function with one parameter, which is the array we want to change. The function should:

   1. Define and initialize an empty array.

   2. Loop through the old array.

   3. For each element in the old array, call reverseCharacters to flip the characters or digits.

   4. Add the reversed string (or number) to the array defined in part 'a'.

   5. Return the final, reversed array.

   6. Be sure to print the results from each test case in order to verify your code.

Tip

Use this sample data for testing.

Input	Output
['apple', 'potato', 'Capitalized Words']	['sdroW dezilatipaC', 'otatop', 'elppa']
[123, 8897, 42, 1138, 8675309]	[9035768, 8311, 24, 7988, 321]
['hello', 'world', 123, 'orange']	['egnaro', 321, 'dlrow', 'olleh']

10.11.4. Bonus Missions

4. Define a function with one parameter, which will be a string. The function must do the following:

   1. Have a clear, descriptive name like funPhrase.

   2. Retrieve only the last character from strings with lengths of 3 or less.

   3. Retrieve only the first 3 characters from strings with lengths larger than 3.

   4. Use a template literal to return the phrase We put the '___' in '___'. Fill the first blank with the modified string, and fill the second blank with the original string.

   5. Build your function at repl.it.

5. Now test your function:

   6. Outside of the function, define the variable str and initialize it with a string (e.g. 'Functions rock!').

   7. Call your function and print the returned phrase.

6. The area of a rectangle is equal to its length x width.

   1. Define a function with the required parameters to calculate the area of a rectangle.

   2. The function should return the area, NOT print it.

   3. Call your area function by passing in two arguments - the length and width.

   4. If only one argument is passed to the function, then the shape is a square. Modify your code to deal with this case.

   5. Use a template literal to print, "The area is ____ cm^2."

   6. Code the area function at repl.it.

Tip

Use these test cases.

1. length = 2, width = 4 (area = 8)

2. length = 14, width = 7 (area = 98)

3. length = 20 (area = 400)