{ "name": "Basic Data Structures", "order": 4, "time": "1 hour", "helpRoom": "Help", "challenges": [ { "id": "587d7dac367417b2b2516zx5", "title": "Introduction to Arrays", "description": [ [ "", "", "Arrays are one of JavaScript's most fundamental built-in data structures, and probably the data structure that you will work with most often throughout the course of the freeCodeCamp curriculum. The array is by no means unique to JavaScript, however — in fact, it’s probably safe to say that arrays are utilized by almost every complex program... ever.

In computer science, an array is a linear collection of elements characterized by the fact that each element has a unique index, or address, that can be computed and used to look up an element's position at run-time.", "" ], [ "", "", "In Javascript, arrays are written as comma-separated lists and are enclosed in brackets [element1, element2, element3]. They can be any length, and store any type of data supported by JavaScript.

Arrays can sometimes be simple and serve very basic functionalities, but they can also be complex and very powerful - all of which depends on how the programmer chooses to utilize them

From this point forward, whenever we refer to the term array, it will be strictly within the context of JavaScript.", "" ], [ "", "", "JavaScript offers many array methods, which are a sort of built in function, that allow us to access, traverse, and mutate arrays as needed, depending on our purpose.

In the coming challenges, we will discuss several of the most common and useful methods, and a few other key techniques, that will help you to better understand and utilize arrays as data structures in JavaScript.", "" ] ], "releasedOn": "Feb 17, 2017", "challengeSeed": [], "tests": [], "type": "waypoint", "challengeType": 7, "isRequired": false, "translations": {} }, { "id": "587d7b7e367417b2b2512b20", "title": "Use an Array to Store a Collection of Data", "description": [ "The below is an example of the simplest implementation of an array data structure. This is known as a one-dimensional array, meaning it only has one level, or that it does not have any other arrays nested within it. Notice it contains booleans, strings, and numbers, among other valid JavaScript data types:", "
let simpleArray = ['one', 2, 'three’, true, false, undefined, null];
console.log(simpleArray.length);
// logs 7
", "All array's have a length property, which as shown above, can be very easily accessed with the syntax Array.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 = [
[
{
one: 1,
two: 2
},
{
three: 3,
four: 4
}
],
[
{
a: \"a\",
b: \"b\"
},
{
c: \"c\",
d: “d”
}
]
];
", "
", "We have defined a variable called yourArray. Complete the statement by assigning an array of at least 5 elements in length to the yourArray variable. Your array should contain at least one string, one number, and one boolean." ], "challengeSeed": [ "let yourArray; // change this line" ], "tests": [ "assert.strictEqual(Array.isArray(yourArray), true, 'message: yourArray is an array');", "assert.isAtLeast(yourArray.length, 5, 'message: yourArray is at least 5 elements long');", "assert(yourArray.filter( el => typeof el === 'boolean').length >= 1, 'message: yourArray contains at least one boolean');", "assert(yourArray.filter( el => typeof el === 'number').length >= 1, 'message: yourArray contains at least one number');", "assert(yourArray.filter( el => typeof el === 'string').length >= 1, 'message: yourArray contains at least one string');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d78b2366415b2v2512be3", "title": "Access an Array's Contents Using Bracket Notation", "description": [ "The fundamental feature of any data structure is, of course, the ability to not only store data, but to be able to retrieve that data on command. So, now that we've learned how to create an array, let's begin to think about how we can access that array's information.", "When we define a simple array as seen below, there are 3 items in it:", "
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];
// 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:", "
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 \"b\", to \"not b anymore\".", "
", "In order to complete this challenge, set the 2nd position (index 1) of myArray to anything you want, besides \"b\"." ], "challengeSeed": [ "let myArray = [\"a\", \"b\", \"c\", \"d\"];", "// change code below this line", "", "//change code above this line", "console.log(myArray);" ], "tests": [ "assert.strictEqual(myArray[0], \"a\", 'message: myArray[0] is equal to \"a\"');", "assert.notStrictEqual(myArray[1], \"b\", 'message: myArray[1] is no longer set to \"b\"');", "assert.strictEqual(myArray[2], \"c\", 'message: myArray[2] is equal to \"c\"');", "assert.strictEqual(myArray[3], \"d\", 'message: myArray[3] is equal to \"d\"');" ], "type": "waypoint", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d78b2367417b2b2512b0e", "title": "Add Items to an Array with push() and unshift()", "description": [ "An array's length, like the data types it can contain, is not fixed. Arrays can be defined with a length of any number of elements, and elements can be added or removed over time; in other words, arrays are mutable. In this challenge, we will look at two methods with which we can programmatically modify an array: 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.", "
", "We have defined a function, mixedNumbers, which we are passing an array as an argument. Modify the function by using push() and unshift() to add 'I', 2, 'three' to the beginning of the array and 7, 'VIII', 9 to the end so that the returned array contains representations of the numbers 1-9 in order." ], "challengeSeed": [ "function mixedNumbers(arr) {", " // change code below this line", "", " // change code above this line", " return arr;", "}", "", "// do not change code below this line", "console.log(mixedNumbers(['IV', 5, 'six']));" ], "tests": [ "assert.deepEqual(mixedNumbers(['IV', 5, 'six']), ['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', 9], 'message: mixedNumbers([\"IV\", 5, \"six\"]) should now return [\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]');", "assert.notStrictEqual(mixedNumbers.toString().search(/\\.push\\(/), -1, 'message: The mixedNumbers function should utilize the push() method');", "assert.notStrictEqual(mixedNumbers.toString().search(/\\.unshift\\(/), -1, 'message: The mixedNumbers function should utilize the unshift() method');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d78b2367417b2b2512b0f", "title": "Remove Items from an Array with pop() and shift()", "description": [ "Both 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!'];

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:", "
let popped = greetings.pop();
// returns 'hello'
// greetings now equals []
", "
", "We have defined a function, popShift, which takes an array as an argument and returns a new array. Modify the function, using pop() and shift(), to remove the first and last elements of the argument array, and assign the removed elements to their corresponding variables, so that the returned array contains their values." ], "challengeSeed": [ "function popShift(arr) {", " let popped; // change this line", " let shifted; // change this line", " return [shifted, popped];", "}", "", "// do not change code below this line", "console.log(popShift(['challenge', 'is', 'not', 'complete']));" ], "tests": [ "assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [\"challenge\", \"complete\"], 'message: popShift([\"challenge\", \"is\", \"not\", \"complete\"]) should return [\"challenge\", \"complete\"]');", "assert.notStrictEqual(popShift.toString().search(/\\.pop\\(/), -1, 'message: The popShift function should utilize the pop() method');", "assert.notStrictEqual(popShift.toString().search(/\\.shift\\(/), -1, 'message: The popShift function should utilize the shift() method');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d78b2367417b2b2512b10", "title": "Remove Items Using splice()", "description": [ "Ok, so we've learned how to remove elements from the beginning and end of arrays using 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'];

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 newArray = array.splice(3, 2);
// newArray equals ['really', 'happy']
", "
", "We've defined a function, sumOfTen, which takes an array as an argument and returns the sum of that array's elements. Modify the function, using splice(), so that it returns a value of 10." ], "challengeSeed": [ "function sumOfTen(arr) {", " // change code below this line", " ", " // change code above this line", " return arr.reduce((a, b) => a + b);", "}", "", "// do not change code below this line", "console.log(sumOfTen([2, 5, 1, 5, 2, 1]));" ], "tests": [ "assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, 'message: sumOfTen should return 10');", "assert.notStrictEqual(sumOfTen.toString().search(/\\.splice\\(/), -1, 'message: The sumOfTen function should utilize the splice() method');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d78b3367417b2b2512b11", "title": "Add Items Using splice()", "description": [ "Remember in the last challenge we mentioned that 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) {
  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 splice() to its maximum potential can have.", "
", "We have defined a function, htmlColorNames, which takes an array of HTML colors as an argument. Modify the function using splice() to remove the first two elements of the array and add 'DarkSalmon' and 'BlanchedAlmond' in their respective places." ], "challengeSeed": [ "function htmlColorNames(arr) {", " // change code below this line", " ", " // change code above this line", " return arr;", "} ", " ", "// do not change code below this line", "console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));" ], "tests": [ "assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick'], 'message: htmlColorNames should return [\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]');", "assert(/.splice/.test(code), 'message: The htmlColorNames function should utilize the splice() method');", "assert(!/shift|unshift/.test(code), 'message: You should not use shift() or unshift().');", "assert(!/\\[\\d\\]\\s*=/.test(code), 'message: You should not use array bracket notation.');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7a367417b2b2512b12", "title": "Copy Array Items Using slice()", "description": [ "The next method we will cover is slice(). 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 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.", "
", "We have defined a function, forecast, that takes an array as an argument. Modify the function using slice() to extract information from the argument array and return a new array that contains the elements 'warm' and 'sunny'." ], "challengeSeed": [ "function forecast(arr) {", " // change code below this line", " ", " return arr;", "}", "", "// do not change code below this line", "console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));" ], "tests": [ "assert.deepEqual(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']), ['warm', 'sunny'], 'message: forecast should return [\"warm\", \"sunny\"]');", "assert(/\\.slice\\(/.test(code), 'message: The forecast function should utilize the slice() method');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7b367417b2b2512b13", "title": "Copy an Array with the Spread Operator", "description": [ "While 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 thatArray = [...thisArray];
// thatArray equals [true, true, undefined, false, null]
// thisArray remains unchanged, and is identical to thatArray
", "
", "We have defined a function, copyMachine which takes arr (an array) and num (a number) as arguments. The function is supposed to return a new array made up of num copies of arr. We have done most of the work for you, but it doesn't work quite right yet. Modify the function using spread syntax so that it works correctly (hint: another method we have already covered might come in handy here!)." ], "challengeSeed": [ "function copyMachine(arr, num) {", " let newArr = [];", " while (num >= 1) {", " // change code below this line", "", " // change code above this line", " num--;", " }", " return newArr;", "}", "", "// change code here to test different cases:", "console.log(copyMachine([true, false, true], 2));" ], "tests": [ "assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], 'message: copyMachine([true, false, true], 2) should return [[true, false, true], [true, false, true]]');", "assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], 'message: copyMachine([1, 2, 3], 5) should return [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]');", "assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], 'message: copyMachine([true, true, null], 1) should return [[true, true, null]]');", "assert.deepEqual(copyMachine(['it works'], 3), [['it works'], ['it works'], ['it works']], 'message: copyMachine([\"it works\"], 3) should return [[\"it works\"], [\"it works\"], [\"it works\"]]');", "assert.notStrictEqual(copyMachine.toString().indexOf('.concat(_toConsumableArray(arr))'), -1, 'message: The copyMachine function should utilize the spread operator with array arr');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7b367417b2b2512b17", "title": "Combine Arrays with the Spread Operator", "description": [ "Another huge advantage of the spread operator, is the ability to combine arrays, or to insert all the elements of one array into another, at any index. With more traditional syntaxes, we can concatenate arrays, but this only allows us to combine arrays at the end of one, and at the start of another. Spread syntax makes the following operation extremely simple:", "
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 more complex and more verbose had we used traditional methods.", "
", "We have defined a function spreadOut that returns the variable sentence, modify the function using the spread operator so that it returns the array ['learning', 'to', 'code', 'is', 'fun']." ], "challengeSeed": [ "function spreadOut() {", " let fragment = ['to', 'code'];", " let sentence; // change this line", " return sentence;", "}", "", "// do not change code below this line", "console.log(spreadOut());" ], "tests": [ "assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun'], 'message: spreadOut should return [\"learning\", \"to\", \"code\", \"is\", \"fun\"]');", "assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, 'message: The spreadOut function should utilize spread syntax');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7b367417b2b2512b14", "title": "Check For The Presence of an Element With indexOf()", "description": [ "Since arrays can be changed, or mutated, at any time, there's no guarantee about where a particular piece of data will be on a given array, or if that element even still exists. Luckily, JavaScript provides us with another built-in method, 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'];

fruits.indexOf('dates') // returns -1
fruits.indexOf('oranges') // returns 2
fruits.indexOf('pears') // returns 1, the first index at which the element exists
", "
", "indexOf() can be incredibly useful for quickly checking for the presence of an element on an array. We have defined a function, quickCheck, that takes an array and an element as arguments. Modify the function using indexOf() so that it returns true if the passed element exists on the array, and false if it does not." ], "challengeSeed": [ "function quickCheck(arr, elem) {", " // change code below this line", "", " // change code above this line", "}", "", "// change code here to test different cases:", "console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));" ], "tests": [ "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false, 'message: quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\") should return false');", "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'onions'), true, 'message: quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\") should return true');", "assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, 'message: quickCheck([3, 5, 9, 125, 45, 2], 125) should return true');", "assert.strictEqual(quickCheck([true, false, false], undefined), false, 'message: quickCheck([true, false, false], undefined) should return false');", "assert.notStrictEqual(quickCheck.toString().search(/\\.indexOf\\(/), -1, 'message: The quickCheck function should utilize the indexOf() method');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7b367417b2b2512b15", "title": "Iterate Through All an Array's Items Using For Loops", "description": [ "Sometimes when working with arrays, it is very handy to be able to iterate through each item to find one or more elements that we might need, or to manipulate an array based on which data items meet a certain set of criteria. JavaScript offers several built in methods that each iterate over arrays in slightly different ways to achieve different results (such as every(), 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) {
  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 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.", "
", "We have defined a function, filteredArray, which takes arr, a nested array, and elem as arguments, and returns a new array. elem represents an element that may or may not be present on one or more of the arrays nested within arr. Modify the function, using a for loop, to return a filtered version of the passed array such that any array nested within arr containing elem has been removed." ], "challengeSeed": [ "function filteredArray(arr, elem) {", " let newArr = [];", " // change code below this line", "", " // change code above this line", " return newArr;", "}", "", "// change code here to test different cases:", "console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));" ], "tests": [ "assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], 'message: filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18) should return [ [10, 8, 3], [14, 6, 23] ]');", "assert.deepEqual(filteredArray([ ['trumpets', 2], ['flutes', 4], ['saxophones', 2] ], 2), [['flutes', 4]], 'message: filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2) should return [ [\"flutes\", 4] ]');", "assert.deepEqual(filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter'), [['amy', 'beth', 'sam']], 'message: filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\") should return [ [\"amy\", \"beth\", \"sam\"] ]');", "assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], 'message: filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3) should return [ ]');", "assert.notStrictEqual(filteredArray.toString().search(/for/), -1, 'message: The filteredArray function should utilize a for loop');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7b367417b2b2512b16", "title": "Create complex multi-dimensional arrays", "description": [ "Awesome! You have just learned a ton about arrays! This has been a fairly high level overview, and there is plenty more to learn about working with arrays, much of which you will see in later sections. But before moving on to looking at Objects, lets take one more look, and see how arrays can become a bit more complex than what we have seen in previous challenges.", "One of the most powerful features when thinking of arrays as data structures, is that arrays can contain, or even be completely made up of other arrays. We have seen arrays that contain arrays in previous challenges, but fairly simple ones. However, arrays can contain an infinite depth of arrays that can contain other arrays, each with their own arbitrary levels of depth, and so on. In this way, an array can very quickly become very complex data structure, known as a multi-dimensional, or nested array. Consider the following example:", "
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:", "
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:", "
nestedArray[2][1][0][0][0] = 'deeper still';

console.log(nestedArray[2][1][0][0][0]);
// now logs: deeper still
", "
", "We have defined a variable, myNestedArray, set equal to an array. Modify myNestedArray, using any combination of strings, numbers, and booleans for data elements, so that it has exactly five levels of depth (remember, the outer-most array is level 1). Somewhere on the third level, include the string 'deep', on the fourth level, include the string 'deeper', and on the fifth level, include the string 'deepest'." ], "challengeSeed": [ "let myNestedArray = [", " // change code below this line", " ['unshift', false, 1, 2, 3, 'complex', 'nested'],", " ['loop', 'shift', 6, 7, 1000, 'method'],", " ['concat', false, true, 'spread', 'array'],", " ['mutate', 1327.98, 'splice', 'slice', 'push'],", " ['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']", " // change code above this line", "];" ], "tests": [ "assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== 'number' && typeof flattened[i] !== 'string' && typeof flattened[i] !== 'boolean') { return false } } return true })(myNestedArray), true, 'message: myNestedArray should contain only numbers, booleans, and strings as data elements');", "assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) { arrayDepth(array[i], 0, d + 1);} else { depth = (d > depth) ? d : depth;}if (i < array.length) { arrayDepth(array, i + 1, d);} }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, 'message: myNestedArray should have exactly 5 levels of depth');", "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, 'deep').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, 'deep')[0] === 2, 'message: myNestedArray should contain exactly one occurrence of the string \"deep\" on an array nested 3 levels deep');", "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, 'deeper').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, 'deeper')[0] === 3, 'message: myNestedArray should contain exactly one occurrence of the string \"deeper\" on an array nested 4 levels deep');", "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, 'deepest').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) { return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) { return combined.concat(depth);} else { return combined;}}, []);})(myNestedArray, 'deepest')[0] === 4, 'message: myNestedArray should contain exactly one occurrence of the string \"deepest\" on an array nested 5 levels deep');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7dac367417b2b25184d3", "title": "Introduction to Objects", "description": [ [ "", "", "The next data structure we will discuss is the JavaScript object. Like arrays, objects are a fundamental part of JavaScript. However, it is probably safe to say that objects surpass arrays in flexibility, usefulness and in their overall importance to the language — in fact, you may have heard this line before: 'In JavaScript, everything is an object.'

While an understanding of objects is important to understand the inner workings of JavaScript functions or JavaScript's object-oriented capabilities, JavaScript objects at a basic level are actually just key-value pair stores, a commonly used data structure across almost all programming languages. Here, we will confine our discussion to JavaScript objects in this capacity.", "" ], [ "", "", "Key-value pair data structures go by different names depending on the language and the specific details of the data structure. The terms dictionary, map, and hash table all refer to the notion of a data structure in which specific keys, or properties, are mapped to specific values.

Objects, and other similar key-value pair data structures, offer some very useful benefits. One clear benefit is that they allow us to structure our data in an intuitive way; properties can be nested to an arbitrary depth, and values can be anything, including arrays and even other objects.

Largely due to this flexibility, objects are also the foundation for JavaScript Object Notation, or JSON, which is a widely used method of sending data across the web.", "" ], [ "", "", "Another powerful advantage of key-value pair data structures is constant lookup time. What this means, is that when you request the value of a specific property, you will get the value back in the same amount of time (theoretically) regardless of the number of entries in the object. If you had an object with 5 entries or one that held a collection of 1,000,000, you could still retrieve property values or check if a key exists in the same amount of time.

The reason for this fast lookup time, is that internally, the object is storing properties using a hashing mechanism which allows it to know exactly where it has stored different property values. If you want to learn more about this please take a look at the optional Advanced Data Structures challenges. All you should remember for now is that performant access to flexibly structured data make key-value stores very attractive data structures useful in a wide variety of settings.", "" ], [ "", "", "

In JavaScript, objects are written as comma-separated lists of key-value pairs, wrapped in curly brackets, with each key and its assigned value separated by a colon:
{ key1: 'val-1', key2: 'val-2' }

In the next few challenges, we will examine JavaScript objects more closely, and take a look at methods and techniques that allow us to access, store, and manipulate an object's data.

Note that throughout the scope of this discussion, and in general when considering JavaScript objects, the terms key and property will be used interchangeably.", "" ] ], "releasedOn": "Feb 17, 2017", "challengeSeed": [], "tests": [], "type": "waypoint", "challengeType": 7, "isRequired": false, "translations": {} }, { "id": "587d7b7c367417b2b2512b18", "title": "Add Key-Value Pairs to JavaScript Objects", "description": [ "At their most basic, objects are just collections of key-value pairs, or in other words, pieces of data mapped to unique identifiers that we call properties or keys. Let's take a look at a very simple example:", "
let FCC_User = {
username: 'awesome_coder',
followers: 572,
points: 1741,
completedProjects: 15
};
", "The above code defines an object called 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;
// userData equals 572
", "This is called dot notation. Alternatively, we can also access the property with brackets, like so:", "
let userData = FCC_User['followers']
// userData equals 572
", "Notice that with bracket notation, we enclosed followers 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.", "
", "Using the same syntax, we can also add new key-value pairs to objects. We've created a foods object with three entries. Add three more entries: bananas with a value of 13, grapes with a value of 35, and strawberries with a value of 27." ], "challengeSeed": [ "let foods = {", " apples: 25,", " oranges: 32,", " plums: 28", "};", "", "// change code below this line", "", "// change code above this line", "", "console.log(foods);" ], "tests": [ "assert(typeof foods === 'object', 'message: foods is an object');", "assert(foods.bananas === 13, 'message: The foods object has a key \"bananas\" with a value of 13');", "assert(foods.grapes === 35, 'message: The foods object has a key \"grapes\" with a value of 35');", "assert(foods.strawberries === 27, 'message: The foods object has a key \"strawberries\" with a value of 27');", "assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1, 'message: The key-value pairs should be set using dot or bracket notation');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7c367417b2b2512b19", "title": "Modify an Object Nested Within an Object", "description": [ "Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:", "
let nestedObject = {
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.", "
", "Here we've defined an object, userActivity, which includes another object nested within it. You can modify properties on this nested object in the same way you modified properties in the last challenge. Set the value of the online key to 45." ], "challengeSeed": [ "let userActivity = {", " id: 23894201352,", " date: 'January 1, 2017',", " data: {", " totalUsers: 51,", " online: 42", " }", "};", "", "// change code below this line", "", "// change code above this line", "", "console.log(userActivity);" ], "tests": [ "assert('id' in userActivity && 'date' in userActivity && 'data' in userActivity, 'message: userActivity has id, date and data properties');", "assert('totalUsers' in userActivity.data && 'online' in userActivity.data, 'message: userActivity has a data key set to an object with keys totalUsers and online');", "assert(userActivity.data.online === 45, 'message: The online property nested in the data key of userActivity should be set to 45');", "assert.strictEqual(code.search(/online: 45/), -1, 'message: The online property is set using dot or bracket notation');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7c367417b2b2512b1a", "title": "Access Property Names with Bracket Notation", "description": [ "In the first object challenge we mentioned the use of bracket notation as a way to access property values using the evaluation of a variable. For instance, imagine that our 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 inventory = foods[selectedFood];
", "This code will evaluate the value stored in the 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.", "
", "We've defined a function, checkInventory, which receives a scanned item as an argument. Return the current value of the scannedItem key in the foods object. You can assume that only valid keys will be provided as an argument to checkInventory." ], "challengeSeed": [ "let foods = {", " apples: 25,", " oranges: 32,", " plums: 28,", " bananas: 13,", " grapes: 35,", " strawberries: 27", "};", "// do not change code above this line", "", "function checkInventory(scannedItem) {", " // change code below this line", "", "}", "", "// change code below this line to test different cases:", "console.log(checkInventory(\"apples\"));" ], "tests": [ "assert.strictEqual(typeof checkInventory, 'function', 'message: checkInventory is a function');", "assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, 'message: The foods object should have only the following key-value pairs: apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27');", "assert.strictEqual(checkInventory('apples'), 25, 'message: checkInventory(\"apples\") should return 25');", "assert.strictEqual(checkInventory('bananas'), 13, 'message: checkInventory(\"bananas\") should return 13');", "assert.strictEqual(checkInventory('strawberries'), 27, 'message: checkInventory(\"strawberries\") should return 27');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7c367417b2b2512b1b", "title": "Use the delete Keyword to Remove Object Properties", "description": [ "Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, and, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.", "In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can remove a key-value pair from an object.", "Let's revisit our 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;
", "
", "Use the delete keyword to remove the oranges, plums, and strawberries keys from the foods object." ], "challengeSeed": [ "let foods = {", " apples: 25,", " oranges: 32,", " plums: 28,", " bananas: 13,", " grapes: 35,", " strawberries: 27", "};", "", "// change code below this line", "", "// change code above this line", "", "console.log(foods);" ], "tests": [ "assert(!foods.hasOwnProperty('oranges') && !foods.hasOwnProperty('plums') && !foods.hasOwnProperty('strawberries') && Object.keys(foods).length === 3, 'message: The foods object only has three keys: apples, grapes, and bananas');", "assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, 'message: The oranges, plums, and strawberries keys are removed using delete');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7d367417b2b2512b1c", "title": "Check if an Object has a Property", "description": [ "Now we can add, modify, and remove keys from objects. But what if we just wanted to know if an object has a specific property? JavaScript provides us with two different ways to do this. One uses the hasOwnProperty() 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');
'Alan' in users;
// both return true
", "
", "We've created an object, users, with some users in it and a function isEveryoneHere, which we pass the users object to as an argument. Finish writing this function so that it returns true only if the users object contains all four names, Alan, Jeff, Sarah, and Ryan, as keys, and false otherwise." ], "challengeSeed": [ "let users = {", " Alan: {", " age: 27,", " online: true", " },", " Jeff: {", " age: 32,", " online: true", " },", " Sarah: {", " age: 48,", " online: true", " },", " Ryan: {", " age: 19,", " online: true", " }", "};", "", "function isEveryoneHere(obj) {", " // change code below this line", "", " // change code above this line", "}", "", "console.log(isEveryoneHere(users));" ], "tests": [ "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'message: The users object only contains the keys Alan, Jeff, Sarah, and Ryan');", "assert(isEveryoneHere(users) === true, 'message: The function isEveryoneHere returns true if Alan, Jeff, Sarah, and Ryan are properties on the users object');", "assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, 'message: The function isEveryoneHere returns false if Alan, Jeff, Sarah, and Ryan are not properties on the users object');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7d367417b2b2512b1d", "title": " Iterate Through the Keys of an Object with a for...in Statement", "description": [ "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 users object, this could look like:", "
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 keys position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.", "
", "We've defined a function, countOnline; use a for...in statement within this function to loop through the users in the users object and return the number of users whose online property is set to true." ], "challengeSeed": [ "let users = {", " Alan: {", " age: 27,", " online: false", " },", " Jeff: {", " age: 32,", " online: true", " },", " Sarah: {", " age: 48,", " online: false", " },", " Ryan: {", " age: 19,", " online: true", " }", "};", "", "function countOnline(obj) {", " // change code below this line", "", " // change code above this line", "}", "", "console.log(countOnline(users));" ], "tests": [ "assert(users.Alan.online === false && users.Jeff.online === true && users.Sarah.online === false && users.Ryan.online === true, 'message: The users object contains users Jeff and Ryan with online set to true and users Alan and Sarah with online set to false');", "assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, 'message: The function countOnline returns the number of users with the online property set to true');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7d367417b2b2512b1e", "title": "Generate an Array of All Object Keys with Object.keys()", "description": [ "We can also generate an array which contains all the keys stored in an object using the Object.keys() method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.", "
", "Finish writing the getArrayOfUsers function so that it returns an array containing all the properties in the object it receives as an argument." ], "challengeSeed": [ "let users = {", " Alan: {", " age: 27,", " online: false", " },", " Jeff: {", " age: 32,", " online: true", " },", " Sarah: {", " age: 48,", " online: false", " },", " Ryan: {", " age: 19,", " online: true", " }", "};", "", "function getArrayOfUsers(obj) {", " // change code below this line", "", " // change code above this line", "}", "", "console.log(getArrayOfUsers(users));" ], "tests": [ "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'message: The users object only contains the keys Alan, Jeff, Sarah, and Ryan');", "assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf('Alan') !== -1 && R.indexOf('Jeff') !== -1 && R.indexOf('Sarah') !== -1 && R.indexOf('Ryan') !== -1 && R.indexOf('Sam') !== -1 && R.indexOf('Lewis') !== -1); })() === true, 'message: The getArrayOfUsers function returns an array which contains all the keys in the users object');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} }, { "id": "587d7b7d367417b2b2512b1f", "title": "Modify an Array Stored in an Object", "description": [ "Now you've seen all the basic operations for JavaScript objects. You can add, modify, and remove key-value pairs, check if keys exist, and iterate over all the keys in an object. As you continue learning JavaScript you will see even more versatile applications of objects. Additionally, the optional Advanced Data Structures lessons later in the curriculum also cover the ES6 Map and Set objects, both of which are similar to ordinary objects but provide some additional features. Now that you've learned the basics of arrays and objects, you're fully prepared to begin tackling more complex problems using JavaScript!", "
", "Take a look at the object we've provided in the code editor. The user object contains three keys. The data key contains four keys, one of which contains an array of friends. From this, you can see how flexible objects are as data structures. We've started writing a function addFriend. Finish writing it so that it takes a user object and adds the name of the friend argument to the array stored in user.data.friends and returns that array." ], "challengeSeed": [ "let user = {", " name: 'Kenneth',", " age: 28,", " data: {", " username: 'kennethCodesAllDay',", " joinDate: 'March 26, 2016',", " organization: 'freeCodeCamp',", " friends: [", " 'Sam',", " 'Kira',", " 'Tomo'", " ],", " location: {", " city: 'San Francisco',", " state: 'CA',", " country: 'USA'", " }", " }", "};", "", "function addFriend(userObj, friend) {", " // change code below this line ", "", " // change code above this line", "}", "", "console.log(addFriend(user, 'Pete'));" ], "tests": [ "assert('name' in user && 'age' in user && 'data' in user, 'message: The user object has name, age, and data keys');", "assert((function() { let L1 = user.data.friends.length; addFriend(user, 'Sean'); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), 'message: The addFriend function accepts a user object and a friend string as arguments and adds the friend to the array of friends in the user object');", "assert.deepEqual((function() { delete user.data.friends; user.data.friends = ['Sam', 'Kira', 'Tomo']; return addFriend(user, 'Pete') })(), ['Sam', 'Kira', 'Tomo', 'Pete'], 'message: addFriend(user, \"Pete\") should return [\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]');" ], "type": "waypoint", "releasedOn": "Feb 17, 2017", "solutions": [], "challengeType": 1, "translations": {} } ] }