JavaScript fundamentals you should know

A beginner’s guide to mastering core JavaScript concepts for web development.

1. Variables and Data Types

• Variables: Declared using let, const, and var (avoid var in modern JavaScript)
  • const: For variables whose value won’t change.
  • let: For variables that may change.
• Data Types: string, number, boolean, null, undefined, symbol, object, bigint.

const name = "Tim";  // String
let age = 30;  // Number
let isStudent = false;  // Boolean

2. Operators

• Arithmetic: +, -, *, /, %, ++, --
• Comparison: ==, ===, !=, !==, <, >, <=, >=
• Logical: &&, ||, !
• Assignment: =, +=, -=, etc.

3. Functions

• Declaring Declaring functions using function or arrow functions (=>)..

function add(a, b) {
  return a + b;
}
 
const subtract = (a, b) => a - b;

4. Control Flow

• Conditionals: if, else if, else, switch

if (age > 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

5. Object and Arrays

• Arrays: Ordered collection of values.

const numbers = [1, 2, 3];

6. ES6 Features

• Destructuring: Extract values from objects or arrays.

const { name, age } = person;
const [first, second] = numbers;

• Spread Operator: Spread values into arrays or objects.

const newNumbers = [...numbers, 4, 5];

• Template Literals: String interpolation with backticks.

const message = `My name is ${name}`;

7. Scope and Hoisting

• Global, Local (Function), Block Scope.
• Hoisting: Variables declared with var and functions are hoisted to the top of their scope.

console.log(x); // Undefined due to hoisting
var x = 5;

8. Promises and Async/Await

• Promises: For handling asynchronous operations.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done"), 1000);
});
 
promise.then((result) => console.log(result));

9. DOM Manipulation

• Selecting Elements: document.getElementById, document.querySelector
• Changing content: element.innerHTML, element.style
• Event Handling: element.addEventListener

document.getElementById("btn").addEventListener("click", function() {
  console.log("Button clicked");
});

10. Error Handling

• try…catch: To catch and handle errors.

try {
  someFunction();
} catch (error) {
  console.log(error.message);
}

These concepts form the foundation of JavaScript, and understanding them will prepare you for more advanced topics like frameworks (React, Angular, etc.) or back-end development with Node.js.