Advertisement

Working With Primitive String, Number and Boolean Values

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called JavaScript Succinctly.
Boolean()
Null

Do not be mystified by the fact that string, number, and Boolean literals can be treated like an object with properties (e.g., true.toString()). When these primitive values are treated like objects by attempting to access their properties, JavaScript will create a wrapper object from the primitive’s associated constructor, so that the properties and methods of the wrapper object can be accessed.

Once the properties have been accessed, the wrapper object is discarded. This conversion allows us to write code that would make it appear as if a primitive value was, in fact, an object. Truth be told, when it is treated like an object in code, JavaScript will convert it to an object so property access will work, and then convert it back to a primitive value once a value is returned. The key thing to notice here is what is occurring, and that JavaScript is doing this for you behind the scenes.


Primitive Value Samples

Here's a few samples to demonstrate what I'm talking about:

String Sample: sample56.html

<!DOCTYPE html><html lang="en"><body><script>

	// String object treated like an object.
	var stringObject = new String('foo');
	console.log(stringObject.length); // Logs 3.
	console.log(stringObject['length']); // Logs 3.

	// String literal/primitive converted to an object when treated as an object.
	var stringLiteral = 'foo';
	console.log(stringLiteral.length); // Logs 3.
	console.log(stringLiteral['length']); // Logs 3.
	console.log('bar'.length); // Logs 3.
	console.log('bar'['length']); // Logs 3.

</script></body></html>

Number Sample: sample57.html

<!DOCTYPE html><html lang="en"><body><script>

	// Number object treated like an object.
	var numberObject = new Number(1.10023);
	console.log(numberObject.toFixed()); // Logs 1.
	console.log(numberObject['toFixed']()); // Logs 1.

	// Number literal/primitive converted to an object when treated as an object.
	var numberLiteral = 1.10023;
	console.log(numberLiteral.toFixed()); // Logs 1.
	console.log(numberLiteral['toFixed']()); // Logs 1.
	console.log((1234).toString()); // Logs '1234'.
	console.log(1234['toString']()); // Logs '1234'.

</script></body></html>

Boolean Sample: sample58.html

<!DOCTYPE html><html lang="en"><body><script>

	// Boolean object treated like an object.
	var booleanObject = new Boolean(0);
	console.log(booleanObject.toString()); // Logs 'false'.
	console.log(booleanObject['toString']()); // Logs 'false'.

	// Boolean literal/primitive converted to an object when treated as an object.
	var booleanLiteral = false;
	console.log(booleanLiteral.toString()); // Logs 'false'.
	console.log(booleanLiteral['toString']()); // Logs 'false'.
	console.log((true).toString()); // Logs 'true'.
	console.log(true['toString']()); // Logs 'true'.

</script></body></html>

When accessing a property on a primitive number directly (not stored in a variable), you have to first evaluate the number before the value is treated as an object (e.g., (1).toString(); or 1..toString();). Why two dots? The first dot is considered a numeric decimal, not an operator for accessing object properties.


You Should Typically Use Primitive String, Number, and Boolean Values

The literal/primitive values that represent a string, number, or Boolean are faster to write and are more concise in the literal form.

You should use the literal value because of this. Additionally, the accuracy of the typeof operator depends on how you create the value (literal versus constructor invocation). If you create a string, number, or Boolean object, the typeof operator reports the type as an object. If you use literals, the typeof operator returns a string name of the actual value type (e.g., typeof 'foo' // returns 'string').

I demonstrate this fact in the following code.

Sample: sample59.html

<!DOCTYPE html><html lang="en"><body><script>

	// String, number, and Boolean objects.
	console.log(typeof new String('foo')); // Logs 'object'.
	console.log(typeof new Number(1)); // Logs 'object'.
	console.log(typeof new Boolean(true)); // Logs 'object'.

	// String, number, and Boolean literals/primitives.
	console.log(typeof 'foo'); // Logs 'string'.
	console.log(typeof 1); // Logs 'number'.
	console.log(typeof true); // Logs 'boolean'.

</script></body></html>

Conclusion

If your program depends upon the typeof operator to identify string, number, or Boolean values in terms of those primitive types, you should avoid the String, Number, and Boolean constructors.

Advertisement