3.2 Modifying Arrays¶

Adding items¶

Task 1: Create an array that contains the following items: "user1", "user2", "user3", and "user4". Display this array in the console.

var users = ["user1", "user2", "user3", "user4"]
console.log(users);

The result is: (4) ["user1", "user2", "user3", "user4"]

Task 2: "user5" signed up to the website. Let's add this user to the users array in task 1.

var users = ["user1", "user2", "user3", "user4", "user5"];
console.log(users);

The result is: (5) ["user1", "user2", "user3", "user4", "user5"]

Notice That

In task 2, you re-created the users array to add a new user.

Task 3: Add "user6" to our newly created array in task 2. Hint: use array.push(item).

var users = ["user1", "user2", "user3", "user4", "user5"];
users.push("user6");
console.log(users);

The result is: (6) ["user1", "user2", "user3", "user4", "user5", "user6"]

array.push(item)

array.push(item) method adds an item to the end of an array.

Task 4: Create an empty array. Then add the numbers from 0 to 10 to this array. Hint: use for loop.

var emptyArr = [];
for(var i=0;i<=10; i++){
  emptyArr.push(i);
}
console.log(emptyArr);

The result is: (11) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Task 5: Create an empty array. Then add the even numbers between 0 and 10 to this array. Hint: use for loop.

var emptyArr = [];
for(var i=0;i<=10; i=i+2){
  emptyArr.push(i);
}
console.log(emptyArr);

The result is: (6) [0, 2, 4, 6, 8, 10]

Task 6: Read the following code, and understand the result.

var colors = ["green", "orange"];
colors[2] = "red";
console.log(colors);

The result is: (3) ["green", "orange", "red"]

Info

You can add an item at any position you want in an array using array[position]=value.

Task 7: Suppose you have an array that has the following values: "item1", "item2", "item3". Add "item4" at position 50. Display the result in the console.

var items = ["item1", "item2", "item3"];
items[50] = "item4";
console.log(items);

The result is: (51) ["item1", "item2", "item3", empty × 47, "item4"]

What happened here? In JavaScript, you can add array items at any position you prefer. JavaScript will assign undefined to every item without a explicit assigned value.

Task 8: Check the type of position 33 value in task 7 array;

var items = ["item1", "item2", "item3"];
items[50] = "item4";
console.log(typeof items[33]);

The result is: undefined

Task 9: Read this code, and understand the result.

var arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);

The result is: (4) [0, 1, 2, 3]

array.unshift(item)

array.unshift(item) method adds an item to the start of an array.

Task 10: Add 10 to the start of [20, 30, 40, 50]. Display the result in the console.

var arr = [20, 30, 40, 50];
arr.unshift(10);
console.log(arr);

The result is: (5) [10, 20, 30, 40, 50]

Many ways to add items to an array!!

Use array.unshift(item) to add an item to the start of an array.

Use array.push(item) to add an item to the end of an array.

Use array[position]=value to add an item at a specific position in an array.

Removing items¶

Task 11: Read the code below, and understand the result.

var thingsToBuy = ["papers", "bread", "2 pencils", "perfume", "milk"];
thingsToBuy.pop();
console.log(thingsToBuy);

The result is: (4) ["papers", "bread", "2 pencils", "perfume"]

array.pop()

array.pop() method removes the last item from an array.

Task 12: Soso has a list of things to buy: milk, bread, water and fruits. She bought the fruits. Help Soso to remove the fruits from her list in JavaScript.

var thingsToBuy = ["milk", "bread", "water", "fruits"];
thingsToBuy.pop();
console.log(thingsToBuy);

The result is: (3) ["milk", "bread", "water"]

Task 13: Refer to task 12; Soso bought milk. Help Soso to remove the milk item from her list in JavaScript. Hint: use array.shift()

var thingsToBuy = ["milk", "bread", "water", "fruits"];
thingsToBuy.pop();
thingsToBuy.shift();
console.log(thingsToBuy);

The result is: (2) ["bread", "water"]

array.shift()

array.shift() method removes the first item from an array.

Task 14: Refer to task 13; Soso bought bread. Help Soso to remove the bread item from her list in JavaScript.

var thingsToBuy = ["milk", "bread", "water", "fruits"];
thingsToBuy.pop();
thingsToBuy.shift();
thingsToBuy.shift();
console.log(thingsToBuy);

The result is: (1) ["water"]

Task 15: Refer to task 14; Soso bought water. Help Soso to remove the water item from her list in JavaScript.

var thingsToBuy = ["milk", "bread", "water", "fruits"];
thingsToBuy.pop();
thingsToBuy.shift();
thingsToBuy.shift();
thingsToBuy.shift();
console.log(thingsToBuy);

The result is: []

or you can also write:

var thingsToBuy = ["milk", "bread", "water", "fruits"];
thingsToBuy.pop();
thingsToBuy.shift();
thingsToBuy.shift();
thingsToBuy.pop();
console.log(thingsToBuy);