turingschool-examples / intermission-assignments

33 stars 218 forks source link

Speaking JavaScript #46

Closed biglovisa closed 8 years ago

biglovisa commented 8 years ago

Discuss Speaking JavaScript, especially following chapters here:

Chapter 3: The Nature of JavaScript Chapter 15: Functions Chapter 16: Variables: Scopes, Environments, and Closures Chapter 17: Objects and Inheritance

amcrawford commented 8 years ago

Definitely helpful stuff! Overall, I feel like I learn a bit better through practical work but it's really valuable to get some of the background here!

Ch. 3: I've approached a lot of the exercises so far by imagining a Ruby method and trying to create that with JS but this has helped to emphasize that the languages do work differently and, while there are a lot of similarities as between any programming language, some challenges have to be approached differently.

Ch. 15: I feel like I have a pretty good grasp of functions at this point! Hoisting makes sense since methods within a class can be accessed the same way but it's important to remember that it will not necessarily work if a function is created as a var (e.g. var f = function(){}) because only declarations are hoisted, not assignments made to them.

Ch. 16: Variables seem pretty clear-cut; there are some "gotchas" but scope and assignment seem to work a lot like Ruby.

Ch. 17: I think I have a pretty good idea about how prototypes work with objects but may need to revisit this chapter as we begin to approach more complex problems.

jillmd501 commented 8 years ago

Very techy, but good overview of a lot of JS. Personally, I find JS to be a little 'janky' in some syntax, which only makes me want to master it more!

Chapter 3: The main purpose of this chapter is to show how much JS inherits from other languages and syntaxes. Java, AWK, Self, HyperTalk, Scheme, and Perl are create the framework for JS. This chapter also talks about a few hard and fast rules - silent fails (THE WORST), dynamic syntax, and is part of the web platform.

Chapter 15: A few notes from this chapter: There are three different types of functions - nonmethod function (calling directly, normal function), constructor (invoking a function using 'new'), and method (storing a function in an object). Parameters and arguments are pretty similar! Arguments are just the actual data pieces versus the description. Three are three ways to define a function - function expressions (returns an object), function declaration (similar, but it is a statement), and function constructor (evaluates code in strings). Function declaration is better than function expression because it can be hoisted and have a name. When calling a function (or method) in a programming language, you must map the actual parameters (specified by the caller) to the formal parameters (of a function definition).

Chapter 16: There are two ways to look at a program statically or dynamically (actually running the program). I have a feeling scoping might trip me up at some point, but overall makes a fair amount of sense. An IIFE is immediately invoked, requires a trailing semi colon, and must be an expression. Avoid creating global variables! The data structure that provides that storage space is called an environment in JavaScript.

Chapter 17: This chapter is very tech heavy. A lot of really important operators, definitions, and rules that I need to become acquainted with. It seems as if JS has a lot more rules than ruby when it comes to objects. I will need to check this out again soon when I have a more complex knowledge of JS.

adamki commented 8 years ago

Chapter 3: Mildly interesting. This chapter is a nice resource guide/reference guide. Lots covered and a great starting point before jumping in to JS.

Chapter 15: More interesting and a fun read. Learned about Function Declaration VS function Expression. Something that has eluded me for a while. Key points here are the differences in hoisting when a function is used declaratively OR expressively. In short: Declared functions are implicitly hoisted to top of their respective scope. Meanwhile, a var that is expressively declared is MORE unpredictable since it only hoists the Variable and not the return value.

I also learned that every JS function has call(), apply(), and bind(). I did NOT know that these were directly related to this and only used when using JS in a OOP paradigm. Pretty cool, but still a bit grey to me.

I also learned that JS is pretty confusing with params/missing params. In summary, JS Arity is full of gotchas, and therefore, work-arounds are provided. A good reference guide though.

Lastly, it seems like good habit to try and clarify how you pass params back and forth by eliminating undefined params and understanding how truthy/falsey values work and even providing extra cautious failsafes like simulating named params(passing JS Obj).

Chapter 16: Pretty basic. Javascript uses Functional Scoping instead of Block Scoping. Javascript also hoists Variables, but not the assigned values. They exist as undefined.

Javascript provides a work around for the instance where a variable will persist in an if/else block. Since JS is functionally scoped, this can be problematic. The chapter introduces immedately invoked function epressions(IIFE's) which simply create an exclusive func scope in select blocks.

Some notes on IIFE's:

The chapter concludes with Closures. Not sure if I fully understand how to use Closures. I have tried to study them numerous times and would love some instruction on what/how to use them. My thoughts on closures.

Closures are functions. nothing more. 'Closure' is referring to the scope to which that function is attached. A Closure requires at least one nested function and is referring to the occurrence when the inner function can access the outer functions scope/params/vars(even after the outer function has fully executed). It also seems that a closure.

JS closures can therefore lead to unpredictable scopes/vars. The chapter explains how to cope with this by using IIFE's

Chapter 17: This chapter was awesome! Here's my take.

Javascript allows for Objects to be instantiated, accompanied by props(attributes), function(methods), and getters/setters! Very cool! Im not sure when this is written, but it definetely seems to lead up to ES6 like JS.

Prototypal inheritance is nice. Seems more powerful for sharing data between Objects. The chapter really laid on a TON of ways to determine where props are defined and how to all sorts of stuff like overwrite, declare, inherit etc. Personally, I won't remember half of them, but it was really cool to see how OOP Paradigms work in Js.

A ton of knowldge in this chapter. Will need to re-visit as there was just too much reading and not enough coding.

acareaga commented 8 years ago

SpeakingJS is a great resource that I plan to reference as I progress through M4. Below are a few thoughts from chapters covering the nature of the language and it’s functions, variables, and objects.

Chapter 3 was a gentle introduction to the basic differences found in JavaScript. I especially liked "the elegant parts help you work around the quirks... they allow you to implement block scoping, modules, and inheritance APIs—all within the language.”

Chapter 15 opened my eyes to the many uses of functions in JS. Functions have three main roles: normal ( id(‘hello’) ), constructor ( new Date() ), and method ( obj.method() ). They can also be declared or combined with an expression (var id = function…). Functions can be called with any number of parameters, independent of what was initially defined. This flexibility allows you to pass additional parameters as an array but can also expose an undefined element.

You can check if a parameter is missing by comparing the optional arguments to an undefined or false value. Or by checking for a minimum length on the parameters. To alter the value of a variable from a function, the variable must be wrapped (array, hash, etc). It is important to understand param structure when using functions and methods. Named parameters via object literals can clarify function and method use.

Chapter 16 discussed variables in regard to scopes, environments, and closures. Scope is where you can call the variable (local vs. global, inner vs outer). Variables in JS are function scoped, meaning only functions can change a variable's scope. It is important to assign a variable otherwise it becomes a global. Similar to other languages, it’s best to avoid global variables (and global objects) when possible.

The data structure that stores variable names and values is called an environment. Related, a closure is a function and that function's scope. Closures are examples of environments that survive after the program has executed a function and its variable(s). Because of closures the scope of a variable might be maintained longer than anticipated, creating unanticipated results when using loops. This is often experienced using event handlers with loops on the DOM.

Chapter 17 on objects and inheritance was extremely valuable. This chapter helped relate my understanding of object and class structure in other languages to JavaScript. It's important to remember that all functions are also objects. Object oriented programming in JS can be split into two levels of "difficulty", basic (single objects and prototype chains) and advanced (constructors as factories and subclassing).

It is important to note that you can create objects without the need of a class. Also, all objects are like hashes (maps of keys to values) but also involve inheritance and other added layers of abstractions. The dot operator (ex. aaron.age) allows you to get/set/delete properties and call methods on objects. The bracket operator “[]” allows reference to properties through expressions ( [“person” + “name”] ).

Interestingly, every object can have another object as its prototype (creating a chain). This allows the first object to inherit properties from its prototype object. Setting a property only affects the first object where getting a property looks at all objects in the chain. You can protect an object by preventing extensions, and sealing or freezing its properties. I think of this similarly to setting permissions on a file.

A constructor function allows you create multiple objects with similar properties and is invoked using the “new” operator. JS constructors are dynamic, allowing you to return a direct instance of the object or whatever quality you desire from that object. But using an object as a map can cause problems. It’s better to use a library like StringMap.js when arbitrary keys exist.

rossedfort commented 8 years ago

Chapter 3: The parts of this chapter that I found most interesting were 1, Javascript is functional and object-oriented, 2, It was originally meant to be used as part of the web platform, but has since been used in non-browser settings, and 3, that JS is a blend of many other languages. I think the power of Javascript can be traced back to these 3 traits.

Chapter 15: While reading this chapter I realized that I had learned how to write some simple JavaScript functions without fully understanding them. I knew you could declare a function without a name and assign it to a variable, but I didn’t know it was called an anonymous function. I would see errors in my console that I didn’t understand because I didn’t have the context of the basic semantics in JavaScript. Hoisting was also a very interesting term to come across. The concept of calling a function before it is declared it bizarre, and I honestly can’t see the point of it just yet.

Chapter 16: This chapter was very useful for learning the basics of variables. Some of the information was a reiteration of what I have already learned. For example, I knew when declaring a variable, var is used so that the variable is not in the global scope. However, I did not know that any variable declared with the keyword var, will live everywhere within the parent function. So when I’ve declared variables inside of an if-else statement, I thought they were only scoped to that conditional. I learned in order to achieve that, you need to declare another function inside the conditional to scope the variable.

I also did not know about IIFE’s, and found this section very useful. It seems like good practice for avoiding global variables and encapsulating environments.

Chapter 17: Right away, I was interested in the 4 layers to OOP in JS. The structure of the object model in JavaScript seems conducive to learning it iteratively, and in small chunks. You can probably get away using only the first 1 or 2 layers in small programs. Then as your overall JS knowledge increases, it will be easier to learn and implement layers 3 and 4.

The first thing that struck me in layer 1 was that a property doesn’t have to exist yet in order to assign it. call obj.property = something; simultaneously creates the key and value that are associated with the property. It is also interesting that all functions are also Objects. This seems like it may take some getting used to.

It was also very interesting to see that JS has a lot of the same semantics as Ruby, e.g. getters and setters, properties, enumerables, etc. However they are implemented quite differently. I think this chapter was a bit dense, and I hope to be able to get more out of it at a later time, when I have more context.

joshuajhun commented 8 years ago

https://gist.github.com/joshuajhun/00003351166caf3295a1