Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

274
Views
Understanding Behaviour of Find method in Javascript
let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }];
let exists = arr.find(x => x.age < 4);
exists.age += 1;
console.log(arr);

//output is [{age:4},{age:5},{age:6},{age:7}];

In the above example, I'm updating the result returned by the find method but it also changes the value of the original array why so?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Array.prototype.find will return the first element that satisfy the condition that you've passed as a callback function.

Since you are looking for an object whose age property is less than 4. So It will return first object(whose age is 3). So if you gonna check for equality of exists and arr[0] then It will return object that satisfy the condition

let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }];
let exists = arr.find((x) => x.age < 4);

console.log(exists === arr[0])

So, If you are going to do any kind of mutation with the object that is returned by the find method then the original object will reflect the changes.

Because both are same object just different references.


If you don't want to mutate the original object then you should clone it before doing any kind of changes to that object.

Note: Both of the following method does shallow copy

1) Using spread syntax

let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }];
let exists = arr.find((x) => x.age < 4);

const clone = { ...exists };
clone.age += 1;
console.log(arr);
/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

2) Using Object.assign

let arr = [{ age: 3 }, { age: 5 }, { age: 6 }, { age: 7 }];
let exists = arr.find((x) => x.age < 4);

const clone = Object.assign({}, exists);
clone.age += 1;
console.log(arr);

about 4 years ago · Juan Pablo Isaza Report

0

Because you have an array of object references. In JavaScript, objects are actually stored elsewhere (called the "heap") and object variables actually only contain the references to object. So the reason is because you're updating the same object.

If you want to do a shallow clone of an object, you can use Object.assign({}, obj).

Further, not directly relevant to your question, if your object properties themselves were to contain other object references, including arrays, and you want those to be copies as well, you'll have to deep-clone them. This is not automatically done by a stock JavaScript function or method. You'll have to find code that does that for you or write it yourself. Last time I did this, I used randa's clone function because a different developer on my team had already imported the ramda library into our project. What makes the most sense for your project may be different.

about 4 years ago · Juan Pablo Isaza Report

0

It's because Objects in JavaScript are passed by reference, you got that object ( {age : 3} ) in exists then added 1 to it's "age" key , so the original object also changed .

let obj1 = {age: 3 , name: 'jack' }
let obj2 = obj1

console.log(obj1 === obj2 )  // true

// if you change the second object , the first one will change too :

obj2.age = 15

console.log(obj1 , obj2 )  

// obj1 = { age: 15 , name: 'jack' } 
// obj2 = { age: 15 , name: 'jack' }

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!