JavaScript Array Method
Tags: javascript
Published: 2021-12-26 16:56:13

**## JavaScript concept 01**

> JavaScript Array method

**1. toString()**
The JavaScript method toString() converts an array to a string of (comma separated) array values.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makeString = animals.toString();
console.log(makeString);
output: cow, dog, tiger, elephant, horse 
```



**2. join()**
The JavaScript method join() also adds all array elements into a string form. But it can get special symbols to add elements to each other.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var joinAll= animals.join(“+”);
console.log(joinAll);
output: cow + dog + tiger + elephant + horse
```



**3. pop()**
The JavaScript method pop() removes the last element of an array and the pop() method return the removed element.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePop= animals.pop();
console.log(animals);
console.log(makePop);
output: ["cow", "dog", "tiger", "elephant"]
output: horse
```



**4. push()**
The JavaScript method push() adds a new element in the last position in an array and the push() method returns the length of the array.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePush= animals.push("lion");
console.log(animals);
console.log(makePush);
output: ["cow", "dog", "tiger","elephant","horse", "lion"]
output: 6
```



**5. shift()**
The JavaScript method shift() removes the first element of an array and the shift() method returns the removed element.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePop= animals.shift();
console.log(animals);
console.log(makePop);
output: ["dog", "tiger", "elephant", "horse"]
output: “cow”
```



**6. unshift()**
The JavaScript method unshift() adds a new element in first position in an array and the unshift() method returns the length of the array.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePush= animals.unshift("lion");
console.log(animals);
console.log(makePush);
output: ["lion", "cow", "dog", "tiger","elephant","horse"]
output: 6
```



**7. Changing index element.**
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
animals[0] = "lion";
animals[animals.length] = "fox";
console.log(animals);
output: ["lion", "dog", "tiger","elephant","fox"]
```



**8. delete**
We can delete an array element with the javascript delete operator. It returns undefined for the whole array. Using pop(), shift() best way to do this.
```javascript
var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var remove = delete animals[0];
console.log(remove);
output: undefined;
```



**9. concat()**
The JavaScript method concat() merging the existing array concatenates the existing array. It doesn't change the existing array, it creates a new array.
```javascript
var smallAnimals = ["cat", "dog", "sheep", "rat"];
var bigAnimals = ["elephant", "giraffe"];
var animals = smallAnimals.concat(bigAnimals);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "giraffe"]
```

- concat() can also merge more than one array.
```javascript
var smallAnimals = ["cat", "dog", "sheep", "rat"];
var bigAnimals = ["elephant", "giraffe"];
var waterAnimals = ["dolphin", "while"];
var animals = smallAnimals.concat(bigAnimals,waterAnimals);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "giraffe", "dolphin", "while"];
```

- concat() can also merge strings in an array.
```javascript
var smallAnimals = ["cat", "dog", "sheep", "rat"];
var animals = smallAnimals.concat(“elephant”, “dolphin”);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "dolphin"];
```



**10. splice()**
The JavaScript method splice() can add new elements anywhere and it also can delete any element.
```javascript
var smallAnimals = ["cat", "dog", "sheep", "rat"];
var removed = smallAnimals.splice(2, 1, “elephant”, “dolphin”);
console.log(smallAnimals);
console.log(removed);
output: ["cat", "dog", "elephant", "dolphin", "rat"];
output: “sheep”
```
```javascript
var removed = smallAnimals.splice(2, 1, “elephant”, “dolphin”);
```
First parameter 2 specifies the starting index and the second parameter 1 specifies how many elements will be deleted from the starting point and splice() returns the removed items.



**11. slice()**
The JavaScript method splice() can create a new array with a part of an array and splice() don’t delete any element. It can get two parameters.
```javascript
var smallAnimals = ["cat", "dog", "sheep", "rat", "elephant", "dolphin"];
var new = smallAnimals.slice(1, 3);
var new2 = smallAnimals.slice(3);
var new3 = smallAnimals.slice(0);
console.log(new);
console.log(new2);
console.log(new3);
output: ["dog", "sheep", "rat"];
output: ["rat"];
output: ["cat"];
```
```javascript
var new = smallAnimals.slice(1, 3);
```
Here the first parameter specifies the index number and second parameter the number of elements from the index. When using one parameter it picks that index element.



> JavaScript Number method

There are 3 JavaScript number methods that can be used to convert variables to numbers
**1. number()**
This method usually converts a string into numbers.
```javascript
console.log(number(true)); output: 1
console.log(number(true)); output: 0
console.log(number("23")); output: 23
console.log(number("23  ")); output: 23
console.log(number("23.45")); output: 23.45
console.log(number("34, 43")); output: NaN
console.log(number("cat")); output: NaN
```



**2. parseInt()**
This method parses a string into a whole number. Space can be allowed.  And it can parse only the first number.
```javascript
parseInt("-10"); output: -10
parseInt("-10.33"); output: -10
parseInt("10"); output: 10
parseInt("10.33"); output: 10
parseInt("10 20 30"); output: 10
parseInt("10 years"); output: 10
parseInt("years 10"); output: NaN
```



**3. parseFloat()**
This method parses a string into a number. Space can be allowed.  And it can parse only the first number.
```javascript
parseFloat("-10"); output: -10
parseFloat("-10.33"); output: -10.33
parseFloat("10"); output: 10
parseFloat("10.89"); output: 10.89
parseFloat("10 20 30"); output: 10
parseFloat("10 years"); output: 10
parseFloat("years 10"); output: NaN
```