🏆 Javascript(0) 데이터 타입, 변수 선언

제일 처음 배운 프로그래밍 언어는 C언어였다. C언어는 데이터 타입에 대해 굉장히 엄격한데, 자바스크립트는 그런 C언어와 사뭇 다르다.

우선 자바스크립트의 데이터 타입을 크게 두 가지로 나눠보겠다.

원시타입(primitive)

원시타입은 말 그대로 객체가 아니고 메소드도 가지지 않는 형태이다.

number, string, boolean, undefined, null, bigint, symbol

총 7가지의 타입이 있으며 이 값들은 모두 불변(immutable)하다.

하지만 보통 변수가 상수로 선언되어 있지 않으면 값을 바꿀 수 있다. 원시 타입이 불변하다는 말은 무슨 뜻일까?

let a = 3;
a = 5;

다음과 같은 문장이 있을 때 변수 a의 값은 5로 변하게 된다.

하지만 이것은 값 자체가 변한 것이 아니라 새로운 메모리를 할당받고 그 안에 5라는 값을 저장한 형태다.

또 원시타입은 메소드를 가지지 않는 형태라고 말했다.

const str = "Hello";
console.log(str.length);

하지만 다음과 같이 String의 기본 속성인 length를 비롯한 다양한 메소드를 사용할 수 있다.

이것은 원시 래퍼 객체라는 것 때문인데, null과 undefined를 제외하고는 모두 원시 객체로 감싸져 있기 때문에 기본 메소드들을 사용할 수 있다.

참조타입(reference)

참조 타입은 다음과 같다.

const arr = [1,2,3,4];

자바스크립트에서 변수에 메모리를 할당할 때 데이터 타입에 따라 메모리의 두 부분인 스택과 힙에 다르게 할당된다.

스택에는 원시타입들이 저장되고 힙에는 객체처럼 참조타입의 데이터가 저장된다.

그리고 참조 타입 데이터의 포인터가 스택에서 할당한 메모리 공간에 저장되는 형식이다.

예전에 힙은 동적 데이터를 할당하는 공간이라고 배웠는데, 아마 배열과 객체같은 요소들은 크기가 동적으로 변하기 때문에 힙에 할당되는 것 같다.

원시타입을 제외한 거의 모든 데이터 타입들이 참조타입이다. 심지어 함수도 참조타입이다.

function changeNumber(number) {
  number += 3;
  console.log("print in function: ", number);
}

function changeArr(arr) {
  arr.push("World!!");
  console.log("print in function: ", arr);
}

let number = 3;
const arr = ["Hello"];

changeNumber(number);
changeArr(arr);

console.log(number);
console.log(arr);

print in function:  6
print in function:  [ 'Hello', 'World!!' ]
3
[ 'Hello', 'World!!' ]

다음과 같이 함수의 인자로 원시, 참조 타입의 데이터를 넘길 때도 둘의 차이가 나타난다.

참조 타입은 참조된 메모리의 포인터가 전달되기 때문에 수정 사항이 외부에도 반영되지만, 원시 타입은 값의 복사본이 넘겨지기 때문에 외부에 변화가 없다.

var, const, let

자바스크립트를 공부하다보면 호이스팅이라는 말을 많이 본다. 함수나 변수의 선언을 유효범위의 최상단으로 끌어올리는 것인데, 이때 할당은 이루어지지 않는다.

var, const, let의 뚜렷한 차이는 스코프에서 나타난다. var는 함수 스코프, const와 let은 블록 스코프이다.

그리고 var는 변수 선언 이전에 사용해도 에러가 나지 않지만 let, const는 에러를 발생시킨다. 마치 호이스팅이 되지 않는 것 같다.

또한 var는 같은 이름으로 변수의 재선언이 가능하는 등 다양한 면에서 느슨하게 느껴지는데, 이렇게 때문에 지금은 사용이 권장되지 않는다.

function outer() {
  const a = 5;
  let b = 3;

  function inner() {
    console.log(a);
    console.log(b);
    let b = 5;
    const a = 3;
  }

  inner();
  console.log(a);
  console.log(b);
}

outer();

위에서 자바스크립트의 선언들은 호이스팅 된다고 말했다. 하지만 let과 const는 보통 호이스팅 되지 않는다고 알려져있다.

정확하게 말하자면 호이스팅 되지 않는 것처럼 보인다.

ReferenceError: Cannot access 'a' before initialization

위와 같은 코드는 에러를 발생시킨다. 그리고 그 에러의 내용은 변수의 초기화가 되기 전에 접근할 수 없다는 뜻이다.

호이스팅 되지 않는다면 외부 스코프의 변수에 참조할 수 있을 텐데 왜 그럴까?

여기서 새로운 개념이 나온다.

TDZ(Temporal Dead Zone)

TDZ는 let, const, class 형태의 데이터 선언 전에 접근하는 것을 막는 개념이다. 위의 코드에서 inner 함수를 호출 시 에러가 발생하는 것도 TDZ 때문이다.

class Vehicle {
  constructor(type, wheel) {
    this.type = type;
    this.wheel = wheel;
  }
}

class Car extends Vehicle {
  constructor(type, wheel, owner) {
    super(type, wheel);
    this.owner = owner;
  }
}

const myCar = new Car("truck", "4", "Am");

console.log(myCar);

다음과 같은 코드는 에러가 나지 않지만

class Car extends Vehicle {
  constructor(type, wheel, owner) {
    this.owner = owner;
    super(type, wheel);
  }
}

위와 같이 super 이전에 this를 참조하려고 하면 레퍼런스 에러를 발생시킨다.

이런 현상도 TDZ 개념이 적용됐기 때문이다.