highlight-node.

md 12/3/2019

Typescript/Javascript Convention HighLight

I. Variable
1. Do not using var to declare a variable

// bad
var a = 1;
var b = 2;

// good
// Javascript
const a = 1;
let b = 2;
// Typescript
const a: number = 1;
let b: string = 'Hello';

2. Variables must be defined before using(Define at the top of function or class)

// bad
function getValue(basicValue) {
const ratioA = 1.2;
let newValue = basicValue * ratioA;
const varRatio = 0.85;
newValue *= varRatio;
return newValue;
}

// good
function getValue(basicValue) {
const ratioA = 1.2;
const varRatio = 0.85;
let newValue = basicValue * ratioA;
newValue *= varRatio;
return newValue;
}

3. Variables must be specified data type

// bad
const a = 1;
1/9
highlight-node.md 12/3/2019

// good
const a: number = 1;
let b: string = 'Hello';

4. The variable do not have many data types in the life cycle

// bad
let age = 20;
age = '26';

// good
let age = 20;
age = 26;

5. Using the undefined to assign to a variable instead of null as default value

// bad
let a = null;

// good
let a = undefined;

6. To set/clone an object/array with existed variable. Do not use this way:

// bad
const user: User = {
userId: '0001',
email: 'tunguyenq@gmail.com',
}
const tempUser: User = user;

// good
const user: User = {
userId: '0001',
email: 'tunguyenq@gmail.com',
}
const tempUser: User = {...user};

7. Using destructor operator to access properties/elements of an object/array.

// bad

2/9
highlight-node.md 12/3/2019

const userIds: string[] = ['0001', '0002', '0003'];

const firstUserId: string = userIds[0];
const secondUserId: string = userIds[1]

// good
const userIds: string[] = ['0001', '0002', '0003'];
const [ first, second ] = userIds;

// bad
const user: User = {
userId: '0001',
email: 'tunguyenq@gmail.com',
}
const userId = user.userId;
const userName = user.email;

// good
const user: User = {
userId: '0001',
email: 'tunguyenq@gmail.com',
}
const { userId, email } = user;

II. Control Structure

1. The inner loop statements do not have more than 2(for, foreach, for in, map, while….)

// bad
for(...){
for(...){
for(...){
for(...){
for(){

}
}
}
}
}

// good

for(...){
for(...){

}
}

3/9
highlight-node.md 12/3/2019

2. Using high order function like: map, reduce, find, forEach instead of for statement.

// bad
const products: Product[] = await getProducts();
for(let i = 0; i < products.length; i ++){
// doing something
}

// good
const products: Product[] = await getProducts();
products.forEach(x=> (...));
products.map(x=> (...));
products.some(x=> (...));
products.every(x=> (...));
products.reduce(x=> (...));
products.reduce(x=> (...));
products.find(x=> (...));

3. If else statement must have bracket although just have only one statement.

// bad
if (test)
return false;

// good
if (test) {
return false;
}

4. The inner Decision statement(IF ELSE) do not have more than 4.

// bad
if(condtionA){
if(conditionB){
if(conditionC){
if(conditionD){
if(conditionHell){
// Holy...
}
}
}
}
}

// good
if(conditionA){

4/9
highlight-node.md 12/3/2019

if(conditionB){
if(conditionC){
if(conditionFinal){
// That's enough, Do not use "if" anymore :(
}
}
}
}

5. Decision statement(Switch... case) must be included case default

// bad
switch (foo) {
case 1:
const x = 1;
break;
case 2:
const y = 2;
break;
}

// good
switch (foo) {
case 1:
const x = 1;
break;
case 2:
const y = 2;
break;
default:
const x = 3;
break;
}

III. FUNCTION
1. Avoid to override arguments in function.

// bad
function getValue(basicValue) {
const ratioA = 1.5;
basicValue *= ratioA;
return basicValue;
}

// good
function getValue(basicValue) {

5/9
highlight-node.md 12/3/2019

const ratioA = 1.5;

const newValue *= ratioA;
return newValue;
}

2. Using arrow function for asynchronous task.

// bad
const userIds = ['0001', '0002', '0003'];
userIds.map(function(x){
// ...
})

// good
const userIds = ['0001', '0002', '0003'];
userIds.map((x) => {
// ...
})

3. Function must be returned the same data type in any case.

// bad
function getUserStatus(userId) {
// do something
if (status) {
return 'true';
}
return false;
}

// good
function getUserStatus(userId) {
// do something
if (status) {
return true;
}
return false;
}

4. The function just only do one task.

// bad
function getUserName(userId){
// ...
return {
usersAge,
6/9
highlight-node.md 12/3/2019

usersName
}

}
// good
function getUsersByAge(){
// ...
return usersByAge;

}
function getUsersByGender(){
return usersByGender;
}

5. Function has arguments with default values which are always at the end of list.

// bad
function getUsers(age = 18, gender){
const users = ...;
return users;
}

// good
function getUsers(gender, age = 18){
const users = ...;
return users;
}

IV. OTHERS
1. Using === and !== operators instead of == and !=

// bad
if(a == b){
// TODO:
}

if(a =!){
// TODO:
}

// good
if(a === b){
// TODO:
}

if(a !==){

7/9
highlight-node.md 12/3/2019

// TODO:
}

2. Using promise, async await instead of jquery’s Deferred

// bad
function getName(userId){
let deferred = $.Deferred();
// doing something
return deferred.promise();
}

// good
function getName(userId) {
let promise = new Promise((resolve, reject)=>{
if(userId){
resolve();
}else{
reject();
}
})
return promise;
}
async function getName(userId){
const userName = await queryDb(userId);
return userName;
}

3. Must be declared resolve and reject case when using promise.

// bad
new Promise((resolve, reject) => {
if (ok) {
resolve(result);
}
})

// good
new Promise((resolve, reject) => {
if (ok) {
resolve(result);
}
else {
reject(error)
}
})

8/9
highlight-node.md 12/3/2019

4. The code of Logic/business rules do not in same file with styles

// bad
const Calendar = React.memo(props => {
const [count, setCount] = useState(0);
return <div style={{height : '100px'}}>{count}</div>
})

5. Need to clear setTimeout or setInterval before unmount

// good
const Calendar = React.memo(props => {
const [count, setCount] = useState(0);
let timerCount = null;
useEffect(()=>{
timerCount = setInterval(()=>{
setCount(count++)
},1000)
return () => {
clearInterval(timerCount);
}
}, [])
return <div>{count}</div>
})

9/9