Overview
Tags: webdev, javascript, beginners, programming
Published: 2023-05-27 05:23:53

All programming languages have almost similar concepts and rules, but there are some differences in syntax and some other things. Here we will learn the basic rules and overview of concepts like variables, data types, operators, loops, functions, etc.

## Basic Rules

Here are some basic syntax rules for JavaScript:

- It is **case-sensitive**, which means that variables and function names must be spelled exactly as they were defined.
- Statements in JavaScript are terminated with a semicolon `;` (this is optional, if you don't put it, it won't cause any syntax error)
- It uses curly braces to define blocks of code, such as the bodies of functions and control statements.
- It uses the `//` syntax for single-line comments and the `/* ... */` syntax for multi-line comments.
- It uses the `=` operator to assign values to variables.

## Basic Concepts

Here are some basic concepts of JavaScript, which are used in almost all programming languages. We will learn about these concepts in detail in the next sections as well.

### Variables:

In JavaScript, a variable is a named container that stores a value, which can be a primitive value (such as a `number`, `string`, `boolean`, `null`, or `undefined`) or non-primitive value (such as an `object`, `array`, or `function`).

To declare a variable in JavaScript, you use the `var`, `let`, or `const` keyword, followed by the name of the variable. Here's an example:

```js
// using var
var age = 30;

// using let
let name = "John";

// using const
const isAdult = true;
```

The `var` keyword is used to declare a variable that has function scope or global scope. The `let` keyword is used to declare a variable that has block scope (such as inside function, loop or if statement). The `const` keyword is used to declare a variable that has block scope and can't be reassigned.

### Data Types:

JavaScript has a few different data types, including `numbers`, `strings`, `booleans`, `object`, and `null`. Here are some examples:

```js
const num = 5; // Number
const str = "hello"; // String
const bool = true; // Boolean
const nothing = null; // Null
const object = { name: "Rizwan" }; // Object
const array = ["C", "C++", "Java", "JavaScript"]; // Object
```

JavaScript is a **dynamically typed** language, which means that the data type of variable can change at any time. For example, the following code is valid in JavaScript:

```js
let x = 5; // x is a number
x = "hello"; // x is now a string
```

### Operators:

JavaScript has various operators that can be used to perform operations on values. For example, the `+` operator can be used to add two numbers together, and the `==` operator can be used to check if two values are equal.

Here are some examples of operators in JavaScript:

```js
const x = 5;
const y = 2;

// Arithmetic operators
console.log(x + y); // 7
console.log(x - y); // 3
console.log(x * y); // 10
console.log(x / y); // 2.5
console.log(x % y); // 1
console.log(x ** y); // 25

// Assignment operators
x = x + 2; // 7
x += 2; // 9

// Comparison operators
console.log(x == y); // false
console.log(x != y); // true
console.log(x > y); // true
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // false

// Logical operators
console.log(x == 5 && y == 2); // true
console.log(x == 5 || y == 3); // true
console.log(!(x == y)); // true
```

For more information about operators, see [Operators](/docs/languges/js/basics/operators).

### Conditional Statements:

Conditional statements allow you to execute different code blocks based on whether a condition is `true` or `false`. The most basic conditional statement is the `if` statement, which has the following syntax:

```js
if (1 == 1) {
	// Code to execute if condition is true
}
```

The `if` statement can also have an `else` clause, which is executed if the condition is `false`:

```js
if (0 == 1) {
    // Code to execute if condition is true
} else {
    // Code to execute if condition is false
}
```

You can also use the `else if` clause to check for multiple conditions:

```js
if (0 == 1) {
    // Code to execute if condition is true
} else if (1 == 2) {
    // Code to execute if condition is true
} else {
    // Code to execute if condition is false
}
```

### Loops

In JavaScript, a loop is a control structure that allows you to execute a block of code repeatedly, based on a specified condition. Loops are useful when you want to perform the same operation multiple times, or when you want to process a large amount of data.

There are several types of loops in JavaScript, including the `for` loop, the `while` loop, the `do-while` loop, the `for-in` loop, and the `for-of` loop. Each type of loop has its own syntax and characteristics, and you could choose the one that best suits your needs.

For example, you can use a for loop to iterate over the elements of an array and perform a certain operation on each element:

```js
const numbers = [1, 2, 3, 4, 5];

const counter = 0;
while (counter < number.length) {
    console.log(numbers[counter]);
    counter++;
}

for (let i = 0; i < numbers.length; i++) {
	console.log(numbers[i]);
}
```

In this example, the `for` loop is used to iterate over the elements of the `numbers` array. The `i` variable is used to keep track of the current index of the array. The loop will continue to execute as long as the value of `i` is less than the length of the array.

### Functions:

Functions are blocks of code that can be defined and then called later. They are useful for organizing and reusing code. Here's an example of a function that takes two parameters and returns their sum:

```js
function add(x, y) {
	return x + y;
}

let result = add(2, 3); // result will be 5
```

In this example, the `add` function takes two parameters (`x` and `y`) and returns their sum. The function is then called with the arguments `2` and `3`, and the result is stored in the `result` variable.

## Summary

In this article, we learned about the basic rules and overview of concepts like variables, data types, operators, loops, functions, etc.