Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Primitives and objects

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.

Avatar for Miguel Jiménez

Miguel Jiménez

June 18, 2015
Tweet

More Decks by Miguel Jiménez

Other Decks in Programming

Transcript

  1. • undefined • null • Booleans • Numbers • Strings

    Primitive values Global property of the root object Keywords Syntax based Prototyped
  2. Primitive values ‒ How they work var str = 'My

    string'; str.fancy = 27; console.log(str.fancy); //Shows undefined.
  3. 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.
  4. 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);
  5. 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));
  6. 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'.
  7. Objects All objects work as key-value storages, with inheritance through

    the prototype chain. Keys are always strings. { method: function() {}, 'array': [], 27: /.*/g }
  8. Objects Date Array Function RegExp Object null All objects work

    as key-value storages, with inheritance through the prototype chain. Keys are always strings.
  9. Objects • Object literals ({..}) always inherit from the Object

    constructor. • But some objects can not inherit from it! Date Array Function RegExp Object null Dict
  10. 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!
  11. 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.
  12. 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);