[JavaScript] 변수

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로

잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다.

 

변수(Variable)

 

변수란 값을 저장하기 위한 메모리공간 또는 그 이름을 일컫는 말이다.

변수에 해당하는 메모리 공간에 값을 저장하는 것을 할당(대입)이라 하고 저장한 값을 읽는 것을 참조라고 한다.

또한 변수에 값을 최초로 할당하는 것을 초기화라고 한다.

 

JavaScript에서의 변수

 

자바스크립트는 대표적인 동적타이핑 언어로 변수를 선언할 때 정적타이핑 언어와 달리 타입(c, c++, java에서 int, float, char...등)을

선언하지 않고 변수에 값을 할당하면 자동적인 해당 타입으로 설정된다. 또한 자바스크립트에서는 키워드를 통해 변수를 선언하는데

var, let, const 3가지의 종류의 키워드가 존재한다.

 

호이스팅

 

호이스팅이란 코드를 실행하는 런타임과정 이전에 코드를 파싱해 선언문을 미리 처리 하는것으로 해당 코드 맨위에 선언을 진행한 것과 같은 효과를 낸다. 하지만 변수의 선언과 초기화를 같이 실행한다고 해서 초기화한 부분이 미리 처리되는 것은 아니다.

console.log(a) // undefined

var a = 3;

console.log(a) // 3

위 코드를 보면 선언한 적 없는 변수 a를 참조하고 이후 선언과 초기화 후 a를 실행하는 것처럼 보이지만 호이스팅으로 인해

 

var a;
console.log(a); // undefined

a = 3;

console.log(a); // 3

위 코드와 같은 형태로 동작한다. 

또한 여기서 중요한 사실을 알 수 있는데 자바 스크립트는 변수를 초기화 하지 않을 경우 엔진에서 자동으로 값을 undefined으로 사전에 초기화 한다는 것이다.

하지만 초기화 되지 않아 undefined로 설정되어 있는 값을 참조할 경우 예측하지 못한 실수를 하게 될 수 있다.

디버깅하는데 많이 노력이 필요할 수 있으니 각별이 주의해야 한다.

 

 

값의 할당과 재할당

 

자바스크립트는 변수의 이름과 메모리 주소가 1 : 1로 맵핑되어 있는 형태로 존재한다.

변수 a -> 메모리 주소: 0x001 값: 10     형태로 기존에 할당되어 있을 때 

변수에 새로운 값 15를 재할당하면 기존 메모리 주소:0x001 값: 15로 변경되는 것이 아니라

메모리 주소: 0x001 값: 10 은 그대로 존재하고     

변수 a -> 새로운 메모리 주소: 0x005 값: 15.  형태로 저장되게 된다.

남아 있는 기존 메모리 주소의 값은 이후 자바스크립트에 내장되어 있는 가비지 컬렉터가 메모리를 정리한다.

 

변수 선언 키워드 var

 

var는 자바스크립트의 탄생과 함께 지금까지 이어져온 자바스크립트의 변수 선언 키워드로 여러가지 단점들이 존재하여 현재는 기존 레거시들을 위해 계속 지원하고 있지만 let const를 쓰는것이 권장된다.

 

그렇다면, 어떤 단점들을 가지고 있을까?

var의 대표적인 특징의 함수 단위 스코프를 지원한다는 것이다. 이는 기존에 다른 프로그래밍 언어를 배우고 넘어온 사람들에게 여러 실수들을 유발하게 만들고 예측하지 못한 에러를 일으킨다.

 

또한 키워드가 없이 이름과 할당 연산자(=) 을 사용해서 값을 할당하면 전역변수를 선언한 것과 유사한 효과 있는데 선언된 적이 없는 변수라면 해당 변수는 전역객체의  프로퍼티의 key (변수이름) : value (변수의 값) 형태로 저장되기 때문이다.  

 

키워드 없이 변수를 선언할 수 있게 하는 특징은 굉장히 큰 문제를 야기하는데

var answer = '정답'

anwser = '오답' // answer를 anwser로 잘못 입력

console.log(answer) // 정답

 

위 코드를 작성한 사람은 출력값이 '오답'으로 나올 것을 예측했을 지 모른다. 하지만 잘못된 변수명을 입력해도 자바스크립트는 이를 잘못되었다고 판단하지 않기 때문에  해당하는 잘못된 부분을 찾는데 굉장한 시간을 소요하게 될지도 모른다.

 

키워드 let, const

 

let은 다른 프로그래밍 언어들의 변수 선언과 같은 역할을 한다.

이는 블록단위 스코프를 지원해 선언된 블록 밖에서는 값을 참조할 수 없다. 

{
	var v1 = 3;
	let v2 = 4;
}

console.log(v1); // 3
console.log(v2); // Error!

 

const는 자바스크립트의 상수변수다. const 키워드로  선언을 하게 될 경우 선언과 동시에 값을 초기화 하여야 하고 해당 값은 재할당 될 수 없다. 여기서 중요한 사실이 존재하는데 자바스크립트에서 재할당이란 새로운 메모리주소에 값을 할당하고 그 주소에 변수 이름을 맵핑하는 과정이다. 원시값을 변수에 할당하게 되면 그 값을 변경하려 할 때, 재할당이 일어나므로 const로 선언했을 경우 변경이 불가하다 하지만 객체 타입은 변수에 객체 타입의 레퍼런스가 저장되어 있어 객체 타입에 값이 변경하는 것은 변수에 저장되어 있는 객체의 주소값의 위치의 데이터를 변경하는 것으로 실제 const에 들어있는 객체 타입의 주소값이 변경되는 것은 아니므로 변경이 가능하다. 

const arr = {};
arr.a = 1;

console.log(arr); // { a: 1}