eunhaa tech

[Javascript Essentials] Variables

3가지 변수 선언 키워드

자바스크립트 어플리케이션을 실행하면, 어플리케이션마다 쓸 수 있는 메모리가 할당된다.

메모리는 아직 비어져 있는 박스라고 생각하면 편하다.

우리가 변수 선언 키워드를 이용해, 변수 이름을 정의하면 위 메모리 주소를 가리키게 된다.

그 변수 이름에 어떠한 값을 할당하게 되면, 메모리 주소에 그 값을 저장할 수 있게 된다.

여기서 말하는 변수 선언 키워드에는 var, let, const가 있으며, let, const는 ES6 이후 등장했다.

1. let

  • 변수 이름을 선언 및 할당할 수 있으며, 똑같은 이름에 값을 재할당할 수 있다.
  • 재할당은 허용되지만 재선언은 허용되지 않는다.
  • 블록 스코프를 가지며, 블록 밖에서는 블록 안의 내용에 접근할 수 없다.
  • 변수는 스코프가 끝날 때까지 메모리에 탑재되므로, 블록 내에서 정의하는 것이 효율적이다.
  • 변수 호이스팅이 발생하지만, 초기화 및 할당 전이라 메모리에 올라오지 않아 TDZ 영향을 받는다
  • 따라서, 변수 선언보다 위에서 값을 할당시킬 경우, Reference Error가 발생한다.
  • 전역 객체 프로퍼티가 아니다.

2. var

  • 블록 스코프 영향을 받지 않아, 블록 외부에서도 블록 안의 var 변수에 접근이 가능하다. 
  • 반드시 함수 내부에 선언된 변수만 지역 변수로 한정시킨다.
  • 변수 이름을 재선언 할 수 있다.
  • 변수 호이스팅 발생 시, 선언 및 초기화 단계가 동시에 일어나 TDZ의 영향을 받지 않는다
  • 따라서, 변수 선언보다 위에서 값을 할당해도 연산이 이루어진다.
  • 심지어, 변수 선언보다 위에서 값에 접근해도 undefined가 출력된다.
  • 전역 객체 프로퍼티로 할당된다.

3. const

  • 한번 선언 및 할당하면 재선언 또는 재할당할 수 없다.
  • let과 마찬가지로 변수 호이스팅 발생 시, 선언 및 초기화 단계가 동시에 일어나 TDZ 영향을 받는다.
  • 따라서 변수 선언보다 위에서 값을 할당 혹은 접근 시킬 경우, Reference Error가 발생한다.
  • 전역 객체 프로퍼티가 아니다.

데이터 타입

데이터 타입은 **Primitive Type(원시 타입)**과 **Object Type(객체 타입)**과 **Function(함수 타입)**이 있다.

자바스크립트에서는 타입이 동적으로 결정되므로, 데이터 타입을 명시하지 않아도 되지만,

이후 타입스크립트(Typescript)에서는 타입 설정할 때 필요하다.

1. 숫자형 타입 (원시 타입) 

숫자의 바이트 길이에 상관없이 모두 number로 통일한다.

그 이외에, 어떤 양수를 0으로 나누면, Infinity로 출력된다.

반대로, 음수를 0으로 나누면 -Infinity로 출력된다.

숫자가 아닌 값을 숫자로 나누거나 연산하면 NaN으로 출력된다.

숫자 값의 범위는 -2**53부터 2**53까지의 범위이다.

2. 문자형 타입 (원시 타입)

문자형 및 문자열로 이루어진 모든 문자형 타입은 string이다.

※ `${}` 패턴을 통해 템플릿 리터럴 방식으로 문자열을 표기하기도 한다.

3. 논리형 타입 (원시 타입)

truthy, falsy한 값들은 모두 true 및 false 값으로 간주된다. 이것은 boolean 타입이다.

falsy한 값은 0, null, undefined, NaN, ' ' 등의 값들이고 이것은 모두 false 값으로 인지된다.

그 나머지 값들은 truthy한 값으로 모두 true 값으로 인지된다.

※ null : 명확하게 비어있는 Empty 값이라고 지정해주는 경우이다. null 값으로 할당되어진다.

※ undefined : 선언은 되었지만 값이 할당되어지지 않은 경우, 비어있는지 값이 있는지 모르는 경우이다.

4. Symbol 타입 (원시 타입)

Map이나 다른 자료 구조에서 고유한 식별자가 필요하거나

동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 고유한 식별자로 쓰인다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
 
console.log(symbol1 === symbol3) // false

반대로 동일한 Symbol을 만드는 경우는 아래와 같다.

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
 
console.log(gSymbol1 === gSymbol2) // true

미리 살펴본 함수 타입을 제외하고, 객체(Object) 형식은 다음 포스팅에서 살펴볼 것이다.

Reference