코어 자바스크립트 스터디 1주차 - 데이터 타입

Genie·2021년 11월 18일

목록 보기

1/4

회고
자바스크립트에 대해 좀 더 알아보고자, 스터디에 참여하게 되었다. 오늘은 첫 시간! 시간을 정해놓고 40분간 독서를 하고, 30분간 정리된 내용에 대해 이야기하면서 이해를 더 잘 할 수 있었다. 특히, 삼색볼펜법이 스터디를 할 때 활용하면 괜찮은 방법이라는 생각이 든다. 앞으로 남은 주차도 기대가 된다. 올해가 가기전에 자바스크립트를 확실히 알고 넘어가야겠다.

데이터 타입의 종류

기본형

숫자, 문자열, 불리언, null, undefined , Symbol

참조형

객체, 배열, 함수, 날짜, 정규표현식, Map, WeakMap, Set, WeakSet

기본형은 값이 담긴 주솟값을 바로 복제하는 반면, 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점이 다르다.

기본형은 불변성을 띕니다.

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

자바스크립트는 숫자형 데이터의 경우 8바이트를 확보해놓는다. 1비트는 부호, 11비트는 지수부, 52비트는 가수부로 사용한다.

문자열은 특별히 확보해놓는 공간이 없다.

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

식별자와 변수

변수 : 변할 수 있는 데이터가 담길 수 있는 공간 또는 그릇
식별자 : 어떤 데이터를 식별하는 데 사용되는 이름, 변수명

변수 선언과 데이터 할당

var a;
어떤 의미가 떠오르는가 ?

변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다.
사용자가 a에 접근하고자 하면, 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 
해당 공간에 담긴 데이터를 반환 한다.

자바스크립트는 변수 영역과 데이터 영역이 따로 존재한다.

이유 ?
미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면 변환한 데이터를 다시 저장하기 위해서는 '확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업'이 선행되어야 한다. 만약 중간에 있는 데이터를 늘려야 한다면 해당 공간보다 뒤에 있는 데이터를 전부 뒤로 옮기고, 이동시킨 주소를 각 식별자에 다시 연결해야하는 작업을 해야하므로, 비효율적이다. 결국, 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적이다.
또한, 중복된 데이터에 대한 처리 효율이 높아진다. 500개의 변수를 생성해서 숫자 5를 할당하려고 하면, 500x8 바이트를 써야한다. 하지만, 5를 별도의 공간에 한 번만 저장하고 해당 주소만 입력한다면 주소 공간의 크기가 2바이트 라고 가정할 때, 500x2 + 8 인 1008바이트만 사용하면 되므로 중복된 데이터에 대한 처리 효율이 높아진다.

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

불변값

기본형 데이터인 숫자, 문자열, boolean, null, undefined, symbol 은 모두 불변값이다.
문자열 값도 한 번 만든 값을 바꿀 수 없고, 숫자 값도 다른 값으로 변경할 수 없다. 변경은 새로 만드는 동작을 통해서만 이루어진다. 이것이 불변값의 성질이며, 한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

가변값

기본형 데이터와의 차이는 '객체의 변수(프로퍼티) 영역'이 별도로 존재한다는 점이다. '데이터 영역'은 기존의 메모리 공간을 그대로 활용하고 있다.

중첩 객체

참조형 데이터의 프로퍼티에 다시 참조형 데이터를 할당하는 경우를 중첩 객체 라고 한다.

참조 카운트

어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수
참조 카운트가 0인 메모리 주소는 가비지 컬렉터의 수거대상이 된다.

변수 복사

기본형 데이터와 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다.
참조형 데이터는 별도의 변수 영역을 가지고 있고, 그 별도의 변수 영역을 확보한 만큼의 주소들을 데이터 영역에 저장한다.
변수 복사를 하고 난 이후에는 기본형 데이터를 복사한 변수의 경우에는 다른 객체를 바라보는 상태이나, 참조형 데이터인 객체를 가지고 있는 obj 변수들의 경우에는 같은 객체를 바라보는 상태이다.
이해가 안된다면 18p 예시 참고

불변 객체

값으로 전달받은 객체에 변경을 가하더라도, 원본 객체는 변하지 않아야 한다. 이럴 때 불변 객체가 필요하다. 새로운 객체를 만들어서 관리한다.

얕은 복사와 깊은 복사

얕은 복사는 바로 아래 단계의 값만 복사, 즉 그 주솟값만 복사한다는 의미
ex) 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 주솟값만 복사한다.
깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법

깊은 복사를 수행하려면, 참조형 데이터의 경우에는 그 내부의 프로퍼티들을 모두 복사해야 한다.

if(typeof target === 'object' && target !== null) {
  for(var prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
  }
}

undefined 와 null

undefined : 사용자가 명시적으로 지정할 수도 있고, 자바스크립트 엔진이 자동으로 부여하는 경우도 있다.
1) 값을 대입하지 않은 변수
2) 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
3) return 문이 없거나 호출되지 않는 함수의 실행 결과

비어있는 요소와 undefined 할당한 요소는 출력 결과가 다르다. 비어있는 요소의 경우에는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외된다.

배열의 경우에는 특정 인덱스에 값을 지정할 때 비로소 빈 공간을 확보하고 인덱스를 이름으로 지정하고 데이터의 주솟값을 저장하는 동작을 한다. 즉, 값이 지정되지 않은 인덱스는 '아직은 존재하지 않는 프로퍼티' 이므로 undefined 를 return 할 것이다.

같은 의미를 가진 null
- 비어있음을 명시적으로 나타내고 싶을 때는 undefined 가 아닌 null 을 쓰면 된다. 여러 개발자가 협업하는 과정에서 둘 다를 동시에 쓰지 않도록 주의하자. null 로 통일하는 것을 지향한다.
- null 사용 시 주의할 점 : type of null 이 object 라는 점이다. 이는 자바스크립트 자체 버그.
- 어떤 변수가 실제로 null 인지를 판별하려면 일치 연산자(===) 를 써야만 정확히 판별이 가능하다.

Genie

차근차근

다음 포스트