Forem: Shaon Kabir

Understanding JavaScript Data Types

Shaon Kabir — Sun, 21 Apr 2024 09:43:33 +0000

Exploring Data Types in JavaScript

JavaScript, as a dynamically-typed language, offers a variety of data types that serve as the building blocks for storing and manipulating data. Understanding these data types is fundamental for effective programming and data handling. In this article, we'll delve into the diverse range of data types supported by JavaScript, including both primitive and non-primitive types.

Primitive Data Types

Primitive data types are the fundamental data types built into the JavaScript language. They are immutable, meaning their values cannot be changed once they are created. Let's explore each primitive data type:

String: Represents sequences of characters enclosed within single ('') or double ("") quotes. Strings are commonly used for representing textual data.
```
let handleName = "shaonkabir8";
```
Number: Represents numeric values, including integers and floating-point numbers. Numbers are used for mathematical computations and numerical data representation.
```
let age = 26;
```
Boolean: Represents logical values indicating true or false. Booleans are primarily used for conditional statements and logical operations.
```
let isMarried = false;
```
Undefined: Represents a variable that has been declared but not assigned a value. It indicates the absence of a value.
```
let city;
```
Null: Represents the intentional absence of any value. It is often used to signify the absence of an object value.
```
let phoneNumber = null;
```
Symbol: Represents a unique and immutable data type introduced in ECMAScript 6 (ES6). Symbols are often used as property keys in objects to avoid naming conflicts.
```
// Creating symbols with and without descriptions
let symbol1 = Symbol();
let symbol2 = Symbol("key");
```
BigInt: Represents numeric values with arbitrary precision beyond the range of the Number type. BigInts are created by appending n to the end of an integer literal or by calling the BigInt() constructor.
```
// Creating BigInt values
let bigInt1 = 1234567890123456789012345678901234567890n;
let bigInt2 = BigInt("9007199254740991");
```

Non-Primitive Data Types

Non-primitive data types, also known as reference data types, are more complex data structures compared to primitive types. They are mutable, meaning their values can be modified after creation. Let's explore some common non-primitive data types:

Array: Represents ordered collections of elements, which can be of any data type. Arrays are mutable and can dynamically grow or shrink in size.
```
let hobbies = ["coding", "reading", "gaming"];
```
Object: Represents collections of key-value pairs, where each key is a unique identifier for its corresponding value. Objects are mutable and can contain various data types, including other objects and arrays.
```
let person = {
  firstName: "Shaon",
  lastName: "Kabir",
  age: 26,
  isMarried: false,
};
```
Function: Represents reusable blocks of code designed to perform specific tasks. Functions are first-class citizens in JavaScript and can be passed around as arguments or returned from other functions.
```
function greet(name) {
  console.log("Hello, " + name + "!");
}
```

Understanding the distinction between primitive and non-primitive data types is crucial for effective data manipulation and programming in JavaScript. Leveraging JSDoc annotations can provide clear documentation of the data types used in your code, enhancing readability and maintainability.

Read more about the core concepts of Javascript (Data Types) throughout several different resources. Few important resources is shared to learn more efficiently.

1.Data Type - javascript.info
2.MDN Web Docs

Decoding JavaScript Variables: A Comprehensive Overview

Shaon Kabir — Sun, 21 Apr 2024 08:39:25 +0000

In the world of JavaScript programming, variables play a crucial role in storing and manipulating data. Understanding how variables work is essential for any developer looking to master JavaScript. In this article, we'll explore the fundamentals of variables in JavaScript, covering everything from declaration to best practices in coding standards.

What are Variables?
Declaring Variables
Variable Naming Conventions
Variable Scope
Hoisting
Coding Standards for Variables
- 6.1. Variable Naming Conventions
- 6.2. Consistent Use of Keywords
- 6.3. Avoid Magic Numbers and Strings
- 6.4. Maintain Proper Indentation and Formatting
- 6.5. Document Your Code
- 6.6. Follow Established Style Guides
Conclusion

1. What are Variables?

Variables are containers for storing data values in JavaScript. They are like labeled boxes where you can store and retrieve information as needed throughout your code.

2. Declaring Variables In JavaScript

Variables are declared using keywords such as var, let, or const. Each keyword has its own scope and behavior, impacting how the variable can be used within the code.

Example:

// Declaring variables using var, let, and const
var firstName = "Shaon";  // Function-scoped variable
let lastName = "Kabir";    // Block-scoped variable
const age = 26;          // Constant variable
const handleName = 'shaonkabir8';          // Constant variable

3. Variable Naming Conventions

Follow semantic and SEO-friendly naming conventions when naming variables. Use descriptive names that convey the purpose of the variable, and adhere to camelCase or snake_case for multi-word variable names.

Example:

// Variable naming conventions
let firstName = "Shaon";   // camelCase
let last_name = "Kabir";    // snake_case
const MAX_USERS = 10;     // Uppercase for constants

4. Variable Scope

Variable scope determines where in your code a variable is accessible. JavaScript has function scope and block scope, which impact the visibility and lifetime of variables.

Example:

// Variable scope
function greet() {
  var message = "Hello";  // Function-scoped variable
  console.log(message);
}

greet();                  // Output: Hello
console.log(message);     // Error: message is not defined

Learn more about JavaScript Scope

5. Hoisting

JavaScript hoists variable declarations to the top of their containing scope during compilation. Understanding hoisting is important to avoid unexpected behavior in your code.

Example:

// Hoisting
console.log(age);         // Output: undefined
var age = 26;

6. Coding Standards for Variables

Maintaining consistent coding standards is essential for writing clean, readable, and maintainable code. By following established conventions, you ensure that your code is not only functional but also easy to understand and collaborate on with other developers. Here are some key aspects of coding standards for variables in JavaScript:

6.1. Variable Naming Conventions

Choose descriptive names that accurately convey the purpose of the variable. Use camelCase or snake_case for multi-word variable names, depending on the convention followed in your project or organization.

Example:

// Variable naming conventions
let firstName = "Shaon";   // camelCase
let last_name = "Kabir";    // snake_case
const MAX_USERS = 10;     // Uppercase for constants

6.2. Consistent Use of Keywords

Use var, let, and const appropriately based on the intended scope and mutability of the variable. Stick to a consistent usage pattern throughout your codebase to avoid confusion.

Example:

// Consistent Use of Keywords
// Use let for variables that will be reassigned, and const for variables that won't be reassigned.
let count = 0;  // Variable can be reassigned
const MAX_LIMIT = 100;  // Constant variable that won't be reassigned

// Use var sparingly, as it has function scope and can lead to unexpected behavior.
var globalVariable = "I'm a global variable";  // Avoid using var unless necessary

6.3. Avoid Magic Numbers and Strings

Avoid using magic numbers and strings directly in your code. Instead, assign them to descriptive variables or constants to improve readability and maintainability.

Example:

// Avoid Magic Numbers and Strings
const MAX_USERS = 10;
let userCount = 0;

if (userCount < MAX_USERS) {
  console.log("Room available for more users.");
}

6.4. Maintain Proper Indentation and Formatting

Follow consistent indentation and formatting guidelines to enhance code readability. Use tools like ESLint or Prettier to enforce coding standards automatically.

Example:

// Maintain Proper Indentation and Formatting
// Use consistent indentation to improve code readability.
function calculateSum(a, b) {
    return a + b;
}

// Properly format your code to follow conventions and enhance readability.
const user = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

// Utilize tools like ESLint or Prettier to enforce coding standards automatically.

6.5. Document Your Code

Include comments and documentation to explain the purpose and usage of variables, especially if their meaning might not be immediately obvious to other developers. Use JSDoc annotations to provide structured documentation for functions and variables.

Example:

// Document Your Code
// Add comments to explain the purpose and usage of variables.
const PI = 3.14;  // Represents the mathematical constant pi

/**
 * Represents a circle with a given radius.
 * @param {number} radius - The radius of the circle.
 * @returns {number} - The area of the circle.
 */
function calculateCircleArea(radius) {
    // Calculate the area of the circle using the formula: pi * radius^2
    return PI * radius ** 2;
}

6.6. Follow Established Style Guides

Adopt established style guides such as Airbnb JavaScript Style Guide or Google JavaScript Style Guide to maintain consistency across your codebase. These style guides provide comprehensive rules and recommendations for variable naming, declaration, and usage.

Example:

// Follow Established Style Guides
// Adhere to established style guides such as Airbnb JavaScript Style Guide or Google JavaScript Style Guide to maintain consistency across your codebase.
// These style guides provide comprehensive rules and recommendations for variable naming, declaration, and usage.

// Example: Airbnb JavaScript Style Guide
// https://github.com/airbnb/javascript

/**
 * Represents a person with a given name and age.
 * @typedef {Object} Person
 * @property {string} name - The name of the person.
 * @property {number} age - The age of the person.
 */

/**
 * Create a new person.
 * @param {string} name - The name of the person.
 * @param {number} age - The age of the person.
* @returns {Person} - The newly created person object.
 */
function createPerson(name, age) {
    return { name, age };
}

const person1 = createPerson("John", 30);
const person2 = createPerson("Jane", 25);

console.log(person1);
console.log(person2);

By adhering to coding standards for variables, you contribute to the overall readability, maintainability, and quality of your JavaScript codebase. Consistent and well-documented code not only makes it easier for you to work with your own code but also facilitates collaboration with other developers on the project.

7. Conclusion

Variables are fundamental building blocks in JavaScript programming. By mastering the concepts of variable declaration, scope, hoisting, and coding standards, developers can write more efficient and maintainable code. Remember to follow best practices and conventions to ensure your code is not only functional but also easy to understand and collaborate on with other developers.

As you continue your journey in JavaScript development, remember to:

Practice regularly to reinforce your understanding of variables and related concepts.
Stay updated with the latest developments in JavaScript and programming practices.
Collaborate with other developers and learn from their experiences and insights.
Experiment with different coding styles and techniques to find what works best for you and your projects.

With dedication and perseverance, you'll continue to improve your skills and become a proficient JavaScript developer. Embrace the challenges, keep learning, and enjoy the journey of coding with JavaScript!

Happy coding!

Understanding JavaScript Scope

Shaon Kabir — Mon, 27 Apr 2020 08:11:04 +0000

What is Scope actually ?

Scoping is determining where variables, functions, and objects are accessible in your code during runtime. This means the scope of a variable(where it can be accessed) is controlled by the location of the variable declaration.

In JavaScript there are two types of scope:

Local Scope
Global Scope

Before jumping into Local Scope and Global Scope, Let's a have look on Block and Function

Here's a new keyword Block Scope / Function Scope. right ? What's these actually?
Well, It's defination is defined in itself. 😕 sounds crazy? Don't worry. I'll explain it now.

A Block is created with a pair of Curly braces { }

    function functionScope() {
        // This a Block Scope.
        // It's also a Function Scope.

        // All codes inside this function are `function scoped` along with `block scope`.
    }

    if (CONDITION) {
        // This is a Block Scope
    }

Local Scope:

If varibales, funcitons, objects are declared inside a Block, It's called Local Scope.That's mean, A local Scope is created inside a Block / Function


    function localScope() {
        // declear variables inside this block;
        const countryName = 'Bangladesh';

        console.log(`I love my country ${countryName}`); // I love my country Bangladesh
    }

    // if we print the variable outside of that block,
    console.log(`I love my country ${countryName}`); // Uncaught ReferenceError: countryName is not defined

Global Scope:

If variables, functions and objects are declared outside a curly brace/Globally, are called global scope.

    // declare our variables outside of any curly brace
    const name = 'Shaon Kabir';
    const age = 22;
    const married = false;


    function hello() {
        console.log(name) // Shaon Kabir
        console.log(age) // 22
        console.log(married) // false

        // we haven't declared anything here,
        // but we can still have access on our variables beacuse they are declared globlly.  
    }

    // We can print our variables value everywhere.
    console.log(name) // Shaon Kabir
    console.log(age) // 22
    console.log(married) // false

Global + Local Scope Example:

    // This function is created globally, we can get access on it from anywhere.
    function globalFunction() {

        // declear variables
        const language = "JavaScript";

        console.log("I am executing from GLOBAL function");

        // create a local function
        function localFunction() {
            console.log("I love to code in" + language);

            // Here, we have access to "language" variable because it's declared in `this`(localFunction) Parent scope
        }

        // Call innerFunction
        localFunction();
    }

    // What if happen, If we call the inner Function outside of global Function ?
    localFunction(); // Uncaught ReferenceError: localFunction is not defined

One last things, we've noticed that somethings is happending inside the localFunction. we've talked about Parent scope. Let's learn about it

Lexical Scoping:

✔ A relation between Parent Function and Child Function is called Lexical Scoping 🔥

Child can access Parent's Properties/variables/methods.

Here's globalFunction have a innerFunction named localFunction which is also a local function of globalFunction. That's mean, there no existance of localFunction outside of globalFunction. so we've to call this innerFunction inside the Block.
Also, variable language is declared outside of localFunction but, still it've the access on it. Because, In JavaScript, Child can access Parent's Properties/variables/methods.

This is my first blog post on dev community 🔥. If you find any typing mistake, sorry for that :(

Forem: Shaon Kabir

Understanding JavaScript Data Types

Exploring Data Types in JavaScript

Primitive Data Types

Non-Primitive Data Types

Decoding JavaScript Variables: A Comprehensive Overview

Table of Contents:

1. What are Variables?

2. Declaring Variables In JavaScript

3. Variable Naming Conventions

4. Variable Scope

5. Hoisting

6. Coding Standards for Variables

6.1. Variable Naming Conventions

6.2. Consistent Use of Keywords

6.3. Avoid Magic Numbers and Strings

6.4. Maintain Proper Indentation and Formatting

6.5. Document Your Code

6.6. Follow Established Style Guides

7. Conclusion

Understanding JavaScript Scope

What is Scope actually ?

In JavaScript there are two types of scope:

Local Scope:

Global Scope:

Lexical Scoping: