Javascriptreact

cotrTypeConvert

JavaScript Type Conversion

// JavaScript Type Conversion:

// Implicit conversions (JavaScript performs automatically):
// - Can be unpredictable, especially with loose equality (==).

// Explicit conversions:
// - Number(variable)  // Converts to number
// - String(variable)  // Converts to string
// - Boolean(variable)  // Converts to boolean
// - parseInt(string)  // Converts string to integer
// - parseFloat(string)  // Converts string to floating-point number

// Note:
// - Be aware of implicit conversions and use explicit conversions when necessary for clarity and control.

cotrInterpolate

JavaScript Interpolate String

let text = `Hello, ${1:name}!`;

cotrFunc

JavaScript Function

function ${2:myFunction}(${3:parameters}) {
  ${4:// Your code here}
}

cotrVarMapAlt

JavaScript Create Map Variable

let ${1:myMap} = new Map([
  [${2:'key1'}, ${3:'value1'}],
  [${4:'key2'}, ${5:'value2'}]
]);

cotrTernary

JavaScript Ternary Operator

${1:condition} ? ${2:trueValue} : ${3:falseValue}

cotrEntry

JavaScript Entry Point

// JavaScript Entry Point
// To run this program, use: `node filename.js`

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

cotrOperators

JavaScript Mathematical Operators

// JavaScript Mathematical Operators
// Addition: +
// Subtraction: -
// Multiplication: *
// Exponentiation: **
// Division: /
// Modulus (Remainder): %
// Increment: ++
// Decrement: --
// Assignment: =
// Addition assignment: +=
// Subtraction assignment: -=
// Multiplication assignment: *=
// Division assignment: /=
// Modulus assignment: %=

cotrEqual

JavaScript Equal To

===

cotrTypeCheck

JavaScript Type Check

typeof ${1:variable}

cotrTypesBool

JavaScript Boolean Type

let flag = Boolean($1);

cotrFuncSyntax

JavaScript Function Syntax

// JavaScript Function Syntax
// Basic function: function functionName(parameters) { ... }
// Function with arguments: function functionName(arg1, arg2, ...) { ... }
// Function with named arguments (using object destructuring): function functionName({arg1, arg2, ...}) { ... }

cotrOperatorsBool

JavaScript Boolean Operators

// JavaScript Boolean Operators
// Logical AND: &&
// Logical OR: ||
// Logical NOT: !
// Equality: ==
// Strict Equality: ===
// Inequality: !=
// Strict Inequality: !==
// Greater than: >
// Less than: <
// Greater than or equal to: >=
// Less than or equal to: <=

cotrTypesMap

JavaScript Map Type

new Map()

cotrConcat

JavaScript Concatenate String

let text = 'Hello, ' + ${1:name} + '!';

cotrVarTyped

JavaScript Create Typed Variable

let ${1:myVar} = $2; // Note: JavaScript is dynamically typed.

cotrPrint

JavaScript Print

console.log(${1:'Your message here'});

cotrIfElse

JavaScript If Else Statement

if (${1:condition}) {
  ${2:// Your code here}
} else if (${3:condition}) {
  ${4:// Your code here}
} else {
  ${5:// Your code here}
}

cotrVarStatic

JavaScript Static Variable

static ${3:myStaticVar} = ${4:value};

// Access the static variable
// MyClass.${3:myStaticVar}

cotrGenMap

JavaScript Generate Object Map

const ${1:myMap} = Object.fromEntries(
  Array.from({ length: ${2:length} }, (_, index) => [`key${index}`, `value${index}`])
);

cotrFuncArgs

JavaScript Function Args

// In JavaScript, functions can have arguments with default values.
function ${2:myFunction}(${3:arg1}, ${4:arg2} = ${5:defaultValue}) {
  ${6:// Your code here}
}

cotrLambda

JavaScript Lambda

const ${1:myLambda} = (${2:parameters}) => ${3:expression};

cotrGenList

JavaScript Generate Array

const ${1:myList} = Array.from({ length: ${2:length} }, (_, index) => ${3:'item'} + index);

cotrNotEqual

JavaScript Not Equal To

!==

cotrTypesInt

JavaScript Int Type

let integer = Math.floor($1);

cotrTypesList

JavaScript List Type

[]

cotrPrintMulti

JavaScript Print Multi

console.log(`
${1:Line 1}
${2:Line 2}
${3:Line 3}
`);

cotrTryCatch

JavaScript Try Catch

try {
  ${1:// Your code here}
} catch (${2:exception}) {
  ${3:// Your code here}
}

cotrTypes

JavaScript Types

$BLOCK_COMMENT_START
JavaScript is a dynamically typed language. It does not have static types.

Types in JavaScript include:
- Number: for both integers and floating-point numbers
- String: for text
- Boolean: for true/false values
- Object: for key-value pairs
- Array: for ordered lists
- Function: for executable functions
- Symbol: for unique identifiers
- null: for absence of value
- undefined: for uninitialized variables
$BLOCK_COMMENT_END

cotrTypesNum

JavaScript Number Type

let number = $1;

cotrVarDate

JavaScript Create Date Variable

let ${1:myDate} = new Date(${2:year}, ${3:month} - 1, ${4:day});

cotrClass

JavaScript Class

class ${1:MyClass} {
  ${2:// Your code here}
}

cotrIf

JavaScript If Statement

if (${1:condition}) {
  ${2:// Your code here}
}

cotrVar

JavaScript Create Variable

let ${1:myVar} = $2;

cotrVarNullable

JavaScript Create Nullable Variable

let ${1:myVar} = null;

cotrWhileLoop

JavaScript While Loop

while (${1:condition}) {
  ${2:// Your code here}
}

cotrFuncArrow

JavaScript Arrow Function

const ${2:myFunction} = (${3:parameters}) => {
  ${4:// Your code here}
};

cotrFuncAnon

JavaScript Anonymous Function

function(${1:parameters}) {
  ${2:// Your code here}
};

cotrTypesDate

JavaScript Date Type

Date

cotrNow

JavaScript Date Now

new Date()

cotrVarSyntax

Variable Declaration Syntax

// JavaScript Variable Declaration Syntax:

// - var: (Scope: Function or Global)
//   - Can be reassigned and redeclared within its scope.
//   - Use with caution due to potential scoping issues.

// - let: (Scope: Block)
//   - Can be reassigned but not redeclared within its scope.
//   - Preferred for variables that need to be reassigned.

// - const: (Scope: Block)
//   - Cannot be reassigned or redeclared.
//   - Use for values that should remain constant.

// Note:
// - Use 'let' for most variable declarations.
// - Use 'const' for values that should not change.

cotrConst

JavaScript Create Constant

const ${1:myConst} = $2;

cotrSwitch

JavaScript Switch Statement

switch (${1:variable}) {
  case ${2:value1}:
    ${3:// Your code here}
    break;
  case ${4:value2}:
    ${5:// Your code here}
    break;
  default:
    ${6:// Your code here}
}

cotrVarMultiString

JavaScript Create Multi-Line String Variable

let ${1:myString} = `
${2:Line 1}
${3:Line 2}
${4:Line 3}
`;

cotrFuncArgsNamed

JavaScript Function Named Args

function ${2:myFunction}({${3:arg1}, ${4:arg2}}) {
  ${5:// Your code here}
}

cotrTypesDynamic

JavaScript Dynamic Type

// There is no specific syntax for declaring a variable with a dynamic type in JavaScript.

cotrVarString

JavaScript Create String Variable

let ${1:myString} = "${2:Your string here}";

cotrVarMap

JavaScript Create Map Variable (Object)

let ${1:myObject} = {
  ${2:'key1'}: ${3:'value1'},
  ${4:'key2'}: ${5:'value2'}
};

cotrForOfLoop

JavaScript For…Of Loop

for (const item of ${1:iterable}) {
  ${2:// Your code here}
}

cotrJSXMultiComment

JSX Multi-Line Comment

{/*
 * ${1:Your comment here}
 */}

cotrTypeCompare

JavaScript Type Comparison

// Check if two variables have the same type:
if (typeof ${1:variable1} === typeof ${2:variable2}) {
  // Your code here
}

cotrTypesString

JavaScript String Type

let text = "John Doe";

cotrVarNum

JavaScript Create Number Variable

let ${1:myNumber} = ${2:0};

cotrVarBool

JavaScript Create Boolean Variable

let ${1:myBoolean} = ${2:true};

cotrThrow

JavaScript Throw Exception

throw new Error('Your message here');

cotrInfo

JavaScript Info

Typing: Dynamically typed
Paradigm: Multi-paradigm: event-driven, functional, imperative, prototype-based
Compilation: Interpreted or just-in-time compiled
Concurrency: Event loop model with support for asynchronous programming using callbacks, promises, and async/await

cotrTypesBoolTrue

JavaScript Boolean True

true;

cotrNull

JavaScript Null Type

null

cotrStructure

JavaScript with React Project Structure (High-Level)

// Recommended High-Level JavaScript with React Project Structure:

// - public/
//   - Contains the HTML file and static assets like images and fonts.

// - src/
//   - App.jsx: The root React component.
//   - index.tsx: Entry point that renders the React app.
//   - /components/
//     - Reusable UI components.
//   - /containers/
//     - Components connected to the Redux store or context providers.
//   - /hooks/
//     - Custom React hooks.
//   - /pages/
//     - Components representing pages or routes.
//   - /utils/
//     - Utility functions and helpers.
//   - /services/
//     - API calls, data fetching, and other services.
//   - /store/
//     - Redux store, actions, and reducers.
//   - /styles/
//     - CSS/SCSS files or styled-components.

// - .env files
//   - Environment-specific configurations.

// - package.json
//   - Project metadata and dependencies.

// Note:
// - This structure is common for larger React applications and can be scaled according to the project size.
// - Smaller projects might not need separate directories for hooks, services, or containers.

cotrTypesBoolFalse

JavaScript Boolean False

false;

cotrVarList

JavaScript Create Array Variable

let ${1:myList} = [${2:'item1'}, ${3:'item2'}];

cotrForLoop

JavaScript For Loop

for (let ${1:i} = 0; $1 < ${2:10}; $1++) {
  // Your code here
}

cotrJSXComment

JSX Comment

{/* ${1:Your comment here} */}