Skip to content

A1

Jump to bottom
ParvinBDJ edited this page Jun 20, 2020 · 3 revisions

A1

Desk Research Progressive Enhancement

Beforehand

What I know: I know that Progressive Enhancement has something to do with the way HTML, CSS & javascript work together. In the perfect scenario, either HTML, CSS or javascript should be able to work on its one without one or another.

Desk Research

"Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience." (Dwye, S., Progressive Enhancement)

So progressive enhancement means that your website is first built on only HTML so it works perfectly that way. After that adding CSS and after that javascript. This so it works on all different kind of devices and in all different kind of situations.

Hoisting

Hoisting, which literally means something that gets lifted to the top, is a concept that was introduced to Javascript in ECMAScript 2015 and is a way Javascript code is executed. Literally it means that the variables & functions are physically moved to the top, but that is the simple explanation for the hoisting.

It actually goes like this: before Javascript runs anything it reads through the code, this is called the compile phase. Then, when it reads a variable or function, it stores it in its memory. But it still stays on exactly the same place in your code.

The example below show you how you should write your code. Here you see that first, the function is declared and after that, it is called.

function hello(name){
console.log('Hello ' + name);
// This will run: Hello Parvin
}

hello('Parvin');

In the example below I will first call the function and then declare it.

hello('Parvin');

function hello(name){
console.log('Hello ' + name);
// This will run: Hello Parvin
}

This will do the same as in the example, because of the compile phase. The code sees the function and puts it in memory. This is why the example above just works.

Closure

Today I will explain closures. It isn't as hard as you think when you first read it but just go through it a couple of times and you will understand.

So Closure basically means that a function (inner function) within a function (outer function) can use the same variables declared in the outer function. Even though you don't declare the variables within the inner scope. Still, you can use the same variables which are declared in the outer function.

Maybe this sentence is a little bit hard to understand so let me give an example with it. Let's say you have a function called 'makeVar()'. Within that function, you are going to declare a variable called 'var hello = "Hello Stranger!"'. Then, within that function you are going to create a function called 'sayHello()' which console log's the variable hello. See below.

function makeVar(){
  var hello = "Hello Stranger!";
  function sayHello(){ // This is the inner function, so the closure. We just learned that the outer            
                       // function gives the inner function it's variables, let's check it.
    console.log(hello);
    // -> Hello Stranger!
  } 
  sayHello();
}
makeVar();

In this function you see that the inner function gets the variable from the outer function without doing anything. This concept is called: Closure

Scope

Today I am going to explain the concept: Scope. A scope is the range of how far something reaches. You have 2 kinds of scopes.

  1. Local Scope
  2. Global Scope

Local scope

Local scope is the scope created when you are within a function, the local scope doesn't give her variables to the global scope. Let's say you create a variable within a function (which automatically is local within the local scope of that particular function). This variable created within the function can not be used outside of the function (so in the global scope). Let me show you an example:

function localScope(){
  var hello = "Hello Stranger!"; // creating a variable within the local scope
}
console.log(hello);
// -> undefined
// This is because it is defined in the local scope and the local scope doesn't give his functions
// to the global scope

Global scope

This is the scope where you write all your code (if it isn't within a function). If you write anything in the global scope every local scope within your project can use that. Let's say you create a variable within the global scope and you try to console log that. That should work.

var hello = "Hello Stranger!"; // creating a variable within the global scope

function localScope(){
  console.log(hello);
  // -> Hello Stranger!
  // This works because the local scope can use everything within the global scope
}

And it does! Now you should know what a scope is and what kinds of scopes there are.

Context

So context... THIS is, in my eyes, a very hard concept to explain. But I will try my very best to explain it as well as I can. Context is kind of like scope, only scope is function-based and context is object-based.

So context refers to the object where a function belongs to. When you use the keyword this you can find out in what context the function is currently in. There are 2 different contexts where an object can be inside.

  1. Inside the Object
  2. Global (Mac = window, Windows = global)

Inside the Object means that the function is inside of the object. You can check that by usingthis. Now we will see if it works. I put a function inside of an object and in there tried to console log this. Now we should see the object inside of the console.log

const objA = {
  firstName: "Parvin",
  function sayName(){
    console.log(this);
  }
};

objA.sayName();
// -> {name: "Parvin", sayName: f}

So in here this is connected to the objA which is why this console logs the whole object. But you might be thinking "mmmm I still don't understand". Well, look, if you were to add another function inside of the object but write it outside of it. Like this:

const objA = {
  firstName: "Parvin",
  function sayName(){
    console.log(this);
  }
};

objA.sayThis = function(){
  console.log(this);
};

objA.sayThis();
// -> {name: "Parvin", sayName: f, sayThis: f}

This is the same because it is referring to the same object!! This is very important to understand.

Global (window) means that this is inside the global object. Let me demonstrate:

function sayName(){
  console.log(this)
  }
}
sayName();
// window {postMessage: f, blur: f, focus: f,  close: f, frames: Window, ...}

Now, this is referring to the global object (window). See?

Sources

Project Tech

Front-end

Clone this wiki locally