DEV Community

loading...
Cover image for 10 think about JavaScript you should be know

10 think about JavaScript you should be know

chayan profile image chayan999 ・5 min read

Hello programmer's today I will discuss about 10 things that are needed in your daily programming. So let's go talked about that.
Error handling
Error is part of programming life. Sometimes we are going to board and upsert for this error.
Now I will share with you how to handle JavaScript errors.
Error handling, "try...catch"
A try / catch block is basically used to handle errors in JavaScript. You use this when you don't want an error in your script to break your code.
While this might look like something you can easily do with an if statement, try/catch gives you a lot of benefits beyond what an if/else statement can do, some of which you will see below.
try{
//...
}catch(e){
//...
}

A try statement lets you test a block of code for errors.
A catch statement lets you handle that error. For example:
try{
getData() // getData is not defined
}catch(error){
alert(error)
}

This is basically how a try/catch works. You put your code in the try block, and see if there is an error, JavaScript gives the catch statement control and it just does whatever you say. In this case, it alerts you to the error.
After you coding you get any error, try these things. It will help you.Code quality
Code quality e is an important thing in programming life. You write a code in a project. in the future rewrite the code by other developers. If they do not understand what you are coding . It will be very uncomfortable to them.
Now I will is talked about how to you maintain your code quality.
Block scored declarations
Since the inception of the language, JavaScript developers have used var to declare variables. The keyword var has its quirks, the most problematic of those being the scope of the variables created by using it.
var x = 10
if (true) {
var x = 15 // inner declaration overrides declaration in parent scope
console.log(x) // prints 15
}
console.log(x) // prints 15

Since variables defined with var are not block-scoped, redefining them in a narrower scope affects the value of the outer scope.
Arrow functions
Arrow functions are another very important feature introduced recently to JavaScript. They come bearing many advantages. First and foremost, they make the functional aspects of JavaScript beautiful to look at and simpler to write.

let x = [1, 2, 3, 4]
x.map(val => val * 2) // [2, 4, 6, 8]
x.filter(val => val % 2 == 0) // [2, 4]
x.reduce((acc, val) => acc + val, 0) // 10

In all of the above examples the arrow functions, named after the distinctive arrow =>, replace traditional functions with a concise syntax.
Optional chaining
Imagine a deeply nested data structure like this person object here. Consider you wanted to access the first and last name of this person. You would write this in JavaScript like so:
person = {
name: {
first: 'Jony',
last: 'Day',
},
age: 42
}
person.name.first // Jony
person.name.last // Day

Null-ish coalescing
Before introducing the null-ish coalescing operator, JavaScript developers used the OR operator || to fall back to a default value if the input was absent. This came with a significant caveat that even legitimate but falsy values would result in a fallback to the defaults.
function print(val) {
return val ?? 'Missing'
}

print(undefined) // 'Missing'
print(null) // 'Missing'

print(0) // 0
print('') // ''
print(false) // false
print(NaN) // NaN
Logical assignment
Let’s say you want to assign a value to a variable if and only if the value is currently null-ish. A logical way to write this would be like so:
if (x === null || x == undefined) {
x = y
}

If you knew about how short-circuiting works, you might want to replace those 3 lines of code with a more succinct version using the null-ish coalescing operator.
x ?? (x = y) // x = y if x is nullish, else no effect
Coding Style
Naming
Use camelCase for object keys (i.e. "selectors").
Why? We access these keys as properties on the styles object in the component, so it is most convenient to use camelCase.
// bad
{
'bangladesh-district': {
display: 'none',
},
}

// good
{
bangladeshDistrict: {
display: 'none',
},
}

Ordering
Define styles after the component.
We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.

// bad
const styles = {
container: {
display: 'inline-block',
},
};

function MyComponent({ styles }) {
return (
<div {...css(styles.container)}>
Never doubt that a small group of thoughtful, committed citizens can
change the world. Indeed, it’s the only thing that ever has.
</div>
);
}

export default withStyles(() => styles)(MyComponent);

// good
function MyComponent({ styles }) {
return (
<div {...css(styles.container)}>
Never doubt that a small group of thoughtful, committed citizens can
change the world. Indeed, it’s the only thing that ever has.
</div>
);
}

export default withStyles(() => ({
container: {
display: 'inline-block',
},
}))(MyComponent);

Nesting
Leave a blank line between adjacent blocks at the same indentation level.
// bad
{
bigBang: {
display: 'inline-block',
'::before': {
content: "''",
},
},
universe: {
border: 'none',
},
}

`// good
{
bigBang: {
display: 'inline-block',

'::before': {
  content: "''",
Enter fullscreen mode Exit fullscreen mode

},
},`

universe: {
border: 'none',
},
}

Inline
Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality.
Generating themed stylesheets can be expensive, so they are best for discrete sets of styles.

// bad
export default function MyComponent({ spacing }) {
return (
<div style={{ display: 'table', margin: spacing }} />
);
}

// good
function MyComponent({ styles, spacing }) {
return (
<div {...css(styles.periodic, { margin: spacing })} />
);
}

export default withStyles(() => ({
periodic: {
display: 'table',
},
}))(MyComponent);

Comments
Have you ever written a script or a program in the past only to look at it six months later with no idea what's going on in the code? You probably forgot to do what all programmers tend to forget to do: write comments!
When writing code you may have some complex logic that is confusing, this is a perfect opportunity to include some comments in the code that will explain what is going on. Not only will this help you remember it later on, but if you someone else views your code, they will also be able to understand the code (hopefully)!
Another great thing about comments is the ability for comments to remove bits of code from execution when you are debugging your scripts. This lesson will teach you how to create two types of comments in JavaScript: single line comments and multi-line comments.
creating single line comments

// This is a single line JavaScript comment
//document.write("You can't see this!");

creating multi-line comments

<!--
document.write("I have multi-line comments!");
/*document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");
document.write("You can't see this!");*/
//-->

Discussion (0)

Forem Open with the Forem app