questtolearnjavascript

[questtolearnjavascript]

Inheritance in Javascript (Mixin and Delegation)

Inheritance in Javascript sucks. The design pattern of classical inheritance are ugly and convoluted. The only inheritance I feel like you should do is prototype chaining. Which is limited to primitive that aren't reference (array and object are reference). Which leads to the question how do we solve the inheritance problem? If you read and study design patterns you should prefer composition over inheritance when ever possible. Inheritance is actually very unnatural and use with caution. So with that there are solutions: Mixins In order to understand the Mixin design pattern you have to understand delegation (w.r.t. .call() function). Here's some links: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call http://javascriptweblog.wordpress.com/2010/12/22/delegation-vs-inheritance-in-javascript/ From there (mixin): http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/ https://speakerdeck.com/anguscroll/how-we-learned-to-stop-worrying-and-love-javascript https://speakerdeck.com/anguscroll/the-why-and-how-of-mixins-in-flight

[questtolearnjavascript]

Prototype

So we know that a class will have certain properties and methods, but what keeps track of what a given class can or can't do? What a class has or doesn't have? That is the job of the prototype.

[questtolearnjavascript]

prototype/constructor pattern

function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = [“Shelby”, “Court”]; } Person.prototype = { constructor: Person, sayName : function () { alert(this.name); } }; var person1 = new Person(“Nicholas”, 29, “Software Engineer”); var person2 = new Person(“Greg”, 27, “Doctor”);

Note: Person.prototype have to be assigned to a function() and not object literal {} otherwise it severe inheritance.

[questtolearnjavascript]

week 1

http://www.reddit.com/r/learnjavascript/comments/1bx5uq/learning_js_properly_study_group_week_1/ http://www.reddit.com/r/learnjavascript/comments/1c53ad/learn_js_properly_study_group_how_is_the_first/

[questtolearnjavascript]

EX 6.1

function forEach(array, action) { for (var i = 0; i < array.length; i++) action(array[i]); } function reduce(combine, base, array) { forEach(array, function (element) { base = combine(base, element); }); return base; } function countZeroes(array) { function counter(total, element) { return total + (element === 0 ? 1 : 0); } return reduce(counter, 0, array); }

function reduce(combine, base, array) { forEach(array, function (element) { base = combine(base, element); }); return base; } -> function reduce(counter, 0, array) { forEach(array, function (element) { base = counter(base, element); }); return base; } -> function reduce( function counter(total, element) { return total + (element === 0 ? 1 : 0); }, 0, array) { forEach(array, function (element) { base = counter(base, element) { base + (element === 0 ? 1 : 0); } }); return base; } -> function reduce( function counter(total, element) { return total + (element === 0 ? 1 : 0); }, 0, array) { for (var i = 0; i < array.length; i++) base = base + (array[i] === 0 ? 1 : 0); return base; }

function counter(total, element) {

total is the accumulator. element is the iterator.

function reduce(combine, base, array) {

combine is the function to apply to each array element. base is the accumulator. array is the data we're reducing.

[questtolearnjavascript]

Reduce - (Functional chapter - breaking it down)

function reduce(combine, base, array) { forEach(array, function (element) { base = combine(base, element); }); return base; } function add(a, b) { return a + b; } function sum(numbers) { return reduce(add, 0, numbers); }

function forEach(array, action) { for (var i = 0; i < array.length; i++) action(array[i]); }

function add(a, b) { return a + b; } function sum(numbers) { return reduce(add, 0, numbers); } show(sum([1,2,3,4,5]));

sum([1,2,3,4,5]); -> reduce(add,0,[1,2,3,4,5]); -> reduce( function add(a, b) { return a + b; }, 0, [1,2,3,4,5]); -> reduce(combine, base, array) -> function reduce(add, 0, [1,2,3,4,5]) { forEach([1,2,3,4,5], function (element) { base = add(0, element); }); return base; } -> function reduce(add, 0, [1,2,3,4,5]) { for (var i = 0; i < [1,2,3,4,5].length; i++) function (array[i]) {base = add(0, array[i]);} return base; }

function add(a, b) { return a + b; } function reduce(combine, base, array) { for (var i = 0; i < array.length; i++) { base = add(base, array[i]); show(base); } return base; } reduce(add, 0, [1,2,3,4,5]); 1 3 6 10 15

base is an accumulator variable and it seems like the closure phenomenon between reduce and the add function that let it keeps the accumulated variable.

[questtolearnjavascript]

Pure Functions

"The defining properties of pure functions are that they always return the same value when given the same arguments, and never have side effects. They take some arguments, return a value based on these arguments, and do not monkey around with anything else." Pure functions have two very nice properties. They are easy to think about, and they are easy to re-use.

[questtolearnjavascript]

Expression vs Statement

Expression:

"A piece of code that produces a value is called an expression. Every value that is written directly (such as 22 or "psychoanalysis") is an expression. An expression between parentheses is also an expression. And a binary operator applied to two expressions, or a unary operator applied to one, is also an expression."

Statement:

"There exists a unit that is bigger than an expression. It is called a statement. A program is built as a list of statements. Most statements end with a semicolon (;). The simplest kind of statement is an expression with a semicolon after it. This is a program:"

1; !false;

[questtolearnjavascript]

Chapter 4 - ex. 4.2

Write a function range that takes one argument, a positive number, and returns an array containing all numbers from 0 up to and including the given number.

An empty array can be created by simply typing []. Also remember that adding properties to an object, and thus also to an array, can be done by assigning them a value with the = operator. The length property is automatically updated when elements are added.

My solution:

function range(var num) { var array = []; for (var i=0; i < num; ++i) { array[i] = i; } return array; }

Book solutions:

function range(upto) { var result = []; for (var i = 0; i <= upto; i++) result[i] = i; return result; } show(range(4));

Summary:

Close but I missed the = in the for loop. Damn.

[questtolearnjavascript]

Chapter 4 - ex. 4.1

The solution for the cat problem talks about a 'set' of names. A set is a collection of values in which no value may occur more than once. If names are strings, can you think of a way to use an object to represent a set of names? Show how a name can be added to this set, how one can be removed, and how you can check whether a name occurs in it. My pseudo code:

var catNames = {}; foreach (emails as email) { if (email.catname in catNames) continue; else catNames[catname] = true; } // remove is just a delete

Book Solution:

var set = {"Spot": true}; // Add "White Fang" to the set set["White Fang"] = true; // Remove "Spot" delete set["Spot"]; // See if "Asoka" is in the set show("Asoka" in set);

[questtolearnjavascript]

Chapter 4 - list of cats that are still alive after the last e-mail

“we write a program that gives us a list of cats that are still alive after the last e-mail.”

Start with a set of cat names that has only “Spot” in it.

Go over every e-mail in our archive, in chronological order.

Look for paragraphs that start with “born” or “died”.

Add the names from paragraphs that start with “born” to our set of names.

Remove the names from paragraphs that start with “died” from our set.

Pseudo Code

foreach (emails as email) { // #2 if (email.regex('^Spot')) { // #1 array.push(email); if (email.regex('born|died')) { #3 born_array.push(blah) #4 died_array.push(blah) #5 } } }

“Where taking the names from a paragraph goes like this:”

Find the colon in the paragraph.

Take the part after this colon.

Split this part into separate names by looking for commas.

Pseudo Code

function names (paragraph) { return paragraph.regex(':').splice(','); }

[questtolearnjavascript]

Chapter 4 - overview

two new types of values, arrays and objects & Solving simple problems.

[questtolearnjavascript]

Ex. 3.2

function greaterThan(gtNum) { return function(testNum) { if (testNum > gtNum) { return true; } else { return false; } } } var gtTest = greaterThan(5); print(gtTest(8)); var gtTest = greaterThan(5); print(gtTest(1));

Output: true false Book solution:

function greaterThan(x) { return function(y) { return y > x; }; } var greaterThanTen = greaterThan(10); show(greaterThanTen(9));

[questtolearnjavascript]

Bookmarked: stopped at Ex. 3.2

[questtolearnjavascript]

chapter3 - recursion tracing

http://eloquentjavascript.net/chapter3

function findSequence(goal) { function find(start, history) { if (start == goal) return history; else if (start > goal) return null; else return find(start + 5, "(" + history + " + 5)") || find(start * 3, "(" + history + " * 3)"); } return find(1, "1"); } print(findSequence(24));

answer: (((1 * 3) + 5) * 3) tracing findsequence(24): goal: 24 ----------------- [1] From: Start - find(1,"1") ----------------- start = 1 history = "1" find(1 + 5, "(" + "1" + " + 5)") || find(1 * 3, "(" + "1" + " * 3)") ----------------- [2] From: [1] - find(1 + 5, "(" + "1" + " + 5)") ----------------- start = 6 history = "(" + "1" + " + 5)" find(6 + 5, "(" + "(" + "1" + " + 5)" + " + 5)") || find(6 * 3, "(" + "(" + "1" + " + 5)" + " * 3)") ----------------- *[3] From: [1] - find(1 * 3, "(" + "1" + " * 3)") ----------------- start = 3 history = "(" + "1" + " * 3)" find(3 + 5, "(" + "(" + "1" + " * 3)" + " + 5)") || find(3 * 3, "(" + "(" + "1" + " * 3)" + " * 3)") ----------------- [4] From: [2] - find(6 + 5, "(" + "(" + "1" + " + 5)" + " + 5)") ----------------- start = 11 history = "(" + "(" + "1" + " + 5)" + " + 5)" find(11 + 5, "(" + "(" + "(" + "1" + " + 5)" + " + 5)" + " + 5)") || find(11 * 3, "(" + "(" + "(" + "1" + " + 5)" + " + 5)" + " * 3)") (33 > goal (24)) ----------------- [5] From: [2] - find(6 * 3, "(" + "(" + "1" + " + 5)" + " * 3)") ----------------- start = 18 history = "(" + "(" + "1" + " + 5)" + " * 3)" find(18 + 5, "(" + "(" + "(" + "1" + " + 5)" + " * 3)" + " + 5)") || find(18 * 3, "(" + "(" + "(" + "1" + " + 5)" + " * 3)" + " * 3)") (54 > goal (24)) ----------------- [6] From: [3] - find(3 + 5, "(" + "(" + "1" + " * 3)" + " + 5)") ----------------- start = 8 history = "(" + "(" + "1" + " * 3)" + " + 5)" find(8 + 5, "(" + "(" + "(" + "1" + " * 3)" + " + 5)" + " + 5)") || find(8 * 3, "(" + "(" + "(" + "1" + " * 3)" + " + 5)" + " * 3)") <----- 24! ----------------- [7] From: [6] - find(8 * 3, "(" + "(" + "(" + "1" + " * 3)" + " + 5)" + " * 3)") ----------------- start = 24 (start == goal) history = "(" + "(" + "(" + "1" + " * 3)" + " + 5)" + " * 3)" Answer: Return History: "(" + "(" + "(" + "1" + " * 3)" + " + 5)" + " * 3)" = (((1 * 3) + 5 ) * 3)