Front-End/JavaScript

[JavaScript] var / let / const 변수

Voyage_dev 2022. 3. 9. 07:23

자바스크립트에서는 var 키워드로 변수 선언이 가능했는데 왜 ES6부터 const와 let이 나왔으며 이 둘의 사용을 var보다 권장할까?

변수

변수 (variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다

자바스크립트는 매니저드 언어(managed language)이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근이 가능하다

변수의 값이 아닌 메모리 주소를 기억하고 있으며 값을 저장하는 것을 할당이라 한다. 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 하며 변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration)이라 한다

변수 선언

변수의 선언은 var / let / const 키워드로 할 수 있으며 ES6부터는 let / const가 추가되었다

자바 스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다

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

var 키워드를 이용한 변수 선언은 선언 단계가 동시에 진행되어 암묵적으로 undefined를 할당해 초기화한다

💡 변수 이름은 어디에 등록되는가?

  • 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트(execution context)는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다

var (변수 재선언 가능)

  • Es6가 나오기 전 let처럼 변수로 선언할 수 있는 아이로 var을 사용하였다
  • 이제는 var을 사용하면 안 되는 가장 중요한 이유는 대부분 프로그래밍에서는 변수를 선언하고 값을 할당하지만 var에서는 선언도 하기전에 값을 할당할 수 있다.
  • 할당 전에 값을 출력할 수도 있으며 출력하면 undefined가 뜬다 즉, 변수는 정의되어 있지만 값이 아직 안 들어가 있다고 뜨는 것
console.log(age) 
age = 4; 
// 값을 다시 log 
console.log(age) 
var age;
  • 다시 값을 log로 출력하면 4가 나온다 이것을 let에서 똑같이 실행해 보면 에러가 나온다
  • 에러가 정상
  • var은 선언 하기도 전에 사용할 수 있는데 이걸 var hoisting이라고 한다
  • var을 쓰면 안되는 또다른 이유는 var은 block scope을 철저히 무시한다. 변수를 bloc안에 선언해도 콘솔 밖에서 선언하면 정상적인 출력값이 나온다
  • 초창기에는 이런 유연성을 이용해 어플리케이션을 만들었지만 규모있는 프로젝트에서는 선언하지도 않는 값들이 할당되는 상황이 나온다

Var Hoisting

  • 어디에 선언했다 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 말한다

let (변수 재선언 불가능, 변수 재할당 가능)

  • ES6부터 추가됐다
  • 자바스크립트에서 변수를 선언할 수 있는 타입

  • 어플리케이션을 실행하게 되면 어플리케이션 마다 사용할 수 있는 메모리가 할당

  • 어플리케이션마다 사용할 수 있는 박스가 제한
  • let을 이용하면 한가지 박스를 가리킬 수 있는 포인터가 된다
  • 값을 저장하고 추후에 변수가 가리키는 곳에다 다른 값을 넣어 저장할 수 있다

Constant (const) (변수 재선언 불가능, 변수 재할당 불가능)

  • let과 비슷한 변수
  • 하지만, 한 번 const에 할당되는 값은 절대 절대 바뀌지 않는다
  • 값을 선언함과 동시에 할당할 뒤로는 다시는 값을 정의하거나 변경할 수 없다
//3.Constants == 한번 할당하면 값이 절대 바뀌지 X 
// favor immutable data type always for a fw reasons; 
// - security (보안) 
// - thread safety 
// - reduce human mistakes 

const daysInWeek = 7; 
const maxNumber = 5;
  • 유전자 서열을 바꿔나가는 데이터 타입도 변경이 가능한 Mutable Data Type이 let이라면
  • Const는 변경이 불가하기 때문에 Immutable( 불면) Data Type이라고도 불린다
  • 웬만하면 값을 할당한 다음에 다시는 변경되지 않는 그런 데이터 타입을 사용하라는 말

장점

security (보안)

  • 한 번 작성한 값은 다른 해커들이 코드로 이상한 것을 삽입해 값을 바꾸는 것을 방지할 수 있다

thread safety

  • 어플리케이션이 실행되면 한가지 프로세서가 할당되고 그 프로세서 안에서는 다양한 thread가 동시에 돌아가면서 어플리케이션을 조금 더 효율적이게 빠르게 동작하도록 도와준다
  • 다양한 thread들이 동시에 변수에 접근해 값을 변경할 수 있는데동시에 값을 변경한다는 것은 조금 위험 그래서 가능한 값이 변하지 않는 것을 사용하는게 좋다

reduce human mistakes

  • 나중에 코드를 변경 혹은 다른 개발자가 코드를 바꿀 때 실수를 방지

var / let / const의 차이

앞에서 정리한 var 키워드의 문제점은 크게 세 가지가 존재

  • 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다
  • 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다
  • 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다

이러한 문제점들을 let과 const가 해결했다

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

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

let name = 'dev' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'dev'
console.log(name) // output: dev

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

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

consteh let과 마찬가지로 재선언이 불가하며, 더 나아가 재할당도 불가하다

재할당의 경우, 원시값은 불가능하지만, 객체는 가능하다

재할당 O , 불변 X

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

// 객체의 재할당
const name = {
  obj: 'voyage',
}
name.obj = 'dev'

console.log(name) // output: { obj: "dev" }

Dynamically Typed

  • 변수를 선언할 때 어떤 타입인지 결정해서 타입을 같이 선언했던 반면 자바스크립트에서는 선언할때 어떤 타입인지 선언하지 X
  • 런타임 프로그램이 동작할 때 할당된 값에 따라서 타입이 변경
  • dynamically type language는 내가 좋은 아이디어가 있을 때 빠르게 prototype(프로토타입)을 유연하게 쓸 수 있는 언어지만 규모가 있는 프로젝트를 만들때는 곤란한 상황이 온다

이러한 문제점들을 위해 TypeScript가 나오게 된다. TypeScript는 JavaScript 위에 Type이 올려진 언어

정리

재할당이 필요없는 경우, 기본적으로 var 키워드 보다는 const를 사용해 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋다

 

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다

https://velog.io/@bathingape/JavaScript-var-let-const-차이점

https://backstreet-programmer.tistory.com/76

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

드림코딩 엘리 - 자바스크립트

모던 자바스크립트 딥 다이브 - scope