변수와 상수[var,let,const 및 호이스팅,스코프]

1 ) 변수 선언 방식

 

var : 중복 선언과 재할당이 가능하다.

- 아래와 같이 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 변수에 저장된다.

- 자율성은 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재할당을 해서 어떤 부분에서 값이 변경되는지 파악하기 힘들어 지게 된다.

그래서 let과 const가 생긴 이후 var는 사용하지 않는다.

var greeting = 'hello';
console.log(greeting);

var greeting = 'hi';
console.log(greeting);

greeting = 'how are you?';
console.log(greeting);

 

 

let(ES6) : 중복 선언은 불가하며, 재할당은 가능하다.

let greeting = 'hello';
console.log(greeting);

let greeting = 'hi';  // 에러 발생 , 중복 사용 불가
console.log(greeting);

greeting = 'hi';
console.log(greeting);

 

 

const(ES6) : 중복 선언과 재할당 둘 다 불가하다.

const greeting = 'hello';
console.log(greeting);

const greeting = 'hi';    //중복선언 불가 에러 발생
console.log(greeting);

greeting = 'hi';  // 재할당 불가 에러발생
console.log(greeting);

 

 

 

2) 유효한 참조 범위(Scope)

var : 함수 레벨 스코프

- 아래 와 같이 함수 내에서 선언된 변수는 함수 내에서만 유효하다.

(함수 내에서는 블록 내외부에 관계 없이 유효하다)

- 하지만 함수 외부에서는 참조 할 수 없다.

function func() {
    if (true) {
        var a = 'a';
       console.log(a);
    }
   console.log(a);
}
console.log(a); // 에러발생 참조 불가
func();

 

 

let/const :  블럭 레벨 스코프

 

let/const : 블럭 레벨 스코프

- 함수, if문, for문, while문, try/catch문 등의 모든 코드 블럭 내부에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조 할 수 없다.

unction func() {
    if (true) {
        const a = 'a';
        console.log(a);
    }
   console.log(a); // 에러발생 블록 레벨을 벗어나서 참조 불가
}

func();

 

함수 레벨이긴하나 블록을 벗어나서 에러 발생

즉, 스코프가 좁을 수록 관리하기가 용이해서 좋은것이다.

 

 

 

 

3) 호이스팅 

 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로  끌여 올려지는 것을 뜻한다.

 

var 선언문 호이스팅 

아래 예에서는 아직 생성하지 않은 변수에 대한 콘솔 로그를 찍어본다 . 

다음으로 greeting라는 이 변수를 선언하고 문자열 hello을 할당한다.

console.log(greeting);

var greeting = 'hello';

 코드가 실행(실행)되면 undefined가 반환된다.

 이 코드가 에러를 발생시키지 않는 이유는 호이스팅 때문이다.

 JavaScript 인터프리터는 변수 생성의 선언(var greeting) 단계 및 할당( = "hello") 단계를 분할한다.

선언 부분은 코드가 실행되기 전에 현재 범위의 맨 위로 호이스팅되고 초기에 undefined 값이 할당됩니다. 

즉, 초기화되기 전에 greeting 변수를 사용할 수 있다.

 

 

let/const 선언문 호이스팅 

let 또는 const로 변수를 선언하면 실제로 변수는 여전히 호이스팅된다. 

그러나 var와 차이점은 var는 실제 할당 값이 할당되기전 까지 undefined 값이 할당된다. 

하지만 let/const를 사용하면 변수 초기에 어떤 값도 할당되지 않는다.

console.log(greeting); // 에러발생

let greeting = 'hello';

 

호이스팅은 되지만 변수는 초기에 undefined로 초기화된 var와 달리 초기에 초기화되지 않는다.

코드가 실행(실행)되면 변수에 값을 할당하기 전에 콘솔 로그가 발생하므로 위의 오류가 발생한다.
이러한 일이 발생하는 이유를 TDZ(Temporal Dead Zone)이라고 한다.

일시적 데드 존은 변수를 사용할 수 없는 일시적인 비활성 상태를 나타낸다.

 

var/let/const  결론

변수를 생성할 때 재할당이 필요없다면 const를 사용한다. 

재할당이 필요하면 let 을 사용하지만 변수의 scope를 최대한 좁게 만들어서 사용해준다.