Code do not understand

[AndersL]

Hi,
I read from other thread this code.

const rec = localStorage.mySavedRecipes || '';

if(rec){
    const rr = rec.split(';;')
    document.querySelector('.post:last-of-type').insertAdjacentHTML( 'afterend', rr.filter( n => n.length ).map( x => x.split('|') ).map( s => `
    <div class="post stored">
                        <h4 id="${formatContent(s[0])}">
                        ${s[0]}
                    </h4>
                        <div class="contentarea">
                            <p>
                                ${s[1]}
                            </p>
                        </div>
                    </div>
    ` ).join('') );
    document
       .querySelector('#recipe-list')
          .insertAdjacentHTML(
             'beforeend',
                [...document.querySelectorAll('.stored h4')]
                   .map( x => `<li><a href="#${x.id}">${x.textContent}</a></li>` )
                      .join(''));
}

Can somebody explains it for me?

 

[FResher]

Hello !

this script get a recipe, and build a plan of this recipe in Html.

the Javascript is using 'extension functions' : [ filter / map / join ] to build a basic design and structure of recipe in the var 'rec' and 'rr'

 

[Ashley]

can

 

[AndersL]

Can you explain in more detail

 

[Padonak]

Can you explain in more detail

Hope you'll understand my english:

/*
Here we check if there exists localStorage item named mySavedRecipes
If yes we put this item value into constant 'rec'
Otherwise constant rec will be equal to ''
*/
const rec = localStorage.mySavedRecipes || '';

/*
If constant rec contains something
*/
if(rec){
    /*
    Let's split the string from constant rec by ';;' delimiter
    Splitting returns an array, so we can use array's methods
    */
    const rr = rec.split(';;')
    /*
    Let's find the very last(last-of-type) element of the document having class 'post'
    and insert after this element the result of consecutive calls of several array's methods:
    - 'filter' returns an array of non-empty values
    - the first 'map' returns an array from non-empty rr values splitted by '|' delimiter
    - the second 'map' returns an array of html blocks using splitted values from the previous 'map'
    - 'join' joins these blocks together and returns the result
    */
    document.querySelector('.post:last-of-type').insertAdjacentHTML( 'afterend', rr.filter( n => n.length ).map( x => x.split('|') ).map( s => `
    <div class="post stored">
                        <h4 id="${formatContent(s[0])}">
                        ${s[0]}
                    </h4>
                        <div class="contentarea">
                            <p>
                                ${s[1]}
                            </p>
                        </div>
                    </div>
    ` ).join('') );
    document
       .querySelector('#recipe-list')
          .insertAdjacentHTML(
             'beforeend',
             /*
             Here we get an array of '<h4>' elements from those blocks inserted above
             build some new links from this array using 'map'
             join these links
             and insert them into 'menu'
             */
                [...document.querySelectorAll('.stored h4')]
                   .map( x => `<li><a href="#${x.id}">${x.textContent}</a></li>` )
                      .join(''));
}

 

[AndersL]

Thanks