websites
static // dynamic
Static
Dynamic
Static
- Delivered to the user exactly as stored.
- Displays the same information from all contexts.
- Used for simple sites.
Dynamic
- Contents may change dynamically while the page is running on client's browser.
- User input may sometimes determine the content on the webpage.
- Used by e-shops, internet forums, etc.
Blogs
?
Blogger
Wordpress
?
<!DOCTYPE html>
<html>
...
</html>Parsing engines
!
---
layout: default
---
<div class="home">
<h1 class="page-heading">Posts</h1>
<ul class="post-list">
{% for post in site.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }} // {{ post.categories }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
<p class="excerpt">{{ post.excerpt }}</p>
</h2>
</li>
{% endfor %}
</ul>
</div>Jekyll
not blogging software
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>dancmj</title>
<meta name="description" content="A dev blog about my projects, ideas and whereabouts.">
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://dancmj.net/">
<link rel="stylesheet" href="/css/codeTheme.css" type="text/css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58503726-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="site-header">
<div class="wrapper">
<a class="site-title" href="/">dancmj</a>
<nav class="site-nav">
<a href="#" class="menu-icon">
<svg viewBox="0 0 18 15">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</a>
<div class="trigger">
<a class="page-link" href="/about/">About</a>
<a class="page-link" href="/games/">Games</a>
</div>
</nav>
</div>
</header>
<div class="page-content">
<div class="wrapper">
<div class="home">
<h1 class="page-heading">Posts</h1>
<ul class="post-list">
<li>
<span class="post-meta">Jan 30, 2015 // graph_analysis</span>
<h2>
<a class="post-link" href="/graph_analysis/2015/01/30/network-analysis_bfs.html">Graph Theory: Breadth-first search</a>
<p class="excerpt">My implementation of the BFS algorithm.</p>
</h2>
</li>
<li>
<span class="post-meta">Jan 18, 2015 // graph_analysis</span>
<h2>
<a class="post-link" href="/graph_analysis/2015/01/18/network-analysis_implementation.html">Graph Theory: Javascript Implementation</a>
<p class="excerpt">My take on implementing a graph.</p>
</h2>
</li>
<li>
<span class="post-meta">Jan 12, 2015 // blog</span>
<h2>
<a class="post-link" href="/blog/2015/01/12/new-year.html">New Year, New Stuff!</a>
<p class="excerpt">Another Year.</p>
</h2>
</li>
<li>
<span class="post-meta">Nov 28, 2014 // blog</span>
<h2>
<a class="post-link" href="/blog/2014/11/28/nov-post.html">No post November</a>
<p class="excerpt">I'm preparing some big updates!</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 30, 2014 // javascript</span>
<h2>
<a class="post-link" href="/javascript/2014/10/30/js-prot.html">Array.prototype</a>
<p class="excerpt">Implementations of each, where & any for arrays in Javascript.</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 29, 2014 // blog</span>
<h2>
<a class="post-link" href="/blog/2014/10/29/gamedev-update.html">I'm a game designer.</a>
<p class="excerpt">Brand new books & goals.</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 17, 2014 // project_euler</span>
<h2>
<a class="post-link" href="/project_euler/2014/10/17/euler1.html">Math is fun!</a>
<p class="excerpt">Some project Euler problems I did a while ago.</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 13, 2014 // phaser</span>
<h2>
<a class="post-link" href="/phaser/2014/10/13/grimghosts1.html">Grim Versus Ghosts</a>
<p class="excerpt">New phaser game!</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 10, 2014 // blog</span>
<h2>
<a class="post-link" href="/blog/2014/10/10/relic.html">Relic</a>
<p class="excerpt">So I got new books.</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 2, 2014 // blog</span>
<h2>
<a class="post-link" href="/blog/2014/10/02/world-1.html">World -1</a>
<p class="excerpt">..and now I'll be teaching my classmates how to make games. Sweet.</p>
</h2>
</li>
<li>
<span class="post-meta">Oct 1, 2014 // phaser</span>
<h2>
<a class="post-link" href="/phaser/2014/10/01/sphaser-game-pt2.html">Make some noise Frank!</a>
<p class="excerpt">Part deux of the Flappy Bird Clone.</p>
</h2>
</li>
<li>
<span class="post-meta">Sep 29, 2014 // phaser</span>
<h2>
<a class="post-link" href="/phaser/2014/09/29/sphaser-game.html">Simple phaser game.</a>
<p class="excerpt">Flappy bird, anyone?</p>
</h2>
</li>
<li>
<span class="post-meta">Sep 29, 2014 // blog</span>
<h2>
<a class="post-link" href="/blog/2014/09/29/first-post.html">Hi! My name is Dan.</a>
<p class="excerpt">Lets see how this works.</p>
</h2>
</li>
</ul>
<!-- <p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p> -->
</div>
</div>
</div>
<footer class="site-footer">
<div class="wrapper">
<h2 class="footer-heading">dancmj</h2>
<div class="footer-col-wrapper">
<div class="footer-col footer-col-1">
<ul class="contact-list">
<li>Feedback, comments, suggestions? Send me an email to:</li>
<li><a href="mailto:daniel.c82@gmail.com">daniel.c82@gmail.com</a></li>
</ul>
</div>
<div class="footer-col footer-col-2">
<ul class="social-media-list">
<li>
<a href="https://github.com/dancmj">
<span class="icon icon--github">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
</svg>
</span>
<span class="username">dancmj</span>
</a>
</li>
<li>
<a href="https://twitter.com/dan_cmj">
<span class="icon icon--twitter">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
</svg>
</span>
<span class="username">dan_cmj</span>
</a>
</li>
</ul>
</div>
<div class="footer-col footer-col-3">
<p class="text">A dev blog about my projects, ideas and whereabouts.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>
Nope!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>dancmj // Array.prototype</title>
<meta name="description" content="A dev blog about my projects, ideas and whereabouts.
">
<link rel="stylesheet" href="/css/main.css">
<link rel="canonical" href="http://dancmj.net/javascript/2014/10/30/js-prot.html">
<link rel="stylesheet" href="/css/codeTheme.css" type="text/css">
<script src="/assets/js/rainbow-custom.min.js"></script>
<script src="/assets/js/language/generic.js"></script>
<script src="/assets/js/language/javascript.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58503726-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="site-header">
<div class="wrapper">
<a class="site-title" href="/">dancmj</a>
<nav class="site-nav">
<a href="#" class="menu-icon">
<svg viewBox="0 0 18 15">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</a>
<div class="trigger">
<a class="page-link" href="/about/">About</a>
<a class="page-link" href="/games/">Games</a>
</div>
</nav>
</div>
</header>
<div class="page-content">
<div class="wrapper">
<div class="post">
<header class="post-header">
<h1 class="post-title">Array.prototype</h1>
<p class="post-meta">Oct 30, 2014</p>
</header>
<article class="post-content">
<p>Almost every friday there is this thing called Nearsoft Academy at <a href="http://nearsoft.com/">Nearsoft Inc.</a> where they teach and explain pretty neat stuff about diverse areas in programming.<br>About two sessions ago they explained how the each, where & any methods work for arrays and asked us to make our own implementations and explain them. I haven't given myself the opportunity to write about it or post it here but now is the time, here I go:</p>
<ul>
<li><h1>each()</h1>
<p>Let's say we have some JSON data and we want to extract stuff from it.</p>
<pre><code data-language="javascript">//Here is our example JSON data, some people's names along with
//their age and stuff they like.
var humans = [
{name: 'Alan', age: 41, likes: ['Computer Science', 'Netflix', 'Artificial Intelligence'] },
{name: 'Randy', age: 32, likes: ['Cryptography', 'Netflix', 'Reading'] },
{name: 'Bobby', age: 25, likes: ['Paintball', 'Coding'] },
{name: 'Lawrence', age: 30, likes: ['Music', 'Netflix', 'Coding'] },
{name: 'James', age: 22, likes: ['Videogames', 'Dungeons & Dragons', 'Reading', 'Reddit'] }
];</code></pre>
<p>So if we wanted to, let's say, print each of the objects contained in humans, including the likes of each of the objects with a special message, we can do this:</p>
<pre><code data-language="javascript">//We want to easily iterate through all of that information.
humans.each(function(element,i){
console.log(i+1 + ". " + element.name + " is " + element.age + " years old and likes " + element.likes + ".");
});
/* Output: //////
1. Alan is 41 years old and likes Computer Science,Netflix,Artificial Intelligence.
2. Randy is 32 years old and likes Cryptography,Netflix,Reading.
3. Bobby is 25 years old and likes Paintball,Coding.
4. Lawrence is 30 years old and likes Music,Netflix,Coding.
5. James is 22 years old and likes Videogames,Dungeons & Dragons,Reading,Reddit.
*/</code></pre>
<p>Neat huh? So we are sending a function as a parameter. Well it isn't magic but it is pretty tricky, here we'll check out the .each() function:</p>
<pre><code data-language="javascript">Array.prototype.each = function (callback) {
for (var i=0; i<this.length; i++) {
callback.call(this[i], this[i], i);
}
};</code></pre>
<p>I'll try and explain as best as I can.<br> We can see that we are sending an <a href="http://en.wikibooks.org/wiki/JavaScript/Anonymous_Functions">anonymous function</a> that receives two parameters (named 'element' & 'i') as a parameter to the .each() function.<br> Once inside the .each() function, our anonymous function that we sent as a parameter is going to be referenced as the variable 'callback'.<br> Next, we do a cycle for each element on 'this' (the <code id="single">.each()</code> function was called by the <code id="single">humans[]</code> array, so 'this' will be a reference to the <code id="single">humans[]</code> array) and once the cycle starts we use the <code id="single">.call()</code> function on our 'callback' which receives (in this case) three parameters.</p>
<p>Alright so, <code id="single">callback.call()</code> will call the anonymous function we have stored in the 'callback' variable with the two parameters we needed, in our case we needed 'element' and 'i' plus one extra parameter (the first one) which will be a reference to the object that will be actually calling the 'callback' function. <br> So on <code id="single">callback.call(this[i], this[i], i);</code> the first parameter is the object that will be calling the 'callback' variable, the second parameter is the first parameter of the 'callback' function and so on, the n<sup>th</sup> parameter of a callback-style variable is the n-1<sup>th</sup> parameter of the function that was sent as a parameter.</p>
</li>
<li><h1>where()</h1>
<p>Using the same JSON data let's say we only want information about people who are older than 29 years. It can be quite simple.</p>
<pre><code data-language="javascript">//We easily iterate through all of that information
//but now we only want people older than 29.
humans.where(function(human){
return human.age > 29;
}).each(function(element,i){
console.log(i+1 + ". " + element.name + " is " + element.age + " years old.");
});
/* Output: //////
1. Alan is 41 years old.
2. Randy is 32 years old.
3. Lawrence is 30 years old.
*/</code></pre>
<p>Basically, we're following the same steps as before but now the <code id="single">.each()</code> function will be called once for each element from the <code id="single">humans[]</code> array whose age is above 29. Now here is the <code id="single">.where()</code> function.</p>
<pre><code data-language="javascript">Array.prototype.where = function (callback) {
var arr = [];
for (var i=0; i<this.length; i++) {
if (callback.call(this[i], this[i])) {
arr.push(this[i]);
}
}
return arr;
}</code></pre>
<p>The <code id="single">.where()</code> function receives an anonymous function as a parameter. There is a cycle that will push <code id="single">this[i]</code> to the auxuliary array 'arr' only if the element <code id="single">this[i]</code> passes the test implemented by the provided 'callback' function; In this case the test is if <code id="single">human.age > 29</code>.</p>
<p>Since the <code id="single">.where()</code> function returns an array, we can immideatly call and chain the <code id="single">.each()</code> function and iterate through each element that the <code id="single">.where()</code> function returned.</p>
</li>
<li> <h1>any()</h1>
<p>Let's finish with the <code id="single">.any()</code> function. From the 5 people we have on our giant database, we'd like to send an email to any of those who like Netflix. We could try and use the where function, but we'd have to use it twice, like this:</p>
<pre><code data-language="javascript">humans.where(function(human){ //Kind of confusing way.
return human.likes.where( //Here we're calling the .where()
function(like){ //function twice.
return like == "Netflix";
}).length!=0;
}).each(function(element,i){
console.log(i+1 + ". " + element.name + " likes " + element.likes + ".");
});
humans.where(function(human){ //Easy way.
return human.likes.any("Netflix");
}).each(function(element,i){
console.log(i+1 + ". " + element.name + " likes " + element.likes + ".");
});
/*Both method's outputs: //////
1. Alan likes Computer Science,Netflix,Artificial Intelligence.
2. Randy likes Cryptography,Netflix,Reading.
3. Lawrence likes Music,Netflix,Coding.
*/</code></pre>
<p>The code above works the same for both ways. <br>The first way is kind of confusing, first you do a regular <code id="single">.where()</code> to find a certain characteristic of an element in <code id="single">humans[]</code>, the characteristic we're looking for is that one of the elements in the <code id="single">likes[]</code> element of <code id="single">humans[]</code> is equals to Netflix, so we have to call the <code id="single">.where()</code> function on <code id="single">human.likes[]</code> and that way we can check if that human likes Netflix. This doesn't seem as complicated but remember we're iterating through a bidimensional array because of the nested <code id="single">.where()</code> functions.<br>Here is the code for the <code id="single">.any()</code> function.</p>
<pre><code data-language="javascript">Array.prototype.any=function (fun){
for (var i=0; i < this.length; i++){
if( (typeof(fun)=='function' && fun.call(this,this[i])) || fun==this[i]){
return true;
}
}
return false;
};
</code></pre>
<p>Starting, we can see this time that instead of a function, the function is receiving the string that we'd like to find on the <code id="single">likes[]</code> element of each human. Pretty much the <code id="single">.any()</code> function works like this: "If ANY element of the array I'm checking is equals to the object I got as a parameter, return True". </p>
<p>So we receive the string as the 'fun' parameter, then we'll go in a cycle for the length of the array. Then we'll check if our fun variable is a function and then we'll call it to check if the test is passed.<br> If it is not a function, it'll just skip the <code id="single">fun.call()</code> part and we'll return True if the parameter we received this time is equals to the the element of 'this' we're currenly on.<br> Else, if none of the elements on 'this' (the Array) contain the 'fun' variable, we'll just return False and it will be skipped on the <code id="single">.where()</code> function's if.</p>
</li>
</ul>
<p>And TA-DAH! That's all I should've done weeks ago. If you spot any errors or mistakes, don't hesitate to contact me!</p>
<p>A song for this post! <a href="https://www.youtube.com/watch?v=eTn9Nbax1IU"> Breeze by Bulb</a>.</p>
</article>
</div>
</div>
</div>
<footer class="site-footer">
<div class="wrapper">
<h2 class="footer-heading">dancmj</h2>
<div class="footer-col-wrapper">
<div class="footer-col footer-col-1">
<ul class="contact-list">
<li>Feedback, comments, suggestions? Send me an email to:</li>
<li><a href="mailto:daniel.c82@gmail.com">daniel.c82@gmail.com</a></li>
</ul>
</div>
<div class="footer-col footer-col-2">
<ul class="social-media-list">
<li>
<a href="https://github.com/dancmj">
<span class="icon icon--github">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
</svg>
</span>
<span class="username">dancmj</span>
</a>
</li>
<li>
<a href="https://twitter.com/dan_cmj">
<span class="icon icon--twitter">
<svg viewBox="0 0 16 16">
<path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
</svg>
</span>
<span class="username">dan_cmj</span>
</a>
</li>
</ul>
</div>
<div class="footer-col footer-col-3">
<p class="text">A dev blog about my projects, ideas and whereabouts.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>
post.html
---
layout: default
---
<div class="home">
<h1 class="page-heading">Posts</h1>
<ul class="post-list">
{% for post in site.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }} // {{ post.categories }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
<p class="excerpt">{{ post.excerpt }}</p>
</h2>
</li>
{% endfor %}
</ul>
</div>Yay!
index.html
---
layout: post
title: "Array.prototype"
date: 2014-10-30 3:14:15AM
excerpt: "Implementations of each, where & any for arrays in Javascript."
categories: javascript
codeType: javascript
---
<p>Almost every friday there is this thing called Nearsoft Academy at <a href="http://nearsoft.com/">Nearsoft Inc.</a> where they teach and explain pretty neat stuff about diverse areas in programming.<br>About two sessions ago they explained how the each, where & any methods work for arrays and asked us to make our own implementations and explain them. I haven't given myself the opportunity to write about it or post it here but now is the time, here I go:</p>
<ul>
<li><h1>each()</h1>
<p>Let's say we have some JSON data and we want to extract stuff from it.</p>
<pre><code data-language="javascript">//Here is our example JSON data, some people's names along with
//their age and stuff they like.
var humans = [
{name: 'Alan', age: 41, likes: ['Computer Science', 'Netflix', 'Artificial Intelligence'] },
{name: 'Randy', age: 32, likes: ['Cryptography', 'Netflix', 'Reading'] },
{name: 'Bobby', age: 25, likes: ['Paintball', 'Coding'] },
{name: 'Lawrence', age: 30, likes: ['Music', 'Netflix', 'Coding'] },
{name: 'James', age: 22, likes: ['Videogames', 'Dungeons & Dragons', 'Reading', 'Reddit'] }
];</code></pre>
<p>So if we wanted to, let's say, print each of the objects contained in humans, including the likes of each of the objects with a special message, we can do this:</p>
<pre><code data-language="javascript">//We want to easily iterate through all of that information.
humans.each(function(element,i){
console.log(i+1 + ". " + element.name + " is " + element.age + " years old and likes " + element.likes + ".");
});
/* Output: //////
1. Alan is 41 years old and likes Computer Science,Netflix,Artificial Intelligence.
2. Randy is 32 years old and likes Cryptography,Netflix,Reading.
3. Bobby is 25 years old and likes Paintball,Coding.
4. Lawrence is 30 years old and likes Music,Netflix,Coding.
5. James is 22 years old and likes Videogames,Dungeons & Dragons,Reading,Reddit.
*/</code></pre>
<p>Neat huh? So we are sending a function as a parameter. Well it isn't magic but it is pretty tricky, here we'll check out the .each() function:</p>
<pre><code data-language="javascript">Array.prototype.each = function (callback) {
for (var i=0; i<this.length; i++) {
callback.call(this[i], this[i], i);
}
};</code></pre>
<p>I'll try and explain as best as I can.<br> We can see that we are sending an <a href="http://en.wikibooks.org/wiki/JavaScript/Anonymous_Functions">anonymous function</a> that receives two parameters (named 'element' & 'i') as a parameter to the .each() function.<br> Once inside the .each() function, our anonymous function that we sent as a parameter is going to be referenced as the variable 'callback'.<br> Next, we do a cycle for each element on 'this' (the <code id="single">.each()</code> function was called by the <code id="single">humans[]</code> array, so 'this' will be a reference to the <code id="single">humans[]</code> array) and once the cycle starts we use the <code id="single">.call()</code> function on our 'callback' which receives (in this case) three parameters.</p>
<p>Alright so, <code id="single">callback.call()</code> will call the anonymous function we have stored in the 'callback' variable with the two parameters we needed, in our case we needed 'element' and 'i' plus one extra parameter (the first one) which will be a reference to the object that will be actually calling the 'callback' function. <br> So on <code id="single">callback.call(this[i], this[i], i);</code> the first parameter is the object that will be calling the 'callback' variable, the second parameter is the first parameter of the 'callback' function and so on, the n<sup>th</sup> parameter of a callback-style variable is the n-1<sup>th</sup> parameter of the function that was sent as a parameter.</p>
</li>
<li><h1>where()</h1>
<p>Using the same JSON data let's say we only want information about people who are older than 29 years. It can be quite simple.</p>
<pre><code data-language="javascript">//We easily iterate through all of that information
//but now we only want people older than 29.
humans.where(function(human){
return human.age > 29;
}).each(function(element,i){
console.log(i+1 + ". " + element.name + " is " + element.age + " years old.");
});
/* Output: //////
1. Alan is 41 years old.
2. Randy is 32 years old.
3. Lawrence is 30 years old.
*/</code></pre>
<p>Basically, we're following the same steps as before but now the <code id="single">.each()</code> function will be called once for each element from the <code id="single">humans[]</code> array whose age is above 29. Now here is the <code id="single">.where()</code> function.</p>
<pre><code data-language="javascript">Array.prototype.where = function (callback) {
var arr = [];
for (var i=0; i<this.length; i++) {
if (callback.call(this[i], this[i])) {
arr.push(this[i]);
}
}
return arr;
}</code></pre>
<p>The <code id="single">.where()</code> function receives an anonymous function as a parameter. There is a cycle that will push <code id="single">this[i]</code> to the auxuliary array 'arr' only if the element <code id="single">this[i]</code> passes the test implemented by the provided 'callback' function; In this case the test is if <code id="single">human.age > 29</code>.</p>
<p>Since the <code id="single">.where()</code> function returns an array, we can immideatly call and chain the <code id="single">.each()</code> function and iterate through each element that the <code id="single">.where()</code> function returned.</p>
</li>
<li> <h1>any()</h1>
<p>Let's finish with the <code id="single">.any()</code> function. From the 5 people we have on our giant database, we'd like to send an email to any of those who like Netflix. We could try and use the where function, but we'd have to use it twice, like this:</p>
<pre><code data-language="javascript">humans.where(function(human){ //Kind of confusing way.
return human.likes.where( //Here we're calling the .where()
function(like){ //function twice.
return like == "Netflix";
}).length!=0;
}).each(function(element,i){
console.log(i+1 + ". " + element.name + " likes " + element.likes + ".");
});
humans.where(function(human){ //Easy way.
return human.likes.any("Netflix");
}).each(function(element,i){
console.log(i+1 + ". " + element.name + " likes " + element.likes + ".");
});
/*Both method's outputs: //////
1. Alan likes Computer Science,Netflix,Artificial Intelligence.
2. Randy likes Cryptography,Netflix,Reading.
3. Lawrence likes Music,Netflix,Coding.
*/</code></pre>
<p>The code above works the same for both ways. <br>The first way is kind of confusing, first you do a regular <code id="single">.where()</code> to find a certain characteristic of an element in <code id="single">humans[]</code>, the characteristic we're looking for is that one of the elements in the <code id="single">likes[]</code> element of <code id="single">humans[]</code> is equals to Netflix, so we have to call the <code id="single">.where()</code> function on <code id="single">human.likes[]</code> and that way we can check if that human likes Netflix. This doesn't seem as complicated but remember we're iterating through a bidimensional array because of the nested <code id="single">.where()</code> functions.<br>Here is the code for the <code id="single">.any()</code> function.</p>
<pre><code data-language="javascript">Array.prototype.any=function (fun){
for (var i=0; i < this.length; i++){
if( (typeof(fun)=='function' && fun.call(this,this[i])) || fun==this[i]){
return true;
}
}
return false;
};
</code></pre>
<p>Starting, we can see this time that instead of a function, the function is receiving the string that we'd like to find on the <code id="single">likes[]</code> element of each human. Pretty much the <code id="single">.any()</code> function works like this: "If ANY element of the array I'm checking is equals to the object I got as a parameter, return True". </p>
<p>So we receive the string as the 'fun' parameter, then we'll go in a cycle for the length of the array. Then we'll check if our fun variable is a function and then we'll call it to check if the test is passed.<br> If it is not a function, it'll just skip the <code id="single">fun.call()</code> part and we'll return True if the parameter we received this time is equals to the the element of 'this' we're currenly on.<br> Else, if none of the elements on 'this' (the Array) contain the 'fun' variable, we'll just return False and it will be skipped on the <code id="single">.where()</code> function's if.</p>
</li>
</ul>
<p>And TA-DAH! That's all I should've done weeks ago. If you spot any errors or mistakes, don't hesitate to contact me!</p>
<p>A song for this post! <a href="https://www.youtube.com/watch?v=eTn9Nbax1IU"> Breeze by Bulb</a>.</p>post.html
Ta-Dah!
staticBlogs
By Daniel Contreras
staticBlogs
What is it?
- 457
