{"id":556,"date":"2025-05-19T10:53:07","date_gmt":"2025-05-19T10:53:07","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=556"},"modified":"2026-06-06T12:38:42","modified_gmt":"2026-06-06T12:38:42","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":"<h2>Creating and modifying arrays<\/h2>\n<p><strong>What is an Array?<\/strong><\/p>\n<p>An array is a special variable that can hold multiple values at once, organized in an ordered collection.<br \/>\nEach value is called an element, and each has a numeric index starting from 0.<\/p>\n<p>By the end of this lesson, you&#8217;ll be able to create, modify, and query arrays using common methods. If you want to deepen your practice, explore the <a href=\"https:\/\/buhave.com\/courses\/java-script\/loops-and-iteration\/\" title=\"Loops and Iteration\">Loops and Iteration<\/a> lesson to see how loops work with arrays.<\/p>\n<h3>1. Creating Arrays<\/h3>\n<p><strong>Using Square Brackets<\/strong><\/p>\n<p style=\"text-align: center\"><em>let fruits = [&#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;];<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;]<\/em><\/p>\n<ul>\n<li>The most common and simple method.<\/li>\n<\/ul>\n<p><strong>Using the Array Constructor<\/strong><\/p>\n<p style=\"text-align: center\"><em>let numbers = new Array(1, 2, 3, 4);<\/em><br \/>\n<em>console.log(numbers); \/\/ [1, 2, 3, 4]<\/em><\/p>\n<p><strong>Creating Empty Arrays<\/strong><\/p>\n<p style=\"text-align: center\"><em>let emptyArray = [];<\/em><br \/>\n<em>let anotherEmpty = new Array();<\/em><\/p>\n<ul>\n<li>Useful when you plan to add items later.<\/li>\n<\/ul>\n<h3>2. Modifying Arrays<\/h3>\n<p><strong>Adding Elements<\/strong><\/p>\n<p>.push() \u2014 Add to End<\/p>\n<p style=\"text-align: center\"><em>fruits.push(&#8220;date&#8221;);<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;, &#8220;date&#8221;]<\/em><\/p>\n<p>.unshift() \u2014 Add to Start<\/p>\n<p style=\"text-align: center\"><em>fruits.unshift(&#8220;avocado&#8221;);<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;avocado&#8221;, &#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;, &#8220;date&#8221;]<\/em><\/p>\n<p><strong>Removing Elements<\/strong><\/p>\n<p>.pop() \u2014 Remove from End<\/p>\n<p style=\"text-align: center\"><em>fruits.pop();<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;avocado&#8221;, &#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;]<\/em><\/p>\n<p>.shift() \u2014 Remove from Start<\/p>\n<p style=\"text-align: center\"><em>fruits.shift();<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;]<\/em><\/p>\n<p><strong>Updating Elements<\/strong><\/p>\n<p>Access by index and reassign:<\/p>\n<p style=\"text-align: center\"><em>fruits[1] = &#8220;blueberry&#8221;;<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;blueberry&#8221;, &#8220;cherry&#8221;]<\/em><\/p>\n<p>Arrays are mutable \u2014 you can change them directly!<\/p>\n<p><strong>Inserting, Deleting, or Replacing with .splice()<\/strong><\/p>\n<p>.splice(startIndex, deleteCount, item1, item2, &#8230;)<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>fruits.splice(1, 1, &#8220;blackberry&#8221;, &#8220;kiwi&#8221;);<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;blackberry&#8221;, &#8220;kiwi&#8221;, &#8220;cherry&#8221;]<\/em><\/p>\n<ul>\n<li>Start at index 1.<\/li>\n<li>Remove 1 item.<\/li>\n<li>Insert &#8220;blackberry&#8221; and &#8220;kiwi&#8221; at that position.<\/li>\n<\/ul>\n<p><strong>Other Useful Array Methods<\/strong><\/p>\n<table class=\"array-methods\">\n<thead>\n<tr>\n<th>Method<\/th>\n<th>Purpose<\/th>\n<th>Example<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"method\">.length<\/td>\n<td class=\"purpose\">Get number of elements<\/td>\n<td><span class=\"example\">fruits.length<\/span><\/td>\n<\/tr>\n<tr>\n<td class=\"method\">.concat()<\/td>\n<td class=\"purpose\">Merge arrays<\/td>\n<td><span class=\"example\">array1.concat(array2)<\/span><\/td>\n<\/tr>\n<tr>\n<td class=\"method\">.slice()<\/td>\n<td class=\"purpose\">Copy part of an array<\/td>\n<td><span class=\"example\">fruits.slice(1, 3)<\/span><\/td>\n<\/tr>\n<tr>\n<td class=\"method\">.indexOf()<\/td>\n<td class=\"purpose\">Find position of an element<\/td>\n<td><span class=\"example\">fruits.indexOf(&#8220;apple&#8221;)<\/span><\/td>\n<\/tr>\n<tr>\n<td class=\"method\">.includes()<\/td>\n<td class=\"purpose\">Check if element exists<\/td>\n<td><span class=\"example\">fruits.includes(&#8220;banana&#8221;)<\/span><\/td>\n<\/tr>\n<tr>\n<td class=\"method\">.reverse()<\/td>\n<td class=\"purpose\">Reverse the array<\/td>\n<td><span class=\"example\">fruits.reverse()<\/span><\/td>\n<\/tr>\n<tr>\n<td class=\"method\">.sort()<\/td>\n<td class=\"purpose\">Sort array alphabetically or numerically<\/td>\n<td><span class=\"example\">fruits.sort()<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Quick Summary:<\/strong><\/p>\n<table class=\"array-table\">\n<thead>\n<tr>\n<th>Creating Arrays<\/th>\n<th>Modifying Arrays<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<div><span class=\"method\">[]<\/span> or <span class=\"method\">new Array()<\/span><\/div>\n<div class=\"example\">let colors = [&#8216;red&#8217;, &#8216;green&#8217;, &#8216;blue&#8217;];<\/div>\n<div class=\"example\">let numbers = new Array(1, 2, 3);<\/div>\n<\/td>\n<td>\n<div><span class=\"method\">.push()<\/span>,<br \/>\n<span class=\"method\">.pop()<\/span>,<br \/>\n<span class=\"method\">.shift()<\/span>,<br \/>\n<span class=\"method\">.unshift()<\/span>,<br \/>\n<span class=\"method\">.splice()<\/span><\/div>\n<div class=\"example\">fruits.push(&#8216;orange&#8217;); \/\/ adds to end<\/div>\n<div class=\"example\">fruits.pop(); \/\/ removes from end<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div class=\"feature\">Holds multiple values of any type<\/div>\n<div class=\"note\">Can contain strings, numbers, objects, even other arrays<\/div>\n<\/td>\n<td>\n<div class=\"feature\">Add, remove, and update elements easily<\/div>\n<div class=\"note\">Methods modify the original array (except slice)<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div class=\"feature\">Index starts from 0<\/div>\n<div class=\"example\">let first = colors[0]; \/\/ &#8216;red&#8217;<\/div>\n<\/td>\n<td>\n<div class=\"feature\">Use index to access or modify<\/div>\n<div class=\"example\">colors[1] = &#8216;yellow&#8217;; \/\/ modifies second item<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Would you also like a quick diagram showing how an array grows and shrinks as we add and remove elements?<\/p>\n<p>To see how arrays interact with the DOM and page elements, check the <a href=\"https:\/\/buhave.com\/courses\/java-script\/dom-manipulation\/\" title=\"DOM Manipulation\">DOM Manipulation<\/a> course.<\/p>\n<h2>Common array methods (push, pop, map, filter, etc.)<\/h2>\n<p>Arrays are powerful because they come with built-in methods that make manipulating data easy and efficient.<\/p>\n<h3>1. Push() \u2014 Add to End<\/h3>\n<p>Adds one or more elements to the end of an array.<\/p>\n<p style=\"text-align: center\"><em>let fruits = [&#8220;apple&#8221;, &#8220;banana&#8221;];<\/em><br \/>\n<em>fruits.push(&#8220;cherry&#8221;);<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;banana&#8221;, &#8220;cherry&#8221;]<\/em><\/p>\n<ul>\n<li>push() returns the new length of the array.<\/li>\n<\/ul>\n<h3>2. Pop() \u2014 Remove from End<\/h3>\n<p>Removes the last element from an array.<\/p>\n<p style=\"text-align: center\"><em>fruits.pop();<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;banana&#8221;]<\/em><\/p>\n<ul>\n<li>pop() returns the removed element.<\/li>\n<\/ul>\n<h3>3. Unshift() \u2014 Add to Start<\/h3>\n<p>Adds one or more elements to the beginning of an array.<\/p>\n<p style=\"text-align: center\"><em>fruits.unshift(&#8220;mango&#8221;);<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;mango&#8221;, &#8220;apple&#8221;, &#8220;banana&#8221;]<\/em><\/p>\n<h3>4. Shift() \u2014 Remove from Start<\/h3>\n<p>Removes the first element from an array.<\/p>\n<p style=\"text-align: center\"><em>fruits.shift();<\/em><br \/>\n<em>console.log(fruits); \/\/ [&#8220;apple&#8221;, &#8220;banana&#8221;]<\/em><\/p>\n<h3>5. Map() \u2014 Transform Each Element<\/h3>\n<p>Creates a new array by applying a function to each element of the array.<\/p>\n<p style=\"text-align: center\"><em>let numbers = [1, 2, 3];<\/em><br \/>\n<em>let squared = numbers.map(num =&gt; num * num);<\/em><br \/>\n<em>console.log(squared); \/\/ [1, 4, 9]<\/em><\/p>\n<p>Does not change the original array.<\/p>\n<h3>6. Filter() \u2014 Filter Elements<\/h3>\n<p>Creates a new array with elements that pass a test (return true).<\/p>\n<p style=\"text-align: center\"><em>let ages = [10, 20, 18, 25];<\/em><br \/>\n<em>let adults = ages.filter(age =&gt; age &gt;= 18);<\/em><br \/>\n<em>console.log(adults); \/\/ [20, 18, 25]<\/em><\/p>\n<h3>7. Reduce() \u2014 Reduce to Single Value<\/h3>\n<p>Applies a function against an accumulator and each element to reduce the array to a single value.<\/p>\n<p style=\"text-align: center\"><em>let total = [1, 2, 3, 4].reduce((sum, num) =&gt; sum + num, 0);<\/em><br \/>\n<em>console.log(total); \/\/ 10<\/em><\/p>\n<h3>8. Find() \u2014 Find First Match<\/h3>\n<p>Returns the first element that matches a condition.<\/p>\n<p style=\"text-align: center\"><em>let users = [{name: &#8220;Alice&#8221;}, {name: &#8220;Bob&#8221;}];<\/em><br \/>\n<em>let user = users.find(u =&gt; u.name === &#8220;Bob&#8221;);<\/em><br \/>\n<em>console.log(user); \/\/ {name: &#8220;Bob&#8221;}<\/em><\/p>\n<h3>9. FindIndex() \u2014 Find First Matching Index<\/h3>\n<p>Returns the index of the first element that matches the condition.<\/p>\n<p style=\"text-align: center\"><em>let numbers = [5, 12, 8, 130];<\/em><br \/>\n<em>let index = numbers.findIndex(num =&gt; num &gt; 10);<\/em><br \/>\n<em>console.log(index); \/\/ 1<\/em><\/p>\n<h3>10. Includes() \u2014 Check Existence<\/h3>\n<p>Checks if an array includes a certain element.<\/p>\n<p style=\"text-align: center\"><em>let colors = [&#8220;red&#8221;, &#8220;green&#8221;, &#8220;blue&#8221;];<\/em><br \/>\n<em>console.log(colors.includes(&#8220;green&#8221;)); \/\/ true<\/em><\/p>\n<h3>11. Sort() \u2014 Sort Elements<\/h3>\n<p>Sorts the elements in place.<\/p>\n<p style=\"text-align: center\"><em>let nums = [3, 1, 4, 1, 5];<\/em><br \/>\n<em>nums.sort();<\/em><br \/>\n<em>console.log(nums); \/\/ [1, 1, 3, 4, 5] (default sort treats values as strings!)<\/em><\/p>\n<p><strong>For numbers, use a compare function:<\/strong><\/p>\n<p style=\"text-align: center\"><em>nums.sort((a, b) =&gt; a &#8211; b);<\/em><\/p>\n<h3>12. Slice() \u2014 Copy Part of an Array<\/h3>\n<p>Returns a shallow copy of a portion of an array into a new array.<\/p>\n<p style=\"text-align: center\"><em>let arr = [&#8220;a&#8221;, &#8220;b&#8221;, &#8220;c&#8221;, &#8220;d&#8221;];<\/em><br \/>\n<em>let part = arr.slice(1, 3);<\/em><br \/>\n<em>console.log(part); \/\/ [&#8220;b&#8221;, &#8220;c&#8221;]<\/em><\/p>\n<p>Original array remains unchanged.<\/p>\n<h3>13. Splice() \u2014 Add\/Remove\/Replace Elements<\/h3>\n<p>Modifies the array by adding, removing, or replacing elements.<\/p>\n<p style=\"text-align: center\"><em>let arr = [&#8220;Jan&#8221;, &#8220;March&#8221;, &#8220;April&#8221;];<\/em><br \/>\n<em>arr.splice(1, 0, &#8220;Feb&#8221;);<\/em><br \/>\n<em>console.log(arr); \/\/ [&#8220;Jan&#8221;, &#8220;Feb&#8221;, &#8220;March&#8221;, &#8220;April&#8221;]<\/em><\/p>\n<p>Changes the original array.<\/p>\n<p><strong>Quick Summary Table:<\/strong><\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">\n<thead>\n<tr>\n<th>Method<\/th>\n<th>Purpose<\/th>\n<th>Mutates Array?<\/th>\n<th>Returns New Array?<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>push()<\/td>\n<td>Add at end<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>pop()<\/td>\n<td>Remove from end<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>shift()<\/td>\n<td>Remove from start<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>unshift()<\/td>\n<td>Add at start<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>map()<\/td>\n<td>Transform each item<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>filter()<\/td>\n<td>Select matching items<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>reduce()<\/td>\n<td>Reduce to single value<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>find()<\/td>\n<td>Find first matching element<\/td>\n<td>No<\/td>\n<td>(Single item)<\/td>\n<\/tr>\n<tr>\n<td>includes()<\/td>\n<td>Check if value exists<\/td>\n<td>No<\/td>\n<td>(true\/false)<\/td>\n<\/tr>\n<tr>\n<td>sort()<\/td>\n<td>Sort elements<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>slice()<\/td>\n<td>Copy a portion of array<\/td>\n<td>No<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>splice()<\/td>\n<td>Add\/remove\/replace elements<\/td>\n<td>Yes<\/td>\n<td>No (returns removed items)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-start=\"4916\" data-end=\"4930\"><strong>Bonus Tip<\/strong><\/p>\n<p class=\"\" data-start=\"4932\" data-end=\"4972\">You can chain many methods together:<\/p>\n<p style=\"text-align: center\" data-start=\"4932\" data-end=\"4972\"><em>let result = [1, 2, 3, 4, 5]<\/em><br \/>\n<em>.filter(n =&gt; n % 2 === 0)<\/em><br \/>\n<em>.map(n =&gt; n * n);<\/em><br \/>\n<em>console.log(result); \/\/ [4, 16]<\/em><\/p>\n<p data-start=\"4932\" data-end=\"4972\">Filter even numbers, then square them.<\/p>\n<h2 data-start=\"4932\" data-end=\"4972\">Object creation and manipulation<\/h2>\n<p><strong>What is an Object?<\/strong><\/p>\n<p>An 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<p>Objects allow you to group related data and behavior together.<\/p>\n<h3>1. Creating Objects<\/h3>\n<p><strong>Object Literal (Most Common Way)<\/strong><\/p>\n<p style=\"text-align: center\"><em>const person = {<\/em><br \/>\n<em>name: &#8220;Alice&#8221;,<\/em><br \/>\n<em>age: 25,<\/em><br \/>\n<em>isStudent: true<\/em><br \/>\n<em>};<\/em><\/p>\n<p>Simple and readable.<\/p>\n<p><strong>Using the new Object() Syntax<\/strong><\/p>\n<p style=\"text-align: center\"><em>const person = new Object();<\/em><br \/>\n<em>person.name = &#8220;Bob&#8221;;<\/em><br \/>\n<em>person.age = 30;<\/em><\/p>\n<p>Works, but less preferred than literals for most cases.<\/p>\n<p><strong>Using a Constructor Function<\/strong><\/p>\n<p style=\"text-align: center\"><em>function Person(name, age) {<\/em><br \/>\n<em>this.name = name;<\/em><br \/>\n<em>this.age = age;<\/em><br \/>\n<em>}<\/em><\/p>\n<p style=\"text-align: center\"><em>const person1 = new Person(&#8220;Charlie&#8221;, 28);<\/em><\/p>\n<p>Useful for creating multiple similar objects.<\/p>\n<p><strong>Using Classes (Modern ES6+)<\/strong><\/p>\n<p style=\"text-align: center\"><em>class Person {<\/em><br \/>\n<em>constructor(name, age) {<\/em><br \/>\n<em>this.name = name;<\/em><br \/>\n<em>this.age = age;<\/em><br \/>\n<em>}<\/em><br \/>\n<em>}<\/em><\/p>\n<p style=\"text-align: center\"><em>const person2 = new Person(&#8220;Daisy&#8221;, 22);<\/em><\/p>\n<p>Cleaner syntax for object &#8220;blueprints.<\/p>\n<p>For deeper coverage of ES6 classes and object-oriented patterns, see the <a href=\"https:\/\/buhave.com\/courses\/java-script\/advanced-javascript-concepts\/\" title=\"Advanced JavaScript Concepts\">Advanced JavaScript Concepts<\/a> course.<\/p>\n<h3>2. Accessing Object Properties<\/h3>\n<p><strong>Dot Notation<\/strong><\/p>\n<p style=\"text-align: center\"><em>console.log(person.name); \/\/ &#8220;Alice&#8221;<\/em><\/p>\n<p><strong>Bracket Notation<\/strong><\/p>\n<p style=\"text-align: center\"><em>console.log(person[&#8220;age&#8221;]); \/\/ 25<\/em><\/p>\n<p>Use b<a href=\"https:\/\/buhave.com\/courses\/java-script\/basics-and-syntax\/\" title=\"Basics and Syntax\">asics and Syntax<\/a> to understand how bracket notation interacts with dynamic property access and variables.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating and modifying arrays What is an Array? An array is a special variable that can hold multiple values at [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[13],"tags":[],"class_list":["post-556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java-script"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Arrays and Objects -<\/title>\n<meta name=\"description\" content=\"Arrays and Objects in JavaScript organize data: arrays store ordered lists, while objects store key-value pairs for structured information.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Arrays and Objects -\" \/>\n<meta property=\"og:description\" content=\"Arrays and Objects in JavaScript organize data: arrays store ordered lists, while objects store key-value pairs for structured information.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/\" \/>\n<meta property=\"og:site_name\" content=\"BUHAVE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BeYouHave\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/naveedsafdarawan\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T10:53:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-06T12:38:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Arrays-and-Objects.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Naveed Safdar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naveed Safdar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/\"},\"author\":{\"name\":\"Naveed Safdar\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\"},\"headline\":\"Arrays and Objects\",\"datePublished\":\"2025-05-19T10:53:07+00:00\",\"dateModified\":\"2026-06-06T12:38:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/\"},\"wordCount\":1143,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Arrays-and-Objects.webp\",\"articleSection\":[\"Java Script Course\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/\",\"name\":\"Arrays and Objects -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Arrays-and-Objects.webp\",\"datePublished\":\"2025-05-19T10:53:07+00:00\",\"dateModified\":\"2026-06-06T12:38:42+00:00\",\"description\":\"Arrays and Objects in JavaScript organize data: arrays store ordered lists, while objects store key-value pairs for structured information.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#primaryimage\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Arrays-and-Objects.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/Arrays-and-Objects.webp\",\"width\":1200,\"height\":628,\"caption\":\"Arrays and Objects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/java-script\\\/arrays-and-objects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Courses\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java Script Course\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/learn\\\/java-script\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Arrays and Objects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"name\":\"BUHAVE\",\"description\":\"Courses - Learn Online for Free\",\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/buhave.com\\\/courses\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\",\"name\":\"BUHAVE\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"width\":375,\"height\":75,\"caption\":\"BUHAVE\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BeYouHave\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/buhave\",\"https:\\\/\\\/www.youtube.com\\\/@buhave\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\",\"name\":\"Naveed Safdar\",\"description\":\"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedsafdar\\\/\",\"https:\\\/\\\/www.facebook.com\\\/naveedsafdarawan\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@naveedsafdar\"],\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/author\\\/naveed-safdar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Arrays and Objects -","description":"Arrays and Objects in JavaScript organize data: arrays store ordered lists, while objects store key-value pairs for structured information.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/","og_locale":"en_US","og_type":"article","og_title":"Arrays and Objects -","og_description":"Arrays and Objects in JavaScript organize data: arrays store ordered lists, while objects store key-value pairs for structured information.","og_url":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/","og_site_name":"BUHAVE","article_publisher":"https:\/\/www.facebook.com\/BeYouHave\/","article_author":"https:\/\/www.facebook.com\/naveedsafdarawan\/","article_published_time":"2025-05-19T10:53:07+00:00","article_modified_time":"2026-06-06T12:38:42+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Arrays-and-Objects.webp","type":"image\/webp"}],"author":"Naveed Safdar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Naveed Safdar","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#article","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/"},"author":{"name":"Naveed Safdar","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca"},"headline":"Arrays and Objects","datePublished":"2025-05-19T10:53:07+00:00","dateModified":"2026-06-06T12:38:42+00:00","mainEntityOfPage":{"@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/"},"wordCount":1143,"commentCount":0,"publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"image":{"@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Arrays-and-Objects.webp","articleSection":["Java Script Course"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/","url":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/","name":"Arrays and Objects -","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/#website"},"primaryImageOfPage":{"@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#primaryimage"},"image":{"@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Arrays-and-Objects.webp","datePublished":"2025-05-19T10:53:07+00:00","dateModified":"2026-06-06T12:38:42+00:00","description":"Arrays and Objects in JavaScript organize data: arrays store ordered lists, while objects store key-value pairs for structured information.","breadcrumb":{"@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#primaryimage","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Arrays-and-Objects.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/Arrays-and-Objects.webp","width":1200,"height":628,"caption":"Arrays and Objects"},{"@type":"BreadcrumbList","@id":"https:\/\/buhave.com\/courses\/java-script\/arrays-and-objects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Courses","item":"https:\/\/buhave.com\/courses\/"},{"@type":"ListItem","position":2,"name":"Java Script Course","item":"https:\/\/buhave.com\/courses\/learn\/java-script\/"},{"@type":"ListItem","position":3,"name":"Arrays and Objects"}]},{"@type":"WebSite","@id":"https:\/\/buhave.com\/courses\/#website","url":"https:\/\/buhave.com\/courses\/","name":"BUHAVE","description":"Courses - Learn Online for Free","publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buhave.com\/courses\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/buhave.com\/courses\/#organization","name":"BUHAVE","url":"https:\/\/buhave.com\/courses\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","width":375,"height":75,"caption":"BUHAVE"},"image":{"@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BeYouHave\/","https:\/\/www.linkedin.com\/company\/buhave","https:\/\/www.youtube.com\/@buhave"]},{"@type":"Person","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca","name":"Naveed Safdar","description":"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.","sameAs":["https:\/\/www.linkedin.com\/in\/naveedsafdar\/","https:\/\/www.facebook.com\/naveedsafdarawan\/","https:\/\/www.youtube.com\/@naveedsafdar"],"url":"https:\/\/buhave.com\/courses\/author\/naveed-safdar\/"}]}},"_links":{"self":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/comments?post=556"}],"version-history":[{"count":2,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/556\/revisions"}],"predecessor-version":[{"id":1139,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/556\/revisions\/1139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media\/558"}],"wp:attachment":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/tags?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}