[Learning React] Chapter2. JavaScript for React.js

Chapter2 : JavaScript for React.js

2.1 Assignment variable

2.1.1 const

const pizza = true

pizza = false


console.log(pizza) 
//Assignment to constant variable.

2.1.2 let

Now, JavaScirpt provide lexical variable scoping.

      const container = document.getElementById('container')

        let div;

        for (let i = 0; i < 5; i++) {

            div = document.createElement('div')

            div.onclick = function(){

                alert('이것은 박스 #' + i + '입니다.')

            }

            container.appendChild(div)
            // var와 달리 let을 사용하면 i의 영역을 제한할 수 있다.
            // 
        }

2.1.3 Templete String

   let html5 = 'Html5'

   let article = 'article'

   let footer = 'footer'


   document.body.innerHTML = `

        <section>

            <header>

                <h1>The ${html5} Blog</h1>

            </header>

            <article>

                <h2>${article} body</h2>

            </article>

            <footer>

                <h2>${footer}ter</h2>

                <p>copyrigth</p>

            </footer>

        </section>

        `

2.2 Creating Functions

2.2.1 Function Declarations and Expressions

     today() //enable hosting



        //기본 함수 선언

        function today (){

            console.log("Today is 2022 Aug 14")

        }



        tomorrow() //disable hosting



        //함수 표현식

        const tomorrow = function() { //변수에 값을 대입

            console.log("Tomorrow is 2022 Aug 15")

        }

This example is obviously a small example. But, It occurr 'TypeError' when importing files and functions and in a project. So, you should refactor from function to assignment always.

If you see it, you can always refactor as a declaration

2.2.2 Returns, PASSING Arguments

        const createCompliment = function(name, message) {

            return `${name}: ${message}`;

        }



        console.log(createCompliment('James', 'Hello World!'))

Arrow Functions

With arrow functions, you can create functions without using the functionkeyword. You also often do not have to use the return keyword.