Js Cheat Sheet

admin Avatar

 

JavaScript is a versatile and essential programming language for web development. 💡 Here’s a beginner-friendly overview:

️ What is JavaScript?

JavaScript is a scripting language that enables interactivity and dynamic behavior on websites. It’s used to create everything from interactive forms to animated graphics.

️ Why Learn JavaScript?

It’s the language of the web, allowing you to make your websites come alive.

High demand in the job market with opportunities for front-end and back-end development.

A vibrant community and countless resources for learning.

️ Getting Started:

Start with the basics: variables, data types, and operators.

Learn about functions, which are building blocks of JavaScript code.

Understand control flow with conditional statements and loops.

️DOM Manipulation:

Explore the Document Object Model (DOM) to interact with HTML and CSS.

Dynamically update webpage content and respond to user actions.

Frameworks and Libraries:

Discover popular frameworks like React, Angular, or Vue for building powerful web applications.

Utilize libraries like jQuery for simplifying common tasks.

Resources for Learning:

Online courses like Codecademy, freeCodeCamp, and MDN Web Docs.

Books like “Eloquent JavaScript” by Marijn Haverbeke.

Practice by building small projects and collaborating with others.

️Stay Curious and Practice:

The key to mastering JavaScript is practice.

Join coding communities, attend meetups, and participate in open-source projects.

Javascript

Console

//  Hello world!

console.log(‘Hello world!’);

Numbers

let amount = 6;

let price = 4.99;

Variables

let x = null;

let name = “Rohit”;

const found = false;

// => Rohit, false, null

console.log(name, found, x);

var a;

console.log(a); // => undefined

Strings

let single = ‘Wheres my bandit hat?’;

let double = “Wheres my bandit hat?”;

// => 21

console.log(single.length);

Arithmetic Operators

5 + 5 = 10     // Addition

10 – 5 = 5     // Subtraction

5 * 10 = 50    // Multiplication

10 / 5 = 2     // Division

10 % 5 = 0     // Modulo

String Interpolation

let age = 18;

// String concatenation

‘Rohit is ‘ + age + ‘ years old.’;

// String interpolation

`Rohit is ${age} years old.`;

let Keyword

let count;

console.log(count); // => undefined

count = 10;

console.log(count); // => 10

const Keyword

const numberOfColumns = 4;

// TypeError: Assignment to constant…

numberOfColumns = 8;

JavaScript Conditionals

if Statement

const isMailSent = true;

if (isMailSent) {

  console.log(‘Mail sent to recipient’);

}

Ternary Operator

var x=1;

// => true

result = (x == 1) ? true : false;

Operators

true || false;       // true

10 > 5 || 10 > 20;   // true

false || false;      // false

10 > 100 || 10 > 20; // false

Logical Operator &&

true && true;        // true

1 > 2 && 2 > 1;      // false

true && false;       // false

4 === 4 && 3 > 1;    // true

Comparison Operators

1 > 3                // false

3 > 1                // true

250 >= 250           // true

1 === 1              // true

1 === 2              // false

1 === ‘1’            // false

Logical Operator !

let lateToWork = true;

let oppositeValue = !lateToWork;

// => false

console.log(oppositeValue);

Nullish coalescing operator ??

null ?? ‘I win’;           //  ‘I win’

undefined ?? ‘Me too’;     //  ‘Me too’

false ?? ‘I lose’          //  false

0 ?? ‘I lose again’        //  0

” ?? ‘Damn it’            //  ”

else if

const size = 10;

if (size > 100) {

  console.log(‘Big’);

} else if (size > 20) {

  console.log(‘Medium’);

} else if (size > 4) {

  console.log(‘Small’);

} else {

  console.log(‘Tiny’);

}

// Print: Small

switch Statement

const food = ‘salad’;

switch (food) {

  case ‘oyster’:

    console.log(‘The taste of the sea’);

    break;

  case ‘pizza’:

    console.log(‘A delicious pie’);

    break;

  default:

    console.log(‘Enjoy your meal’);

}

== vs ===

0 == false   // true

0 === false  // false, different type

1 == “1”     // true,  automatic type conversion

1 === “1”    // false, different type

null == undefined  // true

null === undefined // false

‘0’ == false       // true

‘0’ === false      // false

//The == just check the value, === check both the value and the type.

 How to Write less js code ?

As developers, we all know that JavaScript plays a significant role in modern web development. However, sometimes we find ourselves drowning in an overwhelming amount of code. The good news is that we can optimize our JavaScript code and make it more concise, readable, and maintainable. Here are a few tips to help you write less JavaScript:

Leverage ES6 features: Take advantage of the latest JavaScript features like arrow functions, template literals, destructuring assignments, and the spread operator. These features can significantly reduce the amount of code you need to write and make it more expressive.

Use utility libraries: Instead of reinventing the wheel, consider using utility libraries like Lodash or Underscore.js. These libraries provide handy functions that can help you perform common operations with fewer lines of code.

Embrace functional programming:
Functional programming principles can help you write more concise and reusable code. Use higher-order functions like map, filter, and reduce to manipulate data, and avoid mutable variables whenever possible.

Modularize your code: Break down your code into smaller, modular components. This not only makes your code more organized but also allows you to reuse and maintain code more efficiently. Consider using tools like webpack or Rollup to bundle your modules.

Take advantage of object-oriented programming: Use object-oriented programming (OOP) concepts like encapsulation, inheritance, and polymorphism to write cleaner and more maintainable code. OOP principles can help you reduce code duplication and improve code reusability.

Optimize your algorithms and data structures: Sometimes, the best way to write less code is to optimize the algorithms and data structures you use. By choosing efficient algorithms and data structures, you can achieve the same functionality with fewer lines of code.

Embrace declarative programming:
Declarative programming focuses on describing what you want to achieve rather than how to achieve it. Take advantage of declarative programming paradigms like declarative rendering in frameworks like React or Vue.js to reduce the amount of imperative code you need to write.


Remember, writing less code doesn’t mean sacrificing quality or functionality. By following these tips, you can write cleaner, more concise JavaScript code that is easier to read, maintain, and understand.

Tagged in :

admin Avatar

More Articles & Posts