The goal of this lesson is simple: understand what JavaScript is actually doing when you write basic code.

Coming from Ruby, you’ll notice that many concepts are similar, but JavaScript has some syntax and behavior that becomes important later in React and Node.js.

Variables, Values, Objects, Arrays, Functions and Return Values

1. Variables: let and const

In modern JavaScript, primarily use:

const name = "Abhilash";
let age = 40;

Think of them roughly like Ruby local variables:

name = "Abhilash"
age = 40

The difference is important:

const

The variable cannot be reassigned:

const name = "Abhilash";
name = "John"; // TypeError

let

The variable can be reassigned:

let age = 40;
age = 41;

What about var?

You’ll see:

var name = "Abhilash";

in older JavaScript code.

For modern JavaScript:

Use const by default.
Use let when reassignment is required.
Avoid var unless you're dealing with legacy code.

2. Everything starts with values

JavaScript variables hold values.

const name = "Abhilash";
const age = 40;
const active = true;

These values have types.

typeof name;   // "string"
typeof age;    // "number"
typeof active; // "boolean"

Some common types:

string
number
boolean
undefined
null
object
symbol
bigint

For now, focus on:

string
number
boolean
undefined
null
object

3. Arrays

An array stores multiple values.

const numbers = [10, 20, 30];

You can access them using an index:

numbers[0]; // 10
numbers[1]; // 20
numbers[2]; // 30

Just like Ruby:

numbers = [10, 20, 30]
numbers[0] # 10

JavaScript arrays are zero-indexed too.

Important

This:

const numbers = [10, 20, 30];

means numbers contains one array value.

It does not mean:

numbers = 10
20
30

Think:

numbers
   |
   v
[10, 20, 30]

4. Objects

JavaScript objects are heavily used in React and Node.

const user = {
  id: 1,
  name: "Abhilash",
  active: true
};

You can access properties:

user.name;   // "Abhilash"
user.id;     // 1
user.active; // true

Ruby equivalent:

user = {
  id: 1,
  name: "Abhilash",
  active: true
}
user[:name]

JavaScript also supports bracket notation:

user["name"];

This becomes useful when the property name is dynamic.

5. Arrays can contain objects

This is extremely common in React.

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 3, name: "Mike" }
];

Visualize it:

users
  |
  v
[
  { id: 1, name: "John" },
  { id: 2, name: "Jane" },
  { id: 3, name: "Mike" }
]

Then:

users[0].name;

returns:

"John"

This structure is everywhere in frontend applications.

6. Functions

A JavaScript function can be written like:

function add(a, b) {
  return a + b;
}

Call it:

const result = add(10, 20);
console.log(result); // 30

Ruby equivalent:

def add(a, b)
  a + b
end
result = add(10, 20)

So far, very familiar.

7. The important idea: functions are values

This is one of the biggest concepts you need for React and Node.

In JavaScript:

function add(a, b) {
  return a + b;
}

The function itself is a value.

You can store it:

const operation = add;

Now:

operation(10, 20);

returns:

30

Visualize:

add
 |
 v
function
operation
 |
 +------> same function

This is why JavaScript can pass functions around so easily.

8. Functions can return anything

A function can return a number:

function getAge() {
  return 40;
}

A string:

function getName() {
  return "Abhilash";
}

An object:

function getUser() {
  return {
    id: 1,
    name: "John"
  };
}

An array:

function getUsers() {
  return [
    { id: 1, name: "John" },
    { id: 2, name: "Jane" }
  ];
}

And importantly, a function can return another function:

function createGreeter() {
  return function() {
    console.log("Hello");
  };
}

We’ll use this concept later when learning closures.

9. This explains useState

Now let’s return to the example that confused you:

const [users, setUsers] = useState([]);

Ignore React for a moment.

Imagine an ordinary function:

function useState(initialValue) {
  return [
    initialValue,
    function setValue(value) {
      console.log(value);
    }
  ];
}

Now call:

const result = useState([]);

What does result contain?

Conceptually:

[
  [],
  setValueFunction
]

So:

const users = result[0];
const setUsers = result[1];

Now combine the two operations with destructuring:

const [users, setUsers] = result;

Therefore:

const [users, setUsers] = useState([]);

means:

1. Pass [] into useState
2. useState returns [value, function]
3. destructure that returned array
4. users gets element 0
5. setUsers gets element 1

This is a critical mental model.

10. Array destructuring

Let’s isolate the JavaScript feature.

const numbers = [10, 20];
const [a, b] = numbers;

Equivalent to:

const a = numbers[0];
const b = numbers[1];

You can even ignore values:

const [first, , third] = [10, 20, 30];
console.log(first); // 10
console.log(third); // 30

11. Object destructuring

There is another extremely common form:

const user = {
  name: "John",
  age: 30
};
const { name, age } = user;

Equivalent to:

const name = user.name;
const age = user.age;

So remember:

Array  -> []
Object -> {}

Therefore:

const [a, b] = array;
const { name, age } = object;

This distinction is extremely important in React.

12. Arrow functions

Modern JavaScript frequently uses:

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

Short form:

const add = (a, b) => a + b;

Equivalent roughly to:

function add(a, b) {
  return a + b;
}

React code uses arrow functions constantly:

users.map(user => user.name);

Don’t worry about map yet. Just notice:

user => user.name

is a function.

13. Why callbacks matter

Consider:

function execute(callback) {
  callback();
}

Then:

execute(() => {
  console.log("Hello");
});

What’s happening?

execute()
   |
   | receives a function
   v
callback
   |
   v
callback()
   |
   v
console.log("Hello")

The function is being passed as a value.

This is the foundation of callbacks.

We’ll go much deeper into this in a later lesson.

Ruby developer mental model

For now, keep these mappings in your head:

The last row is deliberately approximate. JavaScript functions, arrow functions, Ruby blocks, Procs and lambdas are not interchangeable concepts. We’ll cover the differences properly.

🎯 Lesson 1 int. questions

Try answering these without looking back.

Question 1

What does this return?

const numbers = [10, 20, 30];
numbers[1];

Question 2

What is the difference between:

const user = {
  name: "John"
};

and:

const users = [
  { name: "John" }
];

Question 3

What does this do?

const [a, b] = [10, 20];

Question 4

What does this return?

function getUser() {
  return {
    id: 1,
    name: "John"
  };
}

Question 5

What is stored in operation?

function add(a, b) {
  return a + b;
}
const operation = add;

Small exercise

Without running it, predict the output:

function getUser() {
  return [
    { id: 1, name: "John" },
    { id: 2, name: "Jane" }
  ];
}
const users = getUser();
const [firstUser, secondUser] = users;
console.log(firstUser.name);
console.log(secondUser.name);

Then try this variation:

const [firstUser] = getUser();
console.log(firstUser.name);

The key skill I’m looking for is not memorizing syntax. It’s being able to mentally trace:

function call
      ↓
return value
      ↓
array/object
      ↓
destructuring
      ↓
variables

Once that becomes natural, a lot of React code will stop looking mysterious.

Next lesson: let, const, scope, hoisting, and why JavaScript behaves differently from Ruby around variable scope.

Happy Learning! to be continued..