Thanks for the article :)
Tip 11 (Reversing an array) is also modifying the original array colors.
Instead, if I don't want to change the original array, I would write:
var colors = ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"];
var reversedColors = [...colors].reverse();
console.log(reversedColors); // returns ["blue", "white", "green", "navy", "pink", "purple", "orange", "yellow", "black", "brown"]
or colors.slice().reverse() works too
Tip 10 has an off-by-one error going on: there's no need to add one to colors.length since it's already one more than the highest index.
Great tips though! I didn't know about the array.length = 0 one and will use it for sure.
array.length = 0
Thanks for suggestion
I love how you mentioned the arr.length = 0;, I've seen obj.arr = ; so many times, messing up references is just a matter of time with the latter.
arr.length = 0;
obj.arr = ;
A nice addition would be to change the 8. Find the intersection of two arrays to do it the other way around as Array.prototype.includes is linear and Set.prototype.has is constant, for larger lists a big difference can be noticed:
8. Find the intersection of two arrays
let firstValues = [...new Set(numOne)];
let duplicatedValues = numTwo.filter(item => firstValues.has(item));
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
You spread Set into an array, so array won't have has method on it. Small bug on your side.
Oh you're right, first line should have been:
let firstValues = new Set(numOne);
Thanks for pointing that up
numOne = [1, 2]
numTwo = [1, 3, 1]
let duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
let firstValues = new Set(numOne);
duplicatedValues = numTwo.filter(item => firstValues.has(item));
// [1, 1]
to solve this we need either to create second Set or to use includes instead of has
“ and ” need to be converted to regular double quotes (") or single quotes so your code can be copy/pasted into the console without having to convert them all.
the character you used for the spread operator (…) needs to be converted to three periods (.) for copy/paste purposes. I think it's also important to note in the article that the spread operator is ES6.
"Get random value form the array" title > needs to be "from array"
Great article, thanks for posting! :)
yes, I totally agree that if you are going to have code in your article make sure that it's valid!!! that's more important than it being pretty. you could use codepen or similar to ensure it actually runs.
Point 3 is more useful when applied to array-like objects, e.g. NodeList, since you can transform them into arrays and map the items to new values at the same time.
Hello ...i want to learn js can someone share with me a tutorial or course
We have interactive and building real projects courses, you can take a look if you like that (we can give discounts for dev.to) :)
Where are the link for rhe courses
You can find Duomly on duomly.com
Try freecodecamp.org/ . I really enjoyed that course!
Thanks for the article. Very useful tips in the article as well as the comments!
One query - If i have a two dimensional array (m rows and n columns) - what is the fastest way to create another array with retaining just some selected columns and dropping the others?
Nice post, very useful tips and tricks, thanks. I have found a typo in paragraph 3 in the last part. You wrote: ... user .from() method, instead of use.
In point 9 first row you wrote defined, in point 10 title there is form
Thanks for pointing, going to fix :)
Hi. Sorry for pointing them out individually. I just reached the end. I found another typo in the conclusion, 13 tips and tricks with, instead od which. You are welcome, would like to read from you again :)
Thanks for the post! I need, however, to point out that the solution for finding an intersection array (#8) not quite correct. Try to find an intersection array for these two arrays using your solution:
[1, 1, 1, 2, 1, 3, 4, 2, 2, 2, 2, 2, 2, 2, 2, 4, 5, 6],
[2, 2, 2, 1, 1, 6, 7, 8, 2, 2, 2, 2]
the output is [ 1, 2, 6 ] when actually it supposed to be [ 1, 1, 2, 2, 2, 2, 2, 2, 2, 6 ] (sorted version)
[ 1, 2, 6 ]
[ 1, 1, 2, 2, 2, 2, 2, 2, 2, 6 ]
The Set does not work well to find a proper intersection array.
Great article! My favorite trick : array.length = 0 💯
Thanks Claudine, we are very happy you like our article! :)
Hi. Great article. I'm willing to translate it into Persian and share it on my blog. I hope you are content :)
Of course! If you will give link to author duomly.com we are very happy to accept that :)
Thanks. Here is the link. I mentioned you at the bottom of article:
Cool, It's nice we inspired you :)
Great article. Thanks for sharing.
Wonderful and Informative.
Keep it up to share your knowledge and tricks.
FYI, #4 "Empty an array" will create a holey array. It's better to assign the value a new empty array  rather than mutate the length. More on element kinds: v8.dev/blog/elements-kinds
Why would setting the length of an array to 0 make it holey? I would understand if you were to set the length to a value greater than its content, it would create a HOLEY_ELEMENTS. Truncating should not have that same problem.
I would think the engine would continue to optimize for a PACKED_ELEMENTS Array if length were set to a value less than its current content, including 0.
This is a very good article. well written article.
Very nice, a slight typo though. I think you meant fill mot fulfill on Tip 6
That was a very helpful article. I did not know before that I could empty an array by assigning its length to zero! Thanks for the article!
I didn't know about the second parameter of Array.from() as well, but I don't actually see a reason to use it instead of Array.map() in any situation.
Tip 3 is awesome. Never knew till the time that Array.from takes a second argument a function that would replicate .map functionality. Good One !!!
Nice article! I loved the fifth tip
As a student , I love this article. My fav cheat sheet .
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.