|
| 1 | +**Table of Content** |
| 2 | + |
| 3 | +# Data Structure in JavaScript |
| 4 | + |
| 5 | +Groups of data in different forms are one of the fundamental data structures in most of the programming languages. _Normally, groups of data expressed through different data types are known as `Collection`._ |
| 6 | + |
| 7 | +The three main Collection groups in JavaScript are - |
| 8 | + |
| 9 | +- Indexed Collections |
| 10 | +- Keyed Collections |
| 11 | +- DOM Collections |
| 12 | + |
| 13 | +## Indexed Collection |
| 14 | + |
| 15 | +Indexed collection is the colletion of data which is listed by their index. JavaScript collection indicies are _0-based_, meaning they start at index 0 and go up to `n-1`, where `n` is the number of objects in the collection. JavaScript offers two kinds of indexed collections - `Arrays` and `Typed Arrays`. |
| 16 | + |
| 17 | +### Array Object |
| 18 | + |
| 19 | +JavaScript Arrays are dynamically created special kind of object. Arrays store a numbers of variables including zero, which are known as empty array. These variables do not necesarily need to have same type. The variables stored in array have no names. These variables are accessed using non-negative integer index value. |
| 20 | + |
| 21 | +If an array has `n` variables, we can say that the length of that array is `n`. These variables are referenced using integer index form `0` to `n-1`. |
| 22 | + |
| 23 | +- Arrays are resizable and can contain mixture of different data types. |
| 24 | +- Arrays are zero-indexed i.e. the first element of array is at index `0`. |
| 25 | +- Copying arrays creat e a shallow copy, rather than deep copies. |
| 26 | + |
| 27 | +**_A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too — and so, you may end up unintentionally causing changes to the source or copy that you don't expect `[mdn]`._** |
| 28 | + |
| 29 | +**_A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you can be assured you're not causing the other object to change too; that is, you won't unintentionally be causing changes to the source or copy that you don't expect`[mdn]`._** |
| 30 | + |
| 31 | +#### Properties of an Array |
| 32 | + |
| 33 | +Array object has one property, `length`. the `length` property indicates the number of component stores in that array. |
| 34 | + |
| 35 | +Synatx: |
| 36 | + |
| 37 | +```js |
| 38 | +arrayObject.length; |
| 39 | +``` |
| 40 | + |
| 41 | +Examples: |
| 42 | + |
| 43 | +```js |
| 44 | +const arr1 = [1, 2, 3]; |
| 45 | +const arr2 = new Array(9); |
| 46 | +const arr3 = new Array(-10); // Negative numbers are not allowed |
| 47 | + |
| 48 | +console.log(arr1.length); // OUTPUT: 3 |
| 49 | + |
| 50 | +console.log(arr2.length); //OUTPUT: 9 |
| 51 | + |
| 52 | +console.log(arr3.length); //OUTPUT: RangeError: Invalid array length |
| 53 | +``` |
| 54 | + |
| 55 | +#### Adding element to an Array |
| 56 | + |
| 57 | +We can add an element to an Array by accessing an element through it's index and assign a value to it. |
| 58 | + |
| 59 | +```js |
| 60 | +let friends = new Array(5); |
| 61 | + |
| 62 | +friends[0] = "Suman"; |
| 63 | +friends[1] = "Anil"; |
| 64 | +friends[2] = "Yogendra"; |
| 65 | +friends[3] = "Bipin"; |
| 66 | +friends[4] = "Shusan"; |
| 67 | + |
| 68 | +console.log(friends); |
| 69 | +//OUTPUT: ["Suman", "Anil", "Yogendra", "Bipin", "Shusan"] |
| 70 | +``` |
| 71 | + |
| 72 | +In the above example, we have allocated 5 spaces for the array but we still can shrink or expand the size at any tine since the size ais dynamically allocated. |
| 73 | + |
| 74 | +```js |
| 75 | +friends[5] = "Laxmi"; |
| 76 | +friends[6] = "Sumi"; |
| 77 | + |
| 78 | +console.log(friends); |
| 79 | +// OUTPUT: ["Suman", "Anil", "Yogendra", "Bipin", "Shusan", "Laxmi", "Sumi"] |
| 80 | +``` |
| 81 | + |
| 82 | +#### Array Methods |
| 83 | + |
| 84 | +Here, we will have a look at the nmost commonly used methods: |
| 85 | + |
| 86 | +- `push()` - Adds an element at the end of an array |
| 87 | + |
| 88 | +```js |
| 89 | +let even = [2, 4, 6, 8]; |
| 90 | +even.push(10); |
| 91 | + |
| 92 | +console.log(even); //OUTPUT: [2,4,6,8,10] |
| 93 | +``` |
| 94 | + |
| 95 | +- `pop()` - removes the last element of an array |
| 96 | + |
| 97 | +```js |
| 98 | +let even = [2, 4, 6, 8]; |
| 99 | +even.pop(); |
| 100 | +console.log(even); //OUTPUT: [2,5,6] |
| 101 | +``` |
| 102 | + |
| 103 | +- `concat()` - joins arrays (two or more) into a single array |
| 104 | + |
| 105 | +```js |
| 106 | +//Concat 2 Arrays |
| 107 | +let even = [2, 4, 6, 8]; |
| 108 | +let odd = [1, 3, 5, 7, 9]; |
| 109 | + |
| 110 | +let array1 = odd.concat(even); |
| 111 | +console.log(array1); |
| 112 | +//OUTPUT: [1,3,5,7,2,4,6,8]; |
| 113 | + |
| 114 | +//Concat 3 Arrays |
| 115 | +let doubles = [10, 11, 12, 13]; |
| 116 | +let array2 = even.concat(odd, doubles); |
| 117 | +console.log(array2); |
| 118 | +//OUTPUT: [2,4,6,8,1,3,5,7,9,10,11,12,13] |
| 119 | +``` |
| 120 | + |
| 121 | +- `join()` - creates and returns a new string by conctenating all the elements in an array seperated by commas `(,)` or **user-specified seperator**. |
| 122 | + |
| 123 | +```js |
| 124 | +const life = ["Live", "Laugh", "Love"]; |
| 125 | + |
| 126 | +console.log(life.join()); |
| 127 | +// OUTPUT: "Live,Laugh,Love" |
| 128 | + |
| 129 | +console.log(life.join("")); |
| 130 | +// OUTPUT: "LiveLaughLove" |
| 131 | + |
| 132 | +console.log(life.join("-")); |
| 133 | +// OUTPUT: "Live-Laugh-Love" |
| 134 | +``` |
| 135 | + |
| 136 | +- `reverse()` - Just as the name suggests, it reverses the order of elements in an array. |
| 137 | + |
| 138 | +```js |
| 139 | +let even = [2, 4, 6, 8, 10]; |
| 140 | +let reversed = even.reverse(); |
| 141 | +console.log(reversed); |
| 142 | +// OUTPUT: [10,8,6,4,2] |
| 143 | +``` |
| 144 | + |
| 145 | +- `slice(start, end)` - It returns a shallow copy of portion of an array into an new array from specified `start` to `end` where `end` is not included. **The original array is not modified.** |
| 146 | + |
| 147 | +```js |
| 148 | +const hobbies = ["cricket", "football", "anime", "bikinig", "hiking"]; |
| 149 | + |
| 150 | +console.log(hobbies.slice(2)); |
| 151 | +//OUTPUT: ["anime", "bikinig", "hiking"] |
| 152 | +console.log(hobbies.slice(2, 4)); |
| 153 | +//OUTPUT: ["anime", "bikinig"] |
| 154 | +console.log(hobbies.slice(1, 5)); |
| 155 | +//OUTPUT: ["football", "anime", "bikinig", "hiking"] |
| 156 | +console.log(hobbies.slice(-3)); |
| 157 | +//OUTPUT: ["anime", "bikinig", "hiking"] |
| 158 | +console.log(hobbies.slice(2, -1)); |
| 159 | +//OUTPUT: ["anime", "bikinig"] |
| 160 | +console.log(hobbies.slice()); |
| 161 | +//OUTPUT: ["cricket", "football", "anime", "bikinig", "hiking"] |
| 162 | +``` |
| 163 | + |
| 164 | +### TypedArray Object |
| 165 | + |
| 166 | +`Array` object can be used to store different types of elements in one array and also offers various powerful methods to manipulate the elements in the array. |
| 167 | + |
| 168 | +However, when we need to work with raw binary data, we need to use the `TypedArray` Object. Raw data is processed when manipulating audio and video for example. |
| 169 | + |
| 170 | +JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. JavaScript typed arrays are divided into _`Buffers`_ and _`Views`_. |
| 171 | + |
| 172 | +- Buffer - An object representing a chunk of data implemented by the `ArrayBuffer` object. It is used to represent a fixed-length binary data buffer. To represent this buffer, we create a view - `DataView` and use it to read and write the contents of the buffer. There are various types of views which represent the most common numeric types - |
| 173 | + - Int8Array: 8-bit two's complement signed integer |
| 174 | + - Uint8Array - 8-bit unsigned integer |
| 175 | + - Uint8ClampedArray: 8-bit unsigned integer |
0 commit comments