Coding Cups
In the previous challenge, you learned about import and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with import, known as export. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like import, export is a non-browser feature.
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.
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().
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:
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.
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
}
}
};
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.
In the past, the function require() would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources.
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.
A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.
ES6 adds some nice support for easily defining object literals.
You can obtain values from an object, and set a value of a property within an object.
Theory
In some cases, you can destructure the object in a function argument itself.
When defining functions within objects in ES5, we have to use the keyword function as follows:
ES6 provides a new syntax to help create objects, using the keyword class.
It’s time we see how powerful arrow functions are when processing data.
Theory
In order to help us create more flexible functions, ES6 introduces the rest operator for function parameters. With the rest operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.
Theory
ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.
Theory
We saw earlier how spread operator can effectively spread, or unpack, the contents of the array.
We can similarly destructure nested objects into variables.
In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.
Theory
ES6 makes destructuring arrays as easy as destructuring objects.
You are given a JSON object representing a part of your musical album collection. Each album has several properties and a unique id number as its key. Not all albums have complete information.
Check if the predicate (second argument) is truthy on all elements of a collection (first argument).
The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a 2d array.
Perform a search and replace on the sentence using the arguments provided and return the new sentence.
Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other words, return the symmetric difference of the two arrays.
We’ll pass you an array of two numbers. Return the sum of those two numbers and all numbers between them.
We’ll pass you an array of two numbers. Return the sum of those two numbers and all numbers between them.
Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount.
```JavaScript function destroyer(arr) { var args = Array.from(arguments).slice(1); // console.log(args); return arr.filter(function(arrEl) { // console.log(arrEl); //evaluates to true if the array element is present // console.log(args.includes(arrEl)); return !args.includes(arrEl); }); }
Remove all falsy values from an array. Falsy values in JavaScript are false, null, 0, “”, undefined, and NaN.
Return the remaining elements of an array after chopping off n elements from the head.
Write a function that splits an array (first argument) into groups the length of size (second argument) and returns them as a two-dimensional array.
Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a … ending.
Repeat a given string (first argument) num times (second argument). Return an empty string if num is not a positive number.
Check if a string (first argument, str) ends with the given target string (second argument, target).
Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.