loading...
Cover image for Array Instance Methods

Array Instance Methods

bhagatparwinder profile image Parwinder 👨🏻‍💻 Updated on ・3 min read

JavaScript with Parwinder (41 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 39 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply 41) Destructuring Arrays

Methods that exist on the prototype of Array

Concat

Returns and array joined (concatenated) with another array or values.

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = array1.concat(array2);

console.log(array3); // ["a", "b", "c", "d", "e", "f"]

You can also concatenate values to an array.

const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric); // ["a", "b", "c", 1, 2, 3]

Or concatenate nested arrays.

const num1 = [[1]];
const num2 = [2, [3]];
const numbers = num1.concat(num2);

console.log(numbers); // [[1], 2, [3]]

// modify the first element of num1
num1[0].push(4);
console.log(numbers); // [[1, 4], 2, [3]]

Entries

It is relatively common to use the method entries or keys or values on an object, but they are also supported on arrays.

Entries method returns an iterator with key/value pair.

const array1 = ["a", "b", "c"];
const iterator = array1.entries();

console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]

Keys

Keys method returns an iterator with keys.

const array1 = ["a", "b", "c"];
const iterator = array1.keys();

console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2

Values

const array2 = ["a", "b", "c"];
const i = array2.values();

console.log(i.next().value); // a
console.log(i.next().value); // b
console.log(i.next().value); // c

Includes

Includes method checks if an array contains an element and returns true or false.

const array1 = [1, 2, 3];
console.log(array1.includes(3)); // true
console.log(array1.includes(4)); // false

const pets = ["cat", "dog", "bat"];
console.log(pets.includes("cat")); // true
console.log(pets.includes("at")); // false

The includes method also takes index as the second parameter. The second parameter makes the include method check for a value in an array with an index greater than or equal to the provided index.

let example = ["a", "b", "c"]

example.includes("b", 3); // false
example.includes("b", 100); // false
example.includes("b", 1); // true

indexOf

indexOf method returns the first index of the given element if it is present in the array. If it is not, it returns -1. Folks used it to check if an element exists in an array before ES6. There is no specific need to use indexOf when includes exist.

Use the includes() method to check if the element is present in the array. If you need to know where the element is in the array, you need to use the indexOf() method.

var array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

findIndex

At this point, you have learned about indexOf and includes to find element or index. findIndex is somewhat similar. findIndex provides you the index of the first element that satisfies a callback or a testing function.

indexOf expects the value you are looking for as a parameter. findIndex looks for a callback or testing function as its parameter. I would suggest using indexOf in arrays with primitive types like strings, numbers, or booleans. Use findIndex when dealing with non-primitive types like objects, and your find condition is relatively complicated.

const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];
const index = fruits.findIndex(fruit => fruit === "blueberries");

console.log(index); // 3
console.log(fruits[index]); // blueberries

Find

I believe you think I am trolling you with all these methods that find if the index or value exists in an array. They all have a very subtle difference, and I have listed the differences in each method description.

The find method returns the value of the first element that matches the callback or the testing condition. find gets you value and findIndex gets you index. 🙂

const array = [7, 33, 47, 99, 2, 103, 79];
const found = array.find(element => element > 10);
console.log(found); // 33

Join

join method is a relatively common and frequently used method. It creates and returns a string by concatenating all of the elements in an array. You can join all elements or provide a separator to connect them with. By default, the method uses a comma (,) as a separator.

const fruits = ["Apple", "Banana", "Raspberry"];

console.log(fruits.join()); // Apple,Banana,Raspberry
console.log(fruits.join("")); // AppleBananaRaspberry
console.log(fruits.join("|")); // Apple|Banana|Raspberry

JavaScript with Parwinder (41 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 39 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply 41) Destructuring Arrays

Posted on by:

bhagatparwinder profile

Parwinder 👨🏻‍💻

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide