DEV Community

Cover image for πŸš€ Mastering the 10 Pillars of Front-End
Phani Murari
Phani Murari

Posted on

πŸš€ 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
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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!
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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]
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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);
}
Enter fullscreen mode Exit fullscreen mode

πŸ“š 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);
Enter fullscreen mode Exit fullscreen mode

πŸ“š Official Resource


Best of luck with your interviews! πŸ€πŸš€

Top comments (3)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

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

A closure is not a function. Even the MDN reference you link says this. ALL functions have access to the set of variables you mention.

Collapse
 
cezarytomczyk profile image
Cezary Tomczyk

One tip I'd suggest: setTimeout -> window. setTimeout or even globalThis.setTimeout.

ctomczyk.pl/js-tip-always-use-full...

Collapse
 
xanyl profile image
Anil K Tiwari

Great article!