FrontendJoy
Posts
🎉🌿 Back to Frontend Fundamentals: JavaScript Building Blocks

🎉🌿 Back to Frontend Fundamentals: JavaScript Building Blocks

Ndeye Fatou Diop
April 22, 2024

For a long time, I struggled to learn React.

Because I didn't master JavaScript.

So, I am starting this series to help any JavaScript newbie master the language.

Ready? Let's go 💪.

Anatomy of a JavaScript (JS) program

Let's look at the following JavaScript program 👇:

let selectedPost = undefined;
const id = Symbol("id");
const me = {
  name: "Ndeye Fatou Diop",
  age: 30,
  [id]: "123",
  hasPremium: true,
  rank: 25n,   
  linkedAccounts: null,
};
const greet = (user) => console.log(`Hello ${user.name}.  
You are ${user.age > 18 ? "major" : "minor"}.`);
greet(me); // prints "Hello Ndeye Fatou Diop. You are major."

Every JavaScript program is a series of commands for the machine (browser, computer, etc.). In the example above, the browser will print Hello Ndeye Fatou Diop. You are major. on the console when the program is done executing.

Every program is made out of:

1. Comments

Comments help you document your code or note things to do later. They are ignored by the browser or machine and are only for humans.

There are 2 kinds of comments:

1. Inline comments

// This is a single-line comment

2. Multiline comments

/*
This is a comment
that spans multiple lines.
Great for making long code clear!
*/

Even though computers ignore comments, some editors, like VSCode, can use special comments like JSDoc to give helpful hints.

2. Values

A value is any information the code uses, such as numbers or text. Each value has a type or data type that tells JavaScript what it is.

Our code has different values: undefined, 30, true,…

undefined // "undefined" type
"Ndeye Fatou Diop" // "string" type
Symbol("id") -> "symbol" type
me // "object" type
30 // "number" type
true // "boolean" type
25n // "bigint" type
null // "null" type
greet // "object" type

💡 You can find a value's type using typeof value, except for null, which gives "object". Watch out for that! 😅

3. Variables

Variables are like labels for values. They let us work with data by giving it a name.

Think of variables as people's names. You're not your name, and when I say things like ${PutYourNameHere} is late or Give 100$ to ${PutYourNameHere}, I am referring to you.

There are 3 ways to declare a variable in JavaScript:

Using let: Variables declared with let can be re-assigned (i.e., we can change the value stored in the variable)

let name = "Ndeye Fatou Diop";
name = "Joyancefa"; // We can change the value stored in `name`

Using const: Variables declared with const cannot be re-assigned (i.e., once the variable is assigned, we cannot re-assign it)

const name = "Ndeye Fatou Diop";
name = "Joyancefa"; // ❌ Uncaught TypeError: Assignment to constant variable.

Using var: Don't use this! It's the old way of declaring variables and has some unexpected behaviors. Variables declared with var can also be re-assigned.

var name = "Ndeye Fatou Diop";
name = "Joyancefa"; // We can change the value stored in `name`

💡 When a value is written as is in the code without any changes, it's called a literal. In the example above, 30, "Ndeye Fatou Diop",… are literals.

4. Operators

Operators let you perform operations on one or more values. There are different types of operators:

unary operators: typeof, !, --, ...
binary operator: =, +, %,...
ternary operator: condition? exprIfTrue : exprIfFalse
etc.

In the example above, we use the ternary operator to print the correct string when greeting me.

console.log(`Hello ${user.name}. You are ${user.age > 18 ? "major" : "minor"}.`

💡 You can learn more about operators here.

5. Keywords

Keywords are special words with specific meanings in JavaScript. For example, for is a keyword used in loops.

Some are reserved (i.e., you can't use them for variable names).

Even if not all of them are (e.g., undefined), avoiding using keyword names for variables is good practice.

💡 You can find the list of reserved keywords more here. No need to remember them all! Your code editor should yell at you when you use them.

6. Expressions

Expressions are bits of code that produce a value. Any expression can be formed of operators, values, variables, expressions, etc.

In the example above, we have the following expressions:

All the values mentioned earlier (30, true,…)
All the assignments (selectedPost = undefined, id = Symbol("id"),…)
user.name
${user.age > 18 ? "major" : "minor"}
Hello ${user.name}. You are ${user.age > 18 ? "major" : "minor"
(user) => console.log(...)
greet(me)

💡 Check this great post to learn more about the distinction between statements and expressions.

7. Statements

A statement is just a collection of expressions. It is an instruction to the program to do something like an order in the real world.

Examples

return
for...of
if...else
do...while

Statements cannot be used when expressions are expected (for example, in function arguments).

❌ Bad: This won't work

function greet(name) {
    return "Hello, " + name;
}

// Incorrect usage: Using a statement (if) instead of an expression
greet(if (Math.random() < 0.5) { "John" } else { "Jane" }); // Uncaught SyntaxError: Unexpected token 'if'

The example above has 5 statements (one on each line).

💡 The semi-colon after the statement is optional, but I prefer to add it to keep the code clear.
Find the complete list of statements here.