{"id":556,"date":"2025-05-19T10:53:07","date_gmt":"2025-05-19T10:53:07","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=556"},"modified":"2025-05-20T12:57:18","modified_gmt":"2025-05-20T12:57:18","slug":"arrays-and-objects","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/","title":{"rendered":"Arrays and Objects"},"content":{"rendered":"Creating and modifying arrays<\/h2>\n
What is an Array?<\/strong><\/p>\nAn array is a special variable that can hold multiple values at once, organized in an ordered collection.
\nEach value is called an element, and each has a numeric index starting from 0.<\/p>\n
1. Creating Arrays<\/h3>\n
Using Square Brackets<\/strong><\/p>\nlet fruits = [“apple”, “banana”, “cherry”];<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “banana”, “cherry”]<\/em><\/p>\n\n- The most common and simple method.<\/li>\n<\/ul>\n
Using the Array Constructor<\/strong><\/p>\nlet numbers = new Array(1, 2, 3, 4);<\/em>
\nconsole.log(numbers); \/\/ [1, 2, 3, 4]<\/em><\/p>\nCreating Empty Arrays<\/strong><\/p>\nlet emptyArray = [];<\/em>
\nlet anotherEmpty = new Array();<\/em><\/p>\n\n- Useful when you plan to add items later.<\/li>\n<\/ul>\n
2. Modifying Arrays<\/h3>\n
Adding Elements<\/strong><\/p>\n.push() \u2014 Add to End<\/p>\n
fruits.push(“date”);<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “banana”, “cherry”, “date”]<\/em><\/p>\n.unshift() \u2014 Add to Start<\/p>\n
fruits.unshift(“avocado”);<\/em>
\nconsole.log(fruits); \/\/ [“avocado”, “apple”, “banana”, “cherry”, “date”]<\/em><\/p>\nRemoving Elements<\/strong><\/p>\n.pop() \u2014 Remove from End<\/p>\n
fruits.pop();<\/em>
\nconsole.log(fruits); \/\/ [“avocado”, “apple”, “banana”, “cherry”]<\/em><\/p>\n.shift() \u2014 Remove from Start<\/p>\n
fruits.shift();<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “banana”, “cherry”]<\/em><\/p>\nUpdating Elements<\/strong><\/p>\nAccess by index and reassign:<\/p>\n
fruits[1] = “blueberry”;<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “blueberry”, “cherry”]<\/em><\/p>\nArrays are mutable \u2014 you can change them directly!<\/p>\n
Inserting, Deleting, or Replacing with .splice()<\/strong><\/p>\n.splice(startIndex, deleteCount, item1, item2, …)<\/p>\n
Example:<\/strong><\/p>\nfruits.splice(1, 1, “blackberry”, “kiwi”);<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “blackberry”, “kiwi”, “cherry”]<\/em><\/p>\n\n- Start at index 1.<\/li>\n
- Remove 1 item.<\/li>\n
- Insert “blackberry” and “kiwi” at that position.<\/li>\n<\/ul>\n
Other Useful Array Methods<\/strong><\/p>\n\n\n\n| Method<\/th>\n | Purpose<\/th>\n | Example<\/th>\n<\/tr>\n<\/thead>\n |
\n\n| .length<\/td>\n | Get number of elements<\/td>\n | fruits.length<\/span><\/td>\n<\/tr>\n\n| .concat()<\/td>\n | Merge arrays<\/td>\n | array1.concat(array2)<\/span><\/td>\n<\/tr>\n\n| .slice()<\/td>\n | Copy part of an array<\/td>\n | fruits.slice(1, 3)<\/span><\/td>\n<\/tr>\n\n| .indexOf()<\/td>\n | Find position of an element<\/td>\n | fruits.indexOf(“apple”)<\/span><\/td>\n<\/tr>\n\n| .includes()<\/td>\n | Check if element exists<\/td>\n | fruits.includes(“banana”)<\/span><\/td>\n<\/tr>\n\n| .reverse()<\/td>\n | Reverse the array<\/td>\n | fruits.reverse()<\/span><\/td>\n<\/tr>\n\n| .sort()<\/td>\n | Sort array alphabetically or numerically<\/td>\n | fruits.sort()<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Quick Summary:<\/strong><\/p>\n\n\n\n| Creating Arrays<\/th>\n | Modifying Arrays<\/th>\n<\/tr>\n<\/thead>\n | \n\n\n[]<\/span> or new Array()<\/span><\/div>\nlet colors = [‘red’, ‘green’, ‘blue’];<\/div>\n let numbers = new Array(1, 2, 3);<\/div>\n<\/td>\n \n.push()<\/span>,
\n.pop()<\/span>,
\n.shift()<\/span>,
\n.unshift()<\/span>,
\n.splice()<\/span><\/div>\nfruits.push(‘orange’); \/\/ adds to end<\/div>\n fruits.pop(); \/\/ removes from end<\/div>\n<\/td>\n<\/tr>\n \n\nHolds multiple values of any type<\/div>\n Can contain strings, numbers, objects, even other arrays<\/div>\n<\/td>\n \nAdd, remove, and update elements easily<\/div>\n Methods modify the original array (except slice)<\/div>\n<\/td>\n<\/tr>\n \n\nIndex starts from 0<\/div>\n let first = colors[0]; \/\/ ‘red’<\/div>\n<\/td>\n \nUse index to access or modify<\/div>\n colors[1] = ‘yellow’; \/\/ modifies second item<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Would you also like a quick diagram showing how an array grows and shrinks as we add and remove elements?<\/p>\n Common array methods (push, pop, map, filter, etc.)<\/h2>\nArrays are powerful because they come with built-in methods that make manipulating data easy and efficient.<\/p>\n 1. Push() \u2014 Add to End<\/h3>\nAdds one or more elements to the end of an array.<\/p>\n let fruits = [“apple”, “banana”];<\/em>
\nfruits.push(“cherry”);<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “banana”, “cherry”]<\/em><\/p>\n\n- push() returns the new length of the array.<\/li>\n<\/ul>\n
2. Pop() \u2014 Remove from End<\/h3>\nRemoves the last element from an array.<\/p>\n fruits.pop();<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “banana”]<\/em><\/p>\n\n- pop() returns the removed element.<\/li>\n<\/ul>\n
3. Unshift() \u2014 Add to Start<\/h3>\nAdds one or more elements to the beginning of an array.<\/p>\n fruits.unshift(“mango”);<\/em>
\nconsole.log(fruits); \/\/ [“mango”, “apple”, “banana”]<\/em><\/p>\n4. Shift() \u2014 Remove from Start<\/h3>\nRemoves the first element from an array.<\/p>\n fruits.shift();<\/em>
\nconsole.log(fruits); \/\/ [“apple”, “banana”]<\/em><\/p>\n5. Map() \u2014 Transform Each Element<\/h3>\nCreates a new array by applying a function to each element of the array.<\/p>\n let numbers = [1, 2, 3];<\/em>
\nlet squared = numbers.map(num => num * num);<\/em>
\nconsole.log(squared); \/\/ [1, 4, 9]<\/em><\/p>\nDoes not change the original array.<\/p>\n 6. Filter() \u2014 Filter Elements<\/h3>\nCreates a new array with elements that pass a test (return true).<\/p>\n let ages = [10, 20, 18, 25];<\/em>
\nlet adults = ages.filter(age => age >= 18);<\/em>
\nconsole.log(adults); \/\/ [20, 18, 25]<\/em><\/p>\n7. Reduce() \u2014 Reduce to Single Value<\/h3>\nApplies a function against an accumulator and each element to reduce the array to a single value.<\/p>\n let total = [1, 2, 3, 4].reduce((sum, num) => sum + num, 0);<\/em>
\nconsole.log(total); \/\/ 10<\/em><\/p>\n8. Find() \u2014 Find First Match<\/h3>\nReturns the first element that matches a condition.<\/p>\n let users = [{name: “Alice”}, {name: “Bob”}];<\/em>
\nlet user = users.find(u => u.name === “Bob”);<\/em>
\nconsole.log(user); \/\/ {name: “Bob”}<\/em><\/p>\n9. FindIndex() \u2014 Find First Matching Index<\/h3>\nReturns the index of the first element that matches the condition.<\/p>\n let numbers = [5, 12, 8, 130];<\/em>
\nlet index = numbers.findIndex(num => num > 10);<\/em>
\nconsole.log(index); \/\/ 1<\/em><\/p>\n10. Includes() \u2014 Check Existence<\/h3>\nChecks if an array includes a certain element.<\/p>\n let colors = [“red”, “green”, “blue”];<\/em>
\nconsole.log(colors.includes(“green”)); \/\/ true<\/em><\/p>\n11. Sort() \u2014 Sort Elements<\/h3>\nSorts the elements in place.<\/p>\n let nums = [3, 1, 4, 1, 5];<\/em>
\nnums.sort();<\/em>
\nconsole.log(nums); \/\/ [1, 1, 3, 4, 5] (default sort treats values as strings!)<\/em><\/p>\nFor numbers, use a compare function:<\/strong><\/p>\nnums.sort((a, b) => a – b);<\/em><\/p>\n12. Slice() \u2014 Copy Part of an Array<\/h3>\nReturns a shallow copy of a portion of an array into a new array.<\/p>\n let arr = [“a”, “b”, “c”, “d”];<\/em>
\nlet part = arr.slice(1, 3);<\/em>
\nconsole.log(part); \/\/ [“b”, “c”]<\/em><\/p>\nOriginal array remains unchanged.<\/p>\n 13. Splice() \u2014 Add\/Remove\/Replace Elements<\/h3>\nModifies the array by adding, removing, or replacing elements.<\/p>\n let arr = [“Jan”, “March”, “April”];<\/em>
\narr.splice(1, 0, “Feb”);<\/em>
\nconsole.log(arr); \/\/ [“Jan”, “Feb”, “March”, “April”]<\/em><\/p>\nChanges the original array.<\/p>\n Quick Summary Table:<\/strong><\/p>\n\n\n\n| Method<\/th>\n | Purpose<\/th>\n | Mutates Array?<\/th>\n | Returns New Array?<\/th>\n<\/tr>\n<\/thead>\n | \n\n| push()<\/td>\n | Add at end<\/td>\n | Yes<\/td>\n | No<\/td>\n<\/tr>\n | \n| pop()<\/td>\n | Remove from end<\/td>\n | Yes<\/td>\n | No<\/td>\n<\/tr>\n | \n| shift()<\/td>\n | Remove from start<\/td>\n | Yes<\/td>\n | No<\/td>\n<\/tr>\n | \n| unshift()<\/td>\n | Add at start<\/td>\n | Yes<\/td>\n | No<\/td>\n<\/tr>\n | \n| map()<\/td>\n | Transform each item<\/td>\n | No<\/td>\n | Yes<\/td>\n<\/tr>\n | \n| filter()<\/td>\n | Select matching items<\/td>\n | No<\/td>\n | Yes<\/td>\n<\/tr>\n | \n| reduce()<\/td>\n | Reduce to single value<\/td>\n | No<\/td>\n | Yes<\/td>\n<\/tr>\n | \n| find()<\/td>\n | Find first matching element<\/td>\n | No<\/td>\n | (Single item)<\/td>\n<\/tr>\n | \n| includes()<\/td>\n | Check if value exists<\/td>\n | No<\/td>\n | (true\/false)<\/td>\n<\/tr>\n | \n| sort()<\/td>\n | Sort elements<\/td>\n | Yes<\/td>\n | No<\/td>\n<\/tr>\n | \n| slice()<\/td>\n | Copy a portion of array<\/td>\n | No<\/td>\n | Yes<\/td>\n<\/tr>\n | \n| splice()<\/td>\n | Add\/remove\/replace elements<\/td>\n | Yes<\/td>\n | No (returns removed items)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Bonus Tip<\/strong><\/p>\nYou can chain many methods together:<\/p>\n let result = [1, 2, 3, 4, 5]<\/em>
\n.filter(n => n % 2 === 0)<\/em>
\n.map(n => n * n);<\/em>
\nconsole.log(result); \/\/ [4, 16]<\/em><\/p>\nFilter even numbers, then square them.<\/p>\n Object creation and manipulation<\/h2>\nWhat is an Object?<\/strong><\/p>\nAn object is a collection of key-value pairs, where the keys (also called properties) are strings (or Symbols), and the values can be any type: string, number, boolean, function, another object, etc.<\/p>\n Objects allow you to group related data and behavior together.<\/p>\n 1. Creating Objects<\/h3>\nObject Literal (Most Common Way)<\/strong><\/p>\nconst person = {<\/em>
\nname: “Alice”,<\/em>
\nage: 25,<\/em>
\nisStudent: true<\/em>
\n};<\/em><\/p>\nSimple and readable.<\/p>\n Using the new Object() Syntax<\/strong><\/p>\nconst person = new Object();<\/em>
\nperson.name = “Bob”;<\/em>
\nperson.age = 30;<\/em><\/p>\nWorks, but less preferred than literals for most cases.<\/p>\n Using a Constructor Function<\/strong><\/p>\nfunction Person(name, age) {<\/em>
\nthis.name = name;<\/em>
\nthis.age = age;<\/em>
\n}<\/em><\/p>\nconst person1 = new Person(“Charlie”, 28);<\/em><\/p>\nUseful for creating multiple similar objects.<\/p>\n Using Classes (Modern ES6+)<\/strong><\/p>\nclass Person {<\/em>
\nconstructor(name, age) {<\/em>
\nthis.name = name;<\/em>
\nthis.age = age;<\/em>
\n}<\/em>
\n}<\/em><\/p>\nconst person2 = new Person(“Daisy”, 22);<\/em><\/p>\nCleaner syntax for object “blueprints.<\/p>\n 2. Accessing Object Properties<\/h3>\nDot Notation<\/strong><\/p>\nconsole.log(person.name); \/\/ “Alice”<\/em><\/p>\nBracket Notation<\/strong><\/p>\nconsole.log(person[“age”]); \/\/ 25<\/em><\/p>\nUse bracket notation if the property name is stored in a variable or is dynamic.<\/p>\n 3. Modifying Object Properties<\/h3>\nYou can change the value of a property:<\/strong><\/p>\nperson.age = 26;<\/em>
\nconsole.log(person.age); \/\/ 26<\/em><\/p>\nJust reassign using dot or bracket notation.<\/p>\n 4. Adding New Properties<\/h3>\nYou can add new properties at any time:<\/strong><\/p>\nperson.city = “New York”;<\/em>
\nconsole.log(person.city); \/\/ “New York”<\/em><\/p>\n5. Deleting Properties<\/h3>\nUse the delete keyword:<\/strong><\/p>\ndelete person.isStudent;<\/em>
\nconsole.log(person.isStudent); \/\/ undefined<\/em><\/p>\nProperty is completely removed.<\/p>\n 6. Common Object Methods<\/h3>\n\n\n\n| Method<\/th>\n | Purpose<\/th>\n | Example<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Object.keys(obj)<\/td>\n | Returns array of keys<\/td>\n | Object.keys(person)<\/td>\n<\/tr>\n | \n| Object.values(obj)<\/td>\n | Returns array of values<\/td>\n | Object.values(person)<\/td>\n<\/tr>\n | \n| Object.entries(obj)<\/td>\n | Returns array of [key, value] pairs<\/td>\n | Object.entries(person)<\/td>\n<\/tr>\n | \n| Object.assign(target, source)<\/td>\n | Copies properties<\/td>\n | Object.assign({}, person)<\/td>\n<\/tr>\n | \n| hasOwnProperty(key)<\/td>\n | Checks if property exists<\/td>\n | person.hasOwnProperty(“name”)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Example: Full Object Operations<\/strong><\/p>\nconst car = {<\/em>
\nbrand: “Toyota”,<\/em>
\nmodel: “Camry”,<\/em>
\nyear: 2022<\/em>
\n};<\/em><\/p>\n\/\/ Accessing<\/em>
\nconsole.log(car.brand); \/\/ “Toyota”<\/em><\/p>\n | | | | | | | | | | | | | | |