JavaScript Collections: Arrays and Objects

Question 1

What happens when you provide negative arguments to the slice method?

Answer 1

When given negative numbers as arguments, slice method treats them as the ‘string length + index’.

e.g. ‘abcdefghi’.slice(-4, -2)
Index -4 is equal to 9 + (-4) = 5
Index -2 is equal to 9 + (-2) = 7
> ‘abcdefghi’.slice(5, 7) // => ‘fg’

Question 2

What are the 2 key differences between slice and substring methods?

Answer 2

1. When the start index > end index, substring will implicitly swap the arguments while slice will return an empty string.
2. When either argument is negative, substring will treat them as 0 and return the whole string.

Note: Slice is preferred since the behavior is more predictable when it comes to edge cases.

Question 3

Will slicing a copy of the array and modifying its values mutate the original array? Please explain.

Answer 3

Slicing an array will create a shallow copy. If the original array/object contains ONLY primitive values, then the original array/object will not be affected when the copied array/object is mutated.

e.g. 
> let arr = ['a', 'b', 'c', 'd']
> let arrCopy = arr.slice()
> arrCopy.push('e')
> arr     // =>  [ 'a', 'b', 'c', 'd' ]
> arrCopy     // => [ 'a', 'b', 'c', 'd', 'e' ]

However, if the array or object contains nested objects or arrays, changing the data nested in the original will mutate the copied array/object.

e.g. 
> let nestedArr = [ 'a', 'b', [1, 2] ]
> let nestedArrCopy = nestedArr.slice()
> nestedArrCopy[2].push(3)
> arr     // =>  [ 'a', 'b', [1, 2, 3] ]
> arrCopy     // =>  [ 'a', 'b', [1, 2, 3] ]

Question 4

What are the three types of collections?

Answer 4

Strings, arrays, and objects are all collection data structures made up of individual elements. Arrays are objects.

Strings use an integer-based index that represents each character in the string.

Similar to strings, arrays are a list of elements that are ordered by index. However, each element can be any value, not just characters.

Objects are another collection data structure that uses key-value pairs instead of an integer-based index. The key (aka property) is a string and the value can be any value.

Question 5

What happens when an object has the same key/property name?

Answer 5

When initializing an object, keys/properties must be unique. If there are duplicates, the first value will be overwritten by the most recent value.

Values, however, can be duplicated.

Question 6

What will an out-of-bounds index return? A negative index?

Answer 6

Out of bounds and negative indexes of a string or an array will return undefined.

Question 7

How do you differentiate between a non-existent property and a property with undefined as a value?

Answer 7

Two ways:

object.hasOwnProperty(‘key’); // => true/false

OR

Object.keys(object).includes(‘key’) // => true/false

Question 8

Since arrays are objects, what happens when you add properties to arrays?

Answer 8

You can add properties to arrays, but it will not affect its length property are recognized by array methods such as forEach, map, filter, reduce.

e.g.
> let arr = [‘a’, ‘b’, ‘c’];
> arr[‘boo’] = ‘hoo’;
> arr[-1] = 374;
> arr; // => [ ‘a’, ‘b’, ‘c’, boo: ‘hoo’, ‘-1’: 374 ]
> arr.length; // => 3 (not 5!)
arr.forEach(element => console.log(element)); // => prints: foo, bar, qux

Question 9

How do you convert a string to an array and vice versa? How about an object to an array?

Answer 9

string –> array
string.split()

array –> string
string.join()

object –> array
Object.entries(object)

Question 10

What are some useful string methods?

Answer 10

.concat()
.trim()
.includes()
.split()
.toUpperCase() and .toLowerCase()
.charCodeAt (using unicode)
.repeat()

Question 11

What is a guard clause in loops?

Answer 11

A guard clause is a conditional statement that allows the body of a loop or function to skip values it doesn’t need to handle.

Guard clauses always include a continue, break, or return statement in the body of the ‘if’ statement. It’s common practice to use the single-line version of the if statement with guard clauses

e.g.
> let numbers = [ 1, 4, 3, 7, 6, 5, 2, 1 ];
> for (let index = 0; index < numbers.length; index += 1) {
> if (numbers[index] % 2 === 1) continue;
> let square = numbers[index] * numbers[index];
> console.log(square);
> }

// In this case, we don’t need the main body of the loop to process odd numbers, so a guard clause is used at the top of the loop. The continue statement is used to terminate the current iteration of the loop and process the next value.

Note: The continue statement does not restart the loop, it ends the current iteration and starts the next.

Question 12

What are the four primary elements in looping?

Answer 12

1. A looping construct (e.g. for or while)
2. A counter (control varaible)
3. A way to retrieve a current value
4. A way to exit the loop

Question 13

Describe the PEDAC process.

Answer 13

P: Understand the problem

(1) Establish explicit rules / boundaries of the problem with the available information
(2) Check the test cases if there are any
(3) Clarify any part of the problem that is unclear. e.g. ask about base cases or assumptions (implicit)

E: Examples / Test cases
D: Data Structure (often paired with algorithm)
A: Algorithm (often paired with data structure)
C: Implement code

Question 14

What is the difference between selection and transformation of collections?

Answer 14

Selection is picking some elements out of a collection depending on a criteria while transformation refers to iterating through or manipulating every element in the collection.

When performing a transformation, it is important to note whether the original collection is mutated or if a new collection is returned.

Note: It is still considered a transformation if some elements are left unchanged but the whole length of the array is iterated over and returned.

Question 15

What are some useful array methods?

Answer 15

JavaScript arrays supply more than 30 instance and static methods

.forEach() //Iteration, returns undefined
.filter() // Selection/Filtering, returns new array
.map() // Transformation, returns new array
.reduce()
.some() // returns true if any ONE element is true
.every() // returns true if ALL elements are true
.find() // returns first element that is true
.findIndex() returns first index that is true
.includes() // doesn’t take callback, but an argument
.reverse()

Question 16

How do you destructure an array?

Answer 16

Array destructuring assignment involves assigning elements of an array to multiple variables by wrapping the variable names in brackets.

e.g. 
> let keyValue = ['apple', 'Fruit']
> let [key, value] = keyValue
> key    // => 'apple'
> value    // => 'Fruit'

Question 17

What are sparse arrays and how to you create them?

Answer 17

Arrays can become ‘sparse’ when the number of elements doesn’t align with its length. i.e. there can be gaps in the array.

One way to create these gaps is by increasing the size of the length property without adding values to the array.

e.g.
> let arr = [2, 4, 6]
> arr.length = 5;
> console.log (arr) // => [2, 4, 6, <2 empty items> ]

Note: arr[3] will log as undefined but the value is not undefined, it is an empty item.

Question 18

What coercion takes place when the sort method is called?

Answer 18

When sort is called without arguments, it will coerce all the array elements to their string equivalents and sorts them using string comparisons.

Undefined is a special case and will always be placed at the end of array no matter what the other values.

NOTE: Sort is a destructive method that mutates the original array. Use slice method to avoid mutation.

Question 19

How do you determine if one character in a string is greater than another?

Answer 19

Find the code point of the two characters using string.charCodeAt(). Javascript’s strings uses UTF-16 character codes, which is different from ASCII characters .

Question 20

What are some ways to make a shallow copy of an array?

Answer 20

.slice()
… spread syntax

NOTE: Nested arrays/objects will be shared and NOT copied. Hence modifying nested arrays/objects will mutate both the original and copy.

Question 21

What are some ways to make a shallow copy of an object?

Answer 21

Object.assign({}, obj)

NOTE: Nested arrays/objects will be shared and NOT copied. Hence modifying nested arrays/objects will mutate both the original and copy.

Question 22

What is the difference between an imperative approach and a declarative approach to algorithms?

Answer 22

An imperative approach tells the interpreter what to do each step of the way.
e.g. Create a new array, use a for loop to square the original array and push new value to new array.

A declarative approach merely states what it is you are trying to accomplish.
e.g. Using map to create a new array of squared values.

Question 23

What is a higher order function?

Answer 23

Functions that take other functions (callbacks) as arguments or functions that return other functions.