@ -59,7 +59,7 @@ An array is a collection of different data types which are ordered and changeabl
### How to create an empty array
In JavaScript, we can create an array in different ways. Let us see different ways to create an array.
It is very common to use *const* instead of *let* to declare an array variable. If you ar using const it means you do not use that variable name again.
It is very common to use _const_ instead of _let_ to declare an array variable. If you ar using const it means you do not use that variable name again.
- Using Array constructor
@ -400,7 +400,7 @@ if(index === -1){
// we can use also ternary here
index === -1 ? console.log('This fruit does not exist in the array'): console.log('This fruit does exist in the array')
// let us check if a avocado exist in the array
// let us check if an avocado exist in the array
let indexOfAvocado = fruits.indexOf('avocado') // -1, if the element not found index is -1
if(indexOfAvocado === -1){
console.log('This fruit does not exist in the array')
@ -521,18 +521,20 @@ Splice: It takes three parameters:Starting position, number of times to be remov
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.splice()) // -> remove all items
numbers.splice()
console.log(numbers) // -> remove all items
```
```js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.splice(0,1)) // remove the first item
numbers.splice(0,1)
console.log(numbers) // remove the first item
```
```js
const numbers = [1, 2, 3, 4, 5, 6];
const numbers = [1, 2, 3, 4, 5, 6]
numbers.splice(3, 3, 7, 8, 9)
console.log(numbers.splice(3, 3, 7, 8, 9)) // -> [1, 2, 3, 7, 8, 9] //it removes three item and replace three items
```
@ -544,7 +546,6 @@ Push: adding item in the end. To add item to the end of an existing array we use
let [, secondPerson, , fourthPerson] = name // first and third person is omitted
let [, secondPerson, , fourthPerson] = names // first and third person is omitted
console.log(secondPerson, fourthPerson)
```
@ -218,7 +218,7 @@ console.log(w, h, a, p)
20 10 200 undefined
```
If the key is not found in the object the variable will be assigned to undefined. In case, the key is not in the object we can give a default value during declaration. See the example.
If the key is not found in the object the variable will be assigned to undefined. Sometimes the key might not be in the object, in that case we can give a default value during declaration. See the example.
// Lets create a function which give information about the person object with destructuring
// Let us create a function which give information about the person object with destructuring
const getPersonInfo = ({
firstName,
lastName,
@ -335,7 +335,7 @@ const getPersonInfo = ({
}
console.log(getPersonInfo(person))
/*
Asabeneh Yetayeh lives in Finland. He is 200 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
Asabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
*/
```
@ -373,7 +373,7 @@ Assess Test Result 4/1/2020 1:00 false
### Spread or Rest Operator
When we destructure an array we use the spread operator(...) to get the rest elements as array. In addition to that we use spread operator to spread arr elements to another array.
When we destructure an array we use the spread operator(...) to get the rest elements as array. In addition to that we use spread operator to spread array elements to another array.
### Spread operator to get the rest of array elements
@ -60,9 +60,9 @@ A pattern could be a text or any form of pattern which some sort of similarity.
#### Flags
Flags are optional parameters in a regular expression which determine the type of searching. Let see some of the flags:
Flags are optional parameters in a regular expression which determine the type of searching. Let us see some of the flags:
- g:is a global flag which means looking for a pattern in whole text
- g: a global flag which means looking for a pattern in whole text
- i: case insensitive flag(it searches for both lowercase and uppercase)
- m: multiline
@ -106,7 +106,7 @@ let regEx= new RegExp('love','gi')
### RegExpp Object Methods
Let see some of RegExp methods
Let us see some of RegExp methods
#### Testing for a match
@ -227,7 +227,7 @@ I am teacher and I love teaching.There is nothing as more rewarding as educatin
* [0-9] means any number 0 to 9
* [A-Za-z0-9] any character which is a to z, A to Z, 0 to 9
* \\: uses to escape special characters
* \d mean:match where the string contains digits (numbers from 0-9)
* \d mean:match where the string contains digits (numbers from 0-9)
* \D mean: match where the string does not contain digits
* . : any character except new line character(\n)
* ^: starts with
@ -236,13 +236,14 @@ I am teacher and I love teaching.There is nothing as more rewarding as educatin
* $: ends with
* r'substring$' eg r'love$', sentence ends with a word love
* *: zero or more times
* r'[a]*' means a optional or it can be occur many times.
* r'[a]*' means a optional or it can occur many times.
* +: one or more times
* r'[a]+' mean at least once or more times
* r'[a]+' means at least once or more times
* ?: zero or one times
* r'[a]?' mean zero times or once
* r'[a]?' means zero times or once
* \b: word bounder, matches with the beginning or ending of a word
* {3}: Exactly 3 characters
* {3,}: At least 3 character
* {3,}: At least 3 characters
* {3,8}: 3 to 8 characters
* |: Either or
* r'apple|banana' mean either of an apple or a banana
@ -257,20 +258,20 @@ Let's use example to clarify the above meta characters
Let's use square bracket to include lower and upper case
```js
const pattern = '[Aa]pple' // this square bracket mean either A or a
const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. '
const pattern = '[Aa]pple' // this square bracket means either A or a
const txt = 'Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away. '
const matches = txt.match(pattern)
console.log(matches)
```
```sh
["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an…by a banana a day keeps the doctor far far away. ", groups: undefined]
["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away.", groups: undefined]
```
```js
const pattern = /[Aa]pple/g // this square bracket mean either A or a
const pattern = /[Aa]pple/g // this square bracket means either A or a
const txt = 'Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. '
const matches = txt.match(pattern)
@ -344,7 +345,7 @@ console.log(matches) // ['and banana are fruits']
### Zero or more times(*)
Zero or many times. The pattern could may not occur or it can occur many times.
Zero or many times. The pattern may not occur or it can occur many times.
```js
@ -358,7 +359,7 @@ console.log(matches) // ['and banana are fruits']
### Zero or one times(?)
Zero or one times. The pattern could may not occur or it may occur once.
Zero or one times. The pattern may not occur or it may occur once.
```js
const txt = 'I am not sure if there is a convention how to write the word e-mail.\
We can specify the length of the substring we look for in a text, using a curly bracket. Lets imagine, we are interested in substring that their length are 4 characters
We can specify the length of the substring we look for in a text, using a curly bracket. Let us see, how ot use RegExp quantifiers. Imagine, we are interested in substring that their length are 4 characters
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /\\b\w{4}\b/g // exactly four character words
const matches = txt.match(pattern)
console.log(matches) //['This', 'made', '2019']
```
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /\b[a-zA-Z]{4}\b/g // exactly four character words without numbers
const matches = txt.match(pattern)
console.log(matches) //['This', 'made']
```
```js
const txt = 'This regular expression example was made in December 6, 2019.'
const pattern = /\d{4}/g // exactly four times
const pattern = /\d{4}/g // a number and exactly four digits
@ -43,7 +43,7 @@ In this section, we will cover about console and console object methods. Absolut
We use console object methods to show output on the browser console and we use document.write to show output on the browser document(view port). Both methods used only for testing and debugging purposes. The console method is the most popular testing and debugging tool on the browser. We use document.getElementById() when we like to interact with DOM try using JavaScript. We will cover DOM in another section.
In addition to the famous, console.log() method, the console provides other more methods methods.
In addition to the famous, console.log() method, the console provides other more methods.
### console.log()
@ -99,7 +99,7 @@ console.warn('Warning is different from error')
### console.error()
The console.error() methods shows an error messages.
The console.error() method shows an error messages.
```js
console.error('This is an error message')
@ -224,7 +224,7 @@ According the above output the regular for loop is slower than for of or forEach
### console.info()
It display information message on browser console.
It displays information message on browser console.
```js
console.info('30 Days Of JavaScript challenge is trending on Github')
@ -312,7 +312,7 @@ console.groupEnd()
### console.count()
It prints the number of time this console.count() is called. It takes a string label parameter. It is very helpful to count the number of times a function is called. In the following example, the console.count() method will run three times
It prints the number of times the console.count() is called. It takes a string label parameter. It is very helpful to count the number of times a function is called. In the following example, the console.count() method will run three times
@ -586,7 +586,7 @@ Asabeneh Yetayeh is Finland. He lives Helsinki, 250.
### Overriding methods
As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. Inside the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden.
As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. Inside the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden.
@ -135,13 +135,13 @@ The _document.querySelector_ method can select an HTML or HTML elements by tag n
```js
let firstTitle = document.querySelector('h1') // select the first available h1 element
let firstTitle = document.querySelector('#first-title') // select id with first-title
let firstTitle = document.querySelector('.title') // select the first available h1 element with class title
let firstTitle = document.querySelector('.title') // select the first available element with class title
```
**_querySelectorAll_**: can be used to select html element by its tag name or class. It return a nodeList which is an array like object which support array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements.
**_querySelectorAll_**: can be used to select html elements by its tag name or class. It returns a nodeList which is an array like object which supports array methods. We can use **_for loop_** or **_forEach_** to loop through each nodeList elements.
```js
const allTitles = document.querySelectorAll('h1')
const allTitles = document.querySelectorAll('h1') # selects all the available h1 elements in the page
console.log(allTitles.length) // 4
for (let i = 0; i <allTitles.length;i++){
@ -351,7 +351,7 @@ As you have notice, the properties of css when we use it in JavaScript is going
### Exercise: Level 1
1. Create an index.html file and put four p elements as above: Get the first paragraph by using **_document.querySelector(tagname)_** and tag name
2. Get get each of the the paragraph using **_document.querySelector('#id')_** and by their id
2. Get each of the the paragraph using **_document.querySelector('#id')_** and by their id
3. Get all the p as nodeList using **_document.querySelectorAll(tagname)_** and by their tag name
4. Loop through the nodeList and get the text content of each paragraph
5. Set a text content to paragraph the fourth paragraph,**_Fourth Paragraph_**
Asabeneh
2 years ago