10 Clean code examples (Javascript).

Ibeh Ubachukwu — Sun, 17 Jan 2021 23:46:39 +0000

1. Assigning a value to the same thing conditionally using ternary operators.

❌  
a > b ? foo = 'apple' : foo = 'ball'; 

✔️  
foo = a > b ? 'apple' : 'ball';

2. Assigning the same value to a specific object property conditionally.

❌  
c > d ? a.foo = 'apple' : a.bar = 'apple';

✔️  
a = { [c > d ? 'foo' : 'bar']: 'apple' };

3. Exporting multiple variables

❌ 
export const foo;
export const bar;
export const kip;

✔️ 
export const foo, bar, kip;

4. Declaring and assigning variables from object properties.

❌  
const a = foo.x, b = foo.y;

✔️
const { ['x']: a, ['y']: b } = foo;

5. Declaring and assigning variables from array indexes.

❌  
let a = foo[0], b = foo[1];

✔️
let [a, b] = foo;

6. Getting multiple elements from the DOM.

❌  
const a = document.getElementById('a'),
b = document.getElementById('b'),
c = document.getElementById('c');
d = document.getElementById('d');

✔️
const elements = {};
['a', 'b', 'c', 'd'].forEach(item => elements = { 
  ...elements, 
  [item]: document.getElementById(item) 
});
const { a, b, c, d } = elements;

/*
For this to work your elements ID's must be 
able to be valid Javascript variable names
and the names of the variables in which you store
your elements have to match with that elements' ID.
This is good for naming consistency & accesibility.
*/

7. Use logical operators for simple conditionals.

❌  
if (foo) {
  doSomething();
}

✔️
foo && doSomething();

8. Passing parameters conditionally.

❌  
if(!foo){
  foo = 'apple';
}
bar(foo, kip);

✔️
bar(foo || 'apple', kip);

9. Dealing with lots of 0`s.

❌  
const SALARY = 150000000,
TAX = 15000000;

✔️
const SALARY = 15e7,
TAX = 15e6;

10. Assigning the same thing to multiple variables.

❌  
a = d;
b = d;
c = d;

✔️
a = b = c = d;

Bonus⭐ (A deugging tip)

Debugging with console.log() can be a pain having to write it
over and over again. You can shorten it by object destructuring
assignment.

const { ['log']: c } = console;
c("something");

Now Instead of having to write out console.log()
you can just write c() which is easier to write for
faster debugging.

Thanks for reading!🎉.

View my github

DEV Community: Ibeh Ubachukwu

10 Clean code examples (Javascript).

1. Assigning a value to the same thing conditionally using ternary operators.

2. Assigning the same value to a specific object property conditionally.

3. Exporting multiple variables

4. Declaring and assigning variables from object properties.

5. Declaring and assigning variables from array indexes.

6. Getting multiple elements from the DOM.

7. Use logical operators for simple conditionals.

8. Passing parameters conditionally.

9. Dealing with lots of 0`s.

10. Assigning the same thing to multiple variables.

Bonus⭐ (A deugging tip)

Thanks for reading!🎉.