ds-algo-study

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <meta name="Generator" content="Microsoft Word 15 (filtered)"> <title>Data Structures</title> <script async defer src="./copy-2-clip.js"></script> <script async defer src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="./prism.css"> <script async defer src="./prism.js"></script> <script async defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="./prism.css"> <script async defer src="./prism.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <style> a { color: black; overflow: clip; } li { border: 2px solid black !important; font-size: 16px; letter-spacing: 0px; font-weight: 700; line-height: 12px; text-decoration: none !important; text-transform: uppercase; background: #0178c2 !important; color: black !important; border: none; cursor: pointer; justify-content: center; padding: 40px 60px; height: 55px; text-align: center; white-space: normal; border-radius: 8px; min-width: 50em; padding: 1.4em 1.4em 0; box-shadow: 0 0 5px; margin: 1em; display: grid; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } code, pre { position: relative; } code, pre { display: block; padding: 20px; background: #f2f2f2; color: #555755; } span.command-copy { position: absolute; top: 10px; right: 10px; opacity: .6; font-size: 20px; color: #555755; } span.command-copy:hover { cursor: pointer; } </style> </head> <body class="lang-js"> <div class="WordSection1"> <p class="MsoTitle"><span style="font-size:48.0pt">Fundamental Data Structures In JavaScript</p> <p class="MsoNormal" style="line-height:normal"><span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">Data structures in JavaScript </p> <p></p> <p>Here is a website I created to practice data structures!</p> <p class="MsoNormal"><a href="https://amazing-mccarthy-aa9929.netlify.app/index.html" title="Data Structures And Algorithms Practice"></a></p> <p></p> <p class="MsoNormal" style="line-height:normal"><span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">Resources (article contentbelow):</p> <h2>Videos</h2> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"> <a href="https://amazing-mccarthy-aa9929.netlify.app/index.html"><span style="font-size:18.0pt;font-family:"JetBrains Mono Bold"">Here is a website I created to practice data structures!</a> </li> <li class="MsoNormal" style="line-height:normal"><a href="https://www.youtube.com/watch?v=0IAPZzGSbME&list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O&index=2&t=0s">Abdul Bari: YouTubeChannel for Algorithms</a></li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.youtube.com/watch?v=lxja8wBwN0k&list=PLKKfKV1b9e8ps6dD3QA5KFfHdiWj9cB1s">Data Structures and algorithms</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.youtube.com/playlist?list=PLmGElG-9wxc9Us6IK6Qy-KHlG_F3IS6Q9">Data Structures and algorithms Course</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.khanacademy.org/computing/computer-science/algorithms">Khan Academy</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.youtube.com/playlist?list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P">Data structures by mycodeschool</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.youtube.com/watch?v=HtSuA80QTyo&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb">MIT 6.006: Intro to Algorithms(2011)</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.youtube.com/watch?v=5_5oE5lgrhw&list=PLu0W_9lII9ahIappRPN0MCAgtOu3lQjQi">Data Structures and Algorithms by Codewithharry</a> </li> </ul> <h2>Books</h2> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"> <a href="https://edutechlearners.com/download/Introduction_to_algorithms-3rd%20Edition.pdf">Introduction to Algorithms</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="http://www.sso.sy/sites/default/files/competitive%20programming%203_1.pdf">Competitive Programming 3</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://cses.fi/book/book.pdf">Competitive Programmers Hand Book</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://github.com/Amchuz/My-Data-Structures-and-Algorithms-Resources/raw/master/Books/Data%20Structures%20and%20Algorithms%20-%20Narasimha%20Karumanchi.pdf">Data Structures and Algorithms Made Easy</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://github.com/Amchuz/My-Data-Structures-and-Algorithms-Resources/raw/master/Books/Learning%20Algorithms%20Through%20Programming%20and%20Puzzle%20Solving.pdf">Learning Algorithms</a> </li> </ul> <h2>Coding Practice</h2> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"> <a href="https://leetcode.com/">LeetCode</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.interviewbit.com/">InterviewBit</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://codility.com/">Codility</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.hackerrank.com/">HackerRank</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://projecteuler.net/">Project Euler</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://spoj.com/">Spoj</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://code.google.com/codejam/contests.html">Google Code Jam practice problems</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.hackerearth.com/">HackerEarth</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.topcoder.com/">Top Coder</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.codechef.com/">CodeChef</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.codewars.com/">Codewars</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://codesignal.com/">CodeSignal</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="http://codekata.com/">CodeKata</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.firecode.io/">Firecode</a> </li> </ul> <h2>Courses</h2> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"> <a href="https://academy.zerotomastery.io/p/master-the-coding-interview-faang-interview-prep">Master the Coding Interview</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://realpython.com/python-data-structures">Common Python Data Structures</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.geeksforgeeks.org/fork-cpp-course-structure">Fork CPP</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://codeforces.com/edu/course/2">EDU</a> . </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.udacity.com/course/c-for-programmers--ud210">C++ For Programmers</a> . </li> </ul> <h1>Guides</h1> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"> <a href="http://www.geeksforgeeks.org/">GeeksForGeeks — </a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="https://www.learneroo.com/subjects/8">Learneroo — Algorithms</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="http://www.topcoder.com/tc?d1=tutorials&d2=alg_index&module=Static">Top Coder tutorials</a> </li> <li class="MsoNormal" style="line-height:normal"> <a href="http://www.infoarena.ro/training-path">Infoarena training path</a> </li> </ul> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"><span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">The best-case complexity: when the data looks the best</li> <li class="MsoNormal" style="line-height:normal"><span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">The worst-case complexity: when the data looks the worst</li> <li class="MsoNormal" style="line-height:normal"><span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">The average-case complexity: when the data looks average</li> </ul> <hr> <hr> <h3>space</h3> <hr> <p class="MsoNormal" style="margin-bottom:5.0pt;line-height:normal">The space complexity represents the memory consumption of a data structure. As for most of the things in life, you can't have it all, so it is with the data structures. You will generally need to trade some time for space or the other way around.</p> <hr> <h3>time</h3> <hr> <p class="MsoNormal" style="margin-bottom:5.0pt;line-height:normal">The time complexity for a data structure is in general more diverse than its space complexity.</p> <hr> <h3>Several operations</h3> <hr> <p class="MsoNormal" style="margin-bottom:5.0pt;line-height:normal">In contrary to algorithms, when you look at the time complexity for data structures you need to express it for several operations that you can do with data structures. It can be adding elements, deleting elements, accessing an element or even searching for an element.</p> <hr> <h3>Dependent ondata</h3> <hr> <p class="MsoNormal" style="margin-bottom:5.0pt;line-height:normal">Something that data structure and algorithms have in common when talking about time complexity is that they are both dealing with data. When you deal with data you become dependent on them and as a result the time complexity is also dependent of the data that you received. To solve this problem we talk about 3 different time complexity.</p> <p class="MsoNormal" style="line-height:normal"><span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">Big Onotation</p> <p>The complexity is usually expressed with the Big O notation. The wikipedia page about this subject is pretty complex but you can find here a good summary of the different complexity for the most famous data structures and sorting algorithms.</p> <p class="MsoNormal" style="line-height:normal"><span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">The Array data structure</p> <p class="MsoNormal"><img border="0" width="438" height="180" id="Picture 13" src="Data-Structures-Update-Backup_files/image001.gif" alt="image001"></p> <p class="MsoNormal" style="line-height:normal"><span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">Definition</p> <p>An Array data structure, or simply an Array, is a data structure consisting of a collection of elements (values or variables), each identified by at least one array index or key. The simplest type of data structure is a linear array, also called one-dimensional array. From Wikipedia</p> <p>Arrays are among the oldest and most important data structures and are used by every program. They are also used to implement many other data structures.</p> <p class="MsoNormal" style="line-height:normal"><span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Complexity Average Access Search Insertion Deletion</p> <p>O(1) O(n) O(1) O(n)</p> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">class ArrayADT { constructor() { this.array = []; }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> add(data) { this.array.push(data); }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> remove(data) { this.array = this.array.filter((current) = current !== data); }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> search(data) { const foundIndex = this.array.indexOf(data); if (foundIndex === -1) { return foundIndex; }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> return null; }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> getAtIndex(index) { return this.array[index]; }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> length() { return this.array.length; }</code></pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript"> print() { console.log(this.array.join(" ")); } }</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">const array = new ArrayADT(); console.log("const array = new ArrayADT();: ", array); console.log("-------------------------------");</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">console.log("array.add(1): ", array.add(1)); array.add(3); array.add(4); console.log( "array.add(2);: ", array.add(2), "array.add(3);", array.add(3), "array.add(4); ", array.add(4) );</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">console.log("-------------------------------"); array.print(); console.log("-------------------------------");</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">console.log("search 3 gives index 2:", array.search(3)); console.log("-------------------------------");</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">console.log("getAtIndex 2 gives 3:", array.getAtIndex(2)); console.log("-------------------------------");</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">console.log("length is 4:", array.length()); console.log("-------------------------------");</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">array.remove(3); array.print(); console.log("-------------------------------");</code></pre> <span style="font-size:16.0pt;font-family:"Courier New"">array.add(5); array.add(5); array.print(); console.log("-------------------------------"); </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">array.remove(5); array.print(); console.log( "-------------------------------" ); /* ~ final : (master) node 01-array.js const array = new ArrayADT();: ArrayADT { array: [] } ------------------------------- array.add(1): undefined array.add(2);: undefined array.add(3); undefined array.add(4); undefined ------------------------------- 1 3 4 2 3 4 ------------------------------- search 3 gives index 2: null ------------------------------- getAtIndex 2 gives 3: 4 ------------------------------- length is 4: 6 ------------------------------- 1 4 2 4 ------------------------------- 1 4 2 4 5 5 ------------------------------- 1 4 2 4 ------------------------------- ~ final : (master) */</code></pre> <img border="0" width="624" height="207" id="Picture 12" src="Data-Structures-Update-Backup_files/image002.jpg" alt="image002"> <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">indexvalue0 … this is the first value, stored at zero position 1.<span style="font:7.0pt "Times New Roman""> The index of an array runs in sequence <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">2. This could be useful for storing data that are required to be ordered, such as rankings or queues <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">3. In JavaScript, array's value could be mixed; meaning value of each index could be of different data, be it String, Number or even Objects </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 1. Creating Arrays let firstArray = ["a","b","c"]; let secondArray = ["d","e","f"];</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 2. Access an Array Item console.log(firstArray[0]); // Results: "a"</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 3. Loop over an Array firstArray.forEach(function(item, index, array){ console.log(item, index); }); // Results: // a 0 // b 1 // c 2</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 4. Add new item to END of array secondArray.push('g'); console.log(secondArray); // Results: ["d","e","f", "g"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 5. Remove item from END of array secondArray.pop(); console.log(secondArray); // Results: ["d","e","f"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 6. Remove item from FRONT of array secondArray.shift(); console.log(secondArray); // Results: ["e","f"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 7. Add item to FRONT of array secondArray.unshift("d"); console.log(secondArray); // Results: ["d","e","f"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 8. Find INDEX of an item in array let position = secondArray.indexOf('f'); // Results: 2</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 9. Remove Item by Index Position secondArray.splice(position, 1); console.log(secondArray); // Note, the second argument, in this case "1", // represent the number of array elements to be removed // Results: ["d","e"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 10. Copy an Array let shallowCopy = secondArray.slice(); console.log(secondArray); console.log(shallowCopy); // Results: ShallowCopy === ["d","e"]</code></pre> <span style="font-size:16.0pt;font-family:"Courier New"">// 11. JavaScript properties that BEGIN with a digit MUST be accessed using bracket notation renderer.3d.setTexture(model, 'character.png'); // a syntax error renderer['3d'].setTexture(model, 'character.png'); // works properly </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 12. Combine two Arrays let thirdArray = firstArray.concat(secondArray); console.log(thirdArray); // ["a","b","c", "d", "e"];</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 13. Combine all Array elements into a string console.log(thirdArray.join()); // Results: a,b,c,d,e console.log(thirdArray.join('')); // Results: abcde console.log(thirdArray.join('-')); // Results: a-b-c-d-e</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 14. Reversing an Array (in place, i.e. destructive) console.log(thirdArray.reverse()); // ["e", "d", "c", "b", "a"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 15. sort let unsortedArray = ["Alphabet", "Zoo", "Products", "Computer Science", "Computer"]; console.log(unsortedArray.sort()); // Results: ["Alphabet", "Computer", "Computer Science", "Products", "Zoo" ]</code></pre> <span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">2. Objects <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Think of objects as a logical grouping of a bunch of properties. <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Properties could be some variable that it's storing or some methods that it's using. <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">I also visualize an object as a table. <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">The main difference is that object's "index" need not be numbers and is not necessarily sequenced. <img border="0" width="624" height="94" id="Picture 11" src="Data-Structures-Update-Backup_files/image003.jpg" alt="image003"> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 16. Creating an Object</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">let newObj = { name: "I'm an object", values: [1,10,11,20], others: '', "1property": 'example of property name starting with digit'</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">};</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 17. Figure out what keys/properties are in an object console.log(Object.keys(newObj)); // Results: [ 'name', 'values', 'others', '1property' ]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 18. Show all values stored in the object console.log(Object.values(newObj));</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// Results: // [ 'I\'m an object', // [ 1, 10, 11, 20 ], // '', // 'example of property name starting with digit' ]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 19. Show all key and values of the object for (let [key, value] of Object.entries(newObj)) { console.log(`${key}: ${value}`); } // Results: // name: I'm an object // values: 1,10,11,20 // others: // 1property: example of property name starting with digit</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 20. Accessing Object's Properties // Two different ways to access properties, both produce same results console.log(newObj.name); console.log(newObj["name"]);</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// But if the property name starts with a digit, // we CANNOT use dot notation console.log(newObj["1property"]);</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 21. Adding a Method to an Object newObj.helloWorld = function(){ console.log("Hello World from inside an object!"); }</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 22. Invoking an Object's Method newObj.helloWorld();</code></pre> <span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">The Hash Table <img border="0" width="509" height="408" id="Picture 10" src="Data-Structures-Update-Backup_files/image004.gif" alt="image004"><img border="0" width="624" height="468" id="Picture 9" src="Data-Structures-Update-Backup_files/image005.gif" alt="image005"> </pre> <hr> <pre> </pre> <h3>Definition</h3> <pre> </pre> <hr> <pre> <span >A Hash Table (Hash Map) is a data structure used to implement an associative array, a structure that can map keys to values. A Hash Table uses a hash function to compute an index into an array of buckets or slots, from which the desired value can be found. From Wikipedia <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Hash Tables are considered the more efficient data structure for lookup and for this reason, they are widely used. <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Complexity Average Access Search Insertion Deletion </pre> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"><span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">O(1) O(1) O(1)</li> </ul> <pre> <span >The code <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Note, here I am storing another object for every hash in my Hash Table. </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">class HashTable { constructor( size ) { this.values = {}; this.numberOfValues = 0; this.size = size; } add( key, value ) { let hash = this.calculateHash( key ); if ( !this.values.hasOwnProperty( hash ) ) { this.values[ hash ] = {}; } if ( !this.values[ hash ].hasOwnProperty( key ) ) { this.numberOfValues++; } this.values[ hash ][ key ] = value; } remove( key ) { let hash = this.calculateHash( key ); if ( this.values.hasOwnProperty( hash ) && this.values[ hash ].hasOwnProperty( key ) ) { delete this.values[ hash ][ key ]; this.numberOfValues--; } } calculateHash( key ) { return key.toString().length % this.size; } search( key ) { let hash = this.calculateHash( key ); if ( this.values.hasOwnProperty( hash ) && this.values[ hash ].hasOwnProperty( key ) ) { return this.values[ hash ][ key ]; } else { return null; } } length() { return this.numberOfValues; } print() { let string = ""; for ( let value in this.values ) { for ( let key in this.values[ value ] ) { string += this.values[ value ][ key ] + " "; } } console.log( string.trim() ); } } let hashTable = new HashTable( 3 ); hashTable.add( "first", 1 ); hashTable.add( "second", 2 ); hashTable.add( "third", 3 ); hashTable.add( "fourth", 4 ); hashTable.add( "fifth", 5 ); hashTable.print(); // = 2 4 1 3 5 console.log( "length gives 5:", hashTable.length() ); // = 5 console.log( "search second gives 2:", hashTable.search( "second" ) ); // = 2 hashTable.remove( "fourth" ); hashTable.remove( "first" ); hashTable.print(); // = 2 3 5 console.log( "length gives 3:", hashTable.length() ); // = 3 /* ~ js-files : (master) node hash.js 2 4 1 3 5 length gives 5: 5 search second gives 2: 2 2 3 5 length gives 3: 3 */</code></pre> <span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">The Set <span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">Sets <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Sets are pretty much what it sounds like. It's the same intuition as Set in Mathematics. I visualize Sets as Venn Diagrams. </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 23. Creating a new Set let newSet = new Set();</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 24. Adding new elements to a set newSet.add(1); // Set[1] newSet.add("text") // Set[1, "text"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 25. Check if element is in set newSet.has(1); // true</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 24. Check size of set console.log(newSet.size) // Results: 2</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 26. Delete element from set newSet.delete(1) // Set["text"]</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 27. Set Operations: isSuperSet function isSuperset(set, subset) { for (let elem of subset) { if (!set.has(elem)) { return false; } } return true; } // 28. Set Operations: union function union(setA, setB) { let _union = new Set(setA); for (let elem of setB) { _union.add(elem); } return _union; }</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// 29. Set Operations: intersection function intersection(setA, setB) { let _intersection = new Set(); for (let elem of setB) { if (setA.has(elem)) { _intersection.add(elem); } } return _intersection; } // 30. Set Operations: symmetricDifference function symmetricDifference(setA, setB) { let _difference = new Set(setA); for (let elem of setB) { if (_difference.has(elem)) { _difference.delete(elem); } else { _difference.add(elem); } } return _difference; } // 31. Set Operations: difference function difference(setA, setB) { let _difference = new Set(setA); for (let elem of setB) { _difference.delete(elem); } return _difference; }</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">// Examples let setA = new Set([1, 2, 3, 4]); let setB = new Set([2, 3]); let setC = new Set([3, 4, 5, 6]);</code></pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">console.log(isSuperset(setA, setB)); // = true console.log(union(setA, setC)); // = Set [1, 2, 3, 4, 5, 6] console.log(intersection(setA, setC)); // = Set [3, 4] console.log(symmetricDifference(setA, setC)); // = Set [1, 2, 5, 6] console.log(difference(setA, setC)); // = Set [1, 2]</code></pre> <img border="0" width="290" height="243" id="Picture 8" src="Data-Structures-Update-Backup_files/image006.jpg" alt="image006"> </pre> <hr> <pre> </pre> <h3>Definition</h3> <pre> </pre> <hr> <pre> <span >A Set is an abstract data type that can store certain values, without any particular order, and no repeated values. It is a computer implementation of the mathematical concept of a finite Set. From Wikipedia <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">The Set data structure is usually used to test whether elements belong to set of values. Rather then only containing elements, Sets are more used to perform operations on multiple values at once with methods such as union, intersect, etc… <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Complexity Average Access Search Insertion Deletion </pre> <ul type="disc"> <li class="MsoNormal" style="line-height:normal"><span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">O(n) O(n) O(n)</li> </ul> <pre> <span >The code </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="js" class="data-line line-numbers data-user data-host data-prompt data-output language-javascript" data-prismjs-copy="Copy !" data-download-link=""> <code class="language-javascript">function Set() { this.values = []; this.numberOfValues = 0; } Set.prototype.add = function(value) { if(!~this.values.indexOf(value)) { this.values.push(value); this.numberOfValues++; } }; Set.prototype.remove = function(value) { let index = this.values.indexOf(value); if(~index) { this.values.splice(index, 1); this.numberOfValues--; } }; Set.prototype.contains = function(value) { return this.values.indexOf(value) !== -1; }; Set.prototype.union = function(set) { let newSet = new Set(); set.values.forEach(function(value) { newSet.add(value); }); this.values.forEach(function(value) { newSet.add(value); }); return newSet; }; Set.prototype.intersect = function(set) { let newSet = new Set(); this.values.forEach(function(value) { if(set.contains(value)) { newSet.add(value); } }); return newSet; }; Set.prototype.difference = function(set) { let newSet = new Set(); this.values.forEach(function(value) { if(!set.contains(value)) { newSet.add(value); } }); return newSet; }; Set.prototype.isSubset = function(set) { return set.values.every(function(value) { return this.contains(value); }, this); }; Set.prototype.length = function() { return this.numberOfValues; }; Set.prototype.print = function() { console.log(this.values.join(' ')); }; let set = new Set(); set.add(1); set.add(2); set.add(3); set.add(4); set.print(); // = 1 2 3 4 set.remove(3); set.print(); // = 1 2 4 console.log('contains 4 is true:', set.contains(4)); // = true console.log('contains 3 is false:', set.contains(3)); // = false console.log('---'); let set1 = new Set(); set1.add(1); set1.add(2); let set2 = new Set(); set2.add(2); set2.add(3); let set3 = set2.union(set1); set3.print(); // = 1 2 3 let set4 = set2.intersect(set1); set4.print(); // = 2 let set5 = set.difference(set3); // 1 2 4 diff 1 2 3 set5.print(); // = 4 let set6 = set3.difference(set); // 1 2 3 diff 1 2 4 set6.print(); // = 3 console.log('set1 subset of set is true:', set.isSubset(set1)); // = true console.log('set2 subset of set is false:', set.isSubset(set2)); // = false console.log('set1 length gives 2:', set1.length()); // = 2 console.log('set3 length gives 3:', set3.length()); // = 3</code></pre> <span style="font-size:13.5pt; font-family:"JetBrains Mono Bold"">The Singly Linked List <img border="0" width="624" height="468" id="Picture 7" src="Data-Structures-Update-Backup_files/image007.gif" alt="image007"> </pre> <hr> <pre> </pre> <h3>Definition</h3> <pre> </pre> <hr> <pre> <span >A Singly Linked List is a linear collection of data elements, called nodes pointing to the next node by means of pointer. It is a data structure consisting of a group of nodes which together represent a sequence. Under the simplest form, each node is composed of data and a reference (in other words, a link) to the next node in the sequence. <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Linked Lists are among the simplest and most common data structures because it allows for efficient insertion or removal of elements from any position in the sequence. <span style="font-size:14.0pt; font-family:"JetBrains Mono Bold"">Complexity Average Access Search Insertion Deletion O(n) O(n) O(1) O(1) <span >The code </pre> <div class="MsoNormal" align="center" style="margin-bottom:0in;text-align:center; line-height:normal"> <hr size="2" width="100%" align="center"> </div> <pre> </pre> <pre data-filter-output="(out)" data-role="codeBlock" data-info="j