[JS] 자바스크립트, 변수(Variable)에 대해서

변수를 영어로 하면 Variable이다.

그리고 variable은 "다양한, 변화할 수 있는"이라는 뜻을 가지고 있다,

즉,  변수(變數)는 수학에서 수식에 따라서 변하는 값을 의미한다,

w3schools에서 variable에 대해 검색하면 다음과 같이 나온다.

"JavaScript variables are containers for storing data values."

즉, 자바스크립트의 변수는 데이터 값을 저장하는 데 쓰이는 공간이다.

그리고 그 값은 계속해서 변할 수 있다.

변수는 variable의 앞 3글자를 따서 var라는 형태로 선언된다.

var x = 1;

저렇게 선언하는 순간 컴퓨터의 메모리에는 x라는 공간이 생겨나고 그 공간에 1이라는 숫자가 할당된다.

변수의 종류에는 기본형(원시형)과 참조형 2가지가 있다.

1. 기본형 변수 - 원시 타입(primitive type)

1) Number 타입 : type of Number

var x = 1;

2) String 타입 : type of String

string은 문자열을 뜻한다.

단순히 abcd와 같은 문자열뿐만 아니라 "", '' 등으로 감싸여진 숫자도 문자열로 인식된다.

var x = "안녕하세요";
var y = "123";

3) Boolean 타입 : type of Boolean

Boolean은 true or false를 말한다.

var x = true;
var y = false;

4) undefined 타입 : type of undefined

undefined는 값이 할당되지 않은 상태를 말한다.

var x;

x라는 변수가 선언되어 공간이 생겼으나 아직 아무런 데이터도 할당되지 않았기때문에 

x를 출력하면 undefined가 출력된다.

5) null 타입 : type of null

null은 어떤 값이 의도적으로 비어있음을 뜻한다.

undefined와 비슷해보이지만 undefined는 변수에 값이 할당되지 않은 것이고,

null은 변수에 null이라는 빈값이 할당된 것이므로 미묘하게 다르다.

var x = null;

아래와 같이 변수를 선언하고 "type of 변수"의 형태로 console에 출력해보면 

해당 변수의 타입이 출력되는데

값이 할당되지 않은 typeUnde는 undefined로 출력되나

typeNull은 Object가 출력되는 것을 확인할 수 있다.

(null은 원래 null type이라는 별도의 타입이지만 

자바스크립트에서 typeof null을 출력하면 object라고 출력된다.)

var typeNum = 100;
var typeStr = "Hello";
var typeBoo = true;
var typeUnde;
var typeNull = null;

console.log(typeNum +' => '+ typeof typeNum);
console.log(typeStr +' => '+ typeof typeStr);
console.log(typeBoo +' => '+ typeof typeBoo);
console.log(typeUnde +' => '+ typeof typeUnde);
console.log(typeNull +' => '+ typeof typeNull);

2. 참조형 변수 - 참조 타입(reference type)

1) 함수형 : type of function

var f = function() { alert(‘hi’) }

2) 객체형 : type of Object

var g = {
  v1 : 10,
  v2 : 20
}

3) 배열형 : type of Object

var h = [10,20,30];

4) dom : type of Object

var j = document.getElementById(“d1”);

기본형과 참조형은 다음과 같은 차이가 있다.

기본형(원시형)은 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 데이터 값을 보관한다.

반면 참조형 데이터는 크기가 정해져있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장되지 않는다.

오로지 데이터에 대한 참조만 할 뿐인데 다음의 예제를 보면 이해하기 쉽다.

var a = 100;
var b = a;
b = 200;

console.log(a, b);

a라는 메모리 공간이 만들어졌고 100이란 값이 할당되었다.

그 다음 b라는 공간을 만들고 거기에 a를 복사했다.

그 후 b라는 공간에 200이란 값을 재할당했다.

이 경우 console에 a, b를 출력하면 각각 100, 200이 출력된다.

즉, a를 b에 할당하는 순간 a 와 b는 각각의 독립된 공간이 된다.

반면 a에 참조 타입 데이터인 배열을 할당하고

b에 a를 복사한 다음 b의 0번째 요소에 5를 재할당하였다.

var a = [1, 2, 3];
var b = a;
b[0] = 5;

console.log(a, b);

그리고 a와 b를 각각 출력하는 경우 다음과 같이 출력된다.

b뿐만 아니라 a배열의 0번째 값도 5로 변한 것을 볼 수 있다.

즉, a 배열의 값이 b에 복사되는 것이 아니라 a의 주소값이 b에 복사되는 것이다.

var a = [1, 2, 3];
var b = a;

즉, var b = a라고 선언하는 순간에 a와 b는 같은 메모리 공간을 공유하게 되는 것이다.