Home » JavaScript » Basics » Page 2
Category:

Basics

Basics

JavaScript BigInt: A Complete Tutorial

written by utmoker71

JavaScript's BigInt is a built-in object that provides a way to represent whole numbers larger than the maximum safe integer limit (Number.MAX_SAFE_INTEGER, which is 253 – 1). While regular numbers in JavaScript (the Number type) are represented as 64-bit floating-point values, BigInt allows you to work with arbitrarily large integers.

This tutorial will introduce you to BigInt, show you how to create and use it, and highlight some of its unique characteristics.

1. What is BigInt?

BigInt is a special numeric type in JavaScript that can represent integers of arbitrary precision. It is particularly useful when dealing with very large numbers that exceed JavaScript's maximum safe integer (Number.MAX_SAFE_INTEGER).

2. Creating a BigInt

You can create a BigInt in two ways:

By appending an n to the end of an integer literal.
By using the BigInt() function.

Example 1: Creating a BigInt

// Using the `n` suffix
const bigIntLiteral = 1234567890123456789012345678901234567890n;

// Using the `BigInt` constructor
const bigIntConstructor = BigInt('1234567890123456789012345678901234567890');

console.log(bigIntLiteral); // Output: 1234567890123456789012345678901234567890n
console.log(bigIntConstructor); // Output: 1234567890123456789012345678901234567890n

Explanation: The n suffix in the first example directly creates a BigInt. The BigInt() constructor in the second example converts a string to a BigInt.

3. Basic Arithmetic with BigInt

BigInt supports basic arithmetic operations such as addition, subtraction, multiplication, division, and exponentiation. However, operations between BigInt and regular numbers (of type Number) are not allowed; both operands must be of the same type.

Example 2: Arithmetic with BigInt

const bigInt1 = 12345678901234567890n;
const bigInt2 = 98765432109876543210n;

const sum = bigInt1 + bigInt2; // Addition
const difference = bigInt2 - bigInt1; // Subtraction
const product = bigInt1 * bigInt2; // Multiplication
const quotient = bigInt2 / bigInt1; // Division
const remainder = bigInt2 % bigInt1; // Modulus

console.log(sum); // Output: 111111111011111111100n
console.log(difference); // Output: 86419753208641975320n
console.log(product); // Output: 1219326311370217952237463801111263526900n
console.log(quotient); // Output: 8n
console.log(remainder); // Output: 6172839510864197530n

Explanation: The results of arithmetic operations with BigInt are also BigInt. Notice that division using / results in the nearest whole number, truncating any decimal.

Example 3: Mixing BigInt and Regular Numbers

const bigInt = 10n;
const number = 5;

try {
  console.log(bigInt + number); // This will throw an error
} catch (error) {
  console.error(error); // Output: TypeError: Cannot mix BigInt and other types
}

// Convert `number` to `BigInt` before performing operations
const sum = bigInt + BigInt(number);
console.log(sum); // Output: 15n

Explanation: You cannot mix BigInt and regular numbers in arithmetic operations. To perform operations, you need to explicitly convert the Number to a BigInt using BigInt().

4. Comparison Operations with BigInt

Comparison operations like >, <, >=, <=, ==, and === work between BigInt and Number, but they must be used with caution.

Example 4: Comparing BigInt and Numbers

const bigInt = 10n;
const number = 10;

console.log(bigInt > 5); // Output: true
console.log(bigInt === 10n); // Output: true
console.log(bigInt === number); // Output: false (strict equality checks type)
console.log(bigInt == number); // Output: true (loose equality converts types)

Explanation: === checks both value and type, so 10n === 10 returns false. The == operator performs type conversion, so 10n == 10 returns true.

5. Type Conversion with BigInt

You can convert a BigInt to a regular Number using Number() and vice versa using BigInt().

Example 5: Converting Between BigInt and Number

const bigInt = 12345678901234567890n;
const number = Number(bigInt);

console.log(number); // Output: 1.2345678901234568e+19

const bigIntFromNumber = BigInt(12345);
console.log(bigIntFromNumber); // Output: 12345n

Explanation: Converting a large BigInt to a Number can lead to a loss of precision because Number can only safely represent integers up to 2^53 – 1.

6. Handling BigInt with Math Methods

The Math object methods (e.g., Math.pow(), Math.sqrt()) do not support BigInt. To perform such operations on large numbers, you need to implement your own logic or use libraries like bigint-math.

Example 6: Using BigInt for Exponentiation

You can use the ** operator for exponentiation with BigInt.

const base = 2n;
const exponent = 100n;

const power = base ** exponent;
console.log(power); // Output: 1267650600228229401496703205376n

Explanation: The ** operator works with BigInt for exponentiation.

7. Limitations of BigInt

No Decimals: BigInt is for whole numbers only; it does not support fractional values.

const invalidBigInt = 3.14n; // SyntaxError: Invalid or unexpected token

Cannot Use with Built-In Math Functions: Math functions like Math.sqrt() do not work with BigInt.

const bigInt = 16n;

try {
  console.log(Math.sqrt(bigInt)); // Throws a TypeError
} catch (error) {
  console.error(error); // Output: TypeError: Cannot convert a BigInt value to a number
}

Limited Compatibility: You need to be careful when using BigInt in conjunction with other libraries or functions that expect a Number.

8. Practical Example: Large Integer Calculations

Example 7: Factorial Calculation with BigInt

function factorial(n) {
  let result = 1n; // Initialize as BigInt

  for (let i = 1n; i <= n; i++) {
    result *= i;
  }

  return result;
}

const num = 20n;
console.log(`Factorial of ${num} is:`, factorial(num)); // Output: Factorial of 20 is: 2432902008176640000n

Explanation: This example calculates the factorial of a large number using BigInt. Using BigInt allows the computation of very large integers without losing precision.

Conclusion

BigInt is a powerful tool for working with large integers in JavaScript, allowing computations that would otherwise exceed the limits of the Number type.

While it has some limitations, such as incompatibility with fractional numbers and built-in math functions, BigInt provides a simple way to handle large integer calculations accurately.

By understanding how to use BigInt effectively, you can perform a wide range of numerical operations safely without worrying about integer overflow.

Feel free to explore these examples and use BigInt when dealing with large numbers in your JavaScript applications!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Numbers: A Comprehensive Tutorial

written by utmoker71

JavaScript numbers are a versatile and crucial part of the language. They represent both integers and floating-point numbers and come with a variety of methods and properties to perform operations.

This tutorial will introduce JavaScript numbers, how to use them, and demonstrate several built-in methods for working with numeric data.

1. Basic Usage of Numbers in JavaScript

In JavaScript, numbers are represented using the 64-bit floating-point format. This allows for the representation of both integers and floating-point (decimal) numbers.

Example 1: Defining Numbers

// Integer
const integerNumber = 42;

// Floating-point number
const floatingPointNumber = 3.14;

console.log(integerNumber); // Output: 42
console.log(floatingPointNumber); // Output: 3.14

Explanation: JavaScript numbers can be integers or decimals. Both are represented using the Number type.

2. Number Properties and Constants

JavaScript provides several built-in properties and constants for numbers:

Number.MAX_VALUE: The largest positive number that can be represented.
Number.MIN_VALUE: The smallest positive number that can be represented.
Number.POSITIVE_INFINITY: Represents infinity.
Number.NEGATIVE_INFINITY: Represents negative infinity.
Number.NaN: Represents “Not-a-Number.”

Example 2: Using Number Properties

console.log(Number.MAX_VALUE); // Output: 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // Output: 5e-324
console.log(Number.POSITIVE_INFINITY); // Output: Infinity
console.log(Number.NEGATIVE_INFINITY); // Output: -Infinity
console.log(Number.NaN); // Output: NaN

3. Number Methods

3.1 toString() Method

Converts a number to a string. You can optionally specify a base (radix) for the conversion (e.g., binary, octal, hexadecimal).

Example 3: Using toString()

const number = 255;

console.log(number.toString()); // Output: '255'
console.log(number.toString(2)); // Output: '11111111' (binary)
console.log(number.toString(16)); // Output: 'ff' (hexadecimal)

3.2 toFixed() Method

Formats a number to a specified number of decimal places and returns it as a string.

Example 4: Using toFixed()

const pi = 3.14159;

console.log(pi.toFixed(2)); // Output: '3.14'
console.log(pi.toFixed(4)); // Output: '3.1416'

Explanation: The toFixed() method rounds the number to the specified decimal places.

3.3 toPrecision() Method

Formats a number to a specified length, including both the integer and decimal parts.

Example 5: Using toPrecision()

const num = 123.456;

console.log(num.toPrecision(4)); // Output: '123.5'
console.log(num.toPrecision(6)); // Output: '123.456'
console.log(num.toPrecision(2)); // Output: '1.2e+2'

Explanation: toPrecision() provides a way to format a number to a specific number of significant digits.

3.4 Number.isInteger() Method

Checks if a value is an integer.

Example 6: Using Number.isInteger()

console.log(Number.isInteger(42)); // Output: true
console.log(Number.isInteger(3.14)); // Output: false
console.log(Number.isInteger('42')); // Output: false
Explanation: Number.isInteger() returns true if the number is an integer; otherwise, it returns false.

3.5 Number.isNaN() Method

Determines if a value is NaN (Not-a-Number).

Example 7: Using Number.isNaN()

console.log(Number.isNaN(NaN)); // Output: true
console.log(Number.isNaN(42)); // Output: false
console.log(Number.isNaN('Hello')); // Output: false
console.log(Number.isNaN(Number('Hello'))); // Output: true

Explanation: Number.isNaN() is used to check if a value is NaN. Note that Number.isNaN() is different from the global isNaN() function because it does not attempt to convert the value to a number before checking.

3.6 parseInt() and parseFloat() Functions

parseInt(): Parses a string and returns an integer.
parseFloat(): Parses a string and returns a floating-point number.

Example 8: Using parseInt() and parseFloat()

console.log(parseInt('42')); // Output: 42
console.log(parseInt('3.14')); // Output: 3
console.log(parseFloat('3.14')); // Output: 3.14
console.log(parseInt('1010', 2)); // Output: 10 (binary to decimal)

Explanation: parseInt() can also accept a second argument to specify the base (radix) of the number in the string (e.g., binary, octal, hexadecimal).

4. Math Object for Numerical Operations

JavaScript provides the Math object for complex mathematical operations.

Example 9: Common Math Methods

console.log(Math.round(4.7)); // Output: 5 (Rounds to the nearest integer)
console.log(Math.ceil(4.2)); // Output: 5 (Rounds up)
console.log(Math.floor(4.8)); // Output: 4 (Rounds down)
console.log(Math.max(10, 20, 30)); // Output: 30 (Finds the maximum value)
console.log(Math.min(10, 20, 30)); // Output: 10 (Finds the minimum value)
console.log(Math.sqrt(16)); // Output: 4 (Square root)
console.log(Math.pow(2, 3)); // Output: 8 (2 raised to the power of 3)
console.log(Math.random()); // Output: Random number between 0 (inclusive) and 1 (exclusive)

5. Working with Infinity and NaN

JavaScript has Infinity and NaN to handle extreme or invalid operations.

Example 10: Using Infinity and NaN

console.log(1 / 0); // Output: Infinity
console.log(-1 / 0); // Output: -Infinity
console.log(0 / 0); // Output: NaN

console.log(Number.isFinite(100)); // Output: true
console.log(Number.isFinite(Infinity)); // Output: false

Explanation: Dividing a number by zero results in Infinity or -Infinity. Dividing zero by zero results in NaN. Number.isFinite() checks if a number is finite.

6. Number Conversion

You can convert other types to numbers using Number(), parseInt(), or parseFloat().

Example 11: Number Conversion

console.log(Number('123')); // Output: 123
console.log(Number('123.45')); // Output: 123.45
console.log(Number('abc')); // Output: NaN
console.log(parseInt('1010', 2)); // Output: 10 (Binary to decimal)
console.log(parseFloat('3.14')); // Output: 3.14

Explanation: Number() converts a string to a number. If the string is not a valid number, it returns NaN.

7. Handling Floating-Point Precision Issues

JavaScript uses floating-point arithmetic, which can sometimes lead to precision issues.

Example 12: Floating-Point Precision Issue

console.log(0.1 + 0.2); // Output: 0.30000000000000004

Explanation: Due to how floating-point arithmetic works, adding 0.1 and 0.2 results in a small precision error. A common workaround is to use the toFixed() method to round the number.

Example 13: Fixing Floating-Point Precision

const sum = 0.1 + 0.2;
console.log(sum.toFixed(2)); // Output: '0.30'

Conclusion

JavaScript numbers are flexible and versatile, offering numerous methods and properties for handling various numerical operations.

Understanding how to use these methods, handle special values like NaN and Infinity, and manage precision issues is crucial when working with numeric data.

This tutorial covers the essential aspects of JavaScript numbers, including creating, converting, and performing operations on them.

Experiment with these examples to gain confidence in using numbers in your JavaScript code!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Regular Expressions: A Comprehensive Tutorial

written by utmoker71

Regular expressions, often abbreviated as regex or regexp, are patterns used to match character combinations in strings. They are incredibly powerful for validating, searching, and manipulating text.

JavaScript provides a built-in RegExp object to work with regular expressions.

This tutorial will guide you through creating and using regular expressions in JavaScript with various examples.

1. Creating Regular Expressions

There are two ways to create a regular expression in JavaScript:

Literal notation: Enclosed between slashes (/pattern/flags).
Constructor function: Using new RegExp(‘pattern', ‘flags').

Example 1: Creating a Regular Expression

// Using literal notation
const regex1 = /hello/;

// Using the constructor
const regex2 = new RegExp('hello');

console.log(regex1.test('hello world')); // Output: true
console.log(regex2.test('hello world')); // Output: true

2. Common Regular Expression Flags

Flags are optional parameters that can change how the pattern is matched:

g: Global search (find all matches).
i: Case-insensitive search.
m: Multi-line search.
s: Allows . to match newline characters.
u: Enables full Unicode support.
y: “Sticky” search, matches only from the current position in the string.

Example 2: Using Flags

const regex = /hello/i; // Case-insensitive
console.log(regex.test('Hello world')); // Output: true

3. Testing Strings with test()

The test() method checks if a pattern exists in a string. It returns true or false.

Example 3: Testing for Matches

const regex = /cat/;
console.log(regex.test('The cat is here.')); // Output: true
console.log(regex.test('The dog is here.')); // Output: false

4. Finding Matches with match()

The match() method returns an array of all matches or null if no match is found.

Example 4: Finding All Matches

const text = 'The rain in Spain falls mainly in the plain.';
const regex = /in/g; // Global search for 'in'

const matches = text.match(regex);
console.log(matches); // Output: ['in', 'in', 'in']

5. Replacing Text with replace()

The replace() method searches a string for a match and returns a new string with the replacement.

Example 5: Simple Replacement

const text = 'Hello, World!';
const result = text.replace(/World/, 'JavaScript');
console.log(result); // Output: 'Hello, JavaScript!'

Example 6: Global Replacement

const text = 'The quick brown fox jumps over the lazy dog.';
const result = text.replace(/o/g, '0'); // Replace all 'o' with '0'
console.log(result); // Output: 'The quick br0wn f0x jumps 0ver the lazy d0g.'

6. Extracting Parts of a String with exec()

The exec() method searches for a match in a string and returns an array of information or null.

Example 7: Using exec()

const regex = /(\d{4})-(\d{2})-(\d{2})/; // Pattern for a date (YYYY-MM-DD)
const text = 'Today's date is 2024-10-06.';
const match = regex.exec(text);

console.log(match[0]); // Output: '2024-10-06'
console.log(match[1]); // Output: '2024' (First capturing group)
console.log(match[2]); // Output: '10' (Second capturing group)
console.log(match[3]); // Output: '06' (Third capturing group)

7. Regular Expression Patterns

1. Character Classes

.: Matches any character except newline.
\d: Matches any digit (equivalent to [0-9]).
\D: Matches any non-digit.
\w: Matches any word character (alphanumeric + underscore).
\W: Matches any non-word character.
\s: Matches any whitespace character (spaces, tabs, line breaks).
\S: Matches any non-whitespace character.

Example 8: Using Character Classes

const regex = /\d+/; // Matches one or more digits
console.log(regex.test('Year 2024')); // Output: true

2. Anchors

^: Matches the beginning of a string.
$: Matches the end of a string.

Example 9: Using Anchors

const regex = /^Hello/; // Matches 'Hello' at the beginning
console.log(regex.test('Hello, World!')); // Output: true
console.log(regex.test('Say Hello!'));    // Output: false

3. Quantifiers

*: Matches 0 or more occurrences.
+: Matches 1 or more occurrences.
?: Matches 0 or 1 occurrence.
{n}: Matches exactly n occurrences.
{n,}: Matches n or more occurrences.
{n,m}: Matches between n and m occurrences.

Example 10: Using Quantifiers

const regex = /go{2,4}gle/; // Matches 'google', 'gooogle', 'goooogle'
console.log(regex.test('google'));   // Output: true
console.log(regex.test('gooogle'));  // Output: true
console.log(regex.test('googl'));    // Output: false

4. Groups and Ranges

[abc]: Matches any one of the characters inside the brackets (e.g., a, b, or c).
[a-z]: Matches any character in the specified range (e.g., any lowercase letter).
(abc): Capturing group for the characters within.
(?:abc): Non-capturing group.

Example 11: Using Groups and Ranges

const regex = /[A-Z]{3}-\d{4}/; // Matches patterns like 'ABC-1234'
console.log(regex.test('ABC-1234')); // Output: true
console.log(regex.test('abc-1234')); // Output: false

8. Escape Characters

In regex, special characters (e.g., . * + ? ( ) [ ] \ { } | ^ $) need to be escaped with a backslash (\) if you want to match them literally.

Example 12: Escaping Special Characters

const regex = /\.\*/; // Matches the literal characters '.*'
console.log(regex.test('Hello .* World')); // Output: true

9. Lookaheads and Lookbehinds

Lookahead ((?=…)): Asserts that a given pattern must be followed by another pattern.
Negative Lookahead ((?!…)): Asserts that a given pattern must NOT be followed by another pattern.
Lookbehind ((?<=…)): Asserts that a given pattern must be preceded by another pattern.
Negative Lookbehind ((?<!…)): Asserts that a given pattern must NOT be preceded by another pattern.

Example 13: Using Lookaheads

const regex = /\d+(?= dollars)/; // Matches digits followed by 'dollars'
console.log(regex.exec('The price is 100 dollars')); // Output: ['100']

Conclusion

JavaScript regular expressions are a powerful tool for pattern matching and text manipulation. By understanding the different patterns, flags, and methods (test, match, replace, exec), you can create complex searches and validations in your code.

The examples in this tutorial cover the basics and some advanced use cases to help you get started with regex in JavaScript.

Feel free to experiment with different patterns and methods to enhance your text-processing capabilities!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Date Objects: A Complete Tutorial

written by utmoker71

The Date object in JavaScript is used to work with dates and times. It provides a variety of methods to get and set hours, minutes, seconds, milliseconds, and more.

This tutorial will introduce you to the basics of creating, manipulating, and formatting Date objects with several code examples.

1. Creating a Date Object

You can create a Date object in JavaScript using the Date constructor in several ways.

Example 1: Creating a Date Object for the Current Date and Time

const currentDate = new Date();
console.log(currentDate); // Output: current date and time

When you call the Date constructor without arguments, it creates a Date object representing the current date and time.

Example 2: Creating a Date Object for a Specific Date and Time

You can pass a date string to the Date constructor to create a date object for a specific date and time.

const specificDate = new Date('2024-12-25T10:30:00');
console.log(specificDate); // Output: Wed Dec 25 2024 10:30:00 GMT+0000 (Coordinated Universal Time)

Example 3: Creating a Date Object Using Year, Month, Day, Hours, Minutes, and Seconds

The Date constructor can also take individual numerical arguments in the order of year, month (0-based), day, hours, minutes, seconds, and milliseconds.

const dateWithArgs = new Date(2024, 11, 25, 10, 30, 0); // Month is 0-based, so 11 represents December
console.log(dateWithArgs); // Output: Wed Dec 25 2024 10:30:00 GMT+0000 (Coordinated Universal Time)

Example 4: Creating a Date Object Using Timestamps

The Date constructor can also take a timestamp (milliseconds since January 1, 1970).

const dateFromTimestamp = new Date(1672531200000);
console.log(dateFromTimestamp); // Output: a specific date corresponding to the timestamp

2. Getting Date Components

The Date object provides several methods to extract individual date components.

Example 5: Getting Date Components

const date = new Date('2024-10-06T14:45:30');

console.log(date.getFullYear());  // Output: 2024
console.log(date.getMonth());     // Output: 9 (Months are 0-based, so 9 is October)
console.log(date.getDate());      // Output: 6
console.log(date.getHours());     // Output: 14
console.log(date.getMinutes());   // Output: 45
console.log(date.getSeconds());   // Output: 30
console.log(date.getMilliseconds()); // Output: 0
console.log(date.getDay());       // Output: 0 (Sunday, where 0 represents Sunday)

3. Setting Date Components

You can modify date components using set methods.

Example 6: Setting Date Components

const date = new Date();

date.setFullYear(2025);
date.setMonth(5);   // June (months are 0-based)
date.setDate(15);
date.setHours(12);
date.setMinutes(30);
date.setSeconds(45);

console.log(date); // Output: Sun Jun 15 2025 12:30:45 GMT+0000 (Coordinated Universal Time)

4. Date Formatting

JavaScript provides several methods to format date objects into readable strings.

Example 7: Formatting Dates to Strings

const date = new Date('2024-10-06T14:45:30');

console.log(date.toDateString());  // Output: Sun Oct 06 2024
console.log(date.toTimeString());  // Output: 14:45:30 GMT+0000 (Coordinated Universal Time)
console.log(date.toISOString());   // Output: 2024-10-06T14:45:30.000Z
console.log(date.toLocaleDateString()); // Output: 10/6/2024 (format depends on the locale)
console.log(date.toLocaleTimeString()); // Output: 2:45:30 PM (format depends on the locale)
console.log(date.toUTCString());   // Output: Sun, 06 Oct 2024 14:45:30 GMT

5. Date Arithmetic

You can perform date arithmetic by using timestamps (milliseconds) to add or subtract time.

Example 8: Adding Days to a Date

const date = new Date('2024-10-06T14:45:30');

date.setDate(date.getDate() + 5);  // Add 5 days
console.log(date); // Output: Fri Oct 11 2024 14:45:30 GMT+0000 (Coordinated Universal Time)

Example 9: Finding the Difference Between Two Dates

const startDate = new Date('2024-10-06');
const endDate = new Date('2024-12-25');

const differenceInTime = endDate - startDate; // Difference in milliseconds
const differenceInDays = differenceInTime / (1000 * 60 * 60 * 24); // Convert milliseconds to days

console.log(differenceInDays); // Output: 80

6. Parsing Dates

The Date object can parse date strings in various formats, but using the ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) is the most reliable.

Example 10: Parsing Dates from Strings

const date1 = new Date('2024-12-25'); // ISO format
const date2 = new Date('December 25, 2024 10:30:00');

console.log(date1); // Output: Wed Dec 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
console.log(date2); // Output: Wed Dec 25 2024 10:30:00 GMT+0000 (Coordinated Universal Time)

7. Edge Cases with Date Objects

JavaScript’s Date object can handle some edge cases gracefully.

Example 11: Handling Invalid Dates

const invalidDate = new Date('invalid-date-string');

console.log(invalidDate); // Output: Invalid Date
console.log(isNaN(invalidDate)); // Output: true

Example 12: Handling Month Overflow

If you set a date component that overflows its natural limits, the Date object automatically adjusts other components.

const date = new Date('2024-10-31');

date.setMonth(11);  // Sets the month to December
console.log(date);  // Output: Sun Dec 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

date.setDate(32);  // Sets the date to an invalid day in December
console.log(date);  // Output: Mon Jan 01 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

8. Using Date.now()

Date.now() is a static method that returns the current timestamp in milliseconds.

Example 13: Getting the Current Timestamp

const timestamp = Date.now();
console.log(timestamp); // Output: a large number representing the current timestamp in milliseconds

Conclusion

The JavaScript Date object is a powerful tool for working with dates and times. It offers a variety of methods to get, set, and format date and time values.

With these examples, you can now create, manipulate, and format dates in your JavaScript projects. Feel free to experiment with the different methods to suit your needs!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Sets: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, a Set is a collection of unique values of any type, whether primitive or object references.

Sets are useful when you want to store a list of items where duplicates are not allowed.

Introduced in ES6 (ECMAScript 2015), Sets provide several built-in methods to add, remove, and manipulate their elements efficiently.

1. Creating a Set

A Set can be created using the new Set() constructor. You can pass an iterable (like an array) to initialize the Set with values.

Example 1: Creating an Empty Set

let mySet = new Set();
console.log(mySet); // Output: Set(0) {}

Example 2: Creating a Set from an Array

let numbers = [1, 2, 3, 4, 5, 3, 2, 1];
let uniqueNumbers = new Set(numbers);

console.log(uniqueNumbers); // Output: Set(5) { 1, 2, 3, 4, 5 }

Explanation

The new Set() constructor creates a Set object.

When initializing a Set with an array ([1, 2, 3, 4, 5, 3, 2, 1]), it automatically removes duplicates, resulting in { 1, 2, 3, 4, 5 }.

2. Adding Elements to a Set

You can add elements to a Set using the .add() method. Note that adding duplicate values has no effect on the Set.

Example 3: Using .add() Method

let mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // Duplicate value
mySet.add('Hello');

console.log(mySet); // Output: Set(3) { 1, 2, 'Hello' }

Explanation

mySet.add(2) is called twice, but the Set only keeps one instance of 2.
A Set only stores unique values.

3. Removing Elements from a Set

The .delete() method is used to remove an element from the Set.

Example 4: Using .delete() Method

let mySet = new Set([1, 2, 3]);
mySet.delete(2);

console.log(mySet); // Output: Set(2) { 1, 3 }

Explanation

mySet.delete(2) removes the element 2 from the Set.
If the element is not found, delete() returns false.

4. Checking for Elements in a Set

You can use the .has() method to check if a particular element exists in the Set.

Example 5: Using .has() Method

let mySet = new Set([1, 2, 3]);

console.log(mySet.has(2)); // Output: true
console.log(mySet.has(5)); // Output: false

Explanation

mySet.has(2) returns true because 2 is present in the Set.
mySet.has(5) returns false because 5 is not in the Set.

5. Finding the Size of a Set

The .size property returns the number of elements in the Set.

Example 6: Using .size Property

let mySet = new Set(['apple', 'banana', 'cherry']);
console.log(mySet.size); // Output: 3

Explanation

.size gives the number of unique elements in the Set (3 in this case).

6. Clearing All Elements from a Set

The .clear() method removes all elements from the Set.

Example 7: Using .clear() Method

let mySet = new Set([1, 2, 3]);
mySet.clear();

console.log(mySet); // Output: Set(0) {}

Explanation

mySet.clear() removes all elements from the Set, resulting in an empty Set.

7. Iterating Over a Set

You can use loops to iterate over the elements of a Set. The most common way is using for…of.

Example 8: Using for…of Loop

let mySet = new Set([1, 2, 3, 4, 5]);

for (let value of mySet) {
  console.log(value);
}

Output

1
2
3
4
5

Explanation

The for…of loop iterates over each element in the Set in the order they were added.

Example 9: Using forEach() Method

let mySet = new Set(['apple', 'banana', 'cherry']);

mySet.forEach((value) => {
  console.log(value);
});

Output

apple
banana
cherry

Explanation

The forEach() method executes a provided function for each element in the Set.

8. Converting a Set to an Array

To convert a Set back to an array, you can use the spread operator (…) or the Array.from() method.

Example 10: Using Spread Operator

let mySet = new Set([1, 2, 3, 4, 5]);
let myArray = [...mySet];

console.log(myArray); // Output: [1, 2, 3, 4, 5]

Example 11: Using Array.from() Method

let mySet = new Set(['a', 'b', 'c']);
let myArray = Array.from(mySet);

console.log(myArray); // Output: ['a', 'b', 'c']

Explanation

Both the spread operator ([…]) and Array.from() method convert the Set into an array.

9. Working with Sets: Basic Set Operations

Example 12: Union of Two Sets

let setA = new Set([1, 2, 3]);
let setB = new Set([3, 4, 5]);

let unionSet = new Set([...setA, ...setB]);
console.log(unionSet); // Output: Set(5) { 1, 2, 3, 4, 5 }

Explanation

The spread operator (…) merges the elements of setA and setB into a new Set (unionSet), automatically removing duplicates.

Example 13: Intersection of Two Sets

let setA = new Set([1, 2, 3]);
let setB = new Set([2, 3, 4]);

let intersectionSet = new Set([...setA].filter(value => setB.has(value)));
console.log(intersectionSet); // Output: Set(2) { 2, 3 }

Explanation

The .filter() method creates a new Set containing only the elements present in both setA and setB.

Example 14: Difference of Two Sets

let setA = new Set([1, 2, 3]);
let setB = new Set([2, 3, 4]);

let differenceSet = new Set([...setA].filter(value => !setB.has(value)));
console.log(differenceSet); // Output: Set(1) { 1 }

Explanation

The .filter() method creates a new Set containing elements from setA that are not in setB.

Summary

JavaScript Sets provide an efficient way to handle collections of unique values.

They are particularly useful when you need to ensure that a list contains no duplicates. Here's a quick recap of the key Set operations:

 

Common Methods and Properties

Method/Property Description
new Set(iterable) Creates a new Set, optionally from an iterable (e.g., array).
.add(value) Adds a new element to the Set.
.delete(value) Removes a specific element from the Set.
.has(value) Checks if an element exists in the Set.
.size Returns the number of elements in the Set.
.clear() Removes all elements from the Set.
.forEach(callback) Executes a callback for each element in the Set.

Key Points

  • Unique Values: A Set automatically removes duplicate values.
  • Iterating: You can use for...of or .forEach() to iterate through the elements.
  • Set Operations: Use sets for operations like union, intersection, and difference.

By mastering Sets in JavaScript, you can handle unique collections of data more efficiently in your programs.

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Octal and Binary Literals: A Complete Tutorial with Examples

written by utmoker71

JavaScript supports octal and binary literals for working with numbers in octal (base-8) and binary (base-2) formats. This can be helpful when dealing with certain types of numerical data, such as file permissions, binary data, bitwise operations, and low-level system programming.

In this tutorial, we will explore how to use octal and binary literals in JavaScript with several code examples.

1. Octal Literals

An octal literal is a number represented in base-8. In JavaScript, octal literals use a leading 0o or 0O (zero followed by a lowercase or uppercase “O”).

Syntax

let octalNumber = 0o[number];

The 0o prefix indicates that the number is in octal format.
[number] is a sequence of digits from 0 to 7.

Example 1: Basic Octal Literals

let octal1 = 0o10; // Octal 10 (base 8)
let octal2 = 0o77; // Octal 77 (base 8)

console.log(octal1); // Output: 8 (decimal)
console.log(octal2); // Output: 63 (decimal)

Explanation

0o10 represents the octal number 10, which equals 8 in decimal.
0o77 represents the octal number 77, which equals 63 in decimal.

Example 2: Using Octal Literals for Permissions

Octal literals are often used in programming environments to represent file permissions, as in Unix-based systems.

let readWriteExecute = 0o777; // Full permissions
let readOnly = 0o444; // Read-only permissions

console.log(readWriteExecute); // Output: 511 (decimal)
console.log(readOnly); // Output: 292 (decimal)

Explanation

0o777 represents full permissions (rwxrwxrwx), which converts to 511 in decimal.
0o444 represents read-only permissions (r–r–r–), which converts to 292 in decimal.

Example 3: Invalid Octal Literals

Octal literals can only contain digits from 0 to 7. Using digits outside this range will result in a syntax error.

// let invalidOctal = 0o89; // SyntaxError: Invalid or unexpected token

Explanation

Octal numbers can only have digits from 0 to 7. Including 8 or 9 in an octal literal will cause an error.

2. Binary Literals

A binary literal is a number represented in base-2. In JavaScript, binary literals use a leading 0b or 0B (zero followed by a lowercase or uppercase “B”).

Syntax

let binaryNumber = 0b[number];

The 0b prefix indicates that the number is in binary format.
[number] is a sequence of 0s and 1s.

Example 4: Basic Binary Literals

let binary1 = 0b1010; // Binary 1010 (base 2)
let binary2 = 0b1111; // Binary 1111 (base 2)

console.log(binary1); // Output: 10 (decimal)
console.log(binary2); // Output: 15 (decimal)

Explanation

0b1010 represents the binary number 1010, which equals 10 in decimal.
0b1111 represents the binary number 1111, which equals 15 in decimal.

Example 5: Using Binary Literals in Bitwise Operations

Binary literals are commonly used in bitwise operations, which operate directly on binary digits of integers.

let mask = 0b0101; // Binary 0101 (decimal 5)
let number = 0b1010; // Binary 1010 (decimal 10)

let result = number & mask; // Bitwise AND operation

console.log(result.toString(2)); // Output: 0 (binary) since there are no matching '1's

Explanation

0b0101 and 0b1010 are binary numbers.
The & (bitwise AND) operation compares each bit and returns 1 if both bits are 1. In this case, the result is 0.

Example 6: Invalid Binary Literals

Binary literals can only contain 0s and 1s. Using other digits will result in a syntax error.

// let invalidBinary = 0b102; // SyntaxError: Invalid or unexpected token

Explanation

Binary numbers can only have digits 0 and 1. Including any other digits in a binary literal will cause an error.

3. Conversions Between Binary, Octal, and Decimal

JavaScript provides built-in methods to convert numbers between binary, octal, and decimal.

Example 7: Converting Decimal to Binary and Octal

You can use the toString() method to convert a number to binary or octal format.

let number = 42;

let binary = number.toString(2); // Convert to binary
let octal = number.toString(8); // Convert to octal

console.log(binary); // Output: "101010"
console.log(octal); // Output: "52"

Explanation

number.toString(2) converts the decimal number 42 to binary (“101010”).
number.toString(8) converts the decimal number 42 to octal (“52”).

Example 8: Parsing Binary and Octal Strings

You can use parseInt() to convert a binary or octal string to a decimal number.

let binaryString = '1010';
let octalString = '52';

let binaryNumber = parseInt(binaryString, 2); // Parse as binary
let octalNumber = parseInt(octalString, 8); // Parse as octal

console.log(binaryNumber); // Output: 10
console.log(octalNumber); // Output: 42

Explanation

parseInt(binaryString, 2) converts the binary string “1010” to its decimal equivalent (10).
parseInt(octalString, 8) converts the octal string “52” to its decimal equivalent (42).

4. Real-world Applications of Binary and Octal Literals

Example 9: Setting Permissions with Octal Literals

Octal literals are useful when setting file permissions, commonly used in Unix-like operating systems.

let readWriteExecute = 0o755; // rwxr-xr-x
let readWriteOnly = 0o644; // rw-r--r--

console.log(readWriteExecute); // Output: 493
console.log(readWriteOnly); // Output: 420

Example 10: Using Binary for Flag Management

Binary literals are often used in low-level programming for flag management.

let FLAG_READ = 0b0001; // 1
let FLAG_WRITE = 0b0010; // 2
let FLAG_EXECUTE = 0b0100; // 4

// Combining flags using bitwise OR
let permissions = FLAG_READ | FLAG_WRITE;

console.log(permissions.toString(2)); // Output: "11" (binary)

Explanation

This example uses binary literals to define flags and combines them using the bitwise OR (|) operation.

 

Summary

JavaScript's support for octal (0o) and binary (0b) literals makes it easier to work with non-decimal numeric systems, which can be helpful in various programming scenarios, such as file permissions and low-level bitwise operations.

Quick Reference

Format Prefix Example Decimal Equivalent
Octal 0o 0o10 8
Binary 0b 0b1010 10

Common Uses

  • Octal Literals: Useful for file permissions and other numeric codes in systems programming.
  • Binary Literals: Helpful for bitwise operations, flag management, and working with binary data.

By mastering these literals, you can write more expressive and understandable JavaScript code when dealing with different numeric systems.

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Variables: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, variables are used to store data that can be referenced and manipulated throughout a program. They act as containers for data values and play a fundamental role in programming.

This tutorial will guide you through the basics of declaring and using variables in JavaScript, covering different types of variables and how to use them effectively.

1. Declaring Variables

JavaScript provides three keywords for declaring variables: var, let, and const.

1.1. Using var

The var keyword is the oldest way to declare variables in JavaScript. Variables declared with var are function-scoped or globally scoped and can be reassigned.

var name = 'John';
console.log(name); // Output: John

name = 'Jane'; // Reassigning the variable
console.log(name); // Output: Jane

Explanation

The variable name is declared using var and initialized with the value ‘John'.
It is then reassigned to ‘Jane'.

1.2. Using let

Introduced in ES6 (ES2015), let is the modern way to declare variables. Variables declared with let are block-scoped, meaning they are confined to the block {} in which they are declared.

let age = 25;
console.log(age); // Output: 25

age = 30; // Reassigning the variable
console.log(age); // Output: 30

Explanation

The variable age is declared using let and can be reassigned just like var.
However, let provides block-scoping, making it more predictable in certain contexts (e.g., inside loops or conditional statements).

1.3. Using const

const is also introduced in ES6 and is used to declare constants. Variables declared with const are block-scoped and cannot be reassigned.

const birthYear = 1990;
console.log(birthYear); // Output: 1990

// birthYear = 2000; // Error: Assignment to constant variable.

Explanation

The variable birthYear is declared using const and is initialized with the value 1990.

Attempting to reassign birthYear will result in an error since const variables cannot be reassigned.

2. Variable Naming Rules

Variable names can contain letters, digits, underscores (_), and dollar signs ($).
Variable names must not start with a digit.
JavaScript is case-sensitive, so myVariable and myvariable are considered different variables.
Variable names should be meaningful, indicating what data they represent.

Example 1: Valid Variable Names

let myVariable = 'Hello';
let _name = 'John';
let $amount = 100;
let firstName = 'Alice';

Example 2: Invalid Variable Names

// let 1name = 'John'; // Error: Variable name cannot start with a digit
// let my-variable = 10; // Error: Hyphens are not allowed in variable names

3. Variable Initialization and Declaration

A variable can be declared without being immediately assigned a value. Uninitialized variables have the value undefined.

Example 3: Variable Declaration and Initialization

let count; // Declaration
console.log(count); // Output: undefined

count = 5; // Initialization
console.log(count); // Output: 5

Explanation

count is declared but not initialized, so its value is undefined.
Later, count is assigned the value 5.

4. Different Types of Variables

Variables in JavaScript can hold different types of values, including numbers, strings, booleans, objects, and more.

4.1. Numbers

let score = 100;
let price = 29.99;
console.log(score); // Output: 100
console.log(price); // Output: 29.99

4.2. Strings

let greeting = 'Hello, World!';
let name = "Alice";
console.log(greeting); // Output: Hello, World!
console.log(name); // Output: Alice

4.3. Booleans

let isAvailable = true;
let isComplete = false;
console.log(isAvailable); // Output: true
console.log(isComplete); // Output: false

4.4. Objects

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};
console.log(person); // Output: { firstName: 'John', lastName: 'Doe', age: 30 }

4.5. Arrays

let colors = ['red', 'green', 'blue'];
console.log(colors); // Output: ['red', 'green', 'blue']

5. Scope of Variables

5.1. Global Scope

A variable declared outside of any function or block has a global scope. It is accessible from anywhere in the code.

var globalVar = 'I am global';

function printGlobalVar() {
  console.log(globalVar); // Output: I am global
}

printGlobalVar();
console.log(globalVar); // Output: I am global

5.2. Function Scope

Variables declared inside a function using var are function-scoped and are not accessible outside of the function.

function printLocalVar() {
  var localVar = 'I am local';
  console.log(localVar); // Output: I am local
}

printLocalVar();
console.log(localVar); // Error: localVar is not defined

5.3. Block Scope

Variables declared with let and const are block-scoped. They are only accessible within the block where they are declared.

if (true) {
  let blockVar = 'I am block-scoped';
  console.log(blockVar); // Output: I am block-scoped
}

console.log(blockVar); // Error: blockVar is not defined

6. Hoisting with Variables

JavaScript hoists variable declarations to the top of their scope. However, only the declaration is hoisted, not the initialization.

Example 4: Hoisting with var

console.log(hoistedVar); // Output: undefined
var hoistedVar = 'I am hoisted';

Explanation

The variable hoistedVar is hoisted to the top of its scope, but its value is not initialized until the line var hoistedVar = ‘I am hoisted';.

Example 5: Hoisting with let and const

// console.log(hoistedLet); // Error: Cannot access 'hoistedLet' before initialization
let hoistedLet = 'I am not hoisted';

Explanation

Variables declared with let and const are hoisted, but they are in a temporal dead zone until they are initialized. Attempting to access them before declaration results in an error.

Summary

JavaScript variables are essential building blocks for storing and manipulating data in programs. Understanding how to use var, let, and const, along with their scoping rules and initialization behavior, is crucial for writing effective JavaScript code.

Quick Reference

Keyword Scope Can Reassign Hoisting Must Initialize
var Function Yes Yes No
let Block Yes No No
const Block No No Yes

Best Practices

  • Use let for variables that will change.
  • Use const for variables that should not change (constants).
  • Avoid using var in modern JavaScript code to prevent scope-related issues.
  • Use meaningful variable names that describe the data they hold.

By mastering variables, you can manage and manipulate data effectively in your JavaScript applications!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Arrays and Basic Operations: A Complete Tutorial with Examples

written by utmoker71

In JavaScript, arrays are versatile data structures used to store multiple values in a single variable.

Arrays can contain a mix of different data types, including numbers, strings, objects, other arrays, and more.

This tutorial covers the basics of creating and manipulating arrays in JavaScript, including some of the most commonly used array operations.

1. Creating Arrays

Example 1: Creating an Array Using Literal Notation

// Creating an array using literal notation
let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']

Explanation

fruits is an array containing three elements: ‘Apple', ‘Banana', and ‘Cherry'.
This is the most common way to create an array in JavaScript.

Example 2: Creating an Array Using the Array Constructor

let numbers = new Array(1, 2, 3, 4, 5);

console.log(numbers); // Output: [1, 2, 3, 4, 5]

Explanation

new Array(1, 2, 3, 4, 5) creates an array containing the numbers 1 to 5.
However, using the array literal ([]) is generally preferred for simplicity.

2. Accessing Array Elements

Array elements are accessed using index positions, starting from 0.

Example 3: Accessing Elements

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // Output: 'Apple'
console.log(fruits[2]); // Output: 'Cherry'

Explanation

fruits[0] accesses the first element (‘Apple').
fruits[2] accesses the third element (‘Cherry').

3. Modifying Array Elements

You can change an element in the array by assigning a new value to a specific index.

Example 4: Modifying Elements

let fruits = ['Apple', 'Banana', 'Cherry'];

fruits[1] = 'Blueberry';
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']

Explanation

fruits[1] = ‘Blueberry' changes the second element of the array from ‘Banana' to ‘Blueberry'.

4. Common Array Operations

4.1. Finding the Length of an Array

The .length property returns the number of elements in the array.

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits.length); // Output: 3

4.2. Adding Elements to an Array

Example 5: Using push() to Add Elements to the End

let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');

console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']

Explanation



push(‘Cherry') adds ‘Cherry' to the end of the fruits array.


Example 6: Using unshift() to Add Elements to the Beginning


let fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');

console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']



Explanation


unshift(‘Apple') adds ‘Apple' to the beginning of the fruits array.


4.3. Removing Elements from an Array


Example 7: Using pop() to Remove the Last Element


let fruits = ['Apple', 'Banana', 'Cherry'];
let removedFruit = fruits.pop();

console.log(fruits); // Output: ['Apple', 'Banana']
console.log(removedFruit); // Output: 'Cherry'



Explanation


pop() removes and returns the last element of the array (‘Cherry').


Example 8: Using shift() to Remove the First Element


let fruits = ['Apple', 'Banana', 'Cherry'];
let removedFruit = fruits.shift();

console.log(fruits); // Output: ['Banana', 'Cherry']
console.log(removedFruit); // Output: 'Apple'



Explanation


shift() removes and returns the first element of the array (‘Apple').


4.4. Finding the Index of an Element


Example 9: Using indexOf() to Find an Element’s Index


let fruits = ['Apple', 'Banana', 'Cherry'];
let index = fruits.indexOf('Banana');

console.log(index); // Output: 1



Explanation


indexOf(‘Banana') returns the index of the first occurrence of ‘Banana', which is 1.


4.5. Removing Elements by Index Using splice()


Example 10: Removing Elements Using splice()


let fruits = ['Apple', 'Banana', 'Cherry'];
let removed = fruits.splice(1, 1); // Remove 1 element at index 1

console.log(fruits); // Output: ['Apple', 'Cherry']
console.log(removed); // Output: ['Banana']



Explanation


splice(1, 1) removes 1 element starting from index 1.

The method returns the removed elements as an array.


4.6. Slicing an Array Using slice()


Example 11: Using slice() to Create a Subarray


let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
let slicedFruits = fruits.slice(1, 3);

console.log(slicedFruits); // Output: ['Banana', 'Cherry']



Explanation


slice(1, 3) creates a new array containing elements from index 1 to 3 (excluding the element at index 3).


4.7. Concatenating Arrays Using concat()


Example 12: Combining Arrays with concat()


let fruits = ['Apple', 'Banana'];
let moreFruits = ['Cherry', 'Date'];
let combinedFruits = fruits.concat(moreFruits);

console.log(combinedFruits); // Output: ['Apple', 'Banana', 'Cherry', 'Date']



Explanation


concat(moreFruits) combines fruits and moreFruits into a new array.


4.8. Looping Through Arrays


Example 13: Using forEach() to Loop Through an Array


let fruits = ['Apple', 'Banana', 'Cherry'];

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});



Output


0: Apple
1: Banana
2: Cherry



Explanation


forEach() loops through each element in the array, executing the provided function.

5. Multidimensional Arrays (Arrays of Arrays)

Example 14: Creating and Accessing a Multidimensional Array


let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // Output: 6



Explanation


matrix is a 2D array (array of arrays).

matrix[1][2] accesses the element in the second row and third column (6).


Summary


JavaScript arrays are flexible and provide a variety of methods for adding, removing, and manipulating data.


Here’s a quick overview of some key operations:


Create an Array: Use [] or new Array().

Access Elements: Use array[index].

Modify Elements: Assign a new value using array[index] = value.

Add Elements: Use push(), unshift().

Remove Elements: Use pop(), shift(), splice().

Find Elements: Use indexOf().

Slice Arrays: Use slice() to create subarrays.

Loop Through: Use forEach() to iterate over elements.


Arrays are one of the most fundamental data structures in JavaScript, and mastering these operations is crucial for effective programming. Feel free to experiment with these examples and apply them in your projects!


									            

        


		            

				                    

						                            
												                            0 comment
												                    

								                    

						0						FacebookTwitterPinterestEmail                    

				            

		    








	
		
			                

										                        
							                                                        
					                

			
			
    

		            
Basics

		
        
JavaScript Numeric Separators: A Complete Tutorial with Examples

				            

				                    written by                             utmoker71
						
								            

		    


    

        

            

									
JavaScript Numeric Separators were introduced in ECMAScript 2021 (ES12) to make large numbers easier to read and understand by adding underscores (_) as separators. This is particularly useful when dealing with large numbers like credit card numbers, IDs, or any numerical values that involve a lot of digits. The numeric separator has no effect on the numeric value itself; it’s purely for readability.


1. Basic Usage of Numeric Separators


The numeric separator (_) can be inserted within numbers (integers, floating-point, hexadecimal, binary, or octal numbers) to improve readability. It cannot be placed at the beginning, end, or immediately before or after a decimal point.


Example 1: Using Numeric Separators with Large Numbers


let billion = 1_000_000_000;
console.log(billion); // Output: 1000000000



Explanation


The number 1_000_000_000 is easier to read compared to 1000000000 because of the underscores.

The underscores do not affect the numeric value; 1_000_000_000 is still interpreted as 1000000000.


2. Using Numeric Separators with Different Number Formats


Example 2: Floating-point Numbers


let price = 12_345.67_89;
console.log(price); // Output: 12345.6789



Explanation


You can use numeric separators in both the integer part (12_345) and the fractional part (67_89) of a floating-point number.

The output remains 12345.6789; the underscores are just for readability.


Example 3: Binary, Octal, and Hexadecimal Numbers


Numeric separators can also be used with binary (0b), octal (0o), and hexadecimal (0x) literals.


// Binary
let binaryNumber = 0b1010_1010_1010;
console.log(binaryNumber); // Output: 2730

// Octal
let octalNumber = 0o1234_5670;
console.log(octalNumber); // Output: 3422784

// Hexadecimal
let hexNumber = 0xAB_CD_EF_01;
console.log(hexNumber); // Output: 2882400001



Explanation


Binary: 0b1010_1010_1010 is equivalent to 0b101010101010.

Octal: 0o1234_5670 is equivalent to 0o12345670.

Hexadecimal: 0xAB_CD_EF_01 is equivalent to 0xABCDEF01.


3. Incorrect Usage of Numeric Separators


The numeric separator cannot be used in certain positions. Let's look at some incorrect usages that will cause syntax errors.


Example 4: Invalid Placements


// Invalid: Leading or trailing separator
// let number1 = _1000; // SyntaxError
// let number2 = 1000_; // SyntaxError

// Invalid: Consecutive separators
// let number3 = 1__000; // SyntaxError

// Invalid: Adjacent to the decimal point
// let number4 = 1000_.00; // SyntaxError
// let number5 = 1000._00; // SyntaxError



Explanation


You cannot place numeric separators at the beginning or end of a number (_1000, 1000_).

Consecutive separators (1__000) are not allowed.

Numeric separators cannot be directly adjacent to the decimal point (1000_.00 or 1000._00).


4. Real-world Use Cases


Numeric separators are especially useful in scenarios involving large numbers, like credit card numbers, population counts, or scientific values.


Example 5: Population Count


let worldPopulation = 7_800_000_000; // 7.8 billion
console.log(worldPopulation); // Output: 7800000000



Explanation


7_800_000_000 is much easier to read and understand as 7.8 billion compared to 7800000000.


Example 6: Currency Representation


let salary = 50_000.00;
console.log(`Your annual salary is $${salary}`); // Output: Your annual salary is $50000.00



Explanation


Using numeric separators in currency amounts like 50_000.00 makes the number more readable, especially in financial applications.


Example 7: Long Numbers for Identification


let creditCardNumber = 1234_5678_9012_3456;
console.log(creditCardNumber); // Output: 1234567890123456



Explanation


The credit card number is easier to read when separated into chunks (1234_5678_9012_3456), resembling the format commonly used on cards.


5. Working with Numeric Separators in JavaScript Operations


Numeric separators have no impact on numerical operations. JavaScript treats these numbers exactly the same as if there were no separators.


Example 8: Mathematical Operations


let largeNumber1 = 1_000_000;
let largeNumber2 = 2_500_000;

let sum = largeNumber1 + largeNumber2;
console.log(sum); // Output: 3500000



Explanation


The numeric separators do not interfere with the addition. The values are treated as normal numbers.


Summary


JavaScript numeric separators (_) make working with large numbers easier and improve code readability. Here’s a quick overview:


Correct Usage: Use numeric separators to improve readability of large numbers, floating-point numbers, binary, octal, and hexadecimal literals.

Incorrect Usage: Numeric separators cannot be at the beginning or end of a number, adjacent to a decimal point, or used consecutively.

No Impact on Operations: Numeric separators do not affect the numeric value; they are purely for the programmer’s convenience.


Key Points


Example Correct Usage:


1_000_000: One million.

3.1415_9265_3589: A readable representation of pi.

0xAB_CD_EF: A hexadecimal value.


Example Incorrect Usage:


_1000, 1000_, 1__000, 1000_.00: These will result in syntax errors.


By using numeric separators, you can make your JavaScript code involving large numbers more maintainable and easier to read.


									            

        


		            

				                    

						                            
												                            0 comment
												                    

								                    

						0						FacebookTwitterPinterestEmail                    

				            

		    








	
		
			                

										                        
							                                                        
					                

			
			
    

		            
Basics

		
        
JavaScript Comments: A Complete Tutorial with Examples

				            

				                    written by                             utmoker71
						
								            

		    


    

        

            

									
Comments in JavaScript are used to explain code, make notes, or temporarily disable parts of code.


Comments are ignored by the JavaScript engine when executing the script.


Proper use of comments can help make your code easier to understand, both for yourself and for others who might read it in the future.


JavaScript supports two types of comments:


Single-line comments using //.

Multi-line comments using /* */.


1. Single-line Comments


Single-line comments in JavaScript start with //. Everything after the // on that line is treated as a comment and is ignored by the JavaScript engine.


Example 1: Using Single-line Comments


// This is a single-line comment
let x = 5; // This sets x to 5

console.log(x); // Output: 5



Explanation


// This is a single-line comment: This comment explains that the line is a comment.

let x = 5; // This sets x to 5: This inline comment provides information about what the code does.

Single-line comments can be used on their own line or at the end of a code line.


2. Multi-line Comments


Multi-line comments start with /* and end with */. They can span multiple lines, making them useful for longer explanations or temporarily disabling large blocks of code.


Example 2: Using Multi-line Comments


/* 
   This is a multi-line comment.
   It can span multiple lines.
   Useful for explaining complex logic or temporarily disabling code blocks.
*/
let y = 10;

/* Multi-line comments can also be used inline */
let z = 20; /* This is an inline multi-line comment */

console.log(y + z); // Output: 30



Explanation


/* … */ can be used to create comments that span across several lines.

Multi-line comments can be placed inline, but they are often used for block comments or detailed explanations.


Example 3: Disabling Code Blocks Using Multi-line Comments


/*
let a = 5;
let b = 10;
console.log(a + b);
*/
console.log('This code block is disabled.'); // Output: This code block is disabled.



Explanation


The code within /* … */ is “commented out” and will not execute.

This is useful for temporarily disabling code for debugging or testing purposes.


3. Commenting Best Practices


Explain Complex Code: Use comments to explain complex code logic, especially if it involves multiple steps or algorithms.

Avoid Over-commenting: Don't comment on obvious code. For example, don't write // Increment x by 1 next to x++; unless it's part of a complex logic.

Update Comments: Ensure that comments are kept up to date with changes in the code to avoid misleading information.

Use Comments to Debug: Temporarily disable parts of your code using comments to isolate problems during debugging.


Example 4: Explaining Complex Code


// Function to calculate the factorial of a number
function factorial(n) {
  // If n is 0, return 1 (base case for recursion)
  if (n === 0) {
    return 1;
  }

  // Otherwise, multiply n by the factorial of n-1 (recursive call)
  return n * factorial(n - 1);
}

console.log(factorial(5)); // Output: 120



Explanation


Comments are used here to explain what the factorial function does and describe each part of the function in a clear way.


4. Commenting Code for Debugging


Use comments to temporarily disable sections of code for testing and debugging.


Example 5: Using Comments for Debugging


let total = 0;
for (let i = 1; i <= 5; i++) {
  total += i;
  // console.log('Current total:', total); // Uncomment this line to debug the loop
}

console.log('Final total:', total); // Output: Final total: 15



Explanation


The console.log() inside the loop is commented out. It can be uncommented during debugging to trace the loop's execution.


5. Nested Comments: Beware!


JavaScript does not support nested comments, so avoid attempting to nest /* … */ comments inside other /* … */ comments.


Example 6: Incorrect Nested Comments


/*
let x = 10;
/* Nested comment - This will cause an error */
let y = 20;
console.log(x + y);
*/



Explanation


The code above will cause a syntax error because /* … */ comments do not support nesting.

To avoid issues, use single-line comments (//) if you need to comment within a multi-line comment.


6. Using Comments in Real-world Scenarios


Example 7: Providing Documentation for Functions


/**
 * Calculates the sum of two numbers.
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of a and b.
 */
function add(a, b) {
  return a + b;
}

console.log(add(3, 7)); // Output: 10



Explanation


The comment block is formatted as a JSDoc comment, commonly used for documenting functions, parameters, and return values in JavaScript.

This format can be parsed by documentation generation tools.


 


Summary


JavaScript comments are a valuable tool for explaining code, improving readability, and assisting in debugging. Here's a quick recap of the types and usage:






Type
Syntax
Use Case






Single-line
// comment
Short notes or inline explanations




Multi-line
/* comment */
Longer explanations or disabling code blocks




JSDoc
/** comment */
Function documentation with details






Best Practices


    

  • Explain Complex Code: Use comments to explain parts of the code that might be difficult to understand.
    • 

  • Avoid Redundant Comments: Don't comment on self-explanatory code.
    • 

  • Update Comments: Keep comments relevant as code evolves.
    • 

  • Use for Debugging: Comment out sections of code for testing or debugging.
    • 



Proper commenting practices make your code easier to maintain and understand, both for you and others working on your project.


									            

        


		            

				                    

						                            
												                            0 comment
												                    

								                    

						0						FacebookTwitterPinterestEmail                    

				            

		    





				

					

													Newer Posts											

					

													Older Posts