자바스크립트 데이터 타입

 

본 포스팅은 자바스크립트를 어느정도 접해본 후 생길 수 있는 의문점을 심도있게 다루는 포스팅입니다.

주제는 아래와 같습니다.

• 자바스크립트 변수 타입에 따른 참조 방식 : 흔히 call by value, call by reference 라 알려진 개념
• 자바스크립트의 불변성 : 가변 객체와 불변 객체
• undefined 와 null 차이

 

🗓  자바스크립트의 변수 타입

자바스크립트의 데이터 타입은 크게 기본형(primitive type) 과 참조형(reference type) 두 가지로 분류할 수 있습니다. 

기본형(문자형, 숫자형, 불린 값 등) 과 참조형(배열, 날짜, 함수 등)을 분리하는 기준은 데이터의 저장 방식입니다.

기본형과 참조형의 식별자에 데이터를 할당할 때, 

• 기본형은 메모리상에 고정된 크기로 저장된 데이터의 '주소'값을 그대로 할당받고,
• 참조형은 객체 내부 데이터 집합의 '주소'값을 할당 받습니다.

직관적으로 이해되지 않습니다. 아래에서 변수 할당을 통해 과정을 이해해봅시다.

 

식별자와 변수

변수: 변할 수 있는 무언가 -> 반드시 숫자여야 할 필요는 없습니다. 여기서 '무언가' 는 데이터,

식별자: 무언가(데이터)의 이름, 즉 어떤 데이터를 식별하는데 사용하는 이름을 뜻합니다.

 

let a = 20; 에서 식별자는 a, 변수는 20을 뜻합니다. 통상적으로 a 역시 변수라고 부르지만, 엄격히 정의하면 a 는 식별자에 해당합니다.

 

변수의 선언과 할당 과정

1) 기본형 데이터 선언과 할당

이제 식별자 a 에 변수 'abc'를 할당해보겠습니다. 이 과정은 식별자 a의 선언과, 변수 'abc'를 할당 하는 2과정을 묶어 표현한 것입니다. 이는 위에서 언급한 기본형 데이터가 메모리상의 데이터 '주소'값을 할당 받는 과정을 그림으로 표현한 것입니다.

let a = 'abc'

1) 우선 메모리의 @1003 주소에 식별자 a의 공간을 확보합니다. 이는 확보된 공간의 식별자를 a 로 지정한 것입니다.

2) 빈 공간 @5004에 문자열 'abc'를 지정합니다.

3) a 식별자의 위치를 검색하고(@1003), 앞서 저장한 'abc'의 주소(@5004)를 @1003의 공간에 대입합니다.

 

@1003의 위치에 'abc' 를 직접 대입 대신 한 단계를 거치는 이유는,

데이터를 자유롭게 변환하고 메모리를 효율적으로 관리할 수 있기 때문입니다.

(한단계 거쳐 대입을 했지만, 이것이 참조형이란 뜻은 아닙니다.)

 

2) 참조형 데이터 선언과 할당

let obj1 = {
    a : 'like',
    b : 'lion'
}

 

1) 변수 영역 @1003 주소에 식별자 obj1의 공간을 확보합니다.

2) obj1 에 저장하려는 객체는 여러 프로퍼티(지금은 2개지만)로 이루어진 데이터입니다. 때문에 여러 프로퍼티를 저장할 수 있는 공간을 확보해야하므로, 별도의 변수영역(프로퍼티 변수 @7103, @7104)을  확보하고, 해당 영역 범위의 주소를 @5001에 저장합니다.

2-1) @5001 주소의 데이터를  "@7103 ~ ?" 라고 표현했습니다. 현재는 7103 과 7104만 값이 할당돼있지만, 프로퍼티가 얼마나 더 생길지 모르기 때문에 그 가변성을 "@7103 ~  ?" 으로 나타냈습니다.

3) 변수 영역 @7103  과 @7104 주소에 각각 주소 @5003, @5004 를 배정하였습니다. @5003, @5004 주소에 우리가 지정한 값들을 저장합니다.

 

 

 

주소 직접 대입  VS  참조 대입

데이터를 식별자에 직접 대입한다고 가정해봅시다.

1000개의 서로 다른 변수를 생성 후, 같은 값(ex: 100)을 할당한다면, 1000개의 서로 다른 8바이트의 저장공간이 필요하게 됩니다.

(숫자형 데이터는 8바이트의 메모리 공간이 필요) 

하지만 직접 대입이 아닌 참조형 대입 방식은, 위 그림처럼 별도의 주소공간에 값 100을 할당 하여, 서로 다른 1000개의 식별자에 값을 대입할 수 있습니다. 

이를 숫자로 비교하자면, 아래 그림과 같습니다. 직접 대입시 8000byte, 참조 대입시 2008byte의 메모리 공간을 소요함으로 후자의 메모리 효율이 더 좋은 것을 볼 수 있습니다.

 

참조 카운트와 GC

변수 a 에 'abc' 라는 값을 우선 할당하였습니다.

그리고 다시 기존 a 변수에 'def' 라는 값을 재할당 해보았습니다. 이 과정을 주소 참조의 과정으로 살펴보겠습니다.

let a = 'abc'
a = 'def'

변수 a 는 @5004 주소의 'abc'를 바라보다가,

재할당이 되면서 @5005 주소의 값을 바라보게 됩니다.

그렇다면 @5003은 더 이상 자신의 주소를 참조하는 변수가 하나도 없게 됩니다.

어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수를 참조 카운트라고 합니다.

그렇게 @5004의 참조 카운트는 0이 되고, @5005의 참조 카운트는 1이 됩니다.

 

가비지 컬렉터 (Garbage Collector)

@5004 처럼 참조 카운트가 0 인 메모리 주소는 가비지 컬렉터의 수거 대상이 됩니다.

수거 대상이 되었다고 즉시 수거(collecting) 되는 것은 아니고, 메모리 사용량이 포화 상태에 임박할 때 자동으로 수거 됩니다.

수거된 주소는 다시 새로운 값을 할당 받을 수 있는 빈 공간이 됩니다.

 

* 보충설명: @5004 주소에 저장된 'abc'값은 변하지 않고, @5005 주소에 새로운 값('def')를 저장하여 식별자 a에 할당하였다.

코드상으로 볼 땐 a 의 값이 변경됐으니 불변성이 지켜지지 않았다고 볼 수 있지만, @5004 주소의 'abc'가 변한 것이 아니기 때문에 불변성이 지켜졌다.

 

🗓  가변성 객체와 불변성 객체

자바스크립트는 기본형과 참조형으로 나뉩니다. 이제 참조형 객체 데이터의 불변성을 지키는 방법을 알아보겠습니다.

 

1) 가변 객체

 

user 객체를 user2 라는 변수에 복사하여 새로운 name 을 할당합니다.

changeName() 함수 내부에서 newUser.name = newName 표현식으로 name 프로퍼티에 새로운 값을 할당하는데, 이는 기존 user 객체의 name 프로퍼티도 함께 변경시킵니다.  위에서 설명한 참조형 대입 때문입니다.

user2 객체의 name 을 변경할 때, user 객체의 name 도 변하기 때문에 user 는 가변객체입니다.

let user = {
    name: "hoo",
    gender: 'male'
}

let changeName = (user, newName) => {
    let newUser = user;
    newUser.name = newName;
    return newUser;
}

let user2 = changeName(user, "LIM");

console.log('user: ', user)  // user:  {name: "LIM", gender: "male"}
console.log('user2: ', user2)  // user2:  {name: "LIM", gender: "male"}

하지만 이런 결과를 원했다면, 굳이 user 를 복사하여 user2를 생성하지 않을 것입니다.

 

 

2) 불변 객체

 

copyUser() 함수를 통해 user 와 다른 새로운 객체를 리턴합니다.

copyUser() 함수로 리턴된 객체는 copiedUser 변수에 할당되고,  user 와는 전혀 다른 객체임을 알 수 있습니다.

 

기존의 user 객체를 변하지 않는, 즉 불변 객체로 만들 수 있습니다. 이렇게 불변객체를 만드는 것을 불변성이라 합니다.

이를 얕은 복사 라고 인지만 하고 있겠습니다. 아래에서 더 자세히 다뤄보겠습니다.

let user = {
    name: "hoo",
    gender: 'male'
}

let copyUser = (user, newName) => {
    return {
        name: newName,
        gender: user.gender
    }
}

let copiedUser = copyUser(user, "LIM")

console.log('user: ', user)  // user:  {name: "hoo", gender: "male"}
console.log("copiedUser: ", copiedUser)  // copiedUser:  {name: "LIM", gender: "male"}

user 의 불변성은 지켰지만 위 코드의 함정을 파악하신 분도 있을 것 입니다.

gender 프로퍼티를 기존 user 객체 값에서 가져왔다는 점을 제외하곤 딱히 객체를 복사하는 느낌이 들지 않습니다.

왜냐하면, 객체를 복사하기 위해 user의 프로퍼티(name, gender) 를 일일이 하드코딩하였습니다. 만약 프로퍼티의 개수가 10개만 넘어도, 이를 일일이 적으며 복사하는 일이 번거롭게 느껴질겁니다.

 

아래와 같은 방법으로 불변 객체를 만들 수 있습니다. (얕은복사)

let copyUser = (user, newName) => {
    let result = {};
    for (var prop in target){
	    result[prop] = target[prop]
    }
    return result
}

 

이제 우리는 객체를 복사하면서, 불변 상태를 유지할 수 있게 됐습니다. 하지만 이 역시 얕은 복사라는 한계에 봉착합니다. 

다음 포스트에선 얕은 복사와 깊은 복사를 더 자세히 다뤄보도록 하겠습니다.

 

🗓  undefined / null

undefined와 null 모두 '없음'을 나타내지만, 둘의 의미와 용도는 미세하게 다릅니다.

 

undefined 는 1) 사용자가 직접 지정하는 경우와 2) 자바스크립트 엔진이 자동으로 부여하는 경우로 나뉩니다.

2)의 경우를 자세히 알아보죠.

 

1. 값을 대입하지 않은 변수 

let a; // undefined

 

2. 객체 내부에 존재하지 않는 프로퍼티에 접근할 때 

let obj = {
     'title' : 'junior-datalist'
}

obj.subtitle // undefined

3. return 문이 없거나 호출되지 않은 함수의 실행 결과

function solution(){
    let a = 1;
}

solution() // undefined

 

하지만 우리는 1)의 경우처럼 명시적으로 undefined 를 지정하지 않기로 합니다.

대신 null 을 사용합니다. 이렇게 하여 '비어있음'을 나타내고 싶을 때, 자바스크립트 엔진이 부여한 것인지 사용자가 직접 부여한 것(null 값 부여)인지 구분할 수 있습니다.

 

✅  정리하자면, undefined 는 어떤 변수에 값이 존재하지 않음을 자바스크립트 엔진이 자동으로 부여한 것, null은 사용자가 명시적으로 '없음'을 표현한 것입니다. 

 

 

 

 

* 참고

- 코어 자바스크립트 ( 정재남 )

- https://evan-moon.github.io/2020/01/05/what-is-immutable/