대바보의 끄적끄적

var,let의 차이

window객체에서 var만 사용 가능하다.

ex) this의 사용 ,this는 window오브젝트를 참조한다.

let은 scope개념이다.

특히 블록스코프에서 돋보인다.

<script type="text/javascript">
    var s = 1;
    var s = 2;
    //중복 출력해도 에러가 나지 않는다.
    let z = 1;
    //중복 출력시 에러가 난다.
    //let z = 2;
    if(s == 2){
        s = 3;
    }
    console.log(s);
    function get(){
        var s = 4;
        console.log("test : "+s);
        console.log("test : "+this.s);
        //let변수는 this사용시에 에러가 난다.
        //console.log("test : "+this.z);
    }
    get();
    //4가 출력된다.
    console.log(s);

    if(z == 1){
        //{} scope 안에서 따로 생성되는 개념
        let z = 3;
    }
    //1이 출력된다.
    console.log(z);

</script>

var와 let의 호이스팅 차이

<script type="text/javascript">
//변수 호이스팅
console.log(a);
var a = "test";

//console.log(b);
//let b = "test";
</script>

출력결과는 undefined로 나온다.

let는 에러로 나온다.

아래의 코드가 위에있는 코드의 호이스팅 개념이다.

<script type="text/javascript">
//변수 호이스팅
var a ;
console.log(a);
a = "test";

</script>

var와 let의 for문 비교

var를 사용하면 k의 출력결과는 3으로만 나온다.

let을 사용하면 클릭한 k의 숫자가 나온다.

{} 스코프개념

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var nodes = document.querySelector("ul");

    //var를 사용할 경우 k는 3이 출력된다.
    //var k 변수에 마지막에 3이 할당되기 때문이다.
    for(var k = 0; k < nodes.children.length; k++){
        var el  = nodes.children[k];
        el.onclick = function(event){
            alert("test");
            event.target.style.backgroundColor = "yellow";
            console.log(k);
        }
    }

    //let을 사용할 경우 k는 각 숫자가 출력된다.
    //scope 별로 값을 가지기 때문이다.
    for(let k = 0; k < nodes.children.length; k++){
        var el  = nodes.children[k];
        el.onclick = function(event){
            alert("test");
            event.target.style.backgroundColor = "yellow";
            console.log(k);
        }
    }


</script>

const란?

const변수에 할당된 값은 상수가 된다.

즉, 변경 불가능하다.

단 Object 형태로 선언 했을때는

{} Object는 할당할 수 없지만 obj의 프로퍼티에는 값을 할당할 수 있다.

<script type="text/javascript">
    const SPORTS = "축구";
    console.log(SPORTS);
    try{
        SPORTS = "농구";
    }catch (e){
        console.log("변경불가");
    }

    const obj = { test : "value" };
    try{
        obj = {};
    }catch (e){
        console.log("변경불가");
    }

    obj.test = "변경됨";
    console.log(obj.test);
</script>

출력결과:

축구

변경불가

변경불가

변경됨

식별자(Indentifier)란?

식별자는 무엇을 식별할 수 있는 도구로 변수,상수,함수명등이 포함된다.

식별자 이름은 반드시 글자,$,_로 시작해야한다.

- $사용 대표적예 jquery가 있다.

예약어 const,let,function등을 식별자이름을 사용할 수 없다.

대문자로 시작하지 않는다.(문법적인 오류는 아님)

varName <- carmelCase 형식으로 생성하기

var_name_test <- snakeCase 형식으로 생성하기

_로 시작하는 경우는 내부변수등에 사용한다. (특별한 상황에만 사용한다)

리터럴(literal)이란?

식별자 뒤에 할당되는 값아 value를 말한다.

let a = 30;이라면 30을 뜻한다.

숫자형,문자형등이 있다.

원시타입이란?

변수들이 같는 값(리터럴)이 문자,숫자,boolean(참거짓),null,undefined,심볼일 때를 원시타입이라고 한다.

객체(Object)타입이란?

Array,Date,RegExp,Map,WeakMap,Set,WeakSet등이 있다.

이스케이프란?

특수문자를 있는그대로의 문자로 표현할때 사용한다.

var d = "sss,\"ss\"."; 역슬래시를 사용하여 표현한다.

let,const 미리보기

ES6가 되면서 var의 문제점이 해결된 let을 사용한다.

ex)

let a = 2;

b = 2;

let aa = 100, bb = 200;

등으로 사용가능하다.

기존엔 상수라는 개념이 없었는데

const라는 상수 개념이 생겨났다.

상수란? 변하지않는 값을 말한다.

ex)

const AA_BBC_CC = 200;

상수엔 값을 할당할 수 없기때문에

AA_BBC_CC = 500; 형식으로 하면 에러가 난다.

jQuery checkbox 체크시 상위로 올리기

개발하다 checkbox에 체크하면 그 checkbox를 위로 올려달라는 요구가 

들어올때 요긴하게 사용하자.

jQuery CODE

HTML CODE