[국비 프론트 수업 자바스크립트] 알아야 할 문법 정리

서버사이트 렌더링(thymleaf) 클라이언트사이드 렌더링(react)

*오늘의 중요 포인트*
비구조화 할당 
computed property names 리액트 배울때 중요하다 고함


{ 
  let i = 0; 
  const obj = { 
    [`지우${++i}`]:i, 
    [`지우${++i}`]:i, 
    [`지우${++i}`]:i, 
  }; 
  console.log(obj); 
} 
폼에 있는 데이타들을 일괄적으로 받아올 때 쓴다고 함 

spread 와 rest 이것도 많이 쓴다고 함
spread  리액트 하는 내내 중요하다고 함 

리액트 
데이타가 변경 됬다는 기준 이전 객체와 다른가

 

호이스팅 - 면접에서 많이 나옴

---

오늘 진도 나간 내용을 기록하자

/*
    자바스크립트의 Scope : 변수 가 유효한 범위
    JS 의 Scope 는 총 3가지

    Global (전역) Scope: 코드의 모든 범위에서 사용 가능
    Function (함수) Scope: 함수 안에서만 사용 가능
    Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용 가능

    let, const 는 block scope 
    var 는 function scope

    ES6 부터 등장한 const, let 를 더 선호하는 이유 (추천)
        function scope 보다는 
        block scope 가 훨~씬 직관적이기 때문!

    ※ 단. 기존 (과거의) 코드, 라이브러리를 사용하는 경우가 있슴
*/

---

const outer1 = 100
let outer2 = 200
var outer3 = 300
outer4 = 400

------------------


{
    console.log("블럭안") 
// let, const 바깥블럭에서 선언한건 안쪽 블럭에서 사용 가능
    console.log(`\touter1 = ${outer1}`);
    console.log(`\touter2 = ${outer2}`);
    console.log(`\touter3 = ${outer3}`);
    console.log(`\touter4 = ${outer4}`);

    { outer2++
        { outer2++
            { outer2++
                console.log(`\t\touter2 = ${outer2}`);
            }
        }
    }

    // 블럭안에서 선언
    const name1 = '햄스터';
    let name2 = '사과';
    var name3 = '바나나';
    name4 = '딸기';

    console.log('블럭 안')
    console.log(`\tname1 = ${name1}`)
    console.log(`\tname2 = ${name2}`)
    console.log(`\tname3 = ${name3}`)
    console.log(`\tname4 = ${name4}`)
}

---

호이스팅

/*
    변수(함수) '선언'이 위로 올라오는 증상   
    이러한 현상을 hoisting 이라 하며, 

   hoisting 
     아래에 있는 '선언'을(만) 끌어올린다.

   hoisting 때문에 동작의 오류처럼 보이는 증상 겪게 됨

   Hoisting
    https://developer.mozilla.org/ko/docs/Glossary/Hoisting

    'hoisting' 현상은 JavaScript 처음부터 있어왔던 증상이다.
    그러나, 위 'hoisting' 이라는 용어 자체는 
    ES2015(ES6) 이전에는 사용되지 않았음
*/