Modern Javascript Basics - Part IV

A string is considered of primitive type in javascript. this means it's immutable or can't be changed. I admit the first I read and researched this, it was difficult to understand the difference between primitive (immutable/ unchangeable) and reference/object types that I ended up writing about the differences between the two in this article..

This post is the fourth part of a blog series that focuses on modern javascript basics. if you haven't had a chance to read the previous parts here's a list and their links;

1. Modern javascript basics PART I - Type Coercion - Visit Post.

2. Modern javascript basics PART II - Javascript rules - Visit Post.

3. Modern javascript basics PART III - Null vs Undefined - Visit Post.

Since strings are built by a sequence of characters, most people assume that they can operate like arrays and are changeable or can be adjusted. We are going to dive deep into this datatype in javascript. To begin, it’s important to know that even though a string is built of a combination of characters, it still remains of primitive type - meaning it cannot be changed.

This should not be confused with changing a string value as follows;

let userName = 'cyrus';
console.log(userName); //cyrus
userName = 'codes';
console.log(userName);//codes

The example above in no way demonstrates a string mutability. It just demonstrates that it's possible to change the value of a string variable. When we talk about a string being immutable we refer to its inability to adjust or change the original string. For example, let's try to change the userName to uppercase.

let userName = 'cyrus';
userName.toUpperCase();
console.log(userName); //cyrus

Javascript does not allow this. What actually happens is that by trying to change the string to uppercase, it returns a whole new string value in uppercase but the original string remains in lowercase. To prove it, we could try and find the returned string as follows;

let userName = 'cyrus'; // starts as lowercase
console.log(userName.toUpperCase()); //returns CYRUS but doesn’t alter userName
console.log(userName);// Original string is still in lowercase

This also applies when we try to treat the string as an array. We can access the string characters just like we would access array values as follows;

let userName = 'cyrus';
console.log(userName[0]); //c 

But as much as javascript allows this, it doesn’t allow us to change the characters. Example;

let userName = 'cyrus'; // starts as lowercase
console.log(userName[0]); //Acess the first letter of the name
userName[0] = 'S'; //try change the letter from c to S
console.log(userName); // The username doesn't alter and remains cyrus

I hope the examples above explain clearly why strings are deemed as primitives or unchangeable. One important thing to note is that primitive types are compared by value and are only considered the same when they have the same value. Example;

//numbers
let age = 5;
let number = 5;
console.log(age === number); //true

//null
let name = null;
let user = null;
console.log(user === name);//true

But in strings, this is not so obvious. Javascript considers two strings equal if and only if they have the same length and if the character at each index is the same. This means that in javascript, the string 'Cyrus' is totally different from 'cyrus' Let's prove it.

let userName = 'cyrus';
let account = 'Cyrus';
console.log(userName === account); //false

Also, another important thing to note is that for the strings to be equal they have to be of the same length. Have a look at this example;

let userName = 'cyrus ';
let account = 'cyrus';
console.log(userName === account); //false

This also explains why javascript is referred to as case sensitive - meaning that if both values were treated as variables they would be totally different.

We may expect that the result would be true since all the characters are in lowercase and are the same, but one tiny difference makes them unequal. the length;

let userName = 'cyrus ';
let account = 'cyrus';
console.log(userName.length); //6
console.log(account.length); //5

This means that in the first string, the empty space at the end of the string is counted as a character and hence has a bigger length than the second string. But if every character is the same and the length is also the same then the strings are deemed equal;

let userName = 'cyrus';
let account = 'cyrus';
console.log(userName === account);//true

This concludes the FOURTH part of this amazing blog post series of basic javascript with many more to come. Click here to read the other parts of the series and here.

You can also share this article on your social media to bookmark it for future reference or give access to your friends also working or interested in javascript language. You can follow me on Twitter , where I share countless resources and articles related to javascript and we can become lifetime friends and javascript lovers.

Finally,** THANK YOU for** so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee.

Until the next article, KEEP CODING & SHARING.