[JS] 자바스크립트 데이터 타입

1. 자바스크립트의 데이터 타입: 기본형과 참조형 

자바스크립트의 데이터 타입에는 2가지가 있다. 기본형(prototype)과 참조형(refrence type)이다. 

기본형	Number, String, Boolean, null, undefined, Symbol
참조형	Array, Function, Date, Map, Set, RegExp

기본형은 불변값이고, 참조형은 보통 가변값이다. 컴퓨터는 데이터를 늘릴경우를 대비하기 위해, 중복데이터에 대해 효율성을 높이기 위해 변수영역과 데이터 영역을 분리하게 된다. 기본형이 불변값인 이유는 기본값에서의 변경이 새로 만드는 동작을 통해서만 이루어지기 때문이다. 반면에 참조형은 기본형과는 달리 객체의 변수영역이 별도로 존재하여 다른값을 얼마든지 대입할수있고, 데이터 영역에 저장된 값은 모두 불변값이다. 따라서 가변값이라고 부르는것이고, 재할당 명령을 내릴시에 참조카운트가 0인 이전 메모리 주소는 가비지 콜렉터가 수거해가게된다. 

참조형 데이터의 할당

 

2. 기본형과 참조형의 변수복사

기본형은 복사를 할때 값이 담긴 주소값을 바로 복제하게되지만, 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제하게된다. 따라서 기본형은 객체의 프로퍼티를 변경시에 서로 다른 주소를 바라보게 되지만, 참조형데이터는 여전히 같은 주소를 바라보게 된다. 참조형데이터를 불변객체로 만들기 위해서, 얕은복사와 깊은복사의 개념에 대해 알아야한다. 얕은 복사는 바로 아래단계의 값만을 복사하는 방법이고, 깊은 복사는 내부의 모든값을 모두 찾아서 전부 복사하는 방법이다. 얕은 복사를 시행할 경우 깊이가 1인 기본형 프로퍼티만 있다면 문제가 되지 않겠지만, 참조형 데이터가 프로퍼티로 있을 경우에는 다시 재귀적으로 내부의 프로퍼티까지 모두 복사를 해주는 깊은 복사를 해주어야 문제가 생기지 않는다.

기본형과 참조형의 복사 비교

얕은복사를 하기 위해서는 1) assign함수이용 2) 전개연산자 이용 이렇게 2가지의 방법이 있다. 

얕은복사 방법

깊은 복사를 하기위해서는 1) 깊은복사를 시행하는 재귀함수를 생성 2)String을 Json으로 변환 3) loadash 라이브러리를 사용 이렇게 3가지 방법이 있다. 

깊은복사방법

3. undefined 와 null

자바스크립트에는 '없음'을 나타내는 값에 undefined와 null 2가지가 있다. undefined는 사실 사용자가 지정할수도 있겠지만, 보통 자바스크립트 엔진이 값이 존재하지 않을 때 자동으로 부여하게 된다. 값을 대입하지 않아서 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할때, 객체 내부에 존재하지 않는 프로퍼티에 접근하려할때, return문이 없거나 호출되지 않는 함수의 실행결과에는 undefined가 부여된다. null은 '비어있음'을 명시적으로 나타내고 싶을때 사용자가 할당하는 값이다. 이 두가지를 혼용하지 않기 위해서는 undefined를 명시적으로 할당하지 않기만하면된다. 다만, null을 쓸때 주의할점은 typeof(null)은 object라는 결과를 반환하는 자바스크립트 버그있기때문에 어떤 변수값이 null인지 확인하기 위해서는 동등연산자가 아닌 일치연산자로 비교를 해주어야한다. 

null과 undefined 비교

 

✨ 이 글은 정재남님의 코어자바스크립트를 참고하여 작성된 글입니다. 프론트엔드 개발자라면 꼭 사서 읽어보시는 것을 추천드립니다.