DAY-1 || JavaScript Basic

Day 1: JavaScript Basics

1. What is JavaScript?

JavaScript is a versatile, high-level programming language primarily (mostly / mainly) used for enhancing web pages. It allows developers to create dynamic content, control multimedia, animate images, and much more. Unlike HTML and CSS, which are used for structuring and styling, JavaScript adds interactivity to web applications.

Versatile : Can be used in many different ways.

High-Level Programming Language : Easier for human to read and write compared to low-level language.

Dynamics : Can change and adapt easily.

Enhancing : Make something better or improve it.

2. Setting Up Your Environment

To start coding in JavaScript, you can set up your environment in a few different ways:

Browser Console:
- Open your browser (e.g., Chrome).
- Right-click anywhere on a page and select "Inspect."
- Click on the "Console" tab to start typing JavaScript code.
Code Editors:

Visual Studio Code: A popular choice among developers that offers many extensions.
Sublime Text: Lightweight and customizable.
Online Editors: Platforms like CodePen or JSFiddle allow you to write and share JavaScript code easily.

3. Your First JavaScript Code

Let’s write your first JavaScript line:

console.log("Hello, World!");

Explanation:

console.log() is a method that outputs messages to the console, which is useful for debugging and tracking values.

4. Core Concepts

a. Variables

Variables are containers for storing data values. You can declare variables using:

var: Function-scoped or globally scoped; older way to declare variables.
let: Block-scoped; introduced in ES6 (ECMAScript 2015) and preferred for most cases.
const: Also block-scoped; used for constants that won’t change.

Function scope: Visible inside the function only.

Global scope: Visible everywhere in the code.

Block scope: Visible only inside a specific block of code (like {} of loops or conditions).

Example:

let name = "Tahir";  // You can change this later
const age = 25;     // This value cannot change
var isLearning = true; // Can be re-assigned

Trick:

Use const by default. If you know the variable value will not change, use const. Use let if it might change.

b. Data Types

Data types define the type of data that can be stored in a variable. JavaScript has several built-in data types:

String: A sequence of characters wrapped in quotes (single, double, or backticks).
- Example:
```
let greeting = "Hello, World!";
```
Number: Numeric values, including integers and floats (decimal numbers).
- Example:
```
let score = 100; // Integer
let price = 19.99; // Float
```
Boolean: Represents a value of either true or false.
- Example:
```
let isJavaScriptFun = true; 
```
Undefined: A variable that has been declared but has not been assigned a value.
- Example:
```
let nothingHere; // This variable is undefined
```
Null: Represents an intentional absence of any value; it's an assignment value.
- Example:
```
let emptyValue = null; // Explicitly set to null
```
Symbol: A unique and immutable value that is often used as an identifier for object properties (introduced in ES6).
- Example:
```
const sym = Symbol('description'); // Creates a new unique symbol
```
BigInt: A numeric data type that can represent integers larger than 2^53 - 1.
- Example:
```
const largeNumber = BigInt(123456789012345678901234567890);
```

Trick:

Use typeof to check the data type of a variable:

console.log(typeof greeting); // Outputs: string

c. Operators

Operators perform operations on variables and values.

Arithmetic Operators: Used for calculations.
- + (addition), - (subtraction), * (multiplication), / (division), % (modulus).
Example:
```
let a = 10;
let b = 5;
let sum = a + b; // 15
```
Assignment Operators: Used to assign values to variables.
- = (assign), += (add and assign), -= (subtract and assign).
Example:
```
let x = 10;
x += 5; // x now equals 15
```
Comparison Operators: Used to compare values.
- == (equal), === (strict equal), != (not equal), !== (strict not equal), > (greater than), < (less than).
Example:
```
let isEqual = (x === 15); // true
```

Trick:

Use === instead of == to avoid type coercion issues.

coercion : Coercion means automatically converting one type of value to another type, like turning a string into a number.

d. Control Structures

Control structures manage the flow of the program.

If-Else Statements: Used to execute code based on a condition.

Example:

let score = 80;

if (score >= 60) {
    console.log("You passed!");
} else {
    console.log("You failed!");
}

Switch Statements: Used for multiple conditions.

Example:

let day = 3;
switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    default:
        console.log("Not a valid day");
}

Loops: Used to execute code multiple times.

For Loop:

for (let i = 0; i < 5; i++) {
    console.log(i); // Outputs: 0, 1, 2, 3, 4
}

While Loop:

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

Trick:

Always ensure that your loop has a condition that will eventually become false to avoid infinite loops.

e. Functions

Functions are blocks of code designed to perform a particular task. You can define a function using the function keyword or as an arrow function.

Function Declaration:

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Tahir")); // Outputs: Hello, Tahir!

Arrow Function:

const add = (a, b) => a + b;
console.log(add(5, 3)); // Outputs: 8

Trick:

Arrow functions have a shorter syntax and do not have their own this context, which can be useful in certain scenarios.

5. Practice Tasks

Log Your Name:
```
let name = "Tahir";
console.log(name);
```

Sum Function:

function sum(a, b) {
    return a + b;
}
console.log(sum(10, 20)); // Outputs: 30

Favorite Fruits:

let fruits = ["apple", "banana", "cherry"];
fruits.forEach(fruit => {
    console.log(fruit);
});

6. Resources for Further Learning

MDN Web Docs: Comprehensive documentation on JavaScript and web development.
JavaScript.info: A modern tutorial covering JavaScript from the basics to advanced concepts.
Codecademy: Offers interactive JavaScript courses for beginners.

Conclusion

On our first day, we've learned about JavaScript basics, including variables, data types, operators, control structures, and functions. These foundational concepts are crucial for building interactive web applications and will serve us well in our coding journey.

MICRO CODER ✓

Search This Blog