Phani Murari

Posted on Sep 22, 2023

🚀 Mastering the 10 Pillars of Front-End

#frontend #job #hire #javascript

Dive into concise explanations, relatable examples, and handy code snippets for every essential concept a senior developer must know! 🔥

🔄 1. Event Loop

Explanation: The event loop checks if the call stack is empty. If so, it checks the message queue for waiting events and executes them.

Example: 🍳 Think of a chef (event loop) checking if there's a dish (task) ready. If yes, it's served. If not, they check for new orders (events).

Code:

console.log('First');
setTimeout(() => {
  console.log('Second');
}, 0);
console.log('Third');  // Outputs: First, Third, Second

📚 Official Resource

🎨 2. Critical Rendering Path

Explanation: The steps a browser follows to convert HTML, CSS, and JavaScript into visible pixels.

Example: 🏢 Think of constructing a building: foundation (DOM), design (CSSOM), and paint (rendering).

Official Resource: 📚 Google Developers - Critical Rendering Path

🖋️ 3. Let, Const, Var and Block Scoping

Explanation:

var: function-scoped, re-declarable, and updatable.
let: block-scoped, not re-declarable, but updatable.
const: block-scoped, neither re-declarable nor updatable.

Example: 🏫 In a classroom: sections (var), roll numbers in a section (let), and birth names (const).

Code:

var x = 10;
if(true) {
    var x = 20;  
    let y = 30;  
    const z = 40;
}
console.log(x);  // Outputs: 20

📚 Official Resource

🧠 4. Closure

Explanation: A function having access to its own variables, outer function's variables, and global variables.

Example: 🙋 A person remembering their name, family name, and celebrities' names.

Code:

function outer() {
  let outerVar = 'Outside!';
  function inner() {
    console.log(outerVar);
  }
  return inner;
}
const myClosure = outer();
myClosure();  // Outputs: Outside!

📚 Official Resource

🔄 5. Functional Programming

Explanation: A paradigm where functions are primary, emphasizing immutability and pure functions.

Example: 🥪 Making sandwiches using fresh ingredients and the same recipe.

Code:

const array = [1, 2, 3];
const double = array.map(item => item * 2);  // [2, 4, 6]

📚 Official Resource

🔍 6. This Keyword Behavior

Explanation: this refers to the object executing the current function. Its context varies.

Example: 🎓 In class, this student means the one answering.

Code:

const obj = {
  name: 'John',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName();  // Outputs: John

📚 Official Resource

🛠️ 7. Frameworks Usage

Explanation: Frameworks offer a structure for faster development. Understand their core concepts and the problems they solve.

Example: 🚗 Use a car for long distances, not a short walk.

Official Resource: Varies, e.g., 📚 React Docs

👩‍👩‍👧 8. Prototypical Inheritance

Explanation: In JavaScript, objects inherit properties and methods from others. This is prototypical inheritance.

Example: 👪 Children inheriting traits from parents.

Code:

function Parent() {}
Parent.prototype.sayHello = function() {
  console.log('Hello from parent');
};

function Child() {}
Child.prototype = Object.create(Parent.prototype);
const child = new Child();
child.sayHello();  // Outputs: Hello from parent

📚 Official Resource

⌚ 9. Async, Await vs. Promises

Explanation:

Promises: Handle asynchronous operations with states (pending, fulfilled, rejected).
async/await: Makes asynchronous code look synchronous.

Example: 📅 Promise is like a task promise. Async/await marks it on a to-do list and waits.

Code:

// Promise
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

// async/await
async function fetchAndDisplay() {
  const data = await fetchData();
  console.log(data);
}

📚 Official Resource

⏲️ 10. Debounce vs Throttle

Explanation:

Debounce: Groups events if they're in quick succession.
Throttle: Executes a function at most once in a specified period.

Example: 🗣️ Debounce waits for someone to finish speaking. Throttle limits speech to once every minute.

Code: Using Lodash:

// Debounce
const debouncedSave = _.debounce(() => console.log('Saved'), 300);

// Throttle
const throttledSave = _.throttle(() => console.log('Saved'), 300);