[웹 개발] JavaScript - 2. 자료형과 변수

 C언어나 JAVA의 경우 정적 타이핑 언어로 변수 선언 시 변수에 저장할 값의 종류에 따라 사전에 자료형을 지정하여야 했습니다.

int num = 46;
char * str = "String";

 자바스크립트는 동적 타이핑 언어로 변수의 Type annotation이 필요없이 값이 할당되는 과정에서 자동으로 변수의 자료형이 결정됩니다. 따라서 같은 변수에 여러 자료형의 값을 할당할 수 있습니다.

var str  = 'Hello';
var num  = 1;
var bool = true;

 이와같은 효과가 편해 보일수 있지만, 디버깅 혹은 해당 값의 자료형이 무엇인지 알기 힘들기 때문에 디버깅 등에서 혼란이 일어나기도 합니다. 

 그렇기 때문에 자바스크립트를 개선한 다른 언어에서는 자료형을 표시하기도 했습니다.

목차

1. 자료형

2. 변수

3. var 의 특징 '호이스팅'

4. var 의 문제점

1. 자료형(Data Type)

자료형은 프로그래밍 언어에서 문자열, 숫자,객체 등 여러 종류의 데이터를 식별하는 분류를 말합니다.

기본자료형 : 변경 불가능한 값 이며 값에 의해 전달되며, 스텍 영역에 저장됩니다.

 - Boolean

 - null

 - undefined

 - Number

 - String

 - Symbol  (ES6에서 추가)

객체형 :  기본 자료형을 제외한 나머지 값(배열, 함수, 정규표현식 등)들 모두를 객체라 하며, 참조에 의한 전달이며 힙 영역에 저장됩니다.

 - Object

2. 변수

 변수는 위치(주소)를 기억하는 저장소입니다. 위치란 메모리 상의 주소(address)를 의미합니다. 즉, 변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)입니다.

 변수를 선언할 때 'var' 키워드가 사용되며, 등호를 사용해 변수에 값을 할당합니다.

var name;     // 선언
name = 'yoo'; // 할당
var age = 30; // 선언과 할당

 값을 할당하지 않은 변수 즉 선언만 되어 있는 변수는 undefined로 초기값을 갖게 됩니다. 

 미선언 변수에 접근하면 ReferenceError가 발생합니다.

var x;
console.log(x); // undefined
console.log(y); // ReferenceError

 var키워드는 변수 선언시 생략이 가능하며, 생략 시 전역변수가 됩니다.

 앞에서 자바스크립트는 동적타이핑 언어로 값 할당시 자동으로 자료형이 결정된다고 했습니다. 이 방식으로 인해 같은 변수에 여러 자료형의 값을 할당할 수 있습니다. 이를 동적 타이핑(Dynamic Typing)이라 합니다.

 아래 예제의 변수 foo는 저장된 값에따라 타입이 동적으로 변환됩니다.

var foo;
console.log(typeof foo);  // undefined
 
foo = null;
console.log(typeof foo);  // object
 
foo = {};
console.log(typeof foo);  // object
 
foo = 3;
console.log(typeof foo);  // number

※ console.log() : 가로 안의 값을 console 창에 띄워줍니다.

※ typeof : 해당 변수의 자료형을 표시해줍니다.

3. var 의 특징 '호이스팅'

 호이스팅이란 자바스크립트의 var선언문이나 function선언문 등 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 특성을 말합니다. 

console.log(foo); 
var foo = 'a'; 
console.log(foo);

Java로 생각한다면 1번 줄에서 에러가 터져야 합니다.

하지만 자바스크립트는 호이스팅이 작동하면서 변수 foo가 위에서 선언됩니다. 

아래처럼요.

console.log(foo); // undefined
var foo = 'a'; 
console.log(foo); // a

값 할당은 2번째 줄에서 작동되지만 예상대로라면 1번째 줄에서 foo가 존재하지 않다고 떠야되지만 단지 값이 할당되지 않다고 뜹니다.

호이스팅을 자세히 알기 위해선 scope를 알아야 하지만 scope는 나중에 다루도록 하겠습니다.

4. var 의 문제점

var 키워드는 다른 C-family언어와는 다른 특징때문에 문제가 발생하기도 합니다.

1) 함수 레벨 스코프

- 전역 변수의 남발

- for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조 가능

2) var키워드 생략 허용

- 의도하지 않은 변수의 전역화 발생 (var는 변수 선언시 생략이 가능하며, 생략 시 전역변수가 됨)

3) 중복 선언 허용

- 의도하지 않은 변수값 변경

4) 변수 호이스팅

- 변수를 선언하기 전에 참조가 가능

 유효 범위가 넓어 사용이 편리할수도 있지만, 프로젝트가 복잡해질수록 변수의 유효 범위는 좁아질수록 좋습니다.

 ES6에서는 let, const키워드를 도입해 var의 단점을 보완하도록 하였습니다.