[javascript] 변수 선언(var, let, const), 지역 변수(local variable), 전역 변수(global variable), 호이스팅

 

변수란?

 

변수(variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 자바스크립트에서의 모든 객체와 함수를 의미한다.

 

요즘은 var는 잘 사용하지 않고 주로 let과 const를 사용하여 선언한다.

 

- var

var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 할당될 때까지 undefined 값을 가짐

함수 스코프(함수 안에서만 사용 가능)

 

var를 잘 사용하지 않는 이유 :

중복 선언이 가능. 가장 마지막에 할당된 값이 변수에 저장됨

호이스팅(어디에 변수를 선언했든 간에 가장 위로 끌어올려주는 것) 발생

 

- let, const

선언된 블록 안에서 유효 범위를 가짐

중복 선언이 불가능

블록 스코프(모든 코드 블록(중괄호{ }로 둘러싸인 코드 영역)을 지역 스코프로 인정)

호이스팅이 발생하지 않음

 

 

var와 let은 값의 재할당이 가능하다.

const는 재할당이 불가능하지만 재할당이 불가능할 뿐 값이 불변하는 것은 아니다.

그리고 반드시 선언과 동시에 초기화를 해주어야 한다.

(const로 선언된 레퍼런스가 가리키고 있는 객체 안에 값은 변경이 가능하다.)

var hi;
// 변수의 선언

var hi = 7;
// 변수의 선언과 동시에 할당

hi = 77;
// 변수의 할당

hi = [7, 77, 777];
// 배열 대입

var hi, hello;
// 여러 변수를 한 번에 선언

var hi = 7, hello = 77;
// 여러 변수를 선언과 동시에 할당

hi = 7, hello = 77;
// 여러 변수를 한 번에 할당


let i = 123

const e = 123
// let과 const을 이용한 변수 선언

자바스크립트에서 변수는 이름을 가지고 식별하므로, 변수의 이름은 식별자(identifier)이다.

변수의 이름은 대소문자를 구분하며 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)를 포함할 수 있고,

첫 글자가 숫자인 이름, 자바스크립트 언어에서 예약된 키워드는 사용할 수 없다.

 

var는 가급적이면 사용하지 않는 것이 좋다.(선언하기 전에 값을 할당해도 값이 출력되는 등 엥?스러운 부분이 많기때문)

재할당이 필요하지 않은 변수는 const를 사용하고, 그렇지 않은 변수는 let을 사용하는 게 좋다.

 

 

 

변수의 유효 범위(scope)

 

해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다.

변수는 유효 범위에 따라 지역 변수, 전역 변수로 구분된다.

 

 

 

 

지역 변수(local variable)

 

지역 변수란 함수 내에서 선언된 변수를 의미한다.

지역 변수는 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.

 

 

 

 

전역 변수(global variable)

 

전역 변수란 함수 외부에서 선언된 변수를 의미한다.

전역 변수는 어디에서나 사용 가능하며, 웹 페이지가 닫혀야 메모리에서 사라진다.

 

• 전역 변수 선언 후 함수 내에서 전역 변수를 사용하여 값이 바뀌게 되면 그 값이 새롭게 전역 변수에 적용된다.
• 전역 변수와 같은 이름의 지역 변수를 선언하면 함수 내에서는 해당 이름으로 지역 변수만을 호출할 수 있게 된다.
  같은 이름의 지역 변수를 선언한 함수 내에서 전역 변수를 호출하고자 할 때에는 전역 변수 이름 앞에 window. 을 이용하여 윈도우 객체의 프로퍼티임을 명시하면 된다.

 

 

함수와 함수 밖에 있는 변수 : closer

var와 비동기가 만나면 closer문제가 발생함

 

호이스팅

 

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

var myName = "hi";

  function myName() {
      console.log("yuddomack");
  }
  function yourName() {
      console.log("everyone");
  }

  var yourName = "bye";

  console.log(typeof myName);
  console.log(typeof yourName);
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

호이스팅 결과

// 1. [Hoisting] 변수값 선언 
  var myName; 
  var yourName; 

  // 2. [Hoisting] 함수선언문
  function myName() {
      console.log("yuddomack");
  }
  function yourName() {
      console.log("everyone");
  }

  // 3. 변수값 할당
  myName = "hi";
  yourName = "bye";

  console.log(typeof myName); // > "string"
  console.log(typeof yourName); // > "string"
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html