1. Using the delete Operator

The delete operator is the simplest method for deleting a property from a JavaScript object. Although this operator is simple and easy to use, developers should be aware of some of its limitations.

const employee= {
  name: 'John Doe',
  age: 33,
  job: 'Manager'
}

delete employee.age

console.log(employee) // Output: { name: 'John Doe', job: 'Manager' }

A JavaScript object’s given property can be deleted using the delete operator. The property can no longer be accessed within the original object after deletion. However, if a property is present in the prototype, it can still be accessed because the delete operator has no effect on the object’s prototype chain.

While the delete operator is easy to use, it has a few downsides:

• Performance Problems: In applications where performance is crucial, the delete operator may result in a decline in performance. JavaScript engines optimize objects for speed; nevertheless, de-optimization may occur if a property is removed.
• Mutating Objects: By eliminating the designated property, the delete operator modifies the original object. Unexpected side effects may result from this, particularly when working with shared objects in a global scope.

2. Setting the Property to undefined or null

Setting a property’s value to undefined or null is an additional method for eliminating properties from a JavaScript object. This shows that the property has no value but does not physically delete it from the object.

const employee= {
  name: 'John Doe',
  age: 33,
  job: 'Manager'
}

employee.age = undefined

console.log(employee) // Output: { name: 'John Doe',  age: undefined, job: 'Manager' }

Differences Between undefined and null

• Undefined: Indicates a property or variable that has not yet been given a value.
• null: Indicates that there is no object value present on purpose.

When you wish to communicate that a property has no value but yet need to preserve the original object’s structure, this method can be helpful. When a property is set to null or undefined, it indicates that the property is still present in the object. If other sections of your code require the property to be totally absent, this could cause confusion.

The post How to remove a property from an object in Javascript appeared first on Info Spot.

Removing the Last Element of an Array

The pop() method removes and returns the last element of an array.

const myArray = [1, 2, 3, 4, 5];

const x = myArray.pop();

console.log(`The values of myArray are: ${myArray}`);
console.log(`The element x value is: ${x}`);

Output:

The values of myArray are: 1,2,3,4
The element x value is: 5

Removing the First Element of an Array

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

const myArray = [1, 2, 3, 4, 5];

const x = myArray.shift();

console.log(`The values of myArray are: ${myArray}`);
console.log(`The element x value is: ${x}`);

Output:

The values of myArray are: 2,3,4,5
The element x value is: 1

Removing an Element by Index

If you are identifying the item to be removed by its index, you can use the delete operator. If you want to use the value of the item you are removing, use the splice() method.

The delete Operator

The value at that position of the array will be undefined since the delete operator removes the object property at the designated index without changing the array’s length.

const myArray = [1, 2, 3, 4, 5];

delete myArray[1];

console.log(`The values of myArray are: ${myArray}`);

Output:

The values of myArray are: 1,,3,4,5

The splice() Method

The index of the element you want to remove and the index you want to remove up to are the two arguments that the splice() function requires. All of the values that were deleted from the original array are stored in a new array created by the splice() method. The length of the original array will be adjusted, and the values that were eliminated will no longer be present.

const myArray = [1, 2, 3, 4, 5];

const x = myArray.splice(1, 1);

console.log(`The values of myArray are: ${myArray}`);
console.log(`The element x value is: ${x}`);

Output:

The values of myArray are: 1,3,4,5
variable x value: 2

Removing an Element by Value

Once the index has been identified using the indexOf() method, you can delete the element from its index if you are identifying the element to be removed by its value. Use the filter() technique or a combination of the indexOf() and splice() methods if you wish to use the value of the element you are deleting.

Combining indexOf() and splice() Methods

The indexOf() method returns the index of the element in the array that corresponds to the value you pass in for the element you want to delete from your array. The element at the returned index is then removed using the splice() technique.

const myArray = [1, 2, 3, 4, 5];

const index = myArray.indexOf(2);

const x = myArray.splice(index, 1);

console.log(`The values of myArray are: ${myArray}`);
console.log(`The element x value is: ${x}`);

Output:

The values of myArray are: 1,3,4,5
The element x value is: 2

The post JavaScript: How Can I Remove a Specific Item from an Array? appeared first on Info Spot.