Posted on Sep 22, 2023

🚀 Mastering the 10 Pillars of Front-End

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);