Julian on JavaScript: Objects

1. Julian on JavaScript: Objects Julian M Bucknall, CTO

2. Ubiquitous objects • Everything that’s not a boolean, number, string, null or undefined is … an object • Namely: • Arrays are objects • Functions are objects • And objects are objects

3. An object is… • A hash table, or • A collection of key/value pairs • The keys are strings • The values can be any type • If they’re data they’re known as properties • If functions, they’re known as methods • Passed as a reference not a value • NOT an instance of a class

4. Extending objects • Objects are not fixed: • You can add new properties/methods • You can remove a property/method • delete(myObject.name); • You can redefine a property/method

5. Creating an empty object • var o = {}; • Preferred • var o = new Object(); • It’s beginner stuff, no one does it this way • var o = Object.create(Object.prototype); • Just don’t

6. Creating an object • Easy way: object literals • Start with open brace, end with closing brace • Define set of key/value pairs • Separate them with commas • Each key is a string or some identifier • Each value can be anything, including expressions • Separate key from value with colon

7. Object literals… • Are great since you can use them wherever a value is needed

8. Object literals… • Are great for passing a set of data (parameters) to a function as a single parameter • Allows for default parameters • Needs an “extend” type function

9. Inheritance • Objects are NOT instances of some class • There are no classes in JavaScript • Objects can inherit from each other • Done through the “prototype”

10. Prototypes: reading manager • officeNumber • (prototype link) employee • name • (prototype link)

11. Prototypes: writing manager • officeNumber • (prototype link) employee • name • (prototype link)

12. Object.create • Object.create() makes a new object that inherits from (has as prototype) an existing one

13. Prototypal inheritance • C# has classes and classes inherit from each other • JavaScript has objects and objects inherit from each other through the prototype • It does the same thing, but differently

14. Prototypal inheritance • Works by… • Defining some interesting object • Then creating other objects with that as prototype • Object.create • Then customizing those new objects

15. Prototypal inheritance • The end of the prototypal chain is always Object.protoype • So all objects have some inherited methods • toString() • hasOwnProperty()

16. Arrays • Are objects • Are wacky compared to C# • Elements are key/value pairs • Key is the index as a string • length is always computed as “largest index” plus 1 • No single type for values • Don’t use “for .. in” with arrays, use for • The prototype is Array.prototype

17. How do you identify an array? • typeofobj returns “object” • Rats! • obj instanceof Array • Pretty good, but doesn’t work if object is from another iframe • ECMAScript 5? Array.isArray(obj) • Object.prototype.toString(obj) returns "[object Array]"

18. Creating an array • var a = new Array(); • It’s beginner stuff, people • var a = []; • Much better, no need to declare initial size • var a = [1, 2, "3", true]; • Much easier to read

19. Array methods • Defined on the Array prototype • Examples: • push/pop • shift/unshift • concat/join • slice/splice • sort

20. Removing an element • delete myArray[index]; • Just sets the element to undefined • myArray.splice(index, 1); • Removes the element • Reindexes the higher elements • Changes the length

21. Julian M Bucknall ∙ CTO ∙ DevExpress @jmbucknall julianb@devexpress.com http://devexpress.com/julian