CSS Positioning

• static: Default position, its is not a position in any specific way
• relative: Similar to static (if extra properties are not added)
• fixed: Fixed element positioned relatively to viewport
• absolute: Same as fixed just relative to nearest parent which is of relative to viewport

Media query

@media (max-width: 480px) { 
  /* CSS here */
}

All the css written in above media query will be applied to all media types like screen, audio, video etc.

@media screen and (max-width: 480px) { 
  /* CSS here */
}

All the css written in above media query will be applied to screen media type only

CSS Combinators

• Following are some of the combinators used in css

space

div p {
  /* CSS here */
}

• The above css with space combinator will select all the decendent p tags from the div

>

div p {
  /* CSS here */
}

• The above css with > combinator will select the p tag which are direct children of the div

+

div + p {
  /* CSS here */
}

• The above css with + combinator will select the p tag which is direct sibling of the div

~

div ~ p {
  /* CSS here */
}

• The above css with ~ combinator will select the p tag which are siblings of the div

let, block and const in JavaScript

• let: let is block scope variable meaning which is limited to block. It allow reassignment but don't allow the redeclaration
• var: var allow the redeclaration and it is stored in window object window.variable
• const: const is used for constants which need to initialize when we declare them

Nullish Coalshing

• If the left hand value is null or undefined then the default value if provided using this operator
• ?? symbol represents the Nullish Coalshing

var a = null ?? "Hello World";

console.log(a);

// output --> Hello World

Hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that you can use a variable or call a function even before it appears in the code. Following are two types of hoisting

Variable Hoisting

• Variables declared using var are hoisted on the top, only the declaration is hoisted not the initialization

console.log(variable);  // output --> undefined

var variable = 10;

console.log(variable);  // output --> 10

• After hoisting it will be interpreted as following

var variable = undefined;

console.log(variable);  // output --> undefined

variable = 10;

console.log(variable);  // output --> 10

• There is something different in case of let and const. The variable using let and const are hoisted without initialization
• When we access the var variable before initialization will get the undefined but if we tries to access the let and const will get Cannot access the variable before the initialization

console.log(variable);  // output --> Reference Error

let variable = 10;

console.log(variable);  // output --> 10

• After hoisting it will be interpreted as following

let variable;

console.log(variable);  // output --> Reference Error

variable = 10;

console.log(variable);  // output --> 10

Function Hoisting

• Function declaration are also hoisted, we can call function function before its declaration

myFunc();

function myFunc() {
  console.log("Hello all");
}

• But again there is issue with arrow function which are declared function expression deals with Reference Error as only the the declaration of function variable is hoisted but not assignment of the function

funcVar(); // Reference Error

var funcVar = () => {
  console.log("Hello all");
}

• After hoisting it look like

var funcVar;

funcVar();  // Reference Error

funcVar = function() {
  console.log("Hello all");
}

• Reference Error: Cannot access before initialization

Higher Order Function

• Function which take one or more function as arguments and return a function
• It is used to perform some repeated task (increase code reusability)

function hoFunc(arr, func) {
  const res = [];

  for(let i=0; i<arr.length; i++) {
    res.push(func(arr[i]));
  }

  return res;
}

const arr = [1, 2, 3, 4, 5];

function double(x) {
  return 2 * x;
}

console.log(hoFunc(arr, double))

// output --> [2, 4, 6, 8, 10]

Closure

• Closure in JavaScript allow inner function to access the variable of outer function even if the outer function is expired and finished its execution

function multiplier(multiplierVal) {
  return function(x) {
    return multiplierVal * x;
  }
}

const double = multiplier(5)
console.log(double(2));

// output --> 10 

Apart from this, today we had our first quiz on programming languages. The quiz consisted of PHP, HTML, CSS, JavaScript, and MySQL questions. The quiz was a bit tricky, but I'm done with it for the day.

Amigos! 👋