Javascript ES6 - Variables

1️⃣  변수의 개념

변수에 대해서 알아보겠습니다. 프로그래밍 언어에서 변수의 본질적 의미는 자료를 저장하는 공간입니다. 변수는 선언, 할당, 범위, 호이스팅 총 4가지의 특징을 가지고 있습니다.

var name = 'Kim';

변수를 사용하는 방법은 위와 같습니다. 변수 키워드를 써주고 변수명을 써주고 값을 할당해주면 됩니다. 

 

var name;

이 부분을 ‘변수를 선언한다’ 라고 표현합니다.

 

name = 'kim';

이 부분을 ‘값을 할당한다’ 라고 표현합니다.

 

변수의 선언과 할당을 동시에 할 수도 있지만 따로 할 수도 있습니다. 원래는 변수를 선언할 때 사용하는 키워드가 var 한 개 밖에 없었지만 ES6에 들어오고부터 두 개가 더 추가되었고, 현재는 var은 잘 사용하지 않는 추세입니다. 추가된 키워드로는 let, const 등이 있습니다. 이하에서는 var, let, const의 선언, 할당, 범위, 호이스팅의 측면에서 살펴보고자 합니다.

 

	재선언	재할당	범위	호이스팅
var	가능	가능	함수(선언된 곳)	됨
let	불가능	가능	모든 중괄호 내	됨
const	불가능	불가능	모든 중괄호 내	됨

 

let age;
let age; //에러

const gender = '여자';
const gender = '남자'; //에러

let 과 const가 재선언이 불가능하다는 것은 이것을 의미합니다. var과는 다르게 let, const는 같은 변수명을 가진 변수를 한 개 이상 선언할 수 없습니다. 

 

let name = 'Kim';
name = 'Park';  //가능

const age = 30;
age = 40; //에러

let은 재할당이 가능하고 const는 재할당이 불가능합니다. 재할당이라 함은 처음에 선언하고 할당한 값을 바꾸는 것이라고 생각하면 됩니다. const는 constant(상수)를 표현하는 것이기 때문에 재할당이 불가능합니다.

 

const object = { name : 'Kim' }
object.name = 'Park'; //가능

단, 이렇게 const에 오브젝트를 담고 그 안의 value를 바꾸는 것은 가능합니다.

 

function example(){
  var name = 'Kim';
  console.log(name); //가능
}

console.log(name); //에러

var의 범위는 var 변수가 선언된 함수 안에서만 가능합니다. 따라서 위 코드에서 보면 함수 안에 있는 console.log에서는 변수가 정상적으로 콘솔에 출력되지만 함수 바깥에 있는 console.log에서는 콘솔에 아무 것도 출력이 되지 않는 것을 확인할 수 있습니다.

 

if ( true ){
  let name = 'Kim';
  console.log(name); //가능
}

console.log(name); //에러

let과 const는 { } 안이 범위입니다. 위 코드에서 let name은 if 조건문 안에서 사용됐네요. 그렇기 때문에 조건문 안에 있는 console.log에서는 정상적으로 출력이 됩니다. 그러나 조건문 { } 을 벗어난 console.log에서는 정상적으로 출력이 되질 않습니다.

 

 

2️⃣  호이스팅 현상

자바스크립트에서 변수나 함수를 사용하면 ‘호이스팅’현상이 발생합니다. 호이스팅 현상이란 자바스크립트가 변수나 함수의 선언만을 따로 분리해서 변수나 함수 선언 범위 맨 위로 올려서 해석하는 것을 의미합니다. 

 

function example(){

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

변수의 선언 부분만을 변수의 선언범위 맨 위로 끌어올려 해석하고 지나갑니다. var 뿐 아니라 let, const도 호이스팅 현상은 발생합니다. 변수 뿐 아니라 함수에서도 호이스팅 현상은 발생합니다.

 

  console.log(name); //undefined 
  var name = 'Kim'; 
  console.log(name); // 'kim'

첫번째 줄 때문에 에러가 발생할 것 같지만 그렇지 않습니다. 호이스팅 현상 때문이죠. 다만 호이스팅 현상에 의해 변수를 선언만 한 상태이기 때문에 undefined라는 값이 나옵니다. undefined라는 것은 변수를 선언만 하고 값을 할당하지 않았을 때 나오는 자료형의 일종입니다. 정해지지 않은 값이라 이해하면 편합니다. 그러나 let과 const는 undefined라는 값이 자동으로 할당되지 않습니다. var만 자동으로 undefined가 할당이 됩니다.

 

 

3️⃣  전역변수와 지역변수

전역변수와 지역변수를 살펴보기 앞서 변수는 다음과 같은 특징이 있습니다. 바로 ‘바깥에 있는 변수는 안쪽에서 자유롭게 사용이 가능하다’ 라는 것입니다. 

var age = 20;

function example(){
  console.log(age);
}

example();

이런 코드가 있을 때 함수를 실행하면 콘솔에 age가 정상적으로 출력될까요? 네 그렇습니다. 나이라는 변수는 지금 함수 바깥에서 선언됐기 때문에 함수 안에서 자유롭게 사용이 가능하기 때문입니다. 이런 특징을 전문용어로 ‘참조가 가능하다’ 라고 표현합니다. 자바스크립트에서는 특별히 ‘closure’라고 표현합니다.

 

그렇다면 프로그래밍의 전역변수란 무엇일까요?

 

✅전역변수: 모든 함수나 if나 for 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 유용한 변수를 뜻합니다. 전역변수를 만들어 쓰고싶으면 그냥 script태그 열고 다짜고짜 변수하나 만들어주시면 됩니다.

 

 

전역변수를 만드는 또 다른 방법이 있습니다. 바로 window를 활용하는 것입니다.

  var age = 20;

  console.log(age);
  console.log(window.age);

var로 변수를 선언하고 값을 할당해주면 window에 보관이 됩니다(var의 경우만 가능합니다. let은 되지 않습니다). 따라서 객체에서 불러오듯이 window.age 이렇게 불러오면 전역변수를 사용하는 것과 동일합니다.