[실전 자바스크립트]1. var 변수의 문제점?

주수호·2021년 2월 14일
0
post-custom-banner

1. 정의되어진 변수가 함수의 스코프를 사용한다.

// var변수 i는 변수가 정의가 되어진 위치에서 결정이 나게 된다.
function example() {
	var i = 1;
}
// 함수 스코프에서 벗어난 곳에서 사용하는 경우 에러가 나게 된다.
console.log(i);

2. var키워드를 사용하지 않고 변수를 할당하게 되어지면 "전역변수"의 역할로써 사용이 되어지게 된다.


//전역변수로서 사용되어지는 것을 피하기 위해서 'use strict'키워드로써, 제한이 되어진다.
'use strict'; 

function example1() {
  	//해당 변수 i는 전역변수가 되어진다. (use strict를 사용하면 ref에러가 발생하지 않는다.)
	i=1;
}
function example2() {
    //다른 함수에서도 해당 전역변수를 사용 할 수 있다.
	console.log(i);
}
example1(); //해당 부분에서 변수가 선언되어지고,
example2(); //다음 줄에서 변수가 출력되어진다.

3. var의 경우 함수 scope이기 때문에 for문에서 정의된 변수가 반복문이 끝난이후에도 남아있는 현상이 생긴다. (javascript에 거대한 함수가 둘러싸여 있다고 생각해라.)

for (var i = 0; i < 10; i++) {
	console.log(i);
}
//for문이 끝난 이후에도 i라는 값을 읽어오게 되버린다.
console.log('last', i);

//위의 문제를 해결하기 위해서 '즉시실행 함수'를 사용하기도 한다.
//즉시실행함수는 바로 실행을 하고 사라지는 함수를 말한다.
(function () {
  for (var i = 0; i < 10; i++) {
      console.log(i);
  }
})();
//함수 레벨로 바뀌어 scope가 설정되어 졋기 때문에, referror가 발생.
console.log('last:', i);

//니가 따라써봐서 알겠지만, 가독성을 버리고 즉시실행함수를 어렵게 사용하면서 까지 var scope를 설정하기에는 상당히 불편하다.

4. var 키워드로 정의된 변수는 그 변수가 속한 scope의 최상단으로 끌어올려진다. [hoisting]

//변수를 출력보다 늦게 지정해도, hoisting으로 인해서 해당 함수 스코프에서 사용이 가능하다.
//이러한 식으로 지정이 되어진다.
//var myVar = undefined; 그래서 결과물에서는 myVar가 undefined로써 출력이 되어진다.
console.log(myVar);
var myVar = 1; //실제 값은 해당 위치에서 할당이 되어진다.

아래와 같이 직관적이지 않아 보이는 코드로써도 활용하는 것은 var의 단점이라고 한다.

//암만봐도 이상한 변수 지정 flow
console.log(myVar);
myVar = 2;
console.log(myVar);
//엿장수 맘대로 지정해버리기
var myVar = 1;

모든 var변수는 재할당 개념으로써 한번 정의되어진 변수를 재할당이 가능해 진다.

var myVar = 1;
var myVar = 2;

//or 재할당이 가능한 변수로써 밖에 만들수 없다.

var PI = 3.141592;
//재할당
PI = 123;
profile
항상 준비하는 엔지니어
post-custom-banner

0개의 댓글