[JavaScript] 무엇으로 변수를 선언하는것이 좋을까 ? var, let, const 의 차이와 호이스팅

변수란?

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 뜻하며,

간단히 말하자면 값의 위치를 가르키는 상징적인 이름

 

변수는 하나의 값을 저장하기 위한 수단이며, 객체나 배열같은 자료구조를 사용하면 여러개의 값을 그룹화하여 하나의 값처럼 사용가능

var id= 1;
var name = 'go

var user = {id:1, name: 'go'}

 

var 변수이름(식별자) = 변수값
변수에 값을 저장하는 것을 할당(대입,저장)이라 함

 

---

 

변수 선언

변수를 사용하려면 반드시 선언이 필요하며, 변수를 선언할때는 var, let, const 키워드를 사용함.

var 키워드는 여러단점이 있는데 가장 대표적인것이 블록레벨 스코프를 지원하지 않고 함수레벨 스코프를 지원한다는것임. 이로인해 의도치 않게 전역 변수가 선언되어 부작용이 발생된다.

※ 함수 레벨 스코프(Function-level Scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
※ 블록 레벨 스코프(Block-level Scope)
모든 코드 블록(함수,if문,for문,while문,try/catch문 등)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

 

예시)

console.log(scope) ; //undefined

var scope ; // 변수선언

변수를 선언한이후 scope라는 변수에 아직 값을 할당하지는 않았다. 따라서 변수선언에 의해 메모리 공간은 비어있을 것으로 생각할 수는 있지만 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화

 

- 선언단계 : 변수이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림

- 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 항당해 초기화 해버림

위의 예시처럼 변수선언보다 변수를 참조하는 코드가 앞에 있음에도 undefined가 출력이 되는이유는?

자바스크립트 엔진은 변수선언이 소스코드의 어디에 있든 상관없이 다른코드보다 먼저 실행한다. 변수선언이 어디에 있든지 상관없이 변수를 참조할수 있다. 만약 코드가 순차적으로 실행된다면 런타임에러가 발생해야하지만 undifined가 출력된다

이것은 변수선언은 소스코드가 순차적으로 실행되는 런타임 이전단계에서 먼저 실행된다는 증거 이것을 변수 호이스팅이라고 함

 

함수 호이스팅

변수로 선언이 된 변수이름은 모두 호이스팅된다면 함수는 어떻게 작동이될까?

console.log(add(1,2)) // 3
console.log(sub(1,2)) // sub is not a function


// 1. 함수 선언식
function add(x, y) {
  return x + y
}

// 2. 함수 표현식
var sub function(x, y) {
  return x + y
}

 

함수선언문의 경우 런타임 이전에 자바스크립트 엔진에서 먼저 실행되어 함수자체를 호이스팅 시킬수 있다.

반면, 함수표현식은 런타임값이 할당되어 그때 사용이 가능하게 된다

 

그래서 var, let, const의 차이점은?

 

1. var (변수 재선언, 재할당이 가능 , 전역변수)

//재선언

var 커피 = '스타벅스'
console.log(커피);  //스타벅스

var 커피 = '이디야'
console.log(커피);  //이디야

///재할당 
var 커피 = '스타벅스'
console.log(커피);  //스타벅스

커피 = '이디야';
console.log(커피);  //이디야



//전역변수

var 몸무게 = 100;

if (몸무게 === 100) {
	var 몸무게 = 200;
    console.log(몸무게);  // 200 (함수스코프의 결과)
}

console.log(몸무게);  // 200 (전역스코프의 결과)

2. let( 변수 재선언은 불가능하고 재할당은 가능, 블록단위스코프)

//재선언 불가능

let 커피 = '스타벅스'
console.log(커피);  //스타벅스

let 커피 = '이디야'
console.log(커피);  //Identifier 'cafe' has already been declared

///재할당 

커피 = '이디야';
console.log(커피);  //이디야 (재할당가능)



//전역변수(블록스코프)

let 몸무게 = 100;

if (몸무게 === 100) {
	let 몸무게 = 200;
    console.log(몸무게);  // 200 (함수스코프의 결과)
}

console.log(몸무게);  // 100 (전역스코프의 결과)

3. const(변수 재선언, 재할당 모두 불가능 , 블록단위 스코프)

//재선언 재할당 불가능

let 커피 = '스타벅스'
console.log(커피);  //스타벅스

let 커피 = '이디야'
console.log(커피);  //Identifier 'cafe' has already been declared

커피 = '이디야';
console.log(커피);  //Assignment to constant variable



//전역변수(블록스코프)

let 몸무게 = 100;

if (몸무게 === 100) {
	let 몸무게 = 200;
    console.log(몸무게);  // 200 (함수스코프의 결과)
}

console.log(몸무게);  // 100 (전역스코프의 결과)

ES6를 통해 생긴 let과 const를 사용하여
기본적으로 const로 변수를 선언하되 재할당이 필요한 변수의 경우 let을 사용해 주는것을 기본으로 한다.