xpertvibe.com

Search

JavaScript CheetSheet for Every Coder

Here’s a concise JavaScript cheatsheet covering key concepts, syntax, and functionalities in JavaScript.

1. Variables

javascript
let x = 10; // Block-scoped {} variable

const y = 20; // Block-scoped{},
constant variable
var z = 30; // Function-scoped variable

2. Data Types

there are two types of data types

  • Primitive Types: Number, String, Boolean, null, undefined, Symbol, BigInt
  • Non-Primitive Types: Object, Array, Function
let num = 42; // Number
let str = "Hello, world!"; // String
let bool = true; // Boolean
let undef; // Undefined
let nul = null; // Null
let sym = Symbol("sym"); // Symbol
let bigInt = 12345678901234567890n; // BigInt
let obj = { key: "value" }; // Object
let arr = [1, 2, 3]; // Array
let func = function() {}; // Function

3. Operators

  • Arithmetic: +, -, *, /, %, **
  • Assignment: =, +=, -=, *=, /=
  • Comparison: ==, ===, !=, !==, >, <, >=, <=
  • Logical: &&, ||, !
  • Bitwise: &, |, ^, ~, <<, >>, >>>

4. Control Structures

// If-Else
if (condition) {
// code
} else if (anotherCondition) {
// code
} else {
// code
}
// Switch
                   switch (expression) {
                   case value1:
                             // code
                    break;
                   case value2:
                            // code
                     break;
                     default:
                              // code
}// For Loop
         for (let i = 0; i < 10; i++) {
            // code
}

// While Loop
       while (condition) {
         // code
}

// Do-While Loop
          do {
               // code
} while (condition);

5. Functions

// Function Declaration
 function add(a, b) {
return a + b;
}
// Function Expression
       const subtract = function(a, b) {
          return a – b;
};// Arrow Function
          const multiply = (a, b) => a + b;

6. Objects

let person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Accessing properties
console.log(person.firstName); // John
console.log(person[“lastName”]); // Doe// Methods
console.log(person.fullName()); // John Doe

7. Array

let colors = ["red", "green", "blue"];

// Accessing elements
console.log(colors[0]); // red

// Array Methods
colors.push(“yellow”); // Add to end
colors.pop(); // Remove from end
colors.unshift(“purple”); // Add to beginning
colors.shift(); // Remove from beginning

// Iterating over arrays
for (let color of colors) {
console.log(color);
}

colors.forEach(color => console.log(color));

8. ES6 Features

  • Template Literal
let name = "John";
let greeting = `Hello, ${name}!`; // Hello, John!
  • Destructuring
// Array Destructuring
let [a, b] = [1, 2];
// Object Destructuring
let { firstName, lastName } = person;
  • Spread Operator
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
let obj1 = { a: 1, b: 2 };
let obj2 = { …obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

9. Promises and Async/Await

// Promise
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Success!");
} else {
reject("Failure!");
}
});
promise
.then(result => console.log(result))
.catch(error => console.log(error));// Async/Await
async function fetchData() {
try {
let response = await fetch(‘https://api.example.com/data’);
let data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}

fetchData();

10. DOM Manipulation

// Selecting Elements
let element = document.getElementById('myElement');
let elements = document.querySelectorAll('.myClass');
// Modifying Elements
element.innerHTML = “Hello, World!”;
element.style.color = “blue”;
element.classList.add(‘newClass’);
element.setAttribute(‘data-custom’, ‘value’);// Event Listeners
element.addEventListener(‘click’, () => {
alert(‘Element clicked!’);
});

This cheatsheet provides a quick overview of fundamental JavaScript concepts and syntax. Use it as a reference guide while coding!

Facebook
Twitter
LinkedIn

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top