In this article, we will look at the three best ways you can get the first line of a multiline string in JS.

For those of you in a hurry, here is the best solution:

input.slice(0, input.indexOf("\n"));

And now if you want to learn more, let's dive deep into the details.

The Problem

The main problem in most solutions is that, in order to simply get the first line of the string, you have to operate over the entire string. If the input is too big, this operation takes an unnecessarily long time and consumes many resources.

Let's explain with an example.

Let's say, I have a gigantic string that contains 10 million lines of text and I want to get the first line of it. So I choose to use the Array.split method like in the following example:

input.split("\n")[0];

In this code, the split method operates over the entire 10 million lines to get only the first line. As a result, to get only the first item, I have an array containing 10 million items.

This operation takes approximately 1.7 seconds on my PC. This is unnecessarily long for such a small operation.

Let's look at the solutions to overcome this problem.

The Solutions

After some research, I found the three best ways of doing this operation:

1. Using the String.indexOf and String.slice methods.
2. Using the Array.split method.
3. Using the String.match method.

Here are the benchmark results of each solution:

Benchmark results

Also, you can access the benchmark results from this link and perform benchmarks yourself, too.

Let's explore each solution separately.

1. Using the String.indexOf and String.slice Methods

In this solution, we will use the String.indexOf method to find the index of the new line (\n) character, and then will slice the string to this index with the String.slice method.

input.slice(0, input.indexOf("\n"));

This solution takes first place in the benchmark results.

2. Using the Array.split Method

As you have seen in the problem, the Array.split method operates over the entire string. But it also accepts an optional limit parameter. We can leverage this parameter to avoid unnecessary operations.

input.split("\n", 1)[0];

In this code, we took advantage of the optional limit parameter and so the operation stops after the first split operation.

This solution takes second place in the benchmark results.

3. Using the String.match Method

This approach is for those of you who particularly want to use regex.

We will use the String.match method in this case. We will create a regex literal that matches with any character group which is followed by a new line character, and pass it to the method. The first element of the returned array (which is the match) is the first line.

input.match(/.*(?=\n)/)[0];

This solution takes third place in the benchmark results and performs two times slower than the first solution.

According to the MDN:

Before regular expressions can be used, they have to be compiled.

The performance downgrade is probably because of that.

Conclusion

In this article, we have looked at three different approaches to get the first line of a multiline string.

As developers, even for such a small operation, we should consider edge cases to avoid potential problems in the future.

Thank you for reading. You can connect with me on Twitter or explore more on my personal blog. Feel free to reach out — I'd love to hear from you!

You may think of using the useEffect hook for simple fetching operations, but it will not help you with caching, request deduplication, always serving real-time data, and so on.

Things will get more complicated when you try to implement them by yourself. But fortunately, the SWR library helps us solve some common problems and it also simplifies development.

What is the SWR Library?

According to the SWR documentation:

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861.

SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

With the help of this strategy, you can make sure to always display up-to-date data to your users.

So, SWR is a library built upon the stale-while-revalidate strategy, and it provides React hooks for data fetching.

Before moving on to the details, let's look at the two most important concepts of SWR.

Caching

A cache stores data for a specified amount of time and serves this data to users who request it within that period of time.

The time can be a certain period like 5000ms or can be an event like re-connecting to the Internet.

SWR automatically caches the fetched data, helping to quickly serve the data without making redundant network requests.

Revalidation

When the valid time is exceeded, the data becomes stale. When a user requests this data you should revalidate it before serving it.

If the data is stale, SWR revalidates it (re-fetches from the server) to keep it fresh.

By default, SWR automatically revalidates the data (it assumes that the data is stale) in three cases:

1. Every time the component is mounted, even if there is data in the cache, it revalidates.
2. It revalidates when the window gets focused.
3. It revalidates when the browser regains its network connection.

How to Use the useSWR Hook

The useSWR hook is the main hook of the library. In your projects, you'll almost always use this hook.

It accepts three parameters: key, fetcher, and options.

• key is a unique string for the request like an id.
• fetcher is an async function that accepts the key and returns the data. SWR automatically passes the key to the fetcher function when loading the data.
• options is an object of options available for the hook. For example, you can specify the cache time in the options object.

And it returns an object with data, error, isValidating, isLoading, and mutate properties.

• data is the variable returned from the fetcher function. During the first request, it will be undefined.
• error is the error thrown by the fetcher function. If there is no error, it will be undefined.
• isLoading is a boolean that indicates the first request's status. It is true during the first request, and it will always be false thereafter.
• isValidating is also a boolean that indicates the request's status. It is true during each request including the first one.
• mutate is a function for manually triggering a revalidation.

How I Used SWR in My Project

The best thing about SWR is how easy it is to use. I tried out it in my first project for the Front End Libraries Certification of freeCodeCamp and liked it very much.

I used TypeScript for the project, but will give you examples with JavaScript. So, don't worry if you don't know TypeScript – I highly recommend giving it a try if you haven't yet.

Also, if you are interested, you can find the project's code in its GitHub repository.

How to Add the swr Dependency to the Project

To be able to use the library, you can install it via npm, pnpm, or yarn. I prefer using pnpm as the package manager for my project.

$ npm i swr
# or
$ pnpm add swr
# or
$ yarn add swr

Create the fetcher Function

The goal of this function is to fetch the data by URL and return it. I will use the function with SWR.

const fetcher = async (url) => {
  const { data } = await axios.get(url);

  return data;
};

The fetcher function:

• accepts a url parameter,
• fetches the data with the get method of Axios,
• returns the data returned from the request.

Create a Hook That Fetches a Random Quote

Based on the SWR documentation, I created a hook called useRandomQuote. This hook is a wrapper for the useSWR hook. Thus, I can use the same data wherever needed.

import useSWR from 'swr/immutable';

const useRandomQuote = () => {
  const { data, ...restSWR } = useSWR(
    'https://api.quotable.io/quotes/random',
    fetcher
  );

  return {
    ...restSWR,
    quote: data?.[0],
  };
};

export { useRandomQuote };

The hook fetches the data with useSWR and returns an object that contains the variables destructured from the useSWR hook and the quote property which is the only element in the returned array. I used the Quotable API for a random quote, and the API returns an array with one element which is the random quote.

If you noticed, I imported the useSWR hook from swr/immutable in the code snippet. It is auto-revalidation disabled version of the hook. I prefer to use it because I want to revalidate the data manually with the mutate function.

How to Revalidate the Data Manually

If you want to manually revalidate the data, you can use the mutate function returned from the useSWR hook.

When the mutate function is called, SWR revalidates the data. During this process, the data variable remains the same (will not be undefined), and the isValidating variable becomes true.

The following diagram from the SWR documentation visualizes the revalidation process:

A diagram for the "Fetch and Revalidate" pattern in SWR

In my project, I have a QuoteCard component that displays the current quote. This component has a New Quote button that triggers retrieving a new random quote.

const QuoteCard = () => {
  const { /* ... */, mutate } = useRandomQuote();

  return (
    {/* ... */}
    <button
      // ...
      onClick={() => mutate()}
    >
      New Quote
    </button>
    {/* ... */}
  )
}

In the code above, I used the mutate function in the onClick handler of the New Quote button.

How to Handle Concurrent Requests

If the user initiates a new request alongside the ongoing one, this results in multiple concurrent requests. Each request waits for the previous one to complete before starting the process, resulting in unnecessary network usage and waiting time.

I faced the same issue in my project. When the user clicks the New Quote button while a request is still loading, the application triggers a new request alongside the existing one.

Concurrent requests that being triggered by clicking the "New Quote" button continuously

As you see in the GIF above, when I click the "New Quote" button consecutively, I have to wait for all requests to be done to see a random quote because SWR only updates the data after the last request is completed.

As a result, I should cancel the ongoing previous request after a new request is initiated. Although I checked SWR's documentation, I couldn't find a built-in solution for this issue. I tried to use AbortController with SWR, but couldn't succeed.

As a workaround, I disabled the New Quote button during validation to be able to prevent multiple concurrent requests.

A little note: I also checked React Query, and it has a built-in solution for that. I am planning to experiment with it in my next project involving remote data.

Conclusion

React doesn't care how you fetch and manage remote data. In this tutorial, you have learned how to do this with SWR. Although it has a big drawback regarding canceling concurrent requests, you can usually work around this and benefit from its upsides.

If you haven't used SWR before, I highly recommend trying it out in your future projects. It saves you time and prevents you from experiencing many types of bugs.

Thank you for reading. You can connect with me on Twitter or explore more on my personal website. Feel free to reach out — I'd love to hear from you!

Through this article, you will learn how to declare and mutate variables using var, let, and const, and you'll get a better understanding of the differences between them.

I will explain each concept in two parts:

• Before ES6 (var statement)
• After ES6 (let and const statements)

Let's dive into these different ways of declaring variables in JavaScript so you know how they work and when to use each one.

How to Declare Variables in JavaScript

When you declare variables in your app, the interpreter moves them to the top of their scope and allocates places in the memory before the execution starts. This process is called Hoisting.

1. How to declare variables with var in JavaScript:

When you declare a variable with var, it is hoisted and initialized in the memory as undefined before the code execution. So, you can access the variable before declaring it, but it returns undefined. This is sometimes called Declaration hoisting.

When the execution starts and reaches the line where the variable is declared, it replaces the value in memory with the value of the variable.

console.log(strawberry); // undefined

var strawberry = '🍓';

console.log(strawberry); // 🍓

Under the hood, the code above behaves like this:

var strawberry;

console.log(strawberry); // undefined

strawberry = '🍓';

console.log(strawberry); // 🍓

So we can use the strawberry variable before the declaration, but it returns undefined.

With this behavior, the program runs without errors. But in some cases, this can lead to unexpected results. We are only human, and on a busy day you might try to access a variable before declaring it. In a complex program, it can be hard to figure out where a strange undefined comes from.

2. How to declare variables with let and const in JavaScript:

When you declare a variable with let or const, it is also hoisted but it's allocated in the memory as uninitialized in the temporal dead zone. You cannot access variables in the temporal dead zone before you've declared them. So, if you try to access a variable before declaring it, the program throws a ReferenceError.

When the program reaches the line where the variable is declared, it initializes it with that value.

console.log(cherry); // ReferenceError

const cherry = "🍒";

console.log(cherry); // 🍒

If you try to run this code snippet, you will see an error similar to the following one because we tried to access a variable in the temporal dead zone.

"ReferenceError: Cannot access 'cherry' before initialization"

This is a more predictable behavior than the behavior of the var statement.

So what do var, let, and const have in common?

In the previous two sections, you learned the process for declaring var, let, and const. In this section, we will look at the common concepts.

• You can declare a variable with let and var without a value. In this case, the default value will be undefined.

var tomato;
let potato;

console.log(tomato); // undefined
console.log(potato); // undefined

This behavior is not valid for const because an initial value is required for it. If there is no initial value, the program throws a SyntaxError.

const avocado; // SyntaxError

For the code above, an error gets thrown like this one:

SyntaxError: Missing initializer in const declaration

• You can declare a chain of variables using the same statement. Put the statement at the beginning and separate each variable with a comma. This is valid for var, let, and const.

let number1 = 2, number2 = 23, number3 = 99;

console.log(number1); // 2
console.log(number2); // 23
console.log(number3); // 99

Nowadays, to declare variables, you'll want to use the ES6 statements let and const. You can think of var as the legacy method of doing this.

My recommendation is:

• Use const as the default.
• Use let if the variable will change in the future.
• Don't use var if there is no particular use case.

JavaScript Variables and Scope

According to MDN:

The scope is the current context of execution in which values and expressions are "visible" or can be referenced.

In terms of variables, the scope is where certain variables are available. We can access variables that have been declared in a parent scope in a child scope, but it doesn't work the other way around.

Global Scope

Global Scope is the main scope that covers all the scopes in a script. Variables declared in the global scope are available in all scopes.

// Global Scope

const grapes = "🍇";

// Functional Scope
function logGrapes() {
  console.log(grapes); // 🍇

  // Block Scope in a Functional Scope
  {
    console.log(grapes); // 🍇
  }
}

// Block Scope
{
  console.log(grapes); // 🍇
}

In the example above, we can access the grapes variable from all child scopes because it is declared in the global scope.

Functional Scope

Functional scope is the scope created with a function declaration. Variables declared in a functional scope are only available in that scope and cannot be accessed outside of it. The behavior of var, let, and const are the same in this case.

Here's an example:

// Global Scope

// Functional Scope
function createVariables() {
  var apple = "🍎";
  const cherry = "🍒";
  let strawberry = "🍓";
}

console.log(apple); // ReferenceError
console.log(cherry); // ReferenceError
console.log(strawberry); // ReferenceError

In the example above, all three variables are only accessible in the functional scope of the createVariables function. If you try to access them outside of the functional scope the program throws a ReferenceError.

Block Scope

Block scope is the scope that is created with a pair of curly braces. Block scope is only valid for let and const, not var. When you declare a variable with var it is moved to the global scope or the nearest functional scope if it exists.

// Block Scope
{
  const banana = "🍌";

  // Block Scope in a Block Scope
  {
    console.log(banana); // 🍌

    var carrot = "🥕";
    let lemon = "🍋";
  }

  console.log(carrot); // 🥕
  console.log(lemon); // ReferenceError
}

In the example above:

• We can access the banana variable that we declared with const in the parent scope in the child scope.
• We can access the carrot variable declared with var in the child scope in the parent scope because the program moves it to the global scope.
• We can't access the lemon variable declared with let in the child scope in the parent scope because it cannot be accessed outside of the scope in which it's declared. If try to do that, the program throws a ReferenceError.

How to Mutate Variables in JavaScript

In this section, we'll talk about the var and let statements together, and then discuss how the const statement behaves. This is because the variables declared with var and let are mutable (that is, they can be changed), while variables declared with const are immutable.

1. Mutation in var and let statements

As I said, the variables declared with var and let are mutable, which means that you can assign new values to them. Here's what I mean:

var pepper = "🌶️";
let apple = "🍏";

pepper = "🫑";
apple = "🍎";

console.log(pepper); // 🫑
console.log(apple); // 🍎

In the example above, we mutated the pepper and apple variables, and they were assigned new values.

2. Mutation in const statement

Variables declared with const are immutable. So you cannot assign new values to them once you've declared them.

const strawberry = "🍓";

strawberry = "🍉"; // TypeError

If you try to run the code snippet above, the program throws an error like this:

"TypeError: Assignment to constant variable."

Objects are an exception for the immutability of the const statement because they have properties and methods, unlike primitives.

You cannot mutate them via assignment but can mutate them via their methods and property assignment. Here's an example:

const fruits = ["🍎", "🍐"];
const fruitEmojiMap = {
  apple: "🍎",
  pear: "🍐",
};

fruits[2] = "🍒"; // [ '🍎', '🍐', '🍒' ]
fruits.push("🍌"); // [ '🍎', '🍐', '🍒', '🍌' ]

fruitEmojiMap.cherry = "🍒"; // { apple: '🍎', pear: '🍐', cherry: '🍒' }

In the code example above,

• We added two new fruits to the fruits array via property assignment, and used the push method of the Array object.
• We added a new fruit to the fruitEmojiMap object via property assignment.

A little note: you can use the [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) method to achieve complete immutability for objects.

How to Redeclare Variables in JavaScript

Redeclaring a variable with the same name in the same scope is likely something you don't want to do intentionally, and I've never found a real use case for it.

But strangely, we can redeclare variables declared with var using the same name in the same scope. This is another error-prone characteristic of the var statement. Fortunately, this behavior was changed with the let and const statements.

1. How to redeclare variables with var

You can redeclare a variable declared with var in the same scope or child-parent scopes. The variable will be affected in the global scope, or functional scope if it is declared in a function.

So even if you redeclare a variable in the child scope, the variable will change in all scopes where that variable is available.

// Global Scope
var pepper = "🌶️";

console.log(pepper); // 🌶️

// Block Scope
{
  var pepper = "🥦";

  console.log(pepper); // 🥦
}

console.log(pepper); // 🥦

In the example above, we declared a new pepper variable in the block scope and assigned it a different value. This affects the variable in the global scope and we lose access to the previous variable.

This behavior tends to cause big problems. Because someone working in the same codebase may unintentionally declare a variable using the same name used before.

The process is a bit different if you make the redeclaration in a function. The variable outside of the function remains the same and the variable inside the function cannot affect it. As I said, variables declared with var in a function are in functional scope and don't affect the outside.

// Global Scope
var onion = "🧅";

// Functional Scope
function redeclareOnion() {
  var onion = "🧄";

  console.log(onion); // 🧄
}

console.log(onion); // 🧅

In the example above, even though we declared a new variable using the same name as the onion variable inside a function, the onion variable declared in the global scope remained the same.

2. How to redeclare variables with let and const

You cannot redeclare variables declared with let or const in the same scope. If you try to do so, the program throws a SyntaxError.

let eggplant = "🍆";

let eggplant = "🥔"; // SyntaxError

In the example above, we tried to redeclare the eggplant variable in the same scope, and the program threw the following error:

"SyntaxError: Identifier 'eggplant' has already been declared"

But you can redeclare variables using let and const in child scopes. Because the variables declared with let and const are block scope and don't affect the parent scopes.

// Global Scope
const carrot = "🥕";

// Block Scope
{
  const carrot = "🍒";

  console.log(carrot); // 🍒
}

console.log(carrot); // 🥕

In the example above, we declared two carrot variables. The first one is in the global scope and the second one is in the block scope with a different value. The variable in the global scope remains the same and the variable in the block scope is a standalone new variable.

The downside is that we lost access to the carrot variable declared in the global scope, in the block scope. If we need this variable in the future we can't access the variable.

So, most of the time, it is better to declare a variable with a unique name.

3. How to Redeclare Variables by Mixing Statements

Briefly, you shouldn't mix statements. This section is intended to give you information rather than really show you how the process is done.

You cannot create variables by mixing statements using the same name in the same scope. If you try it, the program throws a SyntaxError.

const banana = "🍌";

var banana = "🍋"; // SyntaxError

In the example above, we tried to redeclare the banana variable declared with const with var, but the program threw an error similar to the one below:

"SyntaxError: Identifier 'banana' has already been declared"

Also, you cannot declare a variable with var using the same name as one already declared in a parent scope using let or const. As I said, var is global scope and affects the variable declared in parent scopes unless it is inside a function.

// Global Scope
let pineapple = "🍍";

// Functional Scope
function declarePineapple() {
  var pineapple = "🍏"; // This is okay
}

// Block Scope
{
  var pineapple = "🍎"; // SyntaxError
}

In the example above, we tried to redeclare the pineapple variable in two places:

• In the function, which we did successfully.
• But in the child block scope, the program threw the following error:

"SyntaxError: Identifier 'pineapple' has already been declared"

Conclusion

These days, let and const are the default choice for variable declaration in JavaScript. But you might still encounter the var statement, especially in older apps. So you'll need to know how to handle it.

In this guide, you have learned the differences between var, let, and const. We also talked about hoisting and scope in variable declaration.

See you in the next one!

Stay in Touch

You can connect with me on Twitter, and you can read more tutorials like this one on my blog here.