Tari Ibaba

JavaScriptCopied!

// Node/element to be observed for mutations
const targetNode = document.getElementById('my-el');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log(
        `The ${mutation.attributeName} attribute was modified.`
      );
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

JavaScriptCopied!

const array = [1, 4, 3, 2, 3, 1];

const noDuplicates = [...new Set(array)];

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

JavaScriptCopied!

const creation = new Set(['coding', 'writing', 'painting']);

const joy = new Set(['crying', 'laughing', 'coding']);

console.log(creation.union(joy));
// Set { 'coding', 'crying', 'writing', 'laughing', 'painting' }

JavaScriptCopied!

const odd = new Set([21, 23, 25]);

const even = new Set([20, 22, 24]);

const prime = new Set([23, 29]);

console.log(odd.union(even).union(prime));
// Set(7) { 21, 23, 25, 20, 22, 24, 29 }

JavaScriptCopied!

const mobile = new Set(['javascript', 'java', 'swift', 'dart']);

const backend = new Set(['php', 'python', 'javascript', 'java']);

const frontend = new Set(['javascript', 'dart']);

console.log(mobile.intersection(backend));
// Set { javascript, java }

console.log(mobile.intersection(backend).intersection(frontend));
// Set { javascript }

JavaScriptCopied!

const joy = new Set(['crying', 'laughing', 'coding']);

const pain = new Set(['crying', 'screaming', 'coding']);

console.log(joy.difference(pain));
// Set { 'laughing' }

JavaScriptCopied!

const joy = new Set(['crying', 'laughing', 'coding']);

const pain = new Set(['crying', 'screaming', 'coding']);

console.log(joy.symmetricDifference(pain));
// Set { 'laughing', 'screaming' }

JavaScriptCopied!

const colors = new Set(['indigo', 'teal', 'cyan', 'violet']);

const purpleish = new Set(['indigo', 'violet']);

const secondary = new Set(['orange', 'green', 'violet']);

console.log(purpleish.isSubsetOf(colors)); // true

console.log(secondary.isSubsetOf(colors)); // false

console.log(colors.isSubsetOf(colors)); // true

JavaScriptCopied!

const colors = new Set(['salmon', 'cyan', 'yellow', 'aqua']);

const blueish = new Set(['cyan', 'aqua']);

const primary = new Set(['red', 'yellow', 'blue']);

console.log(colors.isSupersetOf(blueish)); // true

console.log(colors.isSupersetOf(primary)); // false

console.log(colors.isSupersetOf(colors)); // true

JavaScriptCopied!

const ai = new Set(['python', 'c++']);

const mobile = new Set(['java', 'js', 'dart', 'kotlin']);

const frontend = new Set(['js', 'dart']);

console.log(ai.isDisjointFrom(mobile)); // true

console.log(mobile.isDisjointFrom(frontend)); // false

JavaScriptCopied!

const unique = new Set(['salmon', 'cyan', 'cherry', 'aqua']);

const blueish = new Set(['cyan', 'aqua', 'blue']);

const primary = new Set(['red', 'green', 'blue']);

console.log(unique.union(blueish)); // Set { 'salmon', 'cyan', 'cherry', 'aqua', 'blue' }

console.log(unique.intersection(blueish)); // Set { 'cyan', 'aqua' }

console.log(unique.difference(blueish)); // Set { 'salmon', 'cherry' }

console.log(unique.symmetricDifference(blueish)); // Set { 'salmon', 'cherry', 'blue' }

console.log(primary.isSubsetOf(unique)); // false
console.log(new Set(['red', 'green']).isSubsetOf(primary)); // true

console.log(unique.isSupersetOf(new Set(['salmon', 'aqua']))); // true
console.log(unique.isSupersetOf(blueish)); // false

console.log(unique.isDisjointFrom(primary)); // true
console.log(unique.isDisjointFrom(blueish)); // false

JavaScriptCopied!

class Person {
  _firstName = 'Coding';
  _lastName = 'Beauty';

  get name() {
    return `${this._firstName} ${this._lastName}`;
  }
}

const person = new Person();
console.log(person.name); // Coding Beauty

// Members intended to be private can still be accessed
// from outside the class
console.log(person._firstName); // Coding
console.log(person._lastName); // Beauty

// They can also be modified
person._firstName = 'Debugging';
person._lastName = 'Nightmares';

console.log(person.name); // Debugging Nightmares

JavaScriptCopied!

class Person {
  #firstName = 'Coding';
  #lastName = 'Beauty';

  get name() {
    return `${this.#firstName} ${this.#lastName}`;
  }
}

const person = new Person();
console.log(person.name);

// SyntaxError: Private field '#firstName' must be
// declared in an enclosing class
console.log(person.#firstName);
console.log(person.#lastName);

JavaScriptCopied!

class Car {
  #color;
  hasColor() {
    return #color in this;
  }
}
const car = new Car();
console.log(car.hasColor()); // true;

JavaScriptCopied!

class Car {
  #color;
  hasColor() {
    return #color in this;
  }
}
class House {
  #color;
  hasColor() {
    return #color in this;
  }
}

const car = new Car();
const house = new House();
console.log(car.hasColor()); // true;
console.log(car.hasColor.call(house)); // false
console.log(house.hasColor()); // true
console.log(house.hasColor.call(car)); // false

JavaScriptCopied!

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

const reversed = original.reverse();
console.log(reversed); // [2, 4, 3, 1, 5] (same array)
console.log(original); // [2, 4, 3, 1, 5] (mutated)

const sorted = original.sort();
console.log(sorted); // [1, 2, 3, 4, 5] (same array)
console.log(original); // [1, 2, 3, 4, 5] (mutated)

const deleted = original.splice(1, 2, 7, 10);
console.log(deleted); // [2, 3] (deleted elements)
console.log(original); // [1, 7, 10, 4, 5] (mutated)

JavaScriptCopied!

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

const reversed = original.toReversed();
console.log(reversed); // [2, 4, 3, 1, 5] (copy)
console.log(original); // [5, 1, 3, 4, 2] (unchanged)

const sorted = original.toSorted();
console.log(sorted); // [1, 2, 3, 4, 5] (copy)
console.log(original); // [5, 1, 3, 4, 2] (unchanged)

const spliced = original.toSpliced(1, 2, 7, 10);
console.log(spliced); // [1, 7, 10, 4, 5] (copy)
console.log(original); // [5, 1, 3, 4, 2] (unchanged)

JavaScriptCopied!

function setTimeoutAsync(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timeout);
  });
}

// SyntaxError: await is only valid in async functions
await setTimeoutAsync(3000);

JavaScriptCopied!

function setTimeoutAsync(timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timeout);
  });
}

// ✅ Waits for timeout - no error thrown
await setTimeoutAsync(3000);

JavaScriptCopied!

async function getHelpQuickly() {
  const response = await Promise.any([
    cautiousHelper(),
    kindHelper(),
    wickedHelper(),
  ]);
  console.log(response); // Of course!
}

async function cautiousHelper() {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve('Uum, oohkaay?');
    }, 2000);
  });
}

async function kindHelper() {
  return 'Of course!';
}

function wickedHelper() {
  return Promise.reject('Never, ha ha ha!!!');
}

JavaScriptCopied!

await getHelpQuickly(); // outputs "Of course!" immediately
// Still waits for 2 seconds

JavaScriptCopied!

const letters = [
  { value: 'v' },
  { value: 'w' },
  { value: 'x' },
  { value: 'y' },
  { value: 'z' },
];

const found = letters.find((item) => item.value === 'y');
const foundIndex = letters.findIndex((item) => item.value === 'y');

console.log(found); // { value: 'y' }
console.log(foundIndex); // 3

JavaScriptCopied!

const letters = [
  { value: 'v' },
  { value: 'w' },
  { value: 'x' },
  { value: 'y' },
  { value: 'z' },
];

const found = letters.findLast((item) => item.value === 'y');
const foundIndex = letters.findLastIndex((item) => item.value === 'y');

console.log(found); // { value: 'y' }
console.log(foundIndex); // 3

JavaScriptCopied!

const nums = [7, 14, 3, 8, 10, 9];

// gives 14, instead of 10
const lastEven = nums.find((value) => value % 2 === 0);

// gives 1, instead of 4
const lastEvenIndex = nums.findIndex((value) => value % 2 === 0);

console.log(lastEven); // 14
console.log(lastEvenIndex); // 1

JavaScriptCopied!

const nums = [7, 14, 3, 8, 10, 9];

// Copying the entire array with the spread syntax before
// calling reverse()
const reversed = [...nums].reverse();

// correctly gives 10
const lastEven = reversed.find((value) => value % 2 === 0);

// gives 1, instead of 4
const reversedIndex = reversed.findIndex((value) => value % 2 === 0);

// Need to re-calculate to get original index
const lastEvenIndex = reversed.length - 1 - reversedIndex;

console.log(lastEven); // 10
console.log(reversedIndex); // 1
console.log(lastEvenIndex); // 4

JavaScriptCopied!

const nums = [7, 14, 3, 8, 10, 9];

const lastEven = nums.findLast((num) => num % 2 === 0);
const lastEvenIndex = nums.findLastIndex((num) => num % 2 === 0);

console.log(lastEven); // 10
console.log(lastEvenIndex); // 4

JavaScriptCopied!

const str =
  'JavaScript is so terrible, it is unbelievably terrible!!';

const result = str.replace('terrible', 'wonderful');

console.log(result);
// JavaScript is so wonderful, it is unbelievably terrible!!
// Huh?

JavaScriptCopied!

const str =
  'JavaScript is so terrible, it is unbelievably terrible.';

const result = str.replaceAll('terrible', 'wonderful');

console.log(result);

// JavaScript is wonderful, it is unbelievably wonderful.
// Now you're making sense!

JavaScriptCopied!

const colors = ['pink', 'purple', 'red', 'yellow'];

console.log(colors.at(1)); // purple

console.log(colors.with(1, 'blue'));
// ['pink', 'blue', 'red', 'yellow']

// Original not modified
console.log(colors);
// ['pink', 'purple', 'red', 'yellow']

JavaScriptCopied!

// index -N is same as index arr.length - N

const fruits = ['banana', 'apple', 'orange', 'butter???'];

console.log(fruits.at(-3)); // apple
console.log(fruits.at(-1)); // butter???

console.log(fruits.with(-1, 'watermelon'));
// ['banana', 'apple', 'orange', 'watermelon'] ✅

JavaScriptCopied!

class Person {
  static #count = 0;
  static getCount() {
    return this.#count;
  }
  // Instance method
  constructor() {
    this.constructor.#incrementCount();
  }
  static #incrementCount() {
    this.#count++;
  }
}
const person1 = new Person();
const person2 = new Person();
console.log(Person.getCount()); // 2

JavaScriptCopied!

class Vehicle {
  static defaultColor = 'blue';
}
class Car extends Vehicle {
  static colors = [];
  static {
    this.colors.push(super.defaultColor, 'red');
  }
  static {
    this.colors.push('green');
  }
}
console.log(Car.colors); // [ 'blue', 'red', 'green' ]

JavaScriptCopied!

left ??= right;
left ||= right;
left &&= right;

JavaScriptCopied!

// More like exactly the same as
left = (left ?? right);
left = (left || right);
left = (left && right);

JavaScriptCopied!

user.preferredName ??= generateDumbUserName();

JavaScriptCopied!

user.profilePicture ||= "/angry-stranger.png";

JavaScriptCopied!

user.favoriteLanguage = await setFavoriteLanguage(input.value);

user.favoriteLanguage &&= 'Assembly'; // You're lying! It's Assembly!

JavaScriptCopied!

const isItPi = 3.1_415_926_535;

const isItAvagadro = 602_214_076_000_000_000_000_000;

const isItPlanck = 6.626_070_15e-34;

const isItG = 6.674_30e-11;

// Works for other number bases too...

JavaScriptCopied!

function* myGenerator() {
  yield 'Hello';
  yield 'World';
}

const iterator = myGenerator();

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

JavaScriptCopied!

function* countTo100() {
  for (let i = 0; i < 100; i++) {
    yield i;
  }
}

for (const item of countTo100()) {
  console.log(item);
}
// 1, 2, ... 100

JavaScriptCopied!

function* numberGenerator() {
  let number = 1;
  // infinite loop won't cause freeze in generator
  // -- execution pauses after `yield`
  while (true) {
    yield number++;
  }
}

const numbers = numberGenerator();

console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
// you can continue this as long as you need

JavaScriptCopied!

function* bigNumberGenerator() {
  let number = 1;
  while (number <= 100000000) {
    yield number++;
  }
}

const bigNumbers = bigNumberGenerator();

const chunk = 10;
for (let i = 0; i < chunk; i++) {
  const value = bigNumbers.next().value;
  // Use next 10 values...
}

JavaScriptCopied!

this.it('is a test', async function () {
    const name = await 'coding beauty'
    const num = await new Promise(resolve => resolve(10));
    console.log(`Name: ${name}, Num: ${num}`);
});

JavaScriptCopied!

function _asyncToGenerator(fn) {
  return function () {
    var gen = fn.apply(this, arguments);
    return new Promise(function (resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function (value) {
              return step('next', value);
            },
            function (err) {
              return step('throw', err);
            }
          );
        }
      }

      return step('next');
    });
  };
}

myFunc(
  'generator async/await example',
  _asyncToGenerator(function* () {
    const name = yield 'coding beauty'; // yield, not await
    const num = yield new Promise((resolve) => resolve(10));
    console.log(`Name: ${name}, Num: ${num}`);
  })
);

JavaScriptCopied!

function typeAnimation(text, index = 0) {
  if (index < text.length) {
    document.body.innerHTML += text.charAt(index);
    index++;
    setTimeout(typeAnimation, 500);
  }
}

JavaScriptCopied!

function* typeAnimation(text) {
  for(let char of text) {
    yield char;
  }
}

JavaScriptCopied!

const generatorInstance = typeGenerator("Coding Beauty");

function startTypingEffect(elementId, generatorInstance) {
  let element = document.getElementById(elementId);
  setInterval(() => {
    let result = generatorInstance.next();
    !result.done && element.innerHTML += result.value;
  }, 100);
}

startTypingEffect("type-here", generatorInstance);

JavaScriptCopied!

<div id="type-here"></div>

JavaScriptCopied!

function* asyncGenerator() {
  yield new Promise(resolve => setTimeout(() => resolve('Task 1 completed'), 2000));
  yield new Promise(resolve => setTimeout(() => resolve('Task 2 completed'), 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!

import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchData(action) {
   try {
      const data = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", data});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchData);
}

JavaScriptCopied!

import createSagaMiddleware from 'redux-saga';
import { createStore, applyMiddleware } from 'redux';
import mySaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(mySaga)

JavaScriptCopied!

function* soccerPlayers() {
  yield 'Ronaldo';
  yield 'Messi';
  return 'Neymar';
}

for (const player of soccerPlayers()) {
  console.log(player);
}

// Ronaldo
// Messi

JavaScriptCopied!

function* soccerPlayers() {
  yield 'Ronaldo';
  yield 'Messi';
  return 'Neymar';
}

const playerGen = soccerPlayers();
console.log(playerGen.next());
console.log(playerGen.next());
console.log(playerGen.next());

/*
{ value: 'Ronaldo', done: false }
{ value: 'Messi', done: false }
{ value: 'Neymar', done: true }
*/

JavaScriptCopied!

function* myGenerator() {
  yield 'Hello';
  yield 'World';
}

const iterator = myGenerator();

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

JavaScriptCopied!

function* myGenerator() {
    yield 'Hello';
    return 'End';
    yield 'This will not be executed';
}