Primitives and objects

A basic introduction on what a primitive and an object are in JavaScript, how do they behave in a JS engine, and differences between them. Also explaining basic aspects of prototypal inheritance.

Transcript

1. Primitives & objects in JS
2. • undefined • null • Booleans • Numbers • Strings Primitive values Global property of the root object Keywords Syntax based Prototyped
3. Primitive values ‒ How they work var str = 'My string'; str.fancy = 27; console.log(str.fancy); //Shows undefined.
4. This behavior happens because primitives are immutable in JS. Primitive values ‒ How they work But how they work? Every time an operation happens on a primitive that has a related prototype, it is wrapped into an object, which is thrown away just after finishing the operation on it.
5. Primitive values ‒ How they work var str = 'My string'; str.fancy = 27; console.log(str.fancy); //Shows undefined. var str = 'My string'; (new String(str)).fancy = 27; console.log((new String(str)).fancy);
6. Primitive values ‒ How they work var str = 'My string'; console.log(str.charAt(0)); //Shows 'M'. var str = 'My string'; console.log((new String(str)).charAt(0));
7. Objects Everything that is not a primitive is an object. • Arrays are objects. • Functions, RegExps... are also objects. null is a primitive value; so: • null is not an object. • But typeof null = 'object'.
8. Objects All objects work as key-value storages, with inheritance through the prototype chain. Keys are always strings. { method: function() {}, 'array': [], 27: /.*/g }
9. Objects Date Array Function RegExp Object null All objects work as key-value storages, with inheritance through the prototype chain. Keys are always strings.
10. Objects • Object literals ({..}) always inherit from the Object constructor. • But some objects can not inherit from it! Date Array Function RegExp Object null Dict
11. Objects var myObject = {}; console.log(typeof myObject.valueOf); //Shows function. Usual case: var myDict = Object.create(null); console.log(typeof myDict.valueOf); //Shows undefined. console.log(myDict instanceof Object); //Shows false. Directly inheriting from “null”: Good for doing dictionaries skipping the hasOwnProperty check!
12. Arrays • Arrays are objects which keys go from 0 to length - 1, and are Array instances. • Remember, all keys are strings! • But they are usually not represented as hashmaps in memory; rather on a more efficient way.
13. Array-like objects • They do not inherit from Array! • Typical array-like objects are the arguments object, or returned from querySelectorAll. var elements = document.querySelectorAll('head, body'); console.log(elements.length); //Shows 2. console.log(Object.keys(elements)); //Shows ['0', '1', 'length']. console.log(elements instanceof Array); //Shows false. var arrayElements = Array.prototype.slice.call(elements);