이승영

이승영

var

  • var는 function-scoped 이다.

function-scoped??

/*
 * a는 변수가 정의되어진 함수 내에서 결정이 난다.
 */
function scoped(){
	var a = 1;
	console.log(a); // 1
}

/*
 * function-scope에서 벗어난 위치에서 호출할 시 에러가 나게 된다.
 */
console.log(a); // ReferenceError: a is not defined


var를 사용하지 않고 변수를 할당한다면

/*
 * 해당 함수의 변수 a는 전역변수가 된다.
 */
function ex1(){
	a = 1;
}

/*
 * 전역변수는 다른 함수에서도 사용이 가능하다.
 */
function ex2(){
	console.log(a);
}

ex1(); // 전역변수 a = 1 선언
ex2(); // 1


for문에서의 var(1)

/*
 * function-scope인 var의 경우 for문에서 정의된 변수나 반복문이 종료된 이후에도
 * 존재하는 현상이 생긴다.
 * (js에 하나의 거대한 함수가 둘러싸여져 있다고 생각하면 된다.)
 */
for(var i = 0; i < 10; i++){
	console.log(i);
}

console.log(i); // for문에서 선언했던 i의 변수가 그대로 출력이 되는것을 확인할 수 있다.


for문에서의 var(2)

/*
 * 위의 문제를 해결하기 위해 '즉시실행 함수'를 사용하기도 한다.
 * var이 function-scope인것을 이용해서 for문을 함수로 감싸는 방법이다.
 * 하지만 보시다시피 가독성이 최악이기 때문에 이렇게까지 어렵게 사용하는것은 무리다.
 */
(function(){
	for(var i = 0; i < 10; i++){
		console.log(i);
	}
})();

console.log(i); // ReferenceError: a is not defined


hoisting(1)

/*
 * var로 정의된 변수는, 그 변수가 속한 scope의 최상단으로 끌어올려진다.
 */
var a;
console.log(a); // 바로 아래의 a = 1이 호이스팅되어 1이 출력이 된다.
a = 1;


hoisting(2)

/*
 * 이처럼 직관적이지 않은 코드를 작성해도 아무 문제 없이 작동된다.
 */
console.log(a);
a = 2;
console.log(a);
var a = 1;


재할당

/*
 * 모든 var는 재할당이 가능하다.
 * 모든 var는 재할당이 가능한 변수로밖에 만들지 못한다.
 */
var a = 1;
var b = 2;

var PI = 3.14;

PI = 12345; // 변수 재할당이 가능하다.


Reference

groovejumat.log
gist.github.com/LeoHeo

참고