상수와 변수 , const VS var , let

자바스크립트에서 상수와 변수(let)은 타언어에 비해 비교적 최근에 도입되었다. 그 전에는 자바스크립트로 변수를 지정하고 값을 할당할때는 var 하나로 값을 전부 할당했었는데 es6문법이 새로도입된 이후 그럴 필요가 없어졌다. 

 

상수 const

상수는 변화하지 않는 값이다. 초기선언과 동시에 할당하지 않으면 값이 변하지 않는 수를 의미 한다.

 

왜 이런 상수가 필요할까 ? 프로그램에서 항상 변화하면 안되는 값들을 지정하는데  var 로 지정하게 되면 사용자들이 임의로 변경할 수 있는 여지가 있게된다. (var 변수를 캡슐화를 통해 재 할당을 방어할 수 있긴하다.)

 

상수의 사용은 변수명 앞에 const라는 접두어를 붙여서 사용한다. 

 

const HELLO_WORLD = "HELLO_WORLD"

const TEN = 10;

const MAX_SIZE = 10;

 

상수의 변수명 정할때는 대문자와 언더바를 이용해서 변수명을 정한다. 이렇게 하면 코드상에서 변수와 상수의 구분을 더욱 명확하게 할 수 있다. 

 

상수는 다음과 같은 상황에서 오류를 뱉어 낸다. 

const TEN = 10;
TEN = 20;

const TWO;
TWO = 10;

const HELLP ="HELLO"
const HELLP ="GOOD"

const GOOD;
GOOD = "GOOD";

 

상수에 값을 할당한 다음 재할당을 한 경우, 이미 선언된 상수를 재 선언 해서 사용하는 경우, 값을 할당 하지 않은 상수에 할당하는 경우

 

상수는 항상 값이 변하면 오류를 뱉어내니 조심해야 합니다. 

 

변수 var , let

var 키워드와 let은 변수를 선언 할때 사용한다. const와 달리 선언 후 값을 재 할당을 해도 오류를 뱉어 내지 않고 값이 변하는 수입니다. 

 

사용은 다음과 같이 합니다.

 

 

var hello = "Hello"
var world = "world"

var hello_world = hello + world;

let ten = 10;
let blue = "blue";

ten = 12;

 

 변수명 앞에 let과 var 를 이용해서 변수를 설정하려면 상수와 마찬가지로 변수명 앞에 let과 const 를 붙여서 선언 하면 된다. 

 

let과 var 의 차이 

 

책 Ecamscript6 저자 김영보 출판사 루비페이퍼에 따르면 let키워드에는 다음과 같은 차이가 있다고 한다. 

 

1. 함수 안에 작성한 let변수는 함수가 스코프다. 

 

2. 함수 안에 if(a=b){let spots= "축구"} 형태로 코드를 작성했을 때 spots  변수는 함수가 스코프가 아니라 if문의 블록 {} 이 스코프이다. 

 

3. 블록 {} 밖에 값은 이름의 변수가 있어도 스코프가 다르므로 변수 각각에 값을 설정할 수 있으며 변수 값이 유지됩니다. 

 

4. 블록 안에 블록을 계층적으로 작성하면 각각의 블록이 스코프이다. 

 

5. 같은 스코프에서 같은 이름의 let변수를 선언 할 수 없다. 

 

6. let 변수는 호이스팅 되지 않는다 .

 

많은 경험이 있지 않다면 이해하기 어려울 수 밖에 없다. 그러니 너무 좌절 하지 말자  ! 

 

var huge = "huge";

var huge = 10;

console.log(huge);

let hello = 10; 

let hello = 20;

 

함수나 제어문, 반복문에서 실행문장은 {}으로 감싸진다. 이 부분을 블록이라고 하는데 이 블록안에서 let변수는 재 선언 될수 없다는 것이 var와 let변수의 가장 큰 차이다. 

 

위의 코드를 보면 var 키워드로 작성된 변수 huge를 보면 console.log()의 결과가 재 할당된 10으로 나온다. 그러나 let으로 선언된 hello변수는 실행되는 이미 선언된 변수라고 오류를 뱉어낸다. 

 

function test(say){
    let hello = 10;
    console.log(hello);
    say()
}

function say(){
    let hello= 30;
    console.log(hello);
}

test(say)

 

그렇지만 이렇게 서로 다른 함수안에서 존재 할때는 선언 후 할당하는 것이 가능하다. (test에서의 hello변수와 say변수는 전혀 다른 변수이다. )

 

let hello = 20;
function test(say){
    let hello = 10;
    console.log(hello);
    say()
}

function say(){
    console.log(hello);
}

test(say)

 

만약 hello변수를 전역변수로 사용하게 되면 say가 참조하는 hello는 test함수의 hello 변수가 아니라 전역변수를 가리키게 된다 .