JavaScript Syntax and Basics

Before diving into complex topics, it’s essential to understand its structure and syntax.

In this article, we’ll discuss case sensitivity, semicolons, indentation, variable declarations, and primitive data types.

JavaScript, like many other programming languages, has a specific set of rules around syntax, adhering to these rules is crucial for writing clean and functional code.

Comments

Throughout these tutorial articles, you will come across code snippets I will be adding output or any special cases or notes as comments.

Comments are pieces of text in code base that are ignored by the JS engine during code execution. You can use them to explain logic, approach, possible conditions that code addresses, and can use to comment out code for quick debugging etc.

There is single-line comment and multi-line comment, you can use any based on your requirement.

// This is a single-line comment

/* This is a multi-line comment
It can span across multiple lines */

I will be adding values of console.log() on comments in snippets through out the articles.

Case Sensitivity

JavaScript is case-sensitive, which means variables, function names, or any identifiers with different cases are considered distinct.

let firstName = "John";
let firstname = "Doe";
console.log(firstName); //  John
console.log(firstname); //  Doe

Though they look similar, firstName and firstname are interpreted as two separate variables due to case sensitivity.

Semicolons

In JavaScript, semicolons are used to terminate statements. While they are optional in most cases due to automatic semicolon insertion, it’s a good practice to include them to avoid unintended bugs.

let x = 5; // Recommended

Indentation

Proper indentation enhances the readability and maintainability of your code, making it easier to read and debug by ourselves and others.

function greet(name) {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log("Hello!");
  }
}

Declaring Variables

Variables are used to store data. In JavaScript, you can declare variables using three keywords

1. var
2. let
3. const

var

var is the old way of declaring variables in JavaScript. It has function scope, meaning it is visible throughout the function in which it is declared, regardless of block scope. It can also be redeclared and reassigned hence modern JavaScript discourages using var due to its scope limitations and tendency to cause bugs.

var name = "John";
console.log(name); //  John
var name = "Doe"; // Redeclaration allowed
console.log(name); //  Doe

let

let is block-scoped, which means it is limited to the block (or curly braces) in which it is declared. It is a safer and more modern way to declare variables that can be reassigned.

let age = 25;
console.log(age); //  25
age = 26; // Reassignment allowed
console.log(age); // 26

const

const is also block-scoped but is used to declare variables that cannot be reassigned. It enforces immutability for primitive types. When declaring constants, always initialize them at the time of declaration since they cannot be left undefined (IDEs will show error).

const pi = 3.14;
console.log(pi); // 3.14
pi = 3.14159; // This will throw an error: Assignment to constant variable

Primitive Data Types in JavaScript

There are seven primitive data types in JavaScript. These types represent simple, immutable values and are the building blocks of the language.

1. string
2. number
3. boolean
4. null
5. undefined
6. symbol
7. bigint

1. string

Strings are sequences of characters, enclosed within single ('), double ("), or backticks (`).

let singleQuote = "Hello";
let doubleQuote = "World";
let templateLiteral = `Hello, ${doubleQuote}!`; // String interpolation
console.log(templateLiteral); //  Hello, World!

2. number

The number type includes integers and floating-point numbers.

let age = 30; // Integer
let price = 19.99; // Floating-point number
console.log(age + price); //  49.99

JavaScript doesn’t differentiate between integers and floats; both are treated as number.

3. boolean

Booleans represent true or false and are often used for conditional logic.

let isActive = true;
let isComplete = false;
console.log(isActive && isComplete); //  false

4. null

null represents the intentional absence of a value.

let result = null;
console.log(result); //  null

5. undefined

undefined means a variable has been declared but not yet assigned a value.

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

6. symbol

Introduced in ES6, symbol represents a unique and immutable value, often used for object keys.

const uniqueKey = Symbol("key");
console.log(uniqueKey); // Symbol(key)

7. bigint

Represents integers with arbitrary precision, used for values larger than Number.MAX_SAFE_INTEGER. Introduced in ES11.

let largeNumber = 1234567890123456789012345678901234567890n; // Use `n` at the end
console.log(largeNumber); // 1234567890123456789012345678901234567890n