Skip to main content
This section covers the JavaScript concepts you’ll use most frequently when working with React.

​
Variables and Constants

​
let and const

const message = "Hello World!";
console.log(message);

const hobbies = ["Sports", "Cooking", "Reading"];
hobbies.push("Working"); // This works - you can mutate the array
// hobbies = []; // This would fail - you can't reassign const

console.log(hobbies);
Use const by default. Only use let when you know the variable will be reassigned.

​
Functions

​
Function Declarations and Expressions

function createGreeting(userName, message = "Hello!") {
  return "Hi, I am " + userName + ". " + message;
}

const greeting1 = createGreeting("Max");
console.log(greeting1); // "Hi, I am Max. Hello!"

const greeting2 = createGreeting("Manuel", "Hello, what's up?");
console.log(greeting2); // "Hi, I am Manuel. Hello, what's up?"
Arrow functions are commonly used in React for event handlers and callback functions.

​
Objects and Classes

​
Object Literals

const user = {
  name: "Max",
  age: 34,
  greet() {
    console.log("Hello!");
    console.log(this.age);
  }
};

console.log(user.name); // "Max"
user.greet();

​
Classes

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hi!");
  }
}

const user1 = new User("Manuel", 35);
console.log(user1);
user1.greet();

​
Arrays and Array Methods

​
Common Array Operations

Transform each element in an array:
const hobbies = ["Sports", "Cooking", "Reading"];
const editedHobbies = hobbies.map((item) => ({ text: item }));
console.log(editedHobbies);
// [{ text: "Sports" }, { text: "Cooking" }, { text: "Reading" }]
In React, you’ll use map() frequently to render lists of components.

​
Destructuring

​
Array Destructuring

const [firstName, lastName] = ["Max", "Schwarzmüller"];

console.log(firstName); // "Max"
console.log(lastName); // "Schwarzmüller"

// Instead of:
// const firstName = userNameData[0];
// const lastName = userNameData[1];

​
Object Destructuring

const { name: userName, age } = {
  name: "Max",
  age: 34
};

console.log(userName); // "Max"
console.log(age); // 34

// Instead of:
// const userName = user.name;
// const age = user.age;
Object destructuring is essential for working with props in React components.

​
Spread Operator

​
Array Spreading

const hobbies = ["Sports", "Cooking"];
const newHobbies = ["Reading"];

const mergedHobbies = [...hobbies, ...newHobbies];
console.log(mergedHobbies); // ["Sports", "Cooking", "Reading"]

​
Object Spreading

const user = {
  name: "Max",
  age: 34
};

const extendedUser = {
  isAdmin: true,
  ...user
};
console.log(extendedUser);
// { isAdmin: true, name: "Max", age: 34 }
The spread operator creates a shallow copy. Nested objects are not cloned deeply.

​
Control Structures

​
Conditional Statements

const password = prompt("Your password");

if (password === "Hello") {
  console.log("Hello works");
} else if (password === "hello") {
  console.log("hello works");
} else {
  console.log("Access not granted.");
}

​
Loops

const hobbies = ["Sports", "Cooking"];

for (const hobby of hobbies) {
  console.log(hobby);
}

​
Modules (Import/Export)

export const apiKey = "abc123";
export const abc = "content";

​
Asynchronous Code

​
setTimeout and Callbacks

function handleTimeout() {
  console.log("Timed out!");
}

const handleTimeout2 = () => {
  console.log("Timed out ... again!");
};

setTimeout(handleTimeout, 2000);
setTimeout(handleTimeout2, 3000);
setTimeout(() => {
  console.log("More timing out...");
}, 4000);

​
Function Scope and Closures

function init() {
  const message = "Hello";
  
  function greet() {
    console.log(message); // Can access outer scope
  }

  greet();
}

init();

​
Key Takeaways

Arrow Functions

Concise syntax for functions, commonly used in React

Destructuring

Extract values from objects and arrays efficiently

Spread Operator

Copy and merge arrays and objects immutably

Array Methods

map(), filter(), find() are essential for React

​
Next Steps

React Essentials

Learn core React concepts: components, props, state, and events

Build docs developers (and LLMs) love

Get started for freeTalk to us