Array Methods

Question 1

CONCAT() METHOD

• What does the concat() method do?
• Does it change the existing arrays?
• Does it return a new array?

Concat - Question 1/5

Answer 1

The concat() method is used to merge/combine two or more arrays.

This method does not change the existing arrays, but instead returns a new array.

DOCUMENTATION LINK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Question 2

CONCAT() METHOD

Does concat() return a new array?

Concat - Question 2/5

Answer 2

Yes

EXAMPLE
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array [“a”, “b”, “c”, “d”, “e”, “f”]

Question 3

CONCAT() METHOD

Is concat() a copy method or a mutating method?

Concat - Question 3/5

Answer 3

Copy method.

Concat() does NOT mutate/alter the original/source arrays that it’s concatenating from.

Question 4

CONCAT() METHOD

Can you concat more than 2 arrays?

More than 3, 4, etc?

Concat - Question 4/5

Answer 4

Yes

The concat() method allows you to merge/combine as many arrays as you want.

Question 5

CONCAT() METHOD

Which is the correct syntax to write a concat() method?

A: concat(num1, num2)
B: num1.concat(num2)
C: num1.concat.num2
D: concat(num1).num2

Concat - Question 5/5

Answer 5

B
num1.concat(num2)

You input the initial array followed by the concat method. You then input the arrays you want to concat with the initial array as arguments separated by commas.

Question 6

JOIN() METHOD

• What does the join() method do?
• Does it change the existing arrays?
• Does it return a new array?
• Can you use integers too, not just strings?

Join - Question 1/5

Answer 6

The join() method CREATES and RETURNS a NEW STRING by concatenating all of the elements in an array, separated by commas or a specified separator string.

Yes, you can use integers.

DOCUMENTATION LINK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Question 7

JOIN() METHOD

Does join() return a new array?

Join - Question 2/5

Answer 7

Yes

const words = ['Tyler', 'Kristen', 'Jack', 'Jill']
const joinedWords = words.join();

console.log(joinedWords);
//output -> Tyler,Kristen,Jack,Jill

Question 8

JOIN() METHOD

Is join() a copy method or a mutating method?

Join - Question 3/5

Answer 8

Copy method.

Join() does NOT mutate/alter the original/source array that it’s joining from.

Question 9

JOIN() METHOD

Which is the correct syntax to write a join() method?

A: join.words()
B: join(words)
C: words.join()
D: words.join(words)

Join - Question 4/5

Answer 9

C
words.join()

You input the array name followed by the join() method. You then specify in its argument a separator string if you want.

words.join('')
// Output -> WordWordWord

If there is no specified separator string, it will default to separating the joined strings with un-spaced commas.

words.join()
// Output -> Word,Word,Word

Question 10

JOIN() METHOD

What’s a separator string?

Join - Question 5/5

Answer 10

A separator string is the argument you provide the join() method to separate the joined strings.

This affects how the new array returns the data.

EXAMPLES
Nothing separates the strings with un-spaced commas by default
join()
//Output -> Word,Word,Word

Empty apostrophes (or quotes) returns the strings next to each other with no spacing
join('')
//Output -> WordWordWord

Apostrophes (or quotes) with a space in between separates the strings with a space
join(' ')
//Output -> Word Word Word

Symbols (such as ,-_+& etc…) WITHOUT spacing separate the strings with that symbol
join('+')
//Output -> Word+Word+Word

Symbols WITH spacing separate the strings with the symbol and spacing
join(', ')
//Output -> Word, Word, Word

You can even add a space before and after a symbol
join(' + ')
//Output -> Word + Word + Word

Question 11

SHIFT() METHOD

• What does the shift() method do?
• Does it change the existing arrays?

Shift - Question 1/6

Answer 11

The shift() method REMOVES the FIRST ELEMENT from an array and RETURNS that REMOVED ELEMENT.

This method CHANGES the length of THE ARRAY.

Note: The pop() method is identical to the shift() method, except pop() removes the last element of an array instead.

DOCUMENTATION LINK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

Question 12

SHIFT() METHOD

Does shift() return a new array?

Shift - Question 2/6

Answer 12

No.

It does not return a new array, but rather mutates the original array.

It does however return the removed value/element.

You can gain access to the returned removed element by storing it in a variable.

Question 13

SHIFT() METHOD

Is shift() a copy method or a mutating method?

Shift - Question 3/6

Answer 13

Mutating method.

Shift() will directly change/alter the original source array that the method is being performed on.

If you console.log the source array after the method has been performed, the unshift() changes to that array will be apparent.

Question 14

SHIFT() METHOD

How do you access the returned removed element?

Shift - Question 4/6

Answer 14

You can assign the method operation to a variable.

That variable will then store, or rather become that removed element.

EXAMPLE
const array = [1, 2, 3]
const removedElement = array.shift()

console.log(removedElement);
// Output -> 1`

Question 15

SHIFT() METHOD

What will A & B console.log?

const array = [1, 2, 3]
const removedElement = array.shift();

A:
console.log(array);

B:
console.log(removedElement);

Shift - Question 5/6

Answer 15

A:
[2. 3]

B:
1

Notice how the returned removed element is no longer in the array.

It does not create a new array.

It just returns the removed element itself; whether that be an integer, string, etc.

Question 16

SHIFT() METHOD

Which is the correct syntax to write a shift() method?

A: array.shift()
B: shift.array()
C: shift(array)
D: shift().array

Shift - Question 6/6

Answer 16

A
array.shift()

You input the array name followed by the shift() method.

Question 17

UNSHIFT() METHOD

• What does the unshift() method do?
• Does it change the existing arrays?

Unshift - Question 1/6

Answer 17

The unshift() method adds the specified elements to the beginning of an array and returns the new length of the array.

DOCUMENTATION LINK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

Question 18

UNSHIFT() METHOD

Does unshift() return a new array?

Unshift - Question 2/6

Answer 18

No

Unshift() does not return a new array. It instead returns the NEW length of the source array.

Question 19

UNSHIFT() METHOD

Is unshift() a copy method or a mutating method?

Unshift - Question 3/6

Answer 19

Mutating method.

Unshift() will directly mutate the orginal/source array and add a new specified element to the beginning of the array.

Question 20

UNSHIFT() METHOD

What will A & B console.log?

const array = [1, 2, 3]
const removedElement = array.unshift();

A:
console.log(array);

B:
console.log(removedElement);

Unshift - Question 4/6

Answer 20

A:
[1, 2, 3]

This is because we did not add anything to the array with unshift()

B:
3

Same reason as above. The array length is still 3.

Question 21

UNSHIFT() METHOD

What will C & D console.log?

const array = [1, 2, 3]
const removedElement = array.unshift(2, 6);

C:
console.log(array);

D:
console.log(removedElement);

EXTRA

What will E console.log?

const array = [1, 2, 3]
array.unshift(-2, -1, 0)

E:
console.log(array);

Unshift - Question 5/6

Answer 21

C:
[2, 6, 1, 2, 3]

We mutated the source array and added 2 new elements (2, 6) to the beginning of the array.

D:
5

The NEW length of the source array (which was 3) is now 5 after we added two new elements to it.

E:
[-2, -1, 0, 1, 2, 3]

This is to demonstrate that since it’s a mutating method, if we don’t care to capture the return value we can simply just use the unshift() method without a variable.

Again, only declare a variable with a mutating method if you want to capture the return value.

Also, you can use negative numbers as well, and even strings.

const stringArray = ['World']
stringArray.unshift('Hello')

console.log(stringArray);
// output -> [‘Hello’, ‘World’]

Question 22

UNSHIFT() METHOD

Which is the correct syntax to write a unshift() method?

A: unshift().array
B: array().unshift
C: unshift.array()
D: array.unshift()

Unshift - Question 6/6

Answer 22

D
array.unshift()

You input the array name followed by the unshift() method.

Question 23

POP() METHOD

• What does the pop() method do?
• Does it change the existing array(s)?

Pop - Question 1/6

Answer 23

The pop() method removes the last element from an array and returns that element.

This method changes the length of the array.

Note: The shift() method is identical to the pop() method, except shift() removes the first element of an array instead.

DOCUMENTATION LINK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

Question 24

POP() METHOD

Does pop() return a new array?

Pop- Question 2/6

Answer 24

No

It does not return a new array, it returns the removed element.

Question 25

POP() METHOD

Is pop() a copy method or a mutating method?

Pop- Question 3/6

Answer 25

Mutating method.

Pop() will directly mutate the orginal/source array and remove the last element from the array.

Question 26

POP() METHOD

What will A & B console.log?

const array = [1, 2, 3]
const poppedElement = array.pop();

A:
console.log(array);

B:
console.log(poppedElement);

Pop- Question 4/6

Answer 26

A:
[1, 2]

B:
3

Notice how the returned removed element is no longer in the array.

It just returns the removed element itself; whether that be an integer, string, etc.

Question 27

POP() METHOD

Tricky Knowledge Test!

What will A & B & C console.log?

const array = ['This', 'is', 'popping', 'arrays!']

A:
console.log(array.pop());
B:
console.log(array)

C:
array.pop()
console.log(array)

EXTRA!

Continuing from before, what will D & E console.log?

D:
console.log(array.pop());
E:
console.log(array);

Pop- Question 5/6

Answer 27

A:
arrays!

Similar to when variables are assigned to mutating methods, the value is returned even with a console.log!

This is just to demonstrate that it’s possible, and that console.logs CAN mutate your arrays too if a mutable array method is used inside one.

B:
[‘This’, ‘is’, ‘popping’]

The array has been mutated from the previous console log and the changes are reflected.

C:
[‘This’, ‘is’,]

We called the pop() method again, and thus another element was removed from the end of the array.

D:
is

Same logic as A.

The console.log simply returns the removed element to the console.

E:
[‘This’]

THIS (haha..) is all we are left with after popping the whole array away!

Question 28

POP() METHOD

Which is the correct syntax to write a pop() method?

A: pop.(array)
B: array.pop()
C: array().pop
D: pop(array).array

Pop- Question 6/6

Answer 28

B
array.pop()

You input the array you want to remove the last element from, then use the pop() method.

Question 29

PUSH() METHOD

• What does the push() method do?
• Does it change the existing arrays?

Push - Question 1/6

Answer 29

The push() method adds the specified elements to the end of an array and returns the new length of the array.

It does change/mutate the orginal source array.

DOCUMENTATION LINK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Question 30

PUSH() METHOD

Does push() return a new array?

Push - Question 2/6

Answer 30

No

It does not return a new array, it returns the new length of the array.

Question 31

PUSH() METHOD

Is push() a copy method or a mutating method?

Push - Question 3/6

Answer 31

Mutating method.

Push() will directly mutate the orginal/source array and add a new specified element to the end of the array.

Question 32

PUSH() METHOD

What will A & B console.log?

const array = [1, 2, 3]
const newLength = array.push(4, 5, 6);

A:
console.log(array);

B:
console.log(newLength);

Push - Question 4/6

Answer 32

A:
[1, 2, 3, 4, 5, 6]

Using a variale we pushed 3 additional elements to the end of the array (4, 5, 6).

B:
6

The varaible returns the new length of the array which is now 6.

Question 33

PUSH() METHOD

Tricky Knowledge Test!

What will C & D & E console.log?

const array = [1, 2, 3]
const newLength = array.push();

C:
console.log(newLength);

array.push(4, 5);

D:
console.log(array.push(6, 7);

E:
console.log(array);

Push - Question 5/6

Answer 33

C:
3

We did not push any new elements into the array with newLength so the length is unchanged and is still 3!

D:
7

We pushed 4 & 5 into the array prior, then inside the console.log we pushed 2 more (6 & 7).

Like variables with methods assigned to them, console.logs behave the same way. So it added 2 more elements to the array and then logged the new length which is now 7!

E:
[1, 2, 3, 4, 5, 6, 7]

Finally, using all of our previous pushes with a variable, no variable, and console.log this is our array.

Question 34

PUSH() METHOD

Which is the correct syntax to write a push() method?

A: array().push
B: push.(array)
C: push().array
D: array.push()

Push - Question 6/6

Answer 34

D
array.push()

You input the array, then the push method and whatever arguments/elements you want to add to the array.