Tari Ibaba

JavaScriptCopied!

let promiseResolve;
let promiseReject;

const promise = new Promise((resolve, reject) => {
  promiseResolve = resolve;
  promiseReject = reject;
});

promiseResolve();

HTMLCopied!

<p>
  Save status:
  <b><span id="save-status">Not saved</span></b>
</p>
<p>
  Publish status:
  <b><span id="publish-status">Not published</span></b>
</p>
<button id="save">Save</button>
<button id="publish">Publish</button>

JavaScriptCopied!

saveButton.onclick = () => {
  save();
};

publishButton.onclick = async () => {
  await publish();
};

let saveResolve;
let hasSaved = false;

async function save() {
  hasSaved = false;
  saveStatus.textContent = 'Saving...';
  // ✅ Resolve promise from outside
  await makeSaveRequest();
  saveResolve();
  hasSaved = true;
  saveStatus.textContent = 'Saved';
}

async function waitForSave() {
  if (!hasSaved) {
    await new Promise((resolve) => {
      saveResolve = resolve;
    });
  }
}

async function publish() {
  publishStatus.textContent = 'Waiting for save...';
  await waitForSave();
  publishStatus.textContent = 'Published';
  return;
}

JavaScriptCopied!

class Deferred {
  constructor() {
    this.promise = new Promise((resolve, reject) => {
      this.reject = reject;
      this.resolve = resolve;
    });
  }
}

const deferred = new Deferred();

// Resolve from outside
deferred.resolve();

JavaScriptCopied!

// ...

const deferredSave = new Deferred();
let hasSaved = false;

async function save() {
  hasSaved = false;
  saveStatus.textContent = 'Saving...';
  // ✅ Resolve promise from outside
  await makeSaveRequest();
  saveResolve();
  hasSaved = true;
  saveStatus.textContent = 'Saved';
}

async function waitForSave() {
  if (!hasSaved) await deferredSave.promise;
}

async function publish() {
  // ...
}

JavaScriptCopied!

// data-fetcher.js
const deferred = new Deferred();

let dataDeferred;
function startListening() {
  dataDeferred = new Deferred();
  
  eventStream.on('data', (data) => {
    dataDeferred.resolve(data);
  });
}

async function getData() {
  return await dataDeferred.promise;
}

class Deferred {
  constructor() {
    this.promise = new Promise((resolve, reject) => {
      this.reject = reject;
      this.resolve = resolve;
    });
  }
}

// client.js
const { startListening, getData } = require('./data-fetcher.js');

startListening();

const data = await getData();

JavaScriptCopied!

function* asyncGenerator() {
  yield new Promise((resolve) =>
    setTimeout(() => resolve('done this ✅'), 2000)
  );
  yield new Promise((resolve) =>
    setTimeout(() => resolve('done that ✅'), 3000)
  );
}

JavaScriptCopied!

const asyncGen = asyncGenerator();
asyncGen.next().value.then(console.log);
asyncGen.next().value.then(console.log);

JavaScriptCopied!

async function* streamVideo({ id }) {
  let endOfVideo = false;
  const downloadChunk = async (sizeInBytes) => {
    const response = await fetch(
      `api.example.com/videos/${id}`
    );
    const { chunk, done } = await response.json();
    if (done) endOfVideo = true;
    return chunk;
  };
  while (!endOfVideo) {
    const bufferSize = 500 * 1024 * 1024;
    yield await downloadChunk(bufferSize);
  }
}

JavaScriptCopied!

for await (const chunk of streamVideo({ id: 2341 })) {
  // process video chunk
}

JavaScriptCopied!

const colors = ['🔴', '🔵', '🟡'];

console.log([...colors, '🟢']);
// [ '🔴', '🔵', '🟡', '🟢' ]

JavaScriptCopied!

export default function userState(state = initialUserState, action){
  console.log(arr);
    switch (action.type){
      case ADD_ITEM :
        return { 
             ...state,
             arr:[...state.arr, action.newItem]
        }

      default:return state
   }
}

JavaScriptCopied!

const info = {
  name: 'Coding Beauty',
  site: 'api2.codingbeautydev.com',
};

console.log({ ...info, theme: '🔵' });
// { name: 'Coding Beauty',
//   site: 'api2.codingbeautydev.com',
//   theme: '🔵' }

JavaScriptCopied!

const langs = {
  j: 'java',
  c: 'c++',
};

console.log({ ...langs, j: 'javascript ' });
// { j: 'javascript ', c: 'c++' }

JavaScriptCopied!

const colors = {
  yellow: '🟡',
  blue: '🔵',
  red: '🔴',
};

const { yellow, ...withoutYellow } = colors;

console.log(withoutYellow);
// { blue: '🔵', red: '🔴' }

JavaScriptCopied!

// For some weird reason you can use it without brackets
// like this 👇

const message = String.raw`\n is for newline and \t is for tab`;
console.log(message); // \n is for newline and \t is for tab

JavaScriptCopied!

const filePath = 'C:\\Code\\JavaScript\\tests\\index.js';

console.log(`The file path is ${filePath}`);

// The file path is C:\Code\JavaScript\tests\index.js

JavaScriptCopied!

const filePath = String.raw`C:\Code\JavaScript\tests\index.js`;

console.log(`The file path is ${filePath}`);

// The file path is C:\Code\JavaScript\tests\index.js

JavaScriptCopied!

const patternString = 'The (\\w+) is (\\d+)';
const pattern = new RegExp(patternString);

const message = 'The number is 100';
console.log(pattern.exec(message));
// ['The number is 100', 'number', '100']

JavaScriptCopied!

const patternString = String.raw`The (\w+) is (\d+)`;
const pattern = new RegExp(patternString);

const message = 'The number is 100';
console.log(pattern.exec(message));
// ['The number is 100', 'number', '100']

JavaScriptCopied!

const str = "It's just $5, and I have €20 and £50";

// Only match number sequence if $ comes first
const regexPos = /(?<=\$)\d+/g;

console.log(str.match(regexPos)); // ['5']

const regexNeg = /(?<!\$)(\d+)/g; // ['20', '50' ]

console.log(str.match(regexNeg));

JavaScriptCopied!

const str = 'The cat sat on a map';

// $1 -> [a-z]
// $2 -> a
// $3 -> t

// () indicates group
str.replace(/([a-z])(a)(t)/g, '$1*$3');
// -> The c*t s*t on a map

JavaScriptCopied!

const str = 'The cat sat on a map';

// left & right
console.log(str.replace(/(?<left>[a-z])(a)(?<right>t)/g, '$<left>*$<right>'));
// -> The c*t s*t on a map

JavaScriptCopied!

// The stupidly long regex
const regex =
  /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/gi;

// ✅ String.raw!
const filePoint = String.raw`C:\coding-beauty\coding-beauty-javascript\index.js:3:5`;

const extractor =
  /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/i;

const [path, lineStr, charStr] = filePoint
  .match(regex)[0]
  .match(extractor)
  .slice(1, 4);

const line = Number(lineStr);
const char = Number(charStr);

console.log({ path, line, char });

// Replace all filePoint with <button> tag
// <button onclick="navigateWithButtonFilepointInnerText">{filePoint}</button>

JavaScriptCopied!

function startBodyBuilding() {
  if (Math.random() > 0.5) {
    throw new Error("I'm tired😫");
  }
  console.log('Off to the gym 👟💪');
}

try {
  startBodyBuilding();
} catch {
  console.log('Stopped excuse🛑');
} finally {
  console.log("I'm going!🏃");
}

JavaScriptCopied!

async function startBodyBuilding() {
  await think();
  if (Math.random() > 0.5) {
    throw new Error("I'm tired😫");
  }
  console.log('Off to the gym 👟💪');
}

startBodyBuilding()
  .then(() => {
    console.log('Started ✅');
  })
  .catch(() => {
    console.log('No excuses');
  })
  .finally(() => {
    console.log("I'm going!🏃");
  });

JavaScriptCopied!

getFruitApiUrl().then((url) => {
  return fetch(url)
    .then((res) => res.json())
    .then((data) => {
      fruits.push(data);
    })
    .catch((err) => {
      console.error(err);
    })
    .finally(() => {
      console.log(fruits);
    });
});

JavaScriptCopied!

function visitSite(user) {
  if (user.isLoggedIn) {
      console.log(`You are ${user.name}`);
  }

  console.log('Welcome to Coding Beauty.');
}

JavaScriptCopied!

function visitSite(user) {
  user.isLoggedIn && console.log(`You are ${user.name}`);
  console.log('Welcome to Coding Beauty.');
}

JavaScriptCopied!

function visitSite(user) {
  if (user.isLoggedIn) {
    console.log(`Welcome back, ${user.name}!`);
    console.log(
      `Your last login was on ${user.lastLoginDate}`
    );
    console.log(`Your account type is ${user.accountType}`);
  }

  console.log('Welcome to Coding Beauty.');
}

JavaScriptCopied!

function visitSite(user) {
  user.loggedIn && handleUser(user);

  console.log('Welcome to Coding Beauty.');
}

function handleUser(user) {
  console.log(`Welcome back, ${user.name}!`);
  console.log(
    `Your last login was on ${user.lastLoginDate}`
  );
  console.log(`Your account type is ${user.accountType}`);
}

JavaScriptCopied!

let word;
if (num === 7) {
  word = 'seven';
} else {
  word = 'unknown';
}

JavaScriptCopied!

const word = num === 7 ? 'seven' : 'unknown';

JavaScriptCopied!

const getNumWord = (num) => {
  if (num === 1) {
    return 'one';
  } else if (num === 2) {
    return 'two';
  } else if (num === 3) {
    return 'three';
  } else if (num === 4) {
    return 'four';
  } else return 'unknown';
};

JavaScriptCopied!

const getNumWord = (num) =>
  num === 1
    ? 'one'
    : num === 2
    ? 'two'
    : num === 3
    ? 'three'
    : num === 4
    ? 'four'
    : 'unkwown';

JavaScriptCopied!

const animalName = pet.canSqueak()
  ? 'mouse'
  : pet.canBark()
  ? pet.isScary()
    ? 'wolf' // Only nests this because it's in the truthy section
    : 'dog'
  : pet.canMeow()
  ? 'cat'
  : pet.canSqueak() // Flat because it's in the falsy section
  ? 'mouse'
  : 'probably a bunny';

JavaScriptCopied!

const animalName =
  pet.canSqueak() ? 'mouse'
  : pet.canBark() ?
    pet.isScary() ?
      'wolf'
    : 'dog'
  : pet.canMeow() ? 'cat'
  : pet.canSqueak() ? 'mouse'
  : 'probably a bunny';

JavaScriptCopied!

function processUserAction(action) {
  switch (action) {
    case 'play': // if (action === 'play')
      console.log('Playing the game...');
      startGame({ mode: 'multiplayer' });
      break;
    case 'pause': // else if (action === 'pause')
      console.log('Pausing the game...');
      pauseGame();
      break;
    case 'stop':
      console.log('Stopping the game...');
      endGame();
      goToMainMenu();
      break;
    case 'cheat':
      console.log('Activating cheat mode...');
      enableCheatMode();
      break;
    default: // else
      console.log('Invalid action!');
      break;
  }
}

JavaScriptCopied!

// Generate a random number between 1 and 6 to simulate rolling a dice
const diceRoll = Math.floor(Math.random() * 6) + 1;

console.log(`You rolled a ${diceRoll}!`);

switch (diceRoll) {
  case 1:
    console.log('Oops, you rolled a one!');
    console.log('You lose a turn.');
    break;
  case 2:
    console.log(
      'Two heads are better than one... sometimes'
    );
  case 4:
  case 6:
    // else if (diceRoll === 2 || diceRoll === 4 || diceRoll === 6)
    console.log('Nice roll!');
    console.log('You move forward two spaces.');
    break;
  // ...
  default:
    console.log('Invalid dice roll.');
}

JavaScriptCopied!

const weatherActivities = {
  sunny: 'go to the beach',
  rainy: 'watch a movie at home',
  cloudy: 'take a walk in the park',
  snowy: 'build a snowman',
};

const weather = 'sunny';

console.log(`Okay, so right now it's ${weather}.`);
console.log(`Why don't you ${weatherActivities[weather]}?`);

JavaScriptCopied!

// screens/course-list.tsx

// ...
import {
  ActivityIndicator,
  Text
  // ...
} from 'react-native-paper';

type ViewState = 'loading' | 'error' | 'data';

export function Courses({ route, navigation }) {
  const [viewState, setViewState] =
    useState<ViewState>('loading');
  const state = useAppState();
  const courses = state?.courseList;

  // ...
  const contentDict = {
    loading: <ActivityIndicator />,
    error: <Text>Error</Text>,
    data: <CourseList courses={courses} />,
  };

  const content = contentDict[viewState];
  return (
    <View>
      <StatusBar />
      {content}
    </View>
  );
}

// ...

JavaScriptCopied!

const person = new Person({
  name: 'Tari Ibaba',
  at: 'api2.codingbeautydev.com',
});

// Because of Symbol.hasInstance
console.log(person instanceof Person); // ❌ false (!!)
console.log('Tari Ibaba' instanceof Person); // ✅ true
console.log('Person' instanceof Person); // ❌ false

JavaScriptCopied!

class Person {
  constructor({ name, at }) {
    this.name = name;
    this.at = at;
  }
}

const person = new Person({
  name: 'Tari Ibaba',
  at: 'api2.codingbeautydev.com',
});

console.log(person instanceof Person); // ✅ true
console.log('Person' instanceof Person); // ❌ false
console.log(person instanceof String); // ❌ false

JavaScriptCopied!

class Person {
  constructor({ name, at }) {
    this.name = name;
    this.at = at;
  }

  static [Symbol.hasInstance](obj) {
    const people = ['Tari Ibaba', 'Ronaldo'];
    return people.includes(obj);
  }
}

JavaScriptCopied!

const person = new Person({
  name: 'Tari Ibaba',
  at: 'api2.codingbeautydev.com',
});

console.log(person instanceof Person); // ❌ false (!!)
console.log('Tari Ibaba' instanceof Person); // ✅ true
console.log('Person' instanceof Person); // ❌ false

JavaScriptCopied!

class Fruit {
  constructor(name) {
    this.name = name;
  }

  [Symbol.hasInstance](obj) {
    const fruits = ['🍍', '🍌', '🍉', '🍇'];
    // this == this.constructor in a static method
    return obj.constructor === this || fruits.includes(obj);
  }
}

const fruit = new Fruit('apple');

JavaScriptCopied!

String.prototype.constructor.prototype.constructor === String // true

JavaScriptCopied!

class List {
  elements = [];

  wordEmojiMap = {
    red: '🔴',
    blue: '🔵',
    green: '🟢',
    yellow: '🟡',
  };

  add(element) {
    this.elements.push(element);
    return this;
  }

  // Generator
  *[Symbol.iterator]() {
    for (const element of this.elements) {
      yield this.wordEmojiMap[element] ?? element;
    }
  }
}

JavaScriptCopied!

const numbers = [1, 2, 3];

for (const num of numbers) {
  console.log(num);
}

/*
1
2
3
*/

JavaScriptCopied!

const iterator = numbers[Symbol.iterator]();

// for..of: Keep calling .next() and using value until done
console.log(iterator.next()); // Object {value: 1, done: false}

console.log(iterator.next()); // Object {value: 2, done: false}

console.log(iterator.next()); // Object {value: 3, done: false}

console.log(iterator.next()); // Object {value: undefined, done: true}

JavaScriptCopied!

class List {
  // ...

  *[Symbol.iterator]() {
    for (const element of this.elements) {
      yield this.wordEmojiMap[element] ?? element;
    }
  }
}

JavaScriptCopied!

const colors = new List();
colors.add('red').add('blue').add('yellow');

const iterator = colors[Symbol.iterator]();

console.log(iterator.next()); // { value: '🔴', done: false }

console.log(iterator.next()); // { value: '🔵', done: false }

console.log(iterator.next()); // { value: '🟡', done: false }

console.log(iterator.next()); // { value: undefined, done: true }

JavaScriptCopied!

class Person {
  constructor({ name, at, favColor }) {
    this.name = name;
    this.at = at;
    this.favColor = favColor;
  }

  [Symbol.toPrimitive]() {
    return `I'm ${this.name}`;
  }
}

JavaScriptCopied!

const str = 'Person: ' + person;

console.log(str);
// Person: I'm Tari Ibaba

JavaScriptCopied!

class Money {
  constructor(amount, currency) {
    this.amount = amount;
    this.currency = currency;
  }

  [Symbol.toPrimitive](hint) {
    if (hint === 'string') {
      return `${this.amount} ${this.currency}`;
    } else if (hint === 'number') {
      return this.amount;
    } else if (hint === 'default') {
      return `${this.amount} ${this.currency}`;
    }
  }
}

const price = new Money(500, 'USD');

console.log(String(price)); // 500 USD
console.log(+price); // 500
console.log('Price is ' + price); // Price is 500 USD

JavaScriptCopied!

class Greedy {
  [Symbol.split](str) {
    return `Me: ${str}, you: 0`;
  }
}

class ReadableNumber {
  [Symbol.split](str) {
    return str.split('').reduceRight((acc, cur, index, arr) => {
      return index % 3 === 0 && index < arr.length - 1
        ? cur + ',' + acc
        : cur + acc;
    }, '');
  }
}

console.log('1-000-000'.split('-')); // [ '1', '000', '000' ]
console.log('1000000'.split(new Greedy())); // Me: 1000000, you: 0
console.log('1000000'.split(new ReadableNumber())); // 1,000,000

JavaScriptCopied!

class Topic {
  static topics = {
    'api2.codingbeautydev.com': ['JavaScript', 'VS Code', 'AI'],
  };

  constructor(value) {
    this.value = value;
  }

  [Symbol.search](where) {
    const topic = this.constructor.topics[where];
    if (!topic) return -1;
    return topic.indexOf(this.value);
  }
}

const str = 'api2.codingbeautydev.com';

console.log(str.search(new Topic('VS Code'))); // 1
console.log(str.search(new Topic('Economics'))); // -1