Hackforge Academy

Category: React • Beginner

Published on 22 Feb 2026

Explanation

#white-setTimeout() executes a function once #white-after a specified delay (in milliseconds).

Code Example

setTimeout(() => {
  console.log('Hello after 2 seconds');
}, 2000);

Explanation

#white-1. The delay in setTimeout is not guaranteed exact timing #white-2. it runs after at least the given delay.

Code Example

setTimeout(() => console.log('Executed'), 1000);

Explanation

#white-You can pass arguments to the function #white- inside setTimeout.

Code Example

function greet(name) {
  console.log('Hello ' + name);
}
setTimeout(greet, 1000, 'Praveen');

Explanation

#white-clearTimeout() is used to cancel a #white-scheduled timeout.

Code Example

const id = setTimeout(() => console.log('Will not run'), 3000);
clearTimeout(id);

Explanation

#white-setTimeout returns a timeout ID used to #white-cancel it later.

Code Example

const timeoutId = setTimeout(() => {}, 1000);
console.log(timeoutId);

Explanation

#white-setInterval() repeatedly executes a #white-function at specified intervals.

Code Example

setInterval(() => {
  console.log('Runs every 1 second');
}, 1000);

Explanation

#white-clearInterval() stops the repeated execution.

Code Example

const intervalId = setInterval(() => console.log('Running'), 1000);
clearInterval(intervalId);

Explanation

#white-setInterval also returns an interval ID.

Code Example

const id = setInterval(() => {}, 2000);
console.log(id);

Explanation

#white-setInterval may cause performance issues #white-if not cleared properly.

Code Example

const id = setInterval(() =>
console.log('Heavy Task'), 100);
clearInterval(id);

Explanation

#white-Difference: setTimeout runs once, #white- setInterval runs repeatedly.

Code Example

setTimeout(() => console.log('Once'), 1000);
setInterval(() => console.log('Repeated'), 1000);

Explanation

#white-You can read a JSON file in browser #white-using fetch API.

Code Example

fetch('data.json')
  .then(res => res.json())
  .then(data => console.log(data));

Explanation

#white-In Node.js, you can read JSON using require().

Code Example

const data = require('./data.json');
console.log(data);

Explanation

#white-Using fs module to read JSON in Node.js.

Code Example

const fs = require('fs');
const data = JSON.parse(fs.readFileSync('data.json'));
console.log(data);

Explanation

#white-JSON.parse() converts JSON string into #white- JavaScript object.

Code Example

const obj = JSON.parse('{"name":"Praveen"}');

Explanation

#white-JSON.stringify() converts object into JSON #white- string.

Code Example

const str = JSON.stringify({name:'Praveen'});

Explanation

#white-Canvas is an HTML element used to draw #white-graphics via JavaScript.

Code Example

<canvas id='myCanvas'></canvas>

Explanation

#white-You access canvas context using getContext().

Code Example

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Explanation

#white-You can draw shapes like rectangles using fillRect().

Code Example

ctx.fillRect(10, 10, 100, 50);

Explanation

#white-Canvas can draw text using fillText().

Code Example

ctx.fillText('Hello', 50, 50);

Explanation

#white-Canvas supports drawing images using drawImage().

Code Example

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = 'image.png';

Explanation

#white-display: flex enables flexbox layout in CSS.

Code Example

.container { display: flex; }

Explanation

#white-Flexbox arranges items in row by default.

Code Example

.container { display: flex; flex-direction: row; }

Explanation

#white-You can change direction using flex-direction.

Code Example

.container { flex-direction: column; }

Explanation

#white-justify-content aligns items horizontally.

Code Example

.container { justify-content: center; }

Explanation

#white-align-items aligns items vertically.

Code Example

.container { align-items: center; }

Explanation

#white-margin: auto is commonly used to center #white-block elements horizontally.

Code Example

.box { width: 200px; margin: auto; }

Explanation

#white-For horizontal centering, left and right #white- margins become equal.

Code Example

.box { margin-left: auto; margin-right: auto; }

Explanation

#white-margin: 0 auto centers element horizontally.

Code Example

.box { width: 300px; margin: 0 auto; }

Explanation

#white-In flexbox, margin: auto can push elements #white-to edges.

Code Example

.item { margin-left: auto; }

Explanation

#white-margin: auto works only when width is #white- specified (for block elements).

Code Example

.box { width: 150px; margin: auto; }