Home » JavaScript » Basics
Category:

Basics

Basics

JavaScript Operator Precedence

written by utmoker71

Operator Precedence Table

This table ranks JavaScript operators by their precedence, with the higher-precedence operators (executed first) at the top.

Operator Precedence Operator Description Associativity Example
1 () Grouping L -> R (expression)
2 . Member of object L -> R Object_name.property
2 () Function call L -> R Test()
2 new To create objects R -> L New example()
2 [] Member of object L -> R Object[“property”]
3 — Postfix decrement – p–;
3 ++ Postfix increment – p++
4 — Prefix decrement R -> L –p;
4 ++ Prefix increment R -> L ++p;
4 typeof To get the variable type R -> L typeof a;
4 ! Logical not R -> L !a;
4 ~ Bitwise not R -> L ~p
4 – Unary minus R -> L -p
4 + Unary plus R -> L +p
4 delete To delete object property R -> L Delete arr[0]
4 void Evaluates void R -> L Void(1)
5 ** Exponentiation operator R -> L p ** q
6 * Multiplication L -> R p * q
6 / Division L -> R p / q
6 % modulo L -> R p % q
7 + Addition or plus operator L -> R p + q
7 – Subtraction operator L -> R p – q
8 << Left shift L -> R p << 2
8 >> Signed right shift L -> R p >> 2
8 >>> Unsigned right shift L -> R p >>> 2
9 in Property in object L -> R x in y
9 instanceof Instance of object L -> R p instanceof Object
9 < Less than L -> R p < q
9 <= Less than or equal to L -> R p <= q
9 > Greater than L -> R p > q
9 >= Greater than or equal to L -> R p >= q
10 == Equality L -> R p == q
10 != Inequality L -> R p != q
10 === Strict equality L -> R p === q
10 !== Strict inequality L -> R p !== q
11 & Bitwise AND L -> R p & q
12 ^ Bitwise XOR L -> R p ^ q
13 | Bitwise OR L -> R p | q
14 && Logical AND L -> R p && q
15 || Logical OR L -> R p || q
16 ?? Nullish Coalescing R -> L p ?? q
17 = Assignment R -> L p = q
17 : Colon assignment R -> L p : q
17 += Addition assignment R -> L p += q
17 -= Subtraction assignment R -> L p -= q
17 *= Multiplication assignment R -> L p *= q
17 /= Division assignment R -> L p /= q
17 %= Modulo assignment R -> L p %= q
17 **= Exponentiation assignment R -> L p **= q
17 <<= Left shift assignement R -> L p <<= q
17 >>= Right shift assignment R -> L p >>= q
17 >>>= Unsigned right shift assignment R -> L p >>>= q
17 &= Bitwise AND assignment R -> L p &= q
17 ^= Bitwise XOR assignment R -> L p ^= q
17 |= Bitwise OR assignment R -> L p |= q
17 &&= Logical AND assignment R -> L p &&= q
17 ||= Logical OR assignement R -> L p ||= q
17 => Arrow operator – (a, b )=> { // function code}
17 … Spread operator – [… arr]
18 yield Pause / Resume R -> L yield p;
19 , Comma operator L -> R (5, 10, 15)
0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Reserved Keywords

written by utmoker71

In JavaScript, reserved keywords are terms that are set aside by the language for its internal use. These words cannot be used as identifiers (like variable names, function names, etc.).

Using them as identifiers can result in errors or unexpected behavior.

Here is a list of reserved keywords in JavaScript:

JavaScript Reserved Keywords (ES5 and ES6)

  1. break – Terminates a loop or switch statement.
  2. case – Defines a case in a switch statement.
  3. catch – Defines the block of code to handle errors in try/catch.
  4. class – Declares a class (ES6).
  5. const – Declares a block-scoped, read-only variable (ES6).
  6. continue – Skips the current iteration of a loop and continues with the next.
  7. debugger – Invokes debugging.
  8. default – Specifies the default block in a switch statement.
  9. delete – Deletes an object’s property.
  10. do – Executes a block of code once, and then repeats the loop while a condition is true.
  11. else – Specifies the block of code to execute if a condition is false.
  12. export – Exports a module (ES6).
  13. extends – Extends a class or function (ES6).
  14. finally – Executes code after try/catch regardless of the result.
  15. for – Starts a for loop.
  16. function – Declares a function.
  17. if – Specifies a block of code to execute if a condition is true.
  18. import – Imports a module (ES6).
  19. in – Tests whether an object has a specific property.
  20. instanceof – Tests whether an object is an instance of a constructor.
  21. let – Declares a block-scoped variable (ES6).
  22. new – Creates a new instance of an object.
  23. return – Returns a value from a function.
  24. super – Refers to the parent class (ES6).
  25. switch – Evaluates an expression against multiple cases.
  26. this – Refers to the current object.
  27. throw – Throws an exception.
  28. try – Tests a block of code for errors.
  29. typeof – Returns the type of a variable.
  30. var – Declares a variable.
  31. void – Discards the expression's return value.
  32. while – Starts a while loop.
  33. with – Extends the scope chain for a block of code (deprecated).
  34. yield – Pauses and resumes a generator function (ES6).

Future Reserved Keywords (ES6+)

These keywords are reserved for potential future use and should be avoided:

  1. enum
  2. await (reserved for use within async functions)
  3. implements
  4. interface
  5. package
  6. private
  7. protected
  8. public
  9. static

Reserved in Strict Mode

When using strict mode in JavaScript ("use strict";), the following keywords are also reserved:

  1. arguments
  2. eval

Contextual Keywords

Some words in JavaScript are only reserved in certain contexts (such as in classes or modules):

  1. async – Used in async functions.
  2. await – Pauses async function execution until a Promise is resolved.
  3. of – Used in for...of loops.

These reserved words are part of the core syntax of JavaScript, and it is important to avoid using them as identifiers to prevent conflicts or unexpected behaviors.

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Syntax Tutorial with Examples

written by utmoker71

JavaScript syntax refers to the set of rules that defines how JavaScript code is written and structured. Understanding JavaScript syntax is crucial for writing correct and efficient programs.

This tutorial will cover the most important aspects of JavaScript syntax, including variables, data types, operators, conditionals, loops, functions, and objects.

In this tutorial, you’ll learn:

Variables and Constants
Data Types
Operators
Conditionals (if/else statements)
Loops
Functions
Objects
Arrays
Template Literals

1. Variables and Constants

In JavaScript, variables are used to store data. You can declare variables using the let, const, or var keywords.

let: Allows you to declare variables that can be reassigned later.
const: Declares constants whose value cannot be changed once assigned.
var: The old way of declaring variables, which has function-scoped behavior. It’s better to use let and const in modern JavaScript.

Example 1: Variable Declaration

let name = "Alice";    // Declaring a variable
const age = 30;        // Declaring a constant
var city = "New York"; // Declaring a variable using var (old syntax)

console.log(name, age, city);

In this example:

name is declared with let, and its value can be changed.
age is declared with const, meaning it cannot be reassigned.
city is declared with var, which behaves similarly to let but is function-scoped.

2. Data Types

JavaScript supports multiple data types, including:

Number: Represents numeric values (integers and floats).
String: Represents text data.
Boolean: Represents logical values (true or false).
Object: Represents collections of key-value pairs.
Array: A special type of object used for storing ordered lists of values.
Undefined: A variable that has been declared but has not been assigned a value.
Null: Represents an intentional absence of value.

Example 2: Basic Data Types

let age = 25;                    // Number
let name = "Alice";               // String
let isStudent = true;             // Boolean
let city;                         // Undefined
let emptyValue = null;            // Null

console.log(typeof age);          // Output: number
console.log(typeof name);         // Output: string
console.log(typeof isStudent);    // Output: boolean
console.log(typeof city);         // Output: undefined
console.log(typeof emptyValue);   // Output: object (null is treated as an object in JavaScript)

3. Operators

JavaScript provides a wide range of operators to perform various operations on variables and values:

Arithmetic operators: +, -, *, /, %
Assignment operators: =, +=, -=, *=, /=
Comparison operators: ==, ===, !=, !==, <, >, <=, >=
Logical operators: &&, ||, !

Example 3: Using Operators

let x = 10;
let y = 5;

let sum = x + y;              // Arithmetic
let isEqual = (x === y);      // Comparison (strict equality)
let isGreater = (x > y);      // Comparison

let isBothTrue = (x > 0 && y > 0);  // Logical AND
let isEitherTrue = (x < 0 || y > 0);  // Logical OR

console.log(sum, isEqual, isGreater, isBothTrue, isEitherTrue);

In this example:

Arithmetic operators are used to calculate sum.
Comparison operators check for equality and inequality.
Logical operators (&&, ||) are used to evaluate conditions.

4. Conditionals (if/else statements)

Conditional statements in JavaScript allow you to execute different blocks of code based on conditions.

Example 4: Basic if/else Statement

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

In this example:

The if statement checks if age is greater than or equal to 18.
If the condition is true, the first block is executed; otherwise, the else block is executed.

Example 5: if/else if/else Statement

let score = 85;

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

5. Loops

Loops are used to repeatedly execute a block of code as long as a certain condition is met.

Example 6: for Loop

for (let i = 0; i < 5; i++) {
    console.log("Number:", i);
}

In this example:

The for loop runs 5 times, with the variable i incrementing by 1 in each iteration.

Example 7: while Loop

let i = 0;
while (i < 5) {
    console.log("Number:", i);
    i++;
}

In this example:

The while loop runs as long as the condition i < 5 is true.

6. Functions

Functions allow you to encapsulate code in reusable blocks. Functions can take input values (parameters) and return results.

Example 8: Function Declaration

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice"));  // Output: Hello, Alice!

In this example:

The greet function takes a name parameter and returns a greeting message.

Example 9: Function Expression (Anonymous Function)

const add = function(x, y) {
    return x + y;
};

console.log(add(5, 10));  // Output: 15

7. Objects

Objects are key-value pairs that store data in a structured way. You can define methods (functions) inside objects.

Example 10: Defining and Accessing Object Properties

let person = {
    name: "Alice",
    age: 30,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

console.log(person.name);  // Accessing properties
person.greet();            // Output: Hello, my name is Alice

In this example:

The object person has properties (name, age) and a method (greet).

8. Arrays

Arrays are ordered lists of values and are a special type of object in JavaScript.

Example 11: Declaring and Accessing Arrays

let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);  // Output: apple
console.log(fruits.length);  // Output: 3

fruits.push("grape");  // Adding an element to the array
console.log(fruits);  // Output: ["apple", "banana", "orange", "grape"]

9. Template Literals

Template literals provide a way to embed expressions and variables inside strings using backticks (`).

Example 12: Using Template Literals

let name = "Alice";
let age = 30;

let greeting = `Hello, my name is ${name}, and I am ${age} years old.`;
console.log(greeting);  // Output: Hello, my name is Alice, and I am 30 years old.

In this example:

Template literals allow variables to be easily embedded within strings using ${}.

Conclusion

This tutorial covers the fundamental syntax of JavaScript, including variables, data types, operators, conditionals, loops, functions, objects, arrays, and template literals. Here's a summary of what you've learned:

Variables store data, and you can declare them with let, const, or var.
Data types include numbers, strings, booleans, objects, arrays, and more.
Operators allow you to perform arithmetic, comparison, and logical operations.
Conditionals like if/else help execute code based on conditions.
Loops like for and while are used to repeat code.
Functions encapsulate reusable blocks of code.
Objects and arrays store collections of data.
Template literals make it easier to work with strings.

By mastering these essential elements of JavaScript syntax, we will cover these and many other topics in greater detail on this site.

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript String Search Methods: A Comprehensive Tutorial

written by utmoker71

avaScript provides several built-in methods to search strings, allowing you to locate substrings, check for their existence, and extract information from them.

This tutorial will explore the commonly used string search methods in JavaScript, demonstrating each with practical code examples.

1. indexOf()

The indexOf() method returns the index of the first occurrence of a specified value in a string. If the value is not found, it returns -1. You can also provide a second optional parameter to specify the position to start the search.

Example 1: Using indexOf()

const text = 'Hello, JavaScript! JavaScript is great!';

console.log(text.indexOf('JavaScript')); // Output: 7
console.log(text.indexOf('JavaScript', 8)); // Output: 20 (starts searching from index 8)
console.log(text.indexOf('Python')); // Output: -1 (not found)

Explanation: indexOf() returns the index of the first occurrence of the specified substring. If the substring is not found, it returns -1.

2. lastIndexOf()

The lastIndexOf() method returns the index of the last occurrence of a specified value in a string. It searches the string backward from the end to the beginning. You can provide a second optional parameter to specify the starting position for the search.

Example 2: Using lastIndexOf()

const text = 'JavaScript is great. I love JavaScript!';

console.log(text.lastIndexOf('JavaScript')); // Output: 27
console.log(text.lastIndexOf('JavaScript', 25)); // Output: 0 (starts searching backward from index 25)
console.log(text.lastIndexOf('Python')); // Output: -1 (not found)

Explanation: lastIndexOf() returns the index of the last occurrence of the specified substring. If the substring is not found, it returns -1.

3. includes()

The includes() method checks if a string contains a specified value. It returns true if the value is found; otherwise, it returns false. You can also provide a second optional parameter to specify the position to start the search.

Example 3: Using includes()

const text = 'JavaScript is versatile.';

console.log(text.includes('JavaScript')); // Output: true
console.log(text.includes('Python')); // Output: false
console.log(text.includes('versatile', 15)); // Output: true (starts searching from index 15)

Explanation: includes() performs a case-sensitive search and returns a boolean indicating whether the specified value exists in the string.

4. startsWith()

The startsWith() method checks if a string starts with a specified value. It returns true if the string starts with the value; otherwise, it returns false. You can provide an optional second parameter to specify the starting position for the check.

Example 4: Using startsWith()

const text = 'JavaScript is powerful.';

console.log(text.startsWith('JavaScript')); // Output: true
console.log(text.startsWith('powerful')); // Output: false
console.log(text.startsWith('is', 11)); // Output: true (checks starting from index 11)

Explanation: startsWith() checks if the string begins with the specified substring, considering an optional starting position.

5. endsWith()

The endsWith() method checks if a string ends with a specified value. It returns true if the string ends with the value; otherwise, it returns false. You can provide an optional second parameter to specify the length of the string to consider for the check.

Example 5: Using endsWith()

const text = 'JavaScript is powerful.';

console.log(text.endsWith('powerful.')); // Output: true
console.log(text.endsWith('JavaScript')); // Output: false
console.log(text.endsWith('JavaScript', 10)); // Output: true (considers only the first 10 characters)

Explanation: endsWith() checks if the string ends with the specified substring, considering an optional length of the string.

6. search()

The search() method searches a string for a match against a regular expression and returns the index of the first match. If no match is found, it returns -1.

Example 6: Using search()

const text = 'JavaScript is versatile and powerful.';

console.log(text.search(/versatile/)); // Output: 13
console.log(text.search(/Python/)); // Output: -1 (not found)
console.log(text.search(/power/i)); // Output: 28 (case-insensitive search using the 'i' flag)

Explanation: The search() method takes a regular expression and returns the index of the first match. It is more flexible than indexOf() as it allows regular expressions for more complex searching.

7. match()

The match() method retrieves the result of matching a string against a regular expression. It returns an array of matched results or null if no match is found.

Example 7: Using match()

const text = 'JavaScript, Python, Ruby, JavaScript';

console.log(text.match(/JavaScript/)); // Output: ['JavaScript'] (first match only)
console.log(text.match(/JavaScript/g)); // Output: ['JavaScript', 'JavaScript'] (all matches using 'g' flag)
console.log(text.match(/python/i)); // Output: ['Python'] (case-insensitive search using 'i' flag)

Explanation: The match() method can return multiple matches when used with the global (g) flag. It also supports case-insensitive searches using the i flag.

8. matchAll()

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups. It must be used with the g flag in the regular expression.

Example 8: Using matchAll()

const text = 'The prices are $5, $10, and $15.';
const regex = /\$(\d+)/g;

const matches = text.matchAll(regex);

for (const match of matches) {
  console.log(match[0]); // Output: $5, $10, $15
  console.log(match[1]); // Output: 5, 10, 15 (capturing group)
}

Explanation: matchAll() returns an iterator that provides detailed information about each match, including capturing groups.

9. replace()

The replace() method searches a string for a specified value or a regular expression and returns a new string with the specified value(s) replaced.

Example 9: Using replace()

const text = 'JavaScript is great. I love JavaScript.';

console.log(text.replace('JavaScript', 'Python')); // Output: Python is great. I love JavaScript.
console.log(text.replace(/JavaScript/g, 'Python')); // Output: Python is great. I love Python.

Explanation: replace() replaces only the first occurrence by default. To replace all occurrences, use a regular expression with the global (g) flag.

10. replaceAll()

The replaceAll() method replaces all occurrences of a specified value in a string.

Example 10: Using replaceAll()

const text = 'JavaScript is great. JavaScript is fun.';

console.log(text.replaceAll('JavaScript', 'Python')); // Output: Python is great. Python is fun.

Explanation: Unlike replace(), replaceAll() is straightforward for replacing all instances of a substring without requiring a regular expression.

Conclusion

JavaScript provides a rich set of string search methods that allow you to find, check for, and extract parts of strings using simple or complex patterns.

From basic substring checks (includes(), indexOf(), startsWith(), endsWith()) to more powerful regular expression-based searches (search(), match(), matchAll()), these methods provide flexibility and control when working with textual data.

Experiment with these examples to get a better understanding of how to use string search methods effectively in your JavaScript projects!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript String Methods: A Comprehensive Tutorial

written by utmoker71

JavaScript provides a variety of built-in string methods to perform common operations on strings, such as searching, modifying, and formatting text.

This tutorial covers the most commonly used JavaScript string methods with detailed explanations and code examples.

1. length Property

The length property returns the number of characters in a string.

Example 1: Using length

const text = 'JavaScript is awesome!';
console.log(text.length); // Output: 22

Explanation: This property returns the total number of characters, including spaces and punctuation.

2. toUpperCase() and toLowerCase()

toUpperCase(): Converts all characters in the string to uppercase.
toLowerCase(): Converts all characters in the string to lowercase.

Example 2: Using toUpperCase() and toLowerCase()

const text = 'JavaScript is Fun!';

console.log(text.toUpperCase()); // Output: JAVASCRIPT IS FUN!
console.log(text.toLowerCase()); // Output: javascript is fun!

3. indexOf() and lastIndexOf()

indexOf(): Returns the position of the first occurrence of a specified value. If the value is not found, it returns -1.
lastIndexOf(): Returns the position of the last occurrence of a specified value.

Example 3: Using indexOf() and lastIndexOf()

const text = 'Hello, World! Hello, JavaScript!';

console.log(text.indexOf('Hello')); // Output: 0
console.log(text.lastIndexOf('Hello')); // Output: 14
console.log(text.indexOf('Python')); // Output: -1 (not found)

4. includes()

The includes() method checks if a string contains a specified value. It returns true if the value is found; otherwise, it returns false.

Example 4: Using includes()

const text = 'JavaScript is fun!';

console.log(text.includes('JavaScript')); // Output: true
console.log(text.includes('Python')); // Output: false

5. startsWith() and endsWith()

startsWith(): Checks if a string starts with a specified value.
endsWith(): Checks if a string ends with a specified value.

Example 5: Using startsWith() and endsWith()

const text = 'JavaScript is awesome!';

console.log(text.startsWith('JavaScript')); // Output: true
console.log(text.startsWith('awesome')); // Output: false

console.log(text.endsWith('awesome!')); // Output: true
console.log(text.endsWith('JavaScript')); // Output: false

6. slice()

The slice() method extracts a section of a string and returns it as a new string. It takes two parameters: the start index (inclusive) and the end index (exclusive).

Example 6: Using slice()

const text = 'Hello, JavaScript!';

console.log(text.slice(0, 5)); // Output: Hello
console.log(text.slice(7)); // Output: JavaScript!
console.log(text.slice(-10, -1)); // Output: JavaScript

Explanation: Negative indices count from the end of the string.

7. substring()

The substring() method extracts characters from a string, between two specified indices, and returns the new substring. It is similar to slice() but does not support negative indices.

Example 7: Using substring()

const text = 'JavaScript is fun!';

console.log(text.substring(0, 10)); // Output: JavaScript
console.log(text.substring(11)); // Output: is fun!

8. substr()

The substr() method extracts a specified number of characters from a string, starting at a given index.

Example 8: Using substr()

const text = 'JavaScript is awesome!';

console.log(text.substr(0, 10)); // Output: JavaScript
console.log(text.substr(11, 2)); // Output: is
console.log(text.substr(-9, 7)); // Output: awesome

Explanation: The first parameter specifies the starting index, and the second parameter specifies the number of characters to extract.

9. replace() and replaceAll()

replace(): Replaces the first occurrence of a specified value in a string.
replaceAll(): Replaces all occurrences of a specified value in a string.

Example 9: Using replace() and replaceAll()

const text = 'I love JavaScript. JavaScript is awesome!';

console.log(text.replace('JavaScript', 'Python')); // Output: I love Python. JavaScript is awesome!
console.log(text.replaceAll('JavaScript', 'Python')); // Output: I love Python. Python is awesome!

Explanation: Use a regular expression with the g flag in replace() to replace all occurrences.

console.log(text.replace(/JavaScript/g, 'Python')); // Output: I love Python. Python is awesome!

10. split()

The split() method splits a string into an array of substrings based on a specified delimiter.

Example 10: Using split()

const text = 'JavaScript,Python,Ruby';

const languages = text.split(',');
console.log(languages); // Output: ['JavaScript', 'Python', 'Ruby']

Explanation: You can use any delimiter to split the string, including spaces, commas, or even regular expressions.

11. trim(), trimStart(), and trimEnd()

trim(): Removes whitespace from both ends of a string.
trimStart(): Removes whitespace from the beginning of a string.
trimEnd(): Removes whitespace from the end of a string.

Example 11: Using trim(), trimStart(), and trimEnd()

const text = '   Hello, JavaScript!   ';

console.log(text.trim()); // Output: 'Hello, JavaScript!'
console.log(text.trimStart()); // Output: 'Hello, JavaScript!   '
console.log(text.trimEnd()); // Output: '   Hello, JavaScript!'

12. charAt() and charCodeAt()

charAt(): Returns the character at a specified index.
charCodeAt(): Returns the Unicode value of the character at a specified index.

Example 12: Using charAt() and charCodeAt()

const text = 'JavaScript';

console.log(text.charAt(4)); // Output: S
console.log(text.charCodeAt(4)); // Output: 83 (Unicode value of 'S')

13. concat()

The concat() method concatenates two or more strings.

Example 13: Using concat()

const str1 = 'Hello, ';
const str2 = 'World!';

console.log(str1.concat(str2)); // Output: Hello, World!

Explanation: While you can use the + operator for string concatenation, concat() is another way to join strings.

14. repeat()

The repeat() method returns a new string with a specified number of copies of the original string.

Example 14: Using repeat()

const text = 'Hi! ';

console.log(text.repeat(3)); // Output: Hi! Hi! Hi!

15. padStart() and padEnd()

padStart(): Pads the beginning of a string with another string until the resulting string reaches the specified length.
padEnd(): Pads the end of a string with another string until the resulting string reaches the specified length.

Example 15: Using padStart() and padEnd()

const text = '5';

console.log(text.padStart(3, '0')); // Output: '005'
console.log(text.padEnd(3, '0')); // Output: '500'

Explanation: These methods are useful for formatting strings, like displaying numbers with leading zeros.

Conclusion

JavaScript provides a rich set of string methods for manipulating and formatting text.

From simple case conversions (toUpperCase() and toLowerCase()) to more complex operations like searching (indexOf(), includes()), extracting (slice(), substring()), and modifying strings (replace(), split()), these methods allow you to work with textual data effectively.

Feel free to experiment with these examples and explore how JavaScript string methods can enhance your applications!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Strings: A Comprehensive Tutorial

written by utmoker71

Strings in JavaScript are used to represent textual data and are one of the most commonly used data types. JavaScript strings are sequences of characters enclosed in single quotes (‘…'), double quotes (“…”), or backticks (`…`).

They come with many built-in methods to manipulate text, making them very versatile for various applications.

This tutorial will cover how to create strings, use common string methods, and provide examples for each.

1. Creating Strings

In JavaScript, strings can be created using single quotes, double quotes, or backticks.

Example 1: Creating Strings

const singleQuoteString = 'Hello, World!';
const doubleQuoteString = "Hello, World!";
const templateString = `Hello, World!`;

console.log(singleQuoteString); // Output: Hello, World!
console.log(doubleQuoteString); // Output: Hello, World!
console.log(templateString); // Output: Hello, World!

Explanation: Strings created using single quotes, double quotes, or backticks behave the same. However, backticks (template literals) allow you to embed expressions and multiline text.

2. String Length

You can find the length of a string using the .length property.

Example 2: Getting the Length of a String

const text = 'JavaScript is awesome!';
console.log(text.length); // Output: 21

3. Accessing Characters in a String

You can access individual characters in a string using bracket notation ([]) or the .charAt() method.

Example 3: Accessing Characters in a String

const text = 'JavaScript';

console.log(text[0]); // Output: J
console.log(text.charAt(4)); // Output: S
console.log(text[text.length - 1]); // Output: t (last character)

4. String Methods

4.1 toUpperCase() and toLowerCase()

These methods convert the entire string to uppercase or lowercase.

Example 4: Using toUpperCase() and toLowerCase()

const text = 'JavaScript is Fun!';

console.log(text.toUpperCase()); // Output: JAVASCRIPT IS FUN!
console.log(text.toLowerCase()); // Output: javascript is fun!

4.2 indexOf() and lastIndexOf()

indexOf(): Returns the position of the first occurrence of a specified value.
lastIndexOf(): Returns the position of the last occurrence of a specified value.

Example 5: Using indexOf() and lastIndexOf()

const text = 'Hello, World! Hello, JavaScript!';

console.log(text.indexOf('Hello')); // Output: 0
console.log(text.lastIndexOf('Hello')); // Output: 14
console.log(text.indexOf('JavaScript')); // Output: 20
console.log(text.indexOf('Python')); // Output: -1 (not found)

4.3 includes()

The includes() met
hod checks if a string contains a specified value. It returns true or false.

Example 6: Using includes()

const text = 'JavaScript is fun!';

console.log(text.includes('JavaScript')); // Output: true
console.log(text.includes('Python')); // Output: false

4.4 slice()

The slice() method extracts a section of a string and returns it as a new string. It accepts two parameters: the starting index (inclusive) and the ending index (exclusive).

Example 7: Using slice()

const text = 'Hello, JavaScript!';

console.log(text.slice(0, 5)); // Output: Hello
console.log(text.slice(7)); // Output: JavaScript! (from index 7 to end)
console.log(text.slice(-10, -1)); // Output: JavaScript (negative indices count from end)

4.5 substring()

The substring() method is similar to slice(), but it doesn't accept negative indices. It extracts characters between two specified indices.

Example 8: Using substring()

const text = 'JavaScript is fun!';

console.log(text.substring(0, 10)); // Output: JavaScript
console.log(text.substring(11)); // Output: is fun!

4.6 substr()

The substr() method extracts a specified number of characters from a string, starting at a given index.

Example 9: Using substr()

const text = 'JavaScript is awesome!';

console.log(text.substr(0, 10)); // Output: JavaScript (start at index 0, extract 10 characters)
console.log(text.substr(11, 2)); // Output: is (start at index 11, extract 2 characters)
console.log(text.substr(-9, 7)); // Output: awesome (start 9 characters from the end, extract 7 characters)

5. String Manipulation

5.1 replace()

The replace() method replaces a specified value with another value in a string. By default, it replaces only the first occurrence. Use a regular expression with the g flag to replace all occurrences.

Example 10: Using replace()

const text = 'I love JavaScript. JavaScript is awesome!';

console.log(text.replace('JavaScript', 'Python')); // Output: I love Python. JavaScript is awesome!
console.log(text.replace(/JavaScript/g, 'Python')); // Output: I love Python. Python is awesome!

5.2 split()

The split() method splits a string into an array of substrings based on a specified delimiter.

Example 11: Using split()

const text = 'JavaScript,Python,Ruby';

const languages = text.split(',');
console.log(languages); // Output: ['JavaScript', 'Python', 'Ruby']

5.3 trim()

The trim() method removes whitespace from both ends of a string.

Example 12: Using trim()

const text = '   Hello, JavaScript!   ';

console.log(text.trim()); // Output: 'Hello, JavaScript!'

6. Template Literals

Template literals allow you to embed variables and expressions inside a string. They use backticks (`) and ${} to embed expressions.

Example 13: Using Template Literals

const name = 'Alice';
const age = 30;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is Alice and I am 30 years old.

// Multiline strings with template literals
const multiline = `This is line 1
This is line 2
This is line 3`;

console.log(multiline);
/*
Output:
This is line 1
This is line 2
This is line 3
*/

7. Concatenating Strings

You can concatenate strings using the + operator or the .concat() method.

Example 14: Concatenating Strings

const str1 = 'Hello, ';
const str2 = 'World!';

console.log(str1 + str2); // Output: Hello, World!
console.log(str1.concat(str2)); // Output: Hello, World!

8. Escape Characters in Strings

JavaScript provides several escape characters to use special characters within a string.

\': Single quote
\”: Double quote
\\: Backslash
\n: New line
\t: Tab

Example 15: Using Escape Characters

const text = 'He said, "It\'s a sunny day."';
console.log(text); // Output: He said, "It's a sunny day."

const multiLine = 'Line 1\nLine 2\nLine 3';
console.log(multiLine);
/*
Output:
Line 1
Line 2
Line 3
*/

Conclusion

Strings are an essential part of JavaScript, and the language provides a rich set of methods for manipulating and working with textual data.

This tutorial covered creating strings, accessing their properties, using built-in methods to modify and inspect them, and using template literals for more complex string handling.

By mastering these methods, you can efficiently work with text in JavaScript.

Feel free to explore and experiment with these examples to become more comfortable with JavaScript strings!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Date Set Methods: A Comprehensive Tutorial

written by utmoker71

JavaScript's Date object allows you to manipulate dates and times using several set methods.

These methods let you update various parts of a date, such as the year, month, day, hour, minute, second, and even milliseconds.

This tutorial will go over the different set methods available in the Date object with practical code examples.

1. Creating a Date Object

Before using the set methods, you need to have a Date object. You can create a Date object representing the current date and time or a specific date.

Example 1: Creating a Date Object

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

// Specific date and time (Year, Month (0-based), Day, Hours, Minutes, Seconds)
const specificDate = new Date(2024, 9, 6, 14, 30, 0); // October 6, 2024, 14:30:00
console.log(specificDate); // Output: Sun Oct 06 2024 14:30:00 GMT+0000 (Coordinated Universal Time)

2. setFullYear() Method

The setFullYear() method sets the year for a Date object. You can also optionally specify the month (0-11) and day (1-31).

Example 2: Using setFullYear()

const date = new Date();
console.log(date); // Output: Current date

date.setFullYear(2025);
console.log(date); // Output: Date with the updated year (e.g., 'Sun Oct 06 2025 ...')

// Set year, month (0-based), and day
date.setFullYear(2023, 0, 15); // January 15, 2023
console.log(date); // Output: 'Sun Jan 15 2023 ...'

Explanation: The method allows you to change just the year or the year, month, and day simultaneously.

3. setMonth() Method

The setMonth() method sets the month of a Date object. It takes a zero-based index (0 for January, 11 for December) and can optionally set the day of the month.

Example 3: Using setMonth()

const date = new Date();
console.log(date); // Output: Current date

date.setMonth(11); // Setting the month to December (0-based)
console.log(date); // Output: Date with the updated month (e.g., 'Fri Dec 06 2024 ...')

// Set month and day
date.setMonth(5, 10); // Setting to June 10th
console.log(date); // Output: 'Mon Jun 10 2024 ...'

Explanation: When only the month is provided, the day of the month remains unchanged unless it's updated using the second parameter.

4. setDate() Method

The setDate() method sets the day of the month for a Date object.

Example 4: Using setDate()

const date = new Date();
console.log(date); // Output: Current date

date.setDate(15); // Set the day of the month to 15
console.log(date); // Output: Date with the updated day (e.g., 'Fri Oct 15 2024 ...')

// Setting the date to a higher value adjusts the month
date.setDate(32);
console.log(date); // Output: Automatically moves to the next month (e.g., 'Wed Nov 01 2024 ...')

Explanation: If the day exceeds the maximum days in the current month, it automatically adjusts to the next month.

5. setHours() Method

The setHours() method sets the hour for a Date object. It can optionally set the minutes, seconds, and milliseconds.

Example 5: Using setHours()

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

date.setHours(20); // Set the hour to 8 PM
console.log(date); // Output: Date with updated hour (e.g., 'Wed Oct 06 2024 20:30:00 ...')

// Set hours, minutes, seconds, and milliseconds
date.setHours(15, 45, 30, 500);
console.log(date); // Output: 'Wed Oct 06 2024 15:45:30.500 ...'

Explanation: You can set just the hour, or you can also specify minutes, seconds, and milliseconds.

6. setMinutes() Method

The setMinutes() method sets the minutes for a Date object. It can optionally set the seconds and milliseconds.

Example 6: Using setMinutes()

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

date.setMinutes(10); // Set minutes to 10
console.log(date); // Output: Date with updated minutes (e.g., 'Wed Oct 06 2024 14:10:00 ...')

// Set minutes, seconds, and milliseconds
date.setMinutes(30, 45, 600);
console.log(date); // Output: 'Wed Oct 06 2024 14:30:45.600 ...'

7. setSeconds() Method

The setSeconds() method sets the seconds for a Date object. It can optionally set the milliseconds.

Example 7: Using setSeconds()

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

date.setSeconds(45); // Set seconds to 45
console.log(date); // Output: Date with updated seconds (e.g., 'Wed Oct 06 2024 14:30:45 ...')

// Set seconds and milliseconds
date.setSeconds(20, 250);
console.log(date); // Output: 'Wed Oct 06 2024 14:30:20.250 ...'

8. setMilliseconds() Method

The setMilliseconds() method sets the milliseconds (0-999) for a Date object.

Example 8: Using setMilliseconds()

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

date.setMilliseconds(500); // Set milliseconds to 500
console.log(date); // Output: Date with updated milliseconds (e.g., 'Wed Oct 06 2024 14:30:45.500 ...')

9. setTime() Method

The setTime() method sets the time for a Date object in milliseconds since January 1, 1970 (the Unix epoch).

Example 9: Using setTime()

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

const timestamp = 1609459200000; // January 1, 2021 00:00:00 UTC in milliseconds
date.setTime(timestamp);
console.log(date); // Output: 'Fri Jan 01 2021 00:00:00 GMT+0000 (UTC)'

Explanation: This method allows you to set a date using a timestamp.

10. setUTC*() Methods

The setUTC*() methods are similar to the set*() methods but modify the date in the Coordinated Universal Time (UTC) time zone.

Example 10: Using setUTCFullYear(), setUTCMonth(), and setUTCDate()

const date = new Date();

// Set UTC year
date.setUTCFullYear(2023);
console.log(date); // Output: Date with updated UTC year

// Set UTC month and day
date.setUTCMonth(0, 15); // January 15 in UTC
console.log(date); // Output: 'Sun Jan 15 2023 ...'

// Set UTC hours, minutes, and seconds
date.setUTCHours(12, 30, 45);
console.log(date); // Output: 'Sun Jan 15 2023 12:30:45 GMT+0000 (UTC)'

Explanation: These methods allow you to set date and time components in the UTC time zone.

11. Using set Methods Together

You can combine multiple set methods to adjust various parts of a date.

Example 11: Setting Multiple Date Components

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

// Set year, month, day, hours, minutes, seconds, and milliseconds
date.setFullYear(2022);
date.setMonth(11); // December (0-based)
date.setDate(25);
date.setHours(10);
date.setMinutes(45);
date.setSeconds(30);
date.setMilliseconds(123);

console.log(date); // Output: 'Sun Dec 25 2022 10:45:30.123 ...'

Conclusion

The Date object's set methods provide a flexible way to manipulate dates and times in JavaScript.

Whether you need to update the year, month, day, or fine-tune the time components down to milliseconds, these methods make it easy to work with dates.

By understanding how to use these methods, you can effectively manage and manipulate

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Date Get Methods: A Comprehensive Tutorial

written by utmoker71

JavaScript's Date object provides several methods to get information about dates and times.

These methods make it easy to retrieve specific components such as the year, month, day, hour, minute, and more.

This tutorial will guide you through the various get methods provided by the Date object, with practical examples.

1. Creating a Date Object

Before using get methods, you need a Date object. You can create a Date object representing the current date and time or a specific date.

Example 1: Creating a Date Object

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

// Specific date and time (Year, Month (0-based), Day, Hours, Minutes, Seconds)
const specificDate = new Date(2024, 9, 6, 14, 30, 0); // October 6, 2024, 14:30:00
console.log(specificDate); // Output: Sun Oct 06 2024 14:30:00 GMT+0000 (Coordinated Universal Time)

2. getFullYear() Method

The getFullYear() method returns the year of a Date object as a four-digit number.

Example 2: Using getFullYear()

const date = new Date();
console.log(date.getFullYear()); // Output: Current year (e.g., 2024)

3. getMonth() Method

The getMonth() method returns the month of a Date object as a zero-based number (0-11), where 0 represents January and 11 represents December.

Example 3: Using getMonth()

const date = new Date();
console.log(date.getMonth()); // Output: Current month as a zero-based number (e.g., 9 for October)

Note: Since months are zero-based, you may need to add 1 to get the “human-readable” month (1-12).

console.log(date.getMonth() + 1); // Output: Current month as 1-based (e.g., 10 for October)

4. getDate() Method

The getDate() method returns the day of the month (1-31) of a Date object.

Example 4: Using getDate()

const date = new Date();
console.log(date.getDate()); // Output: Current day of the month (e.g., 6)

5. getDay() Method

The getDay() method returns the day of the week (0-6), where 0 represents Sunday and 6 represents Saturday.

Example 5: Using getDay()

const date = new Date();
console.log(date.getDay()); // Output: Current day of the week as a number (e.g., 0 for Sunday)

6. getHours() Method

The getHours() method returns the hour (0-23) of a Date object, where 0 represents midnight and 23 represents 11 PM.

Example 6: Using getHours()

const date = new Date();
console.log(date.getHours()); // Output: Current hour (e.g., 14 for 2 PM)

7. getMinutes() Method

The getMinutes() method returns the minutes (0-59) of a Date object.

Example 7: Using getMinutes()

const date = new Date();
console.log(date.getMinutes()); // Output: Current minutes (e.g., 30)

8. getSeconds() Method

The getSeconds() method returns the seconds (0-59) of a Date object.

Example 8: Using getSeconds()

const date = new Date();
console.log(date.getSeconds()); // Output: Current seconds (e.g., 15)

9. getMilliseconds() Method

The getMilliseconds() method returns the milliseconds (0-999) of a Date object.

Example 9: Using getMilliseconds()

const date = new Date();
console.log(date.getMilliseconds()); // Output: Current milliseconds (e.g., 456)

10. getTime() Method

The getTime() method returns the number of milliseconds since January 1, 1970, 00:00:00 UTC (the Unix epoch).

Example 10: Using getTime()

const date = new Date();
console.log(date.getTime()); // Output: Current timestamp in milliseconds (e.g., 1696595401234)

Explanation: This value is useful for calculating time differences.

const start = new Date();
// Some code execution here
const end = new Date();
console.log(`Execution time: ${end.getTime() - start.getTime()} ms`);

11. getTimezoneOffset() Method

The getTimezoneOffset() method returns the difference in minutes between the local time zone and UTC.

Example 11: Using getTimezoneOffset()

const date = new Date();
console.log(date.getTimezoneOffset()); // Output: Difference in minutes (e.g., -240 for UTC-4)

Explanation: The return value is positive if the local time zone is behind UTC, and negative if it is ahead of UTC.

12. getUTC*() Methods

The getUTC*() methods provide the same functionality as their non-UTC counterparts but return the values in Coordinated Universal Time (UTC).

Example 12: Using getUTCFullYear(), getUTCMonth(), and getUTCDate()

const date = new Date();

console.log(date.getUTCFullYear()); // Output: Current year in UTC
console.log(date.getUTCMonth()); // Output: Current month in UTC (0-based)
console.log(date.getUTCDate()); // Output: Current day of the month in UTC
console.log(date.getUTCHours()); // Output: Current hour in UTC
console.log(date.getUTCMinutes()); // Output: Current minutes in UTC
console.log(date.getUTCSeconds()); // Output: Current seconds in UTC
console.log(date.getUTCMilliseconds()); // Output: Current milliseconds in UTC

13. Formatting a Full Date

You can combine these get methods to extract and format a full date string.

Example 13: Formatting a Full Date

const date = new Date();

const year = date.getFullYear();
const month = date.getMonth() + 1; // Months are 0-based, add 1 for human-readable format
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();

console.log(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
// Output: Formatted date string (e.g., '2024-10-6 14:30:15')

Explanation: This example extracts all components of the current date and formats them into a more readable string.

Conclusion

The Date object in JavaScript provides a variety of get methods to access different parts of a date and time.

Whether you need to retrieve the year, month, day, or time down to the millisecond, these methods provide an easy way to work with date data.

By understanding and using these methods effectively, you can easily handle dates and times in your JavaScript projects.

Feel free to experiment with these examples and use them as a reference for handling dates in your code!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Number Properties: A Complete Tutorial

written by utmoker71

JavaScript's Number object includes several built-in properties that provide useful information about numbers in JavaScript.

These properties are static, meaning they are accessed directly from the Number object rather than instances of Number.

This tutorial will go over the most commonly used Number properties, explaining their significance and showing practical code examples.

 

1. Number.MAX_VALUE

Description: This property represents the maximum positive value that can be represented in JavaScript. If a number is larger than this, JavaScript will return Infinity.
Value: Approximately 1.7976931348623157e+308.

Example 1: Using Number.MAX_VALUE

const maxValue = Number.MAX_VALUE;

console.log(maxValue); // Output: 1.7976931348623157e+308
console.log(maxValue + 1); // Output: 1.7976931348623157e+308 (No change)
console.log(maxValue * 2); // Output: Infinity

Explanation: When you add to or multiply Number.MAX_VALUE by a large enough number, JavaScript returns Infinity.

2. Number.MIN_VALUE

Description: This property represents the smallest positive number that can be represented in JavaScript. It is the closest to zero but not zero.
Value: Approximately 5e-324.

Example 2: Using Number.MIN_VALUE

const minValue = Number.MIN_VALUE;

console.log(minValue); // Output: 5e-324
console.log(minValue / 2); // Output: 0
console.log(minValue > 0); // Output: true

Explanation: Dividing Number.MIN_VALUE by a number greater than 1 results in 0. However, Number.MIN_VALUE itself is still greater than zero.

3. Number.POSITIVE_INFINITY

Description: This property represents positive infinity. It is returned when a number exceeds Number.MAX_VALUE or when a positive number is divided by zero.
Value: Infinity.

Example 3: Using Number.POSITIVE_INFINITY

const positiveInfinity = Number.POSITIVE_INFINITY;

console.log(positiveInfinity); // Output: Infinity
console.log(1 / 0); // Output: Infinity
console.log(positiveInfinity + 1000); // Output: Infinity

Explanation: Number.POSITIVE_INFINITY can be used to represent an infinite value in mathematical operations. Any arithmetic operation involving infinity (except subtraction with infinity) results in Infinity.

4. Number.NEGATIVE_INFINITY

Description: This property represents negative infinity. It is returned when a number is smaller than -Number.MAX_VALUE or when a negative number is divided by zero.
Value: -Infinity.

Example 4: Using Number.NEGATIVE_INFINITY

const negativeInfinity = Number.NEGATIVE_INFINITY;

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

Explanation: Similar to positive infinity, Number.NEGATIVE_INFINITY can represent an infinitely large negative number. Any operation involving negative infinity (except addition with infinity) results in -Infinity.

5. Number.NaN (Not-a-Number)

Description: This property represents a value that is “Not-a-Number”. It is usually the result of an invalid or undefined mathematical operation (e.g., dividing zero by zero).
Value: NaN.

Example 5: Using Number.NaN

const notANumber = Number.NaN;

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

Explanation: NaN is a special value in JavaScript used to denote a non-numeric result. Note that NaN === NaN returns false, so to check if a value is NaN, you need to use Number.isNaN().

6. Number.EPSILON

Description: This property represents the smallest difference between two representable numbers in JavaScript. It is useful for comparing floating-point numbers due to precision errors.
Value: Approximately 2.220446049250313e-16.

Example 6: Using Number.EPSILON for Floating-Point Comparisons

const a = 0.1 + 0.2;
const b = 0.3;

console.log(a === b); // Output: false (Due to floating-point precision)
console.log(Math.abs(a - b) < Number.EPSILON); // Output: true

Explanation: Floating-point arithmetic can lead to precision errors. Number.EPSILON provides a tiny threshold to compare numbers and determine if they are “close enough.”

7. Number.MAX_SAFE_INTEGER

Description: This property represents the maximum safe integer in JavaScript (2^53 – 1). Any number larger than this may lose precision.
Value: 9007199254740991.

Example 7: Using Number.MAX_SAFE_INTEGER

const maxSafeInteger = Number.MAX_SAFE_INTEGER;

console.log(maxSafeInteger); // Output: 9007199254740991
console.log(maxSafeInteger + 1); // Output: 9007199254740992
console.log(maxSafeInteger + 2); // Output: 9007199254740992 (Incorrect due to precision loss)

Explanation: Once you go beyond Number.MAX_SAFE_INTEGER, JavaScript may not represent the number accurately due to the limits of its 64-bit floating-point format.

8. Number.MIN_SAFE_INTEGER

Description: This property represents the minimum safe integer in JavaScript (-(2^53 – 1)). Any number smaller than this may lose precision.
Value: -9007199254740991.

Example 8: Using Number.MIN_SAFE_INTEGER

const minSafeInteger = Number.MIN_SAFE_INTEGER;

console.log(minSafeInteger); // Output: -9007199254740991
console.log(minSafeInteger - 1); // Output: -9007199254740992
console.log(minSafeInteger - 2); // Output: -9007199254740992 (Incorrect due to precision loss)

Explanation: Similar to Number.MAX_SAFE_INTEGER, numbers below Number.MIN_SAFE_INTEGER may not be accurately represented.

Summary of Number Properties

Property Description Example Value
Number.MAX_VALUE Largest positive number 1.7976931348623157e+308
Number.MIN_VALUE Smallest positive number 5e-324
Number.POSITIVE_INFINITY Represents positive infinity Infinity
Number.NEGATIVE_INFINITY Represents negative infinity -Infinity
Number.NaN Represents “Not-a-Number” NaN
Number.EPSILON Smallest difference between two numbers 2.220446049250313e-16
Number.MAX_SAFE_INTEGER Largest integer safely representable 9007199254740991
Number.MIN_SAFE_INTEGER Smallest integer safely representable -9007199254740991

Conclusion

JavaScript's Number properties provide valuable information about the numeric capabilities and limitations of the language.

Understanding these properties can help you write more robust code, especially when working with large numbers, floating-point arithmetic, or numeric precision.

Experiment with these examples to become more familiar with JavaScript's Number properties!

0 comment
0 FacebookTwitterPinterestEmail
Basics

JavaScript Number Methods: A Comprehensive Tutorial

written by utmoker71

JavaScript provides a set of built-in Number methods that allow you to work with numeric data effectively. These methods can be used to convert numbers, format them, and perform various numerical operations.

In this tutorial, we will explore several Number methods, explain their usage, and illustrate them with code examples.

1. toString() Method

The toString() method converts a number to a string. You can optionally specify a base (radix) for the conversion, which is particularly useful for converting numbers to binary, octal, hexadecimal, etc.

Example 1: Using toString()

const number = 255;

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

Explanation: By default, toString() converts the number to a decimal string. Specifying a radix (like 2, 8, or 16) converts the number into binary, octal, or hexadecimal, respectively.

2. toFixed() Method

The toFixed() method formats a number to a specified number of decimal places. It returns a string representation of the number.

Example 2: Using toFixed()

const pi = 3.14159;

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

Explanation: toFixed() rounds the number to the specified number of decimal places. Note that it returns a string, not a number.

3. toPrecision() Method

The toPrecision() method formats a number to a specified length, including both the integer and decimal parts. It returns a string.

Example 3: 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() adjusts the number to the total number of significant digits. If the specified precision is less than the number of digits, the number is rounded and may be formatted using scientific notation.

4. toExponential() Method

The toExponential() method converts a number to an exponential notation. You can specify the number of digits after the decimal point.

Example 4: Using toExponential()

const largeNumber = 123456789;

console.log(largeNumber.toExponential()); // Output: '1.23456789e+8'
console.log(largeNumber.toExponential(2)); // Output: '1.23e+8'
console.log(largeNumber.toExponential(4)); // Output: '1.2346e+8'

Explanation: toExponential() returns the number in exponential (scientific) notation as a string. The optional parameter specifies the number of digits after the decimal point.

5. Number.isInteger() Method

The Number.isInteger() method checks whether a value is an integer. It returns true if the value is an integer and false otherwise.

Example 5: 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
console.log(Number.isInteger(NaN)); // Output: false

Explanation: Number.isInteger() only returns true for values that are integers. Strings and special numeric values like NaN return false.

6. Number.isNaN() Method

The Number.isNaN() method determines if a value is NaN (Not-a-Number). It returns true if the value is NaN and false otherwise.

Example 6: 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 different from the global isNaN() function because it does not try to convert the value to a number before checking if it is NaN.

7. Number.isFinite() Method

The Number.isFinite() method checks if a value is a finite number. It returns true for numbers that are neither Infinity, -Infinity, nor NaN.

Example 7: Using Number.isFinite()

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

Explanation: Number.isFinite() returns true only if the value is a finite number. Unlike the global isFinite() function, it does not convert strings to numbers.

8. Number.parseInt() and Number.parseFloat()

These methods are similar to the global parseInt() and parseFloat() functions. They convert a string to a number.

Example 8: Using Number.parseInt() and Number.parseFloat()

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

Explanation: Number.parseInt() parses a string and returns an integer. The second parameter in parseInt() specifies the base (radix) for the conversion. Number.parseFloat() parses a string and returns a floating-point number.

9. Number Properties

JavaScript provides several properties that can be used to get information about numbers:

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

Example 9: 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

Explanation: These properties provide information about the limits and special values of JavaScript numbers.

10. Number Conversion Methods

10.1 Number()

The Number() method converts a value to a number. If the value cannot be converted, it returns NaN.

Example 10: Using Number()

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

Explanation: Number() tries to convert the given value to a number. It handles numeric strings, booleans, and more, but returns NaN for non-numeric strings.

Conclusion

JavaScript provides a variety of methods for handling and manipulating numbers.

From formatting numbers with toFixed() and toPrecision() to performing checks with Number.isNaN() and Number.isFinite(), these methods enhance how you can work with numeric data in your JavaScript programs.

Understanding these methods will help you handle numeric operations more efficiently and correctly. Feel free to experiment with the examples to get a solid grasp of these Number methods!

0 comment
0 FacebookTwitterPinterestEmail
Newer Posts
Older Posts