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.
