featured

JavaScriptCopied!

// damn class components are such a chore to write now
import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  greet() {
    alert(`Hi, I'm ${this.props.name}!`);
  }

  // remember render()?
  render() {
    return (
      <button onClick={this.greet.bind(this)}>Click me</button>
    );
  }
}

export default MyComponent;

JavaScriptCopied!

class Person {
  props = { name: 'Tari' };

  greet() {
    console.log(`Hi, I'm ${this.props.name}!`);
  }
}

const person = new Person();

person.greet();

JavaScriptCopied!

class Person {
  props = { name: 'Tari' };

  greet() {
    console.log(`Hi, I'm ${this.props.name}!`);
  }
}

// reassign to another variable:
const greet = Person.prototype.greet;

// ❌ bad idea
greet();

JavaScriptCopied!

class Person {
  constructor(props) {
    this.props = props;
  }

  greet() {
    console.log(`Hi, I'm ${this.props.name}`);
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

greet.bind(person)();

greet.call(person);

JavaScriptCopied!

class Person {
  constructor(props) {
    this.props = props;
  }

  greet(name, favColor) {
    console.log(
      `Hi ${name}, I'm ${this.props.name} and I love ${favColor}`
    );
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

// bind(): normal argument passing to binded function
greet.bind(person)('Mike', 'blue🔵');

// call(): pass as more arguments
greet.call(person, 'Mike', 'blue🔵');

JavaScriptCopied!

// the same thing
greet.bind(person)('Mike', 'blue🔵');

greet.bind(person, 'Mike', 'blue🔵')();

JavaScriptCopied!

class Person {
  constructor(props) {
    this.props = props;
  }

  greet() {
    console.log(`Hi, I'm ${this.props.name}`);
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

greet.call(person); // Hi, I'm Tari

greet.apply(person); // Hi, I'm Tari

JavaScriptCopied!

class Person {
  constructor(props) {
    this.props = props;
  }

  greet(name, favColor) {
    console.log(
      `Hi ${name}, I'm ${this.props.name} and I love ${favColor}`
    );
  }
}

const person = new Person({ name: 'Tari' });

const greet = Person.prototype.greet;

//💡call() -- pass arguments with comma separated
greet.call(person, 'Mike', 'blue🔵'); // Hi, I'm Tari

//💡apply() -- pass arguments with array
greet.apply(person, ['Mike', 'blue🔵']); // Hi, I'm Tari

JavaScriptCopied!

// ❌ Bad: negative name
const isNotVisible = doStuff();
const isDisabled = doStuff();
const isNotActive = doStuff();
const hasNoAccess = doStuff();

// ❌ Double negation
console.log(!isNotVisible);
console.log(!isDisabled);
console.log(!isNotActive);
console.log(!hasNoAccess);

JavaScriptCopied!

// ✅ Good: positive name
const isVisible = doStuff();
const isEnabled = doStuff();
const isActive = doStuff();
const hasAccess = doStuff();

// ✅ Clear and readable
console.log(isVisible);
console.log(isEnabled);
console.log(isActive);
console.log(hasAccess);

JavaScriptCopied!

const isAllowed = checkSomething();
// ❌ Bad
if (!isAllowed) {
  handleError();
} else {
  // ❌ double negation!
  handleSuccess();
}

JavaScriptCopied!

const isAllowed = checkSomething();
// ✅ Fix: invert the if
if (isAllowed) {
  handleSuccess()
} else {
  handleError();
}

JavaScriptCopied!

// ❌ Double negation
if (value !== 0) {
    doError();
} else {
    doSuccess();
}

// ✅ Better
if (value === 0) {
    doSuccess();
} else {
    doError();
}

JavaScriptCopied!

const hasAlreadyFetched = false;

if (hasAlreadyFetched) {
  // nothing to do
} else {
  doSomething();
}

JavaScriptCopied!

// ❌ Bad
if (!(obj instanceof Person)) {
  doSomething();
}

// ✅
if (obj instanceof Person) {
} else {
  doSomething();
}

JavaScriptCopied!

function sendMoney(account, amount) {
  if (account.balance > amount) {
    if (amount > 0) {
      if (account.sender === 'user-token') {
        account.balance -= amount;
        console.log('Transfer completed');
      } else {
        console.log('Forbidden user');
      }
    } else {
      console.log('Invalid transfer amount');
    }
  } else {
    console.log('Insufficient funds');
  }
}

JavaScriptCopied!

// ✅ Much cleaner
function sendMoney(account, amount) {
  if (account.balance < amount) {
    console.log('Insufficient funds');
    return;
  }

  if (amount <= 0) {
    console.log('Invalid transfer amount');
    return;
  }

  if (account.sender !== 'user-token') {
    console.log('Forbidden user');
    return;
  }

  account.balance -= amount;
  console.log('Transfer completed');
}

JavaScriptCopied!

let val = false;

while (true);
  // do something that changes val
  if (val) {
    break;
  }
}

JavaScriptCopied!

// ❌ waiting for true -> false
let isRunning = true;
while (true) {
  // processing...
  if (!isRunning) {
    break;
  }
}

// ✅ waiting for false -> true
let hasStopped = false;
while (true) {
  // processing...
  if (hasStopped) {
    break;
  }
}

JavaScriptCopied!

if (!sleepy && !hungry) {
  console.log('time for gym👟');
} else {
  console.log('what to do now...');
  // ❌ hard to understand when this runs
}

JavaScriptCopied!

let a: boolean;
let b: boolean;
 
!(a && b) === !a || !b;
!(a || b) === !a && !b;

JavaScriptCopied!

if (!(sleepy || hungry)) {
  console.log('time for gym👟');
} else {
  console.log('what to do now...');
}

JavaScriptCopied!

if (sleepy || hungry) {
  console.log('what to do now...');
} else {
  console.log('time for gym👟');
}

JavaScriptCopied!

for (let i = 1; i <= 5; i++) {
  // print number without newline
}
// Output: 1 2 3 4 5

JavaScriptCopied!

for (let i = 1; i <= 5; i++) {
  process.stdout.write(`${i} `);
}
// Output: 1 2 3 4 5

JavaScriptCopied!

Console.prototype.log = function() {
  this._stdout.write(util.format.apply(this, arguments) + '\n');
};

JavaScriptCopied!

import fs from 'fs';

fs.createReadStream('codingbeautydev.txt').on(
  'data',
  (chunk) => {
    process.stdout.write(chunk);
  }
);

JavaScriptCopied!

import fs from 'fs';
import { Transform } from 'stream';

// ✅ duplex stream
const uppercase = new Transform({
  transform(chunk, encoding, callback) {
    callback(null, chunk.toString().toUpperCase());
  },
});

fs.createReadStream('codingbeautydev.txt')
  .pipe(uppercase)
  .pipe(process.stdout);

JavaScriptCopied!

process.stdin.pipe(process.stdout);

JavaScriptCopied!

import fs from 'fs';
import { Transform } from 'stream';

// ✅ duplex stream
const uppercase = new Transform({
  transform(chunk, encoding, callback) {
    callback(null, chunk.toString().toUpperCase());
  },
});

process.stdin.pipe(uppercase).pipe(process.stdout);

JavaScriptCopied!

Console.prototype.error = function() {
  this._stderr.write(util.format.apply(this, arguments) + '\n');
};

JavaScriptCopied!

console.log('A normal log message');

console.error('An error message');

JavaScriptCopied!

// ❌ 17 lines
function extractRedirects(str) {
  let lines = str.split('\n');
  let sourceDestinationList = [];

  for (let line of lines) {
    let sourceDestination = line.split(' ');
    let source = sourceDestination[2];
    let destination = sourceDestination[3];
    let redirectObj = {
      source: source,
      destination: destination,
      permanent: true,
    };
    sourceDestinationList.push(redirectObj);
  }
  
  return sourceDestinationList;
}

JavaScriptCopied!

// ✅ 1 line -- formatted
const extractRedirects = (str) =>
  str
    .split('\n')
    .map((line) => line.split(' '))
    .map(([, , source, destination]) => ({
      source,
      destination,
      permanent: true,
    }));

JavaScriptCopied!

// ✅ Standard Fisher-Yates shuffle, functional version
const shuffleArray = (arr) =>
  [...Array(arr.length)]
    .map((_, i) => Math.floor(Math.random() * (i + 1)))
    .reduce(
      (shuffled, r, i) =>
        shuffled.map((num, j) =>
          j === i ? shuffled[r] : j === r ? shuffled[i] : num
        ),
      arr
    );

// [ 2, 4, 1, 3, 5 ] (varies)
console.log(shuffleArray([1, 2, 3, 4, 5]));

JavaScriptCopied!

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);

const arr = [1, 2, 3, 4, 5];

console.log(shuffleArray(arr));

JavaScriptCopied!

const reverseString = (str) => {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    const ch = str[i];
    reversed += ch;
  }
  return reversed;
};

const reverse = reverseString('Indestructible!');

console.log(reverse); // !elbitcurtsednI

JavaScriptCopied!

const reverseString = (str) => str.split('').reverse().join('');

const reverse = reverseString('Indestructible!');
console.log(reverse); // !elbitcurtsednI

JavaScriptCopied!

const groupBy = (arr, groupFn) =>
  arr.reduce(
    (grouped, obj) => ({
      ...grouped,
      [groupFn(obj)]: [
        ...(grouped[groupFn(obj)] || []),
        obj,
      ],
    }),
    {}
  );

const fruits = [
  { name: 'pineapple🍍', color: '🟡' },
  { name: 'apple🍎', color: '🔴' },
  { name: 'banana🍌', color: '🟡' },
  { name: 'strawberry🍓', color: '🔴' },
];

const groupedByNameLength = groupBy(
  fruits,
  (fruit) => fruit.color
);

console.log(groupedByNameLength);

JavaScriptCopied!

const generateRandomUUID = (a) =>
  a
    ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
    : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
        /[018]/g,
        generateRandomUUID
      );

console.log(generateRandomUUID()); // f138f635-acbd-4f78-9be5-ca3198c4cf34
console.log(generateRandomUUID()); // 8935bb0d-6503-441f-bb25-7bc685b5b5bc

JavaScriptCopied!

const randomHexColor = () =>
  `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;

console.log(randomHexColor()); // #7a10ba (varies)
console.log(randomHexColor()); // #65abdc (varies)

JavaScriptCopied!

const areEqual = (arr1, arr2) => {
  if (arr1.length === arr2.length) {
    for (const num of arr1) {
      if (!arr2.includes(num)) {
        return false;
      }
    }
    return true;
  }
  return false;
};

JavaScriptCopied!

const areEqual = (arr1, arr2) =>
  arr1.sort().join(',') === arr2.sort().join(',');

JavaScriptCopied!

// For more complex objects
// and sort() will probably have a defined callback
const areEqual = (arr1, arr2) =>
  JSON.stringify(arr1.sort()) === JSON.stringify(arr2.sort());

JavaScriptCopied!

const removeDuplicates = (arr) => {
  const result = [];
  for (const num of arr) {
    if (!result.includes(num)) {
      result.push(num);
    }
  }
  return result;
};

const arr = [1, 2, 3, 4, 5, 3, 1, 2, 5];

const distinct = removeDuplicates(arr);

console.log(distinct); // [1, 2, 3, 4, 5]

JavaScriptCopied!

const arr = [1, 2, 3, 4, 5, 3, 1, 2, 5];

const distinct = [...new Set(arr)];

console.log(distinct); // [1, 2, 3, 4, 5]

JavaScriptCopied!

const isValidEmail = (email) =>
  /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(
    email
  );

console.log(isValidEmail('[email protected]')); // true

console.log(isValidEmail('[email protected]')); // false

console.log(isValidEmail('codingbeautydev.com')); // false

console.log(isValidEmail('hi@')); // false

console.log(isValidEmail('hi@codingbeautydev&12')); // false

JavaScriptCopied!

const isValidEmail = (email) =>
  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
    email
  );

console.log(isValidEmail('[email protected]')); // true

console.log(isValidEmail('[email protected]')); // false

console.log(isValidEmail('codingbeautydev.com')); // false

console.log(isValidEmail('hi@')); // false

console.log(isValidEmail('hi@codingbeautydev&12')); // false

JavaScriptCopied!

const isValidEmail = (email) =>
  /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(
    email
  );

console.log(isValidEmail('[email protected]')); // true

console.log(isValidEmail('[email protected]')); // false

console.log(isValidEmail('codingbeautydev.com')); // false

console.log(isValidEmail('hi@')); // false

console.log(isValidEmail('hi@codingbeautydev&12')); // false

JavaScriptCopied!

const jsonToMap = (json) => new Map(Object.entries(JSON.parse(json)));

const json = '{"user1":"John","user2":"Kate","user3":"Peter"}';
const map = jsonToMap(json);

// Kate
console.log(map.get('user2'));

// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(map);

JavaScriptCopied!

const snakeToCamelCase = (s) =>
  s
    .toLowerCase()
    .replace(/(_\w)/g, (w) => w.toUpperCase().substr(1));

const str1 = 'passion_growth';
const str2 = 'coding_beauty';

console.log(snakeToCamelCase(str1)); // passionGrowth
console.log(snakeToCamelCase(str2)); // codingBeauty