DEV Community: Kirsty

JavaScript String Manipulation: How to Use Split, Reverse, and Join

Kirsty — Fri, 11 Oct 2024 22:05:53 +0000

Introduction

In this article, we will look at three JavaScript methods: split(), reverse(), and join(). These methods are helpful for working with strings and carrying out tasks such as reversing text or changing the order of words.

Prerequisites

No prior experience is needed—just a willingness to dive into JavaScript and experiment with these methods.

The `split()` Method

The split() method breaks a string into an array based on a specified delimiter, which is passed as an argument. The delimiter tells the program where to "cut" the string. For example, if you have a sentence like "This is a lovely sandwich" and you want to break it into individual words, you can use a space (' ') as the delimiter.

const string = "This is a lovely sandwich";
const splitString = string.split(" ");

When you provide a space (' ') as the argument, the code looks for that space in the string and "splits" the string at each occurrence. This creates an array, where each word becomes an individual element.

The result of the above code is:

Array(5) [ "This", "is", "a", "lovely", "sandwich" ]

Pretty neat, right?

You can use any delimiter you want. For instance, if you have a hyphenated string like "hi-there-how-are-you-doing!" and you want to split it by hyphens, just use '-' as the delimiter:

const hyphen = "hi-there-how-are-you-doing!";
const splitHyphen = hyphen.split("-");

This results in:

Array(6) [ "hi", "there", "how", "are", "you", "doing!" ]

This method opens up many possibilities for manipulating strings. But now, you might be thinking: Okay, that’s great, but I started with a string and now I have an array. How do I get my string back?

Let’s move on to the next method.

The `join()` Method

The join() method can be used on an array to turn it back into a string. Just like split(), the join() method takes an argument that specifies how to join the array elements. The difference is that instead of breaking a string, join() uses the argument to combine the array elements back into a single string.

For example, using the splitHyphen array from earlier, you can join it back into a string by providing a space as the argument:

const joinedString = splitHyphen.join(" ");

This results in:

"hi there how are you doing!"

It’s like magic! Now your array is transformed back into a string, with spaces between each word.

The `reverse()` Method

The reverse() method changes the order of elements in an array to be the opposite of what it was. This method is called directly on the array, without any arguments, and it simply reverses the order of the elements.

For example, if you want to reverse the elements in the splitHyphen array, you can do this:

const reversedArray = splitHyphen.reverse();

The result is:

[ "doing!", "you", "are", "how", "there", "hi" ]

You can even use join() again to turn this reversed array back into a string:

const reversedString = reversedArray.join(" ");

This gives you:

"doing! you are how there hi"

Pretty cool, right?

Conclusion

In this article, we explored three essential methods in JavaScript: split(), reverse(), and join(). We looked at how they work together to manipulate strings and arrays, transforming them in flexible ways. I hope this helps you in your JavaScript journey and inspires you to experiment further!

Thank you for reading! If you have any questions or want to share your thoughts on JavaScript string manipulation, feel free to reach out to me on Twitter @km_fsdev.

A Week of React Learning: Key Takeaways and Future Plans

Kirsty — Sat, 15 Jun 2024 20:00:37 +0000

This week has been a fun week; it's my first week without any assignments for computer science and purely a week where I learned all sorts of React jazz. ✨

Not to mention, this week was the first week where I considered myself officially back on my 100Devs community-taught journey.

This week I learned:

This week, my focus was entirely on React. Here’s what I learned:

Fetching data in React

Having done Scrimba when I first started learning I knew something about fetching data within React, but, I could easily have failed to answer you, this week I fixed my tech debt knowledge about fetching data in a React application.

To start with I got a refresher crash course on the Fetch API. It was something I knew and understood how to use, from a JavaScript point of view. The Fetch API not being part of the JavaScript language, but, is a Web API. Having absolutely nothing to do with the JavaScript specification, and only exists due to the environment in which we are running our code - the browser - which was a wonderful refresher. It is something I am wildly fascinated by.

What I learned about fetching data in React is that the useEffect hook is required to fetch data, this is because:

without a useEffect hook we can run into infinite loops, and I tested it, it can just keep running, which is not a good thing.
Fetching data from an external point is a side-effect - and React has no way of handling this asynchronous behaviour. However, with the useEffect hook, we can handle side-effects, this is the entire purpose of the useEffect hook in the first place.

useEffect
useEffect is a React Hook that lets you synchronize a component with an external system.

In the case of fetching data - you need to synchronise the data you have received with your application, also likely, as I have been doing in my tests, using the useState hook.

I want to use this in my RecipeFinder project. :)

useReducer hook

I am still struggling with the useReducer hook, but the basics I have understood are:

it's like a super-powered useState
using useReducer is best when the state is complex, eg. an object with various properties.
it takes two arguments, an initial state, just as useState does, and then a second, an action argument, this action argument is what gives useReducer its super powered juice, using this second argument we can update state more efficiently based on actions in our code, which would reduce complexity and errors.

I still have to read and practice more with it. :)

Children in React

I had a crash course on JSX - JSX is just JavaScript under the hood.

It is objects - and I learned that React transpiles its JSX to these objects and it has a hierarchy of children, which are a representation of the DOM nodes that are rendered to the UI.

In doing this, I used Babel a lot.

Look how cool it is, the React component and what it transpiles to.

<MyComponent> 
  <div> 
    <h1> Hiya world! </h1>
    <h2> <span> oh a nested child </span> </h2>
  </div>
</MyComponent>

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*#__PURE__*/ _jsx(MyComponent, {
  children: /*#__PURE__*/ _jsxs("div", {
    children: [
      /*#__PURE__*/ _jsx("h1", {
        children: " Hiya world! "
      }),
      /*#__PURE__*/ _jsxs("h2", {
        children: [
          " ",
          /*#__PURE__*/ _jsx("span", {
            children: "Oh a nested child "
          }),
          " "
        ]
      })
    ]
  })
});

Not to mention I also got a nice exploration on the React Children prop, which, despite being listed as something that increases the risk of fragile code, is something I find cool.

Along with the Children prop, I learned the Children.map to transform Children in React, almost exactly how the map functions in vanilla JavaScript.

I like the pattern. It allows for really nice dynamic manipulation of children elements. I haven't used it much outside of the study lesson though. :) Soon. TM.

Custom hooks

I recall seeing "Custom Hooks" in the title of a YouTube video once, I didn't know much about hooks then, all I knew then was useState and the idea of a custom hook horrified me.

I was wrong.

Custom hooks are freaking awesome.

A custom hook is a module in React. It allows you to create a hook that performs a specific functionality all bundled up into a hook. This means you can share and use this hook anywhere in your code if you need it.

Reducing code duplication.

Higher-order components and render props

I noticed something this week as I was learning React.

A lot of React patterns/code revolve around reducing code duplication. Higher-order components and render props do exactly this.

With Higher order components we have a component and then we return a new one from our higher order one and this new component has extra features. It's an interesting pattern I have to explore more, but the general idea is:

When certain React logic is being reused a higher-order component might be a better option because it will reduce the code repetition, and then you can use that same higher-order component to implement similar logic in a different part of the application by returning a different component and modifying it to your use case.

Render props function much the same way, however, instead, they return a render() method with the data of the new component/data.

Portfolio time...

I also started a revamp of my portfolio.

I have been using a template & that is cool and great, it's neat, and it's functional, and I likely will go back to one, but, I am making my own right now. I am using React.

The goal is to implement a lot of the features and code I have learned.

Learning about context API and how it can be used to toggle between themes was super exciting and I would like to make several for my portfolio. My fear is the design and probably this means I will hunt for a Figma design file and code it myself.

This seems like a better idea to me.

Extras

A few extras I did this week:

I had a coffee chat with a front-end developer and it was pretty wonderful. I learned a lot from this person and got so many ideas, namely sharing my work and not learning in a vacuum, this is common advice and I have been working on that.
Their advice was to leverage LinkedIn as well, I am terrible at LinkedIn but, I will start to use it more. :)

Conclusion

Overall a wonderful week with React and I look forward to more, next week is Scrimba and I am super excited to dive into it and work on the projects. Will be super fun.

This is just the beginning. I am truly super excited to continue this journey.

More of my journey on ✨ X/Twitter ✨

DEV Community: Kirsty

JavaScript String Manipulation: How to Use Split, Reverse, and Join

Introduction

Prerequisites

The split() Method

The join() Method

The reverse() Method

Conclusion

A Week of React Learning: Key Takeaways and Future Plans

This week I learned:

Fetching data in React

useReducer hook

Children in React

Custom hooks

Higher-order components and render props

Portfolio time...

Extras

Conclusion

The `split()` Method

The `join()` Method

The `reverse()` Method