DOM elements :

1. insertAdjacentHTML

  • to add at the top or at the end in a container, it has more options (check mdn for that).
const html = `<div class="movements__row">...</div>`;
containerMovements.insertAdjacentHTML('afterbegin', html);

2. to empty a container before adding elements in it

containerMovements.innerHTML = '';

3. Styles

  • styles props in CSS are converted into camelCase notation when used in JS.
  • e.g. : font-size: => fontSize

String Manipulation :

1. Extracting a given number of words from a text piece

{"Note that the development build is not optimized.".split(' ').slice(0, 3).join(' ')} // -> Note that the

Hoisting :

Pasted image 20240306012537.png

  • Note that the function is hoisted, and therefore we can call/use it before declaring/defining it whereas the const handleSelectMovie is an arrow function and do not undergo hoisting.

Objects :

To get all the keys of an object :

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
  d: {
    e: false,
    f : {
  		g: {
          h: "hello"
        }
    }
  }
};

const keyify = (obj, prefix = '') => 
  Object.keys(obj).reduce((res, el) => {
    if( Array.isArray(obj[el]) ) {
      return res;
    } else if( typeof obj[el] === 'object' && obj[el] !== null ) {
      return [...res, ...keyify(obj[el],el)];
    }
    return [...res, prefix ? prefix : null, el].filter(el => el != null);
  }, []);

console.log(keyify(object1)) // > Array ["a", "b", "c", "d", "e", "g", "h"]