[freeCodeCamp] Basic JavaScript - Strings
Tags: javascript, freecodecamp, strings, webdev
Published: 2020-06-02 09:58:13

Howdy fellows!

I hope you all are fine at this time of the pandemic. I am trying to utilize as much of my time as I can. So, I have started learning JavaScript from [freeCodeCamp](https://www.freecodecamp.org/)'s JavaScript curriculum. This is the second post in the series, which I am writing to keep notes of my learning, which might help someone else. You can find my previous post [here](https://dev.to/gutsytechster/freecodecamp-basic-javascript-comments-variables-and-mathematical-operations-69o).


Let's get started


# <u>Strings</u>


In JavaScript, a string can be written using any of the single or double quotes, as long as we start and end the string with the same quotation. For e.g.

```
var myString = "My name is Prashant";
var anotherString = 'I study in college';
```

In the above example, both `myString` and `anotherString` are valid strings in JavaScript.


## <u>Escaping literal quotes in JavaScript</u>

When we need to insert a single or double quote within a string, we escape that character by pre-pending it by `\` i.e. a backslash.  For e.g.

```
var myString = "It is a \"double quoted\" string";
```

would result in

```
It is a "double quoted" string;
```

However, you may not need to escape the string if your surrounding quotes are not same as what you want in the string. Let me give you an example

```
var myString = 'I am a "double quoted" string';
```

would give the same result as above. As you may notice, here we didn't need to escape the quote as the surrounding quote is a single quote (`''`), but what we used inside is a double quote.
Vice -versa would be true as well i.e. you may keep the double quotes for surrounding your string and use single quote inside of your string without escaping.

## <u>Other escape sequences in String</u>

Apart from using escape sequence for multiple quotes within the same string, escape sequences are also used to type out characters which we may not be able to do otherwise. For e.g. a tab.

Some of the escape sequences present in JavaScript can be listed as

- `\'` for single quotes
- `\"` for double quotes
- `\\` for backslash, when you want to use backslash as a character in a string
- `\n` for newline
- `\r` for carriage return
- `\t` for tab
- `\b` for word boundary
- `\f` for a form feed

## <u>String Concatenation</u>

We can concatenate two strings using the `+` operator. For e.g.

```
var myString = "My name is Prashant" + " and I love programming.";
```

would give result as

```
"My name is Prashant and I love programming".
```

Make sure you give spaces where you want. Concatenation doesn't add spaces by itself. You may notice, I've provided a space in the second part of string concatenation.

You can use the shorthand `+=` for concatenation as well. For e.g.

```
var myString = "My name is Prashant";
myString += " and I love programming";
```

This would give the same result as above.

We can use variables to store part of strings and then use them for concatenation. For e.g. the above example can also be written as

```
myName = "Prashant";
myHobby = "programming";

myString = "My name is " + myName + " and I love " + myHobby;
```

## <u>Finding the length of a string</u>

To find the length of a string, we can make use of `length` property available to `String` data type as

```
var myString = "Prashant";
myString.length; // This would give us 8
```

Look carefully, how I have used the property using the `.`(dot)  with the variable.

You may directly use the string to access its length property instead of storing it to a variable like

```
"Prashant".length; // This would also give us 8
```

## <u>Accessing individual characters of a string</u>

We can access each character of a string using indexes. In JavaScript, we have indexes start from 0. Indexes are used along with the bracket notation to access the characters as

```
var myStr = "Example";
myStr[0]; // This would give us the 1st character of myStr i.e. "E"
myStr[1]; // This would give use the 2nd character i.e. "x".
```

This was easy, wasn't it?

- **<u>Accessing the last character of a string</u>**

When you want to get the last character of the string, you may not know the last index of the string. In such cases, we can make use of the `length` property, we just discussed above.

We know that `length` property gives us the length of a string. So can you now think of at what index would the last character of a string be? Yes, it would be the `length - 1` as index starts with 0 in JavaScript.

For e.g. in the above example, `Example` has length `7` but the last index of this string is `6`. I hope, now you get it.

```
myStr[myStr.length - 1];  // This would give you the last character of myStr
```

- **<u>Accessing last to Nth character in a string</u>**

In a similar fashion as above, if you want to get the nth character from the last, you can access it using `myStr.length - n`, when `n` is the nth character from the last.

## <u>String Immutability in JavaScript</u>

In JavaScript, strings are immutable i.e. once created you cannot alter the contents of a string. For e.g.

```
var myStr = "Pan";
myStr[0] = "C";
```

would result in the following error as we are trying to alter the contents of `myStr`.

```
TypeError: Cannot assign to read only property '0' of string 'Pan'
```

But this doesn't mean that we can't change the value of `myStr`. You can always reassign it to any other value. It's just that individual characters of a string cannot be changed.

# <u>Conclusion</u>

In this post, we got familiar with the fundamentals of a string in JavaScript and how to manipulate and access them.


# <u>References</u>

- [Introduction to JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/)
- [Conquering freeCodeCamp – Basic JavaScript (Part 1) – Live Stream #11](https://www.youtube.com/watch?v=ZCZ2u14xsS4&list=PLgBH1CvjOA62oNEVgz-dECiCZCE_Q3ZFH&index=12&t=0s)

I will be talking about other JavaScript fundamentals in the next post. Till then, be curious and keep learning! :)