Cara menggunakan javascript array empty slots
Show plus Typescript tipPhoto by Pawel Czerwinski on UnsplashI’ll shortly describe what Javascript (JS) array is, how we use it and then I’ll describe how we can check whether it’s empty. There are more ways to do it so I’ll describe them gradually since JS language is evolving and now we have better and more concise ways to do it. If you work with Typescript (TS), there’s an interesting and more bullet proof way to check for empty arrays too. Intro to JS arraysJS arrays serve for storing the multiple values in a list. JS array is a sub-type of JS object. That means it extends the behaviour of JS object in some way. The literal syntax of the array uses square brackets: let myArray = [] while the object uses curly brackets: let myObject = {} JS arrays use numerical indexes, starting with the index let myArray = [1, 245, 'apple', { type: 'fruit' }]myArray.length The length of this array is 4 and you can see we can mix any values we want (numbers, strings, objects, etc.) This is how we can access individual values: myArray[0] Caveat There are so called ‘empty slots’ in JS arrays.
Given the array we defined above we could do the following: myArray[10] = 'carrot' All other positions would be undefined. There are many methods on arrays and we can do much more, but as an introduction this will do. The main part of the article follows: Is JS array empty? Does it exist?Let’s describe 5 ways for checking if JS array is empty and whether it exists. 1. The length propertyThe first
thing you might think of is the myArray.length ? true : false This would return false if the length is 0. What if 2. And (&&) operator and lengthWe can use myArray && myArray.length ? true : false This is fine, but there’s a shorter way using the
optional chaining operator 3. Optional chaining (.?)Instead of using myArray?.length ? true : false Speaking about the operators, I’d like to mention also the Nullish coalescing operator (??). Our array contains also an object, so we could check its property. let myArray = [1, 245, 'apple', { type: 'fruit' }] We get whatever we evaluate on the left side if it’s true, otherwise we get what is on the right side of 4. Logical NOT (!)It depends on what you really need, but here’s
another way. Logical not operator negates the values. The following would return !myArray?.length ? true : false 5. isArray() methodHow do we really know if we work with the array though? The length property exists also on the string. We could use isArray() method: let myArray = [1, 245, 'apple', { type: 'fruit' }]Array.isArray(myArray) Obviously you can combine the approaches listed above. For example: if (Array.isArray(myArray) && myArray.length) { Typescript solutionI recommend reading this article from Luca Del Puppo to see how the snippet below works in detail. export interface NonEmptyArray extends ReadonlyArray { ConclusionI listed several ways we can utilize the operators to work
with the arrays and check whether they are empty or not. We started with the Depending on your needs, you can choose one or more approaches and combine them together, or you could also write helper functions like the one for Typescript. I hope you find this article useful. References
|