696 lines
44 KiB
JSON
696 lines
44 KiB
JSON
{
|
|
"name": "Object Oriented and Functional Programming",
|
|
"order": 7,
|
|
"time": "2 hours",
|
|
"helpRoom": "HelpJavaScript",
|
|
"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 <code>motorBike</code> object a <code>wheels</code>, <code>engines</code> and <code>seats</code> attribute and set them to numbers."
|
|
],
|
|
"challengeSeed": [
|
|
"var car = {",
|
|
" \"wheels\":4,",
|
|
" \"engines\":1,",
|
|
" \"seats\":5",
|
|
"};",
|
|
"",
|
|
"var motorBike = {",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"};"
|
|
],
|
|
"tail": [
|
|
"(function() {return JSON.stringify(motorBike);})();"
|
|
],
|
|
"solutions": [
|
|
"var car = {\n \"wheels\":4,\n \"engines\":1,\n \"seats\":5\n};\n\nvar motorBike = {\n \"wheels\": 4,\n \"engines\": 1,\n \"seats\": 2\n};"
|
|
],
|
|
"tests": [
|
|
"assert(typeof motorBike.engines === 'number', 'message: <code>motorBike</code> should have a <code>engines</code> attribute set to a number.');",
|
|
"assert(typeof motorBike.wheels === 'number', 'message: <code>motorBike</code> should have a <code>wheels</code> attribute set to a number.');",
|
|
"assert(typeof motorBike.seats === 'number', 'message: <code>motorBike</code> should have a <code>seats</code> attribute set to a number.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Declara objetos de JavaScript como variables",
|
|
"description": [
|
|
"Antes de sumergirnos en Programación Orientada a Objetos, vamos a revisar los objetos de JavaScript.",
|
|
"Dale a tu objeto <code>motorBike</code> un atributo <code>wheels</code>, otro llamado <code>motors</code> y otro <code>seats</code> y asignales números."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c15feddfaeb2bdef",
|
|
"title": "Construct JavaScript Objects with Functions",
|
|
"description": [
|
|
"We are also able to create objects using <code>constructor</code> functions.",
|
|
"A <code>constructor</code> function is given a capitalized name to make it clear that it is a <code>constructor</code>.",
|
|
"Here's an example of a <code>constructor</code> function:",
|
|
"<blockquote>var Car = function() {<br> this.wheels = 4;<br> this.engines = 1;<br> this.seats = 5;<br>};</blockquote>",
|
|
"In a <code>constructor</code> the <code>this</code> variable refers to the new object being created by the constructor. So when we write,",
|
|
"<code> this.wheels = 4;</code>",
|
|
"inside of the <code>constructor</code> we are giving the new object it creates a property called <code>wheels</code> with a value of <code>4</code>.",
|
|
"You can think of a <code>constructor</code> as a description for the object it will create.",
|
|
"Have your <code>MotorBike</code> <code>constructor</code> describe an object with <code>wheels</code>, <code>engines</code> and <code>seats</code> properties and set them to numbers."
|
|
],
|
|
"challengeSeed": [
|
|
"var Car = function() {",
|
|
" this.wheels = 4;",
|
|
" this.engines = 1;",
|
|
" this.seats = 5;",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var MotorBike = function() {",
|
|
"",
|
|
"};"
|
|
],
|
|
"tail": [
|
|
"(function() {return JSON.stringify(new MotorBike());})();"
|
|
],
|
|
"solutions": [
|
|
"var Car = function() {\n this.wheels = 4;\n this.engines = 1;\n this.seats = 5;\n};\n\nvar myCar = new Car();\n\nvar MotorBike = function() {\n this.engines = 1;\n this.seats = 1;\n this.wheels = 4;\n};\n\nvar myMotorBike = new MotorBike();"
|
|
],
|
|
"tests": [
|
|
"assert(typeof (new MotorBike()).engines === 'number', 'message: <code>MotorBike</code> should have a <code>engines</code> attribute set to a number.');",
|
|
"assert(typeof (new MotorBike()).wheels === 'number', 'message: <code>MotorBike</code> should have a <code>wheels</code> attribute set to a number.');",
|
|
"assert(typeof (new MotorBike()).seats === 'number', 'message: <code>MotorBike</code> should have a <code>seats</code> attribute set to a number.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Construye objetos de JavaScript con funciones",
|
|
"description": [
|
|
"También podemos crear objetos utilizando funciones <code>constructoras</code>.",
|
|
"A cada función <code>constructora</code> se le da un nombre comenzando en mayúsculas para que quede claro que es una <code>constructora</code>.",
|
|
"He aquí un ejemplo de una función <code>constructora</code>:",
|
|
"<code>var Carro = function() {</code>",
|
|
"<code>& nbsp; & nbsp; this.llantas = 4; </code>",
|
|
"<code>& nbsp; & nbsp; this.motores = 1; </code>",
|
|
"<code>& nbsp; & nbsp; this.asientos = 5; </code>",
|
|
"<code>}; </code>",
|
|
"En una <code>constructora</code> la variable <code>this</code> hace referencia al nuevo objeto que está siendo creado por la constructora. Así que cuando escribimos ",
|
|
"<code> this.llantas = 4;</code>",
|
|
"dentro de la <code>constructora</code> le estamos dando el nuevo objeto que se crea una propiedad llamada <code>llantas</code> con un valor de <code>4</code>.",
|
|
"Puedes pensar en una <code>constructora</code> como una descripción del objeto que crea.",
|
|
"Haz que tu <code>constructora</code> <code>MotorBike</code> describa un objeto con las propiedades <code>wheels</code>,<code>engines</code> and <code>seats</code> y asignales números."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c15feddfaeb4bdef",
|
|
"title": "Make Instances of Objects with a Constructor Function",
|
|
"description": [
|
|
"Now let's put that great <code>constructor</code> function we made in the last lesson to use!",
|
|
"To use a <code>constructor</code> function we call it with the <code>new</code> keyword in front of it like:",
|
|
"<code>var myCar = new Car();</code>",
|
|
"<code>myCar</code> is now an <code>instance</code> of the <code>Car</code> constructor that looks like the object it described:",
|
|
"<blockquote>{<br> wheels: 4,<br> engines: 1,<br> seats: 5<br>}</blockquote>",
|
|
"Note that it is important to use the <code>new</code> keyword when calling a constructor. This is how Javascript knows to create a new object and that all the references to <code>this</code> inside the constructor should be referring to this new object.",
|
|
"Now, once the <code>myCar</code> <code>instance</code> is created it can be used like any other object and can have its properties accessed and modified the same way you would usually. For example:",
|
|
"<code>myCar.turboType = \"twin\";</code>",
|
|
"Our <code>myCar</code> variable now has a property <code>turboType</code> with a value of <code>\"twin\"</code>.",
|
|
"In the editor, use the <code>Car</code> <code>constructor</code> to create a new <code>instance</code> and assign it to <code>myCar</code>.",
|
|
"Then give <code>myCar</code> a <code>nickname</code> property with a string value."
|
|
],
|
|
"challengeSeed": [
|
|
"var Car = function() {",
|
|
" this.wheels = 4;",
|
|
" this.engines = 1;",
|
|
" this.seats = 5;",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myCar;"
|
|
],
|
|
"tail": [
|
|
"(function() {return JSON.stringify(myCar);})();"
|
|
],
|
|
"solutions": [
|
|
"var Car = function() {\n this.wheels = 4;\n this.engines = 1;\n this.seats = 5;\n};\n\nvar myCar = new Car();\n\nmyCar.nickname = \"Lucy\";"
|
|
],
|
|
"tests": [
|
|
"assert((new Car()).wheels === 4, 'message: The property <code>wheels</code> should still be <code>4</code> in the object <code>constructor</code>.');",
|
|
"assert(typeof (new Car()).nickname === 'undefined', 'message: There should not be a property <code>nickname</code> in the object <code>constructor</code>.');",
|
|
"assert(myCar.wheels === 4, 'message: The property <code>wheels</code> of <code>myCar</code> should equal <code>4</code>.');",
|
|
"assert(typeof myCar.nickname === 'string', 'message: The property <code>nickname</code> of <code>myCar</code> should be a string.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Crea instancias de objetos con funciones constructoras",
|
|
"description": [
|
|
"¡Ahora usemos esa gran <code>constructora</code> que hicimos en la última lección!",
|
|
"Para utilizar una función <code>constructora</code> la llamamos con la palabra reservada <code>new</code> al frente, como:",
|
|
"<code>var miCarro = new Carro();</code>",
|
|
"<code>miCarro</code>es ahora una <code>instancia</code> de la constructora <code>Carro</code> que se parece al objeto que describe:",
|
|
"<code>{</code>",
|
|
"<code> wheels: 4,</code>",
|
|
"<code> engines: 1,</code>",
|
|
"<code> seats: 5</code>",
|
|
"<code>}</code>",
|
|
"Ten en cuenta que es importante utilizar la palabra reservada <code>new</code> cuando se llama a una constructora. Así es como Javascript sabe crear un objeto nuevo y hace que todas las referencias a <code>this</code> dentro del constructor se refieran al objeto nuevo ",
|
|
"Ahora, una vez que la <code>instancia</code> <code>miCarro</code> se crea, puede ser utilizada como cualquier otro objeto y puedes acceder o modificar sus propiedades como lo harías normalmente. Por ejemplo:",
|
|
"<code>miCarro.tipoTurbo = \"doble\"; </code>",
|
|
"Nuestra variable <code>miCarro</code> tiene ahora una propiedad <code>tipoTurbo</code> con un valor de <code>\"doble\"</code>.",
|
|
"En el editor, utiliza la <code>constructora</code> <code>Car</code> para crear una nueva <code>instancia</code> y asignala a <code>myCar</code>.",
|
|
"A continuación, dale a <code>myCar</code> una propiedad <code>nickname</code> con un valor tipo cadena."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "563cfb55594311ffcb333c70",
|
|
"title": "Make Unique Objects by Passing Parameters to our Constructor",
|
|
"description": [
|
|
"The <code>constructor</code> we have is great, but what if we don't always want to create the same object?",
|
|
"To solve this we can add <code>parameters</code> to our <code>constructor</code>. We do this like the following example:",
|
|
"<blockquote>var Car = function(wheels, seats, engines) {<br> this.wheels = wheels;<br> this.seats = seats;<br> this.engines = engines;<br>};</blockquote>",
|
|
"Now we can pass in <code>arguments</code> when we call our <code>constructor</code>.",
|
|
"<code>var myCar = new Car(6, 3, 1);</code>",
|
|
"This code will create an object that uses the <code>arguments</code> we passed in and looks like:",
|
|
"<blockquote>{<br> wheels: 6,<br> seats: 3,<br> engines: 1<br>}</blockquote>",
|
|
"Now give it a try yourself! Alter the <code>Car</code> <code>constructor</code> to use <code>parameters</code> to assign values to the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.",
|
|
"Then call your new <code>constructor</code> with three number <code>arguments</code> and assign it to <code>myCar</code> to see it in action."
|
|
],
|
|
"challengeSeed": [
|
|
"var Car = function() {",
|
|
" //Change this constructor",
|
|
" this.wheels = 4;",
|
|
" this.seats = 5;",
|
|
" this.engines = 1;",
|
|
"};",
|
|
"",
|
|
"//Try it out here",
|
|
"var myCar;"
|
|
],
|
|
"tail": [
|
|
"(function() {return JSON.stringify(myCar);})();"
|
|
],
|
|
"solutions": [
|
|
"var Car = function(wheels,seats,engines) {\n this.wheels = wheels;\n this.seats = seats;\n this.engines = engines;\n};\n\nvar myCar = new Car(4,1,1);"
|
|
],
|
|
"tests": [
|
|
"assert((function(){var testCar = new Car(3,1,2); return testCar.wheels === 3 && testCar.seats === 1 && testCar.engines === 2;})(), 'message: Calling <code>new Car(3,1,2)</code> should produce an object with a <code>wheels</code> property of <code>3</code>, a <code>seats</code> property of <code>1</code>, and an <code>engines</code> property of <code>2</code>.');",
|
|
"assert((function(){var testCar = new Car(4,4,2); return testCar.wheels === 4 && testCar.seats === 4 && testCar.engines === 2;})(), 'message: Calling <code>new Car(4,4,2)</code> should produce an object with a <code>wheels</code> property of <code>4</code>, a <code>seats</code> property of <code>4</code>, and an <code>engines</code> property of <code>2</code>.');",
|
|
"assert((function(){var testCar = new Car(2,6,3); return testCar.wheels === 2 && testCar.seats === 6 && testCar.engines === 3;})(), 'message: Calling <code>new Car(2,6,3)</code> should produce an object with a <code>wheels</code> property of <code>2</code>, a <code>seats</code> property of <code>6</code>, and an <code>engines</code> property of <code>3</code>.');",
|
|
"assert(typeof myCar.wheels === 'number' && typeof myCar.seats === 'number' && typeof myCar.engines === 'number', 'message: <code>myCar</code> should have number values for the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Crea objetos únicos pasando parámetros a la constructora",
|
|
"description": [
|
|
"La <code>constructora</code> que tenemos es fabulosa, pero ¿qué hacer si no queremos crear siempre el mismo objeto?",
|
|
"Para solucionar esto podemos añadir<code>parámetros</code>en nuestra <code>constructora</code>. Hacemos esto como en el siguiente ejemplo: ",
|
|
"<code>var Carro = function (ruedas, asientos, motores) {</code>",
|
|
"<code> this.ruedas = ruedas;</code>",
|
|
"<code> this.asientos = asientos;</code>",
|
|
"<code> this.motores = motores;</code>",
|
|
"<code>};</code>",
|
|
"Ahora podemos pasar <code>argumentos</code> cuando llamamos a nuestra <code>constructora</code>.",
|
|
"<code>var miCarro = nuevo Carro(6, 3, 1); </code>",
|
|
"Este código crea un objeto que utiliza los <code>argumentos</code> que pasamos en y se ve así:",
|
|
"<code>{</code>",
|
|
"<code> ruedas: 6,</code>",
|
|
"<code> asientos: 3,</code>",
|
|
"<code> motores: 1</code>",
|
|
"<code>}</code>",
|
|
"¡Ahora date una oportunidad a ti mismo! Modifica la <code>constructora</code> <code>Car</code> para que use <code>parámetros</code> que permitan asignar valores para las propiedades <code>wheels</code>, <code>seats</code>, y <code>engines</code>. ",
|
|
"Entonces llama a tu nueva <code>constructora</code> con tres <code>argumentos</code> numéricos y asígnala a <code>myCar</code>para verla en acción."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c15feddfaeb3bdef",
|
|
"title": "Make Object Properties Private",
|
|
"description": [
|
|
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
|
|
"In the <a href='/challenges/make-instances-of-objects-with-a-constructor-function' target='_blank'>previous challenges</a>, we used the <code>this</code> keyword to reference <code>public properties</code> of the current object.",
|
|
"We can also create <code>private properties</code> and <code>private methods</code>, which aren't accessible from outside the object.",
|
|
"To do this, we create the variable inside the <code>constructor</code> using the <code>var</code> keyword we're familiar with, instead of creating it as a <code>property</code> of <code>this</code>.",
|
|
"This is useful for when we need to store information about an object but we want to control how it is used by outside code.",
|
|
"For example, what if we want to store the <code>speed</code> our car is traveling at but we only want outside code to be able to modify it by accelerating or decelerating, so the speed changes in a controlled way?",
|
|
"In the editor you can see an example of a <code>Car</code> <code>constructor</code> that implements this pattern.",
|
|
"Now try it yourself! Modify the <code>Bike</code> <code>constructor</code> to have a <code>private property</code> called <code>gear</code> and two <code>public methods</code> called <code>getGear</code> and <code>setGear</code> to get and set that value.",
|
|
"<a href='https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this' target='_blank'>Further explanation on <code>this</code> keyword</a>"
|
|
],
|
|
"challengeSeed": [
|
|
"var Car = function() {",
|
|
" // this is a private variable",
|
|
" var speed = 10;",
|
|
"",
|
|
" // these are public methods",
|
|
" this.accelerate = function(change) {",
|
|
" speed += change;",
|
|
" };",
|
|
"",
|
|
" this.decelerate = function() {",
|
|
" speed -= 5;",
|
|
" };",
|
|
"",
|
|
" this.getSpeed = function() {",
|
|
" return speed;",
|
|
" };",
|
|
"};",
|
|
"",
|
|
"var Bike = function() {",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"};",
|
|
"",
|
|
"var myCar = new Car();",
|
|
"",
|
|
"var myBike = new Bike();"
|
|
],
|
|
"tail": [
|
|
"if(myBike.hasOwnProperty('getGear')){(function() {return JSON.stringify(myBike.getGear());})();}"
|
|
],
|
|
"solutions": [
|
|
"var Car = function() {\n var speed = 10;\n\n this.accelerate = function(change) {\n speed += change;\n };\n\n this.decelerate = function() {\n speed -= 5;\n };\n\n this.getSpeed = function() {\n return speed;\n };\n};\n\nvar Bike = function() {\n var gear = 1;\n \n this.getGear = function() {\n return gear;\n };\n \n this.setGear = function(newGear) {\n gear = newGear;\n };\n};\n\nvar myCar = new Car();\n\nvar myBike = new Bike();"
|
|
],
|
|
"tests": [
|
|
"assert(typeof myBike.getGear !== 'undefined' && typeof myBike.getGear === 'function', 'message: The method <code>getGear</code> of <code>myBike</code> should be accessible outside the object.');",
|
|
"assert(typeof myBike.setGear !== 'undefined' && typeof myBike.setGear === 'function', 'message: The method <code>setGear</code> of <code>myBike</code> should be accessible outside the object.');",
|
|
"assert(typeof myBike.gear === 'undefined', 'message: <code>myBike.gear</code> should remain undefined.');",
|
|
"assert.strictEqual((function () { myBike.setGear(4); return myBike.getGear(); })(), 4, 'message: <code>myBike.getGear()</code> should return <code>4</code> after calling <code>myBike.setGear(4)</code>.');",
|
|
"assert.strictEqual((function () { myBike.setGear(3); return myBike.getGear(); })(), 3, 'message: <code>myBike.getGear()</code> should return <code>3</code> after calling <code>myBike.setGear(3)</code>.');",
|
|
"assert.strictEqual((function () { myBike.setGear(1); return myBike.getGear(); })(), 1, 'message: <code>myBike.getGear()</code> should return <code>1</code> after calling <code>myBike.setGear(1)</code>.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Crea propiedades privadas de un objeto",
|
|
"description": [
|
|
"Los objetos tienen sus propios atributos, llamados <code>propiedades</code>, y sus propias funciones, llamadas<code>métodos</code>.",
|
|
"En los desafíos anteriores, se utilizó la palabra reservada <code>this</code> para referenciar <code>propiedades públicas</code>del objeto actual.",
|
|
"También podemos crear <code>propiedades privadas</code> y <code>métodos privados</code>, que no son accesibles desde fuera del objeto.",
|
|
"Para ello, creamos la variable dentro de la <code>constructora</code> usando la palabra reservada <code>var</code>, con la cual ya estamos familiarizados, en lugar de crearla con <code>this</code>. ",
|
|
"Esto es útil cuando necesitamos almacenar información sobre un objeto, pero controlando como se usa en el código externo al objeto.",
|
|
"Por ejemplo, ¿qué pasa si queremos almacenar la <code>velocidad</code> con la cual se desplaza nuestro carro, pero queremos que el código externo pueda modificarla sólo acelerando o desacelerando, de forma que la velocidad cambie de una manera controlada?",
|
|
"En el editor se puede ver un ejemplo de una <code>constructora</code> de <code>Car</code> que implementa este patrón.",
|
|
"¡Ahora pruébalo tú mismo! Modifica la <code>constructora</code> <code>Bike</code> para tener una <code>propiedad privada</code> llamada <code>gear</code>y dos<code>métodos públicos</code> llamados <code>getGear</code>y<code>setGear</code> para obtener y establecer ese valor."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c15feddfaeb7bdef",
|
|
"title": "Iterate over Arrays with .map",
|
|
"description": [
|
|
"The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:",
|
|
"<blockquote>var oldArray = [1, 2, 3];<br>var timesFour = oldArray.map(function(val){<br> return val * 4;<br>});<br>console.log(timesFour); // returns [4, 8, 12]<br>console.log(oldArray); // returns [1, 2, 3]</blockquote>",
|
|
"The <code>map</code> 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. Note that it does not modify the original array.",
|
|
"In our example the callback only uses the value of the array element (the <code>val</code> argument) but your callback can also include arguments for the <code>index</code> and <code>array</code> being acted on.",
|
|
"Use the map function to add 3 to every value in the variable <code>oldArray</code>, and save the results into variable <code>newArray</code>. oldArray should not change."
|
|
],
|
|
"challengeSeed": [
|
|
"var oldArray = [1,2,3,4,5];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var newArray = oldArray;"
|
|
],
|
|
"tail": [
|
|
"(function() {return newArray;})();"
|
|
],
|
|
"solutions": [
|
|
"var oldArray = [1,2,3,4,5];\nvar newArray = oldArray.map(function(val){\n return val + 3;\n});"
|
|
],
|
|
"tests": [
|
|
"assert.deepEqual(oldArray, [1,2,3,4,5], 'message: You should not change the original array.');",
|
|
"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 <code>map</code> method.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>map</code>.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Iterar sobre vectores con .map",
|
|
"description": [
|
|
"El método <code>map</code> es una manera conveniente de iterar sobre vectores. He aquí un ejemplo de uso: ",
|
|
"<code>var porCuatro = vectorAntiguo.map(function(val){</code>",
|
|
"<code> return val * 4;</code>",
|
|
"<code>});</code>",
|
|
"El método <code>map</code> iterará sobre cada elemento del vector, creando un nuevo vector con los valores modificados por la función de devolución de llamada (<em>callback</em>) y retornará ese nuevo arreglo.",
|
|
"En nuestro ejemplo, la función de devolución de llamada sólo usa el valor del elemento del vector sobre el que está iterando (parámetro <code>val</code>), pero tu función de devolución de llamada también puede incluir parámetros para el <code>índice</code> y el <code>vector</code> completo. ",
|
|
"Usa la función <code>map</code> para añadir 3 a cada valor de la variable <code>oldArray</code>."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c15feddfaeb8bdef",
|
|
"title": "Condense arrays with .reduce",
|
|
"description": [
|
|
"The array method <code>reduce</code> is used to iterate through an array and condense it into one value.",
|
|
"To use <code>reduce</code> you pass in a callback whose arguments are an accumulator (in this case, <code>previousVal</code>) and the current value (<code>currentVal</code>).",
|
|
"The accumulator is like a total that <code>reduce</code> keeps track of after each operation. The current value is just the next element in the array you're iterating through.",
|
|
"<code>reduce</code> 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 <code>currentVal</code> will start with the second array element.",
|
|
"Here is an example of <code>reduce</code> being used to subtract all the values of an array:",
|
|
"<blockquote>var singleVal = array.reduce(function(previousVal, currentVal) {<br> return previousVal - currentVal;<br>}, 0);</blockquote>",
|
|
"Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"var array = [4,5,6,7,8];",
|
|
"var singleVal = 0;",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"singleVal = array;"
|
|
],
|
|
"tail": [
|
|
"(function() {return singleVal;})();"
|
|
],
|
|
"solutions": [
|
|
"var array = [4,5,6,7,8];\nvar singleVal = 0;\nsingleVal = array.reduce(function(previousVal, currentVal) {\n return previousVal + currentVal;\n}, 0);"
|
|
],
|
|
"tests": [
|
|
"assert(singleVal == 30, 'message: <code>singleVal</code> should be equal to the sum of all items in the <code>array</code> variable.');",
|
|
"assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the <code>reduce</code> method.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Condensa vectores con .reduce",
|
|
"description": [
|
|
"El método <code>reduce</code> de un vector, se utiliza para iterar a través del vector y condensarlo en un valor.",
|
|
"Para usar <code>reduce</code> tu le pasas una función de devolución de llamada cuyos argumentos sean un acumulador (en este caso, <code>valorPrevio</code>) y el valor actual (<code>valorActual</code>). ",
|
|
"<code>reduce</code> tiene un argumento opcional que puede usarse para asignar un valor inicial al acumulador. Si no se especifica ningún valor inicial, este será el primer elemento del vector y <code>valorActual</code> comenzará en el segundo elemento del vector. ",
|
|
"He aquí un ejemplo de<code>reduce</code> cuando se utiliza para restar todos los valores de una matriz:",
|
|
"<code>var singleVal = array.reduce(function(valorAnterior, valorActual) {</code>",
|
|
"<code> return valorAnterior - valorActual;</code>",
|
|
"<code>}, 0);</code>",
|
|
"Usa el método <code>reduce</code> para sumar todos los valores en <code>array</code> y asignarlo a <code>singleVal</code>."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c15feddfaeb9bdef",
|
|
"title": "Filter Arrays with .filter",
|
|
"description": [
|
|
"The <code>filter</code> method is used to iterate through an array and filter out elements where a given condition is not true.",
|
|
"<code>filter</code> is passed a callback function which takes the current value (we've called that <code>val</code>) 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 <code>filter</code> to remove array elements that are equal to five:",
|
|
"Note: We omit the second and third arguments since we only need the value",
|
|
"<blockquote>array = array.filter(function(val) {<br> return val !== 5;<br>});</blockquote>",
|
|
"Use <code>filter</code> to create a new array with all the values from <code>oldArray</code> which are less than 6. The <code>oldArray</code> should not change."
|
|
],
|
|
"challengeSeed": [
|
|
"var oldArray = [1,2,3,4,5,6,7,8,9,10];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var newArray = oldArray;"
|
|
],
|
|
"tail": [
|
|
"(function() {return newArray;})();"
|
|
],
|
|
"solutions": [
|
|
"var oldArray = [1,2,3,4,5,6,7,8,9,10];\nvar newArray = oldArray.filter(function(val) {\n return val < 6;\n});"
|
|
],
|
|
"tests": [
|
|
"assert.deepEqual(oldArray, [1,2,3,4,5,6,7,8,9,10], 'message: You should not change the original array.');",
|
|
"assert.deepEqual(newArray, [1,2,3,4,5], 'message: You should have filtered out all values from the array that are greater than 5.');",
|
|
"assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the <code>filter</code> method to create a new array.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using <code>filter</code> to make the new array.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Filtrar vectores con .filter",
|
|
"description": [
|
|
"El método <code>filter</code> se utiliza para iterar a través de un vector y filtrar los elementos que hagan falsa un condición determinada.",
|
|
"<code>filter</code> recibe una función de devolución de llamada que a su vez recibe como argumento el valor actual (que hemos llamado <code>val</code>).",
|
|
"Cualquier elemento del vector para el cual la función de devolución de llamada retorne <code>true</code> se mantendrá y los elementos que devuelven <code>false</code> serán filtrados.",
|
|
"El código siguiente es un ejemplo del uso de <code>filter</code> para eliminar los elementos de un vector que son iguales a cinco:",
|
|
"Nota: Omitimos el segundo y tercer argumentos ya que sólo necesitamos el valor",
|
|
"<code>array = array.filter(function(val) {</code>",
|
|
"<code> return val !== 5;</code>",
|
|
"<code>});</code>",
|
|
"Usa <code>filter</code> para crear un nuevo vector con todos los valores de <code>oldArray</code> que son menores a 6. <br><code>oldArray</code> no debe cambiar."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb1bdef",
|
|
"title": "Sort Arrays with .sort",
|
|
"description": [
|
|
"You can use the method <code>sort</code> to easily sort the values in an array alphabetically or numerically.",
|
|
"Unlike the previous array methods we have been looking at, <code>sort</code> actually alters the array in place. However, it also returns this sorted array.",
|
|
"<code>sort</code> can be passed a compare function as a callback. The compare function should return a negative number if <code>a</code> should be before <code>b</code>, a positive number if <code>a</code> should be after <code>b</code>, or <code>0</code> if they are equal.",
|
|
"If no compare (callback) 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:",
|
|
"<blockquote>var array = [1, 12, 21, 2];<br>array.sort(function(a, b) {<br> return a - b;<br>});</blockquote>",
|
|
"Use <code>sort</code> to sort <code>array</code> from largest to smallest.",
|
|
"Further explanation on the <code>.sort()</code> method can be found <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort' target='_blank'>here</a>."
|
|
],
|
|
"challengeSeed": [
|
|
"var array = [1, 12, 21, 2];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"array.sort();"
|
|
],
|
|
"tail": [
|
|
"(function() {return array;})();"
|
|
],
|
|
"solutions": [
|
|
"var array = [1, 12, 21, 2];\narray.sort(function(a, b) {\n return b - a;\n});"
|
|
],
|
|
"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 <code>sort</code> to modify the array.');",
|
|
"assert(editor.getValue().match(/\\.sort\\s*\\(/g), 'message: You should have made use of the <code>sort</code> method.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Ordena vectores con .sort",
|
|
"description": [
|
|
"Puedes utilizar el método <code>sort</code> para ordenar alfabética o numéricamente los valores de un vector.",
|
|
"A diferencia de los métodos de vector que hemos visto,<code>sort</code>en realidad altera el vector en su lugar. Sin embargo, también devuelve este vector ordenado. ",
|
|
"<code>sort</code> puede recibir como parámetro una función de devolución de llamada para comparar. Sin no se provee una función de comparación, convertirá los valores a cadenas y los ordenará alfabéticamente. ",
|
|
"He aquí un ejemplo del uso de <code>sort</code> con una función de comparación que ordena los elementos de menor a mayor:",
|
|
"<code>var array = [1, 12, 21, 2];</code>",
|
|
"<code>array.sort(function(a, b) {</code>",
|
|
"<code> return a - b;</code>",
|
|
"<code>});</code>",
|
|
"Usa <code>sort</code> para ordenar<code>array</code> de mayor a menor."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb2bdef",
|
|
"title": "Reverse Arrays with .reverse",
|
|
"description": [
|
|
"You can use the <code>reverse</code> method to reverse the elements of an array.",
|
|
"<code>reverse</code> is another array method that alters the array in place, but it also returns the reversed array.",
|
|
"<blockquote>var myArray = [1, 2, 3];<br>myArray.reverse();</blockquote>",
|
|
"<em>returns [3, 2, 1]</em>",
|
|
"Use <code>reverse</code> to reverse the <code>array</code> variable and assign it to <code>newArray</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"var array = [1,2,3,4,5,6,7];",
|
|
"var newArray = [];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"newArray = array;"
|
|
],
|
|
"tail": [
|
|
"(function() {return newArray;})();"
|
|
],
|
|
"solutions": [
|
|
"var array = [1,2,3,4,5,6,7];\nvar newArray = [];\nnewArray = array.reverse();"
|
|
],
|
|
"tests": [
|
|
"assert.deepEqual(newArray, [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 <code>reverse</code> method.');",
|
|
"assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7/gi), 'message: You should only be using <code>reverse</code> to modify <code>array</code>.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Invierte vectores con .reverse",
|
|
"description": [
|
|
"Puedes utilizar el método <code>reverse</code> para invertir los elementos en un vector.",
|
|
"<code>reverse</code> es otro método de vector que altera el vector mismo, y también devuelve el vector invertido.",
|
|
"<code>var miVector = [1, 2, 3];</code>",
|
|
"<code>miVector.reverse();</code>",
|
|
"<em>devuelve [3, 2, 1]</em>",
|
|
"Usa <code>reverse</code> para invertir la variable <code>array</code> y asignarla a <code>newArray</code>."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb3bdef",
|
|
"title": "Concatenate Arrays with .concat",
|
|
"description": [
|
|
"<code>concat</code> can be used to merge the contents of two arrays into one.",
|
|
"<code>concat</code> 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 <code>concat</code> being used to concatenate <code>otherArray</code> onto the end of <code>oldArray</code>:",
|
|
"<code>newArray = oldArray.concat(otherArray);</code>",
|
|
"Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>oldArray</code> and assign it to <code>newArray</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"var oldArray = [1,2,3];",
|
|
"var newArray = [];",
|
|
"",
|
|
"var concatMe = [4,5,6];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"newArray = oldArray;"
|
|
],
|
|
"tail": [
|
|
"(function() {return newArray;})();"
|
|
],
|
|
"solutions": [
|
|
"var oldArray = [1,2,3];\nvar newArray = [];\nvar concatMe = [4,5,6];\nnewArray = oldArray.concat(concatMe);"
|
|
],
|
|
"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 <code>concat</code> 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 <code>concat</code> to modify the arrays.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Concatena vectores con .concat",
|
|
"description": [
|
|
"<code>concat</code> se puede utilizar para combinar el contenido de dos vectores en uno solo.",
|
|
"<code>concat</code> recibe un vector como argumento y devuelve un nuevo vector con los elementos del vector que recibe concatenados al final.",
|
|
"He aquí un ejemplo de <code>concat</code> cuando se usa para concatenar <code>otroVector</code> al final de <code>vectorAntiguo</code>:",
|
|
"<code>vectorNuevo = vectorAntiguo.concat(otroVector);</code>",
|
|
"Usa <code>.concat ()</code> para concatenar <code>concatMe</code> al final de <code>oldArray</code> y asigna el vector resultante a <code>newArray</code>."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb4bdef",
|
|
"title": "Split Strings with .split",
|
|
"description": [
|
|
"You can use the <code>split</code> method to split a string into an array.",
|
|
"<code>split</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
|
|
"Here is an example of <code>split</code> being used to split a string at every <code>s</code> character:",
|
|
"<code>var array = string.split('s');</code>",
|
|
"Use <code>split</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"var string = \"Split me into an array\";",
|
|
"var array = [];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"array = string;"
|
|
],
|
|
"tail": [
|
|
"(function() {return array;})();"
|
|
],
|
|
"solutions": [
|
|
"var string = \"Split me into an array\";\nvar array = [];\narray = string.split(\" \");"
|
|
],
|
|
"tests": [
|
|
"assert(/\\.split\\(/gi, 'message: You should use the <code>split</code> method on the string.');",
|
|
"assert(typeof array === 'object' && array.length === 5, 'message: You should split the string by its spaces.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Divide cadenas con .split",
|
|
"description": [
|
|
"Puedes utilizar el método <code>split</code> para dividir una cadena en un vector.",
|
|
"<code>split</code> utiliza el argumento que recibe como delimitador para determinar en qué puntos debe dividir la cadena.",
|
|
"He aquí un ejemplo del uso de <code>split</code> para dividir una cadena en cada caracter <code>s</code>:",
|
|
"<code>var vector = string.split('s');</code>",
|
|
"Usa <code>split</code> para crear un vector con las palabras de una <code>cadena</code> y asígnalo a la variable <code>array</code>."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cf1111c1c16feddfaeb5bdef",
|
|
"title": "Join Strings with .join",
|
|
"description": [
|
|
"We can use the <code>join</code> 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 <code>join</code> to join all of the elements of an array into a string with all the elements separated by word <code>and</code>:",
|
|
"<blockquote>var veggies = [\"Celery\", \"Radish\", \"Carrot\", \"Potato\"];<br>var salad = veggies.join(\" and \");<br>console.log(salad); // \"Celery and Radish and Carrot and Potato\" </blockquote>",
|
|
"Use the <code>join</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it to <code>joinedString</code>."
|
|
],
|
|
"challengeSeed": [
|
|
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];",
|
|
"var joinedString = '';",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"joinedString = joinMe;"
|
|
],
|
|
"tail": [
|
|
"(function() {return joinedString;})();"
|
|
],
|
|
"solutions": [
|
|
"var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];\nvar joinedString = '';\njoinedString = joinMe.join(\" \");"
|
|
],
|
|
"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 <code>join</code> method on the array.');"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1,
|
|
"translations": {
|
|
"es": {
|
|
"title": "Une cadenas con .join",
|
|
"description": [
|
|
"Podemos usar el método <code>join</code> para unir los elementos de un vector en una cadena, separándolos con el delimitador que proporciones como argumento.",
|
|
"El siguiente es un ejemplo del uso de <code>join</code> para unir todos los elementos de un vector en una cadena con todos los elementos separados entre si por palabra` Na`: ",
|
|
"<code>var uneme = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];</code>",
|
|
"<code>var cadenaUnida = uneme.join(\"Na \");</code>",
|
|
"<code>console.log(cadenaUnida);</code>",
|
|
"Usa el método <code>join</code> para crear una cadena a partir <code>joinMe</code> con espacios entre cada par de elementos y asignarla a <code>joinedString </code>."
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|