From basics to advanced โ learn JavaScript programming, DOM manipulation, and ES6+ features to bring interactivity to your projects.
Hello World!
+Hello World!
+Comments in JavaScript
+Open the console to see the output.
+ + + +``` + +In this example, we have added a single-line comment and a single-line comment at the end of the line. + +**Now Let's Get Started with multi-line comments** + +```html title="index.html" + + + + + +Comments in JavaScript
+Open the console to see the output.
+ + + +``` + +In this example, we have added a multi-line comment that spans multiple lines. + +:::note +Comments are used to explain the code and make it more readable. They are ignored by the JavaScript interpreter. +::: + +## Conclusion + +In this tutorial, you learned about comments in JavaScript. You learned about single-line comments and multi-line comments. Comments are used to explain the code and make it more readable. They are ignored by the JavaScript interpreter. \ No newline at end of file diff --git a/languages-platforms/javascript/const-js.md b/languages-platforms/javascript/const-js.md new file mode 100644 index 0000000..3252f5b --- /dev/null +++ b/languages-platforms/javascript/const-js.md @@ -0,0 +1,151 @@ +--- +id: const-in-javascript +title: Const Keyword in JavaScript +sidebar_label: Const Keyword +sidebar_position: 9 +tags: [JavaScript, const, ES6, Variables, Block Scope, Hoisting, Redeclaration, Best Practices, Comparison, let, var, Constants, ECMAScript 6, ES6, ES2015, Syntax, Example, Block Scope, Reassignment, Best Practices, Comparison with let, Comparison with var, Hoisting, Summary] +description: What is the const keyword in JavaScript and how to use it. +--- + +In JavaScript, the `const` keyword is used to declare a block-scoped variable that cannot be reassigned. It was introduced in ECMAScript 6 (ES6) and is the preferred way to declare constants in modern JavaScript. + +> ***ES6 (ECMAScript 2015) is a major update to JavaScript that adds new syntax and features to the language. It was officially released in June 2015.*** + +## Syntax + +The syntax to declare a constant using the `const` keyword is: + +```js title="Syntax" +const variableName = value; +``` + +Here, `variableName` is the name of the constant and `value` is the value assigned to the constant. + +## Example + +Let's see an example to understand how to use the `const` keyword in JavaScript: + +```js title="Example" +const PI = 3.14159; +console.log(PI); // Output: 3.14159 +``` + +In the above example, we have declared a constant `PI` using the `const` keyword and assigned it a value `3.14159`. We then printed the value of the constant using `console.log()`. + +## Block Scope + +The `const` keyword is block-scoped, which means that the constant declared using `const` is only available within the block in which it is defined. + +```js title="Block Scope" +{ + const x = 10; + console.log(x); // Output: 10 +} + +console.log(x); // Uncaught ReferenceError: x is not defined +``` + +In the above example, the constant `x` is only available within the block in which it is defined. If we try to access it outside the block, it will result in a `ReferenceError`. + +## Reassignment + +The `const` keyword does not allow reassignment of the same constant once it has been initialized. + +```js title="Reassignment" +const x = 10; +x = 20; // Uncaught TypeError: Assignment to constant variable. +``` + +In the above example, we are trying to reassign the value of the constant `x`, which results in a `TypeError`. + +## Best Practices + +- Use the `const` keyword for values that are not intended to be reassigned. +- Use descriptive variable names to improve code readability. +- Use uppercase letters and underscores to name constants (e.g., `MAX_LENGTH`, `PI`, `TAX_RATE`). +- Avoid using `const` for complex objects or arrays, as it only prevents reassignment of the variable itself, not its properties or elements. +- Use `let` or `var` for values that need to be reassigned. +- Use `const` for values that are known at compile time and are not expected to change. +- Use `const` for function expressions, arrow functions, and classes to prevent accidental reassignment. +- Use `const` for values that are shared across multiple files or modules. +- Use `const` for values that are used as configuration settings or constants in your application. +- Use `const` for values that are used as default parameters in functions. + +## Comparison with let + +The `const` keyword is similar to the `let` keyword in that it is block-scoped and cannot be hoisted. However, the main difference is that a variable declared using `const` cannot be reassigned, whereas a variable declared using `let` can be reassigned. + +```js title="Comparison with let" +const x = 10; +x = 20; // Uncaught TypeError: Assignment to constant variable + +let y = 10; +y = 20; // No error +``` + +In the above example, we are trying to reassign the value of the constant `x`, which results in a `TypeError`. However, we can reassign the value of the variable `y` without any error. + +## Comparison with var + +The `const` keyword differs from the `var` keyword in terms of block scope, reassignment, and hoisting. + +### Block Scope + +Variables declared using the `var` keyword are function-scoped or globally-scoped, whereas variables declared using the `const` keyword are block-scoped. + +```js title="Block Scope" +// var +function varExample() { + if (true) { + var x = 10; + } + console.log(x); // Output: 10 +} + +// const + +{ + const y = 10; + console.log(y); // Output: 10 +} + +console.log(y); // Uncaught ReferenceError: y is not defined +``` + +In the above example, the variable `x` declared using the `var` keyword is available outside the block in which it is defined, whereas the constant `y` declared using the `const` keyword is not available outside the block. + +### Redeclaration + +The `var` keyword allows redeclaration of the same variable within the same block scope, whereas the `const` keyword does not allow redeclaration of the same constant within the same block scope. + +```js title="Redeclaration" +var x = 10; +var x = 20; // No error + +const y = 10; +const y = 20; // Uncaught SyntaxError: Identifier 'y' has already been declared +``` + +In the above example, we are trying to redeclare the variable `x` using the `var` keyword, which does not result in an error. However, we are trying to redeclare the constant `y` using the `const` keyword, which results in a `SyntaxError`. + +### Hoisting + +Variables declared using the `var` keyword are hoisted to the top of their function or global scope, whereas variables declared using the `const` keyword are not hoisted. + +```js title="Hoisting" +console.log(x); // Output: undefined +var x = 10; + +console.log(y); // Uncaught ReferenceError: y is not defined +const y = 10; +``` + +In the above example, the variable `x` declared using the `var` keyword is hoisted to the top of the global scope, whereas the constant `y` declared using the `const` keyword is not hoisted. + +:::info ๐ Note +It is recommended to use the `const` keyword for values that are not intended to be reassigned and are known at compile time. This helps prevent accidental reassignment and improves code readability. +::: + +## Summary + +Constants are block-scoped variables that cannot be reassigned once they are initialized. The `const` keyword is used to declare constants in JavaScript and is the preferred way to declare constants in modern JavaScript. It is similar to the `let` keyword in terms of block scope and hoisting, but it differs in that it does not allow reassignment. It also differs from the `var` keyword in terms of block scope, redeclaration, and hoisting. It is recommended to use the `const` keyword for values that are not intended to be reassigned and are known at compile time. \ No newline at end of file diff --git a/languages-platforms/javascript/datatypes/_category_.json b/languages-platforms/javascript/datatypes/_category_.json new file mode 100644 index 0000000..35b5974 --- /dev/null +++ b/languages-platforms/javascript/datatypes/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Data Types in JavaScript", + "position": 11, + "link": { + "type": "generated-index", + "description": + "Data types are the classification or categorization of data items. It represents the kind of value that tells what operations can be performed on a particular data. Since everything is an object in JavaScript, data types are divided into two categories: primitive data types and object data types. Primitive data types are the most basic data types available in JavaScript. They are the building blocks for data manipulation. Object data types are more complex data types and are used to store collections of data and more complex entities." + } + } \ No newline at end of file diff --git a/languages-platforms/javascript/datatypes/datatypes-js.md b/languages-platforms/javascript/datatypes/datatypes-js.md new file mode 100644 index 0000000..6f571ae --- /dev/null +++ b/languages-platforms/javascript/datatypes/datatypes-js.md @@ -0,0 +1,217 @@ +--- +id: datatypes-in-javascript +title: Data Types in JavaScript +sidebar_label: Data Types +sidebar_position: 1 +tags: [JavaScript, Data Types, Primitive Data Types, Non-Primitive Data Types, String, Number, BigInt, Boolean, Undefined, Symbol, 'Null', Object, Array, Function, Type Conversion, Implicit Type Conversion, Explicit Type Conversion] +description: What is the data type in JavaScript? Learn about the primitive and non-primitive data types in JavaScript, including string, number, bigint, boolean, undefined, symbol, null, object, array, and function. +--- + +Data types are the classification or categorization of data items. It represents the kind of value that tells what operations can be performed on a particular data. Since everything is an object in JavaScript, data types are divided into two categories: + +1. **Primitive Data Types** +2. **Non-Primitive Data Types** + +## Primitive Data Types + +JavaScript has seven primitive data types: `string`, `number`, `bigint`, `boolean`, `undefined`, `symbol`, and `null`. + +### 1. String Data Type + +```js title="index.js" +let name = "John Doe"; +let message = 'Hello World!'; +``` + +### 2. Number Data Type + +The number data type is used to represent numeric values. It can be an integer or a floating-point number. For example: + +```js title="index.js" +let count = 100; +let price = 99.99; +``` + +### 3. Boolean Data Type + +The boolean data type represents a logical value. It can have only two values: `true` or `false`. For example: + +```js title="index.js" +let isTrue = true; +let isFalse = false; +``` + +### 4. Undefined Data Type + +The `undefined` data type represents an undefined value. If a variable has been declared, but has not been assigned a value, it is of type `undefined`. For example: + +```js title="index.js" +let data; +console.log(data); // Output: undefined +``` + +### 5. Null Data Type + +The `null` data type represents a null value. In JavaScript, `null` is not a reference to a non-existing object. It is simply a special value that represents "nothing", "empty", or "value unknown". For example: + +```js title="index.js" +let car = null; +``` + +### 6. Symbol Data Type + +The `symbol` data type represents a unique and immutable value and may be used as the key of an `Object` property. For example: + +```js title="index.js" +let id = Symbol('id'); +``` + +### 7. BigInt Data Type + +The `bigint` data type is used to represent whole numbers larger than `2^53 - 1`. It is a new feature in JavaScript and is not supported in all browsers. For example: + +```js title="index.js" +let value = 9007199254740991n; +``` + +## Non-Primitive Data Types + +Non-primitive data types are called reference types because they are accessed by reference. These data types are `Object`, `Array`, and `Function`. + +### 1. Object Data Type + +The `object` data type represents a collection of key-value pairs. For example: + +```js title="index.js" +let person = { + name: 'John Doe', + age: 25 +}; + +console.log(person.name); // Output: John Doe +``` + +### 2. Array Data Type + +The `array` data type represents a list of elements. For example: + +```js title="index.js" +let colors = ['red', 'green', 'blue']; +console.log(colors[0]); // Output: red +``` + +### 3. Function Data Type + +The `function` data type represents a function. For example: + +```js title="index.js" +function greet(name) { + return `Hello, ${name}!`; +} + +console.log(greet('John Doe')); // Output: Hello, John Doe! +``` + +## Type Conversion + +Type conversion is the process of converting the value from one data type to another. JavaScript provides two types of type conversion: + +1. **Implicit Type Conversion** +2. **Explicit Type Conversion** + +### 1. Implicit Type Conversion + +Implicit type conversion, also known as type coercion, is the automatic conversion of data types. For example: + +```js title="index.js" +let x = 10; +let y = "5"; +let z = x + y; + +console.log(z); // Output: 105 +``` + +In the above example, the number `10` is converted to a string and concatenated with the string `"5"`. + +### 2. Explicit Type Conversion + +Explicit type conversion, also known as type casting, is the manual conversion of data types. For example: + +```js title="index.js" +let x = "10"; +let y = 5; +let z = Number(x) + y; + +console.log(z); // Output: 15 +``` + +In the above example, the string `"10"` is converted to a number and added to the number `5`. + +:::tip tips and tricks +- In JavaScript, you can use the `Number()`, `String()`, `Boolean()`, and `BigInt()` functions to convert a value to a number, string, boolean, and bigint, respectively. +- The `parseInt()` and `parseFloat()` functions are used to convert a string to an integer and floating-point number, respectively. +::: + +:::info note +**1. Difference between primitive and non-primitive data types:** + +|No. |Primitive Data Types|Non-Primitive Data Types| +|--- |--- |--- | +|1. |Primitive data types are immutable.|Non-primitive data types are mutable.| +|2. |Primitive data types are stored in the stack.|Non-primitive data types are stored in the heap.| +|3. |Primitive data types are accessed by value.|Non-primitive data types are accessed by reference.| + +**2. Type conversion in JavaScript:** + +|No. |Implicit Type Conversion|Explicit Type Conversion| +|--- |--- |--- | +|1. |Implicit type conversion is the automatic conversion of data types.|Explicit type conversion is the manual conversion of data types.| +|2. |Implicit type conversion is performed by JavaScript.|Explicit type conversion is performed by the developer.| +|3. |Implicit type conversion is also known as type coercion.|Explicit type conversion is also known as type casting.| + +**3. Difference between pass by value and pass by reference:** + +|No. |Pass by Value|Pass by Reference| +|--- |--- |--- | +|1. |In pass by value, a copy of the actual value is passed to the function.|In pass by reference, the actual value is passed to the function.| +|2. |Pass by value is used for primitive data types.|Pass by reference is used for non-primitive data types.| +|3. |Pass by value is used in JavaScript for primitive data types.|Pass by reference is used in JavaScript for non-primitive data types.| +|4. |Pass by value is faster than pass by reference.|Pass by reference is slower than pass by value.| +|5. |Pass by value is used in the stack.|Pass by reference is used in the heap.| + +6. for example: + ```js title="pass by value" + let x = 10; + let y = x; + x = 20; + console.log(y); // Output: 10 + ``` + --- + + ```js title="Pass by Reference" + let person = { + name: 'Ajay Dhangar', + age: 25 + }; + let p = person; + person.name = 'Jane Doe'; + console.log(p.name); // Output: Jane Doe + ``` + +**4. Difference between `null` and `undefined`:** + +|No. |null|undefined| +|--- |--- |--- | +|1. |`null` represents a null value.|`undefined` represents an undefined value.| +|2. |`null` is an object.|`undefined` is a type.| +|3. |`null` is assigned to a variable.|`undefined` is the value of a variable that has not been assigned a value.| +|4. |`null` is used to represent "nothing", "empty", or "value unknown".|`undefined` is used to represent "undefined", "not defined", or "value unknown".| +|5. |`null` is a special value that represents "nothing", "empty", or "value unknown".|`undefined` is a special value that represents an undefined value.| +|6. |`let car = null;`|`let data;`| +| |`console.log(car); // Output: null`|`console.log(data); // Output: undefined`| + +::: + +## Conclusion + +In this article, we learned about the data types in JavaScript. We also learned about the type conversion in JavaScript. Understanding data types and type conversion is important for writing efficient and bug-free code. \ No newline at end of file diff --git a/languages-platforms/javascript/datatypes/non-primitive-data-types/_category_.json b/languages-platforms/javascript/datatypes/non-primitive-data-types/_category_.json new file mode 100644 index 0000000..d09ee00 --- /dev/null +++ b/languages-platforms/javascript/datatypes/non-primitive-data-types/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Non Primitive Data Types", + "position": 3, + "link": { + "type": "generated-index", + "description": "In JavaScript Non Primitive Data Types (object data types) are used to store complex data types. These are the reference data types. They are called so because they don't store the value directly, they store the reference of the value. The reference is a pointer to a location in memory where the value is stored. Non-primitive data types are used to store complex objects. They are also called reference data types because they refer to the objects. Non-primitive data types are Object, Array, and Function." + } + } \ No newline at end of file diff --git a/languages-platforms/javascript/datatypes/non-primitive-data-types/array-js.mdx b/languages-platforms/javascript/datatypes/non-primitive-data-types/array-js.mdx new file mode 100644 index 0000000..46fc94c --- /dev/null +++ b/languages-platforms/javascript/datatypes/non-primitive-data-types/array-js.mdx @@ -0,0 +1,306 @@ +--- +id: array-datatypes-in-javascript +title: Array Data Types in JavaScript +sidebar_label: Array +sidebar_position: 2 +tags: [JavaScript, Data Types, Non-Primitive Data Types, Array, 'Array in JavaScript', 'Array data type', 'Creating arrays in JavaScript', 'Accessing array elements', 'Modifying array elements', 'Adding array elements', 'Deleting array elements', 'Array methods', 'Array properties', 'Array styles', 'Typed arrays', 'Array-like objects', 'Array buffers', 'Array buffer views', 'Array destructuring', 'Array spread operator', Arrays Style, Dense Array, Sparse Array, Typed Arrays, Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array] +description: What is the array data type in JavaScript? Learn about the array data type and how to create, access, modify, add, and delete array elements in JavaScript. +--- + +An `Array` is a non-primitive data type in JavaScript. It represents a collection of elements, where each element can be of any data type, including other arrays. + +```mermaid +graph TD; + subgraph "Arrays" + style arrayStyle fill:#FF00FF,color:#333,stroke-width:2px; + arrayStyle --> denseArray["Dense Array"]; + denseArray --> sparseArray["Sparse Array"]; + arrayStyle --> arrayLike["Array-like Objects"]; + arrayLike --> argumentsObject["Arguments Object"]; + end; + subgraph "Typed Arrays" + style typedArrayStyle fill:#FF00FF,color:#333,stroke-width:2px; + typedArrayStyle --> Int8Array["Int8Array"]; + typedArrayStyle --> Uint8Array["Uint8Array"]; + typedArrayStyle --> Uint8ClampedArray["Uint8ClampedArray"]; + typedArrayStyle --> Int16Array["Int16Array"]; + typedArrayStyle --> Uint16Array["Uint16Array"]; + typedArrayStyle --> Int32Array["Int32Array"]; + typedArrayStyle --> Uint32Array["Uint32Array"]; + typedArrayStyle --> Float32Array["Float32Array"]; + typedArrayStyle --> Float64Array["Float64Array"]; + end; + +``` + +## What is an Array in JavaScript? + +In JavaScript, an `Array` is a special type of object that represents a collection of elements. The elements can be of any data type, including other arrays. Arrays are used to store multiple values in a single variable. Each element in an array has a unique index, which is used to access the element. The index starts from `0` and goes up to `length - 1`, where `length` is the number of elements in the array. + + +## Creating Arrays in JavaScript + +You can create an array in JavaScript using the following syntax: + +```js title="Creating Arrays in JavaScript" +let numbers = [1, 2, 3, 4, 5]; +let names = ['John', 'Doe', 'Jane', 'Smith']; +let mixed = [1, 'John', true, null, undefined]; +``` + +In the above examples, we have created arrays of numbers, strings, and mixed data types. + +## Accessing Array Elements + +You can access elements of an array using their index. The index starts from `0` for the first element and goes up to `length - 1` for the last element. + +```js title="Accessing Array Elements" +let numbers = [1, 2, 3, 4, 5]; + +console.log(numbers[0]); // Output: 1 +console.log(numbers[2]); // Output: 3 +console.log(numbers[4]); // Output: 5 +``` + +In the above example, we have accessed the first, third, and fifth elements of the `numbers` array using their indices. + +## Modifying Array Elements + +You can modify elements of an array using their index. + +```js title="Modifying Array Elements" +let numbers = [1, 2, 3, 4, 5]; + +numbers[0] = 10; + +console.log(numbers); // Output: [10, 2, 3, 4, 5] +``` + +In the above example, we have modified the first element of the `numbers` array and changed its value to `10`. + +## Adding Array Elements + +You can add elements to the end of an array using the `push` method. + +```js title="Adding Array Elements" +let numbers = [1, 2, 3, 4, 5]; + +numbers.push(6); + +console.log(numbers); // Output: [1, 2, 3, 4, 5, 6] +``` + +In the above example, we have added the number `6` to the end of the `numbers` array using the `push` method. + +## Deleting Array Elements + +You can delete elements from an array using the `delete` operator or the `splice` method. + +```js title="Deleting Array Elements" +let numbers = [1, 2, 3, 4, 5]; + +delete numbers[2]; + +console.log(numbers); // Output: [1, 2, empty, 4, 5] +``` + +In the above example, we have deleted the third element of the `numbers` array using the `delete` operator. The element is replaced with `empty`, which is a placeholder for the deleted element. + +## Deleting Array Elements using `pop` Method + +You can also delete elements from the end of an array using the `pop` method. + +```js title="Deleting Array Elements using pop Method" +let numbers = [1, 2, 3, 4, 5]; + +numbers.pop(); + +console.log(numbers); // Output: [1, 2, 3, 4] +``` + +In the above example, we have deleted the last element of the `numbers` array using the `pop` method. + +:::info ๐ Note + +## Arrays Style in JavaScript + +There are different styles of arrays in JavaScript: + +### 1. Dense Array + +A dense array is an array in which the elements are stored in contiguous memory locations. It is the most common type of array in JavaScript. + +for example: + +```js title="Dense Array" +let numbers = [1, 2, 3, 4, 5]; +``` + +### 2. Sparse Array + +A sparse array is an array in which the elements are not stored in contiguous memory locations. It contains empty slots, which are placeholders for the missing elements. + +for example: + +```js title="Sparse Array" +let numbers = [1, , 3, , 5]; +``` + +### 3. Array-like Objects + +Array-like objects are objects that have a `length` property and indexed elements, but they are not instances of the `Array` constructor. + +for example: + +```js title="Array-like Objects" +let arrayLike = { + 0: 'a', + 1: 'b', + 2: 'c', + length: 3 +}; +``` + +### 4. Typed Arrays + +Typed arrays are a set of array-like objects that provide a way to work with binary data in JavaScript. They are used to represent raw binary data in memory and are used in various scenarios, such as working with WebGL, file I/O, and networking. + +for example: + +```js title="Typed Arrays" +let buffer = new ArrayBuffer(16); +let int32Array = new Int32Array(buffer); +``` + +## Typed Arrays in JavaScript + +Typed arrays are a set of array-like objects that provide a way to work with binary data in JavaScript. They are used to represent raw binary data in memory and are used in various scenarios, such as working with WebGL, file I/O, and networking. + +The following are the different types of typed arrays available in JavaScript: + +### 1. `Int8Array` + +The `Int8Array` represents an array of 8-bit signed integers. + +for example: + +```js title="Int8Array" +let buffer = new ArrayBuffer(16); +let int8Array = new Int8Array(buffer); +``` + +### 2. `Uint8Array` + +The `Uint8Array` represents an array of 8-bit unsigned integers. + +for example: + +```js title="Uint8Array" +let buffer = new ArrayBuffer(16); +let uint8Array = new Uint8Array(buffer); +``` + +### 3. `Uint8ClampedArray` + +The `Uint8ClampedArray` represents an array of 8-bit unsigned integers clamped to 0-255. + +for example: + +```js title="Uint8ClampedArray" +let buffer = new ArrayBuffer(16); +let uint8ClampedArray = new Uint8ClampedArray(buffer); +``` + +### 4. `Int16Array` + +The `Int16Array` represents an array of 16-bit signed integers. + +for example: + +```js title="Int16Array" +let buffer = new ArrayBuffer(16); +let int16Array = new Int16Array(buffer); +``` + +### 5. `Uint16Array` + +The `Uint16Array` represents an array of 16-bit unsigned integers. + +for example: + +```js title="Uint16Array" +let buffer = new ArrayBuffer(16); +let uint16Array = new Uint16Array(buffer); +``` + +### 6. `Int32Array` + +The `Int32Array` represents an array of 32-bit signed integers. + +for example: + +```js title="Int32Array" +let buffer = new ArrayBuffer(16); +let int32Array = new Int32Array(buffer); +``` + +### 7. `Uint32Array` + +The `Uint32Array` represents an array of 32-bit unsigned integers. + +for example: + +```js title="Uint32Array" +let buffer = new ArrayBuffer(16); +let uint32Array = new Uint32Array(buffer); +``` + +### 8. `Float32Array` + +The `Float32Array` represents an array of 32-bit floating-point numbers. + +for example: + +```js title="Float32Array" +let buffer = new ArrayBuffer(16); +let float32Array = new Float32Array(buffer); +``` + +### 9. `Float64Array` + +The `Float64Array` represents an array of 64-bit floating-point numbers. + +for example: + +```js title="Float64Array" +let buffer = new ArrayBuffer(16); +let float64Array = new Float64Array(buffer); +``` +::: + +--- + +:::tip Tips and Tricks + +1. **Array Literals**: The array literal syntax `[]` is the most common way to create arrays in JavaScript. +2. **Array Elements**: Arrays can contain elements of any data type, including other arrays. +3. **Accessing Array Elements**: You can access array elements using their index, which starts from `0`. +4. **Modifying Array Elements**: You can modify array elements using their index. +5. **Adding Array Elements**: You can add elements to the end of an array using the `push` method. +6. **Deleting Array Elements**: You can delete elements from an array using the `delete` operator or the `splice` method. +7. **Deleting Array Elements using `pop` Method**: You can delete elements from the end of an array using the `pop` method. +8. **Array Styles**: There are different styles of arrays in JavaScript, including dense arrays, sparse arrays, array-like objects, and typed arrays. +9. **Typed Arrays**: Typed arrays are a set of array-like objects that provide a way to work with binary data in JavaScript. +10. **Array Methods**: JavaScript provides various methods for working with arrays, such as `push`, `pop`, `shift`, `unshift`, `splice`, `slice`, `concat`, `join`, `reverse`, `sort`, `indexOf`, `lastIndexOf`, `includes`, `forEach`, `map`, `filter`, `reduce`, and `find`. +11. **Array Properties**: Arrays have various properties, such as `length`, `constructor`, and `prototype`. +12. **Array-like Objects**: Array-like objects are objects that have a `length` property and indexed elements, but they are not instances of the `Array` constructor. +13. **Typed Arrays**: Typed arrays are a set of array-like objects that provide a way to work with binary data in JavaScript. +14. **Array Buffers**: Array buffers are used to represent raw binary data in memory and are used in various scenarios, such as working with WebGL, file I/O, and networking. +15. **Array Buffer Views**: Array buffer views are used to read and write binary data to and from array buffers. +16. **Array Destructuring**: Array destructuring is a convenient way to extract multiple elements from an array and assign them to variables. +17. **Array Spread Operator**: The array spread operator (`...`) is used to expand an array into individual elements. +::: + +## Conclusion + +In this tutorial, you learned about the array data type in JavaScript and how to create, access, modify, add, and delete array elements. You can use arrays to store multiple values in a single variable and perform various operations on the elements of the array. \ No newline at end of file diff --git a/languages-platforms/javascript/datatypes/non-primitive-data-types/date-js.md b/languages-platforms/javascript/datatypes/non-primitive-data-types/date-js.md new file mode 100644 index 0000000..25bf66d --- /dev/null +++ b/languages-platforms/javascript/datatypes/non-primitive-data-types/date-js.md @@ -0,0 +1,163 @@ +--- +id: date-datatypes-in-javascript +title: Date Datatypes in JavaScript +sidebar_label: Date +sidebar_position: 4 +tags: [JavaScript, Date, Date Datatypes in JavaScript, Date in JavaScript, JavaScript Date, JavaScript Date Datatypes, JavaScript Date Object, JavaScript Date Methods, JavaScript Date Examples, JavaScript Date Tutorial, JavaScript Date and Time, JavaScript Date Format, JavaScript Date Operations, JavaScript Date Functions, JavaScript Date Properties, JavaScript Date Setters, JavaScript Date Getters, JavaScript Date Working with Dates and Times, JavaScript Date Difference, JavaScript Date Add Days, JavaScript Date Add Months, JavaScript Date Add Years, JavaScript Date Add Hours, JavaScript Date Add Minutes, JavaScript Date Add Seconds, JavaScript Date Add Milliseconds, JavaScript Date Add Time, JavaScript Date Format, JavaScript Date Format Examples, JavaScript Date Format Tutorial, JavaScript Date Format Options, JavaScript Date Format Locale, JavaScript Date Format Timezone, JavaScript Date Format Date, JavaScript Date Format Time, JavaScript Date Format Day, JavaScript Date Format Month, JavaScript Date Format Year, JavaScript Date Format Weekday, JavaScript Date Format Week, JavaScript Date Format Hour, JavaScript Date Format Minute, JavaScript Date Format Second, JavaScript Date Format Millisecond, JavaScript Date Format UTC, JavaScript Date Format Local, JavaScript Date Format ISO, JavaScript Date Format Short, JavaScript Date Format Medium, JavaScript Date Format Long, JavaScript Date Format Full, JavaScript Date Format Custom] +description: What is a Date in JavaScript and how to use it to work with dates and times. +--- + +Date is a built-in object in JavaScript that is used to work with dates and times. It is used to represent a date and time in JavaScript. It is used to work with dates and times in JavaScript. + +```mermaid +sequenceDiagram + participant User + participant JavaScriptEngine + participant DateObject + + User->>JavaScriptEngine: Create a new Date object + JavaScriptEngine->>DateObject: Create Date object + + loop Initialization + JavaScriptEngine->>DateObject: Initialize with current date and time + end + + User->>DateObject: Perform operations (e.g., getDate(), getMonth(), etc.) + DateObject-->>JavaScriptEngine: Return result + + loop Update + User->>JavaScriptEngine: Update Date object (e.g., setFullYear()) + JavaScriptEngine->>DateObject: Update Date object + end + + JavaScriptEngine-->>User: Return updated Date object +``` + +## What is a Date in JavaScript? + +A Date object in JavaScript is used to work with dates and times. It is used to represent a date and time in JavaScript. It is used to work with dates and times in JavaScript. + +## Creating a Date Object + +A Date object can be created using the `new` keyword followed by the `Date` constructor. + +```js title="Creating a Date object" +let date = new Date(); +``` + +This will create a new Date object initialized with the current date and time. + +## Date Methods + +The Date object has several methods that can be used to work with dates and times. Some of the most commonly used methods are: + +- `getDate()`: Returns the day of the month (1-31). +- `getMonth()`: Returns the month (0-11). +- `getFullYear()`: Returns the year. +- `getHours()`: Returns the hour (0-23). +- `getMinutes()`: Returns the minutes (0-59). +- `getSeconds()`: Returns the seconds (0-59). +- `getMilliseconds()`: Returns the milliseconds (0-999). +- `getTime()`: Returns the number of milliseconds since January 1, 1970. + +```js title="Using Date methods" +let date = new Date(); +console.log(date.getDate()); // 1-31 +console.log(date.getMonth()); // 0-11 +console.log(date.getFullYear()); // year +console.log(date.getHours()); // 0-23 +console.log(date.getMinutes()); // 0-59 +console.log(date.getSeconds()); // 0-59 +console.log(date.getMilliseconds()); // 0-999 +console.log(date.getTime()); // milliseconds since January 1, 1970 +``` + +```jsx live +function myDate() { + const [date, setDate] = useState(new Date()); + useEffect(() => { + const timerID = setInterval(() => tick(), 1000); + + return function cleanup() { + clearInterval(timerID); + }; + }); + + function tick() { + setDate(new Date()); + } + + return ( +
+
+ );
+}
+```
+
+## Updating a Date Object
+
+A Date object can be updated using the various `set` methods.
+
+- `setDate()`: Sets the day of the month (1-31).
+- `setMonth()`: Sets the month (0-11).
+- `setFullYear()`: Sets the year.
+- `setHours()`: Sets the hour (0-23).
+- `setMinutes()`: Sets the minutes (0-59).
+- `setSeconds()`: Sets the seconds (0-59).
+- `setMilliseconds()`: Sets the milliseconds (0-999).
+- `setTime()`: Sets the number of milliseconds since January 1, 1970.
+
+```js title="Updating a Date object"
+let date = new Date();
+date.setDate(15); // set the day of the month to 15
+date.setMonth(6); // set the month to July
+date.setFullYear(2022); // set the year to 2022
+date.setHours(12); // set the hour to 12
+date.setMinutes(30); // set the minutes to 30
+date.setSeconds(45); // set the seconds to 45
+date.setMilliseconds(500); // set the milliseconds to 500
+date.setTime(1640999405500); // set the date to January 1, 2022 12:30:45.500 PM
+```
+
+## Working with Dates and Times
+
+The Date object can be used to work with dates and times in JavaScript. It can be used to perform various operations such as getting and updating date and time, calculating the difference between two dates, formatting dates, and so on.
+
+```js title="Working with Dates and Times"
+let date1 = new Date();
+let date2 = new Date(2022, 6, 15, 12, 30, 0, 0); // July 15, 2022 12:30:00.000 PM
+
+// calculate the difference between two dates
+let diff = date2 - date1;
+
+// format the date
+
+let options = {
+ weekday: "long",
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+};
+
+console.log(date1.toLocaleDateString("en-US", options)); // Monday, January 1, 2022
+
+// add 10 days to the date
+
+date1.setDate(date1.getDate() + 10);
+```
+
+:::info ๐ Note
+The Date object in JavaScript uses a zero-based index for months (0-11) and a one-based index for days (1-31).
+:::
+
+## Conclusion
+
+In this tutorial, we learned about the Date object in JavaScript and how to use it to work with dates and times. We learned how to create a Date object, use its methods to get and update date and time, and how to use it to work with dates and times in JavaScript.
diff --git a/languages-platforms/javascript/datatypes/non-primitive-data-types/function-js.mdx b/languages-platforms/javascript/datatypes/non-primitive-data-types/function-js.mdx
new file mode 100644
index 0000000..07db605
--- /dev/null
+++ b/languages-platforms/javascript/datatypes/non-primitive-data-types/function-js.mdx
@@ -0,0 +1,211 @@
+---
+id: function-datatypes-in-javascript
+title: Function Datatypes in JavaScript
+sidebar_label: Function
+sidebar_position: 3
+tags: [JavaScript, Function, Datatypes, JavaScript Tutorial, JavaScript Function, JavaScript Function Datatypes, JavaScript Function, Types of Function, JavaScript Function Types, JavaScript Function Expression, JavaScript Arrow Function, JavaScript IIFE, JavaScript Generator Function, JavaScript Function Parameters, JavaScript Function Return Value, JavaScript Function Definition, JavaScript Function Syntax, JavaScript Function Example, JavaScript Function Tutorial, JavaScript Function Basics, JavaScript Function Introduction, JavaScript Function Guide, JavaScript Function Fundamentals, JavaScript Function Overview, JavaScript Function Concepts, JavaScript Function Explained, JavaScript Function Quick Start, JavaScript Function Learning, JavaScript]
+description: What is a function in JavaScript? How to define a function in JavaScript? What are the different ways to define a function in JavaScript? What are the different types of function in JavaScript? Learn all about functions in JavaScript in this guide.
+---
+
+In JavaScript, a function is a block of code that can be called and executed. It is a reusable piece of code that can be called multiple times. Functions are used to perform a specific task and can be defined using the `function` keyword.
+
+## Defining a Function
+
+A function can be defined using the `function` keyword followed by the function name and a pair of parentheses. The function body is enclosed within a pair of curly braces `{}`.
+
+```js title="Syntax"
+function functionName() {
+ // function body
+}
+```
+
+Here's an example of a simple function that logs a message to the console:
+
+```js title="Example"
+function greet() {
+ console.log('Hello, World!');
+}
+
+greet(); // Output: Hello, World!
+```
+
+## Function Parameters
+
+A function can accept parameters, which are variables that are passed to the function when it is called. These parameters are used within the function to perform a specific task.
+
+```js title="Syntax"
+function functionName(parameter1, parameter2, ...) {
+ // function body
+}
+```
+
+Here's an example of a function that accepts a parameter:
+
+```js title="Example"
+function greet(name) {
+ console.log(`Hello, ${name}!`);
+}
+
+greet('John'); // Output: Hello, John!
+greet('Jane'); // Output: Hello, Jane!
+```
+
+## Function Return Value
+
+A function can return a value using the `return` statement. The return value can be used by the calling code to perform further operations.
+
+```js title="Syntax"
+function functionName() {
+ // function body
+ return value;
+}
+```
+
+Here's an example of a function that returns a value:
+
+```js title="Example"
+function add(a, b) {
+ return a + b;
+}
+
+let result = add(2, 3);
+console.log(result); // Output: 5
+```
+
+## Function Expression
+
+A function can also be defined using a function expression, which is a function that is assigned to a variable. Function expressions can be named or anonymous.
+
+### Named Function Expression
+
+A named function expression is a function expression that has a name. The name can be used within the function to refer to itself.
+
+```js title="Syntax"
+let functionName = function() {
+ // function body
+};
+```
+
+Here's an example of a named function expression:
+
+```js title="Example"
+let greet = function sayHello() {
+ console.log('Hello, World!');
+};
+
+greet(); // Output: Hello, World!
+
+// The function name can be used within the function
+
+sayHello(); // ReferenceError: sayHello is not defined
+```
+
+### Anonymous Function Expression
+
+An anonymous function expression is a function expression that does not have a name. It is assigned to a variable and can be called using the variable name.
+
+```js title="Syntax"
+let functionName = function() {
+ // function body
+};
+```
+
+Here's an example of an anonymous function expression:
+
+```js title="Example"
+let greet = function() {
+ console.log('Hello, World!');
+};
+
+greet(); // Output: Hello, World!
+```
+
+## Arrow Function
+
+An arrow function is a concise way to define a function using the `=>` syntax. It is a shorthand for writing function expressions.
+
+```js title="Syntax"
+let functionName = (parameter1, parameter2, ...) => {
+ // function body
+};
+```
+
+Here's an example of an arrow function:
+
+```js title="Example"
+let greet = name => {
+ console.log(`Hello, ${name}!`);
+};
+
+greet('John'); // Output: Hello, John!
+
+// If the function body contains only one statement, the curly braces can be omitted
+
+let add = (a, b) => a + b;
+
+let result = add(2, 3);
+
+console.log(result); // Output: 5
+```
+
+## IIFE (Immediately Invoked Function Expression)
+
+An IIFE is a function that is defined and called immediately. It is used to create a new scope and to avoid polluting the global scope.
+
+```js title="Syntax"
+(function() {
+ // function body
+})();
+```
+
+Here's an example of an IIFE:
+
+```js title="Example"
+(function() {
+ let message = 'Hello, World!';
+ console.log(message);
+})();
+
+// Output: Hello, World!
+
+console.log(message); // ReferenceError: message is not defined
+```
+
+## Generator Function
+
+A generator function is a special type of function that can be paused and resumed. It is defined using the `function*` keyword and the `yield` keyword is used to pause the function.
+
+```js title="Syntax"
+function* functionName() {
+ // function body
+}
+```
+
+Here's an example of a generator function:
+
+```js title="Example"
+function* count() {
+ yield 1;
+ yield 2;
+ yield 3;
+}
+
+let generator = count();
+
+console.log(generator.next().value); // Output: 1
+console.log(generator.next().value); // Output: 2
+console.log(generator.next().value); // Output: 3
+console.log(generator.next().value); // Output: undefined
+```
+
+:::info ๐ Note
+1. **Function Declaration**: A function declaration is hoisted, which means it is available before it is defined. It can be called before it is defined.
+2. **Function Expression**: A function expression is not hoisted, which means it is not available before it is defined. It cannot be called before it is defined.
+3. **Arrow Function**: An arrow function does not have its own `this`, `arguments`, `super`, or `new.target`. It uses the `this`, `arguments`, `super`, and `new.target` of the enclosing scope.
+4. **IIFE**: An IIFE is used to create a new scope and to avoid polluting the global scope. It is defined and called immediately.
+5. **Generator Function**: A generator function is a special type of function that can be paused and resumed. It is defined using the `function*` keyword and the `yield` keyword is used to pause the function.
+:::
+
+## Conclusion
+
+In this tutorial, we learned about functions in JavaScript. We learned how to define a function, how to pass parameters to a function, how to return a value from a function, and the different ways to define a function in JavaScript. We also learned about function expressions, arrow functions, IIFE, and generator functions. Functions are an important concept in JavaScript and are used to perform a specific task. They are reusable and can be called multiple times.
\ No newline at end of file
diff --git a/languages-platforms/javascript/datatypes/non-primitive-data-types/object-js.mdx b/languages-platforms/javascript/datatypes/non-primitive-data-types/object-js.mdx
new file mode 100644
index 0000000..f79ba6c
--- /dev/null
+++ b/languages-platforms/javascript/datatypes/non-primitive-data-types/object-js.mdx
@@ -0,0 +1,275 @@
+---
+id: object-datatypes-in-javascript
+title: Object Data Types in JavaScript
+sidebar_label: Object
+sidebar_position: 1
+tags: [JavaScript, Data Types, Non-Primitive Data Types, Object, 'Object in JavaScript', 'Object data type', 'Object methods', 'Object properties', 'Object constructor', 'Creating objects in JavaScript', 'Accessing object properties', 'Modifying object properties', 'Adding object properties', 'Deleting object properties']
+description: What is the object data type in JavaScript? Learn about the object data type and how to create, access, modify, add, and delete object properties in JavaScript.
+---
+
+The `Object` is a non-primitive data type in JavaScript. It represents a collection of key-value pairs, where the keys are strings (or symbols) and the values can be of any data type, including other objects.
+
+```mermaid
+classDiagram
+ class Object {
+ Object()
+ toString(): string
+ hasOwnProperty(prop: string): boolean
+ isPrototypeOf(obj: Object): boolean
+ propertyIsEnumerable(prop: string): boolean
+ }
+
+ class Function {
+ Function()
+ apply(thisArg: any, argsArray?: any[]): any
+ call(thisArg: any, ...args: any[]): any
+ bind(thisArg: any, ...args: any[]): any
+ toString(): string
+ }
+
+ class Array {
+ Array()
+ length: number
+ concat(...items: ConcatArraydate.getDate(): {date.getDate()}
+date.getMonth(): {date.getMonth()}
+date.getFullYear(): {date.getFullYear()}
+getHours(): {date.getHours()}
+date.getMinutes(): {date.getMinutes()}
+date.getSeconds(): {date.getSeconds()}
+date.getMilliseconds(): {date.getMilliseconds()}
+date.getTime(): {date.getTime()}
++ B) ReferenceError
+ C) TypeError
+ D) NullError + +
+
+
+2. Which block of code will be executed regardless of whether an error occurs or not?
+
+ A) `try` block Answer
++ + **Answer:** D) NullError + + `NullError` is not a type of error in JavaScript. The correct type of error is `TypeError`. + +
++ B) `catch` block
+ C) `finally` block
+ D) None of the above + +
+
+
+:::
+
+:::info ๐ Learn More:
+
+**Throwing Errors in JavaScript:**
+
+You can throw an error in JavaScript using the `throw` statement. The `throw` statement allows you to create a custom error and throw it. Here is an example of throwing an error in JavaScript:
+
+```javascript title="app.js"
+try {
+ let x = 10;
+ let y = 0;
+ if (y === 0) {
+ throw new Error("Division by zero");
+ }
+ let result = x / y;
+ console.log(result);
+} catch (error) {
+ console.log("An error occurred: " + error.message);
+} finally {
+ console.log("Finally block executed");
+}
+```
+
+In this example, we are throwing a custom error using the `throw` statement when the value of `y` is zero. The error message is "Division by zero".
+
+When you run the above code, you will get the following output:
+
+```bash title="Output"
+An error occurred: Division by zero
+Finally block executed
+```
+
+In the `catch` block, we are logging the error message using `error.message`. In the `finally` block, we are logging a message that will be executed regardless of whether an error occurs or not.
+
+**Error Object in JavaScript:**
+
+The `Error` object in JavaScript has two properties: `name` and `message`. The `name` property contains the name of the error (e.g., "SyntaxError", "ReferenceError", "TypeError"), and the `message` property contains the error message.
+
+Here is an example of creating a custom error using the `Error` object:
+
+```javascript title="app.js"
+try {
+ throw new Error("Custom Error");
+} catch (error) {
+ console.log("An error occurred: " + error.message);
+}
+```
+
+In this example, we are creating a custom error using the `Error` object with the message "Custom Error".
+
+When you run the above code, you will get the following output:
+
+```bash title="Output"
+An error occurred: Custom Error
+```
+
+That's all for throwing errors in JavaScript. You can use the `throw` statement to throw custom errors and handle them using the `try...catch...finally` statement.
+
+:::
+
+## Summary
+
+In this tutorial, we learned about errors in JavaScript. Errors are unexpected events that occur during the execution of a program. We saw the different types of errors in JavaScript and how to handle them using the `try...catch...finally` statement. We also saw an example of handling errors in JavaScript.
\ No newline at end of file
diff --git a/languages-platforms/javascript/events-js.md b/languages-platforms/javascript/events-js.md
new file mode 100644
index 0000000..ba28c98
--- /dev/null
+++ b/languages-platforms/javascript/events-js.md
@@ -0,0 +1,325 @@
+---
+id: events-in-javascript
+title: Events in JavaScript
+sidebar_label: Events
+sidebar_position: 12
+tags: [JavaScript, Events, DOM, EventListener, EventObject, EventPropagation, PreventDefault, StopPropagation, EventTypes, ClickEvent, MouseoverEvent, MouseoutEvent, ChangeEvent, SubmitEvent, EventCapturePhase, EventBubblingPhase, EventTarget, EventListener, CallbackFunction, EventObject, EventProperties, UIEvents, MouseEvents, KeyboardEvents, FormEvents, FocusEvents, InputEvents, WheelEvents, TouchEvents, CustomEvents, AddEventListener, Options, Capture, Once, Passive, HandleEvent, EventPropagation, EventBubbling, EventCapture, EventPhase, EventTypes, EventListener, EventObject, EventProperties]
+description: What is the event in JavaScript? How to handle events in JavaScript? Learn about different types of events, event listeners, event objects, event propagation, and how to prevent default behavior and stop event propagation.
+---
+
+An event is a signal that something has happened. For example, when a user clicks a button, the click event is triggered. Events are a part of the Document Object Model (DOM) and are used to interact with the user.
+
+```mermaid
+graph LR
+A[User] -->|Clicks Button| B[Event]
+B -->|Triggers| C[Event Listener]
+C -->|Executes| D[Function]
+```
+
+In the above diagram, when a user clicks a button, the click event is triggered. The event listener listens for the click event and executes the function when the event occurs.
+
+## Event Types
+
+There are many types of events in JavaScript. Some of the most common events are:
+
+### 1. `click` Event
+
+```html title="index.html"
+
+
+
+ Answer
++ + **Answer:** C) `finally` block + + The `finally` block will be executed regardless of whether an error occurs or not. + +
+
+
+
+
+
+```
+
+Click Me
+ alert("Outer Div Clicked")}>
+
+ alert("Inner Div Clicked")}>Click Me
+
+
+
+
+
+```
+
+Click Me
+ alert("Outer Div Clicked")}>
+
+ {e.stopPropagation(); alert("Inner Div Clicked")}}>Click Me
+
+ {(() => {
+ let numbers = [];
+ for (let i = 1; i <= 5; i++) {
+ numbers.push(
+ );
+}
+```
+
+:::
+
+## Conclusion
+
+In this tutorial, you learned about the `for` loop in JavaScript and how to use it to execute a block of code multiple times. You also learned about infinite `for` loops and nested `for` loops.
diff --git a/languages-platforms/javascript/for-of-loop.md b/languages-platforms/javascript/for-of-loop.md
new file mode 100644
index 0000000..73af1b8
--- /dev/null
+++ b/languages-platforms/javascript/for-of-loop.md
@@ -0,0 +1,139 @@
+---
+id: for-of-loop-in-javascript
+title: For Of Loop in JavaScript
+sidebar_label: For...Of
+sidebar_position: 23
+tags:
+ [
+ JavaScript,
+ For Of Loop,
+ Loop,
+ Iteration,
+ Control,
+ Flow,
+ Iterative,
+ Statements,
+ Loops,
+ Iteration,
+ Iterating,
+ Iterations,
+ ]
+description: "In this tutorial, we will learn about the for...of loop in JavaScript. We will learn how to use the for...of loop to iterate over the elements of an iterable object in JavaScript."
+---
+
+In JavaScript, the `for...of` loop is used to iterate over the elements of an iterable object. It is often used when you want to perform an action on each element of an array, set, map, string, or any other iterable object.
+
+## Syntax
+
+The syntax of the `for...of` loop is as follows:
+
+```js title="app.js"
+for (variable of iterable) {
+ // code to be executed
+}
+```
+
+- The `for...of` loop starts with the `for` keyword followed by parentheses.
+- Inside the parentheses, you need to specify a `variable` to hold the element value and the `iterable` over which you want to iterate.
+- The `variable` will be assigned the value of each element of the iterable on each iteration.
+- The code inside the loop will be executed for each element of the iterable.
+- The loop will iterate over the elements of the iterable object in the order of their insertion.
+- The `for...of` loop can be used with arrays, sets, maps, strings, and any other iterable object.
+- The `for...of` loop cannot be used to iterate over plain objects (i.e., objects created using `{}`) because they are not iterable. To iterate over the properties of an object, you should use the `for...in` loop or the `Object.keys`, `Object.values`, or `Object.entries` methods.
+- The `for...of` loop can also be used with generator functions to iterate over the values generated by the generator.
+- The `for...of` loop cannot be used to iterate over asynchronous iterators, such as the iterators returned by the `Symbol.asyncIterator` method.
+- The `for...of` loop can be used with the `await` keyword to iterate over the values of asynchronous iterators in an asynchronous function.
+- The `for...of` loop can be used with the `break` and `continue` statements to control the flow of the loop.
+
+## Example
+
+The following example demonstrates how to use the `for...of` loop to iterate over the elements of an array:
+
+```js title="app.js"
+const numbers = [1, 2, 3, 4, 5];
+
+for (const number of numbers) {
+ console.log(number);
+}
+```
+
+In this example, the `for...of` loop iterates over the elements of the `numbers` array and assigns each element to the `number` variable on each iteration. It then executes the code inside the loop to log each element to the console.
+
+The output of the above example will be:
+
+```plaintext title="Output"
+1
+2
+3
+4
+5
+```
+
+The `for...of` loop is a convenient and concise way to iterate over the elements of an iterable object in JavaScript. It provides a simple and readable syntax for performing actions on each element of the iterable.
+
+## Flow Chart of the `for...of` Loop
+
+```mermaid
+graph TD;
+ Start([Start]) --> Initialization;
+ Initialization -->|Condition| Condition{Condition};
+ Condition -->|True| Action;
+ Action --> Increment[Next Element];
+ Increment --> Condition{Condition};
+ Condition -->|False| Stop;
+ Stop --> End([End]);
+```
+
+The flow chart above illustrates the flow of the `for...of` loop. It starts with the `Initialization` step, where the loop variable is initialized to the first element of the iterable. It then checks the `Condition` before each iteration. If the condition is `true`, it executes the `Action` and moves to the next element. This process continues until the condition is `false`, at which point the loop stops.
+
+## Using `break` and `continue` Statements
+
+You can use the `break` and `continue` statements to control the flow of the `for...of` loop. The `break` statement can be used to terminate the loop prematurely, while the `continue` statement can be used to skip the current iteration and move to the next element.
+
+Here's an example that demonstrates the use of the `break` and `continue` statements with the `for...of` loop:
+
+```js title="app.js"
+const numbers = [1, 2, 3, 4, 5];
+
+for (const number of numbers) {
+ if (number === 3) {
+ continue; // Skip the number 3
+ }
+
+ if (number === 5) {
+ break; // Terminate the loop when the number 5 is encountered
+ }
+
+ console.log(number);
+}
+```
+
+In this example, the `continue` statement is used to skip the number `3`, and the `break` statement is used to terminate the loop when the number `5` is encountered. The code inside the loop logs the numbers to the console, skipping the number `3` and terminating the loop when the number `5` is encountered.
+
+The output of the above example will be:
+
+```plaintext title="Output"
+1
+2
+4
+```
+
+In each iteration, the code inside the loop checks if the current number is `3` or `5`. If the number is `3`, it skips the current iteration using the `continue` statement. If the number is `5`, it terminates the loop using the `break` statement. Otherwise, it logs the number to the console.
+
+The `for...of` loop is a powerful and flexible construct that provides a convenient way to iterate over the elements of an iterable object in JavaScript. It can be used with arrays, sets, maps, strings, and any other iterable object to perform actions on each element in a concise and readable manner.
+
+:::tip ๐ Note
+
+The `for...of` loop cannot be used to iterate over plain objects (i.e., objects created using `{}`) because they are not iterable. To iterate over the properties of an object, you should use the `for...in` loop or the `Object.keys`, `Object.values`, or `Object.entries` methods.
+
+The `for...of` loop can also be used with generator functions to iterate over the values generated by the generator.
+
+The `for...of` loop cannot be used to iterate over asynchronous iterators, such as the iterators returned by the `Symbol.asyncIterator` method. However, it can be used with the `await` keyword to iterate over the values of asynchronous iterators in an asynchronous function.
+
+The `for...of` loop can be used with the `break` and `continue` statements to control the flow of the loop.
+
+:::
+
+## Summary
+
+In this tutorial, we learned about the `for...of` loop in JavaScript. We learned how to use the `for...of` loop to iterate over the elements of an iterable object. We also learned about using the `break` and `continue` statements to control the flow of the loop. The `for...of` loop is a powerful and flexible construct that provides a convenient and concise way to iterate over the elements of an iterable object in JavaScript.
diff --git a/languages-platforms/javascript/if-else.md b/languages-platforms/javascript/if-else.md
new file mode 100644
index 0000000..266b6e6
--- /dev/null
+++ b/languages-platforms/javascript/if-else.md
@@ -0,0 +1,94 @@
+---
+id: if-else-in-javascript
+title: If...Else in JavaScript
+sidebar_label: If...Else
+sidebar_position: 19
+tags: [JavaScript, Conditional, Statement, If, Else, Ternary, Operator, Nested, Switch, Nullish, Coalescing, Operator, Decision, Making, Control, Flow, Conditional, Statements]
+description: "In this tutorial, we will learn about the if...else statement in JavaScript. We will learn how to use the if...else statement to make decisions in JavaScript."
+---
+
+In JavaScript, the `if...else` statement is used to execute a block of code if a specified condition is true. If the condition is false, another block of code can be executed.
+
+## Syntax
+
+The syntax of the `if...else` statement is as follows:
+
+```js title="app.js"
+if (condition) {
+ // code to be executed if the condition is true
+} else {
+ // code to be executed if the condition is false
+}
+```
+
+## Example
+
+The following example demonstrates how to use the `if...else` statement to check if a number is even or odd:
+
+```js title="app.js"
+let num = 10;
+
+if (num % 2 === 0) {
+ console.log(`${num} is even`);
+} else {
+ console.log(`${num} is odd`);
+}
+```
+
+In the above example, the `if...else` statement checks if the number `num` is even or odd and logs the result to the console.
+
+## Nested if...else
+
+You can also use the `if...else` statement inside another `if...else` statement. This is known as a nested `if...else` statement.
+
+The following example demonstrates how to use a nested `if...else` statement to check if a number is positive, negative, or zero:
+
+```js title="app.js"
+let num = 10;
+
+if (num > 0) {
+ console.log(`${num} is positive`);
+} else if (num < 0) {
+ console.log(`${num} is negative`);
+} else {
+ console.log(`${num} is zero`);
+}
+```
+
+In the above example, the nested `if...else` statement checks if the number `num` is positive, negative, or zero and logs the result to the console.
+
+## Ternary Operator
+
+The `if...else` statement can also be written using the ternary operator (`? :`).
+
+The following example demonstrates how to use the ternary operator to check if a number is even or odd:
+
+```js title="app.js"
+let num = 10;
+
+const result = num % 2 === 0 ? `${num} is even` : `${num} is odd`;
+
+console.log(result);
+```
+
+In the above example, the ternary operator checks if the number `num` is even or odd and assigns the result to the `result` variable.
+
+:::info ๐ Note
+{i}
); + } + return numbers; + })()} +Conditional Statements
+ +The `if...else` statement is a conditional statement that executes a block of code if a specified condition is true. If the condition is false, another block of code can be executed. + +In JavaScript we have the following conditional statements: + +- **`if` statement:** executes a block of code if a specified condition is true. +- **`if...else` statement:** executes a block of code if a specified condition is true and another block of code if the condition is false. +- **`if...else if...else` statement:** executes a block of code if a specified condition is true, another block of code if another condition is true, and another block of code if the conditions are false. +- **`switch` statement:** selects one of many code blocks to be executed. +- **`ternary operator`:** assigns a value to a variable based on a specified condition. +- **`nullish coalescing operator`:** returns the right-hand operand when the left-hand operand is `null` or `undefined`. + +::: + +## Conclusion + +In this tutorial, we learned about the `if...else` statement in JavaScript. We learned how to use the `if...else` statement to make decisions in JavaScript. We also saw examples of how to use the `if...else` statement to check if a number is even or odd and to check if a number is positive, negative, or zero. \ No newline at end of file diff --git a/languages-platforms/javascript/img/breakpoints.gif b/languages-platforms/javascript/img/breakpoints.gif new file mode 100644 index 0000000..51bf4aa Binary files /dev/null and b/languages-platforms/javascript/img/breakpoints.gif differ diff --git a/languages-platforms/javascript/img/call-stack.gif b/languages-platforms/javascript/img/call-stack.gif new file mode 100644 index 0000000..6913e4a Binary files /dev/null and b/languages-platforms/javascript/img/call-stack.gif differ diff --git a/languages-platforms/javascript/img/source.gif b/languages-platforms/javascript/img/source.gif new file mode 100644 index 0000000..e437da1 Binary files /dev/null and b/languages-platforms/javascript/img/source.gif differ diff --git a/languages-platforms/javascript/intro-js.md b/languages-platforms/javascript/intro-js.md new file mode 100644 index 0000000..a57e81d --- /dev/null +++ b/languages-platforms/javascript/intro-js.md @@ -0,0 +1,234 @@ +--- +id: intro-js +title: Introduction to JavaScript +sidebar_label: Introduction to JavaScript +sidebar_position: 1 +tags: [JavaScript, Introduction of js, Introduction of JavaScript] +description: What is JavaScript? Why JavaScript? How to use JavaScript? Learn about JavaScript in this tutorial. +--- + +JavaScript is a high-level, interpreted programming language that is used to make web pages interactive. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. + +> JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers. + +## What is JavaScript? + +JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more. JavaScript is a scripting language. JavaScript is a high-level, interpreted programming language that is used to make web pages interactive. It is a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. + +:::note + +## Key Points + +- JavaScript is a high-level, interpreted programming language that is used to make web pages interactive. +- It is a dynamic, weakly typed, prototype-based language with first-class functions. +- JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. +- JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. +- JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers. +- JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images, and much more. +- JavaScript is a scripting language. +- JavaScript is a high-level, interpreted programming language that is used to make web pages interactive. +- It is a dynamic, weakly typed, prototype-based language with first-class functions. +- JavaScript is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. +- JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. + +::: + +## Why JavaScript? + +JavaScript is scripting language that enables you to create dynamically updating content, control multimedia, animate imsages, and much more. And it is the most popular programming language in the world. JavaScript is the programming language of the Web. The overwhelming majority of websites use JavaScript, and all modern web browsersโon desktops, game consoles, tablets, and smartphones include JavaScript interpreters, making it an essential part of the web platform. + +## How to use JavaScript? + +JavaScript can be used in a lot of different ways. Here are a few examples: + +### 1. JavaScript Can Change HTML Content + +```html title="index.html" + + + +My First JavaScript
+ +This is a paragraph.
+ + + + +``` + +My First JavaScript
+Welcome CodeHarborHub Learners!
+My First JavaScript
+ +This is a paragraph.
+ + + + +``` + +My First JavaScript
+This is a paragraph.
+My First JavaScript
+ +This is a paragraph.
+ + + + +``` + +My First JavaScript
+This is a paragraph.
+ +My First JavaScript
+ + + + + + +``` + +My First JavaScript
+This is a paragraph.
+ +My First JavaScript
+ +This is a paragraph.
+ + + + +``` + +My First JavaScript
+This is a paragraph.
+ +My First JavaScript
+ +
+
+
+
+
+```
+
+My First JavaScript
+
+
+My First JavaScript
+ + + + + + +``` + +## Conclusion + +In this article, we have learned about JavaScript, its introduction, and its usage. We have also seen how JavaScript can be used to change HTML content, styles, and attributes. We have also seen how JavaScript can be used to validate data. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/_category_.json b/languages-platforms/javascript/js-versions/_category_.json new file mode 100644 index 0000000..65cc4e4 --- /dev/null +++ b/languages-platforms/javascript/js-versions/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Versions of JavaScript", + "position": 44, + "link": { + "type": "generated-index", + "description": "JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997. Since then, there have been several versions of JavaScript, each adding new features and improving the language. This page provides an overview of the different versions of JavaScript, and the features they introduced." + } + } \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2016.md b/languages-platforms/javascript/js-versions/js-2016.md new file mode 100644 index 0000000..62a8507 --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2016.md @@ -0,0 +1,90 @@ +--- +id: es2016-version-of-javascript +title: JavaScript ES2016 Version (2016) +sidebar_label: ES2016 Version (2016) +sidebar_position: 3 +tags: [JavaScript, ES2016, CMAScript 2016, JavaScript ES2016, JavaScript ES2016, JavaScript ES2016 Version, JavaScript ES2016 Version] +description: "In this tutorial, we will learn about the ES2016 version of JavaScript, also known as ECMAScript 2016. We will discuss the new features introduced in ES2016 and how to use them in your JavaScript code." +--- + +JavaScript ES2016 (ECMAScript 2016) is the seventh major release of the JavaScript language specification. It was finalized in June 2016. ES2016 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2016 and how to use them in your JavaScript code. + +## Features of ES2016 + +ES2016 introduced several new features and enhancements to JavaScript. Some of the key features of ES2016 are: + +1. **Exponentiation Operator (`**`)**: ES2016 introduced the exponentiation operator (`**`), which allows you to raise one number to the power of another number. For example, `2 ** 3` is equivalent to `2 * 2 * 2`. + + For example: + + ```javascript title="Exponentiation Operator Example" + let result = 2 ** 3; // 2 raised to the power of 3 + console.log(result); // Output: 8 + ``` + +2. **Array.prototype.includes()**: ES2016 introduced the `Array.prototype.includes()` method, which allows you to check if an array includes a specific element. It returns `true` if the array contains the element, and `false` otherwise. + + For example: + + ```javascript title="Array.prototype.includes() Example" + let numbers = [1, 2, 3, 4, 5]; + console.log(numbers.includes(3)); // Output: true + console.log(numbers.includes(6)); // Output: false + ``` + +3. **Additional Features**: ES2016 also introduced other minor features and enhancements to JavaScript, such as the `TypedArray.prototype.includes()` method for typed arrays and the `Object.values()` and `Object.entries()` methods for objects. + + For example: + + ```javascript title="Object.values() and Object.entries() Example" + let person = { name: "Alice", age: 30 }; + console.log(Object.values(person)); // Output: ["Alice", 30] + console.log(Object.entries(person)); // Output: [["name", "Alice"], ["age", 30]] + ``` + +## Browser Support for ES2016 + +Most modern web browsers support ES2016 features, but some older browsers may not fully support all ES2016 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2016 code into ES5 code, which is compatible with older browsers. + +ES2016 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. + +For more information on browser support for ES2016 features, you can check the table. + +| | | | | | | | | | | | | | +|:---:|:------:|:---:| :-----:|:---:|:------:|:---:|:------:|:---:|:------:|:--:|:------:|:--:| +| | 52+ | | 49+ | | 10.1+ | | 14+ | | 39+ | | No | | +| |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ| | + + +:::info ๐ Note + +- **Chrome**: 52+ (Latest โ ) + + Chrome has full support for ES2016 features. You can use ES2016 features in Chrome without any issues. Chrome 52 and later versions fully support ES2016 features. Chrome is the most popular web browser, and it is recommended to test your JavaScript code in Chrome to ensure compatibility. + +- **Firefox**: 49+ (Latest โ ) + + Firefox has full support for ES2016 features. You can use ES2016 features in Firefox without any issues. Firefox 49 and later versions fully support ES2016 features. Firefox is a popular web browser, and it is recommended to test your JavaScript code in Firefox to ensure compatibility. + +- **Safari**: 10.1+ (Latest โ ) + + Safari has full support for ES2016 features. You can use ES2016 features in Safari without any issues. Safari 10.1 and later versions fully support ES2016 features. Safari is a popular web browser, and it is recommended to test your JavaScript code in Safari to ensure compatibility. + +- **Edge**: 14+ (Latest โ ) + + Edge has full support for ES2016 features. You can use ES2016 features in Edge without any issues. Edge 14 and later versions fully support ES2016 features. Edge is a popular web browser, and it is recommended to test your JavaScript code in Edge to ensure compatibility. + +- **Opera**: 39+ (Latest โ ) + + Opera has full support for ES2016 features. You can use ES2016 features in Opera without any issues. Opera 39 and later versions fully support ES2016 features. Opera is a popular web browser, and it is recommended to test your JavaScript code in Opera to ensure compatibility. + +- **Internet Explorer**: No (Latest โ) + + Internet Explorer does not support ES2016 features. If you need to support Internet Explorer, you can use a transpiler like Babel to convert your ES2016 code into ES5 code, which is compatible with Internet Explorer. + +::: + + +## Conclusion + +ES2016 introduced several new features and enhancements to JavaScript, such as the exponentiation operator, `Array.prototype.includes()` method, and `Object.values()` and `Object.entries()` methods. These features make it easier to work with numbers, arrays, and objects in JavaScript. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2017.md b/languages-platforms/javascript/js-versions/js-2017.md new file mode 100644 index 0000000..72fa4ba --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2017.md @@ -0,0 +1,123 @@ +--- +id: es2017-version-of-javascript +title: JavaScript ES2017 Version (2017) +sidebar_label: ES2017 Version (2017) +sidebar_position: 4 +tags: [JavaScript, ES2017, ECMAScript 2017, JavaScript ES2017, JavaScript ES2017, JavaScript ES2017 Version, JavaScript ES2017 Version] +description: "In this tutorial, we will learn about the ES2017 version of JavaScript, also known as ECMAScript 2017. We will discuss the new features introduced in ES2017 and how to use them in your JavaScript code." +--- + +JavaScript ES2017 (ECMAScript 2017) is the eighth major release of the JavaScript language specification. It was finalized in June 2017. ES2017 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2017 and how to use them in your JavaScript code. + +## Features of ES2017 + +ES2017 introduced several new features and enhancements to JavaScript. Some of the key features of ES2017 are: + +1. **Async/Await Functions**: ES2017 introduced the `async` and `await` keywords, which allow you to write asynchronous code that looks synchronous. The `async` keyword is used to define an asynchronous function, and the `await` keyword is used to pause the execution of an asynchronous function until a `Promise` is settled. + + For example: + + ```javascript title="Async/Await Example" + function delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } + + async function asyncFunction() { + console.log("Start"); + await delay(2000); + console.log("End"); + } + + asyncFunction(); + ``` + +2. **Object.values() and Object.entries()**: ES2017 introduced the `Object.values()` and `Object.entries()` methods, which allow you to get the values and entries of an object, respectively. The `Object.values()` method returns an array of the object's values, and the `Object.entries()` method returns an array of the object's key-value pairs. + + For example: + + ```javascript title="Object.values() and Object.entries() Example" + let person = { name: "Alice", age: 30 }; + console.log(Object.values(person)); // Output: ["Alice", 30] + console.log(Object.entries(person)); // Output: [["name", "Alice"], ["age", 30]] + ``` + +3. **String Padding**: ES2017 introduced the `String.prototype.padStart()` and `String.prototype.padEnd()` methods, which allow you to pad a string with spaces or other characters to a specified length. The `padStart()` method pads the string at the beginning, and the `padEnd()` method pads the string at the end. + + For example: + + ```javascript title="String Padding Example" + let str = "Hello"; + console.log(str.padStart(10, ".")); // Output: ".....Hello" + console.log(str.padEnd(10, ".")); // Output: "Hello....." + ``` + +4. **Shared Memory and Atomics**: ES2017 introduced the `SharedArrayBuffer` and `Atomics` objects, which allow you to work with shared memory and atomic operations in JavaScript. The `SharedArrayBuffer` object represents a shared memory region, and the `Atomics` object provides atomic operations for shared memory. + + For example: + + ```javascript title="Shared Memory and Atomics Example" + let buffer = new SharedArrayBuffer(16); + let view = new Int32Array(buffer); + view[0] = 42; + + Atomics.add(view, 0, 13); + console.log(view[0]); // Output: 55 + ``` + +## Browser Support for ES2017 + +Most modern web browsers support ES2017 features, but some older browsers may not fully support all ES2017 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2017 code into ES5 code, which is compatible with older browsers. + +ES2017 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. + +For more information on browser support for ES2017 features, you can check the table. + +| | | | | | | | | | | | | | +|:---:|:------:|:---:| :-----:|:---:|:------:|:---:|:------:|:---:|:------:|:--:|:------:|:--:| +| | 58+ | | 52+ | | 10.1+ | | 16+ | | 45+ | | No | | +| |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ| | + +:::info ๐ Note + +- **Chrome**: 58+ (Latest โ ) + + Chrome has full support for ES2017 features. You can use ES2017 features in Chrome without any issues. Chrome 58 and later versions fully support ES2017 features. Chrome is the most popular web browser, and it is recommended to test your JavaScript code in Chrome to ensure compatibility. + +- **Firefox**: 52+ (Latest โ ) + + Firefox has full support for ES2017 features. You can use ES2017 features in Firefox without any issues. Firefox 52 and later versions fully support ES2017 features. Firefox is a popular web browser, and it is recommended to test your JavaScript code in Firefox to ensure compatibility. + +- **Safari**: 10.1+ (Latest โ ) + + Safari has full support for ES2017 features. You can use ES2017 features in Safari without any issues. Safari 10.1 and later versions fully support ES2017 features. Safari is a popular web browser, and it is recommended to test your JavaScript code in Safari to ensure compatibility. + +- **Edge**: 16+ (Latest โ ) + + Edge has full support for ES2017 features. You can use ES2017 features in Edge without any issues. Edge 16 and later versions fully support ES2017 features. Edge is a popular web browser, and it is recommended to test your JavaScript code in Edge to ensure compatibility. + +- **Opera**: 45+ (Latest โ ) + + Opera has full support for ES2017 features. You can use ES2017 features in Opera without any issues. Opera 45 and later versions fully support ES2017 features. Opera is a popular web browser, and it is recommended to test your JavaScript code in Opera to ensure compatibility. + +- **Internet Explorer**: No (Latest โ) + + Internet Explorer does not support ES2017 features. If you need to support Internet Explorer, you can use a transpiler like Babel to convert your ES2017 code into ES5 code, which is compatible with Internet Explorer. + +::: + +:::tip Important + +Why Internet Explorer does not support ES2017 features?
+ +Internet Explorer does not support ES2017 features because it is an outdated web browser that has been replaced by Microsoft Edge. Microsoft Edge is the modern web browser from Microsoft that supports the latest web standards and features, including ES2017. It is recommended to use Microsoft Edge or other modern web browsers to ensure compatibility with the latest JavaScript features. If you need to support Internet Explorer for legacy reasons, you can use a transpiler like Babel to convert your ES2017 code into ES5 code, which is compatible with Internet Explorer. + +::: + + +ES2017 introduced several new features and enhancements to JavaScript, making it easier to write asynchronous code, work with objects, manipulate strings, and work with shared memory. You can start using ES2017 features in your JavaScript code to take advantage of these new capabilities. + +## Conclusion + +ES2017 introduced several new features and enhancements to JavaScript, such as async/await functions, Object.values() and Object.entries() methods, string padding methods, and shared memory and atomics. These features make it easier to work with asynchronous code, objects, strings, and shared memory in JavaScript. + +By using ES2017 features, you can write more expressive and concise JavaScript code that takes advantage of the latest language features and capabilities. You can start using ES2017 features in your JavaScript code to improve readability, maintainability, and performance. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2018.md b/languages-platforms/javascript/js-versions/js-2018.md new file mode 100644 index 0000000..426c95a --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2018.md @@ -0,0 +1,141 @@ +--- +id: es2018-version-of-javascript +title: JavaScript ES2018 Version (2018) +sidebar_label: ES2018 Version (2018) +sidebar_position: 5 +tags: [JavaScript, ES2018, ECMAScript 2018, JavaScript ES2018, JavaScript ES2018, JavaScript ES2018 Version, JavaScript ES2018 Version] +description: "In this tutorial, we will learn about the ES2018 version of JavaScript, also known as ECMAScript 2018. We will discuss the new features introduced in ES2018 and how to use them in your JavaScript code." +--- + +JavaScript ES2018 (ECMAScript 2018) is the ninth major release of the JavaScript language specification. It was finalized in June 2018. ES2018 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2018 and how to use them in your JavaScript code. + +## Features of ES2018 + +ES2018 introduced several new features and enhancements to JavaScript. Some of the key features of ES2018 are: + +1. **Asynchronous Iteration**: ES2018 introduced asynchronous iteration, which allows you to iterate over asynchronous data sources such as asynchronous generators and asynchronous iterators. You can use the `for-await-of` loop to iterate over asynchronous data sources. + + For example: + + ```javascript title="Asynchronous Iteration Example" + async function* asyncGenerator() { + yield 1; + yield 2; + yield 3; + } + + (async () => { + for await (let num of asyncGenerator()) { + console.log(num); + } + })(); + ``` + +2. **Promise.prototype.finally()**: ES2018 introduced the `Promise.prototype.finally()` method, which allows you to run cleanup logic after a `Promise` is settled (either fulfilled or rejected). The `finally()` method is called when the `Promise` is settled, regardless of whether it was fulfilled or rejected. + + For example: + + ```javascript title="Promise.prototype.finally() Example" + let promise = new Promise((resolve, reject) => { + resolve("Success!"); + }); + + promise.then((value) => { + console.log(value); + }).catch((error) => { + console.error(error); + }).finally(() => { + console.log("Cleanup logic here"); + }); + ``` + +3. **Rest/Spread Properties**: ES2018 introduced the rest and spread properties for object literals. The rest properties allow you to extract the remaining properties of an object into a new object, while the spread properties allow you to spread the properties of an object into another object. + + For example: + + ```js title="Rest/Spread Properties Example" + let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; + console.log(x); // Output: 1 + console.log(y); // Output: 2 + console.log(z); // Output: { a: 3, b: 4 } + ``` + +4. **Object Rest/Spread Properties**: ES2018 also introduced rest and spread properties for object destructuring. The rest properties allow you to extract the remaining properties of an object into a new object, while the spread properties allow you to spread the properties of an object into another object. + + For example: + + ```js title="Object Rest/Spread Properties Example" + let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; + console.log(x); // Output: 1 + console.log(y); // Output: 2 + console.log(z); // Output: { a: 3, b: 4 } + ``` + +5. **RegExp Lookbehind Assertions**: ES2018 introduced lookbehind assertions for regular expressions. Lookbehind assertions allow you to match a pattern only if it is preceded by another pattern. + + For example: + + ```js title="RegExp Lookbehind Assertions Example" + let str = "Hello, World!"; + let regex = /(?<=Hello, )World/; + console.log(regex.test(str)); // Output: true + ``` + +6. **RegExp Unicode Property Escapes**: ES2018 introduced Unicode property escapes for regular expressions. Unicode property escapes allow you to match characters based on their Unicode properties. + + For example: + + ```js title="RegExp Unicode Property Escapes Example" + let str = "๐"; + let regex = /\p{Emoji}/u; + console.log(regex.test(str)); // Output: true + ``` + +## Browser Support for ES2018 + +Most modern web browsers support ES2018 features, but some older browsers may not fully support all ES2018 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2018 code into ES5 code, which is compatible with older browsers. + +ES2018 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. + +For more information on browser support for ES2018 features, you can check the table. + +| | | | | | | | | | | | | | +|:---:|:------:|:---:| :-----:|:---:|:------:|:---:|:------:|:---:|:------:|:--:|:------:|:--:| +| | 66+ | | 58+ | | 11.1+ | | 79+ | | 53+ | | No | | +| |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ| | + +:::info ๐ Note + +- **Chrome**: 66+ (Latest โ ) + + Chrome has full support for ES2018 features. You can use ES2018 features in Chrome without any issues. Chrome 66 and later versions fully support ES2018 features. Chrome is the most popular web browser, and it is recommended to test your JavaScript code in Chrome to ensure compatibility. + +- **Firefox**: 58+ (Latest โ ) + + Firefox has full support for ES2018 features. You can use ES2018 features in Firefox without any issues. Firefox 58 and later versions fully support ES2018 features. Firefox is a popular web browser, and it is recommended to test your JavaScript code in Firefox to ensure compatibility. + +- **Safari**: 11.1+ (Latest โ ) + + Safari has full support for ES2018 features. You can use ES2018 features in Safari without any issues. Safari 11.1 and later versions fully support ES2018 features. Safari is a popular web browser, and it is recommended to test your JavaScript code in Safari to ensure compatibility. + +- **Edge**: 79+ (Latest โ ) + + Edge has full support for ES2018 features. You can use ES2018 features in Edge without any issues. Edge 79 and later versions fully support ES2018 features. Edge is a popular web browser, and it is recommended to test your JavaScript code in Edge to ensure compatibility. + +- **Opera**: 53+ (Latest โ ) + + Opera has full support for ES2018 features. You can use ES2018 features in Opera without any issues. Opera 53 and later versions fully support ES2018 features. Opera is a popular web browser, and it is recommended to test your JavaScript code in Opera to ensure compatibility. + +- **Internet Explorer**: No (Latest โ) + + Internet Explorer does not support ES2018 features. If you need to support Internet Explorer, you can use a transpiler like Babel to convert your ES2018 code into ES5 code, which is compatible with Internet Explorer. + +::: + +ES2018 introduced several new features and enhancements to JavaScript, making it more powerful and expressive. You can start using ES2018 features in your JavaScript code to take advantage of these new capabilities and improve your development workflow. + +In the next tutorial, we will learn about the ES2019 version of JavaScript and the new features introduced in ES2019. + +## Conclusion + +ES2018 introduced several new features and enhancements to JavaScript, making it easier to write asynchronous code, work with objects, manipulate strings, and work with regular expressions. You can start using ES2018 features in your JavaScript code to take advantage of these new capabilities. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2019.md b/languages-platforms/javascript/js-versions/js-2019.md new file mode 100644 index 0000000..ce189fa --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2019.md @@ -0,0 +1,85 @@ +--- +id: es2019-version-of-javascript +title: JavaScript ES2019 Version (2019) +sidebar_label: ES2019 Version (2019) +sidebar_position: 6 +tags: + [ + JavaScript, + ES2019, + ECMAScript 2019, + JavaScript ES2019, + JavaScript ES2019, + JavaScript ES2019 Version, + JavaScript ES2019 Version, + ] +description: "In this tutorial, we will learn about the ES2019 version of JavaScript, also known as ECMAScript 2019. We will discuss the new features introduced in ES2019 and how to use them in your JavaScript code." +--- + +JavaScript ES2019 (ECMAScript 2019) is the tenth major release of the JavaScript language specification. It was finalized in June 2019. ES2019 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2019 and how to use them in your JavaScript code. + +## Features of ES2019 + +ES2019 introduced several new features and enhancements to JavaScript. Some of the key features of ES2019 are: + +1. **Array.prototype.flat() and Array.prototype.flatMap()**: ES2019 introduced the `Array.prototype.flat()` and `Array.prototype.flatMap()` methods for working with nested arrays. The `flat()` method flattens a nested array to a specified depth, while the `flatMap()` method maps each element using a mapping function and then flattens the result to a depth of 1. + + For example: + + ```javascript title="Array.prototype.flat() and Array.prototype.flatMap() Example" + let nestedArray = [1, [2, [3, 4], 5]]; + console.log(nestedArray.flat()); // Output: [1, 2, [3, 4], 5] + + let array = [1, 2, 3, 4, 5]; + console.log(array.flatMap((x) => [x, x * 2])); // Output: [1, 2, 2, 4, 3, 6, 4, 8, 5, 10] + ``` + +2. **Object.fromEntries()**: ES2019 introduced the `Object.fromEntries()` method, which allows you to create an object from an iterable of key-value pairs. It takes an iterable (such as an array) of key-value pairs and returns a new object with those key-value pairs. + + For example: + + ```javascript title="Object.fromEntries() Example" + let entries = [ + ["name", "Alice"], + ["age", 30], + ]; + let person = Object.fromEntries(entries); + console.log(person); // Output: { name: 'Alice', age: 30 } + ``` + +3. **String.prototype.trimStart() and String.prototype.trimEnd()**: ES2019 introduced the `String.prototype.trimStart()` and `String.prototype.trimEnd()` methods, which allow you to trim whitespace characters from the start and end of a string, respectively. These methods are also known as `String.prototype.trimLeft()` and `String.prototype.trimRight()`. + + For example: + + ```javascript title="String.prototype.trimStart() and String.prototype.trimEnd() Example" + let str = " Hello "; + console.log(str.trimStart()); // Output: 'Hello ' + console.log(str.trimEnd()); // Output: ' Hello' + ``` + +4. **Symbol.prototype.description**: ES2019 introduced the `Symbol.prototype.description` property, which allows you to access the description of a `Symbol`. The description is the optional string that was provided when the `Symbol` was created. + + For example: + + ```javascript title="Symbol.prototype.description Example" + let sym = Symbol("foo"); + console.log(sym.description); // Output: 'foo' + ``` + +## Browser Support for ES2019 + +Most modern web browsers support ES2019 features, but some older browsers may not fully support all ES2019 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2019 code into ES5 code, which is compatible with older browsers. + +ES2019 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. + +For more information on browser support for ES2019 features, you can check the table. + +| | | | | | | | | | | | | | +|:---:|:------:|:---:| :-----:|:---:|:------:|:---:|:------:|:---:|:------:|:--:|:------:|:--:| +| | 73+ | | 69+ | | 12.1+ | | 79+ | | 60+ | | No | | +| |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ| | + + +## Conclusion + +ES2019 introduced several new features and enhancements to JavaScript, making it easier and more convenient to work with arrays, objects, strings, and symbols. By using ES2019 features, you can write more concise and expressive JavaScript code. Most modern web browsers support ES2019 features, allowing you to use them in your JavaScript code without the need for a transpiler in most cases. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2020.md b/languages-platforms/javascript/js-versions/js-2020.md new file mode 100644 index 0000000..d6fa723 --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2020.md @@ -0,0 +1,128 @@ +--- +id: es2020-version-of-javascript +title: JavaScript ES2020 Version (2020) +sidebar_label: ES2020 Version (2020) +sidebar_position: 6 +tags: [JavaScript, ES2020, ECMAScript 2020, JavaScript ES2020, JavaScript ES2020, JavaScript ES2020 Version, JavaScript ES2020 Version] +description: "In this tutorial, we will learn about the ES2020 version of JavaScript, also known as ECMAScript 2020. We will discuss the new features introduced in ES2020 and how to use them in your JavaScript code." +--- + +JavaScript ES2020 (ECMAScript 2020) is the eleventh major release of the JavaScript language specification. It was finalized in June 2020. ES2020 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2020 and how to use them in your JavaScript code. + +## Features of ES2020 + +ES2020 introduced several new features and enhancements to JavaScript. Some of the key features of ES2020 are: + +1. **BigInt**: ES2020 introduced the `BigInt` primitive type, which allows you to represent arbitrarily large integers in JavaScript. The `BigInt` type is created by appending `n` to the end of an integer literal or by calling the `BigInt()` constructor with a numeric value. + + For example: + + ```javascript title="BigInt Example" + const bigNumber = 1234567890123456789012345678901234567890n; + console.log(bigNumber); // Output: 1234567890123456789012345678901234567890n + ``` + +2. **Dynamic Import**: ES2020 introduced dynamic `import()` expressions, which allow you to dynamically import modules in JavaScript. The `import()` function returns a `Promise` that resolves to the module namespace object of the requested module. + + For example: + + ```javascript title="Dynamic Import Example" + const modulePath = './module.js'; + import(modulePath) + .then((module) => { + console.log(module.default); + }) + .catch((error) => { + console.error(error); + }); + ``` + +3. **Nullish Coalescing Operator (`??`)**: ES2020 introduced the nullish coalescing operator (`??`), which allows you to provide a default value for variables that are `null` or `undefined`. The nullish coalescing operator returns the right-hand operand when the left-hand operand is `null` or `undefined`, and otherwise returns the left-hand operand. + + For example: + + ```javascript title="Nullish Coalescing Operator Example" + const name = null; + const defaultName = name ?? 'John Doe'; + console.log(defaultName); // Output: 'John Doe' + ``` + +4. **Optional Chaining Operator (`?.`)**: ES2020 introduced the optional chaining operator (`?.`), which allows you to safely access nested properties of an object without having to check if each property exists. If a property is `null` or `undefined`, the optional chaining operator short-circuits and returns `undefined`. + + For example: + + ```javascript title="Optional Chaining Operator Example" + const user = { + name: 'Alice', + address: { + city: 'New York', + }, + }; + + console.log(user.address?.city); // Output: 'New York' + console.log(user.address?.country); // Output: undefined + ``` + +5. **Promise.allSettled()**: ES2020 introduced the `Promise.allSettled()` method, which returns a `Promise` that resolves after all the input `Promises` have settled (either fulfilled or rejected). The `Promise` returned by `Promise.allSettled()` resolves with an array of objects that describe the outcome of each `Promise`. + + For example: + + ```javascript title="Promise.allSettled() Example" + const promises = [ + Promise.resolve(1), + Promise.reject(new Error('Error!')), + Promise.resolve(3), + ]; + + Promise.allSettled(promises) + .then((results) => { + results.forEach((result) => { + console.log(result.status, result.value); + }); + }); + ``` + +## Browser Support for ES2020 + +Most modern web browsers support ES2020 features, but some older browsers may not fully support all ES2020 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2020 code into ES5 code, which is compatible with older browsers. + +ES2020 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. + +For more information on browser support for ES2020 features, you can check the table. + +| | | | | | | | | | | | | | +|:---:|:------:|:---:| :-----:|:---:|:------:|:---:|:------:|:---:|:------:|:--:|:------:|:--:| +| | 85+ | | 79+ | | 14+ | | 79+ | | 71+ | | No | | +| |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ | |Latest โ| | + +:::info ๐ Note + +- **Chrome**: 85+ (Latest โ ) + + Chrome has full support for ES2020 features. You can use ES2020 features in Chrome without any issues. Chrome 85 and later versions fully support ES2020 features. Chrome is the most popular web browser, and it is recommended to test your JavaScript code in Chrome to ensure compatibility. + +- **Firefox**: 79+ (Latest โ ) + + Firefox has full support for ES2020 features. You can use ES2020 features in Firefox without any issues. Firefox 79 and later versions fully support ES2020 features. Firefox is a popular web browser, and it is recommended to test your JavaScript code in Firefox to ensure compatibility. + +- **Safari**: 14+ (Latest โ ) + + Safari has full support for ES2020 features. You can use ES2020 features in Safari without any issues. Safari 14 and later versions fully support ES2020 features. Safari is a popular web browser on macOS and iOS devices, and it is recommended to test your JavaScript code in Safari to ensure compatibility. + +- **Edge**: 79+ (Latest โ ) + + Edge has full support for ES2020 features. You can use ES2020 features in Edge without any issues. Edge 79 and later versions fully support ES2020 features. Edge is a popular web browser, and it is recommended to test your JavaScript code in Edge to ensure compatibility. + +- **Opera**: 71+ (Latest โ ) + + Opera has full support for ES2020 features. You can use ES2020 features in Opera without any issues. Opera 71 and later versions fully support ES2020 features. Opera is a popular web browser, and it is recommended to test your JavaScript code in Opera to ensure compatibility. + +- **Internet Explorer**: No support (Latest โ) + + Internet Explorer does not support ES2020 features. If you need to support Internet Explorer, you can use a transpiler like Babel to convert your ES2020 code into ES5 code, which is compatible with Internet Explorer. + +::: + +## Conclusion + +ES2020 introduced several new features and enhancements to JavaScript, such as the `BigInt` primitive type, dynamic `import()` expressions, the nullish coalescing operator (`??`), the optional chaining operator (`?.`), and the `Promise.allSettled()` method. These features improve the expressiveness and flexibility of JavaScript, making it easier to write clean and concise code. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2021.md b/languages-platforms/javascript/js-versions/js-2021.md new file mode 100644 index 0000000..348ddb2 --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2021.md @@ -0,0 +1,116 @@ +--- +id: es2021-version-of-javascript +title: JavaScript ES2021 Version (2021) +sidebar_label: ES2021 Version (2021) +sidebar_position: 7 +tags: [JavaScript, ES2021, ECMAScript 2021, JavaScript ES2021, JavaScript ES2021, JavaScript ES2021 Version, JavaScript ES2021 Version] +description: "In this tutorial, we will learn about the ES2021 version of JavaScript, also known as ECMAScript 2021. We will discuss the new features introduced in ES2021 and how to use them in your JavaScript code." +--- + +JavaScript ES2021 (ECMAScript 2021) is the twelfth major release of the JavaScript language specification. It was finalized in June 2021. ES2021 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2021 and how to use them in your JavaScript code. + +## Features of ES2021 + +ES2021 introduced several new features and enhancements to JavaScript. Some of the key features of ES2021 are: + +1. **String.prototype.replaceAll()**: ES2021 introduced the `String.prototype.replaceAll()` method, which allows you to replace all occurrences of a substring within a string with another substring. The `replaceAll()` method replaces all occurrences of a specified substring with another substring and returns a new string. + + For example: + + ```javascript title="String.prototype.replaceAll() Example" + let str = "Hello, World!"; + let newStr = str.replaceAll("o", "0"); + console.log(newStr); // Output: Hell0, W0rld! + ``` + +2. **Logical Assignment Operators**: ES2021 introduced the logical assignment operators `||=` (logical OR assignment) and `&&=` (logical AND assignment). These operators allow you to assign a value to a variable only if the variable is `null`, `undefined`, `false`, `0`, `NaN`, or an empty string (`""`). + + For example: + + ```javascript title="Logical Assignment Operators Example" + let x = 10; + x ||= 20; // Equivalent to: x = x || 20; + console.log(x); // Output: 10 + + let y = 0; + y &&= 5; // Equivalent to: y = y && 5; + console.log(y); // Output: 0 + ``` + +3. **Numeric Separators**: ES2021 introduced numeric separators, which allow you to use underscores (`_`) as separators in numeric literals to make them more readable. Numeric separators are ignored by the JavaScript engine and are used only for formatting purposes. + + For example: + + ```javascript title="Numeric Separators Example" + let billion = 1_000_000_000; + console.log(billion); // Output: 1000000000 + + let pi = 3.14159_26535; + console.log(pi); // Output: 3.1415926535 + ``` + +4. **WeakRef**: ES2021 introduced the `WeakRef` object, which allows you to create weak references to objects. Weak references do not prevent the garbage collector from collecting the object they reference. The `WeakRef` object is useful for implementing caches or other data structures that need to hold references to objects without preventing them from being garbage collected. + + For example: + + ```javascript title="WeakRef Example" + let obj = { name: "Alice" }; + let weakRef = new WeakRef(obj); + console.log(weakRef.deref()); // Output: { name: 'Alice' } + ``` + +5. **FinalizationRegistry**: ES2021 introduced the `FinalizationRegistry` object, which allows you to register objects for cleanup when they are garbage collected. The `FinalizationRegistry` object is used to perform cleanup actions on objects before they are collected by the garbage collector. + + For example: + + ```javascript title="FinalizationRegistry Example" + let obj = { name: "Alice" }; + let finalizationRegistry = new FinalizationRegistry((heldValue) => { + console.log(`Cleaning up: ${heldValue.name}`); + }); + finalizationRegistry.register(obj, "held value"); + obj = null; // Allow obj to be garbage collected + ``` + +6. **Promise.any()**: ES2021 introduced the `Promise.any()` method, which takes an iterable of `Promises` and returns a new `Promise` that resolves as soon as one of the input `Promises` is fulfilled. If all the input `Promises` are rejected, the `Promise` returned by `Promise.any()` is rejected with an `AggregateError` that contains an array of rejection reasons. + + For example: + + ```javascript title="Promise.any() Example" + const promises = [ + Promise.reject("Error 1"), + Promise.resolve("Success 1"), + Promise.reject("Error 2"), + ]; + + Promise.any(promises) + .then((value) => { + console.log(value); // Output: "Success 1" + }) + .catch((error) => { + console.error(error); // Output: AggregateError: All promises were rejected + }); + ``` + +7. **AggregateError**: ES2021 introduced the `AggregateError` object, which is used to represent multiple errors in a single error object. The `AggregateError` object contains an array of errors as its `errors` property. + + For example: + + ```javascript title="AggregateError Example" + const error1 = new Error("Error 1"); + const error2 = new Error("Error 2"); + const aggregateError = new AggregateError([error1, error2]); + console.log(aggregateError.errors); // Output: [Error: Error 1, Error: Error 2] + ``` + +## Browser Support for ES2021 + +Most modern web browsers support ES2021 features, but some older browsers may not fully support all ES2021 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2021 code into ES5 code, which is compatible with older browsers. + +ES2021 features are generally well-supported in modern web browsers, and you can start using them in your JavaScript code without the need for a transpiler in most cases. However, it is always a good practice to check the compatibility of the features you are using with the target browsers to ensure a consistent user experience. + +For more information on browser support for ES2021 features, you can check the compatibility tables provided by [Can I use](https://caniuse.com/). + +## Conclusion + +In this tutorial, we learned about the ES2021 version of JavaScript (ECMAScript 2021) and the new features introduced in ES2021. We explored features such as `String.prototype.replaceAll()`, logical assignment operators, numeric separators, `WeakRef`, `FinalizationRegistry`, `Promise.any()`, and `AggregateError`. You can start using these features in your JavaScript code to take advantage of the latest enhancements in the language. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2022.md b/languages-platforms/javascript/js-versions/js-2022.md new file mode 100644 index 0000000..69b74f0 --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2022.md @@ -0,0 +1,126 @@ +--- +id: es2022-version-of-javascript +title: JavaScript ES2022 Version (2022) +sidebar_label: ES2022 Version (2022) +sidebar_position: 8 +tags: [JavaScript, ES2022, ECMAScript 2022, JavaScript ES2022, JavaScript ES2022, JavaScript ES2022 Version, JavaScript ES2022 Version] +description: "In this tutorial, we will learn about the ES2022 version of JavaScript, also known as ECMAScript 2022. We will discuss the new features introduced in ES2022 and how to use them in your JavaScript code." +--- + +JavaScript ES2022 (ECMAScript 2022) is the thirteenth major release of the JavaScript language specification. It was finalized in June 2022. ES2022 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2022 and how to use them in your JavaScript code. + +## Features of ES2022 + +ES2022 introduced several new features and enhancements to JavaScript. Some of the key features of ES2022 are: + +1. **String.prototype.replaceAll()**: ES2022 introduced the `String.prototype.replaceAll()` method, which allows you to replace all occurrences of a substring within a string with another substring. The `replaceAll()` method replaces all occurrences of a specified substring with another substring and returns a new string. + + For example: + + ```javascript title="String.prototype.replaceAll() Example" + let str = "Hello, World!"; + let newStr = str.replaceAll("o", "0"); + console.log(newStr); // Output: Hell0, W0rld! + ``` + +2. **Logical Assignment Operators**: ES2022 introduced the logical assignment operators `||=` (logical OR assignment) and `&&=` (logical AND assignment). These operators allow you to assign a value to a variable only if the variable is `null`, `undefined`, `false`, `0`, `NaN`, or an empty string (`""`). + + For example: + + ```javascript title="Logical Assignment Operators Example" + let x = 10; + x ||= 20; // Equivalent to: x = x || 20; + console.log(x); // Output: 10 + + let y = 0; + y &&= 5; // Equivalent to: y = y && 5; + console.log(y); // Output: 0 + ``` + +3. **Numeric Separators**: ES2022 introduced numeric separators, which allow you to use underscores (`_`) as separators in numeric literals to make them more readable. Numeric separators are ignored by the JavaScript engine and are used only for formatting purposes. + + For example: + + ```javascript title="Numeric Separators Example" + let billion = 1_000_000_000; + console.log(billion); // Output: 1000000000 + + let pi = 3.14159_26535; + console.log(pi); // Output: 3.1415926535 + ``` + +4. **WeakRef**: ES2022 introduced the `WeakRef` object, which allows you to create weak references to objects. Weak references do not prevent the garbage collector from collecting the object they reference. The `WeakRef` object is useful for implementing caches or other data structures that need to hold references to objects without preventing them from being garbage collected. + + For example: + + ```javascript title="WeakRef Example" + let obj = { name: "Alice" }; + let weakRef = new WeakRef(obj); + console.log(weakRef.deref()); // Output: { name: 'Alice' } + ``` + +5. **Promise.any()**: ES2022 introduced the `Promise.any()` method, which takes an iterable of `Promise` objects and returns a single `Promise` that fulfills with the value of the first `Promise` in the iterable that fulfills. If all `Promise` objects in the iterable are rejected, the `Promise` returned by `Promise.any()` is rejected with an `AggregateError` containing the rejection reasons. + + For example: + + ```javascript title="Promise.any() Example" + let promise1 = new Promise((resolve, reject) => setTimeout(() => reject("Error 1"), 1000)); + let promise2 = new Promise((resolve, reject) => setTimeout(() => resolve("Success 2"), 500)); + let promise3 = new Promise((resolve, reject) => setTimeout(() => reject("Error 3"), 1500); + + Promise.any([promise1, promise2, promise3]) + .then((value) => console.log(value)) + .catch((error) => console.error(error)); + ``` + +6. **Final State**: ES2022 introduced the `final` keyword, which can be used to declare a variable as a constant that cannot be reassigned. The `final` keyword is similar to the `const` keyword but enforces immutability more strictly. + + For example: + + ```java title="Final State Example" + final int x = 10; + x = 20; // Error: Cannot assign a value to a final variable + ``` + +7. **Record and Tuple**: ES2022 introduced the `record` and `tuple` types, which are new built-in types in JavaScript. The `record` type is an object type with a fixed set of properties, while the `tuple` type is an array type with a fixed number of elements and element types. + + For example: + + ```javascript title="Record and Tuple Example" + let person: record { name: string, age: number } = { name: "Alice", age: 30 }; + let pair: tuple [string, number] = ["Alice", 30]; + ``` + +8. **Private Fields**: ES2022 introduced private fields, which allow you to define private instance fields in classes. Private fields are not accessible from outside the class and are intended for internal use within the class. + + For example: + + ```javascript title="Private Fields Example" + class Person { + #name; + + constructor(name) { + this.#name = name; + } + + getName() { + return this.#name; + } + } + + let person = new Person("Alice"); + console.log(person.#name); // Error: Private field '#name' is not accessible outside class 'Person' + console.log(person.getName()); // Output: 'Alice' + ``` + +## Browser Support for ES2022 + +Most modern web browsers support ES2022 features, but some older browsers may not fully support all ES2022 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES2022 code into ES5 code, which is compatible with older browsers. + +In this tutorial, we learned about the new features introduced in the ES2022 version of JavaScript (ECMAScript 2022) and how to use them in your JavaScript code. ES2022 introduced several new features and enhancements to JavaScript, such as `String.prototype.replaceAll()`, logical assignment operators, numeric separators, `WeakRef`, `Promise.any()`, `final` keyword, `record` and `tuple` types, and private fields. These features can help you write more expressive and efficient JavaScript code. + +You can start using these features in your JavaScript code to take advantage of the latest enhancements in the language. For more information on browser support for ES2022 features, you can check the compatibility tables provided by [Can I use](https://caniuse.com/). + +## Conclusion + +ES2022 introduced several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we learned about the new features introduced in ES2022, such as `String.prototype.replaceAll()`, logical assignment operators, numeric separators, `WeakRef`, `Promise.any()`, `final` keyword, `record` and `tuple` types, and private fields. These features can help you write more expressive and efficient JavaScript code. You can start using these features in your JavaScript code to take advantage of the latest enhancements in the language. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-2023.md b/languages-platforms/javascript/js-versions/js-2023.md new file mode 100644 index 0000000..36a514f --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-2023.md @@ -0,0 +1,10 @@ +--- +id: es2023-version-of-javascript +title: JavaScript ES2023 Version (2023) +sidebar_label: ES2023 Version (2023) +sidebar_position: 9 +tags: [JavaScript, ES2023, ECMAScript 2023, JavaScript ES2023, JavaScript ES2023, JavaScript ES2023 Version, JavaScript ES2023 Version] +description: "In this tutorial, we will learn about the ES2023 version of JavaScript, also known as ECMAScript 2023. We will discuss the new features introduced in ES2023 and how to use them in your JavaScript code." +--- + +JavaScript ES2023 (ECMAScript 2023) is the twelfth major release of the JavaScript language specification. It is expected to be finalized in June 2023. ES2023 is expected to introduce several new features and enhancements to JavaScript, building upon the foundation laid by ES6 (ES2015). In this tutorial, we will learn about the new features introduced in ES2023 and how to use them in your JavaScript code. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-es5.md b/languages-platforms/javascript/js-versions/js-es5.md new file mode 100644 index 0000000..d118439 --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-es5.md @@ -0,0 +1,233 @@ +--- +id: es5-version-of-javascript +title: ES5 Version of JavaScript +sidebar_label: ES5 Version (2009) +sidebar_position: 1 +tags: [JavaScript, ES5, ES5 Version of JavaScript, ES5 JavaScript, ES5 JavaScript Tutorial, ES5 JavaScript Example, ES5 JavaScript Features, ES5 JavaScript Improvements, ES5 JavaScript Development, ES5 JavaScript Changes, ES5 JavaScript New Features, ES5 JavaScript Tutorial for Beginners, ES5 JavaScript Tutorial for Developers, ES5 JavaScript Tutorial Example, ES5 JavaScript Tutorial Features, ES5 JavaScript Tutorial Improvements, ES5 JavaScript Tutorial Changes, ES5 JavaScript Tutorial New Features, ES5 JavaScript Tutorial Development, ES5 JavaScript Tutorial Beginners, ES5 JavaScript Tutorial Developers, ES5 JavaScript Tutorial Example, ES5 JavaScript Tutorial Features, ES5 JavaScript Tutorial Improvements, ES5 JavaScript Tutorial Changes, ES5 JavaScript Tutorial New Features, ES5 JavaScript Tutorial Development] +description: "In this tutorial, we will learn about the ES5 version of JavaScript, which was released in 2009. We will explore the new features and improvements introduced in ES5 and how they have impacted JavaScript development." +--- + +JavaScript ES5 (ECMAScript 5) is the fifth edition of the ECMAScript standard, which was released in 2009. It introduced several new features and improvements to the language, making it more powerful and flexible for developers. In this tutorial, we will learn about the ES5 version of JavaScript and how it has impacted JavaScript development. + +## Features of ES5 + +### Strict Mode + +One of the key features introduced in ES5 is strict mode. Strict mode is a special mode that allows you to opt into a restricted variant of JavaScript that enforces stricter parsing and error handling. It helps you write more secure and optimized code by catching common coding mistakes and preventing certain actions that are considered bad practice. + +To enable strict mode in your code, you can add the following directive at the beginning of your script: + +```javascript title="Strict Mode in ES5" +"use strict"; + +function myFunction() { + console.log("This is a strict mode function"); +} + +myFunction(); +``` + +By using strict mode, you can avoid common pitfalls in JavaScript and write cleaner, more reliable code. + +### `JSON` Object + +ES5 introduced the `JSON` object, which provides methods for parsing and serializing JSON data. The `JSON` object includes two main methods: + +- `JSON.parse()`: Parses a JSON string and returns a JavaScript object. +- `JSON.stringify()`: Converts a JavaScript object into a JSON string. + - This method is useful for serializing data before sending it to a server or storing it in a database. + - It can also be used to pretty-print JSON data for debugging purposes. + - The `JSON.stringify()` method can take an optional `replacer` function or an array of properties to include or exclude from the serialization process. + - It can also take an optional `space` parameter to specify the indentation level for the output JSON string. + - The `JSON.stringify()` method can handle circular references by throwing an error or replacing the circular reference with a placeholder value. +- The `JSON` object also includes the `JSON.parse()` method, which can parse a JSON string and return a JavaScript object. +- The `JSON.parse()` method can take an optional `reviver` function to transform the parsed data before returning it. +- The `JSON.parse()` method can handle invalid JSON strings by throwing a `SyntaxError` or returning `null`. +- The `JSON.parse()` method can also handle duplicate keys by throwing a `SyntaxError` or using the last key-value pair encountered. + +Here is an example of using the `JSON` object to parse and stringify JSON data: + +```javascript title="JSON Object in ES5" +// Parsing JSON data +const jsonString = '{"name": "John", "age": 30}'; +const data = JSON.parse(jsonString); + +console.log(data.name); // John +console.log(data.age); // 30 + +// Stringifying JavaScript object +const person = { name: "Alice", age: 25 }; +const jsonData = JSON.stringify(person); + +console.log(jsonData); // {"name":"Alice","age":25} +``` + +### `Array` Methods + +ES5 introduced several new methods for the `Array` object, making it easier to work with arrays in JavaScript. Some of the key methods introduced in ES5 include: + +- `Array.prototype.forEach()`: Executes a provided function once for each array element. +- `Array.prototype.map()`: Creates a new array with the results of calling a provided function on every element in the array. +- `Array.prototype.filter()`: Creates a new array with all elements that pass a test implemented by the provided function. +- `Array.prototype.reduce()`: Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. +- `Array.prototype.some()`: Tests whether at least one element in the array passes the test implemented by the provided function. +- `Array.prototype.every()`: Tests whether all elements in the array pass the test implemented by the provided function. +- `Array.prototype.indexOf()`: Returns the first index at which a given element can be found in the array. +- `Array.prototype.lastIndexOf()`: Returns the last index at which a given element can be found in the array. +- `Array.prototype.reduceRight()`: Applies a function against an accumulator and each element in the array (from right to left) to reduce it to a single value. +- `Array.prototype.forEach()`: Executes a provided function once for each array element. +- `Array.prototype.map()`: Creates a new array with the results of calling a provided function on every element in the array. + +Here is an example of using the `Array` methods introduced in ES5: + +```javascript title="Array Methods in ES5" +const numbers = [1, 2, 3, 4, 5]; + +// Using forEach + +numbers.forEach((number) => { + console.log(number); +}); + +// Using map + +const doubledNumbers = numbers.map((number) => number * 2); +console.log(doubledNumbers); // [2, 4, 6, 8, 10] + +// Using filter + +const evenNumbers = numbers.filter((number) => number % 2 === 0); +console.log(evenNumbers); // [2, 4] + +// Using reduce + +const sum = numbers.reduce((accumulator, number) => accumulator + number, 0); +console.log(sum); // 15 +``` + +### `Function.prototype.bind()` + +ES5 introduced the `Function.prototype.bind()` method, which allows you to create a new function with a specified `this` value and initial arguments. This method is useful for creating functions with a fixed context, which can be helpful when working with event handlers or callbacks. + +Here is an example of using the `Function.prototype.bind()` method: + +```javascript title="Function.prototype.bind() in ES5" +const person = { + name: "Alice", + greet: function() { + console.log(`Hello, my name is ${this.name}`); + }, +}; + +const greetFunction = person.greet; +greetFunction(); // Hello, my name is undefined + +const boundGreetFunction = person.greet.bind(person); +boundGreetFunction(); // Hello, my name is Alice +``` + +### Getters and Setters + +ES5 introduced support for getters and setters in JavaScript objects. Getters are used to get the value of a property, while setters are used to set the value of a property. Getters and setters allow you to define computed properties and control access to object properties. + +Here is an example of using getters and setters in ES5: + +```javascript title="Getters and Setters in ES5" +const person = { + firstName: "John", + lastName: "Doe", + get fullName() { + return `${this.firstName} ${this.lastName}`; + }, + set fullName(value) { + const parts = value.split(" "); + this.firstName = parts[0]; + this.lastName = parts[1]; + }, +}; + +console.log(person.fullName); // John Doe + +person.fullName = "Alice Smith"; +console.log(person.firstName); // Alice +console.log(person.lastName); // Smith +``` + +### `Object.keys()` + +ES5 introduced the `Object.keys()` method, which returns an array of a given object's own enumerable property names. This method is useful for iterating over the properties of an object and accessing their values. + +Here is an example of using the `Object.keys()` method in ES5: + +```javascript title="Object.keys() in ES5" +const person = { + name: "John", + age: 30, +}; + +const keys = Object.keys(person); +console.log(keys); // ["name", "age"] + +keys.forEach((key) => { + console.log(`${key}: ${person[key]}`); +}); +``` + +### `Array.isArray()` + +ES5 introduced the `Array.isArray()` method, which checks whether a given value is an array. This method is useful for determining the type of a value and handling it accordingly. + +Here is an example of using the `Array.isArray()` method in ES5: + +```javascript title="Array.isArray() in ES5" +const numbers = [1, 2, 3, 4, 5]; + +console.log(Array.isArray(numbers)); // true + +const person = { + name: "Alice", + age: 25, +}; + +console.log(Array.isArray(person)); // false +``` + +## Browser Support for ES5 + +ES5 is supported by all modern web browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported by Internet Explorer 9 and later versions. Since ES5 was released in 2009, it is widely adopted and compatible with most web development environments. + +By using ES5 features in your JavaScript code, you can ensure better compatibility with a wide range of browsers and devices. ES5 provides a solid foundation for building web applications and enables you to write more efficient and maintainable code. + +### Compatibility Table for ES5 + +Here is a compatibility table showing the support for ES5 features in modern web browsers: + +| Feature | Chrome | Firefox | Safari | Edge | Opera | IE | +|-----------------------|--------|---------|--------|------|-------|-------| +| Strict Mode | 5 | 4 | 5 | 12 | 12 | 9 | +| `JSON` Object | 3 | 3.5 | 4 | 8 | 10.5 | 8 | +| `Array` Methods | 5 | 4 | 5 | 12 | 12 | 9 | +| `Function.prototype.bind()` | 7 | 4 | 5 | 12 | 12 | 9 | +| Getters and Setters | 3 | 2 | 5 | 12 | 12 | 9 | +| `Object.keys()` | 5 | 4 | 5 | 12 | 12 | 9 | +| `Array.isArray()` | 5 | 4 | 5 | 12 | 12 | 9 | +| `Array.prototype.forEach()` | 1 | 1.5 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.map()` | 1 | 1.5 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.filter()` | 1 | 1.5 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.reduce()` | 1 | 3 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.some()` | 1 | 3 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.every()` | 1 | 3 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.indexOf()` | 1 | 3 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.lastIndexOf()` | 1 | 3 | 5 | 12 | 10.5 | 9 | +| `Array.prototype.reduceRight()` | 1 | 3 | 5 | 12 | 10.5 | 9 | + +:::info Note +The version numbers in the compatibility table represent the first stable release of the browser that supports the feature. For example, Chrome 5 indicates that the feature is supported in Chrome version 5 and later. + +> The version numbers in the compatibility table represent the first stable version that supports the feature. The compatibility data is based on [Can I use](https://caniuse.com/) and [MDN Web Docs](https://developer.mozilla.org/). + +::: + +## Conclusion + +In this tutorial, we learned about the ES5 version of JavaScript, which introduced several new features and improvements to the language. We explored the key features of ES5, including strict mode, the `JSON` object, new `Array` methods, `Function.prototype.bind()`, getters and setters, `Object.keys()`, and `Array.isArray()`. We also discussed the browser support for ES5 and how it has impacted JavaScript development. By understanding the features of ES5, you can write more efficient and maintainable JavaScript code for your web applications. \ No newline at end of file diff --git a/languages-platforms/javascript/js-versions/js-es6.md b/languages-platforms/javascript/js-versions/js-es6.md new file mode 100644 index 0000000..39dea7d --- /dev/null +++ b/languages-platforms/javascript/js-versions/js-es6.md @@ -0,0 +1,83 @@ +--- +id: es6-version-of-javascript +title: ES6 Version in JavaScript +sidebar_label: ES6 Version (2015) +sidebar_position: 2 +tags: [JavaScript, ES6, ES2015, ES6 Version, ECMAScript 6, ECMAScript 2015, JavaScript ES6, JavaScript ES2015, JavaScript ES6 Version, JavaScript ES2015 Version] +description: "In this tutorial, we will learn about the ES6 version of JavaScript, also known as ECMAScript 6 or ECMAScript 2015. We will discuss the new features introduced in ES6 and how to use them in your JavaScript code." +--- + +JavaScript ES6 (ECMAScript 6) is the sixth major release of the JavaScript language specification. It was finalized in June 2015. ES6 introduced many new features and syntax enhancements to JavaScript, making it more powerful and expressive. In this tutorial, we will learn about the new features introduced in ES6 and how to use them in your JavaScript code. + +## Features of ES6 + +ES6 introduced several new features and enhancements to JavaScript. Some of the key features of ES6 are: + +1. **`let` and `const` Declarations**: ES6 introduced two new ways to declare variables in JavaScript: `let` and `const`. The `let` keyword is used to declare block-scoped variables, while the `const` keyword is used to declare variables whose values cannot be reassigned. +2. **Arrow Functions**: Arrow functions are a new way to define functions in JavaScript. They provide a more concise syntax for writing function expressions. +3. **Template Literals**: Template literals are a new way to define strings in JavaScript. They allow you to embed expressions and variables inside a string using`${}`.
+4. **Destructuring Assignment**: Destructuring assignment allows you to extract values from arrays or objects and assign them to variables in a single statement.
+5. **Spread and Rest Operators**: ES6 introduced the spread (`...`) and rest (`...`) operators. The spread operator allows you to expand an array or object into individual elements, while the rest operator allows you to collect multiple elements into an array or object.
+6. **Classes**: ES6 introduced a new way to define classes in JavaScript using the `class` keyword. Classes provide a more familiar and concise syntax for defining object-oriented programming concepts.
+7. **Modules**: ES6 introduced a new module system for JavaScript using the `import` and `export` keywords. Modules allow you to split your code into multiple files and import/export functionality between them.
+8. **Promises**: Promises are a new way to work with asynchronous code in JavaScript. They provide a cleaner and more readable syntax for handling asynchronous operations.
+9. **Generators**: Generators are a new type of function in JavaScript that can be paused and resumed. They are useful for writing asynchronous code in a synchronous style.
+10. **Default Parameters**: ES6 introduced default parameter values for functions. Default parameters allow you to specify default values for function parameters if no value is provided.
+11. **Enhanced Object Literals**: ES6 introduced several enhancements to object literals, such as shorthand property and method definitions, computed property names, and method definition shorthand.
+12. **Map and Set Data Structures**: ES6 introduced two new data structures: `Map` and `Set`. `Map` is a collection of key-value pairs, while `Set` is a collection of unique values.
+13. **Symbols**: Symbols are a new primitive data type in JavaScript introduced in ES6. They are unique and immutable values that can be used as object keys.
+14. **Iterators and Iterables**: ES6 introduced the concept of iterators and iterables. Iterators are objects that define a sequence of values, while iterables are objects that can be iterated over using the `for...of` loop.
+15. **Typed Arrays**: ES6 introduced a new way to work with binary data in JavaScript using typed arrays. Typed arrays allow you to work with raw binary data in a more efficient way.
+16. **New String Methods**: ES6 introduced several new methods for working with strings, such as `startsWith()`, `endsWith()`, `includes()`, and `repeat()`.
+17. **New Array Methods**: ES6 introduced several new methods for working with arrays, such as `find()`, `findIndex()`, `some()`, and `every()`.
+18. **New Number Methods**: ES6 introduced several new methods for working with numbers, such as `isFinite()`, `isNaN()`, and `isInteger()`.
+19. **New Math Methods**: ES6 introduced several new methods for working with mathematical operations, such as `Math.sign()`, `Math.trunc()`, and `Math.cbrt()`.
+20. **New Object Methods**: ES6 introduced several new methods for working with objects, such as `Object.assign()`, `Object.keys()`, `Object.values()`, and `Object.entries()`.
+21. **New Reflect API**: ES6 introduced a new set of reflection methods for working with objects, such as `Reflect.get()`, `Reflect.set()`, and `Reflect.construct()`.
+22. **New Proxy API**: ES6 introduced a new set of proxy methods for creating and handling proxies, which are objects that intercept and customize the behavior of fundamental operations on other objects.
+23. **Internationalization and Localization**: ES6 introduced new features for working with internationalization and localization, such as the `Intl` object and the `Intl.Collator`, `Intl.DateTimeFormat`, and `Intl.NumberFormat` classes.
+24. **Tail Call Optimization**: ES6 introduced tail call optimization, which allows JavaScript engines to optimize recursive functions that are tail calls, making them more memory-efficient.
+25. **Other Features**: ES6 introduced many other features and enhancements, such as binary and octal literals, new syntax for promises, and new syntax for regular expressions.
+
+## Browser Support for ES6
+
+Most modern web browsers support ES6 features, but some older browsers may not fully support all ES6 features. To ensure that your JavaScript code works across all browsers, you can use a transpiler like Babel to convert your ES6 code into ES5 code, which is compatible with older browsers.
+
+## Using ES6 Features
+
+To use ES6 features in your JavaScript code, you can write your code using ES6
+
+```javascript title="ES6 Code Example"
+// ES6 code
+const greet = (name) => {
+ return `Hello, ${name}!`;
+};
+
+console.log(greet("Alice"));
+```
+
+You can also use a transpiler like Babel to convert your ES6 code into ES5 code. To do this, you can install Babel using
+
+```bash npm2yarn
+npm install --save-dev @babel/core @babel/cli @babel/preset-env
+```
+
+Then, you can create a `.babelrc` file in your project directory with the following configuration
+
+```json title=".babelrc"
+{
+ "presets": ["@babel/preset-env"]
+}
+```
+
+Finally, you can transpile your ES6 code into ES5 code using
+
+```bash title="Transpile ES6 to ES5 using Babel"
+npx babel src --out-dir dist
+```
+
+By using Babel, you can write modern ES6 code and ensure that it works across all browsers.
+
+## Conclusion
+
+ES6 introduced many new features and enhancements to JavaScript, making it more powerful and expressive. In this tutorial, we learned about the key features of ES6 and how to use them in your JavaScript code. By using ES6 features, you can write cleaner, more readable, and more maintainable JavaScript code.
\ No newline at end of file
diff --git a/languages-platforms/javascript/js-versions/js-history.md b/languages-platforms/javascript/js-versions/js-history.md
new file mode 100644
index 0000000..11e58db
--- /dev/null
+++ b/languages-platforms/javascript/js-versions/js-history.md
@@ -0,0 +1,96 @@
+---
+id: javascript-history
+title: JavaScript Versions History
+sidebar_label: JS History
+sidebar_position: 10
+tags: [JavaScript, JavaScript Versions, ECMAScript, JavaScript History, JavaScript Versions History]
+description: "In this tutorial, we will explore the history of JavaScript versions, starting from the initial release in 1995 to the latest version. We will discuss the key features introduced in each version and the evolution of the JavaScript language over the years."
+---
+
+JavaScript is a versatile and powerful programming language that has evolved significantly since its inception in 1995. Over the years, JavaScript has undergone several major revisions, introducing new features and enhancements to the language. In this tutorial, we will explore the history of JavaScript versions, starting from the initial release in 1995 to the latest version. We will discuss the key features introduced in each version and the evolution of the JavaScript language over the years.
+
+## JavaScript Versions
+
+### 1. JavaScript 1.0 (1995)
+
+JavaScript was first introduced in 1995 by Brendan Eich at Netscape Communications. The initial version of JavaScript, known as JavaScript 1.0, was released in the same year. JavaScript 1.0 included the core features of the language, such as variables, functions, loops, and conditional statements.
+
+### 2. JavaScript 1.1 (1996)
+
+JavaScript 1.1 was released in 1996 and introduced several new features, including support for regular expressions, better error handling, and improved performance. This version also added support for the `let` statement and the `const` statement for declaring variables.
+
+### 3. JavaScript 1.2 (1997)
+
+JavaScript 1.2 was released in 1997 and introduced several new features, such as support for `do-while` loops, the `switch` statement, and the `for-in` loop. This version also added support for the `eval()` function for evaluating JavaScript code dynamically.
+
+### 4. JavaScript 1.3 (1998)
+
+JavaScript 1.3 was released in 1998 and introduced several new features, including support for regular expressions, better error handling, and improved performance. This version also added support for the `let` statement and the `const` statement for declaring variables.
+
+### 5. JavaScript 1.4 (1999)
+
+JavaScript 1.4 was released in 1999 and introduced several new features, such as support for `do-while` loops, the `switch` statement, and the `for-in` loop. This version also added support for the `eval()` function for evaluating JavaScript code dynamically.
+
+### 6. JavaScript 1.5 (2000)
+
+JavaScript 1.5 was released in 2000 and introduced several new features, including support for array methods such as `forEach()`, `map()`, `filter()`, and `reduce()`. This version also added support for the `Function.prototype.bind()` method for binding the `this` value in functions.
+
+### 7. JavaScript 1.6 (2005)
+
+JavaScript 1.6 was released in 2005 and introduced several new features, such as support for array methods such as `forEach()`, `map()`, `filter()`, and `reduce()`. This version also added support for the `Function.prototype.bind()` method for binding the `this` value in functions.
+
+### 8. JavaScript 1.7 (2006)
+
+JavaScript 1.7 was released in 2006 and introduced several new features, such as support for array methods such as `forEach()`, `map()`, `filter()`, and `reduce()`. This version also added support for the `Function.prototype.bind()` method for binding the `this` value in functions.
+
+### 9. JavaScript 1.8 (2008)
+
+JavaScript 1.8 was released in 2008 and introduced several new features, such as support for array methods such as `forEach()`, `map()`, `filter()`, and `reduce()`. This version also added support for the `Function.prototype.bind()` method for binding the `this` value in functions.
+
+### 10. ECMAScript 5 (2009)
+
+ECMAScript 5 was released in 2009 and introduced several new features, such as strict mode, JSON support, and array methods such as `forEach()`, `map()`, `filter()`, and `reduce()`. This version also added support for the `Function.prototype.bind()` method for binding the `this` value in functions.
+
+### 11. ECMAScript 5.1 (2011)
+
+ECMAScript 5.1 was released in 2011 and introduced several new features, such as strict mode, JSON support, and array methods such as `forEach()`, `map()`, `filter()`, and `reduce()`. This version also added support for the `Function.prototype.bind()` method for binding the `this` value in functions.
+
+### 12. ECMAScript 6 (ES2015)
+
+ECMAScript 6, also known as ES2015, was released in 2015 and introduced several new features, such as arrow functions, classes, modules, template literals, and destructuring assignments. This version also added support for the `let` statement and the `const` statement for declaring variables.
+
+### 13. ECMAScript 7 (ES2016)
+
+ECMAScript 7, also known as ES2016, was released in 2016 and introduced several new features, such as the `includes()` method for arrays, the `**` operator for exponentiation, and the `async` and `await` keywords for handling asynchronous operations.
+
+### 14. ECMAScript 8 (ES2017)
+
+ECMAScript 8, also known as ES2017, was released in 2017 and introduced several new features, such as the `Object.values()` method, the `Object.entries()` method, and the `String.prototype.padStart()` and `String.prototype.padEnd()` methods for padding strings.
+
+### 15. ECMAScript 9 (ES2018)
+
+ECMAScript 9, also known as ES2018, was released in 2018 and introduced several new features, such as asynchronous iteration, the `Promise.prototype.finally()` method, and rest/spread properties for object literals and destructuring.
+
+### 16. ECMAScript 10 (ES2019)
+
+ECMAScript 10, also known as ES2019, was released in 2019 and introduced several new features, such as `Array.prototype.flat()` and `Array.prototype.flatMap()` methods, the `Object.fromEntries()` method, and the `String.prototype.trimStart()` and `String.prototype.trimEnd()` methods.
+
+### 17. ECMAScript 11 (ES2020)
+
+ECMAScript 11, also known as ES2020, was released in 2020 and introduced several new features, such as the `BigInt` data type for working with arbitrary precision integers, the `Promise.allSettled()` method, and the `String.prototype.matchAll()` method for working with regular expressions.
+
+### 18. ECMAScript 12 (ES2021)
+
+ECMAScript 12, also known as ES2021, was released in 2021 and introduced several new features, such as the `String.prototype.replaceAll()` method for replacing all occurrences of a substring, the `Logical Assignment Operators` for combining logical operations with assignment, and the `Numeric Separators` for improving the readability of numeric literals.
+
+### 19. ECMAScript 13 (ES2022)
+
+ECMAScript 13, also known as ES2022, was released in 2022 and introduced several new features, such as the `Array.prototype.groupBy()` method for grouping array elements based on a key, the `String.prototype.sliceSet()` method for replacing a slice of a string with another string, and the `Object.hasOwn()` method for checking if an object has a property.
+
+### 20. ECMAScript 14 (ES2023)
+
+ECMAScript 14, also known as ES2023, is the upcoming version of JavaScript that is expected to be released in 2023. It is expected to introduce several new features and enhancements to the language, building upon the foundation laid by previous versions.
+
+## Conclusion
+
+In this tutorial, we explored the history of JavaScript versions, starting from the initial release in 1995 to the latest version. We discussed the key features introduced in each version and the evolution of the JavaScript language over the years. JavaScript has come a long way since its inception and continues to evolve to meet the changing needs of developers and the web platform.
\ No newline at end of file
diff --git a/languages-platforms/javascript/json-js.md b/languages-platforms/javascript/json-js.md
new file mode 100644
index 0000000..0fdc16c
--- /dev/null
+++ b/languages-platforms/javascript/json-js.md
@@ -0,0 +1,346 @@
+---
+id: json-in-javascript
+title: JSON in JavaScript
+sidebar_label: JSON
+sidebar_position: 38
+tags:
+ [
+ JavaScript,
+ JSON,
+ json-in-javascript,
+ json,
+ javascript-json,
+ javascript-json-tutorial,
+ json-tutorial,
+ json-in-javascript-tutorial,
+ json-in-javascript-example,
+ json-in-javascript-syntax,
+ json-in-javascript-usage,
+ json-in-javascript-usage-example,
+ json-in-javascript-usage-syntax,
+ json-in-javascript-usage-guide,
+ json-in-javascript-guide,
+ json-in-javascript-example,
+ json-in-javascript-example-guide,
+ json-in-javascript-example-tutorial,
+ json-in-javascript-tutorial-guide,
+ json-in-javascript-tutorial-example,
+ json-in-javascript-tutorial-syntax,
+ json-in-javascript-tutorial-usage,
+ json-in-javascript-tutorial-example-guide,
+ json-in-javascript-tutorial-usage-example,
+ json-in-javascript-tutorial-syntax-example,
+ json-in-javascript-tutorial-syntax-guide,
+ json-in-javascript-tutorial-syntax-usage,
+ json-in-javascript-tutorial-syntax-example-guide,
+ json-in-javascript-tutorial-syntax-guide-example,
+ json-in-javascript-tutorial-usage-example-guide,
+ json-in-javascript-tutorial-usage-guide-example,
+ json-in-javascript-tutorial-example-usage,
+ json-in-javascript-tutorial-example-syntax,
+ json-in-javascript-tutorial-example-guide-syntax,
+ json-in-javascript-tutorial-example-syntax-guide,
+ json-in-javascript-tutorial-example-usage,
+ json-in-javascript-tutorial-example-usage-guide,
+ json-in-javascript-tutorial-guide-example-syntax,
+ json-in-javascript-tutorial-guide-example-usage,
+ json-in-javascript-tutorial-guide-example-usage-syntax,
+ json-in-javascript-tutorial-guide-syntax-example,
+ json-in-javascript-tutorial-guide-syntax-usage,
+ json-in-javascript-tutorial-guide-syntax-usage-example,
+ json-in-javascript-tutorial-guide-usage-example,
+ ]
+description: "In this tutorial, we will learn about JSON in JavaScript. JSON stands for JavaScript Object Notation. It is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate."
+---
+
+JSON stands for JavaScript Object Notation. It is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. JSON is a text format that is completely language-independent but uses conventions that are familiar to programmers of the C family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.
+
+**JSON is built on two structures:**
+
+1. A collection of key/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
+2. An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
+
+These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.
+
+**In JSON, they take on these forms:**
+
+1. An object is an unordered set of name/value pairs. An object begins with `{` (left brace) and ends with `}` (right brace). Each name is followed by `:` (colon) and the name/value pairs are separated by `,` (comma).
+2. An array is an ordered collection of values. An array begins with `[` (left bracket) and ends with `]` (right bracket). Values are separated by `,` (comma).
+3. A value can be a string in double quotes, a number, `true`, `false`, `null`, an object, or an array. These structures can be nested.
+4. JSON is often used to exchange data between a server and a web application.
+
+In this tutorial, we will learn how to work with JSON in JavaScript. We will learn how to parse JSON data, stringify JSON data, and how to work with JSON objects and arrays in JavaScript. We will also learn how to convert JSON data to JavaScript objects and arrays and vice versa. We will also learn how to work with JSON data in JavaScript using the JSON object. We will also learn how to handle errors when working with JSON data in JavaScript. We will also learn how to work with JSON data in JavaScript using the fetch API. We will also learn how to work with JSON data in JavaScript using the XMLHttpRequest object. We will also learn how to work with JSON data in JavaScript using the jQuery library. We will also learn how to work with JSON data in JavaScript using the Axios library.
+
+## JSON Syntax
+
+JSON syntax is derived from JavaScript object notation syntax:
+
+1. Data is in name/value pairs.
+
+ - Data is separated by commas.
+ - Curly braces hold objects.
+ - Square brackets hold arrays.
+
+ + + ```js title="data.json" + { + "name": "Ajay Dhangar", + "age": 23, + "isStudent": true, + "courses": ["Math", "Science", "English"], + "address": { + "street": "Mandsaur, MP", + "city": "Mandsaur", + "state": "MP", + "zip": "458002" + } + } + ``` + +2. Data is in key/value pairs. + + - Keys must be strings. + - Values must be valid JSON data types. + - Each key/value pair is separated by a comma. + - The key is separated from the value by a colon. + +
+ + ```js title="data.json" + { + "name": "Ajay Dhangar", + "age": 23, + "isStudent": true, + "courses": ["Math", "Science", "English"], + "address": { + "street": "Mandsaur, MP", + "city": "Mandsaur", + "state": "MP", + "zip": "458002" + } + } + ``` + +3. JSON values can be: + + - A string. + - A number. + - An object (JSON object). + - An array. + - A boolean. + - `null`. + +## JSON Data Types + +JSON supports the following data types: + +1. **String**: A string is a sequence of zero or more Unicode characters, wrapped in double quotes, using backslashes (`\`) to escape characters. + + ```js title="data.json" + { + "name": "Ajay Dhangar" + } + ``` + +2. **Number**: A number is a signed decimal number that may contain a fractional part and may use exponential `E` notation. + + ```js title="data.json" + { + "age": 23 + } + ``` + +3. **Object**: An object is an unordered collection of key/value pairs. + + ```js title="data.json" + { + "address": { + "street": "Mandsaur, MP", + "city": "Mandsaur", + "state": "MP", + "zip": "458002" + } + } + ``` + +4. **Array**: An array is an ordered collection of values. + + ```js title="data.json" + { + "courses": ["Math", "Science", "English"] + } + ``` + +5. **Boolean**: A boolean is either `true` or `false`. + + ```js title="data.json" + { + "isStudent": true + } + ``` + +6. **Null**: A null value represents a `null` value. + + ```js title="data.json" + { + "address": null + } + ``` + +## JSON in JavaScript + +In JavaScript, you can work with JSON data using the following methods: + +1. **`JSON.parse()`**: The `JSON.parse()` method parses a JSON string and returns a JavaScript object. + + ```js title="JSON.parse() Example" + const jsonString = `{ + "name": "Ajay Dhangar", + "age": 23, + "isStudent": true, + "courses": ["Math", "Science", "English"], + "address": { + "street": "Mandsaur, MP", + "city": "Mandsaur", + "state": "MP", + "zip": "458002" + } + }`; + + const jsonObject = JSON.parse(jsonString); + + console.log(jsonObject); + ``` + +2. **`JSON.stringify()`**: The `JSON.stringify()` method converts a JavaScript object or value to a JSON string. + + ```js title="JSON.stringify() Example" + const jsonObject = { + name: "Ajay Dhangar", + age: 23, + isStudent: true, + courses: ["Math", "Science", "English"], + address: { + street: "Mandsaur, MP", + city: "Mandsaur", + state: "MP", + zip: "458002" + } + }; + + const jsonString = JSON.stringify(jsonObject); + + console.log(jsonString); // + + ``` + +3. **`JSON` Object**: The `JSON` object provides methods for working with JSON data. + + - `JSON.parse()`: Parses a JSON string and returns a JavaScript object. + - `JSON.stringify()`: Converts a JavaScript object or value to a JSON string. + +
+ + ```js title="JSON Object Example" + const jsonString = `{ + "name": "Ajay Dhangar", + "age": 23, + "isStudent": true, + "courses": ["Math", "Science", "English"], + "address": { + "street": "Mandsaur, MP", + "city": "Mandsaur", + "state": "MP", + "zip": "458002" + } + }`; + + const jsonObject = JSON.parse(jsonString); + + console.log(jsonObject); + + const jsonString = JSON.stringify(jsonObject); + + console.log(jsonString); + ``` + +4. **Fetch API**: The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. + + ```js title="Fetch API Example" + fetch('https://jsonplaceholder.typicode.com/posts') + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error(error)); + ``` + +5. **XMLHttpRequest Object**: The `XMLHttpRequest` object is used to interact with servers. + + ```js title="XMLHttpRequest Object Example" + const xhr = new XMLHttpRequest(); + + xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); + + xhr.onload = function () { + if (xhr.status >= 200 && xhr.status < 300) { + console.log(JSON.parse(xhr.responseText)); + } else { + console.error('Request failed with status:', xhr.status); + } + }; + + xhr.send(); + ``` + +6. **jQuery Library**: The jQuery library provides methods for working with JSON data. + + ```js title="jQuery Library Example" + $.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) { + console.log(data); + }); + ``` + +7. **Axios Library**: The Axios library provides methods for working with JSON data. + + ```js title="Axios Library Example" + axios.get('https://jsonplaceholder.typicode.com/posts') + .then(response => console.log(response.data)) + .catch(error => console.error(error)); + ``` + +## JSON Error Handling + +When working with JSON data in JavaScript, you should handle errors to prevent your application from crashing. You can handle errors using the `try...catch` statement. + +```js title="Error Handling Example" +try { + const jsonString = `{ + "name": "Ajay Dhangar", + "age": 23, + "isStudent": true, + "courses": ["Math", "Science", "English"], + "address": { + "street": "Mandsaur, MP", + "city": "Mandsaur", + "state": "MP", + "zip": "458002" + } + }`; + + const jsonObject = JSON.parse(jsonString); + + console.log(jsonObject); +} catch (error) { + console.error(error); +} +``` + +In the above example, we are using the `try...catch` statement to handle errors when parsing JSON data. If an error occurs while parsing JSON data, the error will be caught and logged to the console. + +:::info Note +You should always handle errors when working with JSON data in JavaScript to prevent your application from crashing. +::: + +## Conclusion + +In this tutorial, we learned about JSON in JavaScript. We learned how to parse JSON data, stringify JSON data, and how to work with JSON objects and arrays in JavaScript. We also learned how to convert JSON data to JavaScript objects and arrays and vice versa. We also learned how to work with JSON data in JavaScript using the JSON object. We also learned how to handle errors when working with JSON data in JavaScript. We also learned how to work with JSON data in JavaScript using the fetch API. We also learned how to work with JSON data in JavaScript using the XMLHttpRequest object. We also learned how to work with JSON data in JavaScript using the jQuery library. We also learned how to work with JSON data in JavaScript using the Axios library. JSON is a powerful data interchange format that is widely used in web development. It is easy to read and write and easy to parse and generate. JSON is a text format that is completely language-independent but uses conventions that are familiar to programmers of the C family of languages. JSON is built on two structures: A collection of key/value pairs and an ordered list of values. JSON is often used to exchange data between a server and a web application. It is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. JSON is a universal data structure that is supported by virtually all modern programming languages. \ No newline at end of file diff --git a/languages-platforms/javascript/let-js.md b/languages-platforms/javascript/let-js.md new file mode 100644 index 0000000..ab919ba --- /dev/null +++ b/languages-platforms/javascript/let-js.md @@ -0,0 +1,110 @@ +--- +id: let-in-javascript +title: Let Keyword in JavaScript +sidebar_label: Let Keyword +sidebar_position: 8 +tags: [JavaScript, let, ES6, Variables, Block Scope, Hoisting, Redeclaration] +description: What is the let keyword in JavaScript and how to use it. +--- + +In JavaScript, the `let` keyword is used to declare a block-scoped variable. It was introduced in ECMAScript 6 (ES6) and is the preferred way to declare variables in modern JavaScript. + +> ***ES6 (ECMAScript 2015) is a major update to JavaScript that adds new syntax and features to the language. It was officially released in June 2015.*** + +## Syntax + +The syntax to declare a variable using the `let` keyword is: + +```js title="Syntax" +let variableName = value; +``` + +Here, `variableName` is the name of the variable and `value` is the value assigned to the variable. + +## Example + +Let's see an example to understand how to use the `let` keyword in JavaScript: + +```js title="Example" +let name = "John"; +console.log(name); // Output: John +``` + +In the above example, we have declared a variable `name` using the `let` keyword and assigned it a value `"John"`. We then printed the value of the variable using `console.log()`. + +## Block Scope + +The `let` keyword is block-scoped, which means that the variable declared using `let` is only available within the block in which it is defined. + +```js title="Block Scope" +{ + let x = 10; + console.log(x); // Output: 10 +} + +console.log(x); // Uncaught ReferenceError: x is not defined +``` + +In the above example, the variable `x` is only available within the block in which it is defined. If we try to access it outside the block, it will result in a `ReferenceError`. + +## Redeclaration + +The `let` keyword does not allow redeclaration of the same variable within the same block scope. + +```js title="Redeclaration" +let x = 10; +let x = 20; // Uncaught SyntaxError: Identifier 'x' has already been declared +``` + +In the above example, we are trying to redeclare the variable `x` within the same block scope, which results in a `SyntaxError`. + +## Hoisting + +Variables declared using the `let` keyword are not hoisted to the top of their block. This means that you cannot access the variable before it is declared. + +```js title="Hoisting" +console.log(x); // Uncaught ReferenceError: x is not defined +let x = 10; +``` + +In the above example, we are trying to access the variable `x` before it is declared, which results in a `ReferenceError`. + +## Comparison with var + +The `let` keyword differs from the `var` keyword in terms of block scope, redeclaration, and hoisting. + +### Block Scope + +Variables declared using the `var` keyword are function-scoped or globally-scoped, whereas variables declared using the `let` keyword are block-scoped. + +```js title="Block Scope" +// var +function varExample() { + if (true) { + var x = 10; + } + console.log(x); // Output: 10 +} + +varExample(); + +// let +function letExample() { + if (true) { + let x = 10; + } + console.log(x); // Uncaught ReferenceError: x is not defined +} + +letExample(); +``` + +In the above example, the variable `x` declared using the `var` keyword is available outside the block in which it is defined, whereas the variable `x` declared using the `let` keyword is not available outside the block. + +:::info +A block is a set of statements enclosed in curly braces `{}`. +::: + +## Conclusion + +In this article, we learned about the `let` keyword in JavaScript and how to use it to declare block-scoped variables. We also saw how the `let` keyword differs from the `var` keyword in terms of block scope, redeclaration, and hoisting. \ No newline at end of file diff --git a/languages-platforms/javascript/maps.md b/languages-platforms/javascript/maps.md new file mode 100644 index 0000000..2342b20 --- /dev/null +++ b/languages-platforms/javascript/maps.md @@ -0,0 +1,863 @@ +--- +id: map-in-javascript +title: Maps in JavaScript +sidebar_label: Maps +sidebar_position: 27 +tags: + [ + JavaScript, + Map, + Data Structure, + Collection, + Key, + Value, + Pairs, + Iteration, + Iterative, + Statements, + Loops, + Iteration, + Iterating, + Iterations, + ] +description: "In this tutorial, we will learn about maps in JavaScript. We will learn how to use maps to store key-value pairs in JavaScript." +--- + +In JavaScript, a `Map` is a built-in object that allows you to store key-value pairs. It is often used when you want to store a collection of key-value pairs and access them by their keys. + +## Creating a Map + +You can create a new `Map` by using the `new` keyword followed by the `Map` constructor. You can pass an iterable + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +console.log(map); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } } +``` + +- The `Map` constructor creates a new `Map` object. +- You can pass an iterable (such as an array of key-value pairs) to the `Map` constructor to initialize the map with the key-value pairs from the iterable. +- The `Map` object stores key-value pairs, so any duplicate keys will be overwritten. +- The order of elements in a `Map` is guaranteed to be the same as the order of insertion. +- The `Map` object is iterable, so you can use it in a `for...of` loop to iterate over its elements. +- The `Map` object has a `size` property that returns the number of key-value pairs in the map. +- The `Map` object has methods to add, delete, and check for the presence of key-value pairs. +- The `Map` object does not have methods to access key-value pairs by index, as it does not maintain the order of elements. +- The `Map` object can store any type of key or value, including objects, functions, and other maps. +- The `Map` object can store key-value pairs with the same key, as it uses the `===` operator to compare keys. +- The `Map` object can store key-value pairs with `NaN` as the key, as it uses the `===` operator to compare keys. + +## Adding Key-Value Pairs to a Map + +You can add key-value pairs to a `Map` by using the `set` method. + +```js title="app.js" +const map = new Map(); +map.set("name", "John"); +map.set("age", 23); +map.set("person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, +}); +console.log(map); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } } +``` + +In this example, the `set` method is used to add key-value pairs to the map. The first argument to the `set` method is the key, and the second argument is the value. + +- The `set` method is used to add a new key-value pair to the map. +- If the key is already present in the map, its value will be updated with the new value. +- The `set` method returns the `Map` object, so you can chain multiple `set` calls together. +- The `set` method can store any type of key or value, including objects, functions, and other maps. +- The `set` method can store key-value pairs with the same key, as it uses the `===` operator to compare keys. +- The `set` method can store key-value pairs with `NaN` / `undefined` as the key, as it uses the `===` operator to compare keys. + +## Deleting Key-Value Pairs from a Map + +You can delete key-value pairs from a `Map` by using the `delete` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +map.delete("age"); + +console.log(map); // Map { 'name' => 'John', 'person' => { name: 'John', age: 23, greet: [Function: greet] } } +``` + +In this example, the `delete` method is used to remove the key-value pair with the key `"age"` from the map. The `delete` method returns `true` if the key-value pair is removed, and `false` otherwise. + +- The `delete` method is used to remove a key-value pair from the map. +- If the key is present in the map, the key-value pair will be removed, and the method will return `true`. +- If the key is not present in the map, the method will return `false`. +- The `delete` method does not throw an error if the key is not present in the map. +- The `delete` method does not return the removed key-value pair. +- The `delete` method is chainable, so you can remove multiple key-value pairs from the map in a single statement. +- The `delete` method can be used to remove key-value pairs with `NaN` / `undefined` as the key, as it uses the `===` operator to compare keys. +- The `delete` method can be used to remove key-value pairs with the same key, as it uses the `===` operator to compare keys. + +## Checking for the Presence of a Key in a Map + +You can check if a key is present in a `Map` by using the `has` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +console.log(map.has("age")); // true +``` + +In this example, the `has` method is used to check if the key `"age"` is present in the map. If the key is present, the method will return `true`; otherwise, it will return `false`. + +- The `has` method is used to check if a key is present in the map. +- If the key is present in the map, the method will return `true`. +- If the key is not present in the map, the method will return `false`. +- The `has` method does not throw an error if the key is not present in the map. +- The `has` method does not return the key itself. +- The `has` method is often used to check if a key is present in the map before adding or deleting it. +- The `has` method can be used to check for the presence of `NaN` / `undefined` as the key, as it uses the `===` operator to compare keys. +- The `has` method can be used to check for the presence of the same key, as it uses the `===` operator to compare keys. +- The `has` method can be used to check for the presence of a key with a value of `undefined`. + +## Iterating Over a Map + +You can iterate over the key-value pairs of a `Map` by using a `for...of` loop. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const [key, value] of map) { + console.log(key + ": " + value); +} +``` + +The `for...of` loop is used to iterate over the key-value pairs of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable `[key, value]`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +name: John +age: 23 +person: [object Object] +``` + +In each iteration, the key and value of the current key-value pair are printed to the console. + +## Iterating Over the Keys of a Map + +You can iterate over the keys of a `Map` by using the `keys` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const key of map.keys()) { + console.log(key); +} +``` + +The `keys` method is used to iterate over the keys of the map. In each iteration, the value of the current key is assigned to the loop variable `key`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +name +age +person +``` + +In each iteration, the key of the current key-value pair is printed to the console. + +## Iterating Over the Values of a Map + +You can iterate over the values of a `Map` by using the `values` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const value of map.values()) { + console.log(value); +} +``` + +The `values` method is used to iterate over the values of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable `value`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +John +23 +[object Object] +``` + +In each iteration, the value of the current key-value pair is printed to the console. + +## Converting a Map to an Array + +You can convert a `Map` to an array by using the `Array.from` method or the spread operator (`...`). + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const array = Array.from(map); + +console.log(array); // [ [ 'name', 'John' ], [ 'age', 23 ], [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ] ] +``` + +- The `Array.from` method is used to create a new array from an iterable (such as a `Map`). +- The `Array.from` method returns a new array that contains the key-value pairs of the map. +- The spread operator (`...`) can also be used to create a new array from an iterable. +- The spread operator (`...`) returns a new array that contains the key-value pairs of the map. +- The `Array.from` method and the spread operator (`...`) can be used to convert a `Map` to an array of key-value pairs. +- The `Array.from` method and the spread operator (`...`) can be used to convert a `Map` to an array of keys or values. + +## Using the Map Constructor + +You can use the `Map` constructor to create an empty `Map` and then add key-value pairs to it. + +```js title="app.js" +const map = new Map(); +map.set("name", "John"); +map.set("age", 23); +map.set("person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, +}); + +console.log(map); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } } +``` + +The `Map` constructor creates a new empty `Map` object. You can then use the `set` method to add key-value pairs to the map. The `Map` object stores key-value pairs, so any duplicate keys will be overwritten. + +## Using the Spread Operator + +You can use the spread operator (`...`) to create a new `Map` from an existing `Map`. + +```js title="app.js" +const map1 = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const map2 = new Map([...map1]); + +console.log(map2); // Map { 'name' => 'John', 'age' => 23, 'person' => { name: 'John', age: 23, greet: [Function: greet] } } +``` + +The spread operator (`...`) is used to create a new `Map` from an existing `Map`. The new `Map` contains the key-value pairs of the existing `Map`. + +## Using the `forEach` Method + +You can use the `forEach` method to iterate over the key-value pairs of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +map.forEach((value, key) => { + console.log(key + ": " + value); +}); +``` + +The `forEach` method is used to iterate over the key-value pairs of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable `value`, and the key is assigned to the loop variable `key`. The loop body is executed for each key-value pair. + +The output of the above example will be: + +```plaintext title="Output" +name: John +age: 23 +person: [object Object] +``` + +In each iteration, the key and value of the current key-value pair are printed to the console. + +## Using the `clear` Method + +You can use the `clear` method to remove all key-value pairs from a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +map.clear(); + +console.log(map); // Map {} +``` + +The `clear` method is used to remove all key-value pairs from the map. After calling the `clear` method, the map will be empty. + +The `clear` method does not return any value. + +The `clear` method can be used to remove all key-value pairs from the map in a single statement. + +## Using the `size` Property + +You can use the `size` property to get the number of key-value pairs in a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +console.log(map.size); // 3 +``` + +The `size` property returns the number of key-value pairs in the map. It can be used to get the size of the map in a single statement. + +The `size` property is read-only, so you cannot change its value. + +The `size` property can be used to get the number of key-value pairs in the map. + +## Using the `entries` Method + +You can use the `entries` method to get an iterator that contains the key-value pairs of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const iterator = map.entries(); + +console.log(iterator.next().value); // [ 'name', 'John' ] +console.log(iterator.next().value); // [ 'age', 23 ] +console.log(iterator.next().value); // [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ] +``` + +The `entries` method returns an iterator that contains the key-value pairs of the map. You can use the `next` method of the iterator to get the next key-value pair. + +The `entries` method can be used to get an iterator that contains the key-value pairs of the map. + +The `entries` method can be used to iterate over the key-value pairs of the map. + +## Using the `keys` Method + +You can use the `keys` method to get an iterator that contains the keys of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const iterator = map.keys(); + +console.log(iterator.next().value); // name +console.log(iterator.next().value); // age +console.log(iterator.next().value); // person +``` + +The `keys` method returns an iterator that contains the keys of the map. You can use the `next` method of the iterator to get the next key. + +The `keys` method can be used to get an iterator that contains the keys of the map. + +The `keys` method can be used to iterate over the keys of the map. + +## Using the `values` Method + +You can use the `values` method to get an iterator that contains the values of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const iterator = map.values(); + +console.log(iterator.next().value); // John +console.log(iterator.next().value); // 23 +console.log(iterator.next().value); // { name: 'John', age: 23, greet: [Function: greet] } +``` + +The `values` method returns an iterator that contains the values of the map. You can use the `next` method of the iterator to get the next value. + +The `values` method can be used to get an iterator that contains the values of the map. + +The `values` method can be used to iterate over the values of the map. + +## Using the `Symbol.iterator` Property + +You can use the `Symbol.iterator` property to get an iterator that contains the key-value pairs of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const iterator = map[Symbol.iterator](); + +console.log(iterator.next().value); // [ 'name', 'John' ] +console.log(iterator.next().value); // [ 'age', 23 ] +console.log(iterator.next().value); // [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ] +``` + +The `Symbol.iterator` property returns an iterator that contains the key-value pairs of the map. You can use the `next` method of the iterator to get the next key-value pair. + +The `Symbol.iterator` property can be used to get an iterator that contains the key-value pairs of the map. + +The `Symbol.iterator` property can be used to iterate over the key-value pairs of the map. + +## Using the `for...of` Loop + +You can use a `for...of` loop to iterate over the key-value pairs of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const [key, value] of map) { + console.log(key + ": " + value); +} +``` + +The `for...of` loop is used to iterate over the key-value pairs of the map. In each iteration, the value of the current key-value pair is assigned to the loop variable `[key, value]`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +name: John +age: 23 +person: [object Object] +``` + +In each iteration, the key and value of the current key-value pair are printed to the console. + +## Using the `for...of` Loop with the `entries` Method + +You can use a `for...of` loop to iterate over the key-value pairs of a `Map` by using the `entries` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const [key, value] of map.entries()) { + console.log(key + ": " + value); +} +``` + +The `for...of` loop is used to iterate over the key-value pairs of the map by using the `entries` method. In each iteration, the value of the current key-value pair is assigned to the loop variable `[key, value]`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +name: John +age: 23 +person: [object Object] +``` + +In each iteration, the key and value of the current key-value pair are printed to the console. + +## Using the `for...of` Loop with the `keys` Method + +You can use a `for...of` loop to iterate over the keys of a `Map` by using the `keys` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const key of map.keys()) { + console.log(key); +} +``` + +The `for...of` loop is used to iterate over the keys of the map by using the `keys` method. In each iteration, the value of the current key is assigned to the loop variable `key`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +name +age +person +``` + +In each iteration, the key of the current key-value pair is printed to the console. + +## Using the `for...of` Loop with the `values` Method + +You can use a `for...of` loop to iterate over the values of a `Map` by using the `values` method. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const value of map.values()) { + console.log(value); +} +``` + +The `for...of` loop is used to iterate over the values of the map by using the `values` method. In each iteration, the value of the current key-value pair is assigned to the loop variable `value`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +John +23 +[object Object] +``` + +In each iteration, the value of the current key-value pair is printed to the console. + +## Using the `for...in` Loop + +You can use a `for...in` loop to iterate over the keys of a `Map`. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const key in map) { + console.log(key); +} +``` + +The `for...in` loop is used to iterate over the keys of the map. In each iteration, the value of the current key is assigned to the loop variable `key`, and the loop body is executed. + +The output of the above example will be: + +```plaintext title="Output" +name +age +person +``` + +In each iteration, the key of the current key-value pair is printed to the console. + +## Using the `hasOwnProperty` Method + +To check if the key is a direct property of the map and not inherited from its prototype chain, you can use the `hasOwnProperty` method. Here's an example: + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +for (const key in map) { + if (map.hasOwnProperty(key)) { + console.log(key); + } +} +``` + +In this example, the `hasOwnProperty` method is used to check if the key is a direct property of the map. If it is, the key is printed to the console. + +The output of the above example will be: + +```plaintext title="Output" +name +age +person +``` + +In each iteration, the key is checked if it is a direct property of the map. If it is, the key is printed to the console. + +## Using the `Array.from` Method + +You can use the `Array.from` method to convert a `Map` to an array of key-value pairs. + +```js title="app.js" +const map = new Map([ + ["name", "John"], + ["age", 23], + ["person", { + name: "John", + age: 23, + greet: function () { + console.log( + "Hello, I am " + this.name + " and I am " + this.age + " years old." + ); + }, + }], +]); + +const array = Array.from(map); + +console.log(array); // [ [ 'name', 'John' ], [ 'age', 23 ], [ 'person', { name: 'John', age: 23, greet: [Function: greet] } ] ] +``` + +The `Array.from` method is used to create a new array from the map. The new array contains the key-value pairs of the map. + +The `Array.from` method can be used to convert a `Map` to an array of key-value pairs. + +The `Array.from` method can be used to convert a `Map` to an array of keys or values. + +:::info ๐ Note + +## Why Use Maps? + +Maps are often used when you want to store a collection of key-value pairs and access them by their keys. They are more flexible than objects, as they can store any type of key or value, including objects, functions, and other maps. They can also store key-value pairs with the same key, as they use the `===` operator to compare keys. + +## Benefits of Using Maps + +- Maps are iterable, so you can use them in a `for...of` loop to iterate over their elements. +- Maps have a `size` property that returns the number of key-value pairs in the map. +- Maps have methods to add, delete, and check for the presence of key-value pairs. +- Maps do not have methods to access key-value pairs by index, as they do not maintain the order of elements. +- Maps can store any type of key or value, including objects, functions, and other maps. +- Maps can store key-value pairs with the same key, as they use the `===` operator to compare keys. +- Maps can store key-value pairs with `NaN` as the key, as they use the `===` operator to compare keys. +- Maps can store key-value pairs with `undefined` as the key, as they use the `===` operator to compare keys. +- Maps can store key-value pairs with `null` as the key, as they use the `===` operator to compare keys. +- Maps can store key-value pairs with `0` as the key, as they use the `===` operator to compare keys. +- Maps can store key-value pairs with `false` as the key, as they use the `===` operator to compare keys. +- Maps can store key-value pairs with an empty string as the key, as they use the `===` operator to compare keys. + +## When to Use Maps + +- Use maps when you want to store a collection of key-value pairs and access them by their keys. +- Use maps when you want to store key-value pairs with the same key, as maps can store duplicate keys. +- Use maps when you want to store key-value pairs with `NaN` as the key, as maps can store `NaN` as the key. +- Use maps when you want to store key-value pairs with `undefined` as the key, as maps can store `undefined` as the key. +- Use maps when you want to store key-value pairs with `null` as the key, as maps can store `null` as the key. +- Use maps when you want to store key-value pairs with `0` as the key, as maps can store `0` as the key. +- Use maps when you want to store key-value pairs with `false` as the key, as maps can store `false` as the key. + +## When Not to Use Maps + +- Do not use maps when you want to access key-value pairs by index, as maps do not maintain the order of elements. +- Do not use maps when you want to store key-value pairs with the same key, as maps will overwrite the existing key-value pair. +- Do not use maps when you want to store key-value pairs with `NaN` as the key, as maps will treat `NaN` as the same key. +- Do not use maps when you want to store key-value pairs with `undefined` as the key, as maps will treat `undefined` as the same key. +- Do not use maps when you want to store key-value pairs with `null` as the key, as maps will treat `null` as the same key. +- Do not use maps when you want to store key-value pairs with `0` as the key, as maps will treat `0` as the same key. +- Do not use maps when you want to store key-value pairs with `false` as the key, as maps will treat `false` as the same key. + +::: + +## Summary + +In this tutorial, we learned about maps in JavaScript. We learned how to use maps to store key-value pairs in JavaScript. We also learned how to add, delete, and check for the presence of key-value pairs in a map. Finally, we learned how to iterate over the key-value pairs, keys, and values of a map. \ No newline at end of file diff --git a/languages-platforms/javascript/math.md b/languages-platforms/javascript/math.md new file mode 100644 index 0000000..2ac8cc6 --- /dev/null +++ b/languages-platforms/javascript/math.md @@ -0,0 +1,261 @@ +--- +id: math-in-javascript +title: Math in JavaScript +sidebar_label: Math +sidebar_position: 17 +tags: [JavaScript, Math, Object, Properties, Methods] +description: "In this tutorial, we will learn about the Math object in JavaScript. We will learn about the properties and methods of the Math object." +--- + +In JavaScript, the `Math` object is a built-in object that has properties and methods for mathematical constants and functions. It allows you to perform mathematical tasks on numbers. + +## Properties + +The `Math` object has the following properties: + +- `Math.E`: Returns Euler's number, the base of natural logarithms, approximately 2.718. + + for example: + + ```js title="app.js" + console.log(Math.E); // 2.718281828459045 + ``` + +- `Math.PI`: Returns the ratio of the circumference of a circle to its diameter, approximately 3.14159. + for example: + + ```js title="app.js" + console.log(Math.PI); // 3.141592653589793 + ``` + +- `Math.LN2`: Returns the natural logarithm of 2, approximately 0.693. + for example: + + ```js title="app.js" + console.log(Math.LN2); // 0.6931471805599453 + ``` + +- `Math.LN10`: Returns the natural logarithm of 10, approximately 2.303. + for example: + + ```js title="app.js" + console.log(Math.LN10); // 2.302585092994046 + ``` + +- `Math.LOG2E`: Returns the base 2 logarithm of E, approximately 1.442. + + for example: + + ```js title="app.js" + console.log(Math.LOG2E); // 1.4426950408889634 + ``` + +- `Math.LOG10E`: Returns the base 10 logarithm of E, approximately 0.434. + + for example: + + ```js title="app.js" + console.log(Math.LOG10E); // 0.4342944819032518 + ``` + +- `Math.SQRT1_2`: Returns the square root of 1/2, approximately 0.707. + + for example: + + ```js title="app.js" + console.log(Math.SQRT1_2); // 0.7071067811865476 + ``` + +- `Math.SQRT2`: Returns the square root of 2, approximately 1.414. + + for example: + + ```js title="app.js" + console.log(Math.SQRT2); // 1.4142135623730951 + ``` + +## Methods + +The `Math` object has the following methods: + +- `Math.abs(x)`: Returns the absolute value of a number. + + for example: + + ```js title="app.js" + console.log(Math.abs(-5)); // 5 + console.log(Math.abs(5)); // 5 + ``` + +- `Math.ceil(x)`: Returns the smallest integer greater than or equal to a number. + + for example: + + ```js title="app.js" + console.log(Math.ceil(5.1)); // 6 + console.log(Math.ceil(5.9)); // 6 + ``` + +- `Math.floor(x)`: Returns the largest integer less than or equal to a number. + + for example: + + ```js title="app.js" + console.log(Math.floor(5.1)); // 5 + console.log(Math.floor(5.9)); // 5 + ``` + +- `Math.round(x)`: Returns the value of a number rounded to the nearest integer. + + for example: + + ```js title="app.js" + console.log(Math.round(5.1)); // 5 + console.log(Math.round(5.9)); // 6 + ``` + +- `Math.max(x, y, z, ..., n)`: Returns the largest of zero or more numbers. + + for example: + + ```js title="app.js" + console.log(Math.max(5, 10, 15, 20)); // 20 + ``` + +- `Math.min(x, y, z, ..., n)`: Returns the smallest of zero or more numbers. + + for example: + + ```js title="app.js" + console.log(Math.min(5, 10, 15, 20)); // 5 + ``` + +- `Math.pow(x, y)`: Returns the value of x to the power of y. + + for example: + + ```js title="app.js" + console.log(Math.pow(2, 3)); // 8 + ``` + +- `Math.sqrt(x)`: Returns the square root of a number. + + for example: + + ```js title="app.js" + console.log(Math.sqrt(16)); // 4 + ``` + +- `Math.random()`: Returns a random number between 0 (inclusive), and 1 (exclusive). + + for example: + + ```js title="app.js" + console.log(Math.random()); // 0.123456789 + ``` + +- `Math.sin(x)`: Returns the sine of a number. + + for example: + + ```js title="app.js" + console.log(Math.sin(90)); // 0.8939966636005579 + ``` + +- `Math.cos(x)`: Returns the cosine of a number. + + for example: + + ```js title="app.js" + console.log(Math.cos(0)); // 1 + ``` + +- `Math.tan(x)`: Returns the tangent of a number. + + for example: + + ```js title="app.js" + console.log(Math.tan(45)); // 1.6197751905438615 + ``` + +- `Math.log(x)`: Returns the natural logarithm (base E) of a number. + + for example: + + ```js title="app.js" + console.log(Math.log(2)); // 0.6931471805599453 + ``` + +- `Math.exp(x)`: Returns the value of E^x. + + for example: + + ```js title="app.js" + console.log(Math.exp(2)); // 7.3890560989306495 + ``` + +- `Math.atan(x)`: Returns the arctangent of a number. + + for example: + + ```js title="app.js" + console.log(Math.atan(1)); // 0.7853981633974483 + ``` + +- `Math.acos(x)`: Returns the arccosine of a number. + + for example: + + ```js title="app.js" + console.log(Math.acos(0)); // 1.5707963267948966 + ``` + +- `Math.asin(x)`: Returns the arcsine of a number. + + for example: + + ```js title="app.js" + console.log(Math.asin(1)); // 1.5707963267948966 + ``` + +- `Math.atan2(y, x)`: Returns the arctangent of the quotient of its arguments. + + for example: + + ```js title="app.js" + console.log(Math.atan2(1, 1)); // 0.7853981633974483 + ``` + +- `Math.cosh(x)`: Returns the hyperbolic cosine of a number. + + for example: + + ```js title="app.js" + console.log(Math.cosh(0)); // 1 + ``` + +- `Math.sinh(x)`: Returns the hyperbolic sine of a number. + + for example: + + ```js title="app.js" + console.log(Math.sinh(0)); // 0 + ``` + +- `Math.tanh(x)`: Returns the hyperbolic tangent of a number. + + for example: + + ```js title="app.js" + console.log(Math.tanh(0)); // 0 + ``` + +:::tip ๐ Note + +The `Math` object is not a constructor. All properties and methods of the `Math` object can be called by using the `Math` object as a namespace. + +::: + +## Conclusion + +In this tutorial, we learned about the `Math` object in JavaScript. We learned about the properties and methods of the `Math` object. We also saw examples of how to use the `Math` object to perform mathematical tasks on numbers. \ No newline at end of file diff --git a/languages-platforms/javascript/mistakes-js.md b/languages-platforms/javascript/mistakes-js.md new file mode 100644 index 0000000..23ff567 --- /dev/null +++ b/languages-platforms/javascript/mistakes-js.md @@ -0,0 +1,207 @@ +--- +id: mistakes-in-js +title: Mistakes in JavaScript +sidebar_label: Mistakes +sidebar_position: 42 +tags: [ JavaScript, Mistakes, Common Mistakes in JavaScript, JavaScript Mistakes, JavaScript Mistakes Tutorial, JavaScript Mistakes Example, JavaScript Mistakes to Avoid, JavaScript Common Mistakes, JavaScript Common Mistakes Tutorial, JavaScript Common Mistakes Example ] +description: "In this tutorial, we will learn about the common mistakes in JavaScript that developers make and how to avoid them. We will learn about the common pitfalls, bugs, and errors in JavaScript code and how to fix them." +--- + +JavaScript is a powerful and flexible language, but it is also easy to make mistakes while writing code. In this tutorial, we will learn about the common mistakes in JavaScript that developers make and how to avoid them. By understanding these mistakes and pitfalls, you can write better and more reliable JavaScript code. + +## Common Mistakes in JavaScript + +### Misunderstanding Variable Scope + +One common mistake in JavaScript is misunderstanding variable scope. JavaScript has function-level scope, which means that variables declared inside a function are only accessible within that function. If you declare a variable without the `var`, `let`, or `const` keyword, it becomes a global variable and is accessible throughout the entire script. This can lead to unintended side effects and bugs in your code. + +