CS 및 면접 질문

var, let const 의 차이와 호이스팅

ho-bolt 2022. 6. 14. 01:33

변수

변수 ( variable) : 어떤 값을 저장하기 위해 마련한 메모리 공간이며 이 공간을 식별하기 위해 붙인 이름을 변수라고 한다.

const egg= 15; 
// 변수 명 : egg
//변수 값 : 15
// 해당 값의 위치 (메모리주소) : 0012ccgwh80

자바스크립트는 managed language 이기 때문에 개발자가 직접 메모리를 제어할 수가 없다. 따라서 직접 메모리 주소를 통해 값을 저장하고 참조할 필요없이 변수를 통해 안전하게 값에 접근하는 것이 가능하다

이 egg 변수명은 변수 값이 아니라 메모리 주소를 기억하고 있다. 변수명을 사용하면 자바스크립트 엔진이 변수명과 매핑된 메모리 주소를 통해 그곳에 저장된 값 (15) 를 반환한다.

이렇게 변수에 값을 저장하는 걸 할당(assignment, 대입, 저장) 이라고 하고 변수에 저장된 값을 읽어오는 걸 참조(reference) 라 한다. 그리고 변수명을 자바스크립트 엔진에 알려주는 걸 선언(declaration) 이라고 한다.

선언

변수 선언은 3가지 방식으로 가능하다 var, const, let 이렇게 가능하다. const 와 let은 ES6에서 추가되었다.

단계

변수 선언은 선언 -> 초기화 단계를 거친다.

  • 선언 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 : 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined 를 할당해서 초기화시킨다.
var name 
console.log( name ) // 출력값 : undefined

var 키워드를 이용해 변수 선언을 하면 선언과 초기화가 동시에 진행되서 name에 암묵적으로 undefined를 할당한 다음 초기화 시켜버린다.

console.log(name) 
var name

반대로 console를 먼저 출력해도 undefined가 출력된다.

  • 이것이 의미하는 것은 변수 선언이 런타임에서 진행되는 게 아니라, 그 이전 단계에서 먼저 실행되기 대문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 진행하기 앞서, 변수 선언을 포함한 모든 선언문(ex. 변수 선언문, 함수 선언문)를 찾아내 먼저 실행한다. 즉 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting) 이라고 한다.

변수 선언 뿐 아니라 var , let, const , function , class 키워드를 사용해 선언한 모든 식별자는(변수, 함수, 클래스, 등)은 호이스팅된다.

할당

변수에 값을 할당 할 때는 할당 연산자(=)를 사용한다.

var name //변수 선언 
name = `ho-bolt` // 값 할당

var name= ` ho-bolt` // 선언, 값 할당 동시

변수 선언과 할당은 하나의 문(statement)으로 단축 표현할 수 있지만, 두 개의 실행 시점이 다르다. 변수 선언이 호이스팅되어 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행된다.
그렇기 때문에 변수의 할당과 console을 실행하는 위치에 따라 반환되는 값이 달라진다.

console.log(name) // 출력값: undefined

var name = `ho-bolt` 
console.log(name) // ho-bolt

var로 선언된 경우, 재할당이 가능하다

console.log(name) // ho-bolt

name='hojin'
console.log(name) // hojin

재할당은 변수에 저장된 값을 다른 값으로 바꾸는 것으로, 만약 변경할 수 없는 값이라면 이는 변수가 아니라 상수(constatnt)라고 한다.

호이스팅

변수나 함수 선언을 함수 유효범위( 함수 외부의 겨우 전역 범위 ) 의 맨 위로 이동하는 매커니즘

호이스팅은 3단계로 구성된 변수의 수명 주기에 영향을 준다.

  1. 선언 : 변수 만듦 ex) var myName
  2. 초기화 (할당 ) : 변수에 값 할당 ex) var myName= 'ho-bolt'
  3. 사용 : 변수 참조하며 코드 작성 ex) alert(myName)

함수 호이스팅

위에서 function키워드도 선언한 모든 식별자도 호이스팅이 된다고 했는데, 정확히 어떻게 이루어지는 것인가

함수가 정의되는 4가지 방식

 // 1. 함수 선언문
// 함수 이름 생략 불가능
function add(x, y) {
  return x + y
}

// 2. 함수 표현식
// 함수 이름 생략 가능
var add = function(x, y) {
  return x + y
}
// 함수 이름 작성 시,
// var add = function plus(x, y) {
//   return x + y
// }

// 3. Function 생성자 함수
var add = new Function('x', 'y', 'return x+ y')

// 4. 화살표 함수
var add = (x, y) => x + y

선언문과 표현식의 호이스팅 결과

 // 함수 참조
console.dir(add) // output: f add(x, y)
console.dir(sub) // output: undefined

// 함수 호출
console.log(add(2, 5)) // output: 7
console.log(sub(2, 5)) // output: Uncaught TypeError: sub is not a function

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

// 함수 표현식
var sub = function(x, y) {
  return x - y
}

함수 선언문 의 경우 런타임 이전에 자바스크립트 엔진에서 먼저 실행되기 때문에, 함수 자체를 호이스팅 시킬 수 있다. 반면, 함수 표현식 은 위에서 본 변수 호이스팅과 같이 런타임 이전에 해당 값을 undefined로 초기화만 시키고, 런타임에서 해당 함수 표현식이 할당되어 그때 객체가 된다.

스코프

스코프는 식별자의 유효범위를 뜻하며, 선언된 위치에 따라 유효범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다.

전역 변수는 모든 곳에서 참조가 가능하다. 하지만, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

한 가지 주의해야 할 점은, 자바스크립트에서 모든 코드 블록 (if, for, while, try/catch ) 등 이 지역 스코프를 만들고, 이런 특성을 블록 레벨 스코프라고 하낟. 하지만 var 키워드로 선언된 변수는 오직 함수의 코드 불록만을 지역 스코프로 인정한다. 이는 함수 레벨 스코프 라고 한다.

 var a=1 

 if(true){
   var a=5
 }
 console.log(a) // output : 5

함수가 아닌 곳에서 var 키워드로 a를 선언했기 때문에 a는 전역 변수이다. 기존에 있던 a 변수가 중복 선언되면서, 최하단의 console에도 출력 값이 5로 바뀌었다.

위의 코드는 매우 간단해 어디서 문제가 발생한 지 알 수 있다. 하지만 실무에서는 전역 변수로 재할당이 일어나거나, 전역 스코프를 공유하기 때문에, 어딘가에 동일한 이름이 있다면 예상치 못한 결과가 나올 수 있다. 따라서 함수 블록만을 지역 스코프로 인정하는 var 대신 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것을 더 권장한다.

var let const의 차이

위에서 var키워드는 크게 3가지 문제가 있었다.

  1. 변수 중복 선언 가능하며 예상치 못한 값을 반환할 수 있다.
  2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
  3. 변수 선언 이전에 변수를 참조하면 에러가 뜨는 것이 아니라 undefined를 반환한다.이러한 문제점을 ES6에서 let과 const 키워드로 해결했다.

변수 중복 선언 불가

1) let

let : 변수 중복 선언 불가 , 재할당 가능하다.

let name = 'hojin'
console.log(name) // output: hojin

let name = 'ho-bolt' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'ho-bolt'
console.log(name) // output: howdy

2) const

const : const 과 let과 다른 점이 있다면 반드시 선언과 초기화가 동시에 진행되어야 한다.

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'hojin'

const도 let과 마찬가지로 재선언은 불가능하다. 그리고 재할당도 불가능하다.
하지만 재할당의 경우 원시 값은 불가능하지만, 객체는 가능하다.
const 키워드는 재할당을 금지할 뿐, _불변_을 의미하지는 않는다.

// 원시값의 재할당
const name = 'hojin'
name = 'hojin' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'hojin',
}
name.eng = 'ho-bolt'

console.log(name) // output: { eng: "ho-bolt" }

블록 레벨 스코프

let,const 키워드로 선언한 변수는 모두 코드 블록 (함수, if,for while, try/catch뭉) 을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
위 var 키워드로 예를 들었던 것을 그대로 가져와 바꾸면 아래와 같이 된다.

let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

var로 선언한 경우 5가 나왔지만 let으로 선언한 경우 if 문 안에 있는 것은 지역 스코프로 가져와 전역에서 콘솔을 찍었을 경우, 전역에 있는 a과 결과 값으로 출력한다.

  • 여기선 const도 let과 똑같이 동작한다.

변수 호이스팅

1) let
let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진핸 된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜬다.

console.log(name) // output: Uncaught ReferenceError: name is not defined

let name = 'hojin'

따라서 let 으로 선언한 변수는 스코프의 시작부터 초기화 단계 시작지점까지 변수를 참조할 수 없는 일시적 사각지대(Temporal Dead Zone :TDZ) 구간에 존재한다.

2) const

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

console.log(name) // output: Uncaught ReferenceError: Cannot access 'name' before initialization

const name = 'hojin'

let 키워드로 선언했을 경우 런타임 이전에 선언이 되어 자바스크립트 엔진에 이미 존재하지만 초기화가 되지 않아 name is not defined 라는 문구가 떴다. 그러나 const로 선언할 경우, 선언과 초기화가 동시에 이루어져야 하지만 런타임 이전에는 실행될 수 없다. 따라서 초기화가 진행되지 않은 상태이기 때문에 * cannot access 'name' before initialization* 라는 에러가 나온다.

결론

기본적으로 변수의 스코프는 최대한 좁게 하는 것이 권장된다. 따라서 var 보다는 let과 const 를 사용하고, 상수라면 let보다는 const를 사용하는 것이 안전하다.

 

 

참조 :

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

www.howdy-mj.me](https://www.howdy-mj.me/javascript/var-let-const/)

https://jhnyang.tistory.com/74

jhnyang.tistory.com](https://jhnyang.tistory.com/74)

728x90