DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for JavaScript Array Method
Md Yasin Miah
Md Yasin Miah

Posted on • Updated on

JavaScript Array Method

## JavaScript concept 01

JavaScript Array method

1. toString()
The JavaScript method toString() converts an array to a string of (comma separated) array values.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makeString = animals.toString();
console.log(makeString);
output: cow, dog, tiger, elephant, horse 
Enter fullscreen mode Exit fullscreen mode

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.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var joinAll= animals.join(β€œ+”);
console.log(joinAll);
output: cow + dog + tiger + elephant + horse
Enter fullscreen mode Exit fullscreen mode

3. pop()
The JavaScript method pop() removes the last element of an array and the pop() method return the removed element.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePop= animals.pop();
console.log(animals);
console.log(makePop);
output: ["cow", "dog", "tiger", "elephant"]
output: horse
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

5. shift()
The JavaScript method shift() removes the first element of an array and the shift() method returns the removed element.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var makePop= animals.shift();
console.log(animals);
console.log(makePop);
output: ["dog", "tiger", "elephant", "horse"]
output: β€œcow”
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

7. Changing index element.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
animals[0] = "lion";
animals[animals.length] = "fox";
console.log(animals);
output: ["lion", "dog", "tiger","elephant","fox"]
Enter fullscreen mode Exit fullscreen mode

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.

var animals = ["cow", "dog", "tiger", "elephant", "horse"];
var remove = delete animals[0];
console.log(remove);
output: undefined;
Enter fullscreen mode Exit fullscreen mode

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.

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"]
Enter fullscreen mode Exit fullscreen mode
  • concat() can also merge more than one array.
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"];
Enter fullscreen mode Exit fullscreen mode
  • concat() can also merge strings in an array.
var smallAnimals = ["cat", "dog", "sheep", "rat"];
var animals = smallAnimals.concat(β€œelephant”, β€œdolphin”);
console.log(animals);
output: ["cat", "dog", "sheep", "rat", "elephant", "dolphin"];
Enter fullscreen mode Exit fullscreen mode

10. splice()
The JavaScript method splice() can add new elements anywhere and it also can delete any element.

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”
Enter fullscreen mode Exit fullscreen mode
var removed = smallAnimals.splice(2, 1, β€œelephant”, β€œdolphin”);
Enter fullscreen mode Exit fullscreen mode

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.

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"];
Enter fullscreen mode Exit fullscreen mode
var new = smallAnimals.slice(1, 3);
Enter fullscreen mode Exit fullscreen mode

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.

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
Enter fullscreen mode Exit fullscreen mode

2. parseInt()
This method parses a string into a whole number. Space can be allowed. And it can parse only the first number.

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
Enter fullscreen mode Exit fullscreen mode

3. parseFloat()
This method parses a string into a number. Space can be allowed. And it can parse only the first number.

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.