Creating custom collections in javascript.

1. Extending JavaScript part one

2. Everythingshould beas simple as it is, but not simpler. Albert Einstein

3. Javascript is a loosely-typed language

4. Javascript is a loosely-typed language var x = 23; //number

5. Javascript is a loosely-typed language var x = 23; //number x = "Apple"; //string

6. Javascript is a loosely-typed language var x = 23; //number x = "Apple"; //string x = new Array(); //object

7. Javascript is a loosely-typed language var x = 23; //number x = "Apple"; //string x = new Array(); //object Any thing can be assigned to x.

8. What we are going to see in this presentation?

9. What we are going to see in this presentation? Creating type-safe collections like stackandqueue.

10. What we are going to see in this presentation? Creating type-safe collections like stackandqueue.

11. Creating type-safe collections

12. Creating type-safe collections For help.. Add two methods into the Array class; one to know whether an array contains particular item and the other to remove an item at particular index.

13. Creating type-safe collections For help.. Add two methods into the Array class; one to know whether an array contains particular item and the other to remove an item at particular index. Array.prototype.contains = function(element) { return this.indexOf(element) > -1; } Array.prototype.remove = function(index) { return this.splice(index, 1); };

14. Creating type-safe collections For help.. Create an array that contains the primitive types. var primitives = ["number", "string", "object", "boolean", "function"];

15. Let's make our hands dirty

16. Stack

17. Stack Plan Create a new class named Stack.

18. Stack Plan Create a new class named Stack. Encapsulate an instance of array in a property.

19. Stack Plan Create a new class named Stack. Encapsulate an instance of array in a property. Create a constructor that takes a parameter for the type of data to be stored.

20. Stack Plan Create a new class named Stack. Encapsulate an instance of array in a property. Create a constructor that takes a parameter for the type of data to be stored. For storing primitive types pass the type name to the constructor. var myStack = new Stack("string");

21. Stack Plan For storing custom types pass the type itself to the constructor. var Employee = function() { }; //custom type var myStack = new Stack(Employee);

22. Stack Plan For storing custom types pass the type itself to the constructor. var Employee = function() { }; //custom type var myStack = new Stack(Employee); Check the type is valid in the constructor.

23. Stack Plan For storing custom types pass the type itself to the constructor. var Employee = function() { }; //custom type var myStack = new Stack(Employee); Check the type is valid in the constructor. Create a method named push() to push items into the collection.

24. Stack Plan For storing custom types pass the type itself to the constructor. var Employee = function() { }; //custom type var myStack = new Stack(Employee); Check the type is valid in the constructor. Create a method named push() to push items into the collection. Create a method named pop() to remove the last added item from the collection.

25. Stack Plan Create a method named getValue() to get the item at particular index.

26. Stack Plan Create a method named getValue() to get the item at particular index. Create a method named setValue() to set the item at particular index.

27. Stack Plan Create a method named getValue() to get the item at particular index. Create a method named setValue() to set the item at particular index. Create a property named length that returns the total no. of items in the collection.

28. Stack Action Create a new class named Stack. var Stack = function(type){ }

29. Stack Action Create a new class named Stack. var Stack = function(type){ } Function is a first class object in javascript.

30. Stack Action Create a new class named Stack. var Stack = function(type){ } Function is a first class object in javascript. Stack is the class name.

31. Stack Action Create a new class named Stack. var Stack = function(type){ } Function is a first class object in javascript. Stack is the class name. type - data type to be stored.

32. Stack Action Create a new class named Stack. var Stack = function(type){ } Function is a first class object in javascript. Stack is the class name. type - data type to be stored. {} - the body code of the function is the constructor.

33. Stack Action The constructor should take a parameter for the type of data to be stored. var Stack = function(type){ if(arguments.length != 1) throw new Error("There is noconstructor that takes " + arguments.length + " arguments"); ...

34. Stack Action The constructor should take a parameter for the type of data to be stored. var Stack = function(type){ if(arguments.length != 1) throw new Error("There is noconstructor that takes " + arguments.length + " arguments"); ... If the constructor takes less or more than one parameter throw error.

35. Stack Action Check the type is valid in the constructor. var Stack = function(type){ if(arguments.length != 1) throw new Error("There is noconstructor that takes " + arguments.length + " arguments"); if(primitives.contains(type)) this.isPrimitive = true; else if(typeof type == "function") this.isPrimitive = false; else throw new Error("Invalid Type"); ...

36. Stack Action Check the type is valid in the constructor. var Stack = function(type){ if(arguments.length != 1) throw new Error("There is noconstructor that takes " + arguments.length + " arguments"); if(primitives.contains(type)) this.isPrimitive = true; else if(typeof type == "function") this.isPrimitive = false; else throw new Error("Invalid Type"); ... If the type is primitive set isPrimitive property to true else false.

37. Stack Action Encapsulate an instance of array in a property. this.type = type; this.array = new Array(); this.length = this.array.length; return this; } //constructor ends store the type in a property if it's valid.

38. Stack Action Encapsulate an instance of array in a property. this.type = type; this.array = new Array(); this.length = this.array.length; return this; } //constructor ends store an instance of array in a property.

39. Stack Action Create a property named length that returns the total no. of items in the collection. this.type = type; this.array = new Array(); this.length = this.array.length; return this; } //constructor ends store the length of array in a property.

40. Stack Action Set the constructor for the Stack. Stack.prototype.constructor = Stack;

41. Stack Action Set the constructor for the Stack. Stack.prototype.constructor = Stack; every function has a prototype property that helps in inheriting, overriding and adding new methods to the class on fly.

42. Stack Action Create a method named push() to push items into the collection. Stack.prototype.push = function(){ }

43. Stack Action Override the push() method to check if the data is of the specified type. Stack.prototype.push = function(){ } push - accepts multiple items atonce. myArray.push(12, 23, 34); So iterate through the arguments list and check each data is valid.

44. Stack Action Create a method named push() to push items into the collection. ... var is Valid; for(var i = 0, j = arguments.length; i < j;i++){ isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof arguments[i]) : (arguments[i] instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); } //loop ends

45. Stack Action Create a method named push() to push items into the collection. ... var is Valid; for(var i = 0, j = arguments.length; i < j;i++){ isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof arguments[i]) : (arguments[i] instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); } //loop ends If any item is not valid throw error.

46. Stack Action Create a method named push() to push items into the collection. for(var i = 0, j = arguments.length; i < j;i++){ this.array.push(arguments[i]); } this.length = this.array.length; return this.array.length; } //push() ends

47. Stack Action Create a method named push() to push items into the collection. for(var i = 0, j = arguments.length; i < j;i++){ this.array.push(arguments[i]); } this.length = this.array.length; return this.array.length; } //push() ends push all the items to the internalarray.

48. Stack Action Create a method named push() to push items into the collection. for(var i = 0, j = arguments.length; i < j;i++){ this.array.push(arguments[i]); } this.length = this.array.length; return this.array.length; } //push() ends set the length property.

49. Stack Action Create a method named pop() to remove the last added item from the collection. Stack.prototype.pop = function(){ this.array.pop(); this.length = this.array.length; return this.array.length; }

50. Stack Action Create a method named getValue() to get the item at particular index. Stack.prototype.getValue = function(index){ return this.array[index]; }

51. Stack Action Create a method named setValue() to set the item at particular index. Stack.prototype.getValue = function(index){ return this.array[index]; } Stack.prototype.setValue = function(index, value){ var isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof value) : (value instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); this.array[index] = value; return this.array[index]; }

52. Stack Complete var Stack = function(type){ if(arguments.length != 1) throw new Error("There is noconstructor that takes " + arguments.length + " arguments"); if(primitives.contains(type)) this.isPrimitive = true; else if(typeof type == "function") this.isPrimitive = false; else throw new Error("Invalid Type"); this.type = type; this.array = new Array(); this.length = this.array.length; return this; }

53. Stack Complete Stack.prototype.constructor = Stack; Stack.prototype.push = function(){ var is Valid; for(var i = 0, j = arguments.length; i < j;i++){ isValid = this.isPrimitive ? (this.type.toLowerCase() == typeofarguments[i]) : (arguments[i] instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); }

54. Stack Complete for(var i = 0, j = arguments.length; i < j;i++){ this.array.push(arguments[i]); } this.length = this.array.length; return this.array.length; } Stack.prototype.pop = function(){ this.array.pop(); this.length = this.array.length; return this.array.length; } Stack.prototype.getValue = function(index){ return this.array[index]; }

55. Stack Complete Stack.prototype.setValue = function(index, value){ var isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof value) : (value instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); this.array[index] = value; return this.array[index]; }

56. It's time to test

57. It's time to test Steps Start the firefox.

58. It's time to test Steps Start the firefox. Open the firebug console window.

59. It's time to test Steps Testing constructor. var myStack = new Stack();

60. It's time to test Steps Testing constructor. var myStack = new Stack(); Error: There is no constructor that takes 0 arguments

61. It's time to test Steps Testing constructor. var myStack = new Stack("string1");

62. It's time to test Steps Testing constructor. var myStack = new Stack("string1"); Error: Invalid Type

63. It's time to test Steps Testing push(). var myStack = new Stack("string"); myStack.push(1);

64. It's time to test Steps Testing push(). var myStack = new Stack("string"); myStack.push(1); Error: Invalid Argument

65. It's time to test Steps Testing push(). var myStack = new Stack("string"); myStack.push("Apple");

66. It's time to test Steps Testing push(). var myStack = new Stack("string"); myStack.push("Apple"); 1

67. It's time to test Steps Testing push(). var myStack = new Stack("string"); myStack.push("Apple"); myStach.push("Orange", 3);

68. It's time to test Steps Testing push(). var myStack = new Stack("string"); myStack.push("Apple"); myStach.push("Orange", 3); Error: Invalid Argument

69. It's time to test Steps Testing push(). var Employee = function(name) { this.name = name };

70. It's time to test Steps Testing push(). var Employee = function(name) { this.name = name }; var myStack = new Stack(Employee);

71. It's time to test Steps Testing push(). var Employee = function(name) { this.name = name }; var myStack = new Stack(Employee); myStack.push("Apple");

72. It's time to test Steps Testing push(). var Employee = function(name) { this.name = name }; var myStack = new Stack(Employee); myStack.push("Apple"); Error: Invalid Argument

73. It's time to test Steps Testing push(). var Employee = function(name) { this.name = name }; var myStack = new Stack(Employee); myStack.push(new Employee("Stephenson")); 1

74. It's time to test Steps Testing getValue(). myStack.getValue(0);

75. It's time to test Steps Testing getValue(). myStack.getValue(0); Object { name="Stephenson" }

76. Queue

77. Queue Plan Most of the stuff are same like Stack except some things.

78. Queue Plan Most of the stuff are same like Stack except some things. Change the names of push() and pop() as enter() and exit().

79. Queue Plan Most of the stuff are same like Stack except some things. Change the names of push() and pop() as enter() and exit(). In Stack the last added item comes out first while in Queue it's opposite. Changethe exit() implementation.

80. Queue Action The implementation of all the methods except exit() is same as Stack. Let's ignore them in discussion.

81. Queue Action Change the exit() implementation. Queue.prototype.exit = function(){ this.array.remove(0); this.length = this.array.length; return this.length; }

82. Queue Action Change the exit() implementation. Queue.prototype.exit = function(){ this.array.remove(0); this.length = this.array.length; return this.length; } remove the first item from the internal array by calling the remove() method added to the Array class.

83. Queue Complete var Queue = function(type){ if(arguments.length != 1) throw new Error("There is noconstructor that takes " + arguments.length + " arguments"); if(primitives.contains(type)) this.isPrimitive = true; else if(typeof type == "function") this.isPrimitive = false; else throw new Error("Invalid Type"); this.type = type; this.array = new Array(); this.length = this.array.length; return this; }

84. Queue Complete Queue.prototype.constructor = Queue; Queue.prototype.enter = function(){ var is Valid; for(var i = 0, j = arguments.length; i < j;i++){ isValid = this.isPrimitive ? (this.type.toLowerCase() == typeofarguments[i]) : (arguments[i] instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); }

85. Queue Complete for(var i = 0, j = arguments.length; i < j;i++){ this.array.push(arguments[i]); } this.length = this.array.length; return this.array.length; } Queue.prototype.exit = function(){ this.array.remove(0); this.length = this.array.length; return this.length; } Queue.prototype.getValue = function(index){ return this.array[index]; }

86. Queue Complete Queue.prototype.setValue = function(index, value){ var isValid = this.isPrimitive ? (this.type.toLowerCase() == typeof value) : (value instanceof this.type); if(!isValid) throw new Error("Invalid Argument"); this.array[index] = value; return this.array[index]; }

87. It's time to test

88. It's time to test Steps Testingexit(). var myQueue = new Queue("string");

89. It's time to test Steps Testingexit(). var myQueue = new Queue("string"); myQueue.enter("RED", "BLUE", "GREEN");

90. It's time to test Steps Testingexit(). var myQueue = new Queue("string"); myQueue.enter("RED", "BLUE", "GREEN"); myQueue.exit();

91. It's time to test Steps Testingexit(). var myQueue = new Queue("string"); myQueue.enter("RED", "BLUE", "GREEN"); myQueue.exit();

92. It's time to test Steps Testingexit(). myQueue.getValue(0);

93. It's time to test Steps Testingexit(). myQueue.getValue(0); "BLUE"

94. Thank You