Apply, Bind, and Call

const obj = {name:"Mike"};

function msg(city, state){
  return `Welcome ${this.name} to ${city}, ${state}!`;
};

console.log(msg.call(obj,"Los Angeles","CA"));
console.log(msg.apply(obj, ["Los Angeles","CA"]));

const bound = msg.bind(obj); 
console.log(bound("Los Angeles","CA"));

// All will log: Welcome Mike to Los Angeles, CA!

These three methods are use to override the context of the “this” keyword . All three methods accepts the first parameter for the “this” value and the rest of the parameters are the arguments to the actual function. Using call() or apply() would invoke a function immediately. Bind() returns a function with the “this” context for later execution or invocation. Apply() is a little different in that it accepts an array of arguments instead of comma separated values.

Currying

function animal(type) {
  return function(name) {
    return name + " the " + type;
  }
}

var dragon = animal("dragon");
var lisaDragon = dragon("Lisa");

console.log(lisaDragon); 
// Lisa the dragon

In JavaScript, inner functions have access to their outer function’s scope, to which we refer to as closures. Currying allows you to take in one or a set of arguments and return a new function that takes the next set of arguments, and so on, until all arguments are passed.

Event Delegation

<div id="menu">
  <button data-action="cancel">Cancel</button>
  <button data-action="save">Save</button>
</div>
<script>
  class Menu {
    constructor(elem) {
      elem.onclick = this.onClick.bind(this);
    }
    cancel = () => alert('cancel');
    save = () => alert('save');
    onClick = event => {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }
  new Menu(menu);
</script>

Event delegation is a popular event handling pattern that utilizes the bubbling and targeting phase of event propagation (leaving the capturing phase out for this explanation). Bubbling is when an event is first captured and handled by the innermost element and then propagated to outer elements. Targeting is when the event reached the target element. Example: If you have a lot of buttons performing a similar task, instead of adding an event listener to each element, you would only add one event listener to the parent or container element. In this pattern, when a user clicks on a button, the event would bubble up to the parent’s event listener and then it would react accordingly based on the event’s target.

Fluid Typography

body {
  font-size: calc(
  [min font-size] + ([max font-size] - [min font-size]) 
  * ((100vw - [min viewport width]) 
  / ([max viewport width] - [min viewport width])));
}
/*
 Minimum font size 16px at 320px 
 and maximum font size 28px at 1400px
*/
body {
  font-size: calc(16px + (28 - 16) 
  * ((100vw - 320px) 
  / (1400 - 320)));
}

Combining fluid and responsive design techniques is an attempt to provide an optimal user experience throughout different screen sizes. This why I love this CSS equation for fluid typography. The font resizes proportionally to the viewport width without any help of javascript. Credit Mike Riethmuller for the equation. This another step closer to providing a consistent user experience and also retaining the proportions of the intended design.

Getters & Setters

var person = {
  firstName: "Anakin",
  lastName: "Skywalker",
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName (name) {
    var words = name.toString().split(' ');
    this.firstName = words[0] || '';
    this.lastName = words[1] || '';
  }
}

person.fullName = 'Obi-Wan Kenobi';
console.log(person.firstName); // Obi-Wan
console.log(person.lastName) // Kenobi

Getters and setters allows you to define a “computed property” with the keywords “get” and “set”. When a computed property is accessed, the return value from the get function is used. When a value is set, the set function is called with the value being passed as an argument.

Operator Precedence

console.log(1 + 2 * 3); // 1 + 6
// expected output: 7

console.log(2 * 3 ** 2); // 2 * 9
// expected output: 18

var z = 1, y = z = typeof y;
console.log(y); // undefined

In the example of 1 + 2 * 3, the numbers are considered as operands and the addition and multiply are operators. Operators manipulate and check operand values. Operators with higher precedence will evaluate and become the operands of operators with lower precedence. In the example, y is undefined because of associativity. Associativity determines how operators of the same precedence are parsed. Assignment operators are right-associative (some operators are left-associative), meaning that the operation will perform from right to left. typeof y will evaluate to undefined, then it will be assigned to z, and then y. Lastly, z is assigned to 1.

Temporal Dead Zone

console.log(cat);
// undefined

var cat = 🐱;

Declarations using the keyword “var” get hoisted, but unlike “const” and “let”, var initializes with undefined. You will be able to use the declaration. However, you will not be able to access its value until after the declaration is defined.

Temporal Dead Zone

console.log(dog);
// ERROR
console.log(panda);
// ERROR

const panda = 🐼;
let dog = 🐶;

Hoisting occurs in the compile phase of Javascript, where declarations & functions are scanned and stored into memory. Variables can be used before it’s declared. “const” and “let” declarations do get hoisted but do not get initialized. Trying to access const or let variables before declarations will error — this is also referred to as the temporal dead zone.

undefined / not defined

console.log(cat);
// ERROR: cat is not defined

var dog;
console.log(dog);
// undefined

In Javascript, if you try to use a variable that’s not declared, it would throw an error that the variable is not defined. However if you declare a variable without a value, then you would get undefined. What is the difference in declaration and definition? Declaration — you have registered a variable in a corresponding scope (with or without a value) for memory allocation. Definition is the assignment of a value to variable’s allocated memory.

Var, Let, and Const

function xmasDate() {
  let isXmas = true;
  if(isXmas) {
    var month = 12;
    let day = 25;
    const year = 2019;
  }
  console.log(month); // 12
  console.log(day); // day is not defined
  console.log(year); // year is not defined
  
  // redeclaration
  var month = 11; // 11
  let isXmas = false; // ERROR
}
console.log(month); // month is not defined

Scope means where these variables are available to use. Var is function scope. When var is declared in a function it is only accessible in the scope of that function. Let and const are block scope. Let and const can only be accessed within left and right curly brackets where they’re declared. Var is the only variable declaration that can be redeclared. Var and let can be updated however const cannot. Would let and var behave differently in a for loop?