자바스크립트 변수 선언 종류

변수란?

숫자, 문자처럼 다양한 값들을 저장하는 공간을 의미합니다. 

 

자바스크립트에서 변수 선언하기 

프로그래밍에서 A라는 변수를 처음 만들때 "A라는 변수를 만들거야!"라고 하는 것이 바로 변수 선언입니다. 

자바스크립트에서는 var A = "내용"; 등으로 쓰입니다. 

여기서 "var"는 자바스크립트의 변수 선언 방식 중에 하나로, 가장 오래된, 원래부터 있던 방식입니다. 

이외에도 let, const 라는 방식이 있습니다. 

 

그럼 변수를 선언하는 방식과 이 세가지 (var, let, const)의 차이를 알아보겠습니다. 

 

var : 가장 기본적인 변수 선언 방식, 이것에 익숙한 사람이 많다. 

 

var 변수이름; 변수 선언 (값이 지정되지 않아 Undefined라는 특수한 값을 가진다.  )

var 변수이름 = 변수 값; 변수 선언과 동시에 값을 지정해 준다.  

변수이름 = 변수 값; 변수의 값을 바꾸거나, 지정해준다. 

 

var를 이용해 변수를 선언하면 "function-scoped" 방식으로 선언된다고 합니다. 

무슨말인지 모르겠는게 정상...입니다.

이말이 뭐냐면 함수 단위로 선언된다는 것으로 이해하면 될 것 같습니다. 

예를들어 

<script>

  var a = 0; //a를 선언하고 0으로 지정

  console.log(a); // 0이라고 출력됨

  function test(){ //test라는 함수 만들기

    console.log(a); //0이라고 정상 출력됨

    var b = 10; 

    console.log(b); //10이라고 정상 출력

  }

  test(); //test 함수 실행

  console.log(b); //오류남... b는 없는 값

</script>

 

위와 같이 특정 함수 내에서 쓰인 값은 그 안 범위 내에서만 쓸 수 있고, 그 범위 밖에서는 쓸 수 없습니다. 

그래서 script 함수 기본에서 선언된 a는 그 안 범위인 함수에서도 쓸 수 있지만, 반대로 함수에서 쓰인 b라는 변수는 그 밖에서는 없는 값처럼 오류가 나는 것 입니다!

 

또한 var는 변수에 접근할 수 있는 위치에서는 값을 읽고 쓰기가 모두 가능합니다. 

또한 재선언도 가능하여서 변수가 선언되어 있어도 같은 이름의 변수를 선언하면 오류가 나지 않고 값이 재할당됩니다. 

여기서 재할당은 변수에 쓰기와 같다고 생각하면 됩니다. 값을 바꾸는 거니까요.... (덮어쓰기?)

 

 

그럼 var와 let과 const는 무엇이 다를까요?

일단 var와 달리 "block-scoped" 방식으로 선언됩니다. 

즉 { }으로 분리된 블록 단위로 선언된다는 것입니다. var는 함수로 분리가 되었다면 let과 const는 함수 외에도 for처럼 { }을 이용하여 블록이 구분되면 달라진다는 말입니다. 

즉 위와 같은 경우에서 함수 외에도 for 등의 안에서 선언한 경우 밖이나 다른 블록에서 쓸 수 없습니다. 

<script>

  var a = 0; //a를 선언하고 0으로 지정

  console.log(a); // 0이라고 출력됨

  function test(){ //test라는 함수 만들기

    console.log(a); //0이라고 정상 출력됨

    var b = 10; 

    console.log(b); //10이라고 정상 출력

  }

  test(); //test 함수 실행

  console.log(b); //오류남... b는 없는 값

  let sum = 0;

  for (let i = 0; i <=5; i++){ //for문에 대한 설명은 관련 게시물 참고

    sum += i; //sum에 i만큼 더한다 정상동작

    console.log(sum);//정상출력

    console.log(i); //정상출력

  }

  console.log(sum);//정상출력

  console.log(i); //오류 : 변수없음

</script>

즉 위와 같이 for 등 { }으로 구분된 블록에서도 구분된다는 것입니다. 

 

그렇다면 let과 const 사이의 차이는 무엇이 있을까요?

바로 재할당(쓰기)이 가능한지 여부의 차이입니다. 

let은 값을 바꾸기 위해 sum = 1, sum +=1 등의 동작을 정상적으로 수행하지만

const는 재할당이 되지 않아 값을 변경하려고 하면 오류가 납니다! (상수와 비슷한 느낌)

그라나 const에서도 단순한 값(숫자, 문자, bool, null 등) 변경이 되지 않지만 

배열이나 객체에서는 내부 값을 변경할 수 있다고 합니다

 

예

 

<script>

  const a = {};

  a.number = 5;

  console.log(a); // 출력 되는 값 : {number : 5}

</script>