Primitive Data Types in JavaScript

So far, we’ve worked with many different types of values in JavaScript. We’ve worked with Numbers and Strings and Booleans, we’ve seen Undefined, and maybe we’ve seen Null. Now we’ve been introduced to Objects, Arrays, and of course Functions, the latter two of which are technically a sub-category of Objects. Objects (including Arrays and Functions and other types of Objects) have properties.

In JavaScript, all values which are not Objects are collectively referred to as primitives.

Let’s review the six types of primitives:

  • undefined
  • null
  • boolean
  • string
  • number
  • symbol (New type, introduced in ES6)

Anything not in that list (for example, a Date) is an Object. Those six primitive types, plus Object, make up the seven fundamental types of JavaScript.

The preceding part of this reading you should be able to remember. The upcoming part is mostly an interesting technicality.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Stretch Reading:

As it turns out, in JavaScript, primitive values do not have properties. At first when you read this, you might not notice what’s surprising about this. “So what?”, you say. Well, if a property is that thing you can access like object.property, and if primitive values don't have properties, and a string is a primitive value.... then what's the deal with someString.length or someNumber.toString()? I'm glad you asked!

Each primitive (excluding symbol which is new and has weird rules) has a corresponding object constructor; you can see this clearly in this example:

typeof(true); 
// "boolean"
typeof(Boolean(true)); 
// => "boolean"
typeof(new Boolean(true)); 
// => "object"
/*  
It is generally considered bad practice to use primitive object constructors.
*/

An object constructor can be invoked with the word new, as seen above. Each object has methods associated with them based on what constructor was used.

One interesting thing to note, and as stated above, is that primitive data types do not have properties. Something you may be asking is then why does "someString".length return a value? Let's take you back to the behaviour of == vs ===. When you use ==, JavaScript does this fun thing called type coercion. This means that Javascript will take different data types, and one of them will be converted to an "equivalent". A good example of this is:

'1' == 1; 
// => true
'1' === 1; 
// => false

In the case of someString.length, someString is coerced to a string object in order to access the property length. However, someString itself is still a primitive data type.

Here are some examples of calling the String object properties, on a primitive string:

// some examples of String properties: 
var str = "someString"; 
console.log(str.toUppercase); 
// => SOMESTRING
console.log(str.toLowercase); 
// => somestring
console.log(str.split("")); 
// => [ 's', 'o', 'm', 'e', 'S', 't', 'r', 'i', 'n', 'g']
console.log(str.split()); 
// => ['someString']

You can actually test the difference between the constructor and actual primitive. Here we can see that the == (type-coercion vulnerable) comparative returns true, while the === comparative returns false.

var word = "Hello, world!" 
var otherWord = new String("Hello, world!");
word == otherWord; 
// => true
word === otherWord; 
// => false

If you’d like a reputable source to read more about JavaScript values, please continue onto this reading here: http://2ality.com/2011/03/javascript-values-not-everything-is.html


Thank you Jeremy Holman for you contributions :-)

Originally published at gist.github.com.

Like what you read? Give Natalie Mok a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.