{ "name": "Object Oriented and Functional Programming", "order": 7, "time": "1h", "note": [ "Methods", "Closures", "Factories", "Pure Functions", "Currying Functions", "Functors", "Currying Functions" ], "challenges": [ { "id":"cf1111c1c15feddfaeb1bdef", "title": "Declare JavaScript Objects as Variables", "description":[ "Before we dive into Object Oriented Programming, let's revisit JavaScript objects.", "Give your motorBike object a wheels, engines and seats attribute and set them to numbers." ], "tests":[ "assert(typeof(motorBike.engines) === 'number', 'message: motorBike should have a engines attribute set to a number.');", "assert(typeof(motorBike.wheels) === 'number', 'message: motorBike should have a wheels attribute set to a number.');", "assert(typeof(motorBike.seats) === 'number', 'message: motorBike should have a seats attribute set to a number.');" ], "challengeSeed":[ "var car = {", " \"wheels\":4,", " \"engines\":1,", " \"seats\":5", "};", "", "var motorBike = {", "", " // Only change code below this line.", "", "", "", " // Only change code above this line.", "", "};", "", "(function() {return JSON.stringify(motorBike);})();" ], "challengeType":1, "type": "waypoint", "type": "waypoint" }, { "id":"cf1111c1c15feddfaeb2bdef", "title": "Construct JavaScript Objects with Functions", "description":[ "We are also able to create objects using constructor functions.", "Here's an example of a constructor function:", "var Car = function() {", "  this.wheels = 4;", "  this.engines = 1;", "  this.seats = 1;", "};", "Give your myMotorBike object a wheels, engines and seats attribute and set them to numbers.", "You may be confused by the this keyword here. Don't worry, we will get to that very soon." ], "tests":[ "assert(typeof((new MotorBike()).engines) === 'number', 'message: myMotorBike should have a engines attribute set to a number.');", "assert(typeof((new MotorBike()).wheels) === 'number', 'message: myMotorBike should have a wheels attribute set to a number.');", "assert(typeof((new MotorBike()).seats) === 'number', 'message: myMotorBike should have a seats attribute set to a number.');" ], "challengeSeed":[ "var Car = function() {", " this.wheels = 4;", " this.engines = 1;", " this.seats = 1;", "};", "", "var myCar = new Car();", "", "// Only change code below this line.", "", "var MotorBike = function() {", "", "", "", "};", "", "var myMotorBike = new MotorBike();", "", "// Only change code above this line.", "", "(function() {return JSON.stringify(myMotorBike);})();" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c15feddfaeb3bdef", "title":"Make Object Properties Private", "description":[ "Objects have their own attributes, called properties, and their own functions, called methods.", "In the previous challenge, we used the this keyword to reference public properties and public methods of the current object.", "We can also create private properties and private methods, which aren't accessible from outside the object.", "To do this, just declare properties or functions within the constructor.", "Let's create an object with two functions. One attached as a property and one not.", "See if you can keep myBike.speed and myBike.addUnit private, while making myBike.getSpeed publicly accessible." ], "tests":[ "assert(typeof(myBike.getSpeed)!=='undefined' && typeof(myBike.getSpeed) === 'function', 'message: The method getSpeed of myBike should be accessible outside the object.');", "assert(typeof(myBike.speed) === 'undefined', 'message: myBike.speed should be undefined.');", "assert(typeof(myBike.addUnit) === 'undefined', 'message: myBike.addUnit should remain undefined.');" ], "challengeSeed":[ "var Car = function() {", " // this is a private variable", " var gear = 1;", " // this is a private function (also known as a private method)", " function addStyle(styleMe){", " return 'The Current Gear Is: ' + styleMe;", " }", " // this is a public method", " this.getGear = function() {", " return addStyle(this.gear);", " };", "", "};", "", "var Bike = function() {", "", " // Only change code below this line.", "", " this.speed = 100;", "", " function addUnit(value) {", " return value + \"KM/H\";", " }", "", " getSpeed = function () {", " return addUnit(speed);", " };", "", "};", "", "// Only change code above this line.", "", "var myCar = new Car();", "", "var myBike = new Bike();", "", "if(myBike.hasOwnProperty('getSpeed')){(function() {return JSON.stringify(myBike.getSpeed());})();}" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c15feddfaeb4bdef", "title":"Make Instances of Objects with a Constructor Function", "description":[ "Sometimes you'll want to be able to easily create many copies of an objects that all share the same methods.", "Objects have their own attributes, called properties, and their own functions, called methods.", "You can create instances of an object using a constructor.", "A constructor is a function that creates instances of an object that share the same methods and properties", "Each new instance of this object inherits all the properties and methods of your original object.", "Once an instance has been created you can add properties to that instance individually.", "Add an engines property with a number value to the myCar instance." ], "tests":[ "assert((new Car()).wheels === 4, 'message: The property wheels should still be 4 in the object constructor.');", "assert(typeof((new Car()).engines) === 'undefined', 'message: There should not be a property engines in the object constructor.');", "assert(myCar.wheels === 4, 'message: The property wheels of myCar should equal 4.');", "assert(typeof(myCar.engines) === 'number', 'message: The property engines of myCar should be a number.');" ], "challengeSeed":[ "var Car = function() {", " this.wheels = 4;", "};", "", "// Only change code below this line.", "var myCar = new Car();", "", "", "", "// Only change code above this line.", "(function() {return JSON.stringify(myCar);})();" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c15feddfaeb7bdef", "title":"Iterate over Arrays with .map", "description":[ "The map method is a convenient way to iterate through arrays. Here's an example usage:", "var timesFour = oldArray.map(function(val){", "  return val * 4;", "});", "", "The map method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it.", "In our example the callback only uses the value of the array element (the val argument) but your callback can also include arguments for the index and array being acted on.", "Use the map function to add 3 to every value in the variable array." ], "tests":[ "assert.deepEqual(newArray, [4,5,6,7,8], 'message: You should add three to each value in the array.');", "assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the map method.');", "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with map.');" ], "challengeSeed":[ "var oldArray = [1,2,3,4,5];", "", "// Only change code below this line.", "", "", "var newArray = oldArray;", "", "", "", "// Only change code above this line.", "", "(function() {return newArray;})();" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c15feddfaeb8bdef", "title":"Condense arrays with .reduce", "description":[ "The array method reduce is used to iterate through an array and condense it into one value.", "To use reduce you pass in a callback whose arguments are an accumulator (in this case, previousVal) and the current value (currentVal).", "reduce has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified it will be the first array element and currentVal will start with the second array element.", "Here is an example of reduce being used to subtract all the values of an array:", "var singleVal = array.reduce(function(previousVal, currentVal) {", "  return previousVal - currentVal;", "}, 0);", "Use the reduce method to sum all the values in array and assign it to singleVal." ], "tests":[ "assert(singleVal == 30, 'message: singleVal should be equal to the sum of all items in the array variable.');", "assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the reduce method.');" ], "challengeSeed":[ "var array = [4,5,6,7,8];", "", "", "// Only change code below this line.", "", "var singleVal = array;", "", "", "", "// Only change code above this line.", "", "(function() {return singleVal;})();" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c15feddfaeb9bdef", "title":"Filter Arrays with .filter", "description":[ "The filter method is used to iterate through an array and filter out elements where a given condition is not true.", "filter is passed a callback function which takes the current value (we've called that val) as an argument.", "Any array element for which the callback returns true will be kept and elements that return false will be filtered out.", "The following code is an example of using filter to remove array elements that are not even numbers:", "Note: We omit the second and third arguments since we only need the value", "array = array.filter(function(val) {", "  return val % 2 === 0;", "});", "Use filter to remove all elements from array that are greater than 5." ], "tests":[ "assert.deepEqual(newArray, [1,2,3,4,5], 'message: You should have removed all the values from the array that are greater than 5.');", "assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the filter method to remove the values from the array.');", "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using filter to modify the contents of the array.');" ], "challengeSeed":[ "var oldArray = [1,2,3,4,5,6,7,8,9,10];", "", "// Only change code below this line.", "", "var newArray = oldArray;", "", "// Only change code above this line.", "", "(function() { return newArray; })();" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c16feddfaeb1bdef", "title": "Sort Arrays with .sort", "description":[ "You can use the method sort to easily sort the values in an array alphabetically or numerically.", "Unlike the previous array methods we have been looking at, sort actually alters the array in place. However, it also returns this sorted array.", "sort can be passed a compare function as a callback. If no compare function is passed in it will convert the values to strings and sort alphabetically.", "Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:", "var array = [1, 12, 21, 2];", "array.sort(function(a, b) {", "  return a - b;", "});", "Use sort to sort array from largest to smallest." ], "tests":[ "assert.deepEqual(array, [21, 12, 2, 1], 'message: You should have sorted the array from largest to smallest.');", "assert(editor.getValue().match(/\\[1,\\s*12,\\s*21,\\s*2\\];/gi), 'message: You should only be using sort to modify the array.');", "assert(editor.getValue().match(/\\.sort\\s*\\(/g), 'message: You should have made use of the sort method.');" ], "challengeSeed":[ "var array = [1, 12, 21, 2];", "", "// Only change code below this line.", "", "array.sort();", "", "// Only change code above this line.", "", "(function() { return array; })();" ], "challengeType":1, "type": "waypoint" }, { "id": "cf1111c1c16feddfaeb2bdef", "title": "Reverse Arrays with .reverse", "description": [ "You can use the reverse method to reverse the elements of an array.", "reverse is another array method that alters the array in place, but it also returns the reversed array.", "Add a line of code that uses reverse to reverse the array variable." ], "tests": [ "assert.deepEqual(array, [7,6,5,4,3,2,1], 'message: You should reverse the array.');", "assert(editor.getValue().match(/\\.reverse\\s*\\(\\)/gi), 'message: You should use the reverse method.');", "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7/gi), 'message: You should only be using reverse to modify array.');" ], "challengeSeed": [ "var array = [1,2,3,4,5,6,7];", "", "// Only change code below this line.", "", "", "", "// Only change code above this line.", "", "(function() {return array;})();" ], "challengeType": 1, "type": "waypoint" }, { "id": "cf1111c1c16feddfaeb3bdef", "title": "Concatenate Strings with .concat", "description": [ "concat can be used to merge the contents of two arrays into one.", "concat takes an array as an argument and returns a new array with the elements of this array concatenated onto the end.", "Here is an example of concat being used to concatenate otherArray onto the end of oldArray:", "newArray = oldArray.concat(otherArray);", "Use .concat() to concatenate concatMe onto the end of oldArray and assign it to newArray." ], "tests": [ "assert.deepEqual(newArray, [1,2,3,4,5,6], 'message: You should concatenate the two arrays together.');", "assert(editor.getValue().match(/\\.concat\\s*\\(/gi), 'message: You should be using the concat method to merge the two arrays.');", "assert(editor.getValue().match(/\\[1\\,2\\,3\\]/gi) && editor.getValue().match(/\\[4\\,5\\,6\\]/gi), 'message: You should only be using concat to modify the arrays.');" ], "challengeSeed": [ "var oldArray = [1,2,3];", "", "var concatMe = [4,5,6];", "", "// Only change code below this line.", "", "var newArray = oldArray;", "", "// Only change code above this line.", "", "(function() { return newArray; })();" ], "challengeType": 1, "type": "waypoint" }, { "id":"cf1111c1c16feddfaeb4bdef", "title":"Split Strings with .split", "description":[ "You can use the split method to split a string into an array.", "split uses the argument you pass in as a delimiter to determine which points the string should be split at.", "Here is an example of split being used to split an array at every s character:", "var array = string.split('s');", "Use split to create an array of words from string and assign it to array." ], "tests":[ "assert(/\\.split\\(/gi, 'message: You should use the split method on the string.');", "assert(typeof(array) === 'object' && array.length === 5, 'message: You should split the string by its spaces.');" ], "challengeSeed":[ "var string = \"Split me into an array\";", "", "// Only change code below this line.", "", "var array = string;", "", "// Only change code above this line.", "", "(function() {return array;})();" ], "challengeType":1, "type": "waypoint" }, { "id":"cf1111c1c16feddfaeb5bdef", "title":"Join Strings with .join", "description":[ "We can use the join method to join each element of an array into a string separated by whatever delimiter you provide as an argument.", "The following is an example of using join to join all of the elements of an array into a string with all the elements separated by word `Na`:", "var joinMe = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];", "var joinedString = joinMe.join(\"Na \");", "console.log(joinedString);", "Use the join method to create a string from joinMe with spaces in between each element and assign it to joinedString." ], "tests":[ "assert(typeof(joinedString) === 'string' && joinedString === \"Split me into an array\", 'message: You should join the elements of the array with spaces.');", "assert(/\\.join\\(/gi, 'message: You should use of the join method on the array.');" ], "challengeSeed":[ "var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];", "", "// Only change code below this line.", "", "var joinedString = joinMe;", "", "// Only change code above this line.", "", "(function() {return joinedString;})();" ], "challengeType":1, "type": "waypoint" } ] }