자바스크립트(ES6)에서 var, let의 차이 그리고 클래스 상수멤버 선언

자바스크립트에서 변수를 선언할 때 사용되는 예약어중 'var', 'let'의 차이를 보여주는 코드를 짜봤다. 아울러 클래스 멤버변수로 상수값을 선언하는 방법도 같이 짜봤다.

var, let의 네임스페이스의 차이

함수에서 선언된 변수가 함수 바깥에서 보이는지?

function __declare()

{

var myvar = 10;

let mylet = 20;

}

__declare();

try { console.debug("accessable myvar=" + myvar); } catch(e) { console.error(e); }

try { console.debug("accessable mylet=" + mylet); } catch(e) { console.error(e); }

실행결과는...

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:29 ReferenceError: myvar is not defined

    at var_let (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:29)

    at __onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:8)

    at onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55)

var_let @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:29

__onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:8

onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:30 ReferenceError: mylet is not defined

    at var_let (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:30)

    at __onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:8)

    at onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55)

var_let @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:30

__onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:8

onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55

if문등 블럭에서 선언된 변수일 경우?

if ( true )

{

var myvar2 = 100;

let mylet2 = 200;

}

try { console.debug("accessable myvar=" + myvar2); } catch(e) { console.error(e); }

try { console.debug("accessable mylet=" + mylet2); } catch(e) { console.error(e); }

실행결과는... var로 선언된 변수는 접근 가능하지만 let으로 선언된 것은 접근이 안된다. 네임스페이스의 차이가 두 변수 선언방식의 차이점이다.

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:38 accessable myvar=100

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:39 ReferenceError: mylet2 is not defined

    at var_let (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:39)

    at __onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:8)

    at onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55)

var_let @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:39

__onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:8

onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:11

class 멤버변수로 상수 사용하기

상수 선언

class TestConstant

{

static get MAXROW() { return 300; }

constructor()

{

try { TestConstant.MAXROW = 10; } catch(e) { console.error(e); }

}

}

생성자(constructor)함수내 코드는 뒤에서 설명하는 테스트용임. class 멤버 변수로 const 선언은 컴파일 오류가 난다. 이 방식이 가장 적합한 듯 한데, 어색하게도 함수를 선언했지만, "TestConstant.MAXROW" 처럼 변수인 듯 사용 가능하다.

값을 설정했을 때

try { TestConstant.MAXROW = 10; } catch(e) { console.error(e); }

console.debug("TestConstant.MAXROW=" + TestConstant.MAXROW);

//

console.info("\n\n==== try set a static thing in class in class's methods =============")

var cc = new TestConstant();

윗 부분의 마지막 코드 객체를 생성하는 이유는 해당 객체의 constructor함수를 호출 객체 내부에서 값을 설정할 경우를 테스트하기 위해서이다. 이런 테스트를 하는 이유는 현재 크롬 버전에서는 다르게 반응 하기 때문이다. 객체 밖에서 값을 설정할 경우에는 오류를 출력하지 않는다. 그러나 객체 내에서 설정할 경우에는 오류가 발생한다.

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:13 TestConstant.MAXROW=300

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:16 

==== try set a static thing in class in class's methods =============

test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:48 TypeError: Cannot set property MAXROW of class TestConstant

        {

            static get MAXROW() { return 300; }

            constructor()

       ...<omitted>... } which has only a getter

    at new TestConstant (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:48)

    at __onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:17)

    at onload (test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55)

TestConstant @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:48

__onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:17

onload @ test_code.html?_ijt=c23gpbi2s32448eei1pvduhulc:55