JavaScript Syntax: Basic Concepts and Example Code

(Code speaks… but first, we need to learn its language.)

One morning you open your computer.
You create a new .js file.
The cursor blinks.

And JavaScript looks at you:
“I’m ready. Are you?”

If you’re ready, buckle up.
In this article, we won’t just learn JavaScript syntax…
We’ll break it down. Take it apart. Season it with humor.

🧠 1. Variables – Little Boxes in Memory

A variable is a small box stored in JavaScript’s memory.

🎩 let – Modern and Flexible

let score = 10;
score = 20;

console.log(score);

What happened here?

• let score = 10; → A box was created in memory.
• score = 20; → The content of the box was changed.
• console.log(score); → Prints 20.

let is changeable. Perfect for daily use.

👑 const – Loyal and Determined

const pi = 3.14;
pi = 3.15; // ERROR!

const cannot be reassigned.

But here’s the twist ⚠️
If it’s an object, its internal values can change:

const user = {
  name: "Cansu"
};

user.name = "Ahmet";

console.log(user.name); // Ahmet

You can’t replace the box, but you can rearrange what’s inside it.

👴 var – A Guest from the Past

var message = "Hello";

var was used in the old days.
But it can be confusing because of scope behavior.

Recommendation: In modern projects, stick with let and const.

🔍 Scope – The Boundaries of Your Code

if (true) {
  let number = 5;
}

console.log(number); // ERROR!

let has block scope.
If it’s defined inside {}, it cannot escape.

But if you use var:

if (true) {
  var number = 5;
}

console.log(number); // 5

And that’s where surprises begin 😅

🔢 2. Data Types – The Characters of JavaScript

String

let name = "Cansu";

A string is text.

Template literal example:

let age = 25;
console.log(`My name is ${name} and I am ${age} years old`);

Use backticks (`) to embed variables inside strings.

Number

let price = 99.99;

In JavaScript, integers and floats are both just number.

Boolean

let isActive = true;

Only two values exist: true or false.

Undefined vs Null

let x;
console.log(x); // undefined

Undefined → Declared but not assigned.

let y = null;

Null → Intentionally empty.

Difference:
Undefined happens accidentally.
Null is a conscious decision.

➕ 3. Operators – More Than Just Math

=== vs ==

console.log(5 == "5");   // true
console.log(5 === "5");  // false

== performs type coercion.
=== checks both value and type.

In professional development, always use ===.

Logical Operators

let age = 20;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You can drive 🚗");
}

• && → and
• || → or
• ! → not

🔀 4. Conditions – Teaching JavaScript to Decide

let grade = 75;

if (grade >= 90) {
  console.log("AA");
} else if (grade >= 70) {
  console.log("BB");
} else {
  console.log("You failed 😅");
}

Conditions are evaluated from top to bottom.

Ternary Operator – Mini If

let age = 18;
let result = age >= 18 ? "Adult" : "Child";

console.log(result);

This is a shorter version of if.

🔁 5. Loops – The Patient Robot

For Loop

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Structure:

• Initialization
• Condition
• Increment

While Loop

let i = 0;

while (i < 3) {
  console.log("Hello");
  i++;
}

Runs as long as the condition is true.

Warning: Don’t create infinite loops 😅

🧩 6. Functions – The Superpower of Code

Regular Function

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

console.log(add(3, 5)); // 8

Explanation:

• a and b are parameters
• return sends the result back

Arrow Function

const multiply = (a, b) => a * b;

console.log(multiply(4, 5));

Shorter. Cleaner. Modern.

Default Parameter

function greet(name = "Guest") {
  console.log(`Hello ${name}`);
}

greet(); // Hello Guest

📦 7. Array – Creating Lists

let fruits = ["Apple", "Pear", "Banana"];

console.log(fruits[0]); // Apple

Looping Through an Array

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Modern version:

fruits.forEach(fruit => console.log(fruit));

🧠 8. Object – Modeling Real Life

let user = {
  name: "Cansu",
  age: 25,
  active: true
};

console.log(user.name);

An object is a key-value structure.

⚡ Mini Project – Small User System

const user = {
  name: "Cansu",
  age: 25,
  isLoggedIn: true
};

function checkUser(person) {
  if (person.isLoggedIn && person.age >= 18) {
    return `Welcome ${person.name} 🎉`;
  } else {
    return "Access denied.";
  }
}

console.log(checkUser(user));

What does this project include?

• Object
• Function
• Condition
• Boolean
• Template literal

Everything works together.

🎯 Professional Tips

✅ Always use ===
✅ Prefer const whenever possible
✅ Break your code into small pieces
✅ Write comments
✅ Read error messages (listen to them before Googling 😄)

🚀 Conclusion

Learning JavaScript syntax is like learning a language.

At first, it feels hard.
Then you form sentences.
Then you write stories.
Then you build applications.

And one day you write:

console.log("I now know JavaScript 🚀");

And this time… you really do.