[JavaScript][basic] 변수

변수의 선언
변수를 사용하기 전에 변수를 먼저 선언하는 것이 원칙이며, 변수를 선언할 때는 var 키워드를 사용한다.
선언되지 않은 변수를 사용할 수 없다.

함축적 선언
변수를 명시적으로 선언하지 않더라도, 변수명에 값을 할당하면 변수가 동시에 선언되는 것으로 처리된다.

초기값
변수를 선언하고 값을 할당하여 초기화 하지 않았을 경우, 변수를 호출하면 undefined 값을 갖게 된다.

var a =10;
var c = a*b;  //'b is not defined' 오류 발생

따라서 특정 값을 지정하지 않고 변수를 선언하여 초기화 할 때는 그 변수에 초기값을 할당해야 한다.
아래 4가지 경우를 보자.

var b = "가나다" + a;
var c = 4 + a + 5;
document.writeln(a);
document.writeln(typeof a);
document.writeln(b);
document.writeln(c);

a가 선언되지 않은 경우 - 오류 발생 및 출력 불가.

var a;
var b = "가나다" + a;
var c = 4 + a + 5;
document.writeln(a);  //결과 : undefined
document.writeln(typeof a); //결과 : undefined
document.writeln(b);  //결과 : 가나다undefined
document.writeln(c);  //결과 : NaN (Not a Number 처리)

a가 변수명만 선언되고 초기화 되지 않은 경우 - undefined 처리

var a = null;
var b = "가나다" + a;
var c = 4 + a + 5;
document.writeln(a);  //결과 : null
document.writeln(typeof a); //결과 : object
document.writeln(b);  //결과 : 가나다null
document.writeln(c);  //결과 : 9

a의 초기값을 null로 한 경우 - 숫자형은 0으로 인식하지만 문자형은 null로 처리

var a = '';
var b = "가나다" + a;
var c = 4 + a + 5;
document.writeln(a);  //결과 : 빈문자열 (화면상 출력 없음)
document.writeln(typeof a); //결과 : string
document.writeln(b);  //결과 : 가나다
document.writeln(c);  //결과 : 45

a의 초기값을 빈문자열로 한 경우

var a = 0;
var b = "가나다" + a;
var c = 4 + a + 5;
document.writeln(a);  //결과 : 0
document.writeln(typeof a); //결과 : number
document.writeln(b);  //결과 : 가나다0
document.writeln(c);  //결과 : 9

a의 초기값을 0으로 한 경우

위 마지막 2 예제의 '초기값이 빈문자열일 때 숫자값으로 더한 경우'와 '초기값이 0일 때 문자값으로 더한 경우'를 눈여겨보자.
이는 형식이 다른 두 데이터를 연산한 경우 발생하는 데이터 형식 강제 변환으로 인한 결과이다.

데이터 형식 강제 변환

1. 숫자와 문자열 합산 : 숫자가 문자열로 강제 변환된다.
2. 부울과 문자열 합산 : 부울이 문자열로 강제 변환된다. (true/false로 변환)
3. 숫자와 부울 합산 : 부울이 숫자로 강제 변환된다. (1/0 으로 변환)

자바스크립트의 유효범위
변수의 볌위는 전역변수와 지역변수가 있다.
함수 내부에서 선언된 변수를 지역변수라고 하고
함수 외부에서 선언된 변수는 전역변수라고 한다.
전역변수로 선언된 경우 그 값은 문서 전체에서 접근하거나 수정이 가능하다.

아래의 예제들을 보자.

function aa() {
	var a = 5;
}
document.writeln(a);	//a is not defined 오류 발생.

함수(function) 내부에서 정의된 변수는 지역변수가 되며 해당 함수 밖에서는 사용할 수 없다.
함수 외부에서 함수 내부에 있는 변수 a를 호출 할 수 없다. (a is not undefined 오류 발생)

var a = 3;
function aa() {
	var a = 5;
	document.writeln(a);
}
document.writeln(a); //전역 변수 a가 호출됨.
aa(); //지역 변수 a가 호출됨.

동일한 이름의 변수가 함수 내부(지역 변수)와 함수 외부(전역 변수)에 존재할 수 있으며 두 변수는 각각 별개의 변수이다.

function aa() {
	var a = 5;
	function bb() {
		a = 7;
	}
	bb(); //a의 값이 5->7로 변경
	document.write(a);  //결과 : 7
}
aa();

지역변수는 해당 함수 내부에 또 다른 함수가 있을 경우 사용할 수 있다.
함수안에 선언된 변수는 실제 함수가 호출되기 이전엔 존재하지 않은 상태이다.
함수 외부의 곳에서 호출하는 변수 a는 전역변수 a를 호출한 경우이다.
아래의 예제를 통해 이를 좀더 명확히 알 수 있다.

var a = 10;
function aa() {
	var a = 5;
	return aa;
}
document.write(a);	//10이 호출된다.

주의사항

1. 전역변수는 되도록 사용하지 않는다.
   전역변수를 사용하게 되면 점점 복잡해지는 사이트에서 변수이름으로 인한 충돌이나 의도하지 않은 결과를 가져오게 된다.
   따라서 함수 내에 지역 변수로 선언하고 사용하는 것이 좋다.
   
2. 함축적 선언으로 인한 혼동을 조심한다.
   아래의 예를 보자.
   

   a = 10;
   function aa() {
   	a = 5;
   	return a;
   }
   document.writeln(a);	//결과 : 10
   document.writeln(aa());	//결과 : 5 - aa에서 전역변수의 값을 변경함
   document.writeln(a);	//결과 : 5

   함수 aa내에 선언된 a는 변수선언을 할 때 사용하는 var 연산자를 사용하고 있지 않고 있다.
   이런 경우 a라는 변수는 먼저 호출된 동명의 변수가 전역변수에 존재하는지 또는 동일 함수내에 해당 라인 이전에 선언이 되어있는지 체크하여 없는 경우 함축적 선언으로 var가 인식하게 되며 있는 경우 기존에 존재한 변수의 값을 대체하게 된다.
   따라서 위 예제의 경우 함축적 선언을 명시하게 되면 다음과 같다.
   

   var a = 10;
   function aa() {
   	a = 5;
   	return a;
   }
   document.writeln(a);	//결과 : 10
   document.writeln(aa());	//결과 : 5 - aa에서 전역변수의 값을 변경함
   document.writeln(a);	//결과 : 5

   함수 aa내에 선언된 a는 변수선언을 할 때 사용하는 var 연산자를 사용하고 있다.
   위의 소스와 아래 소스는 결과가 같다.
   

   function aa() {
   	a = 5;
   	return a;
   }
   a = 10;
   document.writeln(a);	//결과 : 10
   document.writeln(aa());	//결과 : 5 - aa에서 전역변수의 값을 변경함
   document.writeln(a);	//결과 : 5

   전역변수 a의 위치를 함수보다 아래로 놓더라도 함수 외부에서 호출되는 a는 윗 라인에 선언된 지역변수 a보다 전역변수 a를 호출하게 된다.
   함수 부분은 처음 페이지 로딩시 호출이 되지 않고 실제 해당 함수를 호출하게 되면 실행이 되기 때문이다.
   함수는 호출되지 않는 한 그 함수 내부에 오류가 있더라도 페이지 호출에는 이상이 없다.
   
   같은 이름을 가진 동명의 함수를 사용하게 되면 우선적으로 전역변수가 사용되어지게 되고 var로 지역변수 임을 명시하지 않으면 함수 내에서 호출한 변수는 전역변수를 호출하는 것으로 인식하게 된다.
   해당 함수 내에서 전역변수가 아닌 지역변수를 사용하길 의도하였더라도 위의 결과 처럼 전역변수의 값을 변경해버리는 결과를 가져오기 때문에 좋은 사용이 아니다.
   의도한 바가 전역변수와 지역변수의 사용이었다면 함수 내에서 변수에 대해 지역변수임을 var 연산자로 명시해주어야 한다.
   

   var a = 10;
   function aa() {
   	var a = 5;
   	return a;
   }
   
   document.writeln(a);	//결과 : 10
   document.writeln(aa());	//결과 : 5 - aa에서 지역변수의 값을 선언함
   document.writeln(a);	//결과 : 10

   
   

   function aa() {
   	a = 5;
   	return a;
   }
   aa();
   document.writeln(a);	//결과 : 5

   위의 경우, 함수 내부에 사용된 a 변수에 var 연산자가 선언되지 않은 경우 JavaScript는 해당 변수를 전역변수로 선언함을 알 수 있다.
   즉 함축적 선언으로 만들어진 변수는 전역변수이다.
   
   전역변수는 다른 함수나 구문에서 호출이 가능하게 되고 변경이 가능하다.
   의도치 않은 결과를 만들게 되므로 이러한 사용은 주의하여야 한다.
   일반적으로 전역변수를 쓴다면 상위에 선언하고 함수 선언을 아래에 하여 구분하기 쉽게 한다.