You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
659 lines
21 KiB
659 lines
21 KiB
## Table of Contents
|
|
|
|
[<< Day 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md) | [Day 6 >>](#)
|
|
--
|
|
![Day 5](../images/banners/day_1_5.png)
|
|
|
|
- [📔 Day 5](#%f0%9f%93%94-day-5)
|
|
- [Arrays](#arrays)
|
|
- [How to create an empty array](#how-to-create-an-empty-array)
|
|
- [How to create an array with values](#how-to-create-an-array-with-values)
|
|
- [Creating an array using split](#creating-an-array-using-split)
|
|
- [Accessing array items using index](#accessing-array-items-using-index)
|
|
- [Modifying array element](#modifying-array-element)
|
|
- [Methods to manipulate array](#methods-to-manipulate-array)
|
|
- [Array Constructor](#array-constructor)
|
|
- [Creating static values with fill](#creating-static-values-with-fill)
|
|
- [Concatenating array using concat](#concatenating-array-using-concat)
|
|
- [Getting array length](#getting-array-length)
|
|
- [Getting index an element in arr array](#getting-index-an-element-in-arr-array)
|
|
- [Getting last index of an element in array](#getting-last-index-of-an-element-in-array)
|
|
- [Checking array](#checking-array)
|
|
- [Converting array to string](#converting-array-to-string)
|
|
- [Joining array elements](#joining-array-elements)
|
|
- [Slice array elements](#slice-array-elements)
|
|
- [Splice method in array](#splice-method-in-array)
|
|
- [Adding item to an array using push](#adding-item-to-an-array-using-push)
|
|
- [Removing the end element using pop](#removing-the-end-element-using-pop)
|
|
- [Removing an element from the beginning](#removing-an-element-from-the-beginning)
|
|
- [Add an element from the beginning](#add-an-element-from-the-beginning)
|
|
- [Reversing array order](#reversing-array-order)
|
|
- [Sorting elements in array](#sorting-elements-in-array)
|
|
- [💻 Exercise](#%f0%9f%92%bb-exercise)
|
|
|
|
# 📔 Day 5
|
|
|
|
## Arrays
|
|
|
|
In contrast to variables array can store _multiple values_. Each value in an array has an _index_ and each index has _a reference in a memory address_. Each value can be accessed by using their _indexes_. The index of an array starts from _zero_ and the last element is less by one from the length of the array.
|
|
|
|
Array is a collection of different data types which are ordered and changeable(modifiable). Allows duplicate element and different data types. An array can be empty or it may have different data type values
|
|
|
|
### How to create an empty array
|
|
|
|
In JavaScript we can create array in different ways. Let us different ways to create an array.
|
|
|
|
- Using Array constructor
|
|
|
|
```js
|
|
// syntax
|
|
const arr = Array()
|
|
// or
|
|
// let arr = new Array()
|
|
console.log(arr) // []
|
|
```
|
|
|
|
- Using square brackets([])
|
|
|
|
```js
|
|
// syntax
|
|
// This the most recommended way to create an empty list
|
|
const arr = []
|
|
console.log(arr)
|
|
```
|
|
|
|
### How to create an array with values
|
|
|
|
Array with initial values. We use _length_ property to find the length of an array.
|
|
|
|
```js
|
|
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers
|
|
const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits
|
|
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of strings, vegetables
|
|
const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array of strings, products
|
|
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array of web technologies
|
|
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array of strings, countries
|
|
|
|
// Print the array and its length
|
|
|
|
console.log('Numbers:', numbers)
|
|
console.log('Number of numbers:', numbers.length)
|
|
|
|
console.log('Fruits:', fruits)
|
|
console.log('Number of fruits:', len(fruits))
|
|
|
|
console.log('Vegetables:', vegetables)
|
|
console.log('Number of vegetables:', len(vegetables))
|
|
|
|
console.log('Animal products:', animalProducts)
|
|
console.log('Number of animal products:', len(animalProducts))
|
|
|
|
console.log('Web technologies:', web_techs)
|
|
console.log('Number of web technologies:', len(webTechs))
|
|
|
|
console.log('Countries:', countries)
|
|
console.log('Number of countries:', len(countries))
|
|
```
|
|
|
|
```sh
|
|
Numbers: [0, 3.14, 9.81, 37, 98.6, 100]
|
|
Number of numbers: 6
|
|
Fruits: ['banana', 'orange', 'mango', 'lemon']
|
|
Number of fruits: 4
|
|
Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']
|
|
Number of vegetables: 5
|
|
Animal products: ['milk', 'meat', 'butter', 'yoghurt']
|
|
Number of animal products: 4
|
|
Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB']
|
|
Number of web technologies: 7
|
|
Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway']
|
|
Number of countries: 5
|
|
```
|
|
|
|
- Array can have items of different data types
|
|
|
|
```js
|
|
const arr = [
|
|
'Asabeneh',
|
|
250,
|
|
True,
|
|
{ country: 'Finland', city: 'Helsinki' },
|
|
(skills: ['HTML', 'CSS', 'JS', 'React', 'Python'])
|
|
] // arr containing different data types
|
|
console.log(arr)
|
|
```
|
|
|
|
### Creating an array using split
|
|
|
|
As we have seen in earlier section, we can split a string at different position and we can change to an array. Let us see the examples blow.
|
|
|
|
```js
|
|
let js = 'JavaScript'
|
|
const charsInJavaScript = js.split('') // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
|
|
console.log(charsInJavaScript)
|
|
|
|
let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon'
|
|
const companies = companiesString.split(',')
|
|
console.log(companies) // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"]
|
|
let text =
|
|
'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
|
|
const words = text.split(' ')
|
|
console.log(words)
|
|
// the text has special characters think how you can just get only the words
|
|
// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"]
|
|
```
|
|
|
|
### Accessing array items using index
|
|
|
|
We access each element in an array using their index. An array index start from 0. The picture below show clearly the starting of the index.
|
|
|
|
![arr index](../images/array_index.png)
|
|
|
|
```js
|
|
const fruits = ['banana', 'orange', 'mango', 'lemon']
|
|
let firstFruit = fruits[0] // we are accessing the first item using its index
|
|
console.log(firstFruit) // banana
|
|
secondFruit = fruits[1]
|
|
console.log(secondFruit) // orange
|
|
lastFruit = fruits[3]
|
|
console.log(lastFruit) // lemon
|
|
// Last index
|
|
let lastIndex = len(fruits) - 1
|
|
let lastFruit = fruits[lastIndex]
|
|
```
|
|
|
|
```js
|
|
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // set of numbers
|
|
|
|
console.log(numbers.length) // => to know the size of the array, which is 6
|
|
console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100]
|
|
console.log(numbers[0]) // -> 0
|
|
console.log(numbers[5]) // -> 100
|
|
|
|
let lastIndex = numbers.length - 1;
|
|
console.log(numbers[lastIndex]) -> 100
|
|
```
|
|
|
|
```js
|
|
const webTechs = [
|
|
'HTML',
|
|
'CSS',
|
|
'JavaScript',
|
|
'React',
|
|
'Redux',
|
|
'Node',
|
|
'MongoDB'
|
|
] // List of web technologies
|
|
|
|
console.log(webTechs) // all the array items
|
|
console.log(webTechs.length) // => to know the size of the array, which is 7
|
|
console.log(webTechs[0]) // -> HTML
|
|
console.log(webTechs[6]) // -> MongoDB
|
|
|
|
let lastIndex = webTechs.length - 1
|
|
console.log(webTechs[lastIndex]) -> MongoDB
|
|
```
|
|
|
|
```js
|
|
const countries = [
|
|
'Albania',
|
|
'Bolivia',
|
|
'Canada',
|
|
'Denmark',
|
|
'Ethiopia',
|
|
'Finland',
|
|
'Germany',
|
|
'Hungary',
|
|
'Ireland',
|
|
'Japan',
|
|
'Kenya'
|
|
] // List of countries;
|
|
console.log(countries) // -> all countries in array
|
|
console.log(countries[0]) // -> Albania
|
|
console.log(countries[10]) // -> Kenya
|
|
|
|
let lastIndex = countries.length - 1;
|
|
console.log(countries[lastIndex]) -> // Kenya
|
|
```
|
|
|
|
```js
|
|
const shoppingCart = [
|
|
'Milk',
|
|
'Mango',
|
|
'Tomato',
|
|
'Potato',
|
|
'Avocado',
|
|
'Meat',
|
|
'Eggs',
|
|
'Sugar'
|
|
]; // List of food products
|
|
console.log(shoppingCart) // -> all shoppingCart in array
|
|
console.log(shoppingCart[0]) // -> Milk
|
|
console.log(shoppingCart[7]) // -> Sugar
|
|
|
|
let lastIndex = shoppingCart.length - 1;
|
|
console.log(shoppingCart[lastIndex]) -> // Sugar
|
|
```
|
|
|
|
### Modifying array element
|
|
|
|
An array is mutable(modifiable). Once an array is created we can modify the contents or the array elements.
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
numbers[0] = 10 // changing 1 at index 0 to 10
|
|
numbers[1] = 20 // changing 2 at index 1 to 20
|
|
|
|
console.log(numbers) // [10, 20, 3, 4, 5]
|
|
|
|
const countries = [
|
|
'Albania',
|
|
'Bolivia',
|
|
'Canada',
|
|
'Denmark',
|
|
'Ethiopia',
|
|
'Finland',
|
|
'Germany',
|
|
'Hungary',
|
|
'Ireland',
|
|
'Japan',
|
|
'Kenya'
|
|
]
|
|
|
|
countries[0] = 'Afghanistan' // Albania replaced by Afghanistan
|
|
let lastIndex = countries.length - 1
|
|
countries[lastIndex] = 'Korea'
|
|
|
|
console.log(countries)
|
|
```
|
|
|
|
```sh
|
|
["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"]
|
|
```
|
|
|
|
### Methods to manipulate array
|
|
|
|
There are different methods to manipulate an array. These are some of the available methods to deal with arrays:_Array,length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_
|
|
|
|
#### Array Constructor
|
|
|
|
Array:To create an array.
|
|
|
|
```js
|
|
const arr = Array() // creates an an empty array
|
|
console.log(arr)
|
|
|
|
const eightEmptyValues = Array(8) // it creates eight empty values
|
|
console.log(eightEmptyValues) // [empty x 8]
|
|
```
|
|
|
|
#### Creating static values with fill
|
|
|
|
fill: Fill all the array elements with a static value
|
|
|
|
```js
|
|
const arr = Array() // creates an an empty array
|
|
console.log(arr)
|
|
const eightXvalues = Array(8).fill('X') // it creates eight element values
|
|
console.log(eightXvalues) // ['X', 'X','X','X','X','X','X','X']
|
|
|
|
const eight0values = Array(8).fill(0) // it creates eight element values
|
|
console.log(eight0Values) // [0, 0, 0, 0, 0, 0, 0, 0]
|
|
|
|
const four4values = Array(4).fill(4) // it creates 4 element values
|
|
console.log(four4Values) // [4, 4, 4, 4, 4, 4, 4, 4]
|
|
```
|
|
|
|
#### Concatenating array using concat
|
|
|
|
concat:To concatenate two arrays.
|
|
|
|
```js
|
|
const firstList = [1, 2, 3]
|
|
const secondList = [4, 5, 6]
|
|
const thirdList = firstList.concat(secondList)
|
|
console.log(thirdList) // [1, 2, 3, 4, 5, 6]
|
|
|
|
const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of fruits
|
|
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of vegetables
|
|
const fruitsAndVegetables = fruits.concat(vegetables)
|
|
//["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"]
|
|
```
|
|
|
|
#### Getting array length
|
|
|
|
Length:To know the size of the array
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
console.log(numbers.length) // -> 5
|
|
```
|
|
|
|
#### Getting index an element in arr array
|
|
|
|
indexOf:To check if an item exist in an array. If it exists it returns the index else it returns -1.
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
|
|
console.log(numbers.indexOf(5)) // -> 4
|
|
console.log(numbers.indexOf(0)) // -> -1
|
|
console.log(numbers.indexOf(1)) // -> 0
|
|
console.log(numbers.indexOf(6)) // -> -1
|
|
```
|
|
|
|
Check an element if it exist in an array
|
|
|
|
- Check items in a list
|
|
|
|
```js
|
|
// let us check if a banana exist in the array
|
|
|
|
const fruits = ['banana', 'orange', 'mango', 'lemon']
|
|
let index = fruits.indexOf('banana') // 0
|
|
|
|
if(index != -1){
|
|
console.log('This fruit does exist in the array')
|
|
} else {
|
|
console.log('This fruit does not exist in the array')
|
|
}
|
|
// This fruit does exist in the array
|
|
|
|
// we can use also ternary here
|
|
index != -1 ? console.log('This fruit does exist in the array'): console.log('This fruit does not exist in the array')
|
|
|
|
// let us check if a avocado exist in the array
|
|
let indexOfAvocado = fruits.indexOf('avocado') // -1
|
|
if(indexOfAvocado!= -1){
|
|
console.log('This fruit does exist in the array')
|
|
} else {
|
|
console.log('This fruit does not exist in the array')
|
|
}
|
|
// This fruit does not exist in the array
|
|
```
|
|
|
|
#### Getting last index of an element in array
|
|
|
|
lastIndexOf:Give the position of the last item in the array. If it exist it returns the index else it returns -1.
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5, 3, 1, 2]
|
|
console.log(numbers.lastIndexOf(2)) // -> 7
|
|
console.log(numbers.lastIndexOf(0)) // -> -1
|
|
console.log(numbers.lastIndexOf(1)) // -> 6
|
|
console.log(numbers.lastIndexOf(4)) // -> 3
|
|
console.log(numbers.lastIndexOf(6)) // -> -1
|
|
```
|
|
|
|
includes:To check if an item exist in an array. If it exist it returns the true else it returns false.
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
console.log(numbers.includes(5)) // -> true
|
|
console.log(numbers.includes(0)) // -> false
|
|
console.log(numbers.includes(1)) // -> true
|
|
console.log(numbers.includes(6)) // -> false
|
|
```
|
|
|
|
#### Checking array
|
|
|
|
Array.isArray:To check if the data type is an array
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
console.log(Array.isArray(numbers)) // -> true
|
|
const number = 100
|
|
console.log(Array.isArray(number)) // -> false
|
|
```
|
|
|
|
#### Converting array to string
|
|
|
|
toString:Converts array to string
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
console.log(numbers.toString()) // 1,2,3,4,5
|
|
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
|
|
console.log(names.toString()) // Asabeneh,Mathias,Elias,Brook
|
|
```
|
|
|
|
#### Joining array elements
|
|
|
|
join:To join the elements of the array, the argument passed in the join method will be joined in the array and return as a string. By default it joins with a comma but we can pass different string parameter which can be joined between the items.
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
console.log(numbers.join()) // 1,2,3,4,5
|
|
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
|
|
console.log(names.join()) // Asabeneh,Mathias,Elias,Brook
|
|
console.log(names.join('')) //AsabenehMathiasEliasBrook
|
|
console.log(names.join(' ')) //Asabeneh Mathias Elias Brook
|
|
console.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook
|
|
console.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook
|
|
```
|
|
|
|
#### Slice array elements
|
|
|
|
Slice: To cut out a multiple items in range. It takes two parameters:starting and ending position. It doesn't include the ending position
|
|
|
|
```js
|
|
const numbers = [1,2,3,4,5];
|
|
console.log(numbers.slice() // -> it copies all item
|
|
console.log(numbers.slice(0) // -> it copies all item
|
|
console.log(numbers.indexOf(0, numbers.length)) // it copies all item
|
|
console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position
|
|
```
|
|
|
|
#### Splice method in array
|
|
|
|
Splice: It takes three parameters:Starting position, number of times to be removed and number items to be added.
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5];
|
|
console.log(numbers.splice() // -> remove all items
|
|
console.log(numbers.splice(0,1)) // remove the first item
|
|
console.log(numbers.splice(3, 3, 6, 7, 8)) // -> [1,2,6,7,8] //it removes two item and replace three items
|
|
|
|
```
|
|
|
|
#### Adding item to an array using push
|
|
|
|
Push: adding item in the end. To add item to the end of an existing array we use the push method
|
|
|
|
```js
|
|
// syntax
|
|
const arr = ['item1', 'item2','item3']
|
|
arr.push('new item')
|
|
console.log(arr)
|
|
// ['item1', 'item2','item3','new item']
|
|
```
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
numbers.push(6)
|
|
console.log(numbers) // -> [1,2,3,4,5,6]
|
|
numbers.pop() // -> remove one item from the end
|
|
console.log(numbers) // -> [1,2,3,4,5]
|
|
```
|
|
|
|
```js
|
|
let fruits = ['banana', 'orange', 'mango', 'lemon']
|
|
fruits.push('apple')
|
|
console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple']
|
|
fruits.push('lime')
|
|
console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime']
|
|
```
|
|
|
|
#### Removing the end element using pop
|
|
|
|
Pop: Removing item in the end
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
numbers.pop() // -> remove one item from the end
|
|
console.log(numbers) // -> [1,2,3,4]
|
|
```
|
|
|
|
#### Removing an element from the beginning
|
|
|
|
shift: Removing one array element in the beginning of the array
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
numbers.shift() // -> remove one item from the beginning
|
|
console.log(numbers) // -> [2,3,4,5]
|
|
```
|
|
|
|
#### Add an element from the beginning
|
|
|
|
unshift: Adding array element in the beginning of the array
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
numbers.unshift(0) // -> remove one item from the beginning
|
|
console.log(numbers) // -> [0,1,2,3,4,5]
|
|
```
|
|
|
|
#### Reversing array order
|
|
|
|
reverse: reverse the order of an array
|
|
|
|
```js
|
|
const numbers = [1, 2, 3, 4, 5]
|
|
numbers.reverse() // -> reverse array order
|
|
console.log(numbers) // -> [5, 4, 3, 2, 1]
|
|
|
|
numbers.reverse()
|
|
console.log(numbers) // [1, 2, 3, 4, 5]
|
|
```
|
|
|
|
#### Sorting elements in array
|
|
|
|
sort: arrange array elements in ascending order. Sort takes a call back function, we wil see how we use sort with call back function in the coming sections.
|
|
|
|
```js
|
|
const webTechs = [
|
|
'HTML',
|
|
'CSS',
|
|
'JavaScript',
|
|
'React',
|
|
'Redux',
|
|
'Node',
|
|
'MongoDB'
|
|
]
|
|
|
|
webTechs.sort()
|
|
console.log(webTechs) // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]
|
|
|
|
webTechs.reverse() // after sorting we can reverse it
|
|
console.log(webTechs) // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]
|
|
```
|
|
|
|
🌕 You are diligent and you have already achieved quite a lot. You have just completed day 4 challenge and you are four steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle.
|
|
|
|
## 💻 Exercise
|
|
|
|
```js
|
|
const countries = [
|
|
'Albania',
|
|
'Bolivia',
|
|
'Canada',
|
|
'Denmark',
|
|
'Ethiopia',
|
|
'Finland',
|
|
'Germany',
|
|
'Hungary',
|
|
'Ireland',
|
|
'Japan',
|
|
'Kenya'
|
|
]
|
|
|
|
const webTechs = [
|
|
'HTML',
|
|
'CSS',
|
|
'JavaScript',
|
|
'React',
|
|
'Redux',
|
|
'Node',
|
|
'MongoDB'
|
|
]
|
|
```
|
|
|
|
1. Declare an _empty_ array;
|
|
1. Declare an array with more than 5 number of elements
|
|
1. Find the length of your array
|
|
1. Get the first item, the middle item and the last item of the array
|
|
1. Declare an array called _mixedDataTypes_,put different data types in your array and find length of the array. You are should size be greater than 5
|
|
1. Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon
|
|
1. Print the array using _console.log()_
|
|
1. Print the number of companies in the array
|
|
1. Print the first company, middle and last company
|
|
1. Print out each company
|
|
1. Change each company name to uppercase one by one and print them out
|
|
1. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.
|
|
1. Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is _not found_
|
|
1. Filter out companies which have more than one 'o' without the filter method
|
|
1. Sort the array using _sort()_ method
|
|
1. Reverse the array using _reverse()_ method
|
|
1. Slice out the first 3 companies from the array
|
|
1. Slice out the last 3 companies from the array
|
|
1. Slice out the middle IT company or companies from the array
|
|
1. Remove the first IT company from the array
|
|
1. Remove the middle IT company or companies from the array
|
|
1. Remove the last IT company from the array
|
|
1. Remove all IT companies
|
|
1. Create a separate countries.js file and store the countries array in to this file, create a separate file web_techs.js ans store the webTechs array in to this file. Access both file in main.js file
|
|
1. First remove all the functions and change the string to array and count the number of words in the array
|
|
|
|
```js
|
|
let text =
|
|
'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
|
|
```
|
|
|
|
```sh
|
|
words = ["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"]
|
|
console.log(words.length) //13
|
|
```
|
|
|
|
1. In the following shopping cart add, remove, edit items
|
|
|
|
```js
|
|
const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']
|
|
```
|
|
|
|
- add 'Meat' in the beginning of your shopping cart if if it has not be already added
|
|
- add sugar at the end of you shopping cart if it has not been already added
|
|
- Remove 'Honey' if you are allergic to honey
|
|
- modify tea to 'Green Tea'
|
|
1. In countries array check if 'Ethiopia' exists in the array if it exists print 'ETHIOPIA'. If it does not exist add to the countries list.
|
|
1. In the webTechs array check if Sass exists in the array if it exists print 'Sass is a CSS preprocess'. If it does not exist add Sass to the array.
|
|
1. Concatenate the following two variables and store it in a fullStack variable.
|
|
|
|
```js
|
|
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
|
|
const backEnd = ['Node','Express', 'MongoDB']
|
|
console.log(fullStack)
|
|
```
|
|
|
|
```sh
|
|
["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]
|
|
```
|
|
|
|
1. The following is a list of 10 students ages:
|
|
|
|
```js
|
|
const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
|
|
```
|
|
|
|
- Sort the array and find the min and max age
|
|
- Find the min age and the max age
|
|
- Find the median age(one middle item or two middle items divided by two)
|
|
- Find the average age(all items divided by number of items)
|
|
- Find the range of the ages(max minus min)
|
|
- Compare the value of (min - average) and (max - average), use *abs()* method
|
|
1. Find the middle country(ies) in the [countries list](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
|
|
1. Divide the countries list into two equal lists if it is even. If countries array is not even one more country for the first half.
|
|
|
|
🎉 CONGRATULATIONS ! 🎉
|
|
|
|
[<< Day 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md) | [Day 6 >>](#) |