쉽게 이해하는 javaScript 객체지향&ES6 신문법②

 

변수에 대한 정의

var 이름 = "Kim";
let 번호 = "000";
const 주소 = "서울";
const 영화 = {제목 : "명량", 개봉 : "0000.00"};

- 호이스팅 현상 : 변수나 함수의 선언을 스크립트 맨 위로 끌고 오는 현상

	재선언	재할당	범위
var	O	O	fucntion
let	X	O	{ }
const	X	X	{ }

- var 변수는 호이스팅 시 undefined이 자동으로 할당

- const 변수는 오브젝트 내부의 값은 변경 가능(Ex.const 오브젝트 = { 이름 : '만두'; } => '만두'는 변경 가능

- 수정불가능한 오브젝트를 만드는 메소드 : Object.freeze(select);

 

 

변수 퀴즈

<div style="display : none">모달창0</div>
<div style="display : none">모달창1</div>
<div style="display : none">모달창2</div>

<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>

<script>

    var 버튼들 = document.querySelectorAll('button');
    var 모달창들 = document.querySelectorAll('div');


    for (var i = 0; i < 3; i++) {   // 정답 : var를 let으로 바꿔주기
        버튼들[i].addEventListener('click', function () {
            모달창들[i].style.display = 'block';
        });
    }
    // 작동 순서
    // 1. var i가 호이스팅돼서 먼저 선언됨
    // 2. 반복문이 돌면서 '버튼들[0].addEventListener('click', function () {', '버튼들[1].addEventListener('click', function () {'' 등 배열만큼 코드는 만들어짐
    // 3. 하지만 안의 모달창들...코드는 실행이 안됨(위의 코드가 클릭했을 때 실행되기 때문에)
    // 4. 결국 반복문을 돌면서 i는 4가 됨
    // 5. 버튼들[2]를 클릭했을 때 실행되는 코드는 '모달창들[4].style...'가 됨.
    // 6. 문제의 원인은 i를 전역변수로 선언하면 반복문 돌때 초기화되지 않기 때문에 생긴 문제

    for (var i = 1; i < 6; i++) {   // 정답 : var를 let으로 바꿔주기
        setTimeout(function () {
            console.log(i);
        }, i * 1000);
    }
    // setTimeout이 실행되길 기다리는동안 var i의 값은 5까지 올라감.
</script>

 

 

 

Template literals / tagged literals

<script>
    var pants = 20;
    var socks = 100;

    function 해체분석기(제품, 갯수1, 갯수2) {
        console.log(제품[1] + 갯수1 + ", " + 제품[0] + 갯수2)
    }
    해체분석기 `바지${pants} 양말${socks}`;
</script>

<script>
    var pants = 20;
    var socks = 100;

    function 해체분석기(제품, 갯수1, 갯수2) {
        if(갯수1 == 0) {
            console.log(제품[0] + "다팔렸어요" + 제품[1] + 갯수2)
        } else {
            console.log(제품[0] + 갯수1 + ", " + 제품[1] + 갯수2)
        }
    }
    해체분석기`바지${pants} 양말${socks}`; 
</script>

- 백틱을 사용하면 `${...}`을 사용해 변수 출력 가능.

기존	백틱
"백틱을 사용하지 않으면 " + 변수 + " 플러스를 사용해야한다"	백틱백틱을 사용하면 ${변수}만으로 출력가능백틱

- 백틱을 사용하면 엔터키를 활용해 값을 넣을 수 있음.

- 백틱을 사용해 tagged literals활용.

변수를 기준으로 잘라서 문자열은 배열로 담기고

(`제품[0]`에는 바지, `제품[1]`에는 양말이 담김)

변수들은 각각 파라미터를 만들어서 담아줘야 함.

(해체분석기(제품, 갯수1, 갯수2) => 변수만큼 파라미터를 만들면 갯수1, 갯수2에는 ${pants}, ${socks}가 각각 담김)

- tagged literals의 장점 : 텍스트 배치를 유연하게 할 수 있음.