Live data from Hacker News

Algorithms and Data Structures Explained and Implemented in JavaScript

github.com

21–30 of 45 posts

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#22

I like it! Something I've been thinking about recently is using ES6 proxies to visualize algorithms like this. Lay out the arrays and objects as blocks on a canvas, and highlight the blocks as the algorithm reads / writes to the corresponding slots of the arrays / objects.

Hehe—I'm working on something very similar (video): http://symbolflux.com/projects/avd —check out the colored sorting algorithm toward the end of the video.

And I'm a good bit into the javascript client which even uses proxies :) https://github.com/westoncb/JS-Watcher

(Mostly I've been using a Java client which is much more advanced, but I had an idea to do a visualized sandbox for a 'code tutor' kind of app in javascript/Electron, so I started the js client.)

Edit: I should also point out that it's meant to easily hook up to any algorithm you write, so it's as much for debugging as instructional algorithm visualization.

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#23

Earlier quoted context omitted.

> How much algorithmic work do you other JS folks end up doing? I recently built a questionnaire/form editor/builder which relies heavily on tree structures. I ended up writing a lot of tree walking code. It was the first time I've ever needed to implement interview-like questions in an actual project. I make heavy use of functional programming in Javascript, which lends itself to really clean implementations of algo…

As someone new to JS I find vanilla JS tedious for FP, what library(ies) do you use to ease this?

I have to admit I’m far from a FP guru, very little experience with true functional languages like Haskell etc. For me it’s more a question of style and applying functional paradigms when possible, eg treating functions as first class citizens, making heavy use of .bind() and passing functions as arguments. I use ES6 via Babel and actually find it to be quite expressive and powerful when used correctly. I just try to keep my functions very small with tight separation of concerns. There are lots of libraries to make JS “more functional,” as the sibling comment alludes to, but I find vanilla JS (or at least ES6) already has many of the features necessary for functional programming, as long as you make the conscious choice to use it that way.

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#24

Had the same idea and got sad you got there faster. But then I looked at the code and realized you did it better than I would have done it so good job!

Me too! I wanted to refresh myself on implementations and expose the JS community to some stuff they may not have been exposed to... TypeScript is still fair game!

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#25
The documentation and code quality is all good.

The implementation choices leave some things to be desired. The Queue and Stack implementations are Linked Lists instead of array backed, the hash table is closed instead of (the only barely more complicated) open Robin hood hash table scheme, the union-find/disjoint-set implementation doesn't have path compression or rank unions.

Overall very good, but it could be Great (tm) with just a little bit of work.

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#26

Earlier quoted context omitted.

As someone new to JS I find vanilla JS tedious for FP, what library(ies) do you use to ease this?

I have to admit I’m far from a FP guru, very little experience with true functional languages like Haskell etc. For me it’s more a question of style and applying functional paradigms when possible, eg treating functions as first class citizens, making heavy use of .bind() and passing functions as arguments. I use ES6 via Babel and actually find it to be quite expressive and powerful when used correctly. I just try to…

It requires use of Babel, but you might find the function bind operator an interesting alternative to .bind().

https://babeljs.io/docs/plugins/transform-function-bind/

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#27
post #25

The documentation and code quality is all good. The implementation choices leave some things to be desired. The Queue and Stack implementations are Linked Lists instead of array backed, the hash table is closed instead of (the only barely more complicated) open Robin hood hash table scheme, the union-find/disjoint-set implementation doesn't have path compression or rank unions. Overall very good, but it could be Grea…

Wait are linked lists not better for first-in first-out data structures? I thought arrays were not preferred in those cases because shift/unshift are highly inefficient.

Am I wrong? I thought array-based queues resulted in O(n) queue/dequeue. Now for stacks, which are last-in first-out, it makes sense to use an array.

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#28
post #27
post #25

The documentation and code quality is all good. The implementation choices leave some things to be desired. The Queue and Stack implementations are Linked Lists instead of array backed, the hash table is closed instead of (the only barely more complicated) open Robin hood hash table scheme, the union-find/disjoint-set implementation doesn't have path compression or rank unions. Overall very good, but it could be Grea…

Wait are linked lists not better for first-in first-out data structures? I thought arrays were not preferred in those cases because shift/unshift are highly inefficient. Am I wrong? I thought array-based queues resulted in O(n) queue/dequeue. Now for stacks, which are last-in first-out, it makes sense to use an array.

You use an array with pointers to the front and back of the queue, essentially a circular buffer. You might need to resize, but that happens for any array backed structure and is one (or two) memcpys.

Re: Algorithms and Data Structures Explained and Implemented in JavaScript

#29
post #27
post #25

The documentation and code quality is all good. The implementation choices leave some things to be desired. The Queue and Stack implementations are Linked Lists instead of array backed, the hash table is closed instead of (the only barely more complicated) open Robin hood hash table scheme, the union-find/disjoint-set implementation doesn't have path compression or rank unions. Overall very good, but it could be Grea…

Wait are linked lists not better for first-in first-out data structures? I thought arrays were not preferred in those cases because shift/unshift are highly inefficient. Am I wrong? I thought array-based queues resulted in O(n) queue/dequeue. Now for stacks, which are last-in first-out, it makes sense to use an array.

> I thought array-based queues resulted in O(n) queue/dequeue.

Not necessarily. A circular buffer[1] can be used as a queue with O(1) queue/dequeue. C++ implementations (gcc?), IIRC, uses an interesting array-of-arrays approach; it also has O(1) queue/dequeue. I'm not sure why the array-of-arrays approach is better than a circular buffer, though.

Array based designs can result is less allocations, and maybe less overhead. For example, if you have a circular buffer with space for 16 items, it only needs to allocate space if you need more room, whereas a linked list queue would allocate for each and every item placed into it. Linked lists also require space for the pointer to the next link, for each link in the list. (And, if you keep them, back pointers, though these aren't necessary for just a queue.) Arrays might have some unused slack space, however.

[1]: https://en.wikipedia.org/wiki/Circular_buffer

Post reply on HN