Welcome to the first Web Basics blog post. Web Basics is a series on essential programming topics every web developer should absolutely know! You can catch the web basics post every week on my Instagram.
Here are the 3 methods I'll be covering:
By the end of this you will be able to apply solve this basic algorithm challenge:
/** Reverse a String * * Write a function that will reverse a string * Your result must be a string. * */
More on this challenge later. Let's get started with our lesson 🤓
This method slices up your string into separate substrings. In my example, I’m splitting it by ('') which means split each letter. So the output is an array of each letter.
const name = 'samantha'; const result = name.split(''); console.log(result); // [ 's', 'a', 'm', 'a', 'n', 't', 'h', 'a' ]
This method is used to reverse the order of the elements in an array. One thing to note is, this method does mutate your original array.
const letters = ['a', 'b', 'c']; const result = letters.reverse(); console.log(result); // [ 'c', 'b', 'a' ] console.log(letters); // [ 'c', 'b', 'a' ]
⚠️ Things to note:
- It does mutate your original array.
- It only reverses the array. It doesn't print alphabets in descending order.
Web Basics Example:
Ex 1: Arrays of Integers
const numbers = [2, 10, 5]; const result = numbers.reverse(); console.log(numbers); // [ 5, 10, 2 ]
Ex 2: Array of Emojis
Nothing fancy here, just treat these emojis likes strings. I'm wrapping it around single quotes
' (and yes double quotes will also work
const medals = ['🥇', '🥈', '🥉']; const result = medals.reverse(); console.log(result); // [ '🥉', '🥈', '🥇' ]
Emojis are definitely a bit different from normal characters (), so you will run into some issues when you're trying to parse through it. But let's save that for a different lesson.
Ex 3: Array of mix types
const mix = [true, 'hi', false, 100]; const result = mix.reverse(); console.log(result); // [ 100, false, 'hi', true ]
This method pieces all the item in an array together by commas (the default) or a specified separator. It returns a new string.
const pieces = [ 's', 'a', 'm', 'a', 'n', 't', 'h', 'a' ]; const result = pieces.join(''); console.log(result); // 'samantha' console.log(pieces); // Original array is not affected // [ 's', 'a', 'm', 'a', 'n', 't', 'h', 'a' ]
Web Basics Examples:
The default separator if you don’t pass in anything is commas
, To specify your own custom separator, you just pass it as the argument. ie. join('+').
const strings = ['Web', 'Basics', '!']; strings.join(); // default comma (,) // 'Web,Basics,!' strings.join( ); // empty space // 'Web Basics !' strings.join('-'); // dash // 'Web-Basics-!'
Array of Integers
const numbers = [2, 10, 5]; numbers.join(' + '); // '2 + 10 + 5'
Alright, now let's pieces everything together! Here's your algorithm challenge! You should be able to solve it with the built-in functions we went through together. And if you want to level up even further, try solving it without the built-in functions.
/** Reverse a String * * Reverse the provided string. * Your result must be a string. * * reverseString("hello") * Output: "olleh" * * reverseString("HoWdy") * Output: "ydWoH" * */
This challenge is from freeCodeCamp.org
How did you do, did you manage to solve it? I'm not going to put the solution in this blog post. But I will provide a link to my solution, which you can use compare with mine. Remember there are multiple ways to solve this challenge. There is no right way or wrong way. That's the great thing about programming, you can achieve the same result with a multitude of ways. Of course, some ways are more performant than others. But you know what, as code newbies, let's just focus on being able to solve it. That's the first step. And you can always refactor as you gain more confidence and learn more ways of problem solving.
Good Luck! I hope you enjoy this new Web Basics post! Share your solution is also a great way to learn from each other. So if you have other ways of solving this, please share them in the comment below 😊