[JavaScript ES6] 변수(variable) var let const 와 Hoisting, 전역변수, 참조

 

 

 

1. 변수(variable)

- 변수: 자료를 임시로 저장하는 공간

-  오브젝트, 배열, 함수 등 모든 자료들을 담을 수 있음

- 자바 스크립트에서 변수를 만들 때 var, let, const라는 3개 키워드를 사용할 수 있음

	var	let	const
재선언	O	X	X
재할당	O	O	X
범위	function	{}	{}

 

 

2. 변수의 선언

1) 선언 방법

var 이름;
let 나이;
const 성별;

 

 

 

2) 차이점: var는 재선언 가능 / let, const는 재선언 불가능

- let, const로 만들면 같은 이름의 변수 재선언 불가(에러 발생) 

- 변수 이름을 중복해서 만드는 실수를 방지해 줌

let 나이;
let 나이; //에러

const 성별 = '여자';
const 성별 = '남자'; //에러

 

 

 

3. 변수의 값 할당

- 이름이라고 선언된 변수에 'Kim' 이라는 값을 집어넣는걸 할당이라고 함

var 이름;
이름 = 'Kim';

 

- 할당과 선언 동시에 가능

var 이름 = 'Kim'; 

 

 

- 변수를 var, let으로 만들면 재할당 가능, const로 만들면 값 재할당 불가능 => const 변수로 만들면 값 변경 불가

- const는 constant의 약자로 바뀌지 않는 일정한 값을 뜻 함(바뀌면 안되는 값을 저장할 때 사용하면 됨)

let 이름 = 'Kim';
이름 = 'Park';  //가능

const 나이 = 30;
나이 = 40; //에러

 

- const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능

const 오브젝트 = { 이름 : 'Kim' }
오브젝트.이름 = 'Park'; //가능 

 

왜? 변수를 재할당한게 아니기 때문에 가능

 

- 완전 변경불가능한 오브젝트를 만들고 싶다면 Object.freeze()라는 자바스크립트 기본함수 사용

Object.freeze() 소괄호에 오브젝트를 담으면 불변의 Object 완성(하지만 오브젝트 내의 오브젝트까지 freeze해주진 않음)

 

 

4. 변수의 범위 

 

- 변수는 존재 범위가 있음

- var 변수는 존재 범위가 function

function 함수(){
  var 이름 = 'Kim';
  console.log(이름); //가능
}

console.log(이름); //에러

▲  var 변수는 function 내에서 만들면 function 내에서만 사용 가능 (function 밖에서 호출 시 정의되지 않은 함수라고 에러 발생)

 

- let, const 변수는 존재범위가 거의 모든 {중괄호} . (for, if, function 등)

if ( 1 == 1 ){
  let 이름 = 'Kim';
  console.log(이름); //가능
}

console.log(이름); //에러

▲ let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 사용 가능(중괄호 밖에서 호출 시 정의되지 않은 함수라고 에러 발생)

 

 

5. 변수와 함수의 Hoisting

- 자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상 발생

Hoisting: 자바스크립트에서 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석하는 것

 

함수() 내에 var 이름 이라는 변수 선언 및 할당

function 함수(){
  
  console.log('hello');
  var 이름 = 'Kim';
  
}

 

(우리 눈에 보이지 않지만)자바스크립트가 이 코드를 해석하는 순서

function 함수(){

  var 이름; 
  console.log('hello');
  이름 = 'Kim';
  
}

 

 

Hoisting 예제

- 작성한 코드

<script>
  
  console.log(이름);
  var 이름 = 'Kim';
  console.log(이름);

</script>

 

 

- 자바스크립트 코드 실행 순서

var 이름;
console.log(이름);
이름 = 'Kim'
console.log(이름);

 

- 출력 결과

 

undefined - 변수가 선언은 되었는데 값을 아무것도 할당하지 않았을 때 undefined 출력 - 일종의 자료형같은 것인데 그냥 정해지지않은 값이라고 생각하면 됨

 

let, const 변수의 경우 Hoisting이 일어나긴 하는데 약간 이상한 방식으로 일어납니다. 

 

 

 

6. 변수 여러개 편리하게 만들기

 

- 변수를 콤마로 구분하면 여러개를 동시에 만들 수 있음

var 이름, 나이, 성별;

▲ var 키워드 1번 쓰고 변수 3개 생성

 

var 이름 = 'Kim', 나이, 성별;

▲ 선언과 동시에 할당 가능

 

 

 

7. 전역변수와 변수의 참조

 

1)  closure: 바깥에 있는 변수는 안쪽에서 자유롭게 사용 가능(참조 가능)

var 나이 = 20;

function 함수(){
  console.log(나이)
}

함수();

- 함수(){} 안쪽에서 바깥쪽에 있는 '나이'라는 변수를 가져다 쓸 수 있음

- 함수(){} 안쪽에 '나이;라는 변수 정의가 있으면 그걸 쓰겠지만 없으면 자연스럽게 바깥에 있는 변수 참조

 

 

2) 전역변수

- 모든 함수나 if나 for 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 변수

- 전역변수를 만들어 쓰고싶으면 그냥 script태그 내부에 변수를 선언하면 됨 

 

<script>
  var 나이 = 20;

  function 함수(){
    console.log(나이)
  }
</script>

▲ 변수 선언 후 밑에 나오는 모든 함수, for, if 등에서 전부 '나이'라는 변수 사용 

 

3) 전역변수의 특징 

- 전역변수를 만들면 window오브젝트에도 보관됨(var 키워드만)

- 전역함수도 마찬가지로 window에 자동으로 보관됨

<script>
  var 나이 = 20;

  console.log(나이);
  console.log(window.나이);
</script>

▲ '나이'라는 전역변수를 만들면 자동으로 window 오브젝트에 보관이 되었으니까 window.나이를 써도 출력 됨

 

 

 

- 전역변수를 조금 더 엄격하게 관리하거나 구분짓고 싶으면 전역변수를 만들 때와 사용할 때 window를 활용할 수 있음

<script>
  window.나이 = 20;  //전역변수만들기
  console.log(window.나이);  //전역변수사용하기
  window.나이 = 30;  //전역변수변경하기
</script>

 

cf)node.js 환경에선 window 대체품인 global 이라는 오브젝트가 있음