diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/-iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/-iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md
index 6808afd4cc8..d144e693dbe 100644
--- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/-iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md
+++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/-iterate-through-the-keys-of-an-object-with-a-for...in-statement.english.md
@@ -6,27 +6,20 @@ challengeType: 1
## Description
users object and the loop iterates through it to display the user's name to the console.
-
-const users = {
+Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a for...in statement. For our
- Alan: {
- age: 30
- },
- Jeff: {
- age: 45
- },
- Sarah: {
- age: 18
- }
- Ryan: {
- age: 24
- }
-};
-for (let user in users) {
- console.log(user);
-}
-// logs:
Alan
Jeff
Sarah
Ryan
-users object, this could look like:
+
+```js
+for (let user in users) {
+ console.log(user);
+}
+
+// logs:
+Alan
+Jeff
+Sarah
+Ryan
+```
+
In this statement, we defined a variable user, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.
NOTE: Objects do not maintain an ordering to stored keys like arrays do; thus a key's position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.
let ourArray = ["a", "b", "c"];
+
+```
+let ourArray = ["a", "b", "c"];
+```
+
In an array, each array item has an index. This index doubles as the position of that item in the array, and how you reference it. However, it is important to note, that JavaScript arrays are zero-indexed, meaning that the first element of an array is actually at the zeroth position, not the first.
In order to retrieve an element from an array we can enclose an index in brackets and append it to the end of an array, or more commonly, to a variable which references an array object. This is known as bracket notation.
For example, if we want to retrieve the "a" from ourArray and assign it to a variable, we can do so with the following code:
-let ourVariable = ourArray[0];
+
+```
+let ourVariable = ourArray[0];
+// ourVariable equals "a"
+```
+
In addition to accessing the value associated with an index, you can also set an index to a value using the same notation:
-
// ourVariable equals "a"ourArray[1] = "not b anymore";
+
+```
+ourArray[1] = "not b anymore";
+// ourArray now equals ["a", "not b anymore", "c"];
+```
+
Using bracket notation, we have now reset the item at index 1 from
// ourArray now equals ["a", "not b anymore", "c"];"b", to "not b anymore".
foods object is being used in a program for a supermarket cash register. We have some function that sets the selectedFood and we want to check our foods object for the presence of that food. This might look like:
-let selectedFood = getCurrentFood(scannedItem);
+
+```
+let selectedFood = getCurrentFood(scannedItem);
+let inventory = foods[selectedFood];
+```
+
This code will evaluate the value stored in the
let inventory = foods[selectedFood];selectedFood variable and return the value of that key in the foods object, or undefined if it is not present. Bracket notation is very useful because sometimes object properties are not known before runtime or we need to access them in a more dynamic way.
Array.push() and Array.unshift().
Both methods take one or more elements as parameters and add those elements to the array the method is being called on; the push() method adds elements to the end of an array, and unshift() adds elements to the beginning. Consider the following:
-let twentyThree = 'XXIII';
let romanNumerals = ['XXI', 'XXII'];
romanNumerals.unshift('XIX', 'XX');
// now equals ['XIX', 'XX', 'XXI', 'XXII']
romanNumerals.push(twentyThree);
// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']
-Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.
+
+```
+let twentyThree = 'XXIII';
+let romanNumerals = ['XXI', 'XXII'];
+
+romanNumerals.unshift('XIX', 'XX');
+// now equals ['XIX', 'XX', 'XXI', 'XXII']
+
+romanNumerals.push(twentyThree);
+// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.
+```
+
splice() can take up to three parameters? Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well. This can be incredibly useful for quickly switching out an element, or a set of elements, for another. For instance, let's say you're storing a color scheme for a set of DOM elements in an array, and want to dynamically change a color based on some action:
-function colorChange(arr, index, newColor) {
+
+```
+function colorChange(arr, index, newColor) {
+ arr.splice(index, 1, newColor);
+ return arr;
+}
+
+let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];
+
+colorScheme = colorChange(colorScheme, 2, '#332327');
+// we have removed '#bb7e8c' and added '#332327' in its place
+// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']
+```
+
This function takes an array of hex values, an index at which to remove an element, and the new color to replace the removed element with. The return value is an array containing a newly modified color scheme! While this example is a bit oversimplified, we can see the value that utilizing
arr.splice(index, 1, newColor);
return arr;
}
let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];
colorScheme = colorChange(colorScheme, 2, '#332327');
// we have removed '#bb7e8c' and added '#332327' in its place
// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']splice() to its maximum potential can have.
let FCC_User = {
+
+```
+let FCC_User = {
+ username: 'awesome_coder',
+ followers: 572,
+ points: 1741,
+ completedProjects: 15
+};
+```
+
The above code defines an object called
username: 'awesome_coder',
followers: 572,
points: 1741,
completedProjects: 15
};FCC_User that has four properties, each of which map to a specific value. If we wanted to know the number of followers FCC_User has, we can access that property by writing:
-let userData = FCC_User.followers;
+
+```
+let userData = FCC_User.followers;
+// userData equals 572
+```
+
This is called dot notation. Alternatively, we can also access the property with brackets, like so:
-
// userData equals 572let userData = FCC_User['followers']
+
+```
+let userData = FCC_User['followers']
+// userData equals 572
+```
+
Notice that with bracket notation, we enclosed
// userData equals 572followers in quotes. This is because the brackets actually allow us to pass a variable in to be evaluated as a property name (hint: keep this in mind for later!). Had we passed followers in without the quotes, the JavaScript engine would have attempted to evaluate it as a variable, and a ReferenceError: followers is not defined would have been thrown.
indexOf(), that allows us to quickly and easily check for the presence of an element on an array. indexOf() takes an element as a parameter, and when called, it returns the position, or index, of that element, or -1 if the element does not exist on the array.
For example:
-let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];
+
+```
+let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];
+
+fruits.indexOf('dates') // returns -1
+fruits.indexOf('oranges') // returns 2
+fruits.indexOf('pears') // returns 1, the first index at which the element exists
+```
+
fruits.indexOf('dates') // returns -1
fruits.indexOf('oranges') // returns 2
fruits.indexOf('pears') // returns 1, the first index at which the element existshasOwnProperty() method and the other uses the in keyword. If we have an object users with a property of Alan, we could check for its presence in either of the following ways:
-users.hasOwnProperty('Alan');
+
+```
+users.hasOwnProperty('Alan');
+'Alan' in users;
+// both return true
+```
+
'Alan' in users;
// both return truelet thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];
+
+```
+let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];
+
+let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
+// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']
+```
+
Using spread syntax, we have just achieved an operation that would have been more complex and more verbose had we used traditional methods.
let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']slice() allows us to be selective about what elements of an array to copy, among several other useful tasks, ES6's new spread operator allows us to easily copy all of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: ...
In practice, we can use the spread operator to copy an array like so:
-let thisArray = [true, true, undefined, false, null];
+
+```
+let thisArray = [true, true, undefined, false, null];
+let thatArray = [...thisArray];
+// thatArray equals [true, true, undefined, false, null]
+// thisArray remains unchanged, and is identical to thatArray
+```
+
let thatArray = [...thisArray];
// thatArray equals [true, true, undefined, false, null]
// thisArray remains unchanged, and is identical to thatArrayslice(). slice(), rather than modifying an array, copies, or extracts, a given number of elements to a new array, leaving the array it is called upon untouched. slice() takes only 2 parameters — the first is the index at which to begin extraction, and the second is the index at which to stop extraction (extraction will occur up to, but not including the element at this index). Consider this:
-let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
+
+```
+let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
+
+let todaysWeather = weatherConditions.slice(1, 3);
+// todaysWeather equals ['snow', 'sleet'];
+// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']
+
+```
+
In effect, we have created a new array by extracting elements from an existing array.
let todaysWeather = weatherConditions.slice(1, 3);
// todaysWeather equals ['snow', 'sleet'];
// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']let nestedArray = [ // top, or first level - the outer most array
+
+```
+let nestedArray = [ // top, or first level - the outer most array
+ ['deep'], // an array within an array, 2 levels of depth
+ [
+ ['deeper'], ['deeper'] // 2 arrays nested 3 levels deep
+ ],
+ [
+ [
+ ['deepest'], ['deepest'] // 2 arrays nested 4 levels deep
+ ],
+ [
+ [
+ ['deepest-est?'] // an array nested 5 levels deep
+ ]
+ ]
+ ]
+];
+```
+
While this example may seem convoluted, this level of complexity is not unheard of, or even unusual, when dealing with large amounts of data.
However, we can still very easily access the deepest levels of an array this complex with bracket notation:
-
['deep'], // an array within an array, 2 levels of depth
[
['deeper'], ['deeper'] // 2 arrays nested 3 levels deep
],
[
[
['deepest'], ['deepest'] // 2 arrays nested 4 levels deep
],
[
[
['deepest-est?'] // an array nested 5 levels deep
]
]
]
];console.log(nestedArray[2][1][0][0][0]);
+
+```
+console.log(nestedArray[2][1][0][0][0]);
+// logs: deepest-est?
+```
+
And now that we know where that piece of data is, we can reset it if we need to:
-
// logs: deepest-est?nestedArray[2][1][0][0][0] = 'deeper still';
+
+```
+nestedArray[2][1][0][0][0] = 'deeper still';
+
+console.log(nestedArray[2][1][0][0][0]);
+// now logs: deeper still
+```
+
console.log(nestedArray[2][1][0][0][0]);
// now logs: deeper stillevery(), forEach(), map(), etc.), however the technique which is most flexible and offers us the greatest amount of control is a simple for loop.
Consider the following:
-function greaterThanTen(arr) {
+
+```
+function greaterThanTen(arr) {
+ let newArr = [];
+ for (let i = 0; i < arr.length; i++) {
+ if (arr[i] > 10) {
+ newArr.push(arr[i]);
+ }
+ }
+ return newArr;
+}
+
+greaterThanTen([2, 12, 8, 14, 80, 0, 1]);
+// returns [12, 14, 80]
+```
+
Using a
let newArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
newArr.push(arr[i]);
}
}
return newArr;
}
greaterThanTen([2, 12, 8, 14, 80, 0, 1]);
// returns [12, 14, 80]for loop, this function iterates through and accesses each element of the array, and subjects it to a simple test that we have created. In this way, we have easily and programmatically determined which data items are greater than 10, and returned a new array containing those items.
let nestedObject = {
+
+```
+let nestedObject = {
+ id: 28802695164,
+ date: 'December 31, 2016',
+ data: {
+ totalUsers: 99,
+ online: 80,
+ onlineStatus: {
+ active: 67,
+ away: 13
+ }
+ }
+};
+```
+
id: 28802695164,
date: 'December 31, 2016',
data: {
totalUsers: 99,
online: 80,
onlineStatus: {
active: 67,
away: 13
}
}
};nestedObject has three unique keys: id, whose value is a number, date whose value is a string, and data, whose value is an object which has yet another object nested within it. While structures can quickly become complex, we can still use the same notations to access the information we need.
push() and unshift() have corresponding methods that are nearly functional opposites: pop() and shift(). As you may have guessed by now, instead of adding, pop() removes an element from the end of an array, while shift() removes an element from the beginning. The key difference between pop() and shift() and their cousins push() and unshift(), is that neither method takes parameters, and each only allows an array to be modified by a single element at a time.
Let's take a look:
-let greetings = ['whats up?', 'hello', 'see ya!'];
+
+```
+let greetings = ['whats up?', 'hello', 'see ya!'];
+
+greetings.pop();
+// now equals ['whats up?', 'hello']
+
+greetings.shift();
+// now equals ['hello']
+```
+
We can also return the value of the removed element with either method like this:
-
greetings.pop();
// now equals ['whats up?', 'hello']
greetings.shift();
// now equals ['hello']let popped = greetings.pop();
+
+```
+let popped = greetings.pop();
+// returns 'hello'
+// greetings now equals []
+```
+
// returns 'hello'
// greetings now equals []shift() and pop(), but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where splice() comes in. splice() allows us to do just that: remove any number of consecutive elements from anywhere in an array.
splice() can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of splice() are integers which represent indexes, or positions, of the array that splice() is being called upon. And remember, arrays are zero-indexed, so to indicate the first element of an array, we would use 0. splice()'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:
-let array = ['today', 'was', 'not', 'so', 'great'];
+
+```
+let array = ['today', 'was', 'not', 'so', 'great'];
+
+array.splice(2, 2);
+// remove 2 elements beginning with the 3rd element
+// array now equals ['today', 'was', 'great']
+```
+
array.splice(2, 2);
// remove 2 elements beginning with the 3rd element
// array now equals ['today', 'was', 'great']splice() not only modifies the array it's being called on, but it also returns a new array containing the value of the removed elements:
-let array = ['I', 'am', 'feeling', 'really', 'happy'];
+
+```
+let array = ['I', 'am', 'feeling', 'really', 'happy'];
+
+let newArray = array.splice(3, 2);
+// newArray equals ['really', 'happy']
+```
+
let newArray = array.splice(3, 2);
// newArray equals ['really', 'happy']let simpleArray = ['one', 2, 'three’, true, false, undefined, null];
+
+```
+let simpleArray = ['one', 2, 'three', true, false, undefined, null];
+console.log(simpleArray.length);
+// logs 7
+```
+
All arrays have a length property, which as shown above, can be very easily accessed with the syntax
console.log(simpleArray.length);
// logs 7Array.length.
A more complex implementation of an array can be seen below. This is known as a multi-dimensional array, or an array that contains other arrays. Notice that this array also contains JavaScript objects, which we will examine very closely in our next section, but for now, all you need to know is that arrays are also capable of storing complex objects.
-let complexArray = [
+
+```
+let complexArray = [
+ [
+ {
+ one: 1,
+ two: 2
+ },
+ {
+ three: 3,
+ four: 4
+ }
+ ],
+ [
+ {
+ a: "a",
+ b: "b"
+ },
+ {
+ c: "c",
+ d: "d"
+ }
+ ]
+];
+```
+
[
{
one: 1,
two: 2
},
{
three: 3,
four: 4
}
],
[
{
a: "a",
b: "b"
},
{
c: "c",
d: “d”
}
]
];foods object example one last time. If we wanted to remove the apples key, we can remove it by using the delete keyword like this:
-
delete foods.apples;+ +``` +delete foods.apples; +``` + ## Instructions