변수

<<변수>>

js는 managed language이기 때문에 개발자가 직접 메모리를 제어하지 못한다.

변수명은 변수의 값이 아닌 메모리 주소를 기억, js engine이 변수명과 매핑된 메모리 주소를 찾아가 저장된 값을 반환

할당 : 변수에 값을 저장하는 것

참조 : 변수에 저장된 값을 읽어들이는 것

선언 : 변수명을 자바스크립트 엔진에 알리는 것

* 변수 선언은 선언 -> 초기화를 거쳐 수행

           선언 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알림

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

 

<var>

var은 변수선언단계와 초기화단계가 동시에 진행되어 undefined를 할당해 초기화

여기서 console.log(변수명)을 먼저해도 undefined가 찍히는데 그 이유는 호이스팅이다.

* 호이스팅(hoisting)

           자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 앞서, 변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행함.

           변수선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 hoisting이라 함.

변수 선언과 할당은 하나의 문으로 단축 표현할 수 있지만 두 개의 실행 시점이 다름.

변수 선언이 호이스팅 되어 먼저 실행되고 값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행.

 

<함수 호이스팅>

함수 선언 방식

1. 함수 선언문

 - 런타임 이전에 자바스크립트 엔진에서 먼저 실행되어, 함수 자체를 호이스팅 시킬 수 있음.

           function.add(x, y){

           return x + y }

 

2. 함수 표현식(함수 이름 생략)

 - 런타임 이전에 undefined로 초기화만 시키고 런타임에서 함수 표현식이 할당됨

           var add = function(x, y){

           return x + y }

 

3. Function 생성자 함수

           var add = new Function('x', 'y', 'return x+ y')

 

4. 화살표 함수

           var add = (x, y) => x + y

 

<스코프(scope)>: 식별자(변수명, 함수명, 클래스명..)의 유효범위

선언된 위치에 따라 스코프가 달라짐.

           전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 가짐

자바스크립트에서 모든 코드 블록(if, for, while, try/catch문 등)이 지역 스코프를 만들며, 이러한 특성을 블록 레벨 스코프라 함.

하지만 var로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정. 이를 함수 레벨 스코프라고 함.

         var a = 1

         if (true) { var a = 5 }

         console.log(a)

         >> 5

         // 함수가 아닌 곳에 var 키워드를 이용해 a를 선언했기 때문에 전역 변수로 취급

* 주의 : 모든 곳에서 전역스코프를 공유하기 때문에 동일한 변수명이 예상치 못한 결과를 가져올 수 있다는 위험때문에 블록 레벨 스코프를 지원하는 const와 let을 사용권장.

 

<var, let, const의 차이>

var의 문제점

1. 변수 중복 선언이 가능하며, 예기치 못한 값을 반환할 수 있음.

2. 함수 레벨 스코프로 인해 함수 외부에서 선언된 변수는 모두 전역 변수로 됨

3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환

 

let과 const로 문제해결

1. 변수 중복 선언 불가

           let 키워드로 변수 중복 선언(재선언)이 불가하지만 재할당은 가능

           const 는 let과 달리 반드시 선언과 초기화를 동시에 진행, 재할당 불가

                      const name = 'jhj'

2. 블록 레벨 스코프

           let, const 키워드로 선언한 변수는 모두 코드 블록(함수, if, while, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따름

                      let a = 1

                      if (true) { let a = 5 }

                      console.log(a)

                      >> 1

3. 변수 호이스팅

           let 키워드로 선언한 변수는 선언단계와 초기화단계가 분리되어 진행

                      즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되긴 하지만 초기화단계가 실행되지 않았을 때 해당변수에 접근하려 하면 참조 에러가 뜸.

           const 키워드는 선언단계와 초기화단계가 동시에 진행됨

 

즉 var보다는 const, let으로 변수를 선언하는 것을 권장하고 바뀌지 않는 변수는 const로 선언하는 것이 바람직하다.

 

출처 : https://www.howdy-mj.me/javascript/var-let-const/