자바스크립트 JavaScript : 변수(var let const)

자바스크립트 변수는 이렇게 씁니다. 

var 이름 = 'Kim';

 

변수는 자료를 임시로 저장하는 공간입니다. 

1. var이라는 키워드 오른쪽에 작명을 하시고, 변수에 저장할 자료를 등호로 집어넣어주시면 됩니다. 

2. 오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있습니다. 

3. 그리고 var 이름이라는 부분은 선언, 이름 = Kim 이라는 부분은 값 할당이라고 전문 용어로 표현합니다. 보통 변수만들 땐 두개를 동시에 사용합니다. 

4. 그리고 변수를 만들 땐 var, let, const라는 3개 키워드를 이용가능합니다. 

 

3개 키워드마다 특징이 있습니다. 변수의 선언, 할당, 범위에서 차이가 좀 있는데 같이 알아보도록 합시다.  

 

변수의 선언(var : 재선언 O / let, const : 재선언 X)

var 이름;
let 나이;
const 성별;

 

이렇게 var, let, const 키워드를 이용해 변수를 만들겠다고 선언할 수 있습니다. 

그런데 var 키워드는 재선언이 가능하고

let, const 키워드는 재선언이 불가능합니다. 

let 나이;
let 나이; //에러

const 성별 = '여자';
const 성별 = '남자'; //에러

 

let, const로 만들면 이렇게 같은 이름의 변수를 두번 이상 재선언할 수 없습니다. 에러가 납니다. 

 

변수의 값 할당(var, let : 재할당 O / const : 재할당 X)

변수에 값을 할당한다는게 뭔소리냐면

var 이름;
이름 = 'Kim';

 

▲ 둘째줄에서 이렇게 만들어놓은 변수에 'Kim' 이라는 값을 집어넣는걸 할당이라고 합니다. 

 

할당도 선언과 동시에 할 수 있고요. 

var 이름 = 'Kim';

 

근데 변수를 var, let으로 만들면 재할당이 가능하고 const로 만들면 값 재할당이 불가능합니다. 

const로 변수 만들면 나중에 등호를 이용해 값 변경하는게 안된다는 소리입니다. 

 

const는 애초에 constant의 약자로 바뀌지 않는 일정한 값(상수)을 뜻합니다.

 

그러나  const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능합니다. 

const 오브젝트 = { 이름 : 'Kim' }
오브젝트.이름 = 'Park'; //가능

 

위의 예제는 엄밀히 말하면 변수를 재할당한게 아니기 때문에 가능합니다. 

이유는 const 변수 자체를 재할당 한게 아나라 오브젝트 라는 상수 안에 {object} 안의 값을 변경한 것이기 때문에, const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능합니다. 

 

완전 변경불가능한 오브젝트를 만들고 싶다면

Object.freeze()라는 자바스크립트 기본함수가 있습니다.

Object.freeze() 소괄호에 오브젝트를 담으시면 불변의 Object가 완성됩니다. 

 

변수의 범위( var : function / let, const : { } )

변수를 만들면 존재범위가 있습니다. 

var 변수는 존재범위가 function입니다. 

let, const 변수는 존재범위가 거의 모든 {중괄호} 입니다. (for, if, function 등)

function 함수(){
  var 이름 = 'Kim';
  console.log(이름); //가능
}

console.log(이름); //에러

▲ 위의 예제처럼 var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있습니다. 

function 바깥에서 부르면 없다고 나옵니다. 

 

if ( 1 == 1 ){
  let 이름 = 'Kim';
  console.log(이름); //가능
}

console.log(이름); //에러

▲ 위의 예제처럼 let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있습니다. 

중괄호 바깥에서 부르면 없다고 나옵니다. 

 

자바스크립트 변수, 함수의 Hoisting 현상

자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상이 일어납니다. 

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석합니다.

그게 Hoisting입니다. 

 

function 함수(){
  
  console.log('hello');
  var 이름 = 'Kim';
  
}

 

이렇게 함수 내에서 변수를 만들었다고 칩시다. 

근데 자바스크립트가 이 코드를 해석하는 순서는 이렇게 됩니다. 

 

function 함수(){

  var 이름; 
  console.log('hello');
  이름 = 'Kim';
  
}

 

변수의 선언 부분을 강제로 변수의 범위 맨 위로 끌고가서 해석하고 지나갑니다. 

우리 눈에 보이진 않지만 자바스크립트는 코드 동작 순서가 이렇습니다.

암튼 이게 Hoisting 현상입니다. 

함수를 만들어도 똑같고, 변수를 let, const로 만들어도 똑같습니다. 

 

그럼 이 코드는 실행결과가 어떻게될까요? 

console.log(이름);
var 이름 = 'Kim';
console.log(이름);

 

콘솔창에 첫째로는 undefined가 출력되고

둘째로는 Kim이 출력됩니다. 

왜냐면 Hoisting 때문에 

var 이름;
console.log(이름);
이름 = 'Kim'
console.log(이름);

이런 순서로 코드가 실행되니까요. 

 

undefined라는건 변수가 선언은 되었는데 값을 아무것도 할당하지 않았을 때 undefined가 출력됩니다. 

일종의 자료형같은 것인데 그냥 정해지지않은 값이라고 생각하면 됩니다. 

하지만 let, const 변수의 경우 Hoisting이 일어나긴 하는데 약간 이상한 방식으로 일어납니다. 

그 이유는 let, const는 hoisting시 undefined 가 자동으로 할당이 안됩니다, 그래서 콘솔창을 보면 에러가 출력됩니다.