JavaScript

10 best JavaScript practices.js

/*
	Number 1 : use '===' over '=='
*/
true == 'true' // bad
true === 'true' // good

/* 
	Number 2 : use 'let' over 'var'
*/
var dog = 'Dexter' // bad
let dog = 'Dexter' // good

/* 
	Number 3 : use 'const' as much as you can
*/
let pi = 3.1415 // bad
const PI = 3.1415 // good

/*
	Number 4 : use function expressions
*/
// Method 1
let sum = function(a, b) {
  return a + b;
};

// Method 2 - [Arrow Function]
let sum = (a, b) => {
  return a + b;
};

// Method 3 - [Inline]
let sum = (a, b) => a + b;

// Method 4 - [Annonymous Function]
(() => {
  console.log("annonymous functions")
})();

/*
	Number 5 : use Pure Functions
*/
oddNumbers = [1, 3, 5, 7, 9];

// bad
const doubleArrayValuesImpure = (numbers) => {
  for (const number in numbers) {
    numbers[number] = numbers[number] * 2;
  }
  return numbers
}

console.log(doubleArrayValuesImpure(oddNumbers)); // => [ 2, 6, 10, 14, 18 ]
console.log(doubleArrayValuesImpure(oddNumbers)); // => [ 4, 12, 20, 28, 36 ]

// good
const doubleArrayValuesPure = (numbers) => numbers.map(number => number * 2);

console.log(doubleArrayValuesPure(oddNumbers)); // => [ 2, 6, 10, 14, 18 ]
console.log(doubleArrayValuesPure(oddNumbers)); // => [ 2, 6, 10, 14, 18 ]

/*
	Number 6 : name things properly
*/
let n = "Lucas" // bad
let name = "Lucas" // good

/*
	Number 7 : use destructing
*/
const PERSON = {
  name: "Lucas Ferreira",
  city: "Recife",
  area: "IT"
}

// bad
let name = PERSON.name;
let city = PERSON.city;
let area = PERSON.area;

// good
let { name, city, area } = PERSON;

console.log(`${name} lives in ${city} and works in ${area}`)
// => Lucas Ferreira lives in Recife and works in IT

/*
	Number 8 : use functions for everything
*/

// bad
let number1 = 2;
let number2 = 4;
let sum = number1 + number2;

// good
const SUM = (number1, number2) => number1 + number2; // SUM(2, 5) => 7

/*
	Number 9 : remove decimals with bitwise NOT operator
*/
Math.floor(Math.random() * 1000) // bad
~~ (Math.random() * 1000) // good

/*
	Number 10 : delete an array easily
*/
let evenNumbers = [0, 2, 4, 6, 8];
evenNumbers.length = 0

// Reference:
// https://blog.hrithwik.me/10-best-javascript-practices-recommended-by-top-developers

JavaScript Naming Conventions.js

// Use camelCase for [variables, functions and methods] and PascalCase for a [class].

// Constants: use UPPERCASE
const YEAR = 2021;

// Variables: 
let firstName = "Lucas";
let lastName = "Ferreira";
let position = "QA";

// Functions: prefix with verbs like add, fetch, get, post, push, etc.
function getEmployee(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

console.log(getEmployee(firstName, lastName)) // => Lucas Ferreira

// ------------------ //

// Private variable starts with underscore [_isActive]. Tip: for booleans prefix with `is`, `are`, `has`.
let employee = {
  _isActive: true,
  get status() {
    return this._isActive;
  },
  set status(value) {
    this._status = value;
  }
}

// Class
class EmployeeProfile {
  constructor(employee, position, status) {
    this.employee = employee;
    this.position = position;
    this.status = status;
  }
  
  // Methods
  getInfo() {
    let employeeStatus = this.status === true ? 'works' : 'worked';
    return `${this.employee} ${employeeStatus} as ${this.position} in ${YEAR}`;
  }
}

let employeeProfile = new EmployeeProfile(getEmployee(firstName, lastName), position, employee.status);
console.log(employeeProfile.getInfo()) // => Lucas Ferreira works as QA in 2021

// Let's set status to false
let employeeProfile = new EmployeeProfile(getEmployee(firstName, lastName), position, employee.status = false);
console.log(employeeProfile.getInfo()) // => Lucas Ferreira worked as QA in 2021

// P.S.: JavaScript variables are case-sensitive.