Differences

This shows you the differences between two versions of the page.

--- javascript [2020/09/24 04:03]
paul [HTML]
+++ javascript [2020/10/05 03:09] (current)
paul [Object Spread Operator]
@@ Line 1: / Line 1: @@
 ====== javascript ======
+===== var, let and const ====
+A ''var'' is a statement that defaults a function-scoped or a globally-scoped
+variable. It is also added as a non-configurable property to the global object.
+The ''let'' statement created a variable that is block scoped. They are still
+accessible from blocks that are children of the block the variable was declared
+in.
+If ''let'' is not written, javascript quietly creates a global binding and uses
+it.
+===== Strings =====
+Javascript **template literals** allow you to add variables in a string.
+<code javascript>
+let age = 33;
+let name = 'Paul';
+let out = `My name is ${name} and I am ${age}`;
+</code>
+===== Object Literals =====
+<code javascript>
+const person = {
+  name: 'Paul'
+};
+// You can add data willy nilly!
+person.email = "[email protected]";
+</code>
+==== Object Destructuring ====
+You can pull data out of an object using a technique called object
+destructuring.
+<code javascript>
+const person = {
+    firstName: 'Paul',
+    lastName: 'Sammut',
+    age: 33,
+    address: {
+        street: '50 main st',
+        city: 'NY',
+        state: 'NY'
+    }
+}
+const { firstName, lastName, address:{ city } } = person;
+</code>
+===== Arrays =====
+There are a bunch of array operations:
+''shift()'' - removes and returns the 0th' element of an array
+''unshift()'' - adds 1 or more elements to the start of an array
+Iterating through arrays is a whole thing of course. There are a bunch of ways
+to do it. You can while loop it, or you can make use of the ''for...of''
+statement.
+==== Filter ====
+Arrays have a filter function that is very powerful. You pass in a function that
+defines the filter criteria. Very cool.
+<code javascript>
+let applicants = [ { name: "Joe Shmoe", country: "US", age: 33 },
+                   { name: "Rob Parny", country: "GB", age: 29 },
+                   { name: "Rob Parly", country: "GB", age: 16 },
+                   { name: "Lem Meloo", country: "IT", age: 75 } ]
+let onlyUsApplicants = applicants.filter(app => app.country === "US");
+</code>
+==== Map ====
+A ''map'' function allows you to go through the elements of an array and build a
+new array with returned values of the function passed into map that can act on
+each element.
+==== Reduce ====
+A ''reduce'' function is used to compute a single value from an input array. At
+its basic form it requires a combining function that combines to elements of the
+array.
+It can also be used to get a max or min of an array. For example:
+<code javascript>
+let data = [  { name: "red",   count: 32 },
+              { name: "green", count: 2  },
+              { name: "black", count: 1  },
+</code>
+==== Some && Every ====
+''some'' is a function that acts on arrays by taking in a logical test function.
+If any of the elements in the array passes the test, it returns true.
+''every'' is a function that acts on arrays by taking in a logical test function.
+If all of the elements in the array pas the test, it returns true.
+==== Composing ====
+''Composing'' is when you get start chaining high-order functions to get to a
+result or subset of data in a few lines of code.
+<code javascript>
+// Filter and map to a new array
+let dirs = SCRIPTS.filter(script => script.living).map(script => {
+    return { name: script.name, direction: script.direction}; });
+</code>
 ===== Functions =====
+There's 3 ways of writing a function in JavaScript.
+Using a ''function'' expression:
+<code javascript>
+const fun1 = function(x) {
+  return x*x;
+};
+</code>
+Using a ''function'' decleration. The interesting thing with this is that you
+can call a declared function before it's declated, as they are moved to the top
+of their scope, and all code in that scope can use them. They also don't need a
+semicolon at the end.
+<code javascript>
+sayHello();
+function sayHello() {
+  console.log("Hi!");
+}
+</code>
+Using the ''arrow'' notation. This is a third and compact way of writing
+functions. If you don't put curly braces and have a single expression, it will
+be returned.
+<code javascript>
+const sayHi = () => { console.log('hi'); };
+const returnOne = () => 1;
+</code>
+Functions in javascript ignore extra parameters you pass in and also add
+undefineds for parameters you don't pass in.
 Functions in javascript can be named or anonymous. They have access to local variables that are in the scope of their parent functions.
@@ Line 16: / Line 168: @@
   console.log(output)
 }
+</code>
+===== Higher-Order Functions =====
+Higher-order functions are functions that operate on other functions, either by
+passing them in as a parameter or by returning them.
+The shit you can do with functions is nuts.
+<code javascript>
+let repeat = function(n, action){
+  for(let i = 1; i <= n; i++){
+    action(i);
+  }
+};
+repeat(3, n => { console.log(n); });
 </code>
@@ Line 84: / Line 252: @@
 modify HTML elements.
-===== Deep Copies =====
+===== Equality =====
-Every object in Javascript is passed by reference. So if you push an object into a list of objects, and that object changes later on those changes will be reflected in the list.
+In javascript there are two equality statements, ''=='' and ''===''.
-To avoid this from happening, use this notation:
+Double equal: Loose equality check. Tries to coerse types so theres a match and
+then compares content.
-''{...o}''
+Triple equal: Type and content have to match. Strict equality.
+===== Control Flow =====
+==== Switch ====
+Switch statements are wierd in that statements start executing at the
+start of a matching label, and will keep executing accross other labels
+until it hits a break.
+In the following if you pass ''sunny'' Dress Light and Go out will print.
+<code javascript>
+switch(prompt("PUT IN WEATHER")){
+  case 'rainy':
+    console.log("Bring umbrella");
+    break;
+  case 'sunny':
+    console.log("Dress light");
+  case 'cloudy':
+    console.log("Go out");
+    break;
+  default:
+    console.log("Unknown weather type!");
+    break;
+}
+</code>
+===== OOP =====
+JavaScript OOP.
+==== Methods ====
+Methods in JS are simply properties that hold function values.
+<code javascript>
+  let rabbit = {};
+  rabbit.speak = function(line) {
+        console.log(`I am saying '${line}'.`);
+  }
+  rabbit.speak("hi!");
+</code>
+==== Prototypes ====
+JavaScript has inheritance. Almost every object in javascript inherits (directly
+or indirectly) from ''Object.prototype''. This gives every object some basic
+properties, including methods, such as ''toString()''.
+==== Classes ====
+You can have classes in JavaScript but they can only contain methods. They
+cannot contain non functions, such as variables.
+<code javascript>
+class Rabbit{
+  constructor(type){
+    this.type = type;
+  }
+  speak(line) {
+    console.log(`This ${this.type} rabbit says '${line}'.`);
+  }
+}
+let killaRabbit = new Rabbit('killa');
+let spottedRabbit = new Rabbit('spotted');
+killaRabbit.speak('Hello precious..');
+spottedRabbit.speak('I\'m spotted all ova');
+</code>
+==== call function ====
+JavaScript has a call function that can be invoked on an function and allows you
+to explicitly pass a ''this'' object as the first parameter.
+===== Object Spread Operator =====
+The Object Spread Operator is ''...'' and it allows you to spread concatenate lists in a one line. [[https://github.com/tc39/proposal-object-rest-spread|Link]].
+I was really confused about it when I saw it used to spread out properties of an object that was returned by a function [[https://vuex.vuejs.org/guide/state.html#object-spread-operator|here]].
+<code javascript>
+computed: {
+  localComputed () { /* ... */ },
+  // mix this into the outer object with the object spread operator
+  ...mapState({
+    // ...
+  })
+}
+</code>
-where o is the object we want to copy.