(public).sospep.subjects ~ view article ~ REVIEW-learning-to-love-javascript

<h1 style="text-align: center;">REVIEW - learning to love javascript</h1>
<p style="text-align: center;">&nbsp;</p>
<ol>
<li><strong>] about this<strong>[63:26]</strong>&nbsp;video presentation by Alex Russell</strong></li>
<ol>
<li>] given by <a href="person?id=190" target="_blank">Alex Russell</a>, Alex works @google chrome team, &amp; represents google @ tc39, standards committee for js</li>
</ol>
<li><strong>] contents presentation - learning to love javascript(js) -&nbsp;</strong></li>
<ol>
<li>] where are we now</li>
<li>] how to get a different future for js</li>
<li>] how these things relate to one another</li>
</ol>
<li><strong>] js is a functional, dynamic language</strong></li>
<ol>
<li>] supports closures, like schema,&nbsp;</li>
</ol>
<li><strong>] js history &nbsp;</strong></li>
<ol>
<li>] 1995 netscape 2 - mocha / livescript</li>
<li>] 1996&nbsp;</li>
<li>] 1997 js standard</li>
<li>] 1999 ecmascript v3 - pretty much the same version that we use today,</li>
<li>] js has gone everywhere, every browser</li>
<li>] competing on performance &nbsp;</li>
<li>] todays runtimes and performance are vastly different than in the past, even the recent past&nbsp;</li>
<li>] the web is the platform</li>
</ol>
<li><strong>] js is misunderstood</strong></li>
<ol>
<li>] no type system, no type testing (unless you add it in)</li>
<li>] there are 'types' ( number, object, array, &nbsp;)</li>
<li>] js runs top to bottom - no thread system no way to branch off, browsers have implemented WA with Browser setTimeOut, setInterval() but its not a language feature ] interpreter and runtime both read it and interpret it in the same way, top to bottom</li>
<li>] everything is an object</li>
</ol>
<li><strong>] almost everything is 'muteable'&nbsp;</strong></li>
<ol>
<li>] we can change our objects</li>
<li>] there are some exemptions, very small, narrow, &nbsp;but can be powerful</li>
</ol>
<li><strong>] closure&nbsp;</strong></li>
<ol>
<li>] the way to do private variables ( data hiding) in js</li>
<li>] js inverts the relationship between 'classes' and 'functions</li>
<li>] FUNCTIONAL OOP = behaviour that carries data VS&nbsp;</li>
<li>] CLASSICAL OOP = data that carries behaviour</li>
<li>12:00] privates, - encloses its lexical scope, holds on vars, way of passing var around,&nbsp;</li>
<li>]&nbsp;</li>
<li>] first class functions - participants in the Obj model system, participants&nbsp;in the storage system</li>
<li><span style="background-color: #ffff99;">] fundamental concept that underpins a lot of the patterns we build upon</span></li>
<li>] work together with other 'functonal' ideas -</li>
<li>]<strong><span style="font-weight: normal;">&nbsp;ex ARRAY prototype - has ] filter,]map,]reduce, ] foreach methods&nbsp;</span></strong></li>
<li><strong><span style="font-weight: normal;">] so&nbsp;</span></strong>instead of external iterator you have an internal iterator -&nbsp;</li>
<li><span style="background-color: #ffff99;">] creating a stack of stuff you would like to do (in terms of behaviour) instead of ...</span></li>
<li>] passing the same data structures around and around&nbsp;</li>
<li>] pass in arguements to functions,&nbsp;</li>
<li>] <span style="background-color: #ffff99;">express your programs intent in the form of nested functions that are going to unwind to some result ...</span></li>
<li>] NOT linear functions that is going to have the same data structures passed into them over and over again ..</li>
</ol>
<li><strong>] defining a functional language</strong></li>
<ol>
<li>] see below&nbsp;</li>
</ol>
<li><strong>] the only way to create a 'scope'&nbsp;is to invoke a function</strong></li>
<ol>
<li>] defining &nbsp;</li>
<li>] scopes are really smart, they hold onto the variables that have been defined above them</li>
<li>]&nbsp;</li>
<li>] tradittional lang constructs - for, while, switch, ... &nbsp;- dont create scopes</li>
<li>] behaviour that has hidden storage to pass data around, maintain state</li>
<li>]</li>
</ol>
<li><strong>] prototypes</strong></li>
<ol>
<li>] 1 link chain delegation to root object</li>
</ol>
<li><strong>] first class Functions</strong></li>
<ol>
<li>] behaviour that carries data VERSUS data that carries behaviour (tradditional OOP programming)</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=seX7jYI96GE#t=900" target="_blank">15:00</a>] everything being an object</strong></li>
<ol>
<li>]</li>
</ol>
<li><strong>[] all objects act like a map</strong></li>
<ol>
<li>] so if you want a map, take an object</li>
<li>] arrays do the same thing</li>
<li>] NOT a linear bag of memory, you access with an index, like in many other languages</li>
<li>] arrays are just objects</li>
<li>] length property is the only magical part about it - affects visibility of property's</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=seX7jYI96GE#t=1050" target="_blank">17:30</a>] not many core concepts, if you understand them, you will understand js</strong></li>
<ol>
<li><strong>/ muteable objects</strong> - properties of an object can be added or removed at run time</li>
<li><strong>/ closures</strong> - behaviour that carries data&nbsp;</li>
<li><strong>/ everything being an object -</strong>&nbsp;</li>
<li><strong>/ objects act like maps -</strong>&nbsp;</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=seX7jYI96GE#t=1140" target="_blank">19:00</a>] closures - the other side of classes&nbsp;</strong></li>
<ol>
<li>classes are state with behaviour - example&nbsp;</li>
<li>closures are functions with state &nbsp;- example</li>
<li>- you dont create classes that are "state with behaviour", you create "behavioiur" that holds on to the state that it needs, you pass that behaviour around</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=seX7jYI96GE#t=1342" target="_blank">22:22</a>] prototypal inheritance&nbsp;</strong></li>
<ol>
<li>] example (es5) Object.Create()&nbsp;</li>
<li>] will look at the object that you create ...</li>
<li><strong><em>] incredibly powerful -</em></strong> you can create brand new 'behaviour' at runtime, compose things on the next line that didnt exist before</li>
<li>] can change the behaviour of other objects in the system based on what they are delegating to ..</li>
</ol>
<li><strong>[<a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=seX7jYI96GE#t=1560" target="_blank">26:00</a>]&nbsp;understanding 'this.' is&nbsp;really important!</strong></li>
<ol>
<li>x]- because you dont have classes that wire up the inheiritance heirarchy,&nbsp;</li>
<li>] because were always delegating at run time, &nbsp;</li>
<ol>
<li>] every "." operator, does the dynamic lookup on the local object , example this.name</li>
<li>] looks at its delegate, which looks at its delegate, ...</li>
</ol>
<li><span style="background-color: #ffff99;">] this === &nbsp;"whatever "scope i'm" in, execute the "next lookup" against the "local" object"</span></li>
<li>] the this keyword in any function isnt pointing at some fixed object , ADD CODE EXAMPLE # &nbsp;</li>
<li>] it is "permiscous", it points at whatever object my function is being called through, call their own data</li>
<li>] nice little syntactic out, whenever i lookup a property, which happens to be a function, and i call it,&nbsp;</li>
<ol>
<li>the dot operator, for method calls says,&nbsp;</li>
<li>dont just return it, evaluate it directly,&nbsp;</li>
<li>use the .call property of the function thats returned and call it within the scope of&nbsp;</li>
</ol>
<li>] in order to 'wire it up' &nbsp;</li>
<li>- use the .call property of the function object thats returned and call it in the scope of the object thats on the lh side , see CODE EXAMPLE #</li>
<li>- i know its a little bit may tricky -</li>
<li>- in order to wire this behaviour up correctly so that it sort of does what you expect in other languages&nbsp;</li>
<li>- we rely on the function being first class</li>
<li>- i can "call" "any function" in the scope of "any other object" assign and call it through the object</li>
<li>- use the this keyw</li>
<li>-ability to create&nbsp;</li>
</ol>
<li><strong>[28:10] we can recreate things like 'classes'&nbsp;</strong></li>
<ol>
<li>] mix ins for instance level composition</li>
</ol>
<li><strong>[31:50] extending the native js objects&nbsp;</strong></li>
<ol>
<li>] mutability + prototypes - extend the stuff that is deffered to in the system</li>
</ol>
<li>[] &nbsp;</li>
</ol>
<div><hr /></div>
<div><ol>
<li><strong>what makes something a functional programming language?</strong></li>
<ol>
<li>] can it have 'side effects'?</li>
<li>] does it support 'macro languages' or hygenic macros</li>
<li>]&nbsp;</li>
<li>instead of p</li>
<li>]&nbsp;</li>
</ol>
<li>] it has closures, first class functions&nbsp;</li>
<ol>
<li>]&nbsp;</li>
</ol></ol></div>
<div>
<div>ex CODE ==&nbsp;</div>
<div>obj.method() === obj["method"].call(obj);</div>
</div>
<div>
<div><strong>Function</strong></div>
<div>- PROPS arity, caller, constructor, length, name&nbsp;</div>
<div>- METHS apply, bind, call, isGenerator, toSource, toString</div>
<div>[call ]</div>
<div>- method of the function object,&nbsp;</div>
<div>[apply ]</div>
<div>- method of the function object, applies to arrary</div>
<div>this</div>
<div><strong>EXAMPLE - 1 - this js</strong></div>
<div>var person = new Person("john","doe");</div>
<div>console.log(this.first, this.last);&nbsp;</div>
<div>// returns john doe</div>
<div><strong>EXAMPLE - 2 - this jquery&nbsp;</strong></div>
<div>button.click</div>
<div>this refers to button&nbsp;</div>
<div><strong>EXAMPLE - 3&nbsp;</strong></div>
<div>this is not assigned a value until an object invokes the function where this is defined. Let&rsquo;s call the function where this is defined the &ldquo;this Function.&rdquo;</div>
<div>&nbsp;Even though it appears this refers to the object where it is defined, it is not until an object invokes the this Function that this is actually assigned a value. And the value it is assigned is based exclusively on the object that invokes the this Function.&nbsp;</div>
<div>this has the value of the invoking object in most circumstances.&nbsp;</div>
<div>EXAMPLE The use of this in the global scope</div>
<div>&nbsp;</div>
<div>window.showFullName()</div>
<div>VS</div>
<div>person.showFullName()</div>
<div>] When this is most misunderstood and becomes tricky</div>
<div>The this keyword is most misunderstood when ] we borrow a method that uses this, ] when we assign a method that uses this to a variable, ] when a function that uses this is passed as a callback function, and ] when this is used inside a closure&mdash;an inner function. We will look at each scenario and the solutions for maintaining the proper value of this in each example.</div>
</div>

~ view article ~ Chapter] ch-028-reference FROM [ Book] language-javascript IN [ libraries] technology-developer-www