DEV Community: Dina Andrandraina

Native deep clone in JS

Dina Andrandraina — Sat, 21 May 2022 05:35:33 +0000

I recently discovered a new feature in Javascript 🎉. I am a little bit late but I'm really excited about this feature.

Finally, there's a simpler way to deep clone a value using the new native function structuredClone available in recent version of NodeJS and JS engines.

As we know, for complex types, assignation will not copy the values but the reference.

const person = { name: 'John Doe' }
const anotherPerson = person

person.name = 'Smith'

console.log(person.name) // Smith
console.log(anotherPerson.name) // Smith

person and anotherPerson contain both the reference of the same object, so if mutate this object, both of them will see the changes.

Sometime, we don't need this behavior but we want to have an independant value, so we need to deep clone it.

Before, to deep clone a complex value like Object or Arrays, we have to do some hacks like
JSON.parse(JSON.stringify(val)), some of us may have used libraries, or created a helper to do the stuff.

Now it can be done by using a single native function structuredClone.

I tried it, I like it and I hope you'll like it too.

👉 https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Peace ✌

Question - Frontend library/framework

Dina Andrandraina — Sat, 12 Jun 2021 17:37:58 +0000

As a frontend developer, what library or framework do you use the most and why? 🤔

Javascript - Array.some() and Array.every()

Dina Andrandraina — Tue, 17 Nov 2020 17:52:06 +0000

Javascript provides interesting tools to work with Arrays and Objects. In this article, we will talk about two array methods: some and every.

Array.some()

If you want to check if your array has a value that matches a condition, Array.some() is your friend. It just takes a callback with 4 parameters:

the current element
the index of the item
the original array
and a value to use as this;

and returns a boolean. Note that only the first parameter is required for the callback, all the others are optionals.

As soon as the item makes the callback return a truthy value, Array.some returns true directly.

Let's take an example. Let's check if our array has an even number.

Here's our original arrays:

const arr1 = [1,3,17,9,5];
const arr2 = [1,17,8,7];

Without using the Array.some() method, we'd probably did it like this:

function hasEven(arr) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 2 === 0) return true;
    }

    return false;
}

console.log(hasEven(arr1)) // false
console.log(hasEven(arr2)) // true

This is quite long for just checking if our array matches a condition.

With Array.some, we can make this in a single line:

console.log(arr1.some(item => item % 2 === 0)) // false
console.log(arr2.some(item => item % 2 === 0)) // true

But wait, we're repeating some logic here, that's not DRY.

Okay, you're right. Let's refactor it.

const isEven = n => n % 2 === 0;
console.log(arr1.some(isEven)); // false
console.log(arr2.some(isEven)); // true

Alternatively:

console.log(arr1.some(n => isEven(n)))

We did it, now we have a shorter code, readable and DRY.

Readable? Yes, you can read it like:

some element of arr1 is even => false
some element of arr2 is even => true

Array.every()

This array method is similar to Array.some, the difference is that it returns true only if each element of the given array makes the callback return a truthy value.

const arr1 = [2,8,6,1,4,16];
const arr2 = [16,20,14,4,2];
const isEven = n => n % 2 === 0;

console.log(arr1.every(isEven)); // false
console.log(arr2.every(isEven)); // true

Conclusion

Array.some() checks if the given array contains some value that makes the given callback return a truthy value.

Array.every() checks if every element in the array matches the given callback.