오래된 'var'

양주영·2021년 9월 1일
0

javascript

목록 보기
19/42

💡 아래 글은 오래된 스크립트를 읽는 데 도움을 준다. 💡

'var'는 블록 스코프가 없다.


var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다.
블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능하다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

//반복문에서도 가능하다. 
for (var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.

코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 된다.

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined


'var'는 재선언이 가능하다


let은 동일한 스코프 내에 두 번 선언할 수 없지만, var는 가능하다.

var user = "Pete";

var user = "John"; // this "var" does nothing (already declared)
// ...it doesn't trigger an error

alert(user); // John


선언하기 전 사용할 수 있는 'var'


var 선언은 함수가 시작될 때 처리된다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리된다.

함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의된다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용됨).

따라서 아래 두 예제는 동일하게 동작한다.

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();
function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();
function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

변수가 끌어올려지는 현상 : '호이스팅(hoisting)'
var로 선언한 모든 변수는 함수의 최상위로 끌어 올려진다.

function sayHi() {
  alert(phrase);

  var phrase = "Hello";
  //두 가지 일이 일어난다.
  //1.변수 선언(var)
  //2.변수에 값을 할당(=)
}

sayHi();

//위 예제는 아래 코드처럼 동작하게 된다.
function sayHi() {
  var phrase; // 선언은 함수 시작 시 처리됩니다.

  alert(phrase); // undefined

  phrase = "Hello"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리됩니다.
}

sayHi();

⭐️ 선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다.



- 즉시 실행 함수 표현식

즉시 실행 함수 표현식 : var도 블록 레벨 스코프를 가질 수 있게 만든 것

(function() {

  let message = "Hello";

  alert(message); // Hello

})();


참조 : https://ko.javascript.info/var

profile
뚜벅뚜벅

0개의 댓글