JavaScript Best Practices

JavaScript Tricks

Number to string / String to number

Amateur:

let num = 15;
let s = num.toString(); // number to string
let n = Number(s); // string to number

Pro:

let num = 15;
let s = num + ''; // number to string
let n = + s; // string to number

The Ternary Operator

Amateur:

let hungry = true;
let eat;
if (hungry) {
  eat = 'yes';
} else {
  eat = 'no';
}

Pro:

let hungry = true;
let eat = hungry ? 'yes' : 'non';

Dynamic Properties in Objects

Amateur:

let dynamic = 'value';
let user = {
  id: 1
};
user[dynamic] = 'other value';

Pro:

let dynamic = 'value';
let user = {
  id: 1,
  [dynamic] = 'other value'
};

Array to Object

Amateur:

let arr = ['value1', 'value2', 'value3'];
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
  if (arr[i] !== undefined) {
    arrObject[i] = arr[i];
  }
}

Pro:

let arr = ['value1', 'value2', 'value3'];
let arrObject = {...arr};

Removing Duplicates

Amateur:

let array = [100, 23, 23, 23, 23, 67, 45];
let outputArray = [];
let flag = false;
for (let j = 0; j < array.legth; j++) {
  for (let k = 0; k < outputArray.length; k++) {
    if (array[j] == outputArray[k]) {
      flag = true;
    }
  }
  if (flag == false) {
    outputArray.push(array[j]);
  }
  flag = false;
}
// outputArray = [100, 23, 67, 45]

Pro:

let array = [100, 23, 23, 23, 23, 67, 45];
let outputArray = Array.from(new Set(array));
// outputArray = [100, 23, 67, 45]

Populating an Array

Amateur:

for (let i = 0; i < arraysize; i++) {
  filledArray[i] = {'hello': 'goodbye'};
}

Pro:

let filledArray = new Array(arraySize).fill(null).map(() => ({'hello': 'goodbye'}));

Object to Array

Amateur:

let numbers = {
  one: 1,
  two: 2,
};
let keys = [];
for (let number in numbers) {
  if (numbers.hasOwnProperty(number)) {
    keys.push(number);
  }
}
// key = ['one', 'two']

Pro:

let numbers = {
  one: 1,
  two: 2,
}
let key = Object.keys(numbers); // key = ['one', 'two']
let value = Object.values(numbers); // value = [1, 2]
let entry = Object.entries(numbers); // entry = [['one': 1], ['two': 2]]

Shuffle an Array

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

let arr = [1, 2, 3, 4, 5];
shuffle(arr);

// [3, 1, 5, 4, 2]

Dynamic Property Names

const dynamic = 'website';

var socials = {
  tag: '@js',
  [dynamic]: 'js.com'
};

// {tag: '@js', website: 'js.com'}

Combine Objects

const instagram = {igTag: '@createnextapp'};
const website = {url: 'https://create-next-app.js.org'};

const socials = {...instagram, ...website};

// {igTag: '@createnextapp', url: 'https://create-next-app.js.org'}

Short-Circuit Condition

// Before
if (isFollowing) {
  sayThankYou();
}

// After
isFollowing && sayThankYou();

Flatten an Array

const array = [1, 2, [2, 3, 4], 8];
const newArray = array.flat();

// [1, 2, 2, 3, 4, 8]

Return Shorthand

// Before
function myFunc() {
  foo();
  bar();
  return 1;
}

// After
function myFunc() {
  return foo(), bar, 1;
}

Resize an Array

var array = [1, 2, 3, 4, 5];
array.length = 2;

[1, 2]

Convert to Boolean

const isTrue = !0;
const alsoFalse = !!0;

// true
// typeof isTrue: "boolean"

Filter Unique Values

const array = [1, 1, 2, 3, 6, 6, 3, 1];
const uniqueArray = [... new Set(array)];

// [1, 2, 3, 6]

Convert to String

const val = 5 + '';

// 5
// typeof val: "string"

Convert Float to Int

const int = 19.8 | 0;
// 19
// typeof int: "number"

Convert to Int

let int = "15";
int = +int;

// 15
// typeof int: "number"

Remove Last Digits

const int = 1553 / 10 | 10;
// 155
// typeof int: "number"

Truncate an Array

let array = [0, 1, 2, 3, 4, 5];
array.length = 3;

// [0, 1, 2]