I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I create tips for day to day Frontend development.
Here I am coming with a new article to cover some ways to sort an array based on the Property values. These tips can be a small stone in your river of JavaScript Coding interviews in 2021.
I know small stones doesn't make much difference but if we get thousand of stones it will and for that I will come with new stone tomorrow. Stay tuned😉
We might always come across one or other way to remove the item from the array or array of objects based on one property or multiple properties values. Let's see what are the different ways to remove or filter an item from an array based on the property values.
1. pop
“The pop() method removes the last element from an array and returns that element. This method changes the length of the array.” (source: MDN)
arrays:
let arraypoptest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testpop = arraypoptest.pop();
console.log("array pop", testpop,"-", arraypoptest);
//10 - [2, 1, 2, 5, 6, 7, 8, 9, 9];
arrays of objects:
let users1 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let testpop1 = users1.pop();
console.log(
"array of objects pop",
JSON.stringify(testpop1),"-"
JSON.stringify(users1)
);
//{"id":4,"name":"sara"} - [{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]
2. shift
“The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.” (source: MDN)
arrays:
let arrayshifttest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testshift = arrayshifttest.shift();
console.log("array shift", testshift,"-", arrayshifttest);
//2 - [1, 2, 5, 6, 7, 8, 9, 9, 10]
arrays of objects:
let users2 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let testshift1 = users2.shift();
console.log("array of objects shift", JSON.stringify(testshift1),"-", JSON.stringify(users2));
//{"id":1,"name":"ted"} - [{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
3. slice
“The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.” (source: MDN)
arrays:
let arrayslicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testslice = arrayslicetest.slice(0, 3);
console.log("array slice", testslice, arrayslicetest);
//not changed original array
//[2, 1, 2] - [2, 1, 2, 5, 6, 7, 8, 9, 9, 10]
arrays of objects:
let users3 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let testslice1 = users3.slice(0, 3);
console.log("array of objects slice", JSON.stringify(testslice1));
//not changed original array
//[{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]
4. splice
“The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.” (source: MDN)
arrays:
let arraysplicetest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testsplice = arrayslicetest.splice(0, 3);
arrays of objects:
let users4 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let testspice1 = users3.splice(0, 3);
console.log("array of objects splice", JSON.stringify(testsplice));
//[{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]
5. remove specific values using splice
arrays:
let arr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
for (var i = 0; i < arr.length; i++) {
if (arr[i] === 5) {
arr.splice(i, 1);
}
}
console.log("splice with specific value", arr);
*//[2, 1, 2, 6, 7, 8, 9, 9, 10]*
arrays of objects:
let users5 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
for (var i = 0; i < users5.length; i++) {
if (users5[i].name === "ted") {
users5.splice(i, 1);
}
}
console.log("splice with specific value array of objects",JSON.stringify( users5));
//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
6. remove specific values using splice — shorthand
“The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.”(source: MDN)
“The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.”(source: MDN)
arrays:
let arrShorthand = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let val = arr.indexOf(5);
arrShorthand.splice(val, 1);
console.log("splice shorthand specific value", arrShorthand);
//*[1, 2, 3, 4, 5, 6, 7, 8, 9]*
arrays of objects:
let users6 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
var removeIndex = users6.map(item => item.id).indexOf(1);
users6.splice(removeIndex, 1);
console.log("splice shorthand specific value array of objects", JSON.stringify(users6));
//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
7. filter
“The filter() method creates a new array with all elements that pass the test implemented by the provided function.”(source: MDN)
arrays:
let testarr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let testarr2 = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let filtered = testarr.filter(function(value, index, arr) {
return value > 5;
});
let filtered2 = testarr2.filter(item => item !== 2);
console.log("filter example 1", filtered);
//[6, 7, 8, 9, 9, 10]
console.log("filter example 2", filtered2);
//[1, 5, 6, 7, 8, 9, 9, 10]
filter with multiple values removal:
let forDeletion = [2, 3, 5];
let mularr = [1, 2, 3, 4, 5, 3];
mularr = mularr.filter(item => !forDeletion.includes(item));
console.log("multiple value deletion with filter", mularr);
//[1, 4]
arrays of objects:
let users7 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let filterObj = users7.filter(item => item.id !== 2);
console.log("filter example array of objects", filterObj);
//[{"id":1,"name":"ted"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
8. delete operator
“The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.”(source: MDN)
let ar = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
delete ar[4]; // delete element with index 4
console.log(ar);
//[2, 1, 2, 5, undefined, 7, 8, 9, 9, 10]
9. lodash remove
remove “removes all elements from array that predicate returns truthy for and returns an array of the removed elements. The predicate is invoked with three arguments: (value, index, array).” (source: lodash)
arrays:
let arrlodashtest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];
let evens = _.remove(arrlodashtest, function(n) {
return n % 2 == 0;
});
console.log("lodash remove array", arrlodashtest);
//[1, 5, 7, 9, 9]
arrays of objects:
let users8 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
let evensObj = _.remove(users8, function(n) {
return n.id % 2 == 0;
});
console.log("lodash remove array of object", JSON.stringify(evensObj));
//[{"id":2,"name":"mike"},{"id":4,"name":"sara"}]
10. Object utilities
“The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop.” (source: MDN)
const object = [1, 2, 3, 4];
const valueToRemove = 3;
const arrObj = Object.values(
Object.fromEntries(
Object.entries(object).filter(([key, val]) => val !== valueToRemove)
)
);
console.log("object utilites", arrObj); // [1,2,4]
11. lodash filter
filter “Iterates over elements of collection, returning an array of all elements predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection).” (source: lodash)
let users10 = [
{ id: 1, name: “ted” },
{ id: 2, name: “mike” },
{ id: 3, name: “bob” },
{ id: 4, name: “sara” }
];
const lodashFilter = _.filter(users10, { id: 1 });
console.log(“lodash filter”, JSON.stringify(lodashFilter));
//[{"id":1,"name":"ted"}]
12. lodash without
without “returns the new array of filtered values.” (source: lodash)
let lodashWithout = [2, 1, 2, 3];
let lodashwithoutTest = _.without(lodashWithout, 1, 2);
console.log(lodashwithoutTest);
//*[3]*
13. lodash reject
_reject “do opposite of _.filter this method returns the elements of collection that predicate does not return truthy for.”(source: lodash)
let users9 = [
{ id: 1, name: "ted" },
{ id: 2, name: "mike" },
{ id: 3, name: "bob" },
{ id: 4, name: "sara" }
];
const result = _.reject(users9, { id: 1 });
console.log("lodash reject", result);
//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
You can play with stackblitz here.