js snippets

jsSnippets.js

// state updates: https://state-updates.vercel.app
// cheat sheet: https://turriate.com/articles/modern-javascript-everything-you-missed-over-10-years

// ********************************** //
// create new object from existing one
const object = { id: 1, title: 'some-title', text: 'some text' };
const newObject = { ...object, text: 'changed text' };
console.log(newObject);

// ********************************** //
// create object with same key and value names
const title = 'some title';
const text = 'some text';
const obj1 = {
  title: title,
  text: text,
};
// this is the same sa obj1
const obj2 = {
  title,
  text,
};

// ********************************** //
// remove property from object
const obj = { color: 'red', length: 30, width: 20, text: 'some-text' };
// property color is removed
const [color, ...newObj] = obj;

// baratanje boolean-ima
Number(true) === 1;
Nunber(undefined) === NaN;
Number(!!undefined) === 0;

// && and ||
// && daje zadnje tacno ili prvo netacno
// || daje prvo tacno
const one = false && 'one'; //  false
const two = 'two' && 'yes'; //  'yes'
const three = 'three' || false; //  'three'
const four = undefined || 'four'; //  'four'
const five = 'five' || 'six'; //  'five'

// null guard ?
colors = null;
colors.length; // ovo ce dati error
colors?.length; // samo ce vratiti undefined

// contains da se proveri da li je neki element unutar drugog elementa, npr. kod event handlera
const dropdown = document.querySelector('.w-48');
const handleClick = (event) => {
  if (dropdown.contains(event.target)) {
    console.log('inside dropdown');
  } else {
    console.log('outside dropdown');
  }

  document.addEventListener('click', handleClick, true); // ovo true je da se ukljuci capture faza
};

// koliko ms je proslo od ucitavanja stranice. Moze da se koristi za debagovanje funkcija. Npr kad je pozvan neki react event handler vs neki js event handler
performance.now();

// promena url-a bez page refresh
window.history.pushState({}, '', '/accordion');

// popstate event, navigacija pomocu back i forward.
window.addEventListener('popstate', () => console.log('Im at', window.location.pathname));

// sortiranje za brojeve, za stringove je localeCompare
const objects = [
  { name: 'something', price: 20 },
  { name: 'other', price: 120 },
  { name: 'third', price: 75 },
  { name: 'fourth', price: 17 },
];

// function getSortValue(object, field) {
//   return object[field];
// }

function getSortValue(object) {
  return object.name;
}

const sortOrder = 'asc';

data.sort((a, b) => {
  const valueA = getSortValue(a);
  const valueB = getSortValue(b);

  const reverseOrder = sortOrder === 'asc' ? 1 : -1;

  if (typeof valueA === 'string') {
    return valueA.localeCompare(valueB) * reverseOrder;
  }

  return (valueA - valueb) * reverseOrder; //number
});

// json string
const someObject = { name: 'some name', address: 'some address' };
console.log(JSON.stringify(someObject));

// brisanje elementa iz array
const arr = ['nesto', 'nesto drugo', 'trece'];
const index = arr.indexOf('nesto drugo');
arr.splice(index, 1); // brise samo jedan elemenat pocevsi od index-a. Brise samo drugi po redu - 'nesto drugo'

// includes dodje kao contains u javi
const term = 'some term';
const daLiSeSadrzi = term.includes('term'); // ovo ce vratiti true

// reduce. Akumulator i clanovi niza. I ono 0 je pocetna vrednost akumulatora
return filteredCars.reduce((acc, car) => {
  return acc + car.cost;
}, 0);

// Object.assign, sklapanje objekta iz delova
const one = () => {
  return {
    functOne: () => console.log('functOne'),
  };
};

const two = () => {
  return {
    functTwo: () => console.log('functTwo'),
  };
};
const varOne = { varOne: 'varOne' };

const obj = Object.assign({}, one(), two(), varOne);

// Object.assign, sklapanje objekta iz delova. Sad ima ove dve funkcije i varOne promenljivu. Ovde su prosledjene reference na objekte, u prvom primeru su pozvane funkcije direktno
const one = {
  functOne: () => console.log('functOne'),
};

const two = {
  functTwo: () => console.log('functTwo'),
};
const varOne = { varOne: 'varOne' };

const obj = Object.assign({}, one, two, varOne);

reactSnippets.js

// ovo rest ce uhvatiti sve sto prosledimo, bilo kakav event handler ili custom prop
function Panel({ children, className, ...rest }) {
  return <div {...rest}>Panel</div>;
}

// useEffect
// ako imamo return funkciju iz te funkcije, to ce se pozvati pre sledeceg izvrsenja kad se desi rerender. Npr. cleanup event listener-a

// useRef
// komponenta dobija referencu na DOM elemenat koji je kreirala, koja moze da se koristi kasnije
// <div ref={divEl} className='w-48 relative'>
// divEl = useRef()
// primer https://halcom.udemy.com/course/react-redux/learn/lecture/34695444#notes

// The React useCallback Hook returns a memoized callback function.
// Think of memoization as caching a value so that it does not need to be recalculated.
// This allows us to isolate resource intensive functions so that they will not automatically run on every render.
// The useCallback Hook only runs when one of its dependencies update.
// This can improve performance.
// 147. lekcija, section 9
// 368. lekcija, section 21 - da ne bi vrteli runThunk beskonacno, vrapujemo ga u useCallback
// kada hocemo da ne moramo ponovo da pravimo funkciju koja je u nekoj funkciji, nego da imamo referencu na nju, posto se vise puta poziva

// react fragment, to koristimo kad necemo da se napravi novi html elemenat

// ako hocu da pristupim redux store-u u konzoli
window.store = store;

tsSnippets.ts

//tsc --init
//generise tsconfig.json

// tsconfig.json

// outdir i rootdir folderi za src i build

// tsc -w
// gleda src dir i kompajlira cim se nesto promeni

// konfig za pokretanje vise skripti odjednom, sa jednom komandom
// {
//   "name": "sort",
//   "version": "1.0.0",
//   "main": "index.js",
//   "scripts": {
//     "start:build": "tsc -w",
//     "start:run": "nodemon build/index.js",
//     "start": "concurrently npm:start:*"
//   },
//   "keywords": [],
//   "author": "",
//   "license": "ISC",
//   "dependencies": {
//     "concurrently": "^8.0.1",
//     "nodemon": "^2.0.22"
//   }
// }

// typeof vs instanceof