What is the difference between JavaScript String Primitives vs String Objects

What is the difference between JavaScript String Primitives vs String Objects?

Learn about the difference between Javascript String primitives and String objects. This video covers how to discern between the two and which one is preferred while writing JavaScript code.

Code

let message1 = 'hello world!';
console.log('message1: ', message1)
console.log('type of message1: ',typeof message1)
console.log(message1.toUpperCase())


let message2 = String('hello world!');
console.log('message2: ', message2)
console.log('type of message2: ',typeof message2)
console.log(message2.toUpperCase())


let message3 = new String('hello world!');
console.log('message3: ', message3)
console.log('type of message3: ',typeof message3)
console.log(message3.toUpperCase())

Full Transcript

00:00 Hey, it's Deeksha Sharma from bonsaiilabs. Welcome to the series on JavaScript. Today. In this video we will learn what are string primitives and string objects in JavaScript and most important thing. What's the difference between them? So get ready. String is a built in object in JavaScript and is actually an array of characters, which means every character in the string can be accessed at a specific index starting from zero to the end of the string. Also, strings are immutable, which means applying any method or operation on string doesn't really change the original string. It instead creates a new string. Now there are a couple of ways strings can be created in JavaScript. They can be created using the new keyword with string constructor. They can also be created by invoking the string global object without the new keyword. It takes as an argument. Anything that needs to be converted to string.

00:47 This is also called a non constructor context. The third and the simplest form of creating string is by enclosing it inside the single or double quotes. It is called string literal. Now are you thinking if they all can create a string, how are the different? They actually are, the first message that is initialized using the new keyword with constructor returns a string object. Whereas these two subsequent messages created either by calling string global object without new keyword or the literal form return string primitive. Primitives are the values at the lowest level of the language implementation and JavaScript automatically converts these primitive strings to string objects for you. This happens so that string methods and properties that a string object has are also available on the primitive strings. These are some of the frequently used methods and property available to string object. Methods are a way to allow certain operations on a string object, whereas property is nothing but an attribute of a string.

01:42 For example, length is a property and others with a parentheses are methods of string object. They're also available to the primitive string, we create using these two approaches. As a general rule of thumb, you should choose either of these two approaches to create a string. There is no good reason to use the constructor with new keyword because it hurts the performance. Calling methods on the primitives is faster than calling them on object. And if you're wondering how to verify the type when creating a string ? Typeof operator provided by JavaScript is your best friend typeof operator for either of these two approaches, written string type, since they both written a primitive string and calling typeof message here, which is created using the new keyword with string constructor returns an object. Now that we have learned something about string primitives and objects, why don't we head onto the editor to write some code. Let's try to initialize a variable message1 equals to hello world. And let's have another variable message2 and that should be using the non constructor context string function. Hello world. .

02:51 Oops. Let's remove w from hello and here is our hello world.

02:59 And

03:00 Finally we will have message3 using the new keyword with string constructor and the same string hello world. So now you can see we have used all three approaches to create a string. Now that we have string ready, let's try to log if all of three result in the same string. So we do it for, message1 and try to log what's the value of message1. We do the same thing. Copy and paste for the second message and just change the value and same for message3. Now when we run this, we see that message one and two are hello world, but message three looks a little bit different. Well it is different because it's an object, but let's prove that we will make use of typeof operator which lets us know that type of value stored in a variable. So let's say typeof message, we will have a label with typeof message1.

03:55 We do the same thing for message2 just rename them. And the same for message3 and there it is. We see that message1 and two are of type string. But message3 is of type object. Let's also try to use a method on message1 say toUpperCase(), we call it a method. And we do the same thing with say, message2 just change the name and with message3. All right, so all of them converted HelloWorld to the upper case. And that is because all the methods and properties that are available on message3, which is a string object, are also available on string primitives. If we try to look at message one dot, the list of methods, it's the same methods that are available on object. Now you know, what's the difference between string primitives and string objects and how to get the type when you are declaring and initializing a string?

04:51 I hope you enjoyed watching this video. Thanks for your time and feel free to drop comments. If you would like to learn a specific topic, I will cover them in the future JavaScript videos. Be sure to subscribe and until then keep learning and share your knowledge.