[코어 자바스크립트 북스터디 1주차] 1장. 데이터 타입

✅ 삼색 볼펜법 활용
빨간색: 핵심내용
파란색: 핵심은 아니지만 중요하다고 생각되는 내용
초록색: 흥미로운 내용

1장 데이터 타입의 목표

자바스크립트가 데이터를 처리하는 과정을 살펴봄으로써 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 이해하고 이를 적절히 활용할 수 있게 되는 것을 목표로 한다.

1. 데이터 타입의 종류

자바스크립트 데이터 타입의 종류
- 기본형: 숫자, 문자열, 불리언, null, undefined, 심볼(ES6)
- 참조형: 객체, 배열, 함수, 날짜, 정규표현식, Map, WeakMap, Set, WeakSet 등

기본형과 참조형의 구분 기준
- 기본형: 값이 담긴 주솟값을 바로 복제
- 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제

2. 데이터 타입에 관한 배경지식

2-1. 메모리와 데이터

자바스크립트가 등장한 시기는 메모리 용량이 과거보다 월등히 커진 상황이었기 때문에 상대적으로 메모리 관리에 대한 압박에서 자유롭다. 숫자의 경우 정수형인지 부동소수형인지를 구분하지 않고 64비트, 즉 8바이트를 확보한다.

모든 데이터는 바이트 단위의 식별자, 더 정확하게는 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다.

2-2. 식별자와 변수

- 변수: 변할 수 있는 데이터
- 식별자: 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명!

3. 변수 선언과 데이터 할당

3-1. 변수 선언

변수란, 변경 가능한 데이터가 담길 수 있는 공간 or 그릇

3-2. 데이터 할당

데이터 할당 과정
1. 데이터를 저장할 별도의 메모리 공간을 확보 및 저장
2. 그 메모리 주소를 변수 영역에 저장

변수 영역에 값을 직접 대입하지 않고 한 단계를 거치는 이유
데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위함이다.

4. 기본형 데이터와 참조형 데이터

4-1. 불변값

변수와 상수의 차이점
변수: 바꿀 수 있음
상수: 바꿀 수 없음

변수와 상수를 구분하는 기준
변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다.

불변성 여부를 구분하는 기준
불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.

불변값의 성질
값 변경은 새로 만드는 동작을 통해서만 이뤄진다. 또한 한번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

4-2. 가변값

참조형과 기본형의 차이점
참조형과 기본형 데이터와의 차이는 '객체의 변수(프로퍼티) 영역'이 별도로 존재한다는 점이다.

참조 카운트가 0인 메모리 주소는 가비지 컬렉터의 수거 대상이 된다.

가비지 컬렉터는 런타임 환경에 따라 특정 시점이나 메모리 사용량이 포화 상태에 임박할 때마다 자동으로 수거 대상들을 수거한다. 수거된 메모리는 다시 새로운 값을 할당할 수 있는 빈 공간이 된다.

4-3. 변수 복사 비교

변수를 복사하는 과정
기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다. 하지만 데이터 할당 과정이 다르다.
- 기본형: 주솟값을 복사하는 과정이 한 번만 이뤄짐
- 참조형은 한 단계를 더 거치게 됨

참조형 데이터가 '가변값'이라고 설명할 때의 '가변'은 참조형 데이터 자체를 변경할 경우가 아니라 그 내부의 프로퍼티를 변경할 때만 성립한다.

5. 불변 객체

5-1. 불변 객체를 만드는 간단한 방법

불변 객체가 필요한 상황
값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우

5-2. 얕은 복사와 깊은 복사

- 얕은 복사: 바로 아래 단계의 값만 복사하는 방법
- 깊은 복사: 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법

얕은 복사는 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미로 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터 주소를 가리키게 된다.

즉, 얕은 복사는 사본을 바꾸면 원본도 바뀌고, 원본을 바꾸면 사본도 바뀐다.

6. undefined와 null

자바스크립트 엔진은 사용자가 어떤 값을 지정할 것이라고 예상되는 상황인데 지정하지 않았을 때 undefined를 반환한다.

undefined를 반환하는 상황
1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
3. return 문이 없거나 호출되지 않는 함수의 실행 결과

비어 있는 요소
'비어 있는 요소'는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외된다.
존재하지 않는 프로퍼티에 대해서는 순회할 수 없는 것이 당연하다.

배열에 대해 흔히하는 착각
배열은 무조건 length 프로퍼티의 개수만큼 빈 공간을 확보하고 각 공간에 인덱스를 이름으로 지정할 것이라고 생각하기 쉽지만, 실제로는 객체와 마찬가지로 특정 인덱스에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 이름으로 지정하고 데이터의 주솟값을 저장하는 등의 동작을 한다. 즉, 값이 지정되지 않은 인덱스는 '아직은 존재하지 않는 프로퍼티'에 지나지 않는 것이다.

두 가지 유형의 undefined
1. 값으로써 어딘가에 의도적으로 할당된 undefined: 실존하는 데이터
2. 자바스크립트 엔진이 반환하는 undefined: 문자 그대로 값이 없음

자바스크립트 엔진이 undefined를 반환하는 경우는 우리의 통제 범위를 벗어나므로 모든 undefined가 오직 이 경우만 해당하게끔 해주면 된다. 다시 말해 직접 할당하지 않는 것이다.
'비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 쓰면 된다.

null 사용 시 한 가지 주의할 점
바로 typeof null이 object라는 점. 이는 자바스크립트 자체 버그이다.

1주 차 회고

좋은 기회로 참여하게 된 <코어 자바스크립트> 북스터디! 방식은 40분간 책을 읽고, 30분간 책을 읽으면서 밑줄 친 부분(삼색볼펜법 활용)을 공유하고, 이해가 안 갔던 부분들에 대해 질의응답 후 30분간 블로그에 정리하는 방식이다.

서로 책을 읽으면서 간단한 소감과 궁금했던 점에 대해서, 또 중요하게 뽑았던 부분에 대해서 얘기를 나누면서 같은 공부를 하는 사람들과 같은 부분을 읽으면서도 다양한 생각이 나오는 것을 느꼈고, 공감하는 부분도 있어서 생각을 나누는 것이 너무 즐거웠다!

또한 팀원 분 중 "참조형 데이터의 '가변'은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립한다."라는 문장에 대해 잘 모르겠다고 하셨는데, 내가 이해한 방식으로 설명을 드렸고, 

💬 내가 드렸던 설명: 말 그대로 참조형 데이터의 내부 프로퍼티를 바꿀 때만 가변성이 적용되며, 만약 데이터를 아예 바꾸고자 한다면 새로운 객체를 할당함으로써 새로운 공간에 새 객체가 저장되고, 그 주소를 참조함으로써 값이 아예 달라져버리는 것이다...!

 

뭐 이런 식으로 드렸던 거 같은데 허접한 설명인데도 불구하고 바로 이해해주셔서 보람찼다! 👍

사실 최근 들어서 같은 공부를 하는 분들과의 소통과 연대가 너무 즐겁고 재밌는데, 나머지 챕터들도 기대된다!